Browse Source

居民信息111

master
13176889840 4 years ago
parent
commit
dd505b4397
  1. 703
      epmet-oper-web/src/views/components/editResi.vue
  2. 575
      epmet-oper-web/src/views/components/resiForm.vue
  3. 336
      epmet-oper-web/src/views/components/resiSearch.vue
  4. 9
      epmet-oper-web/src/views/main.vue
  5. 1037
      epmet-oper-web/src/views/modules/base/resi.vue

703
epmet-oper-web/src/views/components/editResi.vue

@ -0,0 +1,703 @@
<template>
<div :id="formId" class="resi-container">
<el-form :ref="formId" class="resi-form" :model="form" :rules="rules" :label-width="labelWidth">
<template v-if="supportAdd">
<el-row style="margin-bottom: 10px;">
<el-col :span="24">
<el-button icon="el-icon-plus" size="small" @click="handleAddRow"></el-button>
</el-col>
</el-row>
<resi-form v-for="(item, index) in addList" :key="index" :ref="'baseForms' + index" :columns="3"
:form-list="item.itemList" :form-id="'baseForms' + item" />
</template>
<template v-else>
<el-row v-if="fixed" class="resi-row">
<!-- <el-col v-for="n in item" :key="n.id" :span="n.itemType === 'textarea'&&24 || (24/columns)"> -->
<el-col :span="6">
<el-form-item :prop="form.GRID_ID" label="所属网格">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
<el-select v-model="form.GRID_ID" placeholder="请选择网格" size="small"
clearable class="resi-cell-select"
>
<el-option
v-for="item in optionsG"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<!-- </div> -->
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :prop="form.VILLAGE_ID" label="所属小区">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
<el-select v-model="form.VILLAGE_ID" placeholder="请选择小区" size="small"
clearable class="resi-cell-select"
>
<el-option
v-for="item in optionsV"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<!-- </div> -->
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :prop="form.BUILD_ID" label="所属楼宇">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
<el-select v-model="form.BUILD_ID" placeholder="请选择楼号" size="small"
clearable class="resi-cell-select"
>
<el-option
v-for="item in optionsB"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<!-- </div> -->
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :prop="form.HOME_ID" label="所属家庭">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
<el-select v-model="form.HOME_ID" placeholder="请选择" size="small"
clearable class="resi-cell-select"
>
<el-option
v-for="item in optionsH"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<!-- </div> -->
</el-form-item>
</el-col>
</el-row>
<el-row v-for="(item, index) in sliceList(formList, columns)" :key="index" class="resi-row">
<!-- <el-col v-for="n in item" :key="n.id" :span="n.itemType === 'textarea'&&24 || (24/columns)"> -->
<el-col v-for="n in item" :key="n.itemId" :span="item.length === 1 ? 24 : (24/columns)"
:style="n.itemType === 'divider' && 'display: none;'">
<el-form-item :prop="n.columnName" :label="n.label">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
<template v-if="n.itemType === 'input' || n.itemType === 'textarea'">
<el-input
v-if="n.validType"
v-model="form[n.columnName]"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入内容"
>
</el-input>
<el-input
v-else
v-model="form[n.columnName]"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入内容"
>
</el-input>
</template>
<!-- <template v-if="n.itemType === 'textarea'">
<el-input
v-model="form[n.columnName]"
class="resi-cell-textarea"
size="small"
type="textarea"
clearable
placeholder="请输入内容"
>
</el-input>
</template> -->
<el-date-picker
v-else-if="n.itemType === 'datepicker'"
v-model="form[n.columnName]"
class="resi-cell-input"
type="date"
size="small"
clearable
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd">
</el-date-picker>
<el-date-picker
v-else-if="n.itemType === 'dateRange'"
v-model="form[n.columnName]"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
<el-time-picker
v-else-if="n.itemType === 'timepicker'"
v-model="form[n.columnName]"
placeholder="任意时间点">
</el-time-picker>
<el-time-picker
v-else-if="n.itemType === 'timeRange'"
v-model="form[n.columnName]"
is-range
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围">
</el-time-picker>
<el-select v-else-if="n.itemType === 'select'" v-model="form[n.columnName]"
:multiple="n.multiSelect"
placeholder="请选择" size="small" clearable class="resi-cell-select">
<el-option
v-for="item in n.options || options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- <el-cascader
:options="options"
:props="{ checkStrictly: true }"
clearable></el-cascader> -->
<el-cascader
v-else-if="n.itemType === 'cascader'"
v-model="form[n.columnName]"
:options="n.options"
:props="{ checkStrictly: true }"
clearable
size="small"
class="resi-cell-select">
</el-cascader>
<template v-else-if="n.itemType === 'radio'">
<el-radio v-for="ns in n.options" :key="ns.value" v-model="form[n.columnName]"
:label="ns.value">
{{ ns.label }}
</el-radio>
<!-- <el-radio v-model="form[n.columnName]" label="1">备选项</el-radio> -->
</template>
<template v-else-if="n.itemType === 'checkbox'">
<el-checkbox-group v-model="form[n.columnName]">
<el-checkbox v-for="ns in n.options" :key="ns.value" :label="ns.value">{{ns.label}}</el-checkbox>
<!-- <el-checkbox label="n.la"></el-checkbox> -->
</el-checkbox-group>
</template>
</div>
<!-- </div> -->
</el-form-item>
</el-col>
</el-row>
</template>
</el-form>
</div>
</template>
<script>
import { isCard, isMobile } from '@/utils/validate'
export default {
name: 'resiForm',
props: {
fixed: {
type: Boolean,
default: false
},
labelWidth: {
type: String,
default: '100px'
},
formId: {
type: String,
default: 'resiForm'
},
formList: {
type: Array,
default: function () {
return []
}
},
formInfo: {
type: Object,
default: function () {
return {}
}
},
mutiList: {
type: Array,
default: function () {
return []
}
},
//
columns: {
type: Number,
default: 4
},
supportAdd: { //
type: Boolean,
default: false
}
},
data () {
// let form = {}
// let rules = {}
let checkMObile = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入手机号'))
} else {
if (!isMobile(value)) {
callback(new Error('手机号格式不正确'))
}
callback()
}
}
let checkIdCard = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入身份证'))
} else {
if (!isCard(value)) {
callback(new Error('身份证号格式不正确'))
}
callback()
}
}
let initForm = (obj, arr) => {
let _form = {}
// console.log('formInfo', obj)
if (Object.keys(obj).length > 0) {
_form = { ...obj }
return _form
}
arr.forEach(item => {
if (item.multiSelect || item.itemType === 'cascader') _form[item.columnName] = item.columnValue.split(',')
else _form[item.columnName] = item.columnValue
})
return _form
}
let initRules = (arr) => {
let rules = {}
arr.forEach(item => {
if (item.required) {
if (item.validType === 'mobile') {
rules[item.columnName] = [
{ validator: checkMObile, trigger: 'blur' }
]
} else if (item.validType === 'id_card') {
rules[item.columnName] = [
{ validator: checkIdCard, trigger: 'blur' }
]
} else {
rules[item.columnName] = [
{ required: true, message: `请输入${item.label}`, trigger: 'blur' }
]
}
}
})
return rules
}
let form = initForm(this.formInfo, this.formList)
let rules = initRules(this.formList)
let tempFormList = [ ...this.formList ]
let constForm = {
...form,
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
HOME_ID: ''
}
return {
openSearch: false,
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
fixedForm: {
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
HOME_ID: ''
},
fixedList: {
AGENCY_ID: this.$store.state.user.agencyId
},
form: {
...form,
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
HOME_ID: ''
},
constForm,
tempFormList,
addCount: 0,
addList: [],
rules,
value: '',
optionsV: [],
optionsB: [],
optionsH: [],
optionsG: [],
checkList: ['选中且禁用', '复选框 A'],
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
}
}
},
computed: {
sliceList () {
return function (data, count) {
if (data !== undefined) {
let index = 0
let arrTemp = []
let arrTemp1 = []
let arr1 = []
let arr2 = []
let _i = 0
let _index = 0
for (let i = 0; i < data.length; i++) {
if (data[i].itemType === 'divider' || data[i].itemType === 'checkbox') {
_i = i + 1
}
}
arr1 = data.slice(0, _i)
arr2 = data.slice(_i, data.length)
for (let i = 0; i < arr1.length; i++) {
index = parseInt(i / count)
if (arrTemp.length <= index) {
arrTemp.push([])
}
arrTemp[index].push(arr1[i])
}
for (let i = 0; i < arr2.length; i++) {
_index = parseInt(i / count)
if (arrTemp1.length <= _index) {
arrTemp1.push([])
}
arrTemp1[_index].push(arr2[i])
}
arrTemp = arrTemp.concat(arrTemp1)
return arrTemp
}
}
}
},
watch: {
form: {
handler (val, val2) {
// console.log('valpppp----', val, val2)
for (let n in val) {
if (this.constForm[n] !== val[n]) {
this.handleChangeForm(n)
console.log('nnnnnn', n)
this.handleChangeGroup(n, val[n])
}
}
this.constForm = { ...val }
},
deep: true
}
},
created () {
// this.initForm()
// console.log('formInfo---ggg', this.form)
if (this.supportAdd) {
this.addList = [...this.mutiList]
}
// } this.addList.push(this.addCount++)
this.getOptionsList()
},
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.columnName, '')
})
},
handleOpenSearch () {
this.openSearch = !this.openSearch
},
handleAddRow () {
this.addList.push(this.addCount++)
},
//
handleFiexedForm (val) {
let item = {
[val]: this.fixedForm[val]
}
this.fixedList.push(item)
this.$set(this.fixedList, val, this.fixedForm[val])
},
//
handleChangeGroup (columnName, value) {
this.tempFormList.forEach(item => {
if (item.columnName === columnName && item.itemType === 'radio' && item.childGroup) {
console.log('columnName', item.columnName, columnName)
this.$emit('changegroup', { value, childGroup: item.childGroup })
}
})
},
// form
handleChangeForm (val) {
if (this.fixed) {
// let item = {}
for (let n in this.fixedForm) {
if (n === val) {
// item = {
// [val]: this.form[val]
// }
// this.fixedList.push(item)
this.$set(this.fixedList, val, this.form[val])
}
}
}
console.log('fixedList----999', this.fixedList)
this.tempFormList.forEach(item => {
if (item.columnName === val) item.isChange = true
})
},
handlerMuscForm () {
let arr = []
this.addList.forEach(item => {
// console.log('handlerMuscForm----000', this.$refs['baseForms' + item][0].handleForm())
arr.push([ ...this.$refs['baseForms' + item][0].handleForm() ])
})
// console.log('handlerMuscForm----111', arr)
let arr2 = arr.reduce(function (a, b) { return a.concat(b) })
// console.log('handlerMuscForm----222', arr2)
let hash = {}
let i = 0
let res = []
// let finalArr = []
arr2.forEach((item) => {
let name = item.tableName
if (hash[name]) {
res[hash[name] - 1].list.push(...item.list)
// console.log('hash[name]---', hash[name], res, res[hash[name] - 1], item)
} else {
hash[name] = ++i
res.push({
list: [...item.list],
supportAdd: this.supportAdd,
tableName: name
})
// console.log('hash[name]0000---', hash[name], res)
}
})
// console.log('handlerMuscForm----333', res)
return res
},
resetForm () {
this.$refs[this.formId].resetFields()
},
handleForm () {
let newForm = []
this.$refs[this.formId].validate((valid) => {
if (valid) {
var hash = {}
var i = 0
var res = []
this.tempFormList.forEach(function (item) {
var name = item.tableName
hash[name] ? res[hash[name] - 1].list.push(item) : hash[name] = ++i && res.push({
list: [item],
tableName: name
})
})
res.forEach(item => {
let _form = {}
item.list.filter(n => n.isChange).forEach(r => {
_form[r.columnName] = r.multiSelect || r.itemType === 'cascader' ? this.form[r.columnName].toString() : this.form[r.columnName]
// return _form
})
if (this.fixed) {
for (let n in this.fixedList) {
_form[n] = this.fixedList[n]
}
}
newForm.push({
tableName: item.tableName,
supportAdd: this.supportAdd,
list: [{ ..._form }]
})
})
return newForm
} else {
console.log('error submit!!')
return false
}
})
if (this.supportAdd) newForm = this.handlerMuscForm()
return newForm
},
getOptionsList () {
const { user } = this.$store.state
this.$http
.post('/gov/org/customergrid/gridoption', { agencyId: user.agencyId })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsG = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
this.$http
.post('/gov/org/icneighborhood/neighborhoodoption', { GRID_ID: this.form.GRID_ID })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsV = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
this.$http
.post('/gov/org/icbuilding/buildingoption', { VILLAGE_ID: this.form.VILLAGE_ID })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsB = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
this.$http
.post('/gov/org/ichouse/houseoption', { BUILD_ID: this.form.BUILD_ID })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsH = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
}
}
}
</script>
<style lang="scss">
.resi-form {
.el-date-editor.el-input, .el-date-editor.el-input__inner {
width: 100% !important;
}
}
.resi-cell-value .resi-cell-input {
max-width: 180px;
}
</style>
<style lang="scss" scoped>
.resi-form .resi-row {
margin-bottom: 0;
}
// .resi-form .resi-cell {
// display: flex;
// align-items: center;
// .resi-cell-label {
// width: 70px;
// box-sizing: border-box;
// margin-right: 15px;
// text-align: right;
// }
// .resi-cell-value-radio {
// display: flex;
// align-items: center;
// min-height: 36px;
// }
// .resi-cell-value .resi-cell-input {
// width: 180px;
// }
.resi-cell-value .resi-cell-textarea {
width: 300px;
}
// .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>

575
epmet-oper-web/src/views/components/resiForm.vue

@ -1,79 +1,211 @@
<template>
<div :id="formId" class="resi-container">
<el-form :ref="formId" class="resi-form" :model="form" :rules="rules" :label-width="labelWidth">
<el-row v-for="(item, index) in sliceList(formList, 4)" :key="index" class="resi-row">
<el-col v-for="n in item" :key="n.id" :span="n.item_type === 'textarea'&&24 || 6">
<el-form-item :prop="n.column_name" :label="n.label">
<template v-if="supportAdd">
<el-row style="margin-bottom: 10px;">
<el-col :span="24">
<el-button icon="el-icon-plus" size="small" @click="handleAddRow"></el-button>
</el-col>
</el-row>
<resi-form v-for="(item, index) in addList" :key="index" :ref="'baseForms' + index" :columns="3" :form-list="formList" :form-id="'baseForms' + item" />
</template>
<template v-else>
<el-row v-if="fixed" class="resi-row">
<!-- <el-col v-for="n in item" :key="n.id" :span="n.itemType === 'textarea'&&24 || (24/columns)"> -->
<el-col :span="6">
<el-form-item :prop="form.GRID_ID" label="所属网格">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
<template v-if="n.item_type === 'input'">
<el-input
v-if="n.valid_type"
v-model="form[n.column_name]"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入内容"
>
</el-input>
<el-input
v-else
v-model="form[n.column_name]"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入内容"
>
</el-input>
</template>
<template v-if="n.item_type === 'textarea'">
<el-input
v-model="form[n.column_name]"
class="resi-cell-textarea"
size="small"
type="textarea"
clearable
placeholder="请输入内容"
>
</el-input>
</template>
<el-date-picker
v-else-if="n.item_type === 'date'"
v-model="form[n.column_name]"
class="resi-cell-input"
type="date"
size="small"
clearable
placeholder="选择日期">
</el-date-picker>
<el-select v-else-if="n.item_type === 'select'" v-model="form[n.column_name]"
placeholder="请选择" size="small" clearable class="resi-cell-select">
<el-select v-model="form.GRID_ID" placeholder="请选择网格" size="small"
clearable class="resi-cell-select"
>
<el-option
v-for="item in n.option_source_value || options"
v-for="item in optionsG"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<!-- </div> -->
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :prop="form.VILLAGE_ID" label="所属小区">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
<el-select v-model="form.VILLAGE_ID" placeholder="请选择小区" size="small"
clearable class="resi-cell-select"
>
<el-option
v-for="item in optionsV"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<!-- </div> -->
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :prop="form.BUILD_ID" label="所属楼宇">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
<el-select v-model="form.BUILD_ID" placeholder="请选择楼号" size="small"
clearable class="resi-cell-select"
>
<el-option
v-for="item in optionsB"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<!-- </div> -->
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :prop="form.HOME_ID" label="所属家庭">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
<el-select v-model="form.HOME_ID" placeholder="请选择" size="small"
clearable class="resi-cell-select"
>
<el-option
v-for="item in optionsH"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<template v-else-if="n.item_type === 'radio'">
<el-radio v-for="ns in n.option_source_value" :key="ns.value" v-model="form[n.column_name]"
:label="ns.value">
{{ ns.label }}
</el-radio>
<!-- <el-radio v-model="form[n.column_name]" label="1">备选项</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-form-item>
</el-col>
</el-row>
<el-row v-for="(item, index) in sliceList(formList, columns)" :key="index" class="resi-row">
<!-- <el-col v-for="n in item" :key="n.id" :span="n.itemType === 'textarea'&&24 || (24/columns)"> -->
<el-col v-for="n in item" :key="n.itemId" :span="item.length === 1 ? 24 : (24/columns)"
:style="n.itemType === 'divider' && 'display: none;'">
<el-form-item :prop="n.columnName" :label="n.label">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
<template v-if="n.itemType === 'input' || n.itemType === 'textarea'">
<el-input
v-if="n.validType"
v-model="form[n.columnName]"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入内容"
>
</el-input>
<el-input
v-else
v-model="form[n.columnName]"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入内容"
>
</el-input>
</template>
<!-- <template v-if="n.itemType === 'textarea'">
<el-input
v-model="form[n.columnName]"
class="resi-cell-textarea"
size="small"
type="textarea"
clearable
placeholder="请输入内容"
>
</el-input>
</template> -->
<el-date-picker
v-else-if="n.itemType === 'datepicker'"
v-model="form[n.columnName]"
class="resi-cell-input"
type="date"
size="small"
clearable
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd">
</el-date-picker>
<el-date-picker
v-else-if="n.itemType === 'dateRange'"
v-model="form[n.columnName]"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
<el-time-picker
v-else-if="n.itemType === 'timepicker'"
v-model="form[n.columnName]"
placeholder="任意时间点">
</el-time-picker>
<el-time-picker
v-else-if="n.itemType === 'timeRange'"
v-model="form[n.columnName]"
is-range
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围">
</el-time-picker>
<el-select v-else-if="n.itemType === 'select'" v-model="form[n.columnName]"
:multiple="n.multiSelect"
placeholder="请选择" size="small" clearable class="resi-cell-select">
<el-option
v-for="item in n.options || options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- <el-cascader
:options="options"
:props="{ checkStrictly: true }"
clearable></el-cascader> -->
<el-cascader
v-else-if="n.itemType === 'cascader'"
v-model="form[n.columnName]"
:options="n.options"
:props="{ checkStrictly: true }"
clearable
size="small"
class="resi-cell-select">
</el-cascader>
<template v-else-if="n.itemType === 'radio'">
<el-radio v-for="ns in n.options" :key="ns.value" v-model="form[n.columnName]"
:label="ns.value">
{{ ns.label }}
</el-radio>
<!-- <el-radio v-model="form[n.columnName]" label="1">备选项</el-radio> -->
</template>
<template v-else-if="n.itemType === 'checkbox'">
<el-checkbox-group v-model="form[n.columnName]">
<el-checkbox v-for="ns in n.options" :key="ns.value" :label="ns.value">{{ns.label}}</el-checkbox>
<!-- <el-checkbox label="n.la"></el-checkbox> -->
</el-checkbox-group>
</template>
</div>
<!-- </div> -->
</el-form-item>
</el-col>
</el-row>
</template>
</el-form>
</div>
</template>
@ -84,6 +216,10 @@ import { isCard, isMobile } from '@/utils/validate'
export default {
name: 'resiForm',
props: {
fixed: {
type: Boolean,
default: false
},
labelWidth: {
type: String,
default: '100px'
@ -103,10 +239,19 @@ export default {
default: function () {
return {}
}
},
//
columns: {
type: Number,
default: 4
},
supportAdd: { //
type: Boolean,
default: false
}
},
data () {
let form = {}
// let form = {}
// let rules = {}
let checkMObile = (rule, value, callback) => {
if (value === '') {
@ -129,29 +274,32 @@ export default {
}
}
let initForm = (obj, arr) => {
console.log('formInfo', obj)
let _form = {}
// console.log('formInfo', obj)
if (Object.keys(obj).length > 0) {
form = { ...obj }
return
_form = { ...obj }
return _form
}
arr.forEach(item => {
form[item.column_name] = ''
if (item.multiSelect) _form[item.columnName] = []
else _form[item.columnName] = ''
})
return _form
}
let initRules = (arr) => {
let rules = {}
arr.forEach(item => {
if (item.require) {
if (item.valid_type === 'mobile') {
rules[item.column_name] = [
if (item.required) {
if (item.validType === 'mobile') {
rules[item.columnName] = [
{ validator: checkMObile, trigger: 'blur' }
]
} else if (item.valid_type === 'id_card') {
rules[item.column_name] = [
} else if (item.validType === 'id_card') {
rules[item.columnName] = [
{ validator: checkIdCard, trigger: 'blur' }
]
} else {
rules[item.column_name] = [
rules[item.columnName] = [
{ required: true, message: `请输入${item.label}`, trigger: 'blur' }
]
}
@ -159,8 +307,16 @@ export default {
})
return rules
}
initForm(this.formInfo, this.formList)
let form = initForm(this.formInfo, this.formList)
let rules = initRules(this.formList)
let tempFormList = [ ...this.formList ]
let constForm = {
...form,
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
HOME_ID: ''
}
return {
openSearch: false,
options: [{
@ -179,10 +335,60 @@ export default {
value: '选项5',
label: '北京烤鸭'
}],
form,
fixedForm: {
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
HOME_ID: ''
},
fixedList: {
AGENCY_ID: this.$store.state.user.agencyId
},
form: {
...form,
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
HOME_ID: ''
},
constForm,
tempFormList,
addCount: 0,
addList: [],
rules,
value: '',
checkList: ['选中且禁用', '复选框 A']
optionsV: [],
optionsB: [],
optionsH: [],
optionsG: [],
checkList: ['选中且禁用', '复选框 A'],
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
}
}
},
computed: {
@ -191,21 +397,59 @@ export default {
if (data !== undefined) {
let index = 0
let arrTemp = []
let arrTemp1 = []
let arr1 = []
let arr2 = []
let _i = 0
let _index = 0
for (let i = 0; i < data.length; i++) {
if (data[i].itemType === 'divider' || data[i].itemType === 'checkbox') {
_i = i + 1
}
}
arr1 = data.slice(0, _i)
arr2 = data.slice(_i, data.length)
for (let i = 0; i < arr1.length; i++) {
index = parseInt(i / count)
if (arrTemp.length <= index) {
arrTemp.push([])
}
arrTemp[index].push(data[i])
arrTemp[index].push(arr1[i])
}
for (let i = 0; i < arr2.length; i++) {
_index = parseInt(i / count)
if (arrTemp1.length <= _index) {
arrTemp1.push([])
}
arrTemp1[_index].push(arr2[i])
}
arrTemp = arrTemp.concat(arrTemp1)
return arrTemp
}
}
}
},
watch: {
form: {
handler (val, val2) {
// console.log('valpppp----', val, val2)
for (let n in val) {
if (this.constForm[n] !== val[n]) {
this.handleChangeForm(n)
console.log('nnnnnn', n)
this.handleChangeGroup(n, val[n])
}
}
this.constForm = { ...val }
},
deep: true
}
},
created () {
// this.initForm()
console.log('formInfo---ggg', this.form)
// console.log('formInfo---ggg', this.form)
if (this.supportAdd) this.addList.push(this.addCount++)
this.getOptionsList()
},
methods: {
initForm () {
@ -215,20 +459,194 @@ export default {
return
}
this.formList.forEach(item => {
this.$set(this.form, item.column_name, '')
this.$set(this.form, item.columnName, '')
})
},
handleOpenSearch () {
this.openSearch = !this.openSearch
},
handleAddRow () {
this.addList.push(this.addCount++)
},
//
handleFiexedForm (val) {
let item = {
[val]: this.fixedForm[val]
}
this.fixedList.push(item)
this.$set(this.fixedList, val, this.fixedForm[val])
},
//
handleChangeGroup (columnName, value) {
this.tempFormList.forEach(item => {
if (item.columnName === columnName && item.itemType === 'radio' && item.childGroup) {
console.log('columnName', item.columnName, columnName)
this.$emit('changegroup', { value, childGroup: item.childGroup })
}
})
},
// form
handleChangeForm (val) {
if (this.fixed) {
// let item = {}
for (let n in this.fixedForm) {
if (n === val) {
// item = {
// [val]: this.form[val]
// }
// this.fixedList.push(item)
this.$set(this.fixedList, val, this.form[val])
}
}
}
console.log('fixedList----999', this.fixedList)
this.tempFormList.forEach(item => {
if (item.columnName === val) item.isChange = true
})
},
handlerMuscForm () {
let arr = []
this.addList.forEach(item => {
// console.log('handlerMuscForm----000', this.$refs['baseForms' + item][0].handleForm())
arr.push([ ...this.$refs['baseForms' + item][0].handleForm() ])
})
// console.log('handlerMuscForm----111', arr)
let arr2 = arr.reduce(function (a, b) { return a.concat(b) })
// console.log('handlerMuscForm----222', arr2)
let hash = {}
let i = 0
let res = []
// let finalArr = []
arr2.forEach((item) => {
let name = item.tableName
if (hash[name]) {
res[hash[name] - 1].list.push(...item.list)
// console.log('hash[name]---', hash[name], res, res[hash[name] - 1], item)
} else {
hash[name] = ++i
res.push({
list: [...item.list],
supportAdd: this.supportAdd,
tableName: name
})
// console.log('hash[name]0000---', hash[name], res)
}
})
// console.log('handlerMuscForm----333', res)
return res
},
resetForm () {
this.$refs[this.formId].resetFields()
},
handleForm () {
let newForm = []
this.$refs[this.formId].validate((valid) => {
if (valid) {
var hash = {}
var i = 0
var res = []
this.tempFormList.forEach(function (item) {
var name = item.tableName
hash[name] ? res[hash[name] - 1].list.push(item) : hash[name] = ++i && res.push({
list: [item],
tableName: name
})
})
res.forEach(item => {
let _form = {}
item.list.filter(n => n.isChange).forEach(r => {
_form[r.columnName] = r.multiSelect || r.itemType === 'cascader' ? this.form[r.columnName].toString() : this.form[r.columnName]
// return _form
})
if (this.fixed) {
for (let n in this.fixedList) {
_form[n] = this.fixedList[n]
}
}
newForm.push({
tableName: item.tableName,
supportAdd: this.supportAdd,
list: [{ ..._form }]
})
})
return newForm
} else {
console.log('error submit!!')
return false
}
})
if (this.supportAdd) newForm = this.handlerMuscForm()
return newForm
},
getOptionsList () {
const { user } = this.$store.state
this.$http
.post('/gov/org/customergrid/gridoption', { agencyId: user.agencyId })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsG = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
this.$http
.post('/gov/org/icneighborhood/neighborhoodoption', { GRID_ID: this.form.GRID_ID })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsV = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
this.$http
.post('/gov/org/icbuilding/buildingoption', { VILLAGE_ID: this.form.VILLAGE_ID })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsB = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
this.$http
.post('/gov/org/ichouse/houseoption', { BUILD_ID: this.form.BUILD_ID })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsH = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
}
}
}
</script>
<style lang="scss">
.el-date-editor.el-input, .el-date-editor.el-input__inner {
width: 100% !important;
.resi-form {
.el-date-editor.el-input, .el-date-editor.el-input__inner {
width: 100% !important;
}
}
.resi-cell-value .resi-cell-input {
max-width: 180px;
}
</style>
<style lang="scss" scoped>
@ -253,6 +671,7 @@ export default {
// .resi-cell-value .resi-cell-input {
// width: 180px;
// }
.resi-cell-value .resi-cell-textarea {
width: 300px;
}

336
epmet-oper-web/src/views/components/resiSearch.vue

@ -2,47 +2,116 @@
<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-row class="resi-row">
<el-col :span="6">
<div class="resi-cell">
<div class="resi-cell-label">所属网格</div>
<div class="resi-cell-value">
<el-select v-model="form.GRID_ID" placeholder="请选择" size="small" clearable class="resi-cell-select">
<el-option
v-for="item in optionsG"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</el-col>
<el-col :span="18">
<div class="resi-cell">
<div class="resi-cell-label">所属小区</div>
<div class="resi-cell-value">
<el-select v-model="form.VILLAGE_ID" placeholder="请选择小区" size="small"
clearable class="resi-cell-select"
@clear="handleClearVillage">
<el-option
v-for="item in optionsV"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="form.BUILD_ID" placeholder="楼号" size="small" clearable
class="resi-cell-select" :disabled="changeVDisabled" @clear="handleClearBuild">
<el-option
v-for="item in optionsB"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="form.HOME_ID" :disabled="changeBDisabled" placeholder="单元" size="small" clearable class="resi-cell-select">
<el-option
v-for="item in optionsH"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</el-col>
</el-row>
<el-row v-for="(item, index) in sliceList(formList, 4)" :key="index" class="resi-row">
<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'">
<div class="resi-cell-value" :class="n.itemType === 'radio' && 'resi-cell-value-radio'">
<el-input
v-if="n.item_type === 'input'"
v-model="form[n.column_name]"
v-if="n.itemType === 'input' || n.itemType === 'textarea'"
v-model="form[n.columnName]"
class="resi-cell-input"
size="small"
clearable
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"
clearable
placeholder="选择日期">
</el-date-picker>
<el-select v-else-if="n.item_type === 'select'" v-model="form[n.column_name]" placeholder="请选择" size="small" clearable class="resi-cell-select">
<template v-else-if="n.itemType === 'datepicker'">
<el-date-picker
v-if="n.queryType === 'daterange'"
v-model="form[n.columnName]"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
class="resi-cell-input"
size="small"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions">
</el-date-picker>
<el-date-picker
v-else
v-model="form[n.columnName]"
class="resi-cell-input"
type="date"
size="small"
clearable
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</template>
<el-select v-else-if="n.itemType === 'select' || n.itemType === 'radio'" v-model="form[n.columnName]" placeholder="请选择" size="small" clearable class="resi-cell-select">
<el-option
v-for="item in options"
v-for="item in n.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>
<el-cascader
v-else-if="n.itemType === 'cascader'"
v-model="form[n.columnName]"
:options="n.options"
:props="{ checkStrictly: true }"
clearable
size="small"
class="resi-cell-select">
</el-cascader>
</div>
</div>
</el-col>
@ -488,6 +557,7 @@
<script>
export default {
name: 'ResiSearch',
props: {
formList: {
type: Array,
@ -495,8 +565,34 @@ export default {
}
},
data () {
let initForm = (arr) => {
let _form = {}
// console.log('formInfo', obj)
// if (Object.keys(obj).length > 0) {
// _form = { ...obj }
// return _form
// }
arr.forEach(item => {
_form[item.columnName] = ''
})
return _form
}
let form = initForm(this.formList)
let tempFormList = [ ...this.formList ]
let constForm = {
...form,
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
HOME_ID: ''
}
return {
pageLoading: false,
openSearch: false,
optionsV: [],
optionsB: [],
optionsH: [],
optionsG: [],
options: [{
value: '选项1',
label: '黄金糕'
@ -514,8 +610,50 @@ export default {
label: '北京烤鸭'
}],
value: '',
form: {},
checkList: ['选中且禁用', '复选框 A']
fixedList: [],
fixedForm: {
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
HOME_ID: ''
},
constForm,
form: {
...form,
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
HOME_ID: ''
},
tempFormList,
checkList: ['选中且禁用', '复选框 A'],
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
}
}
},
computed: {
@ -534,24 +672,158 @@ export default {
return arrTemp
}
}
},
changeVDisabled () {
return !this.form.VILLAGE_ID
},
changeBDisabled () {
return !this.form.BUILD_ID
}
},
watch: {
form: {
handler (val, val2) {
// console.log('valpppp----', val, val2)
for (let n in val) {
if (this.constForm[n] !== val[n]) {
this.handleChangeForm(n)
console.log('nnnnnn', n)
}
}
this.constForm = { ...val }
},
deep: true
}
},
created () {
this.initForm()
// this.initForm()
console.log('formcccc---', this.form)
this.getOptionsList()
},
methods: {
initForm () {
this.formList.forEach(item => {
this.$set(this.form, item.column_name, '')
this.$set(this.form, item.columnName, '')
})
// console.log('formcccc---', this.form)
console.log('formcccc---', this.form)
},
handleClearVillage () {
this.form.BUILD_ID = ''
this.form.HOME_ID = ''
},
handleClearBuild () {
this.form.BUILD_ID = ''
this.form.HOME_ID = ''
},
handleSearch () {
// console.log('formmmmm---', this.form)
this.$emit('search', this.form)
let arr = this.tempFormList.filter(n => n.isChange).map(item => {
return {
queryType: item.queryType,
tableName: item.tableName,
columnName: item.columnName,
columnValue: [...this.form[item.columnName]]
// columnValue: item.queryType === 'daterange' ? this.form[item.columnName] : [this.form[item.columnName]]
}
})
let arr1 = this.fixedList.filter(n => n.columnValue.length > 0).map(item => {
return {
...item
}
})
let arr3 = [ ...arr1, ...arr ]
this.$emit('search', arr3)
},
handleOpenSearch () {
this.openSearch = !this.openSearch
},
// form
handleChangeForm (val) {
for (let n in this.fixedForm) {
if (n === val) {
if (this.fixedList.length > 0) {
this.fixedList.forEach((item, index) => {
if (item.columnName === val) {
item.columnValue[0] = this.form[val]
} else {
let _item = {
queryType: 'equal',
tableName: 'ic_resi_user',
columnName: val,
columnValue: [this.form[val]]
}
this.$set(this.fixedList, index, _item)
}
})
} else {
this.$set(this.fixedList, 0, {
queryType: 'equal',
tableName: 'ic_resi_user',
columnName: val,
columnValue: [this.form[val]]
})
}
}
}
console.log('fixedList----999', this.fixedList)
this.tempFormList.forEach(item => {
if (item.columnName === val) item.isChange = true
})
},
getOptionsList () {
const { user } = this.$store.state
this.$http
.post('/gov/org/customergrid/gridoption', { agencyId: user.agencyId })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsG = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
this.$http
.post('/gov/org/icneighborhood/neighborhoodoption', { GRID_ID: this.form.GRID_ID })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsV = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
this.$http
.post('/gov/org/icbuilding/buildingoption', { VILLAGE_ID: this.form.VILLAGE_ID })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsB = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
this.$http
.post('/gov/org/ichouse/houseoption', { BUILD_ID: this.form.BUILD_ID })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsH = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
}
}
}
@ -597,7 +869,7 @@ export default {
text-align: right;
}
}
.resi-cell {
.resi-container .resi-cell {
display: flex;
align-items: center;
.resi-cell-label {

9
epmet-oper-web/src/views/main.vue

@ -163,10 +163,11 @@ export default {
url,
params,
(data, rspMsg) => {
this.$store.state.user.id = data.id
this.$store.state.user.realName = data.realName
this.$store.state.user.superAdmin = data.superAdmin
this.$store.state.user.gender = data.gender
this.$store.state.user = { ...data }
// this.$store.state.user.id = data.id
// this.$store.state.user.realName = data.realName
// this.$store.state.user.superAdmin = data.superAdmin
// this.$store.state.user.gender = data.gender
localStorage.setItem('roleList', data.roleList)
localStorage.setItem('customerId', data.customerId)
// this.$store.state.user.roleList = data.roleList

1037
epmet-oper-web/src/views/modules/base/resi.vue

File diff suppressed because it is too large
Loading…
Cancel
Save