tianqian
3 years ago
3 changed files with 983 additions and 569 deletions
@ -1,216 +1,527 @@ |
|||
<template> |
|||
<div> |
|||
<div class="dialog-h-content scroll-h"> |
|||
<el-form ref="ref_form" :model="fmData" :rules="dataRule" :disabled="formType === 'watch'" class="form" label-width="150px"> |
|||
<el-form ref="ref_form" :inline="true" :model="fmData" :rules="dataRule" :disabled="formType === 'watch'" |
|||
class="form" label-width="150px"> |
|||
<el-form-item label="姓名" prop="name" style="display: block"> |
|||
<el-input v-model="fmData.name" class="item_width_2" size="small" clearable placeholder="请输入"></el-input> |
|||
<el-input v-model="fmData.name" class="item_width_2" size="small" clearable |
|||
placeholder="请输入"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="联系电话" prop="phone"> |
|||
<el-input v-model="fmData.phone" class="item_width_2" size="small" clearable placeholder="请输入"></el-input> |
|||
<el-input v-model="fmData.phone" class="item_width_2" size="small" clearable |
|||
placeholder="请输入"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="身份证号" prop="idCard"> |
|||
<el-input v-model="fmData.idCard" class="item_width_2" size="small" clearable placeholder="请输入"></el-input> |
|||
<el-input v-model="fmData.idCard" class="item_width_2" size="small" clearable |
|||
placeholder="请输入"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="类型" prop="type"> |
|||
<el-select class="item_width_2" v-model="fmData.type" placeholder="请选择" filterable clearable> |
|||
<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option> |
|||
<el-option v-for="item in typeList" :key="item.value" :label="item.label" |
|||
:value="item.value"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="所属区市" prop="districtId"> |
|||
<el-input v-model="fmData.districtId" class="item_width_2" size="small" clearable placeholder="请输入"></el-input> |
|||
<el-select class="item_width_2" v-model="fmData.districtId" placeholder="请选择" filterable |
|||
clearable @change="getstreetList(1)"> |
|||
<el-option v-for="item in districtList" :key="item.id" :label="item.organizationName" |
|||
:value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="所属镇街" prop="streetId"> |
|||
<el-input v-model="fmData.streetId" class="item_width_2" size="small" clearable placeholder="请输入"></el-input> |
|||
<el-select class="item_width_2" v-model="fmData.streetId" placeholder="请选择" filterable :disabled="streetList.length==0" |
|||
clearable @change="getcommunityList(1)"> |
|||
<el-option v-for="item in streetList" :key="item.id" :label="item.organizationName" |
|||
:value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="所属社区/民居" prop="communityId"> |
|||
<el-input v-model="fmData.communityId" class="item_width_2" size="small" clearable placeholder="请输入"></el-input> |
|||
<el-select class="item_width_2" v-model="fmData.communityId" placeholder="请选择" :disabled="communityList.length==0" |
|||
filterable clearable @change=" |
|||
getgridList(1); |
|||
getviliageList(1); |
|||
"> |
|||
<el-option v-for="item in communityList" :key="item.id" :label="item.organizationName" |
|||
:value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="所属网格" prop="gridId"> |
|||
<el-input v-model="fmData.gridId" class="item_width_2" size="small" clearable placeholder="请输入"></el-input> |
|||
<el-select class="item_width_2" v-model="fmData.gridId" placeholder="请选择" filterable :disabled="gridList.length==0" |
|||
clearable @change="getviliageList(1)"> |
|||
<el-option v-for="item in gridList" :key="item.value" :label="item.label" |
|||
:value="item.value"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="所属小区" prop="viliageId"> |
|||
<el-input v-model="fmData.viliageId" class="item_width_2" size="small" clearable placeholder="请输入"></el-input> |
|||
<el-select class="item_width_2" v-model="fmData.viliageId" placeholder="请选择" filterable :disabled="viliageList.length==0" |
|||
clearable @change="getbuildingList(1)"> |
|||
<el-option v-for="item in viliageList" :key="item.value" :label="item.label" |
|||
:value="item.value"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="楼栋" prop="buildingId"> |
|||
<el-input v-model="fmData.buildingId" class="item_width_2" size="small" clearable placeholder="请输入"></el-input> |
|||
<el-select class="item_width_2" v-model="fmData.buildingId" placeholder="请选择" filterable :disabled="buildingList.length==0" |
|||
clearable @change="getunitList(1)"> |
|||
<el-option v-for="item in buildingList" :key="item.value" :label="item.label" |
|||
:value="item.value"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="单元" prop="unitId"> |
|||
<el-input v-model="fmData.unitId" class="item_width_2" size="small" clearable placeholder="请输入"></el-input> |
|||
<el-select class="item_width_2" v-model="fmData.unitId" placeholder="请选择" filterable :disabled="unitList.length==0" |
|||
clearable> |
|||
<el-option v-for="item in unitList" :key="item.value" :label="item.label" |
|||
:value="item.value"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<div class="div_btn resi-btns"> |
|||
<el-button size="small" @click="handleCancle">取 消</el-button> |
|||
<el-button v-if="formType != 'watch'" type="primary" size="small" :disabled="btnDisable" @click="handleComfirm">确 定</el-button> |
|||
<el-button v-if="formType != 'watch'" type="primary" size="small" :disabled="btnDisable" |
|||
@click="handleComfirm">确 定</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from 'vuex'; |
|||
import { requestPost } from '@/js/dai/request'; |
|||
import formVltHelper from 'dai-js/tools/formVltHelper'; |
|||
|
|||
export default { |
|||
props: { |
|||
formId: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
formType: { |
|||
type: String, |
|||
default: 'info' |
|||
}, |
|||
villageList: { |
|||
type: Object, |
|||
default: {} |
|||
} |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
uploadUrl: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2', |
|||
customerId: localStorage.getItem('customerId'), |
|||
|
|||
btnDisable: false, |
|||
|
|||
fmData: { |
|||
name: '' |
|||
import { |
|||
mapGetters |
|||
} from 'vuex'; |
|||
import { |
|||
requestPost |
|||
} from '@/js/dai/request'; |
|||
import formVltHelper from 'dai-js/tools/formVltHelper'; |
|||
export default { |
|||
props: { |
|||
formId: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
formType: { |
|||
type: String, |
|||
default: 'info' |
|||
}, |
|||
typeList: [ |
|||
{ |
|||
villageList: { |
|||
type: Object, |
|||
default: {} |
|||
} |
|||
}, |
|||
data() { |
|||
const checkPhone = (rule, value, callback) => { |
|||
if (value === '') { |
|||
callback(new Error('请输入手机号')); |
|||
} else if (!/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(1[|6|7|8][0-9]))\d{8}$/.test(value)) { |
|||
callback(new Error('请输入正确的手机号格式')); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}; |
|||
const checkCardId = (rule, value, callback) => { |
|||
if (value === '') { |
|||
callback(new Error('请输入身份证号')); |
|||
} else if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) { |
|||
callback(new Error('请输入正确的身份证号')); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}; |
|||
return { |
|||
uploadUrl: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2', |
|||
customerId: localStorage.getItem('customerId'), |
|||
btnDisable: false, |
|||
fmData: { |
|||
name: '', |
|||
phone: '', |
|||
idCard: '', |
|||
type: '', |
|||
districtId: '', |
|||
streetId: '', |
|||
communityId: '', |
|||
gridId: '', |
|||
viliageId: '', |
|||
buildingId: '', |
|||
unitId: '', |
|||
}, |
|||
typeList: [{ |
|||
value: '0', |
|||
label: '楼长' |
|||
}, |
|||
{ |
|||
}, { |
|||
value: '1', |
|||
label: '单元长' |
|||
} |
|||
], |
|||
levelOptions: [ |
|||
{ |
|||
}], |
|||
levelOptions: [{ |
|||
value: '0', |
|||
label: '市级' |
|||
}, |
|||
{ |
|||
}, { |
|||
value: '1', |
|||
label: '区级' |
|||
}, |
|||
{ |
|||
}, { |
|||
value: '2', |
|||
label: '街道级' |
|||
}], |
|||
categoryOptions: [], |
|||
districtList: [], |
|||
streetList: [], |
|||
communityList: [], |
|||
gridList: [], |
|||
viliageList: [], |
|||
buildingList: [], |
|||
unitList: [], |
|||
dataRule: { |
|||
name: [{ |
|||
required: true, |
|||
message: '姓名不能为空', |
|||
trigger: 'blur' |
|||
}], |
|||
phone: [{ |
|||
required: true, |
|||
validator: checkPhone, |
|||
trigger: 'blur' |
|||
}], |
|||
idCard: [{ |
|||
required: true, |
|||
validator: checkCardId, |
|||
trigger: 'blur' |
|||
}], |
|||
type: [{ |
|||
required: true, |
|||
message: '类型不能为空', |
|||
trigger: 'blur' |
|||
}], |
|||
districtId: [{ |
|||
required: true, |
|||
message: '所属区市不能为空', |
|||
trigger: 'blur' |
|||
}], |
|||
streetId: [{ |
|||
required: true, |
|||
message: '所属镇街不能为空', |
|||
trigger: 'blur' |
|||
}], |
|||
communityId: [{ |
|||
required: true, |
|||
message: '所属社区/民居不能为空', |
|||
trigger: 'blur' |
|||
}], |
|||
gridId: [{ |
|||
required: true, |
|||
message: '所属网格不能为空', |
|||
trigger: 'blur' |
|||
}], |
|||
viliageId: [{ |
|||
required: true, |
|||
message: '所属小区不能为空', |
|||
trigger: 'blur' |
|||
}], |
|||
buildingId: [{ |
|||
required: true, |
|||
message: '楼栋不能为空', |
|||
trigger: 'blur' |
|||
}], |
|||
unitId: [{ |
|||
required: true, |
|||
message: '单元不能为空', |
|||
trigger: 'blur' |
|||
}], |
|||
} |
|||
], |
|||
categoryOptions: [] |
|||
}; |
|||
}, |
|||
components: {}, |
|||
computed: { |
|||
dataRule() { |
|||
return { |
|||
name: [{ required: true, message: '物业名字不能为空', trigger: 'blur' }] |
|||
}; |
|||
} |
|||
}, |
|||
watch: {}, |
|||
|
|||
async mounted() { |
|||
this.initForm(); |
|||
}, |
|||
|
|||
methods: { |
|||
async initForm() { |
|||
if (this.formType != 'add') { |
|||
this.getInfo(); |
|||
} |
|||
}, |
|||
|
|||
async getInfo() { |
|||
this.fmData.name = this.villageList.name; |
|||
components: {}, |
|||
computed: {}, |
|||
watch: {}, |
|||
async mounted() { |
|||
this.initForm(); |
|||
}, |
|||
|
|||
async handleComfirm() { |
|||
this.btnDisable = true; |
|||
setTimeout(() => { |
|||
this.btnDisable = false; |
|||
}, 10000); |
|||
this.$refs['ref_form'].validate((valid, messageObj) => { |
|||
if (!valid) { |
|||
app.util.validateRule(messageObj); |
|||
methods: { |
|||
async initForm() { |
|||
this.getdistrictList(2); |
|||
if (this.formType != 'add') { |
|||
this.getInfo(); |
|||
} |
|||
}, |
|||
async getdistrictList(type) { |
|||
// 区市 |
|||
const url = '/gov/org/customeragency/districtList'; |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPost(url); |
|||
if (code === 0) { |
|||
this.districtList = data; |
|||
if (type == 1) { |
|||
this.streetList = []; |
|||
this.communityList = []; |
|||
this.gridList = []; |
|||
this.viliageList = []; |
|||
this.buildingList = []; |
|||
this.unitList = []; |
|||
this.fmData.districtId = ''; |
|||
this.fmData.streetId = ''; |
|||
this.fmData.communityId = ''; |
|||
this.fmData.gridId = ''; |
|||
this.fmData.viliageId = ''; |
|||
this.fmData.buildingId = ''; |
|||
this.fmData.unitId = ''; |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
this.$forceUpdate(); |
|||
}, |
|||
async getstreetList(type) { |
|||
// 镇街 |
|||
const url = `/gov/org/customeragency/streetList/${this.fmData.districtId}`; |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPost(url); |
|||
if (code === 0) { |
|||
this.streetList = data; |
|||
if (type == 1) { |
|||
this.communityList = []; |
|||
this.gridList = []; |
|||
this.viliageList = []; |
|||
this.buildingList = []; |
|||
this.unitList = []; |
|||
this.fmData.streetId = ''; |
|||
this.fmData.communityId = ''; |
|||
this.fmData.gridId = ''; |
|||
this.fmData.viliageId = ''; |
|||
this.fmData.buildingId = ''; |
|||
this.fmData.unitId = ''; |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
this.$forceUpdate(); |
|||
}, |
|||
async getcommunityList(type) { |
|||
// 社区/民居 |
|||
const url = `/gov/org/customeragency/communityList/${this.fmData.streetId}`; |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPost(url); |
|||
if (code === 0) { |
|||
this.communityList = data; |
|||
if (type == 1) { |
|||
this.gridList = []; |
|||
this.viliageList = []; |
|||
this.buildingList = []; |
|||
this.unitList = []; |
|||
this.fmData.communityId = ''; |
|||
this.fmData.gridId = ''; |
|||
this.fmData.viliageId = ''; |
|||
this.fmData.buildingId = ''; |
|||
this.fmData.unitId = ''; |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
this.$forceUpdate(); |
|||
}, |
|||
async getgridList(type) { |
|||
// 网格 |
|||
const url = `/gov/org/customergrid/gridoption`; |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPost(url, { |
|||
agencyId: this.fmData.communityId, |
|||
purpose: 'query' |
|||
}); |
|||
if (code === 0) { |
|||
this.gridList = data; |
|||
if (type == 1) { |
|||
this.viliageList = []; |
|||
this.buildingList = []; |
|||
this.unitList = []; |
|||
this.fmData.gridId = ''; |
|||
this.fmData.viliageId = ''; |
|||
this.fmData.buildingId = ''; |
|||
this.fmData.unitId = ''; |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
this.$forceUpdate(); |
|||
}, |
|||
async getviliageList(type) { |
|||
//小区 |
|||
const url = `/gov/org/icneighborhood/neighborhood-options`; |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPost(url, { |
|||
agencyId: this.fmData.communityId, |
|||
gridId: this.fmData.gridId |
|||
}); |
|||
if (code === 0) { |
|||
this.viliageList = data; |
|||
if (type == 1) { |
|||
this.buildingList = []; |
|||
this.unitList = []; |
|||
this.fmData.viliageId = ''; |
|||
this.fmData.buildingId = ''; |
|||
this.fmData.unitId = ''; |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
this.$forceUpdate(); |
|||
}, |
|||
async getbuildingList(type) { |
|||
const url = `/gov/org/icbuilding/buildingoption`; |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPost(url, { |
|||
neighborHoodId: this.fmData.viliageId |
|||
}); |
|||
if (code === 0) { |
|||
this.buildingList = data; |
|||
if (type == 1) { |
|||
this.unitList = []; |
|||
this.fmData.buildingId = ''; |
|||
this.fmData.unitId = ''; |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
this.$forceUpdate(); |
|||
}, |
|||
async getunitList(type) { |
|||
const url = `/gov/org/icbuildingunit/unitoption`; |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPost(url, { |
|||
buildingId: this.fmData.buildingId |
|||
}); |
|||
if (code === 0) { |
|||
this.unitList = data; |
|||
if (type == 1) { |
|||
this.fmData.unitId = ''; |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
this.$forceUpdate(); |
|||
}, |
|||
async getInfo() { |
|||
const url = `/gov/org/communityBuildingManager/detail/${this.formId}`; |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPost(url); |
|||
if (code === 0) { |
|||
this.$nextTick(() => { |
|||
this.fmData = data; |
|||
this.getstreetList(2); |
|||
this.getcommunityList(2); |
|||
this.getgridList(2); |
|||
this.getviliageList(2); |
|||
this.getbuildingList(2); |
|||
this.getunitList(2); |
|||
}) |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async handleComfirm() { |
|||
this.btnDisable = true; |
|||
setTimeout(() => { |
|||
this.btnDisable = false; |
|||
}, 10000); |
|||
this.$refs['ref_form'].validate((valid, messageObj) => { |
|||
if (!valid) { |
|||
app.util.validateRule(messageObj); |
|||
this.btnDisable = false; |
|||
} else { |
|||
this.submit(); |
|||
} |
|||
}); |
|||
}, |
|||
async submit() { |
|||
let url = ''; |
|||
let params = { |
|||
...this.fmData |
|||
}; |
|||
if (this.formType === 'add') { |
|||
url = '/gov/org/communityBuildingManager/save'; |
|||
} else { |
|||
this.submit(); |
|||
url = '/gov/org/communityBuildingManager/update'; |
|||
this.$set(params, 'id', this.villageList.id); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
async submit() { |
|||
let url = ''; |
|||
let params = { ...this.fmData }; |
|||
if (this.formType === 'add') { |
|||
url = '/gov/org/communityBuildingManager/save'; |
|||
} else { |
|||
url = '/gov/org/communityBuildingManager/update'; |
|||
this.$set(params, 'id', this.villageList.id); |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '操作成功' |
|||
}); |
|||
this.$emit('afterEdit'); |
|||
this.btnDisable = false; |
|||
} else { |
|||
this.btnDisable = false; |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
handleCancle() { |
|||
this.$emit('close'); |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.item_width_1 { |
|||
width: 500px; |
|||
} |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '操作成功' |
|||
}); |
|||
this.$emit('afterEdit'); |
|||
this.btnDisable = false; |
|||
} else { |
|||
this.btnDisable = false; |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
.item_width_2 { |
|||
width: 400px; |
|||
} |
|||
|
|||
handleCancle() { |
|||
this.$emit('close'); |
|||
} |
|||
.item_width_3 { |
|||
margin-left: 10px; |
|||
width: 200px; |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.item_width_1 { |
|||
width: 500px; |
|||
} |
|||
.item_width_2 { |
|||
width: 400px; |
|||
} |
|||
.item_width_3 { |
|||
margin-left: 10px; |
|||
width: 200px; |
|||
} |
|||
.item_width_4 { |
|||
width: 200px; |
|||
} |
|||
.item_width_4 { |
|||
width: 200px; |
|||
} |
|||
|
|||
.div_map { |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
.div_map { |
|||
margin-top: 10px; |
|||
} |
|||
.div_btn { |
|||
// display: flex; |
|||
// justify-content: flex-end; |
|||
} |
|||
|
|||
.el-tabs { |
|||
margin: 0 20px; |
|||
} |
|||
|
|||
.div_btn { |
|||
// display: flex; |
|||
// justify-content: flex-end; |
|||
} |
|||
.el-tabs { |
|||
margin: 0 20px; |
|||
} |
|||
.el-upload__tip { |
|||
color: rgb(155, 155, 155); |
|||
margin: 0; |
|||
} |
|||
.form { |
|||
margin-top: 30px; |
|||
} |
|||
.el-upload__tip { |
|||
color: rgb(155, 155, 155); |
|||
margin: 0; |
|||
} |
|||
|
|||
.form { |
|||
margin-top: 30px; |
|||
} |
|||
|
|||
.attachement-list { |
|||
} |
|||
</style> |
|||
.attachement-list {} |
|||
</style> |
|||
Loading…
Reference in new issue