From dd505b4397111dbdd5633593a7bd1c0a828c1d08 Mon Sep 17 00:00:00 2001 From: 13176889840 <13176889840@163.com> Date: Fri, 29 Oct 2021 17:28:48 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B1=85=E6=B0=91=E4=BF=A1=E6=81=AF111?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/components/editResi.vue | 703 +++++++++++ .../src/views/components/resiForm.vue | 575 +++++++-- .../src/views/components/resiSearch.vue | 336 +++++- epmet-oper-web/src/views/main.vue | 9 +- .../src/views/modules/base/resi.vue | 1037 +++++++---------- 5 files changed, 1953 insertions(+), 707 deletions(-) create mode 100644 epmet-oper-web/src/views/components/editResi.vue diff --git a/epmet-oper-web/src/views/components/editResi.vue b/epmet-oper-web/src/views/components/editResi.vue new file mode 100644 index 0000000..774bd2f --- /dev/null +++ b/epmet-oper-web/src/views/components/editResi.vue @@ -0,0 +1,703 @@ + + + + + + diff --git a/epmet-oper-web/src/views/components/resiForm.vue b/epmet-oper-web/src/views/components/resiForm.vue index 4859f4d..ac51888 100644 --- a/epmet-oper-web/src/views/components/resiForm.vue +++ b/epmet-oper-web/src/views/components/resiForm.vue @@ -1,79 +1,211 @@ @@ -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('网络错误') + }) } } }