elink-star
/
epmet-oper-lingshan
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'dev2' of http://git.elinkit.com.cn:7070/r/epmet-oper into dev2

master
dai 4 years ago
parent
41bec46dae 92ff8e94c1
commit
25ad95bf59
6 changed files with 1639 additions and 22388 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22982
      epmet-oper-web/package-lock.json
  2. BIN
      epmet-oper-web/src/assets/img/arrow-down.png
  3. BIN
      epmet-oper-web/src/assets/img/arrow-up.png
  4. 219
      epmet-oper-web/src/views/components/resiForm.vue
  5. 631
      epmet-oper-web/src/views/components/resiSearch.vue
  6. 173
      epmet-oper-web/src/views/modules/base/resi.vue

22982
epmet-oper-web/package-lock.json
View File

File diff suppressed because it is too large

BIN
epmet-oper-web/src/assets/img/arrow-down.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 225 B

BIN
epmet-oper-web/src/assets/img/arrow-up.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 225 B

219
epmet-oper-web/src/views/components/resiForm.vue
View File

@ -0,0 +1,219 @@
<template>
<div class="resi-container">
<el-form class="resi-form">
<el-row v-for="(item, index) in sliceList(formList, 4)" :key="index" class="resi-row" :gutter="20">
<el-col v-for="n in item" :key="n.id" :span="6">
<el-form-item>
<div class="resi-cell">
<div class="resi-cell-label">{{n.label}}</div>
<div class="resi-cell-value" :class="n.item_type === 'radio' && 'resi-cell-value-radio'">
<el-input
v-if="n.item_type === 'input'"
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
<el-date-picker
v-else-if="n.item_type === 'date'"
v-model="value"
class="resi-cell-input"
type="date"
size="small"
placeholder="选择日期">
</el-date-picker>
<el-select v-else-if="n.item_type === 'select'" v-model="value" placeholder="请选择" size="small" class="resi-cell-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<template v-else-if="n.item_type === 'radio'">
<el-radio label="1">备选项</el-radio>
<el-radio label="1">备选项</el-radio>
</template>
<template v-else-if="n.item_type === 'checkbox'">
<el-checkbox-group v-model="checkList">
<el-checkbox label="复选框 A"></el-checkbox>
<el-checkbox label="复选框 B"></el-checkbox>
</el-checkbox-group>
</template>
</div>
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
let form = {}
function initForm (obj, arr) {
console.log('formInfo', obj)
if (Object.keys(obj).length > 0) {
form = { ...obj }
return
}
arr.forEach(item => {
form[item.column_name] = ''
// this.$set(form, item.column_name, '')
})
}
export default {
props: {
formList: {
type: Array,
default: function () {
return []
}
},
formInfo: {
type: Object,
default: function () {
return {}
}
}
},
data () {
console.log('data-ttttt--', this.formList)
initForm(this.formInfo, this.formList)
return {
openSearch: false,
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
form,
value: '',
checkList: ['选中且禁用', '复选框 A']
}
},
computed: {
sliceList () {
return function (data, count) {
if (data !== undefined) {
let index = 0
let arrTemp = []
for (let i = 0; i < data.length; i++) {
index = parseInt(i / count)
if (arrTemp.length <= index) {
arrTemp.push([])
}
arrTemp[index].push(data[i])
}
return arrTemp
}
}
}
},
created () {
// this.initForm()
console.log('formInfo---ggg', this.form)
},
methods: {
initForm () {
console.log('formInfo', this.formInfo)
if (Object.keys(this.formInfo).length > 0) {
this.form = { ...this.formInfo }
return
}
this.formList.forEach(item => {
this.$set(this.form, item.column_name, '')
})
},
handleOpenSearch () {
this.openSearch = !this.openSearch
}
}
}
</script>
<style lang="scss">
.resi-container .resi-card {
position: relative;
overflow: visible;
}
.resi-down {
position: absolute;
left: 50%;
bottom: -10px;
display: flex;
justify-content: center;
align-items: center;
width: 46px;
height: 12px;
box-sizing: border-box;
margin-left: -23rpx;
cursor: pointer;
background: #FFFFFF;
border-radius: 0 0 10px 10px;
img {
display: block;
}
}
.resi-row-box {
height: 104px;
overflow: hidden;
transition: height .5s;
}
.resi-row-more {
height: max-content;
transition: height .5s;
}
.resi-form .resi-row {
margin-bottom: 0;
}
.resi-search {
.el-col {
text-align: right;
}
}
.resi-cell {
display: flex;
align-items: center;
.resi-cell-label {
width: 70px;
box-sizing: border-box;
margin-right: 15px;
text-align: right;
// line-height: 32;
}
.resi-cell-value-radio {
display: flex;
align-items: center;
min-height: 32px;
}
.resi-cell-input {
width: 180px;
}
.resi-cell-select {
width: 180px;
box-sizing: border-box;
margin-right: 10px;
&-middle {
width: 130px;
}
&-small {
width: 88px;
}
}
.resi-cell-select:last-child {
margin-right: 0;
}
}
</style>

631
epmet-oper-web/src/views/components/resiSearch.vue
View File

@ -0,0 +1,631 @@
<template>
<div class="resi-container">
<el-card class="resi-card">
<el-row class="resi-row-box" :class="openSearch && 'resi-row-more'">
<el-row v-for="(item, index) in sliceList(formList, 4)" :key="index" class="resi-row" :gutter="20">
<el-col v-for="n in item" :key="n.id" :span="6">
<div class="resi-cell">
<div class="resi-cell-label">{{n.label}}</div>
<div class="resi-cell-value" :class="n.item_type === 'radio' && 'resi-cell-value-radio'">
<el-input
v-if="n.item_type === 'input'"
v-model="form[n.column_name]"
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
<el-date-picker
v-else-if="n.item_type === 'date'"
v-model="form[n.column_name]"
class="resi-cell-input"
type="date"
size="small"
placeholder="选择日期">
</el-date-picker>
<el-select v-else-if="n.item_type === 'select'" v-model="form[n.column_name]" placeholder="请选择" size="small" class="resi-cell-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<template v-else-if="n.item_type === 'radio'">
<el-radio v-model="form[n.column_name]" label="1">备选项</el-radio>
<el-radio v-model="form[n.column_name]" label="2">备选项</el-radio>
</template>
<template v-else-if="n.item_type === 'checkbox'">
<el-checkbox-group v-model="form[n.column_name]">
<el-checkbox label="复选框 A"></el-checkbox>
<el-checkbox label="复选框 B"></el-checkbox>
</el-checkbox-group>
</template>
</div>
</div>
</el-col>
<!-- <el-col :span="12">
<div class="resi-cell">
<div class="resi-cell-label">小区名称</div>
<div class="resi-cell-value">
<el-select v-model="value" placeholder="请选择" size="small" class="resi-cell-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="value" placeholder="请选择" size="small" class="resi-cell-select resi-cell-select-middle">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="value" placeholder="请选择" size="small" class="resi-cell-select resi-cell-select-middle">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">户籍查询</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col> -->
</el-row>
<!-- <el-row class="resi-row" :gutter="20">
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
</el-row>
<el-row class="resi-row" :gutter="20">
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
</el-row>
<el-row class="resi-row" :gutter="20">
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
</el-row>
<el-row class="resi-row" :gutter="20">
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
</el-row>
<el-row class="resi-row" :gutter="20">
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
</el-row>
<el-row class="resi-row" :gutter="20">
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
</el-row>
<el-row class="resi-row" :gutter="20">
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-input
class="resi-cell-input"
size="small"
placeholder="请输入内容"
>
</el-input>
</div>
</div>
</el-col>
</el-row> -->
</el-row>
<el-row class="resi-search">
<!-- <el-col :span="20">
<el-button type="primary" size="mini">查询</el-button>
</el-col> -->
<el-col :span="24">
<el-button type="primary" size="mini" @click="handleSearch">查询</el-button>
</el-col>
</el-row>
<div class="resi-down" @click="handleOpenSearch">
<img v-if="openSearch" src="../../assets/img/arrow-up.png" />
<img v-else src="../../assets/img/arrow-down.png" />
</div>
</el-card>
</div>
</template>
<script>
export default {
props: {
formList: {
type: Array,
default: () => []
}
},
data () {
return {
openSearch: false,
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: '',
form: {},
checkList: ['选中且禁用', '复选框 A']
}
},
computed: {
sliceList () {
return function (data, count) {
if (data !== undefined) {
let index = 0
let arrTemp = []
for (let i = 0; i < data.length; i++) {
index = parseInt(i / count)
if (arrTemp.length <= index) {
arrTemp.push([])
}
arrTemp[index].push(data[i])
}
return arrTemp
}
}
}
},
created () {
this.initForm()
},
methods: {
initForm () {
this.formList.forEach(item => {
this.$set(this.form, item.column_name, '')
})
// console.log('formcccc---', this.form)
},
handleSearch () {
// console.log('formmmmm---', this.form)
this.$emit('search', this.form)
},
handleOpenSearch () {
this.openSearch = !this.openSearch
}
}
}
</script>
<style lang="scss">
.resi-container .resi-card {
position: relative;
overflow: visible;
}
.resi-down {
position: absolute;
left: 50%;
bottom: -10px;
display: flex;
justify-content: center;
align-items: center;
width: 46px;
height: 12px;
box-sizing: border-box;
margin-left: -23rpx;
cursor: pointer;
background: #FFFFFF;
border-radius: 0 0 10px 10px;
img {
display: block;
}
}
.resi-row-box {
height: 104px;
overflow: hidden;
transition: height .5s;
}
.resi-row-more {
height: max-content;
transition: height .5s;
}
.resi-row {
margin-bottom: 20px;
}
.resi-search {
.el-col {
text-align: right;
}
}
.resi-cell {
display: flex;
align-items: center;
.resi-cell-label {
width: 70px;
box-sizing: border-box;
margin-right: 15px;
text-align: right;
// line-height: 32;
}
.resi-cell-value-radio {
display: flex;
align-items: center;
min-height: 32px;
}
.resi-cell-input {
width: 180px;
}
.resi-cell-select {
width: 180px;
box-sizing: border-box;
margin-right: 10px;
&-middle {
width: 130px;
}
&-small {
width: 88px;
}
}
.resi-cell-select:last-child {
margin-right: 0;
}
}
</style>

173
epmet-oper-web/src/views/modules/base/resi.vue
View File

@ -0,0 +1,173 @@
<template>
<div>
<resi-search :form-list="formList" @search="handleSearch" />
<el-card class="resi-card-table">
<div class="resi-row-btn">
<el-button type="warning" size="small">导出</el-button>
<el-button type="success" size="small">新增</el-button>
<el-button type="primary" size="small">下载人口模板</el-button>
<el-button type="danger" size="small">导入人口数据</el-button>
</div>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="sizes, prev, pager, next"
:total="1000">
</el-pagination>
</div>
</el-card>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="80%"
:close-on-click-modal="true"
:before-close="handleClose">
<resi-form :form-list="formList" />
</el-dialog>
</div>
</template>
<script>
import resiSearch from '../../components/resiSearch.vue'
import resiForm from '../../components/resiForm.vue'
export default {
components: {
resiSearch,
resiForm
},
data () {
return {
dialogVisible: true,
openSearch: false,
currentPage: 1,
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
formList: [{
label: '所属网格',
item_type: 'input',
option_source_type: '',
sort: '1',
column_name: 'grid'
}, {
label: '小区名称',
item_type: 'select',
option_source_type: '',
sort: '1',
column_name: 'shequ'
}, {
label: '户籍查询',
item_type: 'input',
option_source_type: '',
sort: '1',
column_name: 'huji'
}, {
label: '本地户籍',
item_type: 'select',
option_source_type: '',
sort: '1',
column_name: 'huji1'
}, {
label: '姓名',
item_type: 'input',
option_source_type: '',
sort: '1',
column_name: 'username'
}, {
label: '手机号',
item_type: 'input',
option_source_type: '',
sort: '1',
column_name: 'userMobile'
}, {
label: '身份证',
item_type: 'input',
option_source_type: '',
sort: '1',
column_name: 'idcard'
}, {
label: '出生日期',
item_type: 'date',
option_source_type: '',
sort: '1',
column_name: 'birthday'
}, {
label: '联系人',
item_type: 'checkbox',
option_source_type: '',
sort: '1',
column_name: 'contact'
}, {
label: '联系人手机',
item_type: 'radio',
option_source_type: '',
sort: '1',
column_name: 'contactMobile'
}],
value: ''
}
},
methods: {
handleSizeChange (val) {
console.log(`每页 ${val} 条`)
},
handleCurrentChange (val) {
console.log(`当前页: ${val}`)
},
handleClose () {
this.dialogVisible = false
},
handleSearch (val) {
console.log('searchhh--', val)
}
}
}
</script>
<style lang="scss">
.resi-card-table {
margin-top: 20px;
}
.resi-row-btn {
margin-bottom: 13px;
}
</style>
Write Preview
Loading…
Cancel
Save