zhangyuan
3 years ago
20 changed files with 5021 additions and 11 deletions
Binary file not shown.
Binary file not shown.
@ -0,0 +1,105 @@ |
|||
<template> |
|||
<el-card shadow="never" class="aui-card--fill"> |
|||
<div> |
|||
<el-form> |
|||
<el-form-item label="乡镇" prop="outStreet" label-width="80px" v-if="$hasPermission('sys:epidemicreportuserinfo:townsSearch')"> |
|||
<el-select v-model="outStreet" placeholder="乡镇" @change="selectModel($event)" clearable> |
|||
<el-option v-for="item in outStreetArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" > |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div style="text-align: center" v-if="$hasPermission('sys:epidemicreportuserinfo:townsSearch')"> |
|||
<h2>{{ title }}人员出入情况</h2> |
|||
</div> |
|||
<div style="text-align: center" v-else> |
|||
<h2>人员出入情况</h2> |
|||
</div> |
|||
<!-- <div id="myChart" :style="{width: '1000px', height: '300px'}"></div>--> |
|||
<chart ref="chart1" :style="{width: '1000px', height: '300px'}" :options="orgOptions" :auto-resize="true"></chart> |
|||
</div> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "hellowEcharts", |
|||
data() { |
|||
return { |
|||
title: "平阴县", |
|||
outStreet:'', |
|||
outStreetArr:[], |
|||
barName:'', |
|||
peopleNumber : [1,2,3], |
|||
orgOptions:{} |
|||
} |
|||
}, |
|||
created: function () { |
|||
this.getDailyTypeArrInfo() |
|||
this.getPeopleNumber(""); |
|||
}, |
|||
mounted() { |
|||
// this.drawLine(); |
|||
this.orgOptions = { |
|||
tooltip: {}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: ["外地人数", "返乡人数", "现住外地人数"] |
|||
}, |
|||
yAxis: { |
|||
type: 'value' |
|||
}, |
|||
series: [{ |
|||
data: [0, 0, 0], |
|||
type: 'bar', |
|||
name:"人员情况", |
|||
label: { |
|||
show: true, |
|||
position: 'top', |
|||
color: 'rgba(20, 101, 230, 1)' |
|||
}, |
|||
}] |
|||
} |
|||
}, |
|||
methods: { |
|||
// 获取乡镇下拉信息(传参：4代表查“街道”) |
|||
getDailyTypeArrInfo () { |
|||
this.$http.get(`epidemicreportuserinfo/selectStreet/4`).then(({ data: res }) => { |
|||
this.outStreetArr = res |
|||
}).catch(() => {}) |
|||
}, |
|||
// 乡镇取值变化事件 |
|||
selectModel (event) { |
|||
if (event == ''){ |
|||
this.title = '平阴县' |
|||
this.barName = '平阴县' |
|||
this.getPeopleNumber(event); |
|||
} |
|||
this.outStreetArr.find((item) => { |
|||
if (item.dictValue === event) { |
|||
this.title = item.dictName |
|||
this.barName = item.dictName |
|||
this.outStreet = item.dictValue |
|||
this.getPeopleNumber(item.dictValue) |
|||
} |
|||
}) |
|||
}, |
|||
getPeopleNumber(item){ |
|||
if (item == ""){ |
|||
item = 0 |
|||
} |
|||
this.$http.get(`select/getPeopleNumber/`+item).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.orgOptions.series[0].data = res.data |
|||
console.log(res.data) |
|||
}).catch(() => {}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,573 @@ |
|||
<template> |
|||
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false"> |
|||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '140px' : '100px'"> |
|||
<div>房屋信息</div> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-form-item label="所在镇街" prop="streetId"> |
|||
<el-select v-model="dataForm.streetId" @change="selectModel($event)" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in streetArr" |
|||
:key="item.deptId" |
|||
:label="item.name" |
|||
:value="item.deptId" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="所在村居" |
|||
prop="communityId"> |
|||
<el-select v-model="dataForm.communityId" @change="selectGrid($event)" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option v-for="item in communitys" |
|||
:key="item.deptId" |
|||
:label="item.name" |
|||
:value="item.deptId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="所在网格" |
|||
prop="gridId"> |
|||
<el-select v-model="dataForm.gridId" @change="selectPlot($event)" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option v-for="item in grids" |
|||
:key="item.deptId" |
|||
:label="item.name" |
|||
:value="item.deptId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-form-item label="所在街/路" prop="roadName"> |
|||
<el-input v-model="dataForm.roadName" placeholder="如：某某路几号"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="所在小区" prop="plotId"> |
|||
<el-select v-model="dataForm.plotId" @change="selectBuilding($event)" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in plotArr" |
|||
:key="item.dictValue" |
|||
:label="item.dictName" |
|||
:value="item.dictValue" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-form-item label="楼栋" prop="buildingId"> |
|||
<el-select v-model="dataForm.buildingId" clearable placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in buildingArr" |
|||
:key="item.dictValue" |
|||
:label="item.dictName" |
|||
:value="item.dictValue" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="单元" prop="unit"> |
|||
<el-input v-model="dataForm.unit" placeholder="单元"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="门牌号" prop="roomNo"> |
|||
<el-input v-model="dataForm.roomNo" placeholder="门牌号"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-form-item label="房屋类型" prop="roomType"> |
|||
<el-select v-model="dataForm.roomType" placeholder="请选择" clearable > |
|||
<el-option v-for="item in roomTypeArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" > |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="房屋用途" prop="roomUse"> |
|||
<el-select v-model="dataForm.roomUse" placeholder="请选择" clearable > |
|||
<el-option v-for="item in roomUseArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" > |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="房屋现状" prop="roomStatus"> |
|||
<el-select v-model="dataForm.roomStatus" placeholder="请选择" clearable > |
|||
<el-option v-for="item in roomStatusArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" > |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-form-item label="居住情况" prop="livingStatus"> |
|||
<el-select v-model="dataForm.livingStatus" placeholder="请选择" clearable @change="selectLivingStatus($event)"> |
|||
<el-option v-for="item in livingStatusArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" > |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<div v-if="dataForm.owners.length > 0">房主信息</div> |
|||
<div v-for="(item, index) in dataForm.owners" :key="index"> |
|||
<el-row> |
|||
<el-col :span="10"> |
|||
<el-form-item label="身份证号"> |
|||
<el-input @blur="blurIdCard(item.idCard, index)" v-model="item.idCard" placeholder="身份证号"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="10"> |
|||
<el-form-item label="房主姓名"> |
|||
<el-input v-model="item.ownerName" placeholder="房主姓名"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="10"> |
|||
<el-form-item label="联系电话"> |
|||
<el-input v-model="item.mobile" placeholder="联系电话"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="10"> |
|||
<el-form-item label="现住址"> |
|||
<el-input v-model="item.address" placeholder="现住址"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col v-if="index === 0" :span="4"> |
|||
<div @click="addOwners" class="add-owners"> |
|||
<i class="el-icon-circle-plus-outline"></i> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
<div>出租信息</div> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item label="是否出租" prop="isRental"> |
|||
<el-select v-model="dataForm.isRental" @change="selectYn($event)" placeholder="请选择" clearable > |
|||
<el-option v-for="item in yNArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" > |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item v-show="dataForm.isRental==='0'" label="出租用途" prop="rentalPurpose"> |
|||
<el-select v-model="dataForm.rentalPurpose" placeholder="请选择" clearable > |
|||
<el-option v-for="item in rentalPurposeArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" > |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item v-show="dataForm.isRental==='0'" label="承租人姓名" prop="lesseeName"> |
|||
<el-input v-model="dataForm.lesseeName" placeholder="承租人姓名"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item v-show="dataForm.isRental==='0'" label="承租人电话" prop="lesseeMobile"> |
|||
<el-input v-model="dataForm.lesseeMobile" placeholder="承租人电话"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="130px" v-show="dataForm.isRental==='0'" label="承租人身份证号" prop="lesseeIdCard"> |
|||
<el-input v-model="dataForm.lesseeIdCard" placeholder="承租人身份证号"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item v-show="dataForm.isRental==='0'" label="承租单位" prop="lesseeUnit"> |
|||
<el-input v-model="dataForm.lesseeUnit" placeholder="承租单位"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"></el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item v-show="dataForm.isRental==='0'" label="承租日期" prop="lesseeDate"> |
|||
<el-date-picker |
|||
v-model="dataForm.lesseeDate" |
|||
type="date" |
|||
value-format="yyyy-MM-dd" |
|||
format="yyyy-MM-dd" |
|||
style="width: 200px" |
|||
placeholder="选择日期"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item v-show="dataForm.isRental==='0'" label="承租期限" prop="lesseeTime"> |
|||
<el-input v-model="dataForm.lesseeTime" placeholder="承租期限" style="width: 200px"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|||
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import debounce from 'lodash/debounce' |
|||
export default { |
|||
data () { |
|||
return { |
|||
visible: false, |
|||
buildingArr: [], |
|||
roomTypeArr: [], |
|||
roomUseArr: [], |
|||
rentalPurposeArr: [], |
|||
yNArr: [], |
|||
roomStatusArr: [], |
|||
livingStatusArr: [], |
|||
dataForm: { |
|||
id: '', |
|||
buildingId: '', |
|||
unit: '', |
|||
roomNo: '', |
|||
roadName: '', |
|||
roomType: '', |
|||
roomUse: '', |
|||
owners: [{ |
|||
ownerName: '', |
|||
idCard: '', |
|||
mobile: '', |
|||
address: '' |
|||
}], |
|||
isRental: '1', |
|||
rentalPurpose: '', |
|||
lesseeName: '', |
|||
lesseeIdCard: '', |
|||
lesseeMobile: '', |
|||
lesseeUnit: '', |
|||
lesseeTime: '', |
|||
lesseeDate: '', |
|||
plotId: '', |
|||
streetId: '', |
|||
communityId: '', |
|||
gridId: '', |
|||
streetName: '', |
|||
communityName: '', |
|||
gridName: '', |
|||
roomStatus: '', |
|||
livingStatus: '' |
|||
}, |
|||
streetArr: [], |
|||
communitys: [], |
|||
plotArr: [], |
|||
grids: [] |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
gridId: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
streetId: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
communityId: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
ownerName: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
idCard: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
mobile: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
roomNo: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
roomType: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
init () { |
|||
this.getOptions() |
|||
this.getDailyTypeArrInfo() |
|||
this.visible = true |
|||
this.$nextTick(() => { |
|||
this.$refs['dataForm'].resetFields() |
|||
this.dataForm.owners = [{ |
|||
ownerName: '', |
|||
idCard: '', |
|||
mobile: '', |
|||
address: '' |
|||
}] |
|||
this.dataForm.streetName = '' |
|||
this.dataForm.communityName = '' |
|||
this.dataForm.gridName = '' |
|||
if (this.dataForm.id) { |
|||
this.getInfo() |
|||
} |
|||
}) |
|||
}, |
|||
// 获取信息 |
|||
getInfo () { |
|||
this.$http.get(`/custom/epidemicbuildingunit/${this.dataForm.id}`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.dataForm = { |
|||
...this.dataForm, |
|||
...res.data |
|||
} |
|||
this.queryComm(this.dataForm.streetId) |
|||
this.queryGrid(this.dataForm.communityId) |
|||
this.queryPlot() |
|||
if (this.dataForm.plotId != null) { |
|||
this.queryBuilding() |
|||
} |
|||
}).catch(() => {}) |
|||
}, |
|||
queryComm (event) { |
|||
this.$http.get(`sys/dept/deptInfo?deptPid=${event}`).then(({ data: res }) => { |
|||
this.communitys = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
queryGrid (event) { |
|||
this.$http.get(`sys/dept/deptInfo?deptPid=${event}`).then(({ data: res }) => { |
|||
this.grids = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
queryPlot () { |
|||
this.$http |
|||
.get(`/custom/epidemicplotcoordinate/getPlotOption?streetId=${this.dataForm.streetId}&communityId=${this.dataForm.communityId}&gridId=${this.dataForm.gridId}`) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.plotArr = res.data |
|||
}) |
|||
}, |
|||
queryBuilding () { |
|||
this.$http |
|||
.get(`/custom/epidemicplotbuilding/getBuildingOption?plotId=${this.dataForm.plotId}`) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.buildingArr = res.data |
|||
}) |
|||
.catch(() => {}) |
|||
}, |
|||
// 获取乡镇下拉信息(传参：4代表查“街道”) |
|||
getDailyTypeArrInfo () { |
|||
this.$http.get(`sys/dept/deptInfo?tags=street_party`).then(({ data: res }) => { |
|||
this.streetArr = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
selectYn (event) { |
|||
if (event === '1') { |
|||
this.dataForm.rentalPurpose = '' |
|||
this.dataForm.lesseeName = '' |
|||
this.dataForm.lesseeIdCard = '' |
|||
this.dataForm.lesseeMobile = '' |
|||
this.dataForm.lesseeUnit = '' |
|||
this.dataForm.lesseeTime = '' |
|||
this.dataForm.lesseeDate = null |
|||
} |
|||
}, |
|||
selectModel (event) { |
|||
this.dataForm.communityId = '' |
|||
this.streetArr.find((item) => { |
|||
if (item.deptId === event) { |
|||
this.dataForm.streetId = item.deptId |
|||
this.dataForm.streetName = item.name |
|||
this.queryComm(event) |
|||
} |
|||
}) |
|||
}, |
|||
selectGrid (event) { |
|||
this.dataForm.gridId = '' |
|||
this.communitys.find((item) => { |
|||
if (item.deptId === event) { |
|||
this.dataForm.communityId = item.deptId |
|||
this.dataForm.communityName = item.name |
|||
this.queryGrid(event) |
|||
} |
|||
}) |
|||
}, |
|||
selectPlot (event) { |
|||
this.dataForm.plotId = '' |
|||
this.grids.find((item) => { |
|||
if (item.deptId === event) { |
|||
this.dataForm.gridId = item.deptId |
|||
this.dataForm.gridName = item.name |
|||
this.queryPlot() |
|||
} |
|||
}) |
|||
}, |
|||
selectBuilding (event) { |
|||
this.dataForm.buildingId = '' |
|||
this.plotArr.find((item) => { |
|||
if (item.dictValue === event) { |
|||
this.dataForm.plotId = item.dictValue |
|||
this.queryBuilding() |
|||
} |
|||
}) |
|||
}, |
|||
selectLivingStatus (event) { |
|||
console.log(event) |
|||
}, |
|||
getOptions () { |
|||
// this.$http |
|||
// .get(`/epidemicplotbuilding/getBuildingOption?plotId=${this.dataForm.plotId}`) |
|||
// .then(({ data: res }) => { |
|||
// if (res.code !== 0) { |
|||
// return this.$message.error(res.msg) |
|||
// } |
|||
// this.buildingArr = res.data |
|||
// }) |
|||
// .catch(() => {}) |
|||
this.$http.get(`/sys/dict/listSimple/room_type`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.roomTypeArr = res.data |
|||
}).catch(() => {}) |
|||
this.$http.get(`/sys/dict/listSimple/room_use`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.roomUseArr = res.data |
|||
}).catch(() => {}) |
|||
this.$http.get(`/sys/dict/listSimple/rental_purpose`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.rentalPurposeArr = res.data |
|||
}).catch(() => {}) |
|||
this.$http.get(`/sys/dict/listSimple/epmet_y_n`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.yNArr = res.data |
|||
}).catch(() => {}) |
|||
// 房屋现状 |
|||
this.$http.get(`/sys/dict/listSimple/house_status`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.roomStatusArr = res.data |
|||
}).catch(() => {}) |
|||
// 居住情况 |
|||
this.$http.get(`/sys/dict/listSimple/house_purpose`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.livingStatusArr = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
// 当事人点击添加一条输入数据 |
|||
addOwners () { |
|||
var nowOwners = this.dataForm.owners[this.dataForm.owners.length - 1] |
|||
if (!nowOwners.ownerName) { |
|||
return this.$message.error('请填写房主姓名') |
|||
} else if (!nowOwners.mobile) { |
|||
return this.$message.error('请填写联系电话') |
|||
} else if (!nowOwners.idCard) { |
|||
return this.$message.error('请填写身份证号') |
|||
} |
|||
this.dataForm.owners.push({ |
|||
ownerName: '', |
|||
idCard: '', |
|||
mobile: '', |
|||
address: '' |
|||
}) |
|||
}, |
|||
blurIdCard (idCard, index) { |
|||
this.$http.get(`custom/epidemicuserinfo/getOwner?idCard=${idCard}`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
if (res.data) { |
|||
this.$set(this.dataForm.owners[index], 'ownerName', res.data.ownerName) |
|||
this.$set(this.dataForm.owners[index], 'mobile', res.data.mobile) |
|||
this.$set(this.dataForm.owners[index], 'address', res.data.address) |
|||
} else { |
|||
this.$set(this.dataForm.owners[index], 'ownerName', '') |
|||
this.$set(this.dataForm.owners[index], 'mobile', '') |
|||
this.$set(this.dataForm.owners[index], 'address', '') |
|||
} |
|||
}).catch(() => {}) |
|||
}, |
|||
// 表单提交 |
|||
dataFormSubmitHandle: debounce(function () { |
|||
var nowOwners = this.dataForm.owners[0] |
|||
if (!nowOwners.ownerName) { |
|||
return this.$message.error('请填写房主姓名') |
|||
} else if (!nowOwners.mobile) { |
|||
return this.$message.error('请填写联系电话') |
|||
} else if (!nowOwners.idCard) { |
|||
return this.$message.error('请填写身份证号') |
|||
} |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
this.$http[!this.dataForm.id ? 'post' : 'put']('/custom/epidemicbuildingunit/', this.dataForm).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
this.visible = false |
|||
this.$emit('refreshDataList') |
|||
} |
|||
}) |
|||
}).catch(() => {}) |
|||
}) |
|||
}, 1000, { 'leading': true, 'trailing': false }) |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.add-owners{ |
|||
width: 100%; |
|||
height: 40px; |
|||
padding: 0 20px; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.add-owners i{ |
|||
width: 30px; |
|||
height: 30px; |
|||
font-size: 30px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,236 @@ |
|||
<template> |
|||
<el-card shadow="never" class="aui-card--fill"> |
|||
<div class="mod-__epidemicbuildingunit}"> |
|||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> |
|||
<el-form-item label="房间号" prop="roomNo"> |
|||
<el-input v-model="dataForm.roomNo" placeholder="房间号" clearable></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="房屋类型" prop="roomType"> |
|||
<el-select v-model="dataForm.roomType" placeholder="房屋类型" clearable > |
|||
<el-option v-for="item in roomTypeArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" > |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="房主姓名" prop="ownerName"> |
|||
<el-input v-model="dataForm.ownerName" placeholder="房主姓名" clearable></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="手机号" prop="mobile"> |
|||
<el-input v-model="dataForm.mobile" placeholder="手机号" clearable></el-input> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button @click="getDataList()">{{ $t('query') }}</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button v-if="$hasPermission('dev:room:update')" type="danger" @click="updateOwner()">更新关系</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button v-if="$hasPermission(':epidemicbuildingunit:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary"> |
|||
<a :href="`https://epdc-yushan.elinkservice.cn/epdc-admin/fang.xlsx`" |
|||
target="_blank" |
|||
download="人房信息表.xlsx" |
|||
style="color: #ffffff">{{ $t('exportTemplate') }}</a> |
|||
</el-button> |
|||
</el-form-item> |
|||
<el-form-item label="导入网格" |
|||
label-width="90px"> |
|||
<el-cascader v-model="deptIdListUpload" |
|||
ref="deptTree" |
|||
:options="options" |
|||
:props="{ checkStrictly: false }" |
|||
clearable> |
|||
</el-cascader> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" |
|||
@click="beforeImportUser">导入</el-button> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-upload ref="upload" |
|||
:action="uploadUrl" |
|||
:limit="1" |
|||
:on-success='uploadSuccess' |
|||
:on-error='errorExceed'> |
|||
<el-button id="importBut" |
|||
style="display: none" |
|||
type="primary">导入</el-button> |
|||
</el-upload> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;"> |
|||
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> |
|||
<el-table-column prop="roomNo" label="门牌号" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="roomType" label="房屋类型" :formatter="roomTypeFormat" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="streetName" label="所在镇街" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="communityName" label="社区/村庄" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="gridName" label="网格名称" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="plotName" label="所在小区" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="buildingName" label="楼栋" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="unit" label="单元" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="roomUse" label="房屋用途" :formatter="roomUseFormat" header-align="center" align="center"></el-table-column> |
|||
<!-- <el-table-column prop="ownerName" label="房主姓名" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="idCard" label="身份证号" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="mobile" label="手机号" header-align="center" align="center"></el-table-column> --> |
|||
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button> |
|||
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination |
|||
:current-page="page" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="limit" |
|||
:total="total" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
@size-change="pageSizeChangeHandle" |
|||
@current-change="pageCurrentChangeHandle"> |
|||
</el-pagination> |
|||
<!-- 弹窗, 新增 / 修改 --> |
|||
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> |
|||
</div> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import AddOrUpdate from './epidemicbuildingunit-add-or-update' |
|||
import Cookies from "js-cookie"; |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/custom/epidemicbuildingunit/page', |
|||
getDataListIsPage: true, |
|||
deleteURL: '/custom/epidemicbuildingunit', |
|||
deleteIsBatch: true |
|||
}, |
|||
options: [], |
|||
deptIdListUpload: [], |
|||
roomTypeArr: [], |
|||
roomUseArr: [], |
|||
dataForm: { |
|||
id: '' |
|||
} |
|||
} |
|||
}, |
|||
components: { |
|||
AddOrUpdate |
|||
}, |
|||
watch: { |
|||
'deptIdListUpload': function (val) { |
|||
if (val.length > 0) { |
|||
this.gridIdImport = val[val.length - 1] |
|||
this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/custom/epidemicbuildingunit/importHouse?token= |
|||
${Cookies.get('token')}&gridId=` + val[val.length - 1] |
|||
} else { |
|||
this.gridIdImport = '' |
|||
} |
|||
} |
|||
}, |
|||
created: function () { |
|||
this.getOptions() |
|||
}, |
|||
methods: { |
|||
getOptions () { |
|||
this.$http |
|||
.get(`/sys/user/deptOptions/getByLoginUser`) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.options = res.data.options |
|||
}) |
|||
.catch(() => { }) |
|||
this.$http.get(`/sys/dict/listSimple/room_type`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.roomTypeArr = res.data |
|||
}).catch(() => {}) |
|||
this.$http.get(`/sys/dict/listSimple/room_use`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.roomUseArr = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
updateOwner () { |
|||
this.$http.get(`/custom/epidemicbuildingunit/updateOwner`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
}).catch(() => {}) |
|||
}, |
|||
roomTypeFormat (row, column) { |
|||
if (row.roomType) { |
|||
let dict = this.roomTypeArr.filter(item => item.dictValue === row.roomType)[0] |
|||
if (dict) { |
|||
return dict.dictName |
|||
} |
|||
} |
|||
return '' |
|||
}, |
|||
roomUseFormat (row, column) { |
|||
if (row.roomUse) { |
|||
let dict = this.roomUseArr.filter(item => item.dictValue === row.roomUse)[0] |
|||
if (dict) { |
|||
return dict.dictName |
|||
} |
|||
} |
|||
return '' |
|||
}, |
|||
uploadSuccess (response, file, fileList) { |
|||
this.uploeadLoeading = false |
|||
this.$refs.upload.clearFiles() |
|||
if (response.code !== 0 || (response.data !== null && response.data.length > 0)) { |
|||
this.errordataList = response.data |
|||
if (this.errordataList != null && this.errordataList.length > 0) { |
|||
this.faultDataVisible = true |
|||
} else { |
|||
this.$message.error(response.msg) |
|||
} |
|||
this.getDataList() |
|||
return |
|||
} |
|||
this.$message({ |
|||
message: '导入成功', |
|||
type: 'success', |
|||
duration: 1000, |
|||
onClose: () => { |
|||
this.getDataList() |
|||
} |
|||
}) |
|||
}, |
|||
errorExceed (file, fileList) { |
|||
this.uploeadLoeading = false |
|||
this.$message.error('上传失败请重试') |
|||
}, |
|||
beforeImportUser () { |
|||
//所属组织全都不选，直接上传 |
|||
if (this.gridIdImport === '') { |
|||
document.getElementById('importBut').click() |
|||
return false |
|||
} |
|||
//选中网格 |
|||
let selectGird = this.$refs['deptTree'].getCheckedNodes()[0].label |
|||
|
|||
this.$confirm(`确定将用户导入到${selectGird}?`, '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
document.getElementById('importBut').click() |
|||
}).catch(() => { }) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,560 @@ |
|||
<template> |
|||
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false"> |
|||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '140px' : '130px'"> |
|||
<!-- <el-form-item label="小区.村ID" prop="plotId"> |
|||
<el-input v-model="dataForm.plotId" placeholder="小区.村ID"></el-input> |
|||
</el-form-item> --> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item label="所在镇街" |
|||
prop="streetId"> |
|||
<el-select v-model="dataForm.streetId" |
|||
placeholder="请选择" |
|||
@change="selectModel($event)" |
|||
clearable |
|||
> |
|||
<el-option v-for="item in streetArr" |
|||
:key="item.deptId" |
|||
:label="item.name" |
|||
:value="item.deptId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="所在村居" |
|||
prop="communityId"> |
|||
<el-select v-model="dataForm.communityId" |
|||
placeholder="请选择" |
|||
@change="selectPlot($event)" |
|||
clearable |
|||
> |
|||
<el-option v-for="item in communitys" |
|||
:key="item.deptId" |
|||
:label="item.name" |
|||
:value="item.deptId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item label="网格名称" |
|||
prop="gridId"> |
|||
<el-select v-model="dataForm.gridId" |
|||
placeholder="请选择" |
|||
@change="selectGrid($event)" |
|||
clearable |
|||
> |
|||
<el-option v-for="item in grids" |
|||
:key="item.deptId" |
|||
:label="item.name" |
|||
:value="item.deptId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="所在小区" prop="plotId"> |
|||
<el-select v-model="dataForm.plotId" clearable placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in plotArr" |
|||
:key="item.dictValue" |
|||
:label="item.dictName" |
|||
:value="item.dictValue" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item label="小区性质" prop="plotNature"> |
|||
<el-select v-model="dataForm.plotNature" clearable placeholder="小区性质"> |
|||
<el-option v-for="item in plotNatureList" :key="item.dictValue" :label="item.dictName" :value="item.dictValue"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="楼栋状态" prop="buildingState"> |
|||
<el-select v-model="dataForm.buildingState" clearable placeholder="楼栋状态"> |
|||
<el-option v-for="item in buildingStateList" :key="item.dictValue" :label="item.dictName" :value="item.dictValue"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-form-item label="楼栋编码" prop="buildingCode"> |
|||
<el-input v-model="dataForm.buildingCode" placeholder="楼栋编码" maxlength="22" show-word-limit></el-input> |
|||
</el-form-item> |
|||
<el-col :span="16"> |
|||
<el-form-item label="楼栋名称" prop="buildingName"> |
|||
<el-input v-model="dataForm.buildingName" placeholder="如：（某小区）几号楼、某某大厦A等"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="楼栋类型" prop="buildingType"> |
|||
<el-select v-model="dataForm.buildingType" placeholder="请选择" clearable > |
|||
<el-option v-for="item in buildingTypeArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" > |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item label="经度" prop="buildingLongitude"> |
|||
<el-input disabled v-model="dataForm.buildingLongitude" placeholder="经度"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="纬度" prop="buildingLatitude"> |
|||
<el-input disabled v-model="dataForm.buildingLatitude" placeholder="纬度"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row v-show="wgsShow"> |
|||
<el-col :span="12"> |
|||
<el-form-item label="WGS-84经度" prop="buildingLongitudeDsf"> |
|||
<el-input disabled v-model="dataForm.buildingLongitudeDsf" placeholder="WGS-84经度"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="WGS-84纬度" prop="buildingLatitudeDsf"> |
|||
<el-input disabled v-model="dataForm.buildingLatitudeDsf" placeholder="WGS-84纬度"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-form-item label="楼栋地址" prop="buildingAddress"> |
|||
<el-input disabled v-model="dataForm.buildingAddress" placeholder="点击下面地图获取地址"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-form-item label="地址检索" prop="mapPlotName"> |
|||
<el-amap-search-box class="search-box" :search-option="amap.searchOption" :on-search-result="onSearchResult"> |
|||
</el-amap-search-box> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<div class="amap-wrapper"> |
|||
<el-amap class="amap-box" :vid="'amap-vue'" :center="amap.mapInfo.lnglat" :zoom="amap.zoom" :events="amap.events" :amap-manager="amap.amapManager" :plugin="amap.plugin"> |
|||
<!-- 点标记在地图上显示的位置，默认为地图中心点， --> |
|||
<el-amap-marker :position="amap.mapInfo.lnglat"></el-amap-marker> |
|||
</el-amap> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-form-item label="地上楼层数" prop="floorNum"> |
|||
<el-input-number style="width: 80%" v-model="dataForm.floorNum" controls-position="right" :min="1" :max="999" label="楼层数"></el-input-number> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="地上单元数" prop="roomNum"> |
|||
<el-input-number style="width: 80%" v-model="dataForm.roomNum" controls-position="right" :min="1" :max="999" label="房间数"></el-input-number> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="地上总户数" prop="householdNum"> |
|||
<el-input-number style="width: 80%" v-model="dataForm.householdNum" controls-position="right" :min="0" :max="999" label="住户数"></el-input-number> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-form-item label="楼栋总人数" prop="buildingUserTotal"> |
|||
<el-input-number style="width: 80%" v-model="dataForm.buildingUserTotal" controls-position="right" :min="0" :max="999" label="楼栋总人数"></el-input-number> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="地下楼层数" prop="undergroundLayerNum"> |
|||
<el-input-number style="width: 80%" v-model="dataForm.undergroundLayerNum" controls-position="right" :min="0" :max="999" label="地下楼层数"></el-input-number> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="地下房间数" prop="undergroundRoomNum"> |
|||
<el-input-number style="width: 80%" v-model="dataForm.undergroundRoomNum" controls-position="right" :min="0" :max="999" label="地下房间数"></el-input-number> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item label="楼长姓名" prop="assisantName"> |
|||
<el-input v-model="dataForm.assisantName" placeholder="楼长姓名"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="楼长电话" prop="assisantMobile"> |
|||
<el-input v-model="dataForm.assisantMobile" placeholder="楼长电话"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item label="物业公司" prop="propertyName"> |
|||
<el-input v-model="dataForm.propertyName" placeholder="物业公司"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="物业联系人" prop="propertyUser"> |
|||
<el-input v-model="dataForm.propertyUser" placeholder="物业联系人"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item label="物业联系电话" prop="propertyMobile"> |
|||
<el-input v-model="dataForm.propertyMobile" placeholder="物业联系电话"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="房屋面积m²" prop="buildingArea"> |
|||
<el-input v-model="dataForm.buildingArea" placeholder="房屋面积m²"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-form-item label="供水供电供热单位" prop="serviceSupplyUnit"> |
|||
<el-input v-model="dataForm.serviceSupplyUnit" placeholder="供水供电供热单位"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="消防器材位置" prop="fireControlPosition"> |
|||
<el-input v-model="dataForm.fireControlPosition" placeholder="消防器材位置"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="应急物资位置" prop="emergencyPosition"> |
|||
<el-input v-model="dataForm.emergencyPosition" placeholder="应急物资位置"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|||
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import debounce from 'lodash/debounce' |
|||
import { AMapManager } from 'vue-amap' |
|||
|
|||
const amapManager = new AMapManager() |
|||
|
|||
export default { |
|||
data () { |
|||
return { |
|||
wgsShow: false, |
|||
visible: false, |
|||
streetArr: [], |
|||
communitys: [], |
|||
grids: [], |
|||
plotArr: [], |
|||
buildingTypeArr: [], |
|||
plotNatureList: [], |
|||
buildingStateList: [], |
|||
dataForm: { |
|||
id: '', |
|||
plotId: '', |
|||
buildingName: '', |
|||
buildingType: '', |
|||
floorNum: '', |
|||
roomNum: '', |
|||
householdNum: '', |
|||
communityName: '', |
|||
communityId: '', |
|||
gridId: '', |
|||
gridName: '', |
|||
streetName: '', |
|||
streetId: '', |
|||
buildingLongitude: '', |
|||
buildingLatitude: '', |
|||
buildingLongitudeDsf: '', |
|||
buildingLatitudeDsf: '', |
|||
buildingCode:'', |
|||
buildingState: '', |
|||
buildingArea: '', |
|||
buildingAddress: '', |
|||
assisantName: '', |
|||
assisantMobile: '', |
|||
propertyName: '', |
|||
propertyUser: '', |
|||
propertyMobile: '', |
|||
plotNature: '', |
|||
buildingUserTotal: '', |
|||
undergroundLayerNum: '', |
|||
undergroundRoomNum: '', |
|||
serviceSupplyUnit: '', |
|||
fireControlPosition: '', |
|||
emergencyPosition: '' |
|||
}, |
|||
amap: { |
|||
mapInfo: { |
|||
address: '', // 初始值 |
|||
lng: 0, |
|||
lat: 0, |
|||
lnglat: [116.459176,36.289432] |
|||
}, |
|||
events: { |
|||
click: (e) => { |
|||
this.amap.mapInfo.lng = e.lnglat.lng; |
|||
this.amap.mapInfo.lat = e.lnglat.lat; |
|||
this.amap.mapInfo.lnglat = [e.lnglat.lng, e.lnglat.lat]; |
|||
this.getFormattedAddress(); |
|||
} |
|||
}, |
|||
zoom: 16, |
|||
amapManager, |
|||
searchOption: { |
|||
city: "济南市", |
|||
citylimit: false, |
|||
}, |
|||
plugin: [ |
|||
{ |
|||
// pName为必填字段 |
|||
pName: 'MapType', |
|||
defaultType: 0 |
|||
}, |
|||
{ |
|||
// pName为必填字段 |
|||
pName: 'Autocomplete' |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
'amap.mapInfo.lnglat' : { |
|||
handler(newVal, oldVal) { |
|||
this.dataForm.buildingLongitude = newVal[0] |
|||
this.dataForm.buildingLatitude = newVal[1] |
|||
this.getFormattedAddress() |
|||
} |
|||
}, |
|||
'dataForm.buildingLongitude' : { |
|||
handler(newVal, oldVal) { |
|||
this.amap.mapInfo.lnglat = [this.dataForm.buildingLongitude,this.dataForm.buildingLatitude] |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
streetId: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
communityId: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
gridId: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
plotId: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
buildingName: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
buildingCode: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, |
|||
{ min: 22, max: 22, message: '楼栋编码必须为22位', trigger: 'blur' } |
|||
], |
|||
buildingLongitude: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
buildingLatitude: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
init () { |
|||
this.wgsShow = false |
|||
this.getDictInfo() |
|||
this.getDailyTypeArrInfo() |
|||
this.visible = true |
|||
this.$nextTick(() => { |
|||
this.$refs['dataForm'].resetFields() |
|||
if (this.dataForm.id) { |
|||
this.getInfo() |
|||
} |
|||
}) |
|||
if(this.dataForm.id != '' && this.dataForm.id != undefined) { |
|||
this.wgsShow = true; |
|||
this.getFormattedAddress() |
|||
} |
|||
}, |
|||
//获取数据字典 |
|||
getDictInfo(){ |
|||
//楼栋状态 |
|||
this.$http.get(`/sys/dict/listSimple/building_state`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.buildingStateList = res.data |
|||
}).catch(() => {}) |
|||
//小区性质 |
|||
this.$http.get(`/sys/dict/listSimple/plot_nature`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.plotNatureList = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
// 获取信息 |
|||
getInfo () { |
|||
this.$http.get(`/custom/epidemicplotbuilding/${this.dataForm.id}`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.dataForm = { |
|||
...this.dataForm, |
|||
...res.data |
|||
} |
|||
this.queryComm(this.dataForm.streetId) |
|||
this.queryGrid(this.dataForm.communityId) |
|||
this.getOptions(this.dataForm.gridId) |
|||
}).catch(() => {}) |
|||
}, |
|||
// 获取乡镇下拉信息(传参：4代表查“街道”) |
|||
getDailyTypeArrInfo () { |
|||
this.$http.get(`sys/dept/deptInfo?tags=street_party`).then(({ data: res }) => { |
|||
this.streetArr = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
selectModel (event) { |
|||
this.dataForm.communityName = '' |
|||
this.dataForm.communityId = '' |
|||
this.communitys = [] |
|||
this.dataForm.gridName = '' |
|||
this.dataForm.gridId = '' |
|||
this.grids = [] |
|||
this.dataForm.plotId = '' |
|||
this.plotArr = [] |
|||
this.streetArr.find((item) => { |
|||
if (item.deptId === event) { |
|||
this.dataForm.streetId = item.deptId |
|||
this.dataForm.streetName = item.name |
|||
this.queryComm(event) |
|||
} |
|||
}) |
|||
}, |
|||
queryComm (event) { |
|||
this.$http.get(`sys/dept/deptInfo?deptPid=${event}`).then(({ data: res }) => { |
|||
this.communitys = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
selectGrid (event) { |
|||
this.dataForm.plotId = '' |
|||
this.plotArr = [] |
|||
this.grids.find((item) => { |
|||
if (item.deptId === event) { |
|||
this.dataForm.gridId = item.deptId |
|||
this.dataForm.gridName = item.name |
|||
this.getOptions(this.dataForm.gridId) |
|||
} |
|||
}) |
|||
}, |
|||
selectPlot (event) { |
|||
this.dataForm.gridName = '' |
|||
this.dataForm.gridId = '' |
|||
this.grids = [] |
|||
this.dataForm.plotId = '' |
|||
this.plotArr = [] |
|||
this.communitys.find((item) => { |
|||
if (item.deptId === event) { |
|||
this.dataForm.communityId = item.deptId |
|||
this.dataForm.communityName = item.name |
|||
this.queryGrid(event) |
|||
} |
|||
}) |
|||
}, |
|||
queryGrid (event) { |
|||
this.$http.get(`sys/dept/deptInfo?deptPid=${event}`).then(({ data: res }) => { |
|||
this.grids = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
getOptions (gridId) { |
|||
//查询网格下面的所属小区 |
|||
this.$http.get(`/custom/epidemicplotcoordinate/getPlotOption?gridId=${gridId}`) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.plotArr = res.data |
|||
}) |
|||
.catch(() => {}) |
|||
//楼栋类型 |
|||
this.$http.get(`/sys/dict/listSimple/building_type`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.buildingTypeArr = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
// 表单提交 |
|||
dataFormSubmitHandle: debounce(function () { |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
this.$http[!this.dataForm.id ? 'post' : 'put']('/custom/epidemicplotbuilding/', this.dataForm).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
this.visible = false |
|||
this.$emit('refreshDataList') |
|||
} |
|||
}) |
|||
}).catch(() => {}) |
|||
}) |
|||
}, 1000, { 'leading': true, 'trailing': false }), |
|||
getFormattedAddress() { |
|||
AMap.plugin('AMap.Geocoder', () => { |
|||
let GeocoderOptions = { city: '全国' } |
|||
let geocoder = new AMap.Geocoder(GeocoderOptions) |
|||
geocoder.getAddress(this.amap.mapInfo.lnglat, (status, result) => { |
|||
console.log('通过经纬度拿到的地址', result) |
|||
if (status === 'complete' && result.info === 'OK') { |
|||
this.amap.mapInfo.address = result.regeocode.formattedAddress |
|||
this.dataForm.buildingAddress = this.amap.mapInfo.address |
|||
} else { |
|||
this.amap.mapInfo.address = '无法获取地址'; |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
//点击搜索后触发的事件 |
|||
onSearchResult(pois){ |
|||
console.log(pois) |
|||
this.input = document.querySelector('.search-box-wrapper input').value |
|||
console.log(this.input) |
|||
this.amap.mapInfo.lnglat = [pois[0].lng,pois[0].lat] //选择了第一个值 |
|||
this.amap.markers = []; //标记点先清空 |
|||
this.amap.markers.push([pois[0].lng,pois[0].lat]) //把搜索的位置的第一个值存入标记中并显示标记点 |
|||
console.log(this.markers); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.amap-wrapper { |
|||
width: 100%; |
|||
height: 300px; |
|||
padding-left: 45px; |
|||
margin-bottom: 22px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,408 @@ |
|||
<template> |
|||
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false"> |
|||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '140px' : '100px'"> |
|||
<!-- <el-form-item label="小区.村ID" prop="plotId"> |
|||
<el-input v-model="dataForm.plotId" placeholder="小区.村ID"></el-input> |
|||
</el-form-item> --> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item label="所在镇街" |
|||
prop="streetId"> |
|||
<el-select v-model="dataForm.streetId" |
|||
placeholder="请选择" |
|||
@change="selectModel($event)" |
|||
clearable |
|||
> |
|||
<el-option v-for="item in streetArr" |
|||
:key="item.deptId" |
|||
:label="item.name" |
|||
:value="item.deptId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="所在村居" |
|||
prop="communityId"> |
|||
<el-select v-model="dataForm.communityId" |
|||
placeholder="请选择" |
|||
@change="selectPlot($event)" |
|||
clearable |
|||
> |
|||
<el-option v-for="item in communitys" |
|||
:key="item.deptId" |
|||
:label="item.name" |
|||
:value="item.deptId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item label="网格名称" |
|||
prop="gridId"> |
|||
<el-select v-model="dataForm.gridId" |
|||
placeholder="请选择" |
|||
@change="selectGrid($event)" |
|||
clearable |
|||
> |
|||
<el-option v-for="item in grids" |
|||
:key="item.deptId" |
|||
:label="item.name" |
|||
:value="item.deptId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="所在小区" prop="plotId"> |
|||
<el-select v-model="dataForm.plotId" clearable placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in plotArr" |
|||
:key="item.dictValue" |
|||
:label="item.dictName" |
|||
:value="item.dictValue" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="16"> |
|||
<el-form-item label-width="130px" label="楼栋名称/编号" prop="buildingName"> |
|||
<el-input v-model="dataForm.buildingName" placeholder="如：（某小区）几号楼、某某大厦A等"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="楼栋类型" prop="buildingType"> |
|||
<el-select v-model="dataForm.buildingType" placeholder="请选择" clearable > |
|||
<el-option v-for="item in buildingTypeArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" > |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-form-item label="楼栋层数" prop="floorNum"> |
|||
<el-input-number style="width: 80%" v-model="dataForm.floorNum" controls-position="right" :min="1" :max="999" label="楼层数"></el-input-number> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="单元数" prop="roomNum"> |
|||
<el-input-number style="width: 80%" v-model="dataForm.roomNum" controls-position="right" :min="1" :max="999" label="房间数"></el-input-number> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="住户数" prop="householdNum"> |
|||
<el-input-number style="width: 80%" v-model="dataForm.householdNum" controls-position="right" :min="0" :max="999" label="住户数"></el-input-number> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-form-item label="经度" prop="longitude"> |
|||
<el-input disabled v-model="amap.mapInfo.lng" placeholder="经度"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="纬度" prop="latitude"> |
|||
<el-input disabled v-model="amap.mapInfo.lat" placeholder="纬度"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-form-item label="楼栋地址" prop="mapPlotName"> |
|||
<el-input disabled v-model="amap.mapInfo.address" placeholder="点击下面地图获取地址"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-form-item label="地址检索" prop="mapPlotName"> |
|||
<el-amap-search-box class="search-box" :search-option="amap.searchOption" :on-search-result="onSearchResult"> |
|||
</el-amap-search-box> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<div class="amap-wrapper"> |
|||
<el-amap class="amap-box" :vid="'amap-vue'" :center="amap.mapInfo.lnglat" :zoom="amap.zoom" :events="amap.events" :amap-manager="amap.amapManager" :plugin="amap.plugin"> |
|||
<!-- 点标记在地图上显示的位置，默认为地图中心点， --> |
|||
<el-amap-marker :position="amap.mapInfo.lnglat"></el-amap-marker> |
|||
</el-amap> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|||
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import debounce from 'lodash/debounce' |
|||
import { AMapManager } from 'vue-amap' |
|||
|
|||
const amapManager = new AMapManager() |
|||
|
|||
export default { |
|||
data () { |
|||
return { |
|||
visible: false, |
|||
streetArr: [], |
|||
communitys: [], |
|||
grids: [], |
|||
plotArr: [], |
|||
buildingTypeArr: [], |
|||
dataForm: { |
|||
id: '', |
|||
plotId: '', |
|||
buildingName: '', |
|||
buildingType: '', |
|||
floorNum: '', |
|||
roomNum: '', |
|||
householdNum: '', |
|||
communityName: '', |
|||
communityId: '', |
|||
gridId: '', |
|||
gridName: '', |
|||
streetName: '', |
|||
streetId: '' |
|||
}, |
|||
amap: { |
|||
mapInfo: { |
|||
address: '', // 初始值 |
|||
lng: 0, |
|||
lat: 0, |
|||
lnglat: [116.459176,36.289432] |
|||
}, |
|||
events: { |
|||
click: (e) => { |
|||
this.amap.mapInfo.lng = e.lnglat.lng; |
|||
this.amap.mapInfo.lat = e.lnglat.lat; |
|||
this.amap.mapInfo.lnglat = [e.lnglat.lng, e.lnglat.lat]; |
|||
this.getFormattedAddress(); |
|||
} |
|||
}, |
|||
zoom: 16, |
|||
amapManager, |
|||
searchOption: { |
|||
city: "济南市", |
|||
citylimit: false, |
|||
}, |
|||
plugin: [ |
|||
{ |
|||
// pName为必填字段 |
|||
pName: 'MapType', |
|||
defaultType: 0 |
|||
}, |
|||
{ |
|||
// pName为必填字段 |
|||
pName: 'Autocomplete' |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
'amap.mapInfo.lnglat' : { |
|||
handler(newVal, oldVal) { |
|||
this.amap.mapInfo.lng = newVal[0] |
|||
this.amap.mapInfo.lat = newVal[1] |
|||
this.getFormattedAddress() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
streetId: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
communityId: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
gridId: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
buildingName: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
buildingType: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
floorNum: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
roomNum: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
init () { |
|||
// this.getOptions() |
|||
this.getDailyTypeArrInfo() |
|||
this.visible = true |
|||
this.$nextTick(() => { |
|||
this.$refs['dataForm'].resetFields() |
|||
if (this.dataForm.id) { |
|||
this.getInfo() |
|||
} |
|||
}) |
|||
}, |
|||
// 获取信息 |
|||
getInfo () { |
|||
this.$http.get(`/epidemicplotbuilding/${this.dataForm.id}`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.dataForm = { |
|||
...this.dataForm, |
|||
...res.data |
|||
} |
|||
this.queryComm(this.dataForm.streetId) |
|||
this.queryGrid(this.dataForm.communityId) |
|||
this.getOptions(this.dataForm.gridId) |
|||
}).catch(() => {}) |
|||
}, |
|||
// 获取乡镇下拉信息(传参：4代表查“街道”) |
|||
getDailyTypeArrInfo () { |
|||
this.$http.get(`sys/dept/deptInfo?tags=street_party`).then(({ data: res }) => { |
|||
this.streetArr = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
selectModel (event) { |
|||
this.dataForm.communityName = '' |
|||
this.dataForm.communityId = '' |
|||
this.communitys = [] |
|||
this.dataForm.gridName = '' |
|||
this.dataForm.gridId = '' |
|||
this.grids = [] |
|||
this.dataForm.plotId = '' |
|||
this.plotArr = [] |
|||
this.streetArr.find((item) => { |
|||
if (item.deptId === event) { |
|||
this.dataForm.streetId = item.deptId |
|||
this.dataForm.streetName = item.name |
|||
this.queryComm(event) |
|||
} |
|||
}) |
|||
}, |
|||
queryComm (event) { |
|||
this.$http.get(`sys/dept/deptInfo?deptPid=${event}`).then(({ data: res }) => { |
|||
this.communitys = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
selectGrid (event) { |
|||
this.dataForm.plotId = '' |
|||
this.plotArr = [] |
|||
this.grids.find((item) => { |
|||
if (item.deptId === event) { |
|||
this.dataForm.gridId = item.deptId |
|||
this.dataForm.gridName = item.name |
|||
this.getOptions(this.dataForm.gridId) |
|||
} |
|||
}) |
|||
}, |
|||
selectPlot (event) { |
|||
this.dataForm.gridName = '' |
|||
this.dataForm.gridId = '' |
|||
this.grids = [] |
|||
this.dataForm.plotId = '' |
|||
this.plotArr = [] |
|||
this.communitys.find((item) => { |
|||
if (item.deptId === event) { |
|||
this.dataForm.communityId = item.deptId |
|||
this.dataForm.communityName = item.name |
|||
this.queryGrid(event) |
|||
} |
|||
}) |
|||
}, |
|||
queryGrid (event) { |
|||
this.$http.get(`sys/dept/deptInfo?deptPid=${event}`).then(({ data: res }) => { |
|||
this.grids = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
getOptions (gridId) { |
|||
this.$http |
|||
.get(`/epidemicplotcoordinate/getPlotOption?gridId=${gridId}`) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.plotArr = res.data |
|||
}) |
|||
.catch(() => {}) |
|||
this.$http.get(`/sys/dict/listSimple/building_type`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.buildingTypeArr = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
// 表单提交 |
|||
dataFormSubmitHandle: debounce(function () { |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
this.$http[!this.dataForm.id ? 'post' : 'put']('/epidemicplotbuilding/', this.dataForm).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
this.visible = false |
|||
this.$emit('refreshDataList') |
|||
} |
|||
}) |
|||
}).catch(() => {}) |
|||
}) |
|||
}, 1000, { 'leading': true, 'trailing': false } |
|||
), |
|||
getFormattedAddress() { |
|||
AMap.plugin('AMap.Geocoder', () => { |
|||
let GeocoderOptions = { city: '全国' } |
|||
let geocoder = new AMap.Geocoder(GeocoderOptions) |
|||
geocoder.getAddress(this.amap.mapInfo.lnglat, (status, result) => { |
|||
console.log('通过经纬度拿到的地址', result) |
|||
if (status === 'complete' && result.info === 'OK') { |
|||
this.amap.mapInfo.address = result.regeocode.formattedAddress |
|||
} else { |
|||
this.amap.mapInfo.address = '无法获取地址'; |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
//点击搜索后触发的事件 |
|||
onSearchResult(pois){ |
|||
console.log(pois) |
|||
this.input = document.querySelector('.search-box-wrapper input').value |
|||
console.log(this.input) |
|||
this.amap.mapInfo.lnglat = [pois[0].lng,pois[0].lat] //选择了第一个值 |
|||
this.amap.markers = []; //标记点先清空 |
|||
this.amap.markers.push([pois[0].lng,pois[0].lat]) //把搜索的位置的第一个值存入标记中并显示标记点 |
|||
console.log(this.markers); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.amap-wrapper { |
|||
width: 100%; |
|||
height: 300px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,311 @@ |
|||
<template> |
|||
<el-card shadow="never" class="aui-card--fill"> |
|||
<div class="mod-__epidemicplotbuilding}"> |
|||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> |
|||
<el-form-item label="所在镇街" prop="streetId" label-width="100px"> |
|||
<el-select v-model="dataForm.streetId" placeholder="所在镇街" @change="selectModelStreet($event)" clearable> |
|||
<el-option v-for="item in streetArr" :key="item.deptId" :label="item.name" :value="item.deptId" > |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="社区/村庄" |
|||
prop="communityName" label-width="100px"> |
|||
<el-select v-model="dataForm.communityId" |
|||
placeholder="社区/村庄" @change="selectModelComm($event)" clearable> |
|||
<el-option v-for="item in communitys" |
|||
:key="item.deptId" |
|||
:label="item.name" |
|||
:value="item.deptId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="网格名称" |
|||
prop="gridName" label-width="100px"> |
|||
<el-select v-model="dataForm.gridId" |
|||
placeholder="网格名称" @change="selectGrid($event)" clearable> |
|||
<el-option v-for="item in grids" |
|||
:key="item.deptId" |
|||
:label="item.name" |
|||
:value="item.deptId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<br/> |
|||
<el-form-item label="所在小区" prop="plotId" label-width="100px"> |
|||
<el-select v-model="dataForm.plotId" clearable placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in plotArr" |
|||
:key="item.dictValue" |
|||
:label="item.dictName" |
|||
:value="item.dictValue" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="楼栋名称" prop="buildingName" label-width="100px"> |
|||
<el-input v-model="dataForm.buildingName" placeholder="楼栋名称" clearable></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="楼栋唯一编码" prop="buildingCode" label-width="100px"> |
|||
<el-input v-model="dataForm.buildingCode" placeholder="楼栋唯一编码" clearable></el-input> |
|||
</el-form-item> |
|||
<br/> |
|||
<el-form-item label="楼栋类型" prop="buildingType" label-width="100px"> |
|||
<el-select v-model="dataForm.buildingType" placeholder="楼栋类型" clearable > |
|||
<el-option v-for="item in buildingTypeArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" > |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button @click="getDataList()">{{ $t('query') }}</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> |
|||
</el-form-item> |
|||
<!--<el-form-item>--> |
|||
<!--<el-button type="primary" @click="exportBuilding()">{{$t("export")}}</el-button>--> |
|||
<!--</el-form-item>--> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="exportHandle()">{{$t("export")}}</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-upload class="upload-demo" ref="uploadBuilding" v-loading="uploadLoading" :action="uploadBuildingUrl" :limit="1" |
|||
:on-success="uploadBuildingSuccess" :on-error="errorExceed" :before-upload="beforeUpload" accept=".xls,.xlsx"> |
|||
<el-button type="danger">导入楼栋信息</el-button> |
|||
</el-upload> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;"> |
|||
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> |
|||
<el-table-column prop="streetName" label="所在镇街" width="120px" show-overflow-tooltip header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="communityName" label="所属社区" width="120px" show-overflow-tooltip header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="gridName" label="所属网格" width="200px" show-overflow-tooltip header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="plotName" label="所属小区" width="120px" show-overflow-tooltip header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="buildingName" label="楼栋名称" width="120px" show-overflow-tooltip header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="buildingCode" label="楼栋唯一编码" header-align="center" align="center"></el-table-column> |
|||
<!-- <el-table-column prop="buildingType" label="楼栋类型" width="90px" show-overflow-tooltip :formatter="buildingTypeFormat" header-align="center" align="center"></el-table-column>--> |
|||
<!-- <el-table-column prop="floorNum" label="楼栋层数" header-align="center" align="center"></el-table-column>--> |
|||
<!-- <el-table-column prop="roomNum" label="单元数" header-align="center" align="center"></el-table-column>--> |
|||
<!-- <el-table-column prop="householdNum" label="住户数" header-align="center" align="center"></el-table-column>--> |
|||
<el-table-column prop="createdTime" label="录入时间" width="180px" header-align="center" align="center"></el-table-column> |
|||
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button> |
|||
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination |
|||
:current-page="page" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="limit" |
|||
:total="total" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
@size-change="pageSizeChangeHandle" |
|||
@current-change="pageCurrentChangeHandle"> |
|||
</el-pagination> |
|||
<!-- 弹窗, 新增 / 修改 --> |
|||
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> |
|||
</div> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import AddOrUpdate from './epidemicplotbuilding-add-or-update' |
|||
import qs from 'qs' |
|||
import Cookies from 'js-cookie' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/custom/epidemicplotbuilding/page', |
|||
getDataListIsPage: true, |
|||
deleteURL: '/custom/epidemicplotbuilding', |
|||
deleteIsBatch: true, |
|||
exportURL: '/custom/epidemicplotbuilding/export', |
|||
exportErrorURL: '/custom/epidemicplotbuildingerror/export' |
|||
}, |
|||
buildingTypeArr: [], |
|||
dataForm: { |
|||
id: '', |
|||
streetId: '', |
|||
communityId: '', |
|||
gridId: '', |
|||
plotId:'' |
|||
}, |
|||
uploadLoading: false, |
|||
uploadBuildingUrl: '', |
|||
streetArr: [], |
|||
communitys: [], |
|||
grids: [], |
|||
plotArr: [] |
|||
} |
|||
}, |
|||
components: { |
|||
AddOrUpdate |
|||
}, |
|||
created: function () { |
|||
this.getOptions() |
|||
// 乡镇下拉框赋值 |
|||
this.getDailyTypeArrInfo() |
|||
//导入房屋url |
|||
this.uploadBuildingUrl = `${window.SITE_CONFIG['apiURL']}/custom/epidemicplotbuilding/importBuilding?token=${Cookies.get('token')}` |
|||
}, |
|||
methods: { |
|||
// 获取乡镇下拉信息(传参：4代表查“街道”) |
|||
getDailyTypeArrInfo () { |
|||
this.$http.get(`sys/dept/deptInfo?tags=street_party`).then(({ data: res }) => { |
|||
this.streetArr = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
// 街镇取值变化事件 |
|||
selectModelStreet (event) { |
|||
this.dataForm.communityName = '' |
|||
this.streetArr.find((item) => { |
|||
if (item.deptId === event) { |
|||
this.dataForm.streetId = item.deptId |
|||
this.$http.get(`sys/dept/deptInfo?deptPid=${event}`).then(({ data: res }) => { |
|||
this.communitys = res.data |
|||
}).catch(() => {}) |
|||
} |
|||
}) |
|||
}, |
|||
// 社区取值变化事件 |
|||
selectModelComm (event) { |
|||
this.dataForm.gridName = '' |
|||
this.communitys.find((item) => { |
|||
if (item.deptId === event) { |
|||
this.dataForm.communityId = item.deptId |
|||
this.$http.get(`sys/dept/deptInfo?deptPid=${event}`).then(({ data: res }) => { |
|||
this.grids = res.data |
|||
}).catch(() => {}) |
|||
} |
|||
}) |
|||
}, |
|||
//网格 |
|||
selectGrid (event) { |
|||
this.dataForm.plotId = '' |
|||
this.plotArr = [] |
|||
this.grids.find((item) => { |
|||
if (item.deptId === event) { |
|||
this.dataForm.gridId = item.deptId |
|||
this.dataForm.gridName = item.name |
|||
this.getPlotList(this.dataForm.gridId) |
|||
} |
|||
}) |
|||
}, |
|||
getPlotList (gridId) { |
|||
//查询网格下面的所属小区 |
|||
this.$http.get(`/custom/epidemicplotcoordinate/getPlotOption?gridId=${gridId}`) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.plotArr = res.data |
|||
}) |
|||
.catch(() => {}) |
|||
//楼栋类型 |
|||
this.$http.get(`/sys/dict/listSimple/building_type`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.buildingTypeArr = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
getOptions() { |
|||
this.$http.get(`/sys/dict/listSimple/building_type`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.buildingTypeArr = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
buildingTypeFormat (row, column) { |
|||
if (row.buildingType) { |
|||
let dict = this.buildingTypeArr.filter(item => item.dictValue === row.buildingType)[0] |
|||
if (dict) { |
|||
return dict.dictName |
|||
} |
|||
} |
|||
return '' |
|||
}, |
|||
// 导出 |
|||
exportBuilding () { |
|||
var params = qs.stringify({ |
|||
// Cookies.get('token') |
|||
'token': Cookies.get('token'), |
|||
...this.dataForm |
|||
}) |
|||
window.location.href = `${window.SITE_CONFIG['apiURL']}${this.mixinViewModuleOptions.exportURL}?${params}` |
|||
}, |
|||
beforeUpload (file) { |
|||
console.log('this.uploadBuildingUrl:'+this.uploadBuildingUrl) |
|||
this.uploadLoading = true |
|||
}, |
|||
errorExceed (response,file, fileList) { |
|||
console.log('+++++++++ 失败 +++++++') |
|||
console.log(response) |
|||
this.uploadLoading = false |
|||
this.$message.error('上传失败请重试') |
|||
}, |
|||
//导入完成 |
|||
uploadBuildingSuccess (response, file, fileList) { |
|||
console.log('+++++++++ 成功 +++++++') |
|||
this.uploadLoading = false |
|||
this.$refs.uploadBuilding.clearFiles() |
|||
if ( response.code !== 0 || (response.data !== null && response.data.length > 0) ) { |
|||
this.errordataList = response.data |
|||
if (this.errordataList != null && this.errordataList.length > 0) { |
|||
this.$confirm( |
|||
response.data.slice(1, -27).length > 16 |
|||
? response.data.slice(0, 1) + |
|||
response.data.slice(1, -27).slice(0, 16) + |
|||
'...' + |
|||
response.data.slice(-27) |
|||
: response.data, |
|||
'提示', |
|||
{ |
|||
confirmButtonText: '下载', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
} |
|||
).then(() => { |
|||
var params = qs.stringify({ |
|||
token: Cookies.get('token'), |
|||
errorId: response.msg, |
|||
...this.dataForm |
|||
}) |
|||
window.location.href = `${window.SITE_CONFIG['apiURL']}${this.mixinViewModuleOptions.exportErrorURL}?${params}` |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '下载成功' |
|||
}) |
|||
}) |
|||
.catch(() => { |
|||
this.$message({ |
|||
type: 'info', |
|||
message: '已取消下载' |
|||
}) |
|||
}) |
|||
} else { |
|||
this.$message.error(response.msg) |
|||
} |
|||
this.getDataList() |
|||
return |
|||
} |
|||
this.$message({ |
|||
message: '导入成功', |
|||
type: 'success', |
|||
duration: 1000, |
|||
onClose: () => { |
|||
this.getDataList() |
|||
} |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,557 @@ |
|||
<template> |
|||
<el-dialog :visible.sync="visible" |
|||
:title="!dataForm.id ? $t('add') : $t('update')" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false"> |
|||
<el-form :model="dataForm" |
|||
:rules="dataRule" |
|||
ref="dataForm" |
|||
:label-width="$i18n.locale === 'en-US' ? '120px' : '90px'"> |
|||
<el-form-item label="所在镇街" |
|||
prop="streetId"> |
|||
<el-select v-model="dataForm.streetId" |
|||
placeholder="所在镇街" |
|||
ref="streetRef" style="width: 40%" |
|||
@change="selectModel($event)" |
|||
> |
|||
<el-option v-for="item in streetArr" |
|||
:key="item.deptId" |
|||
:label="item.name" |
|||
:value="item.deptId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="社区/村庄" |
|||
prop="communityId"> |
|||
<el-select v-model="dataForm.communityId" |
|||
placeholder="社区/村庄" |
|||
ref="communityRef" style="width: 40%" |
|||
@change="selectCommunity($event)" |
|||
> |
|||
<el-option v-for="item in communitys" |
|||
:key="item.deptId" |
|||
:label="item.name" |
|||
:value="item.deptId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="网格名称" |
|||
prop="gridId"> |
|||
<el-select v-model="dataForm.gridId" |
|||
placeholder="网格名称" |
|||
ref="gridRef" style="width: 40%" |
|||
@change="selectGrid($event)" |
|||
> |
|||
<el-option v-for="item in grids" |
|||
:key="item.deptId" |
|||
:label="item.name" |
|||
:value="item.deptId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> --> |
|||
<el-form-item label="网格名称" prop="gridIds"> |
|||
<el-select style="width: 60%" v-model="dataForm.gridIds" ref="gridRef" clearable multiple placeholder="网格名称"> |
|||
<el-option v-for="item in grids" |
|||
:key="item.deptId" |
|||
:label="item.name" |
|||
:value="item.deptId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="小区名称" |
|||
prop="plotName"> |
|||
<el-input style="width: 80%" |
|||
v-model="dataForm.plotName" |
|||
placeholder="请填写小区名称，不超过50字" @change="searchExist()"></el-input>  |
|||
</el-form-item> |
|||
<el-form-item label="小区地址" |
|||
prop="mapPlotName"> |
|||
<el-input style="width: 80%" |
|||
v-model="dataForm.mapPlotName" |
|||
placeholder="请填写或点击下面地图获取地址"></el-input>  |
|||
<el-button type="primary" |
|||
@click="searchKeyword()">获取坐标</el-button> |
|||
</el-form-item> |
|||
<el-form-item size="mini"> |
|||
<span style="color: red">*当前小区共有用户 {{updateNum}} 人，保存后将同步更新</span> |
|||
</el-form-item> |
|||
<div id="container" style="height:300px;margin-bottom: 20px"></div> |
|||
<div style="display: flex"> |
|||
<el-form-item label="经度" |
|||
prop="longitude" |
|||
style="width: 40%"> |
|||
<el-input disabled |
|||
v-model="dataForm.longitude" |
|||
placeholder="经度"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="纬度" |
|||
prop="latitude"> |
|||
<el-input disabled |
|||
v-model="dataForm.latitude" |
|||
placeholder="纬度"></el-input> |
|||
</el-form-item> |
|||
</div> |
|||
<div style="display: flex"> |
|||
<el-form-item label="联系人" |
|||
prop="contactPerson"> |
|||
<el-input v-model="dataForm.contactPerson" |
|||
placeholder="请输入联系人"></el-input>  |
|||
</el-form-item> |
|||
<el-form-item label="联系电话" |
|||
prop="contactPerson"> |
|||
<el-input v-model="dataForm.contactPhone" |
|||
placeholder="请输入联系电话"></el-input>  |
|||
</el-form-item> |
|||
</div> |
|||
<el-form-item prop="introduce" label="小区介绍"> |
|||
<!-- 富文本编辑器, 容器 --> |
|||
<div id="J_quillEditor"></div> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|||
<el-button type="primary" |
|||
@click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import debounce from 'lodash/debounce' |
|||
import jsonp from 'jsonp' |
|||
import 'quill/dist/quill.snow.css' |
|||
import Quill from 'quill' |
|||
var searchService |
|||
export default { |
|||
data () { |
|||
return { |
|||
visible: false, |
|||
quillEditor: null, |
|||
quillEditorToolbarOptions: [ |
|||
[{ 'list': 'ordered' }, { 'list': 'bullet' }], |
|||
[{ 'indent': '-1' }, { 'indent': '+1' }], |
|||
[{ 'direction': 'rtl' }] |
|||
], |
|||
dataForm: { |
|||
communityName: '', |
|||
communityId: '', |
|||
gridIds: [], |
|||
gridName: [], |
|||
id: '', |
|||
streetName: '', |
|||
streetId: '', |
|||
mapPlotName: '', |
|||
plotName: '', |
|||
longitude: 0, // 经度 |
|||
latitude: 0, // 纬度 |
|||
city: '', |
|||
contactPerson: '', |
|||
contactPhone: '', |
|||
introduce: '', |
|||
radius: 200 |
|||
}, |
|||
updateNum: 0, |
|||
streetArr: [], |
|||
communitys: [], |
|||
grids: [] |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
plotName: [ |
|||
{ |
|||
required: true, |
|||
message: this.$t('validate.required'), |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
gridIds: [ |
|||
{ |
|||
required: true, |
|||
message: this.$t('validate.required'), |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
streetId: [ |
|||
{ |
|||
required: true, |
|||
message: this.$t('validate.required'), |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
communityId: [ |
|||
{ |
|||
required: true, |
|||
message: this.$t('validate.required'), |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
mapPlotName: [ |
|||
{ |
|||
required: true, |
|||
message: this.$t('validate.required'), |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
longitude: [ |
|||
{ |
|||
required: true, |
|||
message: this.$t('validate.required'), |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
latitude: [ |
|||
{ |
|||
required: true, |
|||
message: this.$t('validate.required'), |
|||
trigger: 'blur' |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
init () { |
|||
this.updateNum = 0 |
|||
// 乡镇下拉框赋值 |
|||
this.getDailyTypeArrInfo() |
|||
this.getMyLocation() |
|||
this.visible = true |
|||
this.$nextTick(() => { |
|||
if (this.quillEditor) { |
|||
this.quillEditor.deleteText(0, this.quillEditor.getLength()) |
|||
} else { |
|||
this.quillEditorHandle() |
|||
} |
|||
this.$refs['dataForm'].resetFields() |
|||
if (this.dataForm.id) { |
|||
this.getInfo() |
|||
} |
|||
}) |
|||
this.searchExist() |
|||
}, |
|||
// 获取乡镇下拉信息(传参：4代表查“街道”) |
|||
getDailyTypeArrInfo () { |
|||
this.$http.get(`sys/dept/deptInfo?tags=street_party`).then(({ data: res }) => { |
|||
this.streetArr = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
queryComm (event) { |
|||
this.$http.get(`sys/dept/deptInfo?deptPid=${event}`).then(({ data: res }) => { |
|||
this.communitys = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
queryGrid (event) { |
|||
this.$http.get(`sys/dept/deptInfo?deptPid=${event}`).then(({ data: res }) => { |
|||
this.grids = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
// 富文本编辑器 |
|||
quillEditorHandle () { |
|||
this.quillEditor = new Quill('#J_quillEditor', { |
|||
modules: { |
|||
toolbar: this.quillEditorToolbarOptions |
|||
}, |
|||
theme: 'snow' |
|||
}) |
|||
// 监听内容变化，动态赋值 |
|||
this.quillEditor.on('text-change', () => { |
|||
this.dataForm.introduce = this.quillEditor.root.innerHTML |
|||
}) |
|||
}, |
|||
// 乡镇取值变化事件 |
|||
selectModel (event) { |
|||
this.dataForm.communityName = '' |
|||
this.dataForm.communityId = '' |
|||
this.communitys = [] |
|||
this.dataForm.gridName = '' |
|||
this.dataForm.gridIds = '' |
|||
this.grids = [] |
|||
this.streetArr.find((item) => { |
|||
if (item.deptId === event) { |
|||
this.dataForm.streetId = item.deptId |
|||
this.dataForm.streetName = item.name |
|||
this.queryComm(event) |
|||
searchService.setLocation('平阴县') |
|||
searchService.search(item.name) |
|||
} |
|||
}) |
|||
}, |
|||
// 社区取值变化 |
|||
selectCommunity (event) { |
|||
this.dataForm.gridName = '' |
|||
this.dataForm.gridId = '' |
|||
this.grids = [] |
|||
this.communitys.find((item) => { |
|||
if (item.deptId === event) { |
|||
this.dataForm.communityId = item.deptId |
|||
this.dataForm.communityName = item.name |
|||
this.queryGrid(event) |
|||
searchService.setLocation('平阴县') |
|||
searchService.search(this.dataForm.streetName + item.name) |
|||
} |
|||
}) |
|||
}, |
|||
// 社区取值变化 |
|||
selectGrid (event) { |
|||
this.grids.find((item) => { |
|||
if (item.deptId === event) { |
|||
this.dataForm.gridId = item.deptId |
|||
this.dataForm.gridName = item.name |
|||
searchService.setLocation('平阴县') |
|||
searchService.search(this.dataForm.streetName + this.dataForm.communityName + item.name) |
|||
} |
|||
}) |
|||
}, |
|||
// 获取信息 |
|||
getInfo () { |
|||
this.$http |
|||
.get(`/custom/epidemicplotcoordinate/${this.dataForm.id}`) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
searchService.setLocation('平阴县') |
|||
searchService.search(res.data.mapPlotName) |
|||
this.dataForm = { |
|||
...this.dataForm, |
|||
...res.data |
|||
} |
|||
this.queryComm(this.dataForm.streetId) |
|||
this.queryGrid(this.dataForm.communityId) |
|||
console.log(this.dataForm.introduce) |
|||
this.quillEditor.root.innerHTML = this.dataForm.introduce |
|||
}) |
|||
.catch(() => { }) |
|||
}, |
|||
// 地图相关 |
|||
getAddress (lat, lng) { |
|||
this.dataForm.longitude = lng |
|||
this.dataForm.latitude = lat |
|||
var url3 = |
|||
'https://apis.map.qq.com/ws/geocoder/v1/?location=' + |
|||
lat + |
|||
',' + |
|||
lng + |
|||
'&key=MQFBZ-LTWW6-R7XSK-MFXUQ-DVSIE-BGB4M&output=jsonp' |
|||
jsonp(url3, null, (err, data) => { |
|||
if (err) { |
|||
console.log(err) |
|||
} |
|||
this.dataForm.mapPlotName = data.result.formatted_addresses.recommend |
|||
}) |
|||
}, |
|||
getMyLocation () { |
|||
var geolocation = new qq.maps.Geolocation( |
|||
'MQFBZ-LTWW6-R7XSK-MFXUQ-DVSIE-BGB4M', |
|||
'PY' |
|||
) |
|||
geolocation.getIpLocation(this.showPosition, this.showErr) |
|||
}, |
|||
showPosition (position) { |
|||
this.dataForm.latitude = position.lat |
|||
this.dataForm.longitude = position.lng |
|||
this.dataForm.city = position.city |
|||
this.setMap() |
|||
}, |
|||
showErr () { |
|||
// console.log('定位失败') |
|||
this.getMyLocation() // 定位失败再请求定位，测试使用 |
|||
}, |
|||
setMap () { |
|||
const that = this |
|||
var markerList = [] |
|||
var radiusList = [] |
|||
// 步骤：定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器 |
|||
// 设置地图中心点 |
|||
var myLatlng = new qq.maps.LatLng( |
|||
this.dataForm.latitude, |
|||
this.dataForm.longitude |
|||
) |
|||
// 定义工厂模式函数 |
|||
var zoom = this.capacity() |
|||
var myOptions = { |
|||
zoom: zoom, // 设置地图缩放级别 |
|||
center: myLatlng, // 设置中心点样式 |
|||
mapTypeId: qq.maps.MapTypeId.ROADMAP // 设置地图样式详情参见MapType |
|||
} |
|||
// 获取dom元素添加地图信息 |
|||
var map = new qq.maps.Map( |
|||
document.getElementById('container'), |
|||
myOptions |
|||
) |
|||
// 设置圆形 |
|||
var radius = new qq.maps.Circle({ |
|||
center: new qq.maps.LatLng( |
|||
this.dataForm.latitude, |
|||
this.dataForm.longitude |
|||
), |
|||
radius: this.dataForm.radius, |
|||
map: map |
|||
}) |
|||
radiusList.push(radius) |
|||
var marker = new qq.maps.Marker({ |
|||
position: myLatlng, |
|||
map: map |
|||
}) |
|||
markerList.push(marker) |
|||
// 添加监听事件 获取鼠标单击事件 |
|||
qq.maps.event.addListener(map, 'click', function (event) { |
|||
that.cleanMarkRadius(markerList, radiusList) |
|||
that.getAddress(event.latLng.lat, event.latLng.lng) |
|||
var myLatlng = new qq.maps.LatLng(event.latLng.lat, event.latLng.lng) |
|||
map.setCenter(myLatlng) |
|||
var marker = new qq.maps.Marker({ |
|||
position: event.latLng, |
|||
map: map |
|||
}) |
|||
// 设置圆形 |
|||
var radius = new qq.maps.Circle({ |
|||
center: new qq.maps.LatLng(event.latLng.lat, event.latLng.lng), |
|||
radius: that.dataForm.radius, |
|||
map: map |
|||
}) |
|||
radiusList.push(radius) |
|||
markerList.push(marker) |
|||
qq.maps.event.addListener(map, 'click', function (event) { |
|||
that.cleanMarkRadius(markerList, radiusList) |
|||
}) |
|||
qq.maps.event.addListener(marker, 'click', function (event) { |
|||
that.addressCheckHandle() |
|||
}) |
|||
}) |
|||
// 调用地址解析类 |
|||
searchService = new qq.maps.SearchService({ |
|||
complete: function (result) { |
|||
var pois = result.detail.pois |
|||
if (pois == null || pois.length <= 0) { |
|||
alert('未找到地址!') |
|||
that.getAddress(that.dataForm.latitude, that.dataForm.longitude) |
|||
return |
|||
} |
|||
map.setCenter(pois[0].latLng) |
|||
that.getAddress(pois[0].latLng.lat, pois[0].latLng.lng) |
|||
var marker = new qq.maps.Marker({ |
|||
map: map, |
|||
position: pois[0].latLng |
|||
}) |
|||
// 设置圆形 |
|||
var radius = new qq.maps.Circle({ |
|||
center: new qq.maps.LatLng(pois[0].latLng.lat, pois[0].latLng.lng), |
|||
radius: that.dataForm.radius, |
|||
map: map |
|||
}) |
|||
radiusList.push(radius) |
|||
markerList.push(marker) |
|||
that.cleanMarkRadius(markerList, radiusList) |
|||
qq.maps.event.addListener(marker, 'click', function (event) { |
|||
that.addressCheckHandle() |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
searchKeyword () { |
|||
searchService.setLocation(this.dataForm.city) |
|||
searchService.search(this.dataForm.mapPlotName) |
|||
}, |
|||
addressCheckHandle () { |
|||
if (this.dataForm.mapPlotName === '' || !(this.dataForm.latitude > 0)) { |
|||
alert('请选择地址!') |
|||
} |
|||
}, |
|||
cleanMarkRadius (markerList, radiusList) { |
|||
if (markerList) { |
|||
if (markerList.length > 1) { |
|||
for (var i4 = 0; i4 < markerList.length - 1; i4++) { |
|||
markerList[i4].setMap(null) |
|||
} |
|||
} else { |
|||
for (var i3 = 0; i3 < markerList.length; i3++) { |
|||
markerList[i3].setMap(null) |
|||
} |
|||
} |
|||
} |
|||
if (radiusList) { |
|||
if (radiusList.length > 1) { |
|||
for (var i2 = 0; i2 < radiusList.length - 1; i2++) { |
|||
radiusList[i2].setMap(null) |
|||
} |
|||
} else { |
|||
for (var i1 = 0; i1 < markerList.length; i1++) { |
|||
radiusList[i1].setMap(null) |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
capacity () { |
|||
if (this.dataForm.radius > 0 && this.dataForm.radius <= 25) { |
|||
return 18 |
|||
} else if (this.dataForm.radius > 25 && this.dataForm.radius <= 50) { |
|||
return 17 |
|||
} else if (this.dataForm.radius > 50 && this.dataForm.radius <= 100) { |
|||
return 16 |
|||
} else if (this.dataForm.radius > 100 && this.dataForm.radius <= 200) { |
|||
return 15 |
|||
} else if (this.dataForm.radius > 200 && this.dataForm.radius <= 500) { |
|||
return 14 |
|||
} else if (this.dataForm.radius > 500 && this.dataForm.radius <= 1000) { |
|||
return 13 |
|||
} else if (this.dataForm.radius > 1000 && this.dataForm.radius <= 2000) { |
|||
return 12 |
|||
} else if (this.dataForm.radius > 2000 && this.dataForm.radius <= 5000) { |
|||
return 11 |
|||
} |
|||
}, |
|||
searchExist () { |
|||
if (this.dataForm.plotName !== '' && this.dataForm.gridId !== '') { |
|||
this.$http |
|||
.get(`/demo/epidemicuserinoutrecord/getExist?plotName=` + this.dataForm.plotName + `&gridId=` + this.dataForm.gridId) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.updateNum = res.data.length |
|||
}) |
|||
.catch(() => { }) |
|||
} else { |
|||
this.updateNum = 0 |
|||
} |
|||
}, |
|||
// 表单提交 |
|||
dataFormSubmitHandle: debounce( |
|||
function () { |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
this.dataForm.communityName = this.$refs.communityRef.selectedLabel |
|||
this.dataForm.streetName = this.$refs.streetRef.selectedLabel |
|||
this.dataForm.gridName = this.$refs.gridRef.selectedLabel |
|||
this.$http[!this.dataForm.id ? 'post' : 'put']( |
|||
'/custom/epidemicplotcoordinate/', |
|||
this.dataForm |
|||
) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
this.visible = false |
|||
this.$emit('refreshDataList') |
|||
} |
|||
}) |
|||
}) |
|||
.catch(() => { }) |
|||
}) |
|||
}, |
|||
1000, |
|||
{ leading: true, trailing: false } |
|||
) |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,148 @@ |
|||
<template> |
|||
<el-card shadow="never" class="aui-card--fill"> |
|||
<div class="mod-__epidemicplotcoordinate}"> |
|||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataListSearch()"> |
|||
<el-form-item label="所在镇街" prop="streetId"> |
|||
<el-select v-model="dataForm.streetId" placeholder="所在镇街" @change="selectModelStreet($event)" clearable> |
|||
<el-option v-for="item in streetArr" :key="item.deptId" :label="item.name" :value="item.deptId" > |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="社区/村庄" |
|||
prop="communityName"> |
|||
<el-select v-model="dataForm.communityId" |
|||
placeholder="社区/村庄" @change="selectModelComm($event)" clearable> |
|||
<el-option v-for="item in communitys" |
|||
:key="item.deptId" |
|||
:label="item.name" |
|||
:value="item.deptId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="网格名称" |
|||
prop="gridName"> |
|||
<el-select v-model="dataForm.gridId" |
|||
placeholder="网格名称" clearable> |
|||
<el-option v-for="item in grids" |
|||
:key="item.deptId" |
|||
:label="item.name" |
|||
:value="item.deptId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="小区名称" prop="plotName"> |
|||
<el-input v-model="dataForm.plotName" placeholder="小区名称" clearable maxlength="49" style="width:200px"></el-input> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button @click="getDataListSearch()">{{ $t('query') }}</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button v-if="$hasPermission('dev:unit:update')" type="danger" @click="updateRelation()">更新关系</el-button> |
|||
</el-form-item> |
|||
<!-- <el-form-item> |
|||
<el-button type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button> |
|||
</el-form-item> --> |
|||
</el-form> |
|||
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;"> |
|||
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> |
|||
<el-table-column prop="plotName" label="小区名称" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="streetName" label="所在镇街" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="communityName" label="社区/村庄" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="deptName" label="网格名称" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="mapPlotName" label="小区地址" header-align="center" align="center"></el-table-column> |
|||
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button> |
|||
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination |
|||
:current-page="page" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="limit" |
|||
:total="total" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
@size-change="pageSizeChangeHandle" |
|||
@current-change="pageCurrentChangeHandle"> |
|||
</el-pagination> |
|||
<!-- 弹窗, 新增 / 修改 --> |
|||
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataListSearch"></add-or-update> |
|||
</div> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import AddOrUpdate from './epidemicplotcoordinate-add-or-update' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/custom/epidemicplotcoordinate/page', |
|||
getDataListIsPage: true, |
|||
deleteURL: '/custom/epidemicplotcoordinate', |
|||
deleteIsBatch: true |
|||
}, |
|||
dataForm: { |
|||
plotName: '', |
|||
streetId: '', |
|||
communityId: '' |
|||
}, |
|||
streetArr: [], |
|||
communitys: [], |
|||
grids: [] |
|||
} |
|||
}, |
|||
components: { |
|||
AddOrUpdate |
|||
}, |
|||
created: function () { |
|||
// 乡镇下拉框赋值 |
|||
this.getDailyTypeArrInfo() |
|||
}, |
|||
methods: { |
|||
// 获取乡镇下拉信息(传参：4代表查“街道”) |
|||
getDailyTypeArrInfo () { |
|||
this.$http.get(`sys/dept/deptInfo?tags=street_party`).then(({ data: res }) => { |
|||
this.streetArr = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
updateRelation () { |
|||
this.$http.get(`/epidemicplotcoordinate/updateRelation`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
}).catch(() => {}) |
|||
}, |
|||
// 乡镇取值变化事件 |
|||
selectModelStreet (event) { |
|||
this.dataForm.communityName = '' |
|||
this.streetArr.find((item) => { |
|||
if (item.deptId === event) { |
|||
this.dataForm.streetId = item.deptId |
|||
this.$http.get(`sys/dept/deptInfo?deptPid=${event}`).then(({ data: res }) => { |
|||
this.communitys = res.data |
|||
}).catch(() => {}) |
|||
} |
|||
}) |
|||
}, |
|||
// 乡镇取值变化事件 |
|||
selectModelComm (event) { |
|||
this.dataForm.gridName = '' |
|||
this.communitys.find((item) => { |
|||
if (item.deptId === event) { |
|||
this.dataForm.communityId = item.deptId |
|||
this.$http.get(`sys/dept/deptInfo?deptPid=${event}`).then(({ data: res }) => { |
|||
this.grids = res.data |
|||
}).catch(() => {}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,809 @@ |
|||
<template> |
|||
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" |
|||
:close-on-press-escape="false"> |
|||
<el-form v-loading="vueLoading" element-loading-text="拼命加载中" |
|||
element-loading-spinner="el-icon-loading" :model="dataForm" :rules="dataRule" ref="dataForm" |
|||
@keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"> |
|||
<el-menu |
|||
:default-active="activeIndex" |
|||
class="el-menu-demo" |
|||
mode="horizontal" |
|||
@select="handleSelect" |
|||
> |
|||
<el-menu-item index="1">基本信息</el-menu-item> |
|||
<el-menu-item index="2">地址信息</el-menu-item> |
|||
<el-menu-item index="3">其他信息</el-menu-item> |
|||
</el-menu> |
|||
<div v-show="activeIndex === '1'" class="item-top"> |
|||
<el-form-item label="人员姓名" prop="userName" label-width="155px"> |
|||
<el-input :disabled="!dataForm.id ? false : true" v-model="dataForm.userName" placeholder="人员姓名" maxlength="20" clearable @keyup.native="btKeyUpUserName"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="曾用名" prop="formerName" label-width="155px"> |
|||
<el-input :disabled="!dataForm.id ? false : true" v-model="dataForm.formerName" placeholder="曾用名"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="性别" prop="gender" label-width="155px"> |
|||
<el-select :disabled="!dataForm.id ? false : true" v-model="dataForm.gender" clearable placeholder="性别"> |
|||
<el-option v-for="item in gender" :key="item.dictValue" :label="item.dictName" :value="item.dictValue"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="出生年月" prop="birthday" label-width="155px"> |
|||
<el-input :disabled="!dataForm.id ? false : true" v-model="dataForm.birthday" placeholder="出生年月"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="民族" prop="nation" label-width="155px"> |
|||
<!-- <el-input v-model="dataForm.nation" placeholder="民族"></el-input> --> |
|||
<el-select :disabled="!dataForm.id ? false : true" v-model="dataForm.nation" clearable placeholder="民族" filterable> |
|||
<el-option v-for="item in nationList" :key="item.dictValue" :label="item.dictName" :value="item.dictName"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="政治面貌" prop="politicsStatus" label-width="155px"> |
|||
<!-- <el-input v-model="dataForm.politicsStatus" placeholder="政治面貌"></el-input> --> |
|||
<el-select :disabled="!dataForm.id ? false : true" v-model="dataForm.politicsStatus" clearable placeholder="政治面貌"> |
|||
<el-option v-for="item in politicsList" :key="item.dictValue" :label="item.dictName" :value="item.dictName"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="身份证号" prop="idCard" label-width="155px"> |
|||
<el-input :disabled="!dataForm.id ? false : true" v-model="dataForm.idCard" placeholder="身份证" clearable maxlength="49" @keyup.native="btKeyUpIdCard"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="联系方式" prop="mobile" label-width="155px"> |
|||
<el-input :disabled="!dataForm.id ? false : true" v-model="dataForm.mobile" placeholder="联系方式" clearable maxlength="11" @keyup.native="btKeyUpMobile"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="文化程度" prop="standardOfCulture" label-width="155px"> |
|||
<!-- <el-input v-model="dataForm.standardOfCulture" placeholder="文化程度"></el-input> --> |
|||
<el-select :disabled="!dataForm.id ? false : true" v-model="dataForm.standardOfCulture" clearable placeholder="文化程度"> |
|||
<el-option v-for="item in standardList" :key="item.dictValue" :label="item.dictName" :value="item.dictName"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="宗教信仰" prop="faith" label-width="155px"> |
|||
<el-input :disabled="!dataForm.id ? false : true" v-model="dataForm.faith" placeholder="宗教信仰"></el-input> |
|||
<!-- <el-select v-model="dataForm.faith" clearable placeholder="宗教信仰"> |
|||
<el-option v-for="item in faithList" :key="item.dictValue" :label="item.dictName" :value="item.dictName"></el-option> |
|||
</el-select> --> |
|||
</el-form-item> |
|||
<el-form-item label="籍贯" prop="nativePlace" label-width="155px"> |
|||
<el-input :disabled="!dataForm.id ? false : true" v-model="dataForm.nativePlace" placeholder="籍贯"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="网格名称" prop="gridName" label-width="155px"> |
|||
<el-input :disabled="!dataForm.id ? false : true" v-model="dataForm.gridName" placeholder="网格名称"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="户籍地" prop="householdRegisterName" label-width="155px"> |
|||
<el-cascader |
|||
ref="hjdname" |
|||
:disabled="!dataForm.id ? false : true" |
|||
v-model="dataForm.householdRegisterCodes" |
|||
:options="options" |
|||
@change="householdRegisterChangeHandle" |
|||
:props="{ checkStrictly: true, emitPath: true}" |
|||
> |
|||
</el-cascader> |
|||
</el-form-item> |
|||
<el-form-item label="户籍地详细地址" prop="householdRegisterDetail" label-width="155px"> |
|||
<el-input :disabled="!dataForm.id ? false : true" v-model="dataForm.householdRegisterDetail" placeholder="户籍地详细地址" maxlength="200" clearable></el-input> |
|||
</el-form-item> |
|||
</div> |
|||
<div v-show="activeIndex === '2'" class="item-top"> |
|||
<el-form-item label="县内居住地" prop="liveAddressCode" label-width="155px"> |
|||
<el-select v-model="dataForm.liveAddressCode" placeholder="请选择" @change="selectLive($event)"> |
|||
<el-option |
|||
v-for="item in liveOptions" |
|||
:key="item.deptId" |
|||
:label="item.name" |
|||
:value="item.deptId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="县内居住地详细地址" prop="liveAddressDetail" label-width="155px"> |
|||
<el-input v-model="dataForm.liveAddressDetail" placeholder="县内居住地详细地址" maxlength="200" clearable></el-input> |
|||
</el-form-item> --> |
|||
<!-- <el-form-item label="社区/村庄" prop="community" label-width="155px"> |
|||
<el-input v-model="dataForm.community" placeholder="社区/村庄"></el-input> |
|||
</el-form-item> --> |
|||
<el-form-item |
|||
label="社区/村庄" |
|||
prop="communityId" |
|||
label-width="155px" |
|||
> |
|||
<el-select |
|||
v-model="dataForm.communityId" |
|||
ref="jzdname" |
|||
placeholder="请选择" |
|||
@click.native="clickCommunity" |
|||
@change="changeCommunity" |
|||
> |
|||
<el-option |
|||
v-for="item in communityOptions" |
|||
:key="item.deptId" |
|||
:label="item.name" |
|||
:value="item.deptId" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label="网格名称" |
|||
prop="gridId" |
|||
label-width="155px" |
|||
> |
|||
<el-select |
|||
v-model="dataForm.gridId" |
|||
ref="jzdname" |
|||
placeholder="请选择" |
|||
@click.native="clickGridName" |
|||
@change="changeGridName" |
|||
style="width: 240px;" |
|||
> |
|||
<el-option |
|||
v-for="item in gridNameOptions" |
|||
:key="item.deptId" |
|||
:label="item.name" |
|||
:value="item.deptId" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="关联小区/村坐标" prop="coordinateId" label-width="155px"> |
|||
<el-select v-model="dataForm.coordinateId" clearable placeholder="关联小区/村坐标" @change="selectPlot($event)"> |
|||
<el-option v-for="item in simplePlotList" :key="item.id" :label="item.plot" :value="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="小区" prop="plot" label-width="155px"> |
|||
<el-input v-model="dataForm.plot" placeholder="小区"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="楼号" prop="buildingNo" label-width="155px"> |
|||
<el-input v-model="dataForm.buildingNo" placeholder="楼号"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="单元" prop="unit" label-width="155px"> |
|||
<el-input v-model="dataForm.unit" placeholder="单元"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="房间号" prop="roomNo" label-width="155px"> |
|||
<el-input v-model="dataForm.roomNo" placeholder="房间号"></el-input> |
|||
</el-form-item> |
|||
</div> |
|||
<div v-show="activeIndex === '3'" class="item-top"> |
|||
<el-form-item label="房屋性质" prop="houseProperty" label-width="155px"> |
|||
<!-- <el-input v-model="dataForm.houseProperty" placeholder="房屋性质"></el-input> --> |
|||
<el-select :disabled="!dataForm.id ? false : true" v-model="dataForm.houseProperty" clearable placeholder="房屋性质"> |
|||
<el-option v-for="item in housePropertyList" :key="item.dictValue" :label="item.dictName" :value="item.dictName"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="县内居住地关联人" prop="relationPeople" label-width="155px"> |
|||
<el-input :disabled="!dataForm.id ? false : true" v-model="dataForm.relationPeople" placeholder="居住地关联人" maxlength="20" clearable @keyup.native="btKeyUpRelationPeople"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="关联人联系电话" prop="relationPeopleMobile" label-width="155px"> |
|||
<el-input :disabled="!dataForm.id ? false : true" v-model="dataForm.relationPeopleMobile" placeholder="关联人联系电话" clearable maxlength="11" @keyup.native="btKeyUpRelationPeopleMobile"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="特殊人群" prop="specialCrowd" label-width="155px"> |
|||
<!-- <el-input v-model="dataForm.specialCrowd" placeholder="特殊人群"></el-input> --> |
|||
<el-select :disabled="!dataForm.id ? false : true" v-model="dataForm.specialCrowd" clearable placeholder="特殊人群"> |
|||
<el-option v-for="item in specialCrowdList" :key="item.dictValue" :label="item.dictName" :value="item.dictName"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="有无车辆" prop="car" label-width="155px"> |
|||
<!-- <el-input v-model="dataForm.car" placeholder="有无车辆"></el-input> --> |
|||
<el-select :disabled="!dataForm.id ? false : true" v-model="dataForm.car" clearable placeholder="有无车辆"> |
|||
<el-option v-for="item in carList" :key="item.dictValue" :label="item.dictName" :value="item.dictName"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="车牌号" prop="carNo" label-width="155px"> |
|||
<el-input :disabled="!dataForm.id ? false : true" v-model="dataForm.carNo" placeholder="车牌号"></el-input> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="现居住地" prop="outLiveAddressName" label-width="155px"> |
|||
<el-cascader |
|||
ref="zwjzdname" |
|||
:disabled="!dataForm.id ? false : true" |
|||
v-model="dataForm.outLiveAddressCodes" |
|||
:options="options" |
|||
@change="outLiveAddressChangeHandle" |
|||
:props="{ checkStrictly: true, emitPath: true}" |
|||
> |
|||
</el-cascader> |
|||
</el-form-item> --> |
|||
<el-form-item label="现居住地" prop="outLiveAddressName" label-width="155px"> |
|||
<el-input :disabled="!dataForm.id ? false : true" v-model="dataForm.outLiveAddressName" placeholder="现居住地" maxlength="200" clearable></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="现居住地详细地址" prop="outLiveAddressDetail" label-width="155px"> |
|||
<el-input :disabled="!dataForm.id ? false : true" v-model="dataForm.outLiveAddressDetail" placeholder="现居住地详细地址" maxlength="200" clearable></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="疫情风险等级" prop="riskGrade" label-width="155px"> |
|||
<el-select :disabled="!dataForm.id ? false : true" v-model="dataForm.riskGrade" placeholder="现居住地疫情风险等级" clearable> |
|||
<el-option v-for="item in riskGradeList" :key="item.dictValue" :label="item.dictName" :value="item.dictValue"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="拟返回平阴时间" prop="goBarkTime" label-width="155px"> |
|||
<el-date-picker |
|||
:disabled="!dataForm.id ? false : true" |
|||
v-model="dataForm.goBarkTime" |
|||
type="date" |
|||
placeholder="返回平阴时间" |
|||
label-width="155px" |
|||
value-format="yyyy-MM-dd" |
|||
format="yyyy-MM-dd" |
|||
style="width:200px"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<!-- |
|||
<el-form-item label="身高" prop="height" label-width="155px"> |
|||
<el-input v-model="dataForm.height" placeholder="身高"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="健康情况" prop="health" label-width="155px"> |
|||
<el-input v-model="dataForm.health" placeholder="健康情况"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="血型" prop="bloodType" label-width="155px"> |
|||
<el-input v-model="dataForm.bloodType" placeholder="血型"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="婚姻状况" prop="maritalStatus" label-width="155px"> |
|||
<el-input v-model="dataForm.maritalStatus" placeholder="婚姻状况"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="与户主关系" prop="relation" label-width="155px"> |
|||
<el-input v-model="dataForm.relation" placeholder="与户主关系"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="国籍" prop="nationality" label-width="155px"> |
|||
<el-input v-model="dataForm.nationality" placeholder="国籍"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="毕业院校" prop="graduateSchool" label-width="155px"> |
|||
<el-input v-model="dataForm.graduateSchool" placeholder="毕业院校"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="专业" prop="professional" label-width="155px"> |
|||
<el-input v-model="dataForm.professional" placeholder="专业"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="工作状态" prop="workStatus" label-width="155px"> |
|||
<el-input v-model="dataForm.workStatus" placeholder="工作状态"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="行业类别" prop="industryCategory" label-width="155px"> |
|||
<el-input v-model="dataForm.industryCategory" placeholder="行业类别"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="工作单位（现/原）" prop="workUnits" label-width="155px"> |
|||
<el-input v-model="dataForm.workUnits" placeholder="工作单位（现/原）"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="兵役状况" prop="military" label-width="155px"> |
|||
<el-input v-model="dataForm.military" placeholder="兵役状况"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="人口类别" prop="peopleCategories" label-width="155px"> |
|||
<el-input v-model="dataForm.peopleCategories" placeholder="人口类别"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="人户状况" prop="hushaiStatus" label-width="155px"> |
|||
<el-input v-model="dataForm.hushaiStatus" placeholder="人户状况"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="往返情况" prop="returnState" label-width="155px"> |
|||
<el-select v-model="dataForm.returnState" placeholder="往返情况" @change="selectModel($event)"> |
|||
<el-option v-for="item in returnStateArr" :key="item.dictValue" :label="item.dictName" |
|||
:value="item.dictValue"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<div v-if="showFlagIn"> |
|||
<el-form-item label="拟离开平阴时间" prop="leaveTime" label-width="155px"> |
|||
<el-date-picker |
|||
v-model="dataForm.leaveTime" |
|||
type="date" |
|||
placeholder="选择拟离开平阴时间" |
|||
label-width="150px" |
|||
value-format="yyyy-MM-dd" |
|||
format="yyyy-MM-dd" |
|||
style="width:200px"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label="拟去往目的地" prop="destinationAddressName" label-width="155px"> |
|||
<el-cascader |
|||
ref="qwmddname" |
|||
v-model="dataForm.destinationAddressCodes" |
|||
:options="options" |
|||
@change="destinationChangeHandle" |
|||
:props="{ checkStrictly: true, emitPath: true}" |
|||
> |
|||
</el-cascader> |
|||
</el-form-item> |
|||
<el-form-item label="拟去往目的地详细地址" prop="destinationAddressDetail" label-width="155px"> |
|||
<el-input v-model="dataForm.destinationAddressDetail" placeholder="去往目的地详细地址" maxlength="200" |
|||
clearable></el-input> |
|||
</el-form-item> |
|||
</div> |
|||
<div v-if="showFlagOut"> |
|||
|
|||
</div> |
|||
<el-form-item label="家庭保障情况" prop="familySecurity" label-width="155px"> |
|||
<el-input v-model="dataForm.familySecurity" placeholder="家庭保障情况"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="居住情况" prop="livingSituation" label-width="155px"> |
|||
<el-input v-model="dataForm.livingSituation" placeholder="居住情况"></el-input> |
|||
</el-form-item> --> |
|||
</div> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|||
<el-button type="primary" :disabled="isAble" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import debounce from 'lodash/debounce' |
|||
import 'element-ui/lib/theme-chalk/cascader.css' |
|||
// import area from '../../../utils/area.json' |
|||
|
|||
export default { |
|||
data () { |
|||
return { |
|||
visible: false, |
|||
dataForm: { |
|||
userName: '', |
|||
formerName: '', |
|||
gender: '', |
|||
birthday: '', |
|||
nation: '', |
|||
politicsStatus: '', |
|||
idCard: '', |
|||
mobile: '', |
|||
standardOfCulture: '', |
|||
faith: '', |
|||
nativePlace: '', |
|||
householdRegisterCode: '', |
|||
householdRegisterName: '', |
|||
householdRegisterDetail: '', |
|||
liveAddressCode: '', |
|||
liveAddressName: '', |
|||
// liveAddressDetail: '', |
|||
outLiveAddressCode: '', |
|||
outLiveAddressName: '', |
|||
outLiveAddressDetail: '', |
|||
plot: '', |
|||
buildingNo: '', |
|||
unit: '', |
|||
roomNo: '', |
|||
houseProperty: '', |
|||
relationPeople: '', |
|||
relationPeopleMobile: '', |
|||
coordinateId: '', |
|||
longitude: '', |
|||
latitude: '', |
|||
specialCrowd: '', |
|||
car: '', |
|||
carNo: '', |
|||
riskGrade: '', |
|||
goBarkTime: '', |
|||
// 以下未暂未使用的属性 |
|||
returnState: '1', |
|||
householdRegisterCodes: [], |
|||
liveAddressCodes: [], |
|||
outLiveAddressCodes: [], |
|||
leaveTime: '', |
|||
destinationAddressName: '', |
|||
destinationAddressCode: '', |
|||
destinationAddressDetail: '', |
|||
destinationAddressCodes: [], |
|||
bloodType: '', |
|||
height: '', |
|||
health: '', |
|||
maritalStatus: '', |
|||
relation: '', |
|||
nationality: '', |
|||
graduateSchool: '', |
|||
professional: '', |
|||
workStatus: '', |
|||
industryCategory: '', |
|||
workUnits: '', |
|||
military: '', |
|||
peopleCategories: '', |
|||
hushaiStatus: '', |
|||
communityOptions: [], |
|||
gridNameOptions: [], |
|||
community: '', |
|||
communityId: '', |
|||
gridName: '', |
|||
gridId: '', |
|||
familySecurity: '', |
|||
livingSituation: '' |
|||
}, |
|||
isAble: false, |
|||
showFlagIn: true, |
|||
showFlagOut: false, |
|||
gender: [ |
|||
{ dictValue: '男', dictName: '男' }, |
|||
{ dictValue: '女', dictName: '女' } |
|||
], |
|||
// returnStateArr: [ |
|||
// {dictValue: '1', dictName: '在本地'}, |
|||
// {dictValue: '2', dictName: '在外地'} |
|||
// ], |
|||
liveOptions: [], // 居住地 |
|||
nationList: [], // 民族 |
|||
politicsList: [], // 政治面貌 |
|||
standardList: [], // 文化程度 |
|||
options: [], // 户籍地 |
|||
housePropertyList: [], // 房屋性质 |
|||
simplePlotList: [], // 关联小区/村 coordinateId |
|||
specialCrowdList: [], // 特殊人群 |
|||
riskGradeList: [], // 疫情风险等级 |
|||
carList: [ |
|||
{ dictValue: '无', dictName: '无' }, |
|||
{ dictValue: '有', dictName: '有' } |
|||
], |
|||
vueLoading: true, |
|||
activeIndex: '1' |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
userName: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
mobile: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
idCard: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, |
|||
{ pattern: /(^\d{15}$)|bai(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确身份证号', trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
init () { |
|||
this.visible = true |
|||
this.isAble = true |
|||
this.vueLoading = true |
|||
// 清空组织树选中 |
|||
// this.dataForm.destinationAddressCodes = [] |
|||
this.getOptions() |
|||
this.$nextTick(() => { |
|||
this.$refs['dataForm'].resetFields() |
|||
if (this.dataForm.id) { |
|||
this.getInfo() |
|||
} |
|||
}) |
|||
}, |
|||
// 获取下拉选择菜单 |
|||
getOptions () { |
|||
// 户籍地 |
|||
this.vueLoading = false |
|||
this.isAble = false |
|||
// 民族 |
|||
this.$http.get(`/sys/dict/listSimple/nation`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.nationList = res.data |
|||
}).catch((err) => { |
|||
console.log(err) |
|||
}) |
|||
// 政治面貌 |
|||
this.$http.get(`/sys/dict/listSimple/politics_status`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.politicsList = res.data |
|||
}).catch((err) => { |
|||
console.log(err) |
|||
}) |
|||
// 文化程度 |
|||
this.$http.get(`/sys/dict/listSimple/education_level`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.standardList = res.data |
|||
}).catch((err) => { |
|||
console.log(err) |
|||
}) |
|||
// 房屋性质 |
|||
this.$http.get(`/sys/dict/listSimple/house_purpose`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.housePropertyList = res.data |
|||
}).catch((err) => { |
|||
console.log(err) |
|||
}) |
|||
// 特殊人群 |
|||
this.$http.get(`/sys/dict/listSimple/special_groups`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.specialCrowdList = res.data |
|||
}).catch((err) => { |
|||
console.log(err) |
|||
}) |
|||
// 疫情等级 |
|||
this.$http.get(`/sys/dict/listSimple/area_risk_level`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.riskGradeList = res.data |
|||
}).catch((err) => { |
|||
console.log(err) |
|||
}) |
|||
this.$http.get(`/sys/dept/deptInfo?deptPid=53613e1c5de6ed473467f0159a10b135&tags=street_party`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.liveOptions = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
// 村庄点击事件 |
|||
clickCommunity () { |
|||
if (this.dataForm.liveAddressCode) { |
|||
this.deptInfo(this.dataForm.liveAddressCode, '0') // 0村庄, 1网格 |
|||
} else { |
|||
this.$message.error('请选择县内居住地') |
|||
} |
|||
}, |
|||
// 村庄选中以后清空网格数据 |
|||
changeCommunity () { |
|||
this.dataForm.community = (this.communityOptions.find((item) => { |
|||
return item.deptId === this.dataForm.communityId |
|||
})).name |
|||
this.gridNameOptions = [] |
|||
this.dataForm.gridName = '' |
|||
this.dataForm.gridId = '' |
|||
}, |
|||
// 网格点击事件 |
|||
clickGridName () { |
|||
if (this.dataForm.communityId) { |
|||
this.deptInfo(this.dataForm.communityId, '1') // 0村庄, 1网格 |
|||
} else { |
|||
this.$message.error('请选择社区/村庄') |
|||
} |
|||
}, |
|||
changeGridName () { |
|||
this.dataForm.gridName = (this.gridNameOptions.find((item) => { |
|||
return item.deptId === this.dataForm.gridId |
|||
})).name |
|||
}, |
|||
// 获取村庄社区/网格 |
|||
deptInfo (id, isCommunityOfGrid) { |
|||
this.$http.get(`/sys/dept/deptInfo?deptPid=${id}`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
if (isCommunityOfGrid === '0') { // 0村庄, 1网格 |
|||
this.communityOptions = res.data |
|||
} else { |
|||
this.gridNameOptions = res.data |
|||
} |
|||
}).catch(() => {}) |
|||
}, |
|||
// 获取关联小区 id name longitude latitude |
|||
getPlotList () { |
|||
if (!this.dataForm.liveAddressCode) { |
|||
return |
|||
} |
|||
let datas = { |
|||
params: { |
|||
streetCode: this.dataForm.liveAddressCode, |
|||
plot: '' |
|||
} |
|||
} |
|||
this.simplePlotList = [] |
|||
this.$http.get(`/epidemicplotcoordinate/simplePlot/getList`, datas).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.simplePlotList = res.data |
|||
}).catch((err) => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
// 选择关联小区/村 设置经纬度 |
|||
selectPlot (id) { |
|||
console.log(id) |
|||
if (id) { |
|||
this.simplePlotList.forEach(item => { |
|||
if (item.id === id) { |
|||
this.dataForm.latitude = item.latitude |
|||
this.dataForm.longitude = item.longitude |
|||
} |
|||
}) |
|||
} else { |
|||
this.dataForm.latitude = '' |
|||
this.dataForm.longitude = '' |
|||
} |
|||
}, |
|||
// 选择县内居住地 |
|||
selectLive (id) { |
|||
this.dataForm.coordinateId = '' |
|||
this.dataForm.latitude = '' |
|||
this.dataForm.longitude = '' |
|||
this.getliveAddressName(id) |
|||
this.getPlotList() |
|||
this.communityOptions = [] // 清空社区村庄/网格数据 |
|||
this.dataForm.community = '' |
|||
this.dataForm.communityId = '' |
|||
this.gridNameOptions = [] |
|||
this.dataForm.gridName = '' |
|||
this.dataForm.gridId = '' |
|||
}, |
|||
// 县内居住地名称 |
|||
getliveAddressName (id) { |
|||
this.liveOptions.forEach(item => { |
|||
if (item.value === id) { |
|||
this.dataForm.liveAddressName = item.label |
|||
this.dataForm.liveAddressCodes = [id] |
|||
} |
|||
}) |
|||
}, |
|||
// 往返情况取值变化事件 |
|||
// selectModel(id) { |
|||
// if (id === '1') { |
|||
// // 在平阴 |
|||
// this.showFlagIn = true |
|||
// this.showFlagOut = false |
|||
// } else { |
|||
// this.showFlagIn = false |
|||
// this.showFlagOut = true |
|||
// } |
|||
// }, |
|||
// 现居住地 |
|||
outLiveAddressChangeHandle (value, selectedData) { |
|||
let outLiveAddressCode = '' |
|||
let outLiveAddressName = '' |
|||
var outLiveAddressCodeArr = this.$refs['zwjzdname'].checkedValue |
|||
var outLiveAddressNameArr = this.$refs['zwjzdname'].getCheckedNodes()[0].pathLabels |
|||
for (var i = 0; i < outLiveAddressCodeArr.length; i++) { |
|||
if (i === outLiveAddressCodeArr.length - 1) { |
|||
outLiveAddressCode += outLiveAddressCodeArr[i] |
|||
} else { |
|||
outLiveAddressCode += outLiveAddressCodeArr[i] + ',' |
|||
} |
|||
} |
|||
for (var j = 0; j < outLiveAddressNameArr.length; j++) { |
|||
if (j === outLiveAddressNameArr.length - 1) { |
|||
outLiveAddressName += outLiveAddressNameArr[j] |
|||
} else { |
|||
outLiveAddressName += outLiveAddressNameArr[j] + '/' |
|||
} |
|||
} |
|||
this.dataForm.outLiveAddressCode = outLiveAddressCode |
|||
this.dataForm.outLiveAddressName = outLiveAddressName |
|||
}, |
|||
// 户籍地 |
|||
householdRegisterChangeHandle (value, selectedData) { |
|||
let householdRegisterCode = '' |
|||
let householdRegisterName = '' |
|||
var householdRegisterCodeArr = this.$refs['hjdname'].checkedValue |
|||
var householdRegisterNameArr = this.$refs['hjdname'].getCheckedNodes()[0].pathLabels |
|||
for (var i = 0; i < householdRegisterCodeArr.length; i++) { |
|||
if (i === householdRegisterCodeArr.length - 1) { |
|||
householdRegisterCode += householdRegisterCodeArr[i] |
|||
} else { |
|||
householdRegisterCode += householdRegisterCodeArr[i] + ',' |
|||
} |
|||
} |
|||
for (var j = 0; j < householdRegisterNameArr.length; j++) { |
|||
if (j === householdRegisterNameArr.length - 1) { |
|||
householdRegisterName += householdRegisterNameArr[j] |
|||
} else { |
|||
householdRegisterName += householdRegisterNameArr[j] + '/' |
|||
} |
|||
} |
|||
this.dataForm.householdRegisterCode = householdRegisterCode |
|||
this.dataForm.householdRegisterName = householdRegisterName |
|||
}, |
|||
// liveAddressChangeHandle(value, selectedData) { |
|||
// let liveAddressCode = '' |
|||
// let liveAddressName = '' |
|||
// var liveAddressCodeArr = this.$refs['jzdname'].checkedValue |
|||
// var liveAddressNameArr = this.$refs['jzdname'].getCheckedNodes()[0].pathLabels |
|||
// for (var i = 0; i < liveAddressCodeArr.length; i++) { |
|||
// if (i === liveAddressCodeArr.length - 1) { |
|||
// liveAddressCode += liveAddressCodeArr[i] |
|||
// } else { |
|||
// liveAddressCode += liveAddressCodeArr[i] + ',' |
|||
// } |
|||
// } |
|||
// for (var j = 0; j < liveAddressNameArr.length; j++) { |
|||
// if (j === liveAddressNameArr.length - 1) { |
|||
// liveAddressName += liveAddressNameArr[j] |
|||
// } else { |
|||
// liveAddressName += liveAddressNameArr[j] + '/' |
|||
// } |
|||
// } |
|||
// this.dataForm.liveAddressCode = liveAddressCode |
|||
// this.dataForm.liveAddressName = liveAddressName |
|||
// }, |
|||
// destinationChangeHandle(value, selectedData) { |
|||
// let destinationAddressCode = '' |
|||
// let destinationAddressName = '' |
|||
// var destinationAddressCodeArr = this.$refs['qwmddname'].currentValue |
|||
// var destinationAddressNameArr = this.$refs['qwmddname'].currentLabels |
|||
// for (var i = 0; i < destinationAddressCodeArr.length; i++) { |
|||
// if (i === destinationAddressCodeArr.length - 1) { |
|||
// destinationAddressCode += destinationAddressCodeArr[i] |
|||
// } else { |
|||
// destinationAddressCode += destinationAddressCodeArr[i] + ',' |
|||
// } |
|||
// } |
|||
// for (var j = 0; j < destinationAddressNameArr.length; j++) { |
|||
// if (j === destinationAddressNameArr.length - 1) { |
|||
// destinationAddressName += destinationAddressNameArr[j] |
|||
// } else { |
|||
// destinationAddressName += destinationAddressNameArr[j] + '/' |
|||
// } |
|||
// } |
|||
// this.dataForm.destinationAddressCode = destinationAddressCode |
|||
// this.dataForm.destinationAddressName = destinationAddressName |
|||
// }, |
|||
// 获取信息 |
|||
getInfo () { |
|||
this.$http.get(`/personroom/${this.dataForm.id}`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.dataForm = { |
|||
...this.dataForm, |
|||
...res.data |
|||
} |
|||
this.getPlotList() |
|||
if (this.dataForm.liveAddressCode) { |
|||
this.deptInfo(this.dataForm.liveAddressCode, '0') // 详情初始化完成以后，初始化社区/村庄相关 |
|||
} |
|||
if (this.dataForm.communityId) { |
|||
this.deptInfo(this.dataForm.communityId, '1') // 详情初始化完成以后，初始化网格相关 |
|||
} |
|||
if (this.dataForm.returnState === '1') { |
|||
// 在平阴 |
|||
this.showFlagIn = true |
|||
this.showFlagOut = false |
|||
} else { |
|||
this.showFlagIn = false |
|||
this.showFlagOut = true |
|||
} |
|||
}).catch(() => { |
|||
}) |
|||
}, |
|||
// 表单提交 |
|||
dataFormSubmitHandle: debounce(function () { |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
this.$message.error('请完善必填项') |
|||
return false |
|||
} |
|||
this.isAble = true |
|||
this.$http[!this.dataForm.id ? 'post' : 'put']('/personroom/', this.dataForm).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
this.isAble = false |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
this.visible = false |
|||
this.$emit('refreshDataList') |
|||
} |
|||
}) |
|||
}).catch(() => { |
|||
}) |
|||
}) |
|||
}, 1000, { 'leading': true, 'trailing': false }), |
|||
btKeyUpIdCard (e) { |
|||
e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '') |
|||
this.dataForm.idCard = e.target.value |
|||
}, |
|||
btKeyUpMobile (e) { |
|||
e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '') |
|||
this.dataForm.mobile = e.target.value |
|||
}, |
|||
btKeyUpRelationPeopleMobile (e) { |
|||
e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '') |
|||
this.dataForm.relationPeopleMobile = e.target.value |
|||
}, |
|||
btKeyUpUserName (e) { |
|||
e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '') |
|||
this.dataForm.userName = e.target.value |
|||
}, |
|||
btKeyUpRelationPeople (e) { |
|||
e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '') |
|||
this.dataForm.relationPeople = e.target.value |
|||
}, |
|||
handleSelect (key, keyPath) { |
|||
this.activeIndex = key |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
.item-top { |
|||
margin-top: 20px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,357 @@ |
|||
<template> |
|||
<el-card shadow="never" class="aui-card--fill"> |
|||
<div class="mod-demo__epidemicreportuserinfo}"> |
|||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="beforeSearch()"> |
|||
<el-form-item label="姓名" prop="username" label-width="90px"> |
|||
<el-input v-model="dataForm.username" placeholder="姓名" clearable maxlength="49" @keyup.native="btKeyUpUsername" style="width:200px"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="身份证" prop="idCard" label-width="90px"> |
|||
<el-input v-model="dataForm.idCard" placeholder="身份证" clearable maxlength="49" @keyup.native="btKeyUpIdCard" style="width:200px"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="手机号" prop="mobile" label-width="90px"> |
|||
<el-input v-model="dataForm.mobile" placeholder="手机号" clearable maxlength="11" @keyup.native="btKeyUpMobile" style="width:200px"></el-input> |
|||
</el-form-item> |
|||
<br/> |
|||
<el-form-item label="楼号" prop="buildingNo" label-width="90px"> |
|||
<el-input v-model="dataForm.buildingNo" placeholder="楼号" clearable maxlength="11" style="width:200px"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="单元号" prop="unit" label-width="90px"> |
|||
<el-input v-model="dataForm.unit" placeholder="单元号" clearable maxlength="11" style="width:200px"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="房间号" prop="roomNo" label-width="90px"> |
|||
<el-input v-model="dataForm.roomNo" placeholder="房间号" clearable maxlength="11" style="width:200px"></el-input> |
|||
</el-form-item> |
|||
<br> |
|||
<el-form-item label="现居住地" label-width="90px" ref="jzdname" > |
|||
<el-cascader |
|||
v-model="ids" |
|||
:options="options" |
|||
:props="{ checkStrictly: true }" |
|||
clearable |
|||
change-on-select |
|||
> |
|||
</el-cascader> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="往返情况" prop="returnState" label-width="70px">--> |
|||
<!-- <el-select v-model="dataForm.returnState" placeholder="往返情况" clearable>--> |
|||
<!-- <el-option v-for="item in returnStateArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue">--> |
|||
<!-- </el-option>--> |
|||
<!-- </el-select>--> |
|||
<!-- </el-form-item>--> |
|||
<!-- <br/>--> |
|||
<el-form-item label="居住乡镇" prop="outStreet" label-width="90px" v-if="$hasPermission('sys:epidemicreportuserinfo:townsSearch')"> |
|||
<el-select v-model="dataForm.outStreet" placeholder="居住乡镇" @change="selectModel($event)" clearable> |
|||
<el-option v-for="item in outStreetArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" > |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="录入时间" prop="startTime" label-width="70px">--> |
|||
<!-- <el-date-picker v-model="dataForm.startTime"--> |
|||
<!-- type="date"--> |
|||
<!-- :picker-options="pickerBeginDateBefore"--> |
|||
<!-- value-format="yyyy-MM-dd"--> |
|||
<!-- format="yyyy-MM-dd"--> |
|||
<!-- placeholder="选择日期时间"--> |
|||
<!-- style="width:200px" @change="changeTime">--> |
|||
<!-- </el-date-picker>--> |
|||
<!-- </el-form-item>--> |
|||
<!-- <el-form-item label="至" prop="endTime">--> |
|||
<!-- <el-date-picker v-model="dataForm.endTime"--> |
|||
<!-- type="date"--> |
|||
<!-- :picker-options="pickerBeginDateAfter"--> |
|||
<!-- value-format="yyyy-MM-dd"--> |
|||
<!-- format="yyyy-MM-dd"--> |
|||
<!-- placeholder="选择日期时间"--> |
|||
<!-- style="width:200px" @change="changeTime">--> |
|||
<!-- </el-date-picker>--> |
|||
<!-- </el-form-item>--> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="beforeSearch()">{{ $t('query') }}</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="exportHandle()">{{ $t('export') }}</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button v-if="false" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button v-if="$hasPermission('demo:epidemicreportuserinfo:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;"> |
|||
<el-table-column label="序号" header-align="center" align="center" width="50px"> |
|||
<template slot-scope="scope"> |
|||
{{scope.$index+1}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="userName" label="姓名" header-align="center" align="center" width="150"></el-table-column> |
|||
<el-table-column prop="idCard" label="身份证号" header-align="center" align="center" width="170" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="mobile" label="联系方式" header-align="center" align="center" width="150"></el-table-column> |
|||
<el-table-column prop="householdRegisterName" label="户籍所在地" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="householdRegisterDetail" label="户籍所在地详细地址" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="liveAddressName" label="县内居住镇街" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> |
|||
<!-- <el-table-column prop="outLiveAddressName" label="现居住地" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> --> |
|||
<!-- <el-table-column prop="outLiveAddressDetail" label="现居住地详细地址" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> --> |
|||
<el-table-column prop="community" label="社区/村" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="plot" label="小区" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="buildingNo" label="楼" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="unit" label="单元" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="roomNo" label="房屋" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> |
|||
<!-- <el-table-column prop="riskGrade" label="现居住地风险等级" header-align="center" align="center" width="180" show-overflow-tooltip> |
|||
<template slot-scope="scope"> |
|||
<el-tag v-if='scope.row.riskGrade === "3"' size="small" type="danger">高风险</el-tag> |
|||
<el-tag v-else-if='scope.row.riskGrade === "2"' size="small" type="warning">中风险</el-tag> |
|||
<el-tag v-else-if='scope.row.riskGrade === "1"' size="small" type="success">低风险</el-tag> |
|||
</template> |
|||
</el-table-column> --> |
|||
<!-- <el-table-column prop="returnState" label="往返情况" header-align="center" align="center" width="110" :formatter = "returnStateFormat"></el-table-column> --> |
|||
<!-- <el-table-column prop="goBarkTime" label="拟返回平阴时间" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> --> |
|||
<!-- <el-table-column prop="liveAddressDetail" label="县内居住地详细地址" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column>--> |
|||
<!-- <el-table-column prop="relationPeople" label="县内居住联系人" header-align="center" align="center" width="150"></el-table-column> --> |
|||
<!-- <el-table-column prop="relationPeopleMobile" label="联系人电话" header-align="center" align="center" width="150"></el-table-column> --> |
|||
<!-- <el-table-column prop="destinationAddressName" label="拟去往地" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column>--> |
|||
<el-table-column prop="createdTime" label="录入时间" header-align="center" align="center" width="160"></el-table-column> |
|||
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" size="small" @click="lookHandle(scope.row.id)">{{'查看'}}</el-button> |
|||
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button> |
|||
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination |
|||
class="epidemic-report-userinfo" |
|||
:current-page="page" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="limit" |
|||
:total="total" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
@size-change="pageSizeChangeHandle" |
|||
@current-change="pageCurrentChangeHandle"> |
|||
</el-pagination> |
|||
<!-- 弹窗, 新增 / 修改 --> |
|||
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataListSearch"></add-or-update> |
|||
<infoDetail v-if="detailVisible" ref="infoDetail" @refreshDataList="getDataListSearch"></infoDetail> |
|||
</div> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import AddOrUpdate from './epidemicreportuserinfo-add-or-update' |
|||
import InfoDetail from './epidemicreportuserinfoDetail' |
|||
import qs from "qs"; |
|||
import Cookies from "js-cookie"; |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
activatedIsNeed: false, |
|||
getDataListURL: '/personroom/permissionPage', |
|||
getDataListIsPage: true, |
|||
deleteURL: '/personroom', |
|||
deleteIsBatch: true, |
|||
exportURL: '/personroom/export', |
|||
exportErrorInfoURL: '/epidemicusererror/export' |
|||
}, |
|||
dataForm: { |
|||
id: '', |
|||
idCard: '', |
|||
username:'', |
|||
mobile: '', |
|||
outCode: '', |
|||
outStreet: '', |
|||
returnState: '', |
|||
startTime: '', |
|||
endTime: '', |
|||
roomNo: '' |
|||
}, |
|||
publicPath: process.env.BASE_URL, |
|||
pickerBeginDateBefore: { |
|||
disabledDate: (time) => { |
|||
let beginDateVal = this.dataForm.endTime |
|||
if (beginDateVal) { |
|||
return time.getTime() > new Date(beginDateVal + ' 00:00:00').getTime() |
|||
} |
|||
} |
|||
}, |
|||
pickerBeginDateAfter: { |
|||
disabledDate: (time) => { |
|||
let EndDateVal = this.dataForm.startTime |
|||
if (EndDateVal) { |
|||
return time.getTime() < new Date(EndDateVal + ' 00:00:00').getTime() |
|||
} |
|||
} |
|||
}, |
|||
ids: [], |
|||
options: [], |
|||
outStreetArr: [], |
|||
returnStateArr: [ |
|||
{ dictValue: 1, dictName: '在本地' }, |
|||
{ dictValue: 2, dictName: '在外地' } |
|||
], |
|||
exportTemplate: false, |
|||
uploeadLoeading: false, |
|||
dialogVisibleExcel: false, |
|||
detailVisible: false |
|||
} |
|||
}, |
|||
created: function () { |
|||
this.getOptions() |
|||
// 乡镇下拉框赋值 |
|||
this.getDailyTypeArrInfo() |
|||
this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/epidemicreportuserinfo/importManualScoreExcel?token=${window.localStorage.getItem('esrsToken')}` |
|||
}, |
|||
components: { |
|||
AddOrUpdate, |
|||
InfoDetail |
|||
}, |
|||
watch: { |
|||
ids: function (val) { |
|||
if (val.length === 0) { |
|||
this.dataForm.outCode = '' |
|||
} else { |
|||
this.dataForm.outCode = this.ids[val.length - 1] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
beforeSearch () { |
|||
if (this.dataForm.username.trim() === '' && this.dataForm.idCard.trim() === '' && this.dataForm.roomNo.trim() ==='') { |
|||
this.$message({ |
|||
message: '姓名、身份证、房间号至少一项不能为空', |
|||
type: 'warning', |
|||
duration: 1000 |
|||
}) |
|||
} else { |
|||
this.getDataListSearch() |
|||
} |
|||
}, |
|||
// 查看 |
|||
lookHandle (id) { |
|||
this.detailVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.infoDetail.dataForm.id = id |
|||
this.$refs.infoDetail.init() |
|||
}) |
|||
}, |
|||
// 获取乡镇下拉信息(传参：4代表查“街道”) |
|||
getDailyTypeArrInfo () { |
|||
this.$http.get(`epidemicreportuserinfo/selectStreet/4`).then(({ data: res }) => { |
|||
this.outStreetArr = res |
|||
}).catch(() => {}) |
|||
}, |
|||
// 乡镇取值变化事件 |
|||
selectModel (event) { |
|||
this.outStreetArr.find((item) => { |
|||
if (item.dictValue === event) { |
|||
this.dataForm.outStreet = item.dictValue |
|||
} |
|||
}) |
|||
}, |
|||
getOptions () { |
|||
this.$http |
|||
.get(`/select/getSysArea`) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.options = res.data |
|||
}) |
|||
.catch(() => {}) |
|||
}, |
|||
btKeyUpUsername (e) { |
|||
e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '') |
|||
this.dataForm.username = e.target.value |
|||
}, |
|||
btKeyUpIdCard (e) { |
|||
e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '') |
|||
this.dataForm.idCard = e.target.value |
|||
}, |
|||
btKeyUpMobile (e) { |
|||
e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '') |
|||
this.dataForm.mobile = e.target.value |
|||
}, |
|||
beforeUpload(file){ |
|||
this.uploeadLoeading = true |
|||
}, |
|||
errorExceed (file, fileList) { |
|||
this.uploeadLoeading = false |
|||
this.$message.error('上传失败请重试') |
|||
}, |
|||
uploadSuccess (response, file, fileList) { |
|||
this.uploeadLoeading = false |
|||
this.dataForm.liveAddressName = this.$refs.jzdname.selectedLabel |
|||
this.$refs.upload.clearFiles() |
|||
if (response.code !== 0 || (response.data !== null && response.data.length > 0)) { |
|||
this.errordataList = response.data |
|||
if (this.errordataList != null && this.errordataList.length > 0) { |
|||
this.$confirm(response.data, '提示', { |
|||
confirmButtonText: '下载', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
var params = qs.stringify({ |
|||
'token': window.localStorage.getItem('esrsToken'), |
|||
...this.dataForm |
|||
}) |
|||
window.location.href = `${window.SITE_CONFIG['apiURL']}${this.mixinViewModuleOptions.exportErrorInfoURL}?${params}` |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '下载成功' |
|||
}); |
|||
}).catch(() => { |
|||
this.$message({ |
|||
type: 'info', |
|||
message: '已取消下载' |
|||
}); |
|||
}); |
|||
} else { |
|||
this.$message.error(response.msg) |
|||
} |
|||
this.getDataList() |
|||
return |
|||
} |
|||
this.$message({ |
|||
message: '导入成功', |
|||
type: 'success', |
|||
duration: 1000, |
|||
onClose: () => { |
|||
this.getDataList() |
|||
} |
|||
}) |
|||
}, |
|||
returnStateFormat (row, column) { |
|||
if (row.returnState === 1 || row.returnState === '1') { |
|||
return '在本地' |
|||
} else if (row.returnState === 2 || row.returnState === '2') { |
|||
return '在外地' |
|||
} else { |
|||
return '' |
|||
} |
|||
}, |
|||
// returnriskGradeFormat (row, column) { |
|||
// //1:低风险，2：中风险，3：高风险 |
|||
// if (row.riskGrade === 1 || row.riskGrade === '1') { |
|||
// return '低风险' |
|||
// } else if (row.riskGrade === 2 || row.riskGrade === '2') { |
|||
// return '中风险' |
|||
// } else if (row.riskGrade === 3 || row.riskGrade === '3') { |
|||
// return '高风险' |
|||
// } else { |
|||
// return '' |
|||
// } |
|||
// }, |
|||
//打开导出弹框 |
|||
exports() { |
|||
this.dialogVisibleExcel = true; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
.epidemic-report-userinfo .el-pagination__jump .el-input .el-input__inner{ |
|||
font-size: 13px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,356 @@ |
|||
<template> |
|||
<el-card shadow="never" class="aui-card--fill"> |
|||
<div class="mod-demo__epidemicreportuserinfo}"> |
|||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="beforeSearch()"> |
|||
<el-form-item label="姓名" prop="username" label-width="90px"> |
|||
<el-input v-model="dataForm.username" placeholder="姓名" clearable maxlength="49" @keyup.native="btKeyUpUsername" style="width:200px"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="身份证" prop="idCard" label-width="90px"> |
|||
<el-input v-model="dataForm.idCard" placeholder="身份证" clearable maxlength="49" @keyup.native="btKeyUpIdCard" style="width:200px"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="手机号" prop="mobile" label-width="90px"> |
|||
<el-input v-model="dataForm.mobile" placeholder="手机号" clearable maxlength="11" @keyup.native="btKeyUpMobile" style="width:200px"></el-input> |
|||
</el-form-item> |
|||
<br/> |
|||
<el-form-item label="楼号" prop="buildingNo" label-width="90px"> |
|||
<el-input v-model="dataForm.buildingNo" placeholder="楼号" clearable maxlength="11" style="width:200px"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="单元号" prop="unit" label-width="90px"> |
|||
<el-input v-model="dataForm.unit" placeholder="单元号" clearable maxlength="11" style="width:200px"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="房间号" prop="roomNo" label-width="90px"> |
|||
<el-input v-model="dataForm.roomNo" placeholder="房间号" clearable maxlength="11" style="width:200px"></el-input> |
|||
</el-form-item> |
|||
<br> |
|||
<el-form-item label="现居住地" label-width="90px" ref="jzdname" > |
|||
<el-cascader |
|||
v-model="ids" |
|||
:options="options" |
|||
:props="{ checkStrictly: true }" |
|||
clearable |
|||
change-on-select |
|||
> |
|||
</el-cascader> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="往返情况" prop="returnState" label-width="70px">--> |
|||
<!-- <el-select v-model="dataForm.returnState" placeholder="往返情况" clearable>--> |
|||
<!-- <el-option v-for="item in returnStateArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue">--> |
|||
<!-- </el-option>--> |
|||
<!-- </el-select>--> |
|||
<!-- </el-form-item>--> |
|||
<!-- <br/>--> |
|||
<el-form-item label="居住乡镇" prop="outStreet" label-width="90px" v-if="$hasPermission('sys:epidemicreportuserinfo:townsSearch')"> |
|||
<el-select v-model="dataForm.outStreet" placeholder="居住乡镇" @change="selectModel($event)" clearable> |
|||
<el-option v-for="item in outStreetArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" > |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="录入时间" prop="startTime" label-width="70px">--> |
|||
<!-- <el-date-picker v-model="dataForm.startTime"--> |
|||
<!-- type="date"--> |
|||
<!-- :picker-options="pickerBeginDateBefore"--> |
|||
<!-- value-format="yyyy-MM-dd"--> |
|||
<!-- format="yyyy-MM-dd"--> |
|||
<!-- placeholder="选择日期时间"--> |
|||
<!-- style="width:200px" @change="changeTime">--> |
|||
<!-- </el-date-picker>--> |
|||
<!-- </el-form-item>--> |
|||
<!-- <el-form-item label="至" prop="endTime">--> |
|||
<!-- <el-date-picker v-model="dataForm.endTime"--> |
|||
<!-- type="date"--> |
|||
<!-- :picker-options="pickerBeginDateAfter"--> |
|||
<!-- value-format="yyyy-MM-dd"--> |
|||
<!-- format="yyyy-MM-dd"--> |
|||
<!-- placeholder="选择日期时间"--> |
|||
<!-- style="width:200px" @change="changeTime">--> |
|||
<!-- </el-date-picker>--> |
|||
<!-- </el-form-item>--> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="beforeSearch()">{{ $t('query') }}</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="exportHandle()">{{ $t('export') }}</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button v-if="false" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button v-if="$hasPermission('demo:epidemicreportuserinfo:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;"> |
|||
<el-table-column label="序号" header-align="center" align="center" width="50px"> |
|||
<template slot-scope="scope"> |
|||
{{scope.$index+1}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="userName" label="姓名" header-align="center" align="center" width="150"></el-table-column> |
|||
<el-table-column prop="idCard" label="身份证号" header-align="center" align="center" width="170" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="mobile" label="联系方式" header-align="center" align="center" width="150"></el-table-column> |
|||
<el-table-column prop="householdRegisterName" label="户籍所在地" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="householdRegisterDetail" label="户籍所在地详细地址" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="liveAddressName" label="县内居住镇街" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> |
|||
<!-- <el-table-column prop="outLiveAddressName" label="现居住地" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> --> |
|||
<!-- <el-table-column prop="outLiveAddressDetail" label="现居住地详细地址" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> --> |
|||
<el-table-column prop="community" label="社区/村" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="plot" label="小区" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="buildingNo" label="楼" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="unit" label="单元" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="roomNo" label="房屋" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> |
|||
<!-- <el-table-column prop="riskGrade" label="现居住地风险等级" header-align="center" align="center" width="180" show-overflow-tooltip> |
|||
<template slot-scope="scope"> |
|||
<el-tag v-if='scope.row.riskGrade === "3"' size="small" type="danger">高风险</el-tag> |
|||
<el-tag v-else-if='scope.row.riskGrade === "2"' size="small" type="warning">中风险</el-tag> |
|||
<el-tag v-else-if='scope.row.riskGrade === "1"' size="small" type="success">低风险</el-tag> |
|||
</template> |
|||
</el-table-column> --> |
|||
<!-- <el-table-column prop="returnState" label="往返情况" header-align="center" align="center" width="110" :formatter = "returnStateFormat"></el-table-column> --> |
|||
<!-- <el-table-column prop="goBarkTime" label="拟返回平阴时间" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column> --> |
|||
<!-- <el-table-column prop="liveAddressDetail" label="县内居住地详细地址" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column>--> |
|||
<!-- <el-table-column prop="relationPeople" label="县内居住联系人" header-align="center" align="center" width="150"></el-table-column> --> |
|||
<!-- <el-table-column prop="relationPeopleMobile" label="联系人电话" header-align="center" align="center" width="150"></el-table-column> --> |
|||
<!-- <el-table-column prop="destinationAddressName" label="拟去往地" header-align="center" align="center" width="180" show-overflow-tooltip></el-table-column>--> |
|||
<el-table-column prop="createdTime" label="录入时间" header-align="center" align="center" width="160"></el-table-column> |
|||
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" size="small" @click="lookHandle(scope.row.id)">{{'查看'}}</el-button> |
|||
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button> |
|||
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination |
|||
class="epidemic-report-userinfo" |
|||
:current-page="page" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="limit" |
|||
:total="total" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
@size-change="pageSizeChangeHandle" |
|||
@current-change="pageCurrentChangeHandle"> |
|||
</el-pagination> |
|||
<!-- 弹窗, 新增 / 修改 --> |
|||
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataListSearch"></add-or-update> |
|||
<infoDetail v-if="detailVisible" ref="infoDetail" @refreshDataList="getDataListSearch"></infoDetail> |
|||
</div> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import AddOrUpdate from './epidemicreportuserinfo-add-or-update' |
|||
import InfoDetail from './epidemicreportuserinfoDetail' |
|||
import qs from 'qs' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
activatedIsNeed: false, |
|||
getDataListURL: '/personroom/page', |
|||
getDataListIsPage: true, |
|||
deleteURL: '/personroom', |
|||
deleteIsBatch: true, |
|||
exportURL: '/personroom/export', |
|||
exportErrorInfoURL: '/epidemicusererror/export' |
|||
}, |
|||
dataForm: { |
|||
id: '', |
|||
idCard: '', |
|||
username: '', |
|||
mobile: '', |
|||
outCode: '', |
|||
outStreet: '', |
|||
returnState: '', |
|||
startTime: '', |
|||
endTime: '', |
|||
roomNo: '' |
|||
}, |
|||
publicPath: process.env.BASE_URL, |
|||
pickerBeginDateBefore: { |
|||
disabledDate: (time) => { |
|||
let beginDateVal = this.dataForm.endTime |
|||
if (beginDateVal) { |
|||
return time.getTime() > new Date(beginDateVal + ' 00:00:00').getTime() |
|||
} |
|||
} |
|||
}, |
|||
pickerBeginDateAfter: { |
|||
disabledDate: (time) => { |
|||
let EndDateVal = this.dataForm.startTime |
|||
if (EndDateVal) { |
|||
return time.getTime() < new Date(EndDateVal + ' 00:00:00').getTime() |
|||
} |
|||
} |
|||
}, |
|||
ids: [], |
|||
options: [], |
|||
outStreetArr: [], |
|||
returnStateArr: [ |
|||
{ dictValue: 1, dictName: '在本地' }, |
|||
{ dictValue: 2, dictName: '在外地' } |
|||
], |
|||
exportTemplate: false, |
|||
uploeadLoeading: false, |
|||
dialogVisibleExcel: false, |
|||
detailVisible: false |
|||
} |
|||
}, |
|||
created: function () { |
|||
this.getOptions() |
|||
// 乡镇下拉框赋值 |
|||
this.getDailyTypeArrInfo() |
|||
this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/epidemicreportuserinfo/importManualScoreExcel?token=${window.localStorage.getItem('esrsToken')}` |
|||
}, |
|||
components: { |
|||
AddOrUpdate, |
|||
InfoDetail |
|||
}, |
|||
watch: { |
|||
ids: function (val) { |
|||
if (val.length === 0) { |
|||
this.dataForm.outCode = '' |
|||
} else { |
|||
this.dataForm.outCode = this.ids[val.length - 1] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
beforeSearch () { |
|||
if (this.dataForm.username.trim() === '' && this.dataForm.idCard.trim() === '' && this.dataForm.roomNo.trim() === '') { |
|||
this.$message({ |
|||
message: '姓名、身份证、房间号至少一项不能为空', |
|||
type: 'warning', |
|||
duration: 1000 |
|||
}) |
|||
} else { |
|||
this.getDataListSearch() |
|||
} |
|||
}, |
|||
// 查看 |
|||
lookHandle (id) { |
|||
this.detailVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.infoDetail.dataForm.id = id |
|||
this.$refs.infoDetail.init() |
|||
}) |
|||
}, |
|||
// 获取乡镇下拉信息(传参：4代表查“街道”) |
|||
getDailyTypeArrInfo () { |
|||
this.$http.get(`epidemicreportuserinfo/selectStreet/4`).then(({ data: res }) => { |
|||
this.outStreetArr = res |
|||
}).catch(() => {}) |
|||
}, |
|||
// 乡镇取值变化事件 |
|||
selectModel (event) { |
|||
this.outStreetArr.find((item) => { |
|||
if (item.dictValue === event) { |
|||
this.dataForm.outStreet = item.dictValue |
|||
} |
|||
}) |
|||
}, |
|||
getOptions () { |
|||
this.$http |
|||
.get(`/select/getSysArea`) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.options = res.data |
|||
}) |
|||
.catch(() => {}) |
|||
}, |
|||
btKeyUpUsername (e) { |
|||
e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '') |
|||
this.dataForm.username = e.target.value |
|||
}, |
|||
btKeyUpIdCard (e) { |
|||
e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '') |
|||
this.dataForm.idCard = e.target.value |
|||
}, |
|||
btKeyUpMobile (e) { |
|||
e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '') |
|||
this.dataForm.mobile = e.target.value |
|||
}, |
|||
beforeUpload (file) { |
|||
this.uploeadLoeading = true |
|||
}, |
|||
errorExceed (file, fileList) { |
|||
this.uploeadLoeading = false |
|||
this.$message.error('上传失败请重试') |
|||
}, |
|||
uploadSuccess (response, file, fileList) { |
|||
this.uploeadLoeading = false |
|||
this.dataForm.liveAddressName = this.$refs.jzdname.selectedLabel |
|||
this.$refs.upload.clearFiles() |
|||
if (response.code !== 0 || (response.data !== null && response.data.length > 0)) { |
|||
this.errordataList = response.data |
|||
if (this.errordataList != null && this.errordataList.length > 0) { |
|||
this.$confirm(response.data, '提示', { |
|||
confirmButtonText: '下载', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
var params = qs.stringify({ |
|||
'token': window.localStorage.getItem('esrsToken'), |
|||
...this.dataForm |
|||
}) |
|||
window.location.href = `${window.SITE_CONFIG['apiURL']}${this.mixinViewModuleOptions.exportErrorInfoURL}?${params}` |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '下载成功' |
|||
}) |
|||
}).catch(() => { |
|||
this.$message({ |
|||
type: 'info', |
|||
message: '已取消下载' |
|||
}) |
|||
}) |
|||
} else { |
|||
this.$message.error(response.msg) |
|||
} |
|||
this.getDataList() |
|||
return |
|||
} |
|||
this.$message({ |
|||
message: '导入成功', |
|||
type: 'success', |
|||
duration: 1000, |
|||
onClose: () => { |
|||
this.getDataList() |
|||
} |
|||
}) |
|||
}, |
|||
returnStateFormat (row, column) { |
|||
if (row.returnState === 1 || row.returnState === '1') { |
|||
return '在本地' |
|||
} else if (row.returnState === 2 || row.returnState === '2') { |
|||
return '在外地' |
|||
} else { |
|||
return '' |
|||
} |
|||
}, |
|||
// returnriskGradeFormat (row, column) { |
|||
// //1:低风险，2：中风险，3：高风险 |
|||
// if (row.riskGrade === 1 || row.riskGrade === '1') { |
|||
// return '低风险' |
|||
// } else if (row.riskGrade === 2 || row.riskGrade === '2') { |
|||
// return '中风险' |
|||
// } else if (row.riskGrade === 3 || row.riskGrade === '3') { |
|||
// return '高风险' |
|||
// } else { |
|||
// return '' |
|||
// } |
|||
// }, |
|||
// 打开导出弹框 |
|||
exports () { |
|||
this.dialogVisibleExcel = true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
.epidemic-report-userinfo .el-pagination__jump .el-input .el-input__inner{ |
|||
font-size: 13px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,349 @@ |
|||
<template> |
|||
<el-dialog :visible.sync="visible" title="查看" :close-on-click-modal="false" width="70%" top="7vh" |
|||
:close-on-press-escape="false"> |
|||
<el-form v-loading="vueLoading" element-loading-text="拼命加载中" |
|||
element-loading-spinner="el-icon-loading" :model="dataForm" :rules="dataRule" ref="dataForm" |
|||
@keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '160px' : '155px'" :disabled="true"> |
|||
<div class="item-box"> |
|||
<div class="item-title"><span></span> 基本信息</div> |
|||
<div class="item-table"> |
|||
<div class="table-row"> |
|||
<div class="table-col-label">姓名</div> |
|||
<div class="table-col-content">{{dataForm.userName}}</div> |
|||
<div class="table-col-label">曾用名</div> |
|||
<div class="table-col-content">{{dataForm.formerName}}</div> |
|||
<div class="table-col-label">性别</div> |
|||
<div class="table-col-content">{{dataForm.gender}}</div> |
|||
<div class="table-col-label">出生年月</div> |
|||
<div class="table-col-content">{{dataForm.birthday}}</div> |
|||
</div> |
|||
<div class="table-row"> |
|||
<div class="table-col-label">民族</div> |
|||
<div class="table-col-content">{{dataForm.nation}}</div> |
|||
<div class="table-col-label">政治面貌</div> |
|||
<div class="table-col-content">{{dataForm.politicsStatus}}</div> |
|||
<div class="table-col-label">身份证号</div> |
|||
<div class="table-col-content">{{dataForm.idCard}}</div> |
|||
<div class="table-col-label">联系方式</div> |
|||
<div class="table-col-content">{{dataForm.mobile}}</div> |
|||
</div> |
|||
<div class="table-row"> |
|||
<div class="table-col-label">文化程度</div> |
|||
<div class="table-col-content">{{dataForm.standardOfCulture}}</div> |
|||
<div class="table-col-label">宗教信仰</div> |
|||
<div class="table-col-content">{{dataForm.faith}}</div> |
|||
<div class="table-col-label">籍贯</div> |
|||
<div class="table-col-content">{{dataForm.nativePlace}}</div> |
|||
<div class="table-col-label">网格名称</div> |
|||
<div class="table-col-content">{{dataForm.liveAddressName}}/{{dataForm.community}}/{{dataForm.gridName}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="item-box"> |
|||
<div class="item-title"><span></span> 房屋信息</div> |
|||
<div class="item-table"> |
|||
<div class="table-row"> |
|||
<div class="table-col-label">户籍地</div> |
|||
<div class="table-col-content">{{dataForm.householdRegisterName}}</div> |
|||
<div class="table-col-label">户籍地详细地址</div> |
|||
<div class="table-col-content">{{dataForm.householdRegisterDetail}}</div> |
|||
<div class="table-col-label">现居住地</div> |
|||
<div class="table-col-content">{{dataForm.outLiveAddressName}}</div> |
|||
<div class="table-col-label">现居住地详细地址</div> |
|||
<div class="table-col-content">{{dataForm.outLiveAddressDetail}}</div> |
|||
</div> |
|||
<div class="table-row"> |
|||
<div class="table-col-label">小区</div> |
|||
<div class="table-col-content">{{dataForm.plot}}</div> |
|||
<div class="table-col-label">楼号</div> |
|||
<div class="table-col-content">{{dataForm.buildingNo}}</div> |
|||
<div class="table-col-label">单元</div> |
|||
<div class="table-col-content">{{dataForm.unit}}</div> |
|||
<div class="table-col-label">房间号</div> |
|||
<div class="table-col-content">{{dataForm.roomNo}}</div> |
|||
</div> |
|||
<div class="table-row"> |
|||
<div class="table-col-label">房屋性质</div> |
|||
<div class="table-col-content">{{dataForm.houseProperty}}</div> |
|||
<div class="table-col-label">居住地关联人</div> |
|||
<div class="table-col-content">{{dataForm.relationPeople}}</div> |
|||
<div class="table-col-label">关联人联系电话</div> |
|||
<div class="table-col-content">{{dataForm.relationPeopleMobile}}</div> |
|||
<div class="table-col-label">经纬度坐标</div> |
|||
<div class="table-col-content">{{dataForm.longitude}},{{dataForm.latitude}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="item-box"> |
|||
<div class="item-title"><span></span> 其他信息</div> |
|||
<div class="item-table"> |
|||
<div class="table-row"> |
|||
<div class="table-col-label">特殊人群类型</div> |
|||
<div class="table-col-content">{{dataForm.specialCrowd}}</div> |
|||
<div class="table-col-label">有无车辆</div> |
|||
<div class="table-col-content">{{dataForm.car}}</div> |
|||
<div class="table-col-label">车牌号</div> |
|||
<div class="table-col-content">{{dataForm.carNo}}</div> |
|||
<div class="table-col-label">现居住地疫情风险等级</div> |
|||
<div class="table-col-content">{{dataForm.riskGradeName}}</div> |
|||
</div> |
|||
<div class="table-row"> |
|||
<div class="table-col-label">拟返回平阴时间</div> |
|||
<div class="table-col-content">{{dataForm.goBarkTime}}</div> |
|||
<div class="table-col-label"></div> |
|||
<div class="table-col-content"></div> |
|||
<div class="table-col-label"></div> |
|||
<div class="table-col-content"></div> |
|||
<div class="table-col-label"></div> |
|||
<div class="table-col-content"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import debounce from 'lodash/debounce' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
dataForm: { |
|||
userName: '', |
|||
formerName: '', |
|||
gender: '', |
|||
birthday: '', |
|||
nation: '', |
|||
politicsStatus: '', |
|||
idCard: '', |
|||
mobile: '', |
|||
standardOfCulture: '', |
|||
faith: '', |
|||
nativePlace: '', |
|||
gridName: '', |
|||
householdRegisterCode: '', |
|||
householdRegisterName: '', |
|||
householdRegisterDetail: '', |
|||
outLiveAddressCode: '', |
|||
outLiveAddressName: '', |
|||
outLiveAddressDetail: '', |
|||
plot: '', |
|||
buildingNo: '', |
|||
unit: '', |
|||
roomNo: '', |
|||
houseProperty: '', |
|||
relationPeople: '', |
|||
relationPeopleMobile: '', |
|||
longitude: '', |
|||
latitude: '', |
|||
specialCrowd: '', |
|||
car: '', |
|||
carNo: '', |
|||
riskGrade: '', |
|||
riskGradeName: '', // getRiskGradeList() |
|||
goBarkTime: '', |
|||
|
|||
returnState: '1', |
|||
// liveAddressCode: '', |
|||
// liveAddressName: '', |
|||
// liveAddressDetail: '', |
|||
// householdRegisterCodes: [], |
|||
// liveAddressCodes: [], |
|||
// outLiveAddressCodes: [], |
|||
// leaveTime: '', |
|||
// destinationAddressName: '', |
|||
// destinationAddressCode: '', |
|||
// destinationAddressDetail: '', |
|||
// destinationAddressCodes: [], |
|||
// bloodType: '', |
|||
// height: '', |
|||
// health: '', |
|||
// maritalStatus: '', |
|||
// relation: '', |
|||
// nationality: '', |
|||
// graduateSchool: '', |
|||
// professional: '', |
|||
// workStatus: '', |
|||
// industryCategory: '', |
|||
// workUnits: '', |
|||
// military: '', |
|||
// peopleCategories: '', |
|||
// hushaiStatus: '', |
|||
// community: '', |
|||
// familySecurity: '', |
|||
// livingSituation: '' |
|||
}, |
|||
isAble: false, |
|||
showFlagIn: true, |
|||
showFlagOut: true, |
|||
vueLoading: true, |
|||
// riskGradeList: [],// 疫情风险等级 |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule() { |
|||
return { |
|||
userName: [ |
|||
{required: true, message: this.$t('validate.required'), trigger: 'blur'} |
|||
], |
|||
idCard: [ |
|||
{required: true, message: this.$t('validate.required'), trigger: 'blur'}, |
|||
{pattern: /(^\d{15}$)|bai(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确身份证号', trigger: 'blur'} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.visible = true |
|||
this.isAble = true |
|||
this.vueLoading = true |
|||
// 清空组织树选中 |
|||
this.dataForm.destinationAddressCodes = [] |
|||
this.$nextTick(() => { |
|||
this.$refs['dataForm'].resetFields() |
|||
if (this.dataForm.id) { |
|||
this.getInfo() |
|||
} |
|||
}) |
|||
this.vueLoading = false |
|||
this.isAble = false |
|||
}, |
|||
// 疫情等级 |
|||
getRiskGradeList () { |
|||
this.dataForm.riskGradeName = '' |
|||
this.$http.get(`/sys/dict/listSimple/area_risk_level`).then(({data: res}) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
// this.riskGradeList = res.data |
|||
res.data.forEach(item => { |
|||
if (item.dictValue == this.dataForm.riskGrade) { |
|||
this.dataForm.riskGradeName = item.dictName |
|||
} |
|||
}) |
|||
}).catch((err) => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
// 获取信息 |
|||
getInfo() { |
|||
this.$http.get(`/personroom/${this.dataForm.id}`).then(({data: res}) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.dataForm = { |
|||
...this.dataForm, |
|||
...res.data |
|||
} |
|||
this.getRiskGradeList() // 设置疫情等级的回显 |
|||
if (this.dataForm.returnState === '1') { |
|||
// 在平阴 |
|||
this.showFlagIn = true |
|||
this.showFlagOut = false |
|||
} else { |
|||
this.showFlagIn = false |
|||
this.showFlagOut = true |
|||
} |
|||
}).catch((err) => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
// 表单提交 - 未使用 |
|||
dataFormSubmitHandle: debounce(function () { |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
this.isAble = true |
|||
this.$http[!this.dataForm.id ? 'post' : 'put']('/personroom/', this.dataForm).then(({data: res}) => { |
|||
if (res.code !== 0) { |
|||
this.isAble = false |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
this.visible = false |
|||
this.$emit('refreshDataList') |
|||
} |
|||
}) |
|||
}).catch(() => { |
|||
}) |
|||
}) |
|||
}, 1000, {'leading': true, 'trailing': false}), |
|||
btKeyUpIdCard(e) { |
|||
e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '') |
|||
this.dataForm.idCard = e.target.value |
|||
}, |
|||
btKeyUpMobile(e) { |
|||
e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '') |
|||
this.dataForm.mobile = e.target.value |
|||
}, |
|||
btKeyUpRelationPeopleMobile(e) { |
|||
e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '') |
|||
this.dataForm.relationPeopleMobile = e.target.value |
|||
}, |
|||
btKeyUpUserName(e) { |
|||
e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '') |
|||
this.dataForm.userName = e.target.value |
|||
}, |
|||
btKeyUpRelationPeople(e) { |
|||
e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '') |
|||
this.dataForm.relationPeople = e.target.value |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.item-box { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.item-title { |
|||
height: 40px; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.item-title span { |
|||
display: inline-block; |
|||
width: 5px; |
|||
height: 5px; |
|||
background-color: lightsalmon; |
|||
margin-right: 5px; |
|||
} |
|||
.item-table { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.item-table .table-row { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
} |
|||
.table-row div { |
|||
border: 1px solid lightgray; |
|||
display: flex; |
|||
align-items: center; |
|||
white-space: normal; |
|||
padding: 4px 8px; |
|||
overflow: hidden; |
|||
} |
|||
.table-row .table-col-label { |
|||
width: 15%; |
|||
height: 40px; |
|||
} |
|||
.table-row .table-col-content { |
|||
width: 30%; |
|||
height: 40px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,171 @@ |
|||
<template> |
|||
<el-card shadow="never" class="aui-card--fill"> |
|||
<div class="mod-__epidemicplotcoordinate}"> |
|||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataListSearch()"> |
|||
<el-form-item label="街道" prop="streetCode"> |
|||
<el-select v-model="dataForm.streetCode" placeholder="街道" @change="selectModel($event)" clearable> |
|||
<el-option v-for="item in streetArr" :key="item.deptId" |
|||
:label="item.name" |
|||
:value="item.deptId" > |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<!-- <el-form-item> |
|||
<el-input v-model="dataForm.id" placeholder="id" clearable></el-input> |
|||
</el-form-item> --> |
|||
<el-form-item label="小区/村名称" prop="plot" label-width="90px"> |
|||
<el-input v-model="dataForm.plot" placeholder="小区/村名称" clearable maxlength="49" style="width:200px"></el-input> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button @click="getDataListSearch()">{{ $t('query') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;"> |
|||
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> |
|||
<el-table-column prop="liveAddressName" label="街道名" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="community" label="社区名" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="gridName" label="网格" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="plot" label="小区/村名称" header-align="center" align="center"></el-table-column> |
|||
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" size="small" @click="binding(scope.row)">绑定</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination |
|||
:current-page="page" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="limit" |
|||
:total="total" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
@size-change="pageSizeChangeHandle" |
|||
@current-change="pageCurrentChangeHandle"> |
|||
</el-pagination> |
|||
<!-- 弹窗, 新增 / 修改 --> |
|||
<el-dialog |
|||
title="小区绑定" |
|||
:visible.sync="dialogVisible" |
|||
width="40%"> |
|||
<el-form :inline="true" :model="form" ref="dataRule" :rules="dataRule" @keyup.enter.native="getDataListSearch()"> |
|||
<el-form-item label="小区/村名称" prop="plot" label-width="100px"> |
|||
<!-- <el-input v-model="dataForm.plot" placeholder="小区/村名称" clearable maxlength="49" style="width:200px"></el-input> --> |
|||
<el-select filterable v-model="form.plotName" placeholder="请选择小区/村名称" style="width:190%"> |
|||
<el-option |
|||
v-for="item in datas" |
|||
:key="item.plotName" |
|||
:label="item.plotName" |
|||
:value="item.plotName"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="dialogVisible = false">取 消</el-button> |
|||
<el-button type="primary" @click="submit()">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/demo/epidemicuserinoutrecord/getCoordinateIdIsNullList', |
|||
getDataListIsPage: true |
|||
// deleteURL: '/epidemicplotcoordinate', |
|||
// deleteIsBatch: true |
|||
}, |
|||
dataForm: { |
|||
plot: '', |
|||
streetCode: '' |
|||
}, |
|||
dataRule: { |
|||
mapPlotName: [ |
|||
{ required: true, message: '请选择小区/村名称', trigger: 'blur' } |
|||
] |
|||
}, |
|||
form: { |
|||
plotName: '' |
|||
}, |
|||
submitForm: { |
|||
plot: '', |
|||
community: '', |
|||
liveAddressName: '', |
|||
latitude: null, |
|||
longitude: null, |
|||
coordinateId: null |
|||
}, |
|||
dialogVisible: false, |
|||
streetArr: [], |
|||
datas: [] |
|||
} |
|||
}, |
|||
|
|||
components: { |
|||
}, |
|||
created: function () { |
|||
// 乡镇下拉框赋值 |
|||
this.getDailyTypeArrInfo() |
|||
}, |
|||
methods: { |
|||
binding (row) { |
|||
this.datas = [] |
|||
this.form.plot = '' |
|||
this.submitForm.plot = row.plot |
|||
this.submitForm.community = row.community |
|||
this.submitForm.liveAddressName = row.liveAddressName |
|||
this.$http.get(`epidemicplotcoordinate/getList`).then(({ data: res }) => { |
|||
this.datas = res.data |
|||
}).catch(() => {}) |
|||
this.dialogVisible = true |
|||
}, |
|||
submit () { |
|||
this.$refs['dataRule'].validate((valid) => { |
|||
if (valid) { |
|||
this.datas.forEach(x => { |
|||
if (x.plotName === this.form.plotName) { |
|||
this.submitForm.coordinateId = x.id |
|||
this.submitForm.latitude = x.latitude |
|||
this.submitForm.longitude = x.longitude |
|||
} |
|||
}) |
|||
this.$http.post(`/demo/epidemicuserinoutrecord/plotBinding`, this.submitForm).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
if (res.code === 0) { |
|||
this.$message({ |
|||
message: '绑定成功，已更新 ' + res.data + ' 户居民坐标信息', |
|||
type: 'success' |
|||
}) |
|||
this.dialogVisible = false |
|||
this.getDataList() |
|||
} |
|||
}).catch(() => {}) |
|||
} |
|||
}) |
|||
}, |
|||
// 获取乡镇下拉信息(传参：4代表查“街道”) |
|||
getDailyTypeArrInfo () { |
|||
this.$http.get(`/sys/dept/deptInfo?deptPid=53613e1c5de6ed473467f0159a10b135&tags=street_party`).then(({ data: res }) => { |
|||
this.streetArr = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
// 乡镇取值变化事件 |
|||
selectModel (event) { |
|||
this.streetArr.find((item) => { |
|||
if (item.dictValue === event) { |
|||
this.dataForm.streetCode = item.deptId |
|||
} |
|||
}) |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue