wanggongfeng
3 years ago
4 changed files with 2579 additions and 0 deletions
@ -0,0 +1,858 @@ |
|||
<template> |
|||
<!-- <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')"--> |
|||
<!-- :close-on-click-modal="false"--> |
|||
<!-- :close-on-press-escape="false"--> |
|||
<!-- center>--> |
|||
<div> |
|||
<div class="dialog-h-content scroll-h"> |
|||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" class="form" :disabled="this.isLook"> |
|||
<el-form-item label="所属网格" label-width="150px" prop="gridId"> |
|||
<el-select class="item_width_2" |
|||
v-model.trim="dataForm.gridId" |
|||
placeholder="请选择" |
|||
clearable |
|||
@change="handleChangeGrid" |
|||
> |
|||
<el-option v-for="item in gridList" |
|||
@click.native="gridClick(item)" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item v-if="dataForm.homeId === null" label="小区" label-width="150px" prop="villageName"> |
|||
<el-input class="item_width_2" style="width: 200px; margin-right: 20px" clearable v-model="dataForm.villageName" placeholder="小区"></el-input> |
|||
</el-form-item> |
|||
<el-form-item v-if="dataForm.homeId === null" label="楼号" label-width="150px" prop="buildName"> |
|||
<el-input class="item_width_2" style="width: 200px; margin-right: 20px" clearable v-model="dataForm.buildName" placeholder="楼号"></el-input> |
|||
</el-form-item> |
|||
<el-form-item v-if="dataForm.homeId === null" label="单元号" label-width="150px" prop="unitName"> |
|||
<el-input class="item_width_2" style="width: 200px; margin-right: 20px" clearable v-model="dataForm.unitName" placeholder="单元号"></el-input> |
|||
</el-form-item> |
|||
<el-form-item v-if="dataForm.homeId === null" label="房号" label-width="150px" prop="homeName"> |
|||
<el-input class="item_width_2" style="width: 200px; margin-right: 20px" clearable v-model="dataForm.homeName" placeholder="房号"></el-input> |
|||
</el-form-item> |
|||
<el-form-item v-if="dataForm.homeId !== null" label="所属房屋" label-width="150px" prop="homeId"> |
|||
<el-select |
|||
v-model.trim="dataForm.villageId" |
|||
placeholder="请选择小区" |
|||
size="small" |
|||
clearable |
|||
class="resi-cell-select" |
|||
@change="handleChangeV" |
|||
style="margin-right: 8px; width: 120px" |
|||
> |
|||
<el-option |
|||
v-for="item in villageList" |
|||
@click.native="villageClick(item)" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select |
|||
v-model.trim="dataForm.buildId" |
|||
placeholder="楼号" |
|||
size="small" |
|||
clearable |
|||
:disabled="changeVDisabled" |
|||
class="resi-cell-select resi-cell-select-middle" |
|||
@change="handleChangeB" |
|||
style="margin-right: 8px; width: 120px" |
|||
> |
|||
<el-option |
|||
v-for="item in buildList" |
|||
@click.native="buildClick(item)" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select |
|||
v-model.trim="dataForm.unitId" |
|||
placeholder="单元" |
|||
size="small" |
|||
clearable |
|||
:disabled="changeBDisabled" |
|||
class="resi-cell-select resi-cell-select-middle" |
|||
@change="handleChangeD" |
|||
style="margin-right: 8px; width: 120px" |
|||
> |
|||
<el-option |
|||
v-for="item in unitList" |
|||
@click.native="unitClick(item)" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select |
|||
v-model.trim="dataForm.homeId" |
|||
placeholder="房号" |
|||
size="small" |
|||
clearable |
|||
:disabled="changeDDisabled" |
|||
class="resi-cell-select resi-cell-select-middle" |
|||
@change="handleChangeH" |
|||
style="width: 120px" |
|||
> |
|||
<el-option |
|||
v-for="item in homeList" |
|||
@click.native="homeClick(item)" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="户口性质" label-width="150px" prop="householdType"> |
|||
<el-select class="item_width_2" |
|||
v-model.trim="dataForm.householdType" |
|||
placeholder="请选择" |
|||
clearable |
|||
> |
|||
<el-option v-for="item in household" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="姓名" label-width="150px" prop="name"> |
|||
<el-input class="item_width_2" style="width: 200px; margin-right: 20px" clearable v-model="dataForm.name" placeholder="姓名"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="联系电话" label-width="150px" prop="mobile"> |
|||
<el-input v-model="dataForm.mobile" class="item_width_2" clearable style="width: 200px; margin-right: 20px" placeholder="联系电话"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="证件号" label-width="150px" prop="idCard"> |
|||
<el-input v-model="dataForm.idCard" class="item_width_2" clearable style="width: 200px; margin-right: 20px" placeholder="证件号"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="是否接种" label-width="150px" prop="isVaccination"> |
|||
<el-select class="item_width_2" |
|||
v-model.trim="dataForm.isVaccination" |
|||
placeholder="请选择" |
|||
@change="isVacChange" |
|||
> |
|||
<el-option v-for="item in isVaccinationOption" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item v-if="dataForm.isVaccination === '1'" label="第一次接种时间" label-width="150px" > |
|||
<el-date-picker |
|||
v-model="dataForm.firstVacTime" |
|||
type="date" |
|||
clearable |
|||
placeholder="选择日期时间" |
|||
value-format="yyyy-MM-dd" |
|||
style="width: 200px; margin-right: 20px" |
|||
> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item v-if="dataForm.isVaccination === '1'" label="第一次接种地点" label-width="150px" > |
|||
<el-select class="item_width_2" |
|||
v-model.trim="dataForm.firstVacSite" |
|||
placeholder="请选择" |
|||
clearable |
|||
style="width: 200px; margin-right: 20px" |
|||
> |
|||
<el-option v-for="item in vacSiteOption" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item v-if="dataForm.isVaccination === '1'" label="第二次接种时间" label-width="150px"> |
|||
<el-date-picker |
|||
v-model="dataForm.secondVacTime" |
|||
type="date" |
|||
clearable |
|||
placeholder="选择日期时间" |
|||
value-format="yyyy-MM-dd" |
|||
style="width: 200px; margin-right: 20px" |
|||
> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item v-if="dataForm.isVaccination === '1'" label="第二次接种地点" label-width="150px"> |
|||
<el-select class="item_width_2" |
|||
v-model.trim="dataForm.secondVacSite" |
|||
placeholder="请选择" |
|||
clearable |
|||
style="width: 200px; margin-right: 20px" |
|||
> |
|||
<el-option v-for="item in vacSiteOption" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item v-if="dataForm.isVaccination === '1'" label="第三次接种时间" label-width="150px"> |
|||
<el-date-picker |
|||
v-model="dataForm.thirdVacTime" |
|||
type="date" |
|||
clearable |
|||
placeholder="选择日期时间" |
|||
value-format="yyyy-MM-dd" |
|||
style="width: 200px; margin-right: 20px" |
|||
> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item v-if="dataForm.isVaccination === '1'" label="第三次接种地点" label-width="150px"> |
|||
<el-select class="item_width_2" |
|||
v-model.trim="dataForm.thirdVacSite" |
|||
placeholder="请选择" |
|||
clearable |
|||
style="width: 200px; margin-right: 20px" |
|||
> |
|||
<el-option v-for="item in vacSiteOption" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item v-if="dataForm.isVaccination === '0'" label="原因" label-width="150px"> |
|||
<el-select class="item_width_2" |
|||
v-model.trim="dataForm.reason" |
|||
placeholder="请选择" |
|||
clearable |
|||
> |
|||
<el-option v-for="item in reasonOption" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="备注" label-width="150px"> |
|||
<el-input |
|||
class="item_width_1" |
|||
type="textarea" |
|||
maxlength="500" |
|||
show-word-limit |
|||
:rows="3" |
|||
placeholder="请输入备注，不超过500字" |
|||
v-model="dataForm.note" |
|||
></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="div_btn resi-btns"> |
|||
<!-- <template slot="footer">--> |
|||
<el-button @click=handleCancle>{{ $t('cancel') }}</el-button> |
|||
<el-button v-if="!this.isLook" type="primary" @click="dataFormSubmitHandle()" :disabled="btnDisable">{{ $t('confirm') }}</el-button> |
|||
<!-- </template>--> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- </el-dialog>--> |
|||
</template> |
|||
|
|||
<script> |
|||
import debounce from 'lodash/debounce' |
|||
import { requestPost } from '@/js/dai/request' |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
import { Loading } from "element-ui"; |
|||
import formVltHelper from "dai-js/tools/formVltHelper"; |
|||
let loading; // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
formType: "add", |
|||
visible: false, |
|||
btnDisable: false, |
|||
gridList: [], |
|||
villageList: [], |
|||
buildList: [], |
|||
unitList: [], |
|||
homeList: [], |
|||
household: [ |
|||
{ value: '0', label: '户籍' }, |
|||
{ value: '1', label: '外来' }, |
|||
], |
|||
isVaccinationOption: [ |
|||
{ value: '0', label: '否' }, |
|||
{ value: '1', label: '是' }, |
|||
], |
|||
vacSiteOption: [ |
|||
{ value: '本街道内接种', label: '本街道内接种' }, |
|||
{ value: '区内其他街道接种', label: '区内其他街道接种' }, |
|||
{ value: '区外其他地区接种', label: '区外其他地区接种' }, |
|||
], |
|||
reasonOption: [ |
|||
{ value: '禁忌症', label: '禁忌症' }, |
|||
{ value: '拒绝接种', label: '拒绝接种' }, |
|||
{ value: '其他原因', label: '其他原因' }, |
|||
], |
|||
dataForm: { |
|||
id: '', |
|||
customerId: '', |
|||
gridId: '', |
|||
gridName: '', |
|||
agencyId: '', |
|||
pids: '', |
|||
villageId: '', |
|||
villageName: '', |
|||
buildId: '', |
|||
buildName: '', |
|||
unitId: '', |
|||
unitName: '', |
|||
homeId: '', |
|||
homeName: '', |
|||
householdType: '', |
|||
name: '', |
|||
mobile: '', |
|||
idCard: '', |
|||
isVaccination: '1', |
|||
firstVacTime: '', |
|||
firstVacSite: '', |
|||
secondVacTime: '', |
|||
secondVacSite: '', |
|||
thirdVacTime: '', |
|||
thirdVacSite: '', |
|||
reason: '', |
|||
note: '', |
|||
checkState: '0', |
|||
checkReason: '', |
|||
}, |
|||
isLook: false |
|||
} |
|||
}, |
|||
computed: { |
|||
changeVDisabled() { |
|||
return !this.dataForm.villageId |
|||
}, |
|||
changeBDisabled() { |
|||
return !this.dataForm.buildId |
|||
}, |
|||
changeDDisabled() { |
|||
return !this.dataForm.unitId |
|||
}, |
|||
dataRule () { |
|||
return { |
|||
customerId: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
gridId: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
gridName: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
agencyId: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
pids: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
villageId: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
villageName: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
buildId: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
buildName: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
unitId: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
unitName: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
homeId: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
homeName: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
householdType: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
name: [ |
|||
{ 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' } |
|||
], |
|||
isVaccination: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
firstVacTime: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
firstVacSite: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
secondVacTime: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
secondVacSite: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
thirdVacTime: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
thirdVacSite: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
reason: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
note: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
async mounted () { |
|||
const { user } = this.$store.state |
|||
this.agencyId = user.agencyId |
|||
//获取网格下拉框数据 |
|||
await this.loadGrid() |
|||
this.getVillageList() |
|||
this.getBuildList() |
|||
this.getUniList() |
|||
this.getHouseList() |
|||
}, |
|||
methods: { |
|||
async init (row,isLook) { |
|||
if(isLook){ |
|||
this.isLook = true |
|||
}else{ |
|||
this.isLook = false |
|||
} |
|||
if (row) { |
|||
this.dataForm.id = row.id |
|||
} |
|||
const { user } = this.$store.state |
|||
this.agencyId = user.agencyId |
|||
this.visible = true; |
|||
this.$nextTick(() => { |
|||
this.$refs['dataForm'].resetFields() |
|||
if (this.dataForm.id !== '') { |
|||
this.getInfo() |
|||
}else { |
|||
this.dataForm = { |
|||
id: '', |
|||
customerId: '', |
|||
gridId: '', |
|||
gridName: '', |
|||
agencyId: '', |
|||
pids: '', |
|||
villageId: '', |
|||
villageName: '', |
|||
buildId: '', |
|||
buildName: '', |
|||
unitId: '', |
|||
unitName: '', |
|||
homeId: '', |
|||
homeName: '', |
|||
householdType: '', |
|||
name: '', |
|||
mobile: '', |
|||
idCard: '', |
|||
isVaccination: '1', |
|||
firstVacTime: '', |
|||
firstVacSite: '', |
|||
secondVacTime: '', |
|||
secondVacSite: '', |
|||
thirdVacTime: '', |
|||
thirdVacSite: '', |
|||
reason: '', |
|||
note: '', |
|||
checkState: '0', |
|||
checkReason: '' |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
async initForm(type, row) { |
|||
// this.$refs.ref_form.resetFields(); |
|||
this.formType = type; |
|||
console.log(row); |
|||
if (row) { |
|||
// this.fmData = { ...this.fmData, ...row }; |
|||
await this.getInfo(row.id); |
|||
this.getValiheList(); |
|||
this.getBuildList(); |
|||
this.getUniList(); |
|||
this.getHouseList(); |
|||
} |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading() { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: "正在加载……", // 加载中需要显示的文字 |
|||
background: "rgba(0,0,0,.7)", // 背景颜色 |
|||
}); |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading() { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close(); |
|||
} |
|||
}, |
|||
// 获取信息 |
|||
async getInfo () { |
|||
this.$http.get(`/epmetuser/icVaccinePrarmeter/${this.dataForm.id}`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
;return this.$message.error(res.msg); |
|||
} |
|||
this.dataForm = { |
|||
...this.dataForm, |
|||
...res.data |
|||
} |
|||
this.getVillageList() |
|||
this.getBuildList() |
|||
this.getUniList() |
|||
this.getHouseList() |
|||
}).catch(() => {}) |
|||
}, |
|||
async loadGrid () { |
|||
const url = "/gov/org/customergrid/gridoption" |
|||
let params = { |
|||
agencyId: this.agencyId, |
|||
purpose: 'addorupdate' |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.gridList = data |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
getVillageList() { |
|||
const { user } = this.$store.state |
|||
this.$http |
|||
.post('/gov/org/icneighborhood/neighborhoodoption', { |
|||
gridId: this.dataForm.gridId, |
|||
agencyId: '' |
|||
// agencyId: user.agencyId |
|||
}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
console.log('获取查询小区成功', res.data) |
|||
this.villageList = res.data |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
getBuildList() { |
|||
this.$http |
|||
.post('/gov/org/icbuilding/buildingoption', { |
|||
neighborHoodId: this.dataForm.villageId |
|||
}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
console.log('获取查询小区成功', res.data) |
|||
this.buildList = res.data |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
getUniList() { |
|||
this.$http |
|||
.post('/gov/org/icbuildingunit/unitoption', { |
|||
buildingId: this.dataForm.buildId |
|||
}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
console.log('获取查询单元成功', res.data) |
|||
this.unitList = res.data |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
getHouseList() { |
|||
this.$http |
|||
.post('/gov/org/ichouse/houseoption', { unitId: this.dataForm.unitId }) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
console.log('获取查询房屋成功', res.data) |
|||
this.homeList = res.data |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
handleChangeGrid(val) { |
|||
this.dataForm.villageId = '' |
|||
this.dataForm.buildId = '' |
|||
this.dataForm.unitId = '' |
|||
this.dataForm.homeId = '' |
|||
this.dataForm.gridName = '' |
|||
this.dataForm.agencyId = '' |
|||
this.dataForm.villageName = '' |
|||
this.dataForm.buildName = '' |
|||
this.dataForm.unitName = '' |
|||
this.dataForm.homeName = '' |
|||
this.getVillageList() |
|||
}, |
|||
handleChangeV(val) { |
|||
console.log('val', val) |
|||
this.dataForm.buildId = '' |
|||
this.dataForm.unitId = '' |
|||
this.dataForm.homeId = '' |
|||
this.dataForm.villageName = '' |
|||
this.dataForm.buildName = '' |
|||
this.dataForm.unitName = '' |
|||
this.dataForm.homeName = '' |
|||
this.getBuildList() |
|||
}, |
|||
handleChangeB(val) { |
|||
console.log('val', val) |
|||
this.dataForm.unitId = '' |
|||
this.dataForm.homeId = '' |
|||
this.dataForm.buildName = '' |
|||
this.dataForm.unitName = '' |
|||
this.dataForm.homeName = '' |
|||
this.getUniList() |
|||
}, |
|||
handleChangeD(val) { |
|||
console.log('val', val) |
|||
this.dataForm.homeId = '' |
|||
this.dataForm.unitName = '' |
|||
this.dataForm.homeName = '' |
|||
this.getHouseList() |
|||
}, |
|||
handleChangeH(val) { |
|||
console.log('val', val) |
|||
this.dataForm.homeName = '' |
|||
}, |
|||
gridClick(data) { |
|||
this.dataForm.gridName = data.label; |
|||
this.dataForm.agencyId = data.pid; |
|||
}, |
|||
villageClick(data) { |
|||
this.dataForm.villageName = data.label; |
|||
}, |
|||
buildClick(data) { |
|||
this.dataForm.buildName = data.label; |
|||
}, |
|||
unitClick(data) { |
|||
this.dataForm.unitName = data.label; |
|||
}, |
|||
homeClick(data) { |
|||
this.dataForm.homeName = data.label; |
|||
}, |
|||
isVacChange(val) { |
|||
if (val === '0') { |
|||
this.dataForm.firstVacTime = ''; |
|||
this.dataForm.firstVacSite = ''; |
|||
this.dataForm.secondVacTime = ''; |
|||
this.dataForm.secondVacSite = ''; |
|||
this.dataForm.thirdVacTime = ''; |
|||
this.dataForm.thirdVacSite = ''; |
|||
} |
|||
}, |
|||
resetData () { |
|||
this.dataForm = { |
|||
id: '', |
|||
customerId: '', |
|||
gridId: '', |
|||
gridName: '', |
|||
agencyId: '', |
|||
pids: '', |
|||
villageId: '', |
|||
villageName: '', |
|||
buildId: '', |
|||
buildName: '', |
|||
unitId: '', |
|||
unitName: '', |
|||
homeId: '', |
|||
homeName: '', |
|||
householdType: '', |
|||
name: '', |
|||
mobile: '', |
|||
idCard: '', |
|||
isVaccination: '1', |
|||
firstVacTime: '', |
|||
firstVacSite: '', |
|||
secondVacTime: '', |
|||
secondVacSite: '', |
|||
thirdVacTime: '', |
|||
thirdVacSite: '', |
|||
reason: '', |
|||
note: '', |
|||
checkState: '0', |
|||
checkReason: '' |
|||
} |
|||
}, |
|||
closeDialog() { |
|||
this.$refs[dataForm].resetFields(); |
|||
// this.formData = {} |
|||
// this.resetData() |
|||
}, |
|||
handleCancle () { |
|||
this.resetData() |
|||
this.$emit('dialogCancle') |
|||
|
|||
}, |
|||
// 表单提交 |
|||
async dataFormSubmitHandle() { |
|||
this.btnDisable = true; |
|||
setTimeout(() => { |
|||
this.btnDisable = false; |
|||
}, 10000); |
|||
//验证手机号码 |
|||
const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; |
|||
if (regPhone.test(this.dataForm.mobile) === false) { |
|||
this.btnDisable = false |
|||
this.$message({ |
|||
type: 'warning', |
|||
message: '请输入正确的手机号码' |
|||
}) |
|||
return false; |
|||
} |
|||
|
|||
await this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
this.submit(); |
|||
}) |
|||
}, |
|||
async submit() { |
|||
let url = ""; |
|||
if (!this.dataForm.id ) { |
|||
url = "/epmetuser/icVaccinePrarmeter/save"; |
|||
} else if (this.dataForm.id) { |
|||
url = "/epmetuser/icVaccinePrarmeter/update"; |
|||
} else { |
|||
return; |
|||
} |
|||
const { data, code, msg } = await requestPost(url, this.dataForm); |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: "success", |
|||
message: "操作成功", |
|||
}); |
|||
this.$emit('dialogOk') |
|||
this.resetData() |
|||
this.btnDisable = false |
|||
} else { |
|||
this.btnDisable = false; |
|||
this.$message.error(msg); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import '@/assets/scss/buttonstyle.scss'; |
|||
@import "@/assets/scss/modules/management/epidemic.scss"; |
|||
.resi-container .resi-card-table { |
|||
::v-deep .el-table th { |
|||
color: #fff; |
|||
background-color: rgba(33, 149, 254, 1); |
|||
// border-right: 1px solid rgba(33, 149, 254, 1); |
|||
} |
|||
} |
|||
.resi-table { |
|||
::v-deep .el-button--text { |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
.resi-card-table { |
|||
margin-top: 20px; |
|||
} |
|||
.resi-row-btn { |
|||
margin-bottom: 13px; |
|||
.upload-btn { |
|||
display: inline-block; |
|||
margin: 0 10px; |
|||
} |
|||
} |
|||
|
|||
.resi-btns { |
|||
margin-top: 20px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.resi-container .resi-card { |
|||
position: relative; |
|||
overflow: visible; |
|||
} |
|||
|
|||
.demo-form-inline { |
|||
// display: flex; |
|||
// align-items: center; |
|||
// margin-bottom: 20px; |
|||
|
|||
.resi-cell-label { |
|||
flex-shrink: 0; |
|||
min-width: 0; |
|||
box-sizing: border-box; |
|||
margin-right: 15px; |
|||
// text-align: right; |
|||
// line-height: 32; |
|||
} |
|||
.resi-cell-label1 { |
|||
width: max-content; |
|||
} |
|||
.resi-cell-value-radio { |
|||
display: flex; |
|||
align-items: center; |
|||
min-height: 32px; |
|||
} |
|||
.resi-cell-input { |
|||
width: 200px; |
|||
} |
|||
.resi-cell--daterange { |
|||
max-width: 260px; |
|||
} |
|||
.resi-cell-select { |
|||
width: 200px; |
|||
box-sizing: border-box; |
|||
margin-right: 10px; |
|||
&-middle { |
|||
width: 120px; |
|||
} |
|||
&-small { |
|||
width: 88px; |
|||
} |
|||
} |
|||
.resi-cell-select:last-child { |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
|
|||
.mt10 { |
|||
margin-top: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,457 @@ |
|||
<template> |
|||
<div> |
|||
<div v-if="!formShow" class="dialog-h-content scroll-h"> |
|||
<el-form ref="icvaccineprarmeter_check" |
|||
:inline="false" |
|||
:model="dataForm" |
|||
:rules="dataRule" |
|||
:disabled="formType === 'detail'" |
|||
class="form"> |
|||
|
|||
<el-form-item label="网格名称" |
|||
prop="gridName" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
placeholder="请输入" |
|||
v-model="dataForm.gridName" |
|||
disabled> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="所属小区名称" |
|||
prop="villageName" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
placeholder="请输入" |
|||
v-model="dataForm.villageName" |
|||
disabled> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="所属楼宇名称" |
|||
prop="buildName" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
placeholder="请输入" |
|||
v-model="dataForm.buildName" |
|||
disabled> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="单元名" |
|||
prop="unitName" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
placeholder="请输入" |
|||
v-model="dataForm.unitName" |
|||
disabled> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="房间名" |
|||
prop="homeName" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
placeholder="请输入" |
|||
v-model="dataForm.homeName" |
|||
disabled> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="户口性质" |
|||
prop="householdType" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-select class="item_width_1" |
|||
v-model.trim="dataForm.householdType" |
|||
placeholder="请选择" |
|||
disabled |
|||
> |
|||
<el-option v-for="item in household" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="姓名" |
|||
prop="name" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
placeholder="请输入" |
|||
v-model="dataForm.name" |
|||
disabled> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="联系电话" |
|||
prop="mobile" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
placeholder="请输入" |
|||
v-model="dataForm.mobile" |
|||
disabled> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="身份证号" |
|||
prop="idCard" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
placeholder="请输入" |
|||
v-model="dataForm.idCard" |
|||
disabled> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="是否接种" |
|||
prop="isVaccination" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-select class="item_width_1" |
|||
v-model.trim="dataForm.isVaccination" |
|||
placeholder="请选择" |
|||
@change="isVacChange" |
|||
disabled |
|||
> |
|||
<el-option v-for="item in isVaccinationOption" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="第一次接种时间" |
|||
prop="firstVacTime" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
placeholder="请输入" |
|||
v-model="dataForm.firstVacTime" |
|||
disabled> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="第一次接种地点" |
|||
prop="firstVacSite" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
placeholder="请输入" |
|||
v-model="dataForm.firstVacSite" |
|||
disabled> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="第二次接种时间" |
|||
prop="secondVacTime" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
placeholder="请输入" |
|||
v-model="dataForm.secondVacTime" |
|||
disabled> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="第二次接种地点" |
|||
prop="secondVacSite" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
placeholder="请输入" |
|||
v-model="dataForm.secondVacSite" |
|||
disabled> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="第三次接种时间" |
|||
prop="thirdVacTime" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
placeholder="请输入" |
|||
v-model="dataForm.thirdVacTime" |
|||
disabled> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="第三次接种地点" |
|||
prop="thirdVacSite" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
placeholder="请输入" |
|||
v-model="dataForm.thirdVacSite" |
|||
disabled> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="原因" |
|||
prop="reason" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
placeholder="请输入" |
|||
v-model="dataForm.reason" |
|||
disabled> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="备注" |
|||
prop="note" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
placeholder="请输入" |
|||
v-model="dataForm.note" |
|||
disabled> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div v-if="!formShow" class="div_btn"> |
|||
<el-button size="small" |
|||
@click="handleCancle">取 消</el-button> |
|||
<el-button size="small" |
|||
v-if="formType != 'detail'" |
|||
type="primary" |
|||
:disabled="btnDisable" |
|||
@click="showAddHouse">通过</el-button> |
|||
<el-button size="small" |
|||
v-if="formType != 'detail'" |
|||
type="primary" |
|||
:disabled="btnDisable" |
|||
@click="checkHandle('1')">不通过</el-button> |
|||
</div> |
|||
|
|||
|
|||
<room-form |
|||
v-if="formShow" |
|||
ref="ref_form" |
|||
@dialogCancle="addFormCancle" |
|||
@dialogOk="addFormOk" |
|||
></room-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost, requestGet } from '@/js/dai/request' |
|||
import roomForm from "./roomForm"; |
|||
|
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
formType: 'add', //表单操作类型 add新增，edit编辑，detail详情 |
|||
btnDisable: false, |
|||
|
|||
dataForm: { |
|||
id: '', |
|||
gridId: '', |
|||
gridName: '', |
|||
agencyId: '', |
|||
pids: '', |
|||
villageId: '', |
|||
villageName: '', |
|||
buildId: '', |
|||
buildName: '', |
|||
unitId: '', |
|||
unitName: '', |
|||
homeId: '', |
|||
homeName: '', |
|||
householdType: '', |
|||
name: '', |
|||
mobile: '', |
|||
idCard: '', |
|||
isVaccination: '', |
|||
firstVacTime: '', |
|||
firstVacSite: '', |
|||
secondVacTime: '', |
|||
secondVacSite: '', |
|||
thirdVacTime: '', |
|||
thirdVacSite: '', |
|||
reason: '', |
|||
note: '', |
|||
checkState: '', |
|||
checkReason: '' |
|||
}, |
|||
isAdd: '', |
|||
unitId: '', |
|||
household: [ |
|||
{ value: '0', label: '户籍' }, |
|||
{ value: '1', label: '外来' }, |
|||
], |
|||
isVaccinationOption: [ |
|||
{ value: '0', label: '否' }, |
|||
{ value: '1', label: '是' }, |
|||
], |
|||
// 审核 |
|||
formShow: false, |
|||
agencyObj: {} |
|||
// 审核 end |
|||
} |
|||
}, |
|||
components: { |
|||
roomForm |
|||
}, |
|||
mounted () { |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
// 房屋 s |
|||
diaClose() { |
|||
this.formShow = false; |
|||
}, |
|||
addFormCancle() { |
|||
this.formShow = false; |
|||
}, |
|||
addFormOk() { |
|||
this.formShow = false; |
|||
this.checkHandle('2') |
|||
// this.loadTable(); |
|||
}, |
|||
// 房屋 end |
|||
async initForm (type, id, isAdd, unitId, data) { |
|||
console.log('isAdd>>>>>>>>>>>', isAdd) |
|||
// this.$refs.icvaccineprarmeter_check.resetFields(); |
|||
this.dataForm.id = id |
|||
this.isAdd = isAdd |
|||
this.unitId = unitId |
|||
this.agencyObj = data |
|||
if (this.dataForm.id); { |
|||
this.getInfo() |
|||
} |
|||
}, |
|||
|
|||
// 获取信息 |
|||
getInfo () { |
|||
this.$http.get(`/epmetuser/icVaccinePrarmeter/${this.dataForm.id}`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
;return this.$message.error(res.msg); |
|||
} |
|||
this.dataForm = { |
|||
...this.dataForm, |
|||
...res.data |
|||
} |
|||
}).catch(() => {}) |
|||
}, |
|||
// 通过弹出房屋 |
|||
showAddHouse () { |
|||
console.log('111111isAdd', this.isAdd) |
|||
if (this.isAdd === '1') { |
|||
console.log('111111') |
|||
this.formShow = true; |
|||
this.$nextTick(() => { |
|||
let agencyObj = { |
|||
neighborHoodId: this.agencyObj.villageId, |
|||
id: this.agencyObj.buildId, |
|||
neighborHoodName: this.agencyObj.villageName, |
|||
buildingUnitId: this.agencyObj.unitId, |
|||
doorName: this.agencyObj.homeName |
|||
} |
|||
this.$refs.ref_form.initForm("add", null, agencyObj); |
|||
}); |
|||
// 打开房屋新增页面 |
|||
// todo |
|||
// this.addHouseShow = true |
|||
// this.$nextTick(() => { |
|||
// this.$refs.icvaccineprarmeter_check.initForm('add', null, this.dataForm.id) |
|||
// }) |
|||
} else { |
|||
this.checkHandle('2') |
|||
} |
|||
}, |
|||
// 审核提交方法 |
|||
checkHandle (type) { |
|||
const params = { |
|||
id: this.dataForm.id, |
|||
checkState: type, // 0-未审核 1-未通过 2-已通过 |
|||
checkReason: '', |
|||
unitId: this.unitId || '', |
|||
homeName: this.agencyObj.homeName || '', |
|||
villageId: this.agencyObj.villageId || '', |
|||
buildId: this.agencyObj.buildId || '', |
|||
unitId: this.agencyObj.unitId || '', |
|||
homeId: this.agencyObj.homeId || '' |
|||
} |
|||
if (type == '1') { |
|||
this.$prompt('请输入不通过的原因', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
}).then(({ value }) => { |
|||
params.checkReason = value |
|||
this.$http.post('/epmetuser/icVaccinePrarmeter/vaccineCheck', params).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
console.log('审核不通过') |
|||
this.$emit('dialogOk') |
|||
// this.visible = false; |
|||
// this.$emit('refreshDataList') |
|||
}).catch(() => {}) |
|||
}).catch(() => { |
|||
// 取消输入原因 |
|||
}) |
|||
} else { |
|||
this.$http.post('/epmetuser/icVaccinePrarmeter/vaccineCheck', params).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.$emit('dialogOk') |
|||
// this.visible = false; |
|||
// this.$emit('refreshDataList') |
|||
}).catch(() => {}) |
|||
} |
|||
}, |
|||
handleCancle () { |
|||
this.$emit('dialogCancle') |
|||
this.formShow = false; |
|||
}, |
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
|
|||
}, |
|||
props: {} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/modules/visual/communityManageForm.scss"; |
|||
</style> |
|||
@ -0,0 +1,803 @@ |
|||
<template> |
|||
<div class="resi-container"> |
|||
<el-card ref="searchCard" class="search-card"> |
|||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> |
|||
<div> |
|||
<el-form-item prop="gridId" label="所属网格" label-width="70px"> |
|||
<div class="resi-cell-value"> |
|||
<el-select |
|||
v-model.trim="dataForm.gridId" |
|||
placeholder="请选择网格" |
|||
size="small" |
|||
clearable |
|||
class="resi-cell-select" |
|||
@change="handleChangeGrid" |
|||
> |
|||
<el-option |
|||
v-for="item in optionsG" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</el-form-item> |
|||
<el-form-item label="所属房屋"> |
|||
<div class="resi-cell-value"> |
|||
<div class="resi-cell-col"> |
|||
<el-form-item prop="villageId"> |
|||
<el-select |
|||
v-model.trim="dataForm.villageId" |
|||
placeholder="请选择小区" |
|||
size="small" |
|||
clearable |
|||
class="resi-cell-select" |
|||
@change="handleChangeV" |
|||
> |
|||
<el-option |
|||
v-for="item in optionsV" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="buildId"> |
|||
<el-select |
|||
v-model.trim="dataForm.buildId" |
|||
placeholder="楼号" |
|||
size="small" |
|||
clearable |
|||
:disabled="changeVDisabled" |
|||
class="resi-cell-select resi-cell-select-middle" |
|||
@change="handleChangeB" |
|||
> |
|||
<el-option |
|||
v-for="item in optionsB" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="unitId"> |
|||
<el-select |
|||
v-model.trim="dataForm.unitId" |
|||
placeholder="单元" |
|||
size="small" |
|||
clearable |
|||
:disabled="changeBDisabled" |
|||
class="resi-cell-select resi-cell-select-middle" |
|||
@change="handleChangeD" |
|||
> |
|||
<el-option |
|||
v-for="item in optionsD" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="homeId"> |
|||
<el-select |
|||
v-model.trim="dataForm.homeId" |
|||
placeholder="房号" |
|||
size="small" |
|||
clearable |
|||
:disabled="changeDDisabled" |
|||
class="resi-cell-select resi-cell-select-middle" |
|||
> |
|||
<el-option |
|||
v-for="item in optionsH" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</div> |
|||
</div> |
|||
</el-form-item> |
|||
</div> |
|||
<div> |
|||
<el-form-item label="姓名" prop="name" label-width="70px"> |
|||
<el-input |
|||
v-model="dataForm.name" |
|||
placeholder="姓名" |
|||
clearable |
|||
></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="证件号" prop="idCard"> |
|||
<el-input |
|||
v-model="dataForm.idCard" |
|||
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 label="是否接种" prop="isVaccination"> |
|||
<el-select v-model="dataForm.isVaccination" placeholder="是否接种" clearable> |
|||
<el-option v-for="item in isVaccinationArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button class="diy-button--search" size="small" @click="getDataList()">{{ $t('query') }}</el-button> |
|||
<el-button class="diy-button--reset" size="small" @click="resetForm()">重置</el-button |
|||
> |
|||
</el-form-item> |
|||
</div> |
|||
</el-form> |
|||
</el-card> |
|||
<el-card class="resi-card-table"> |
|||
<div class="resi-row-btn"> |
|||
|
|||
<el-button class="diy-button--add" type="primary" size="small" @click="handleAdd">{{ $t('add') }}</el-button> |
|||
<el-button class="diy-button--export" size="small" @click="handleExportModule()">下载模板</el-button> |
|||
<el-upload |
|||
ref="upload" |
|||
class="upload-btn" |
|||
:multiple="false" |
|||
:show-file-list="false" |
|||
:before-upload=" |
|||
(file) => { |
|||
beforeUpload(file); |
|||
} |
|||
" |
|||
action="" |
|||
accept=".xls,.xlsx" |
|||
:http-request=" |
|||
() => { |
|||
uploadFile(); |
|||
} |
|||
" |
|||
> |
|||
<el-button |
|||
size="small" |
|||
class="diy-button--delete">导入</el-button> |
|||
</el-upload> |
|||
<el-button class="diy-button--reset" size="small" @click="handleExport">导出</el-button> |
|||
</div> |
|||
<el-table v-loading="dataListLoading" |
|||
:data="dataList" |
|||
border |
|||
class="resi-table" |
|||
@selection-change="dataListSelectionChangeHandle" |
|||
style="width: 100%;" |
|||
:height="maxTableHeight"> |
|||
<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="gridName" label="网格名称" header-align="center" align="center" width="120" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="villageName" label="所属小区" header-align="center" align="center" width="130" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="buildName" label="所属楼宇" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="unitName" label="单元" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="homeName" label="房间名" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="householdTypeName" label="户口性质" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="name" label="姓名" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="mobile" label="联系电话" header-align="center" align="center" width="120" show-overflow-tooltip></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="isVaccinationName" label="是否接种" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="firstVacTime" label="第一次接种时间" header-align="center" align="center" width="110" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="firstVacSite" label="第一次接种地点" header-align="center" align="center" width="110" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="secondVacTime" label="第二次接种时间" header-align="center" align="center" width="110" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="secondVacSite" label="第二次接种地点" header-align="center" align="center" width="110" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="thirdVacTime" label="第三次接种时间" header-align="center" align="center" width="110" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="thirdVacSite" label="第三次接种地点" header-align="center" align="center" width="110" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="reason" label="原因" header-align="center" align="center" width="110" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="note" label="备注" header-align="center" align="center" width="110" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="checkStateName" label="审核状态" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="checkReason" label="审核理由" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column> |
|||
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="170"> |
|||
<template slot-scope="scope"> |
|||
<el-button v-if="scope.row.checkState === '0'" type="text" size="small" class="div-table-button--edit" @click="handleEdit(scope.$index)">{{ $t('update') }}</el-button> |
|||
<el-button v-if="scope.row.checkState !== '2'"type="text" size="small" class="div-table-button--delete--noline" @click="handleDelete(scope.row.id)">{{ $t('delete') }}</el-button> |
|||
<el-button v-if="scope.row.checkState === '0'" type="text" class="div-table-button--detail" size="small" @click="handleWatch(scope.row)">审核</el-button> |
|||
<el-button type="text" class="div-table-button--detail" size="small" @click="handleLook(scope.$index)">查看</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>--> |
|||
<!-- <icvaccineprarmeter-check v-if="checkVisible" ref="checkPage" @refreshDataList="getDataList"></icvaccineprarmeter-check>--> |
|||
</el-card> |
|||
|
|||
<el-dialog :visible.sync="checkVisible" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="formTitle" |
|||
width="850px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="addDiaClose"> |
|||
<add-or-update ref="add_parameter" |
|||
@dialogCancle="addDiaClose" |
|||
@dialogOk="addFormOk"> |
|||
</add-or-update> |
|||
</el-dialog> |
|||
<!-- 审核 --> |
|||
<el-dialog |
|||
:visible.sync="formShow" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="formTitle_shenhe" |
|||
width="900px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="diaClose" |
|||
> |
|||
<icvaccineprarmeter-check |
|||
ref="icvaccineprarmeter_check" |
|||
@dialogCancle="addFormCancle" |
|||
@dialogOk="addFormOk_shenhe" |
|||
></icvaccineprarmeter-check> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import AddOrUpdate from './icvaccineprarmeter-add-or-update' |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
import { requestPost , requestGet} from "@/js/dai/request"; |
|||
import IcvaccineprarmeterCheck from './icvaccineprarmeter-check' |
|||
import {mapGetters} from "vuex"; |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/epmetuser/icVaccinePrarmeter/page', |
|||
getDataListIsPage: true, |
|||
deleteURL: '/epmetuser/icVaccinePrarmeter', |
|||
deleteIsBatch: true |
|||
}, |
|||
dataForm: { |
|||
id: '', |
|||
gridId: '', |
|||
villageId: '', |
|||
buildId: '', |
|||
unitId: '', |
|||
homeId: '', |
|||
name: '', |
|||
idCard: '', |
|||
mobile: '', |
|||
isVaccination: '' |
|||
}, |
|||
isVaccinationArr: [ |
|||
{ dictValue: '0', dictName: '否' }, |
|||
{ dictValue: '1', dictName: '是' } |
|||
], |
|||
optionsV: [], |
|||
optionsB: [], |
|||
optionsH: [], |
|||
optionsD: [], |
|||
optionsG: [], |
|||
checkVisible: false, |
|||
formTitle:"新增", |
|||
// 审核 |
|||
formShow: false, |
|||
formTitle_shenhe: "审核", |
|||
// 审核 end |
|||
} |
|||
}, |
|||
components: { |
|||
AddOrUpdate, |
|||
IcvaccineprarmeterCheck |
|||
}, |
|||
computed:{ |
|||
maxTableHeight() { |
|||
return this.$store.state.inIframe |
|||
? this.clientHeight - 360 + this.iframeHeigh |
|||
: this.clientHeight - 360; |
|||
}, |
|||
...mapGetters(["clientHeight", "iframeHeight"]), |
|||
changeVDisabled() { |
|||
return !this.dataForm.villageId |
|||
}, |
|||
changeBDisabled() { |
|||
return !this.dataForm.buildId |
|||
}, |
|||
changeDDisabled() { |
|||
return !this.dataForm.unitId |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getGridList() |
|||
this.getValiheList() |
|||
}, |
|||
methods:{ |
|||
// 审核 s |
|||
diaClose() { |
|||
// this.$refs.icvaccineprarmeter_check.resetData(); |
|||
this.formShow = false; |
|||
}, |
|||
addFormCancle() { |
|||
this.formShow = false; |
|||
}, |
|||
addFormOk_shenhe() { |
|||
this.formShow = false; |
|||
this.getDataList(); |
|||
}, |
|||
// 审核 end |
|||
//新增 |
|||
handleAdd() { |
|||
this.formTitle = "新增"; |
|||
this.checkVisible = true; |
|||
this.$nextTick(() => { |
|||
this.$refs.add_parameter.init(); |
|||
}); |
|||
// await this.$refs.ref_form_add.init(); |
|||
}, |
|||
async handleEdit(rowIndex) { |
|||
this.formTitle = "修改"; |
|||
this.checkVisible = true; |
|||
await nextTick(); |
|||
this.$refs.add_parameter.init(this.dataList[rowIndex]); |
|||
}, |
|||
async handleDelete(id) { |
|||
this.$confirm("确认删除?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
this.deleteNat(id); |
|||
}) |
|||
.catch((err) => { |
|||
if (err == "cancel") { |
|||
} |
|||
}); |
|||
}, |
|||
async deleteNat(id) { |
|||
const url = "/epmetuser/icVaccinePrarmeter/delete"; |
|||
let params = [id]; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: "success", |
|||
message: "删除成功", |
|||
}); |
|||
this.getDataList(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
// 审核 |
|||
async handleWatch(row) { |
|||
await nextTick(); |
|||
const url = "/gov/org/ichouse/checkHomeInfo"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
gridId: row.gridId, |
|||
gridName: row.gridName, |
|||
villageName: row.villageName, |
|||
buildName: row.buildName, |
|||
unitName: row.unitName, |
|||
homeName: row.homeName, |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
console.log("data----de", data); |
|||
if(data.code === '1'){ |
|||
this.$message.success(data.msg); |
|||
}else{ |
|||
// 打开审核页面 |
|||
// this.checkVisible = true |
|||
// this.$nextTick(() => { |
|||
// this.$refs.checkPage.dataForm.id = row.id |
|||
// // 是否新增房屋：0：否；1：是 |
|||
// this.$refs.checkPage.isAdd = data.isAdd |
|||
// // 单元ID |
|||
// this.$refs.checkPage.unitId = data.unitId |
|||
// this.$refs.checkPage.init() |
|||
// }) |
|||
// 打开审核页面 |
|||
this.formShow = true; |
|||
this.$nextTick(() => { |
|||
this.$refs.icvaccineprarmeter_check.initForm("add", row.id, data.isAdd, data.unitId, data); |
|||
// this.$refs.checkPage.dataForm.id = row.id |
|||
// // 是否新增房屋：0：否；1：是 |
|||
// this.$refs.checkPage.isAdd = data.isAdd |
|||
// // 单元ID |
|||
// this.$refs.checkPage.unitId = data.unitId |
|||
// this.$refs.checkPage.init() |
|||
}) |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
} else { |
|||
this.$message.success("操作失败！"); |
|||
} |
|||
}, |
|||
|
|||
async handleLook(rowIndex) { |
|||
this.formTitle = "查看"; |
|||
this.checkVisible = true; |
|||
await nextTick(); |
|||
this.$refs.add_parameter.init(this.dataList[rowIndex],true); |
|||
}, |
|||
handleClearVillage() { |
|||
this.dataForm.buildId = '' |
|||
this.dataForm.homeId = '' |
|||
}, |
|||
handleClearBuild() { |
|||
this.dataForm.buildId = '' |
|||
this.dataForm.unitId = '' |
|||
this.dataForm.homeId = '' |
|||
}, |
|||
handleClearDan() { |
|||
this.dataForm.unitId = '' |
|||
this.dataForm.homeId = '' |
|||
}, |
|||
handleChangeGrid(val) { |
|||
console.log('val', val) |
|||
this.dataForm.villageId = '' |
|||
this.dataForm.buildId = '' |
|||
this.dataForm.unitId = '' |
|||
this.dataForm.homeId = '' |
|||
this.getValiheList() |
|||
}, |
|||
handleChangeV(val) { |
|||
console.log('val', val) |
|||
this.dataForm.buildId = '' |
|||
this.dataForm.unitId = '' |
|||
this.dataForm.homeId = '' |
|||
this.getBuildList() |
|||
}, |
|||
handleChangeB(val) { |
|||
console.log('val', val) |
|||
this.dataForm.unitId = '' |
|||
this.dataForm.homeId = '' |
|||
this.getUniList() |
|||
}, |
|||
handleChangeD(val) { |
|||
console.log('val', val) |
|||
this.dataForm.homeId = '' |
|||
this.getHouseList() |
|||
}, |
|||
addFormOk () { |
|||
this.checkVisible = false; |
|||
this.getDataList(); |
|||
}, |
|||
addDiaClose () { |
|||
this.checkVisible = false; |
|||
this.$refs.add_parameter.resetData() |
|||
}, |
|||
getGridList() { |
|||
const { user } = this.$store.state |
|||
this.$http |
|||
.post('/gov/org/customergrid/gridoption', { |
|||
agencyId: user.agencyId, |
|||
purpose: 'addorupdate' |
|||
}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
console.log('获取查询详情成功', res.data) |
|||
this.optionsG = res.data |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
getValiheList() { |
|||
const { user } = this.$store.state |
|||
this.$http |
|||
.post('/gov/org/icneighborhood/neighborhoodoption', { |
|||
gridId: this.dataForm.gridId, |
|||
agencyId: '' |
|||
// agencyId: user.agencyId |
|||
}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
console.log('获取查询详情成功', res.data) |
|||
this.optionsV = res.data |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
getBuildList() { |
|||
this.$http |
|||
.post('/gov/org/icbuilding/buildingoption', { |
|||
neighborHoodId: this.dataForm.villageId |
|||
}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
console.log('获取查询详情成功', res.data) |
|||
this.optionsB = res.data |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
getUniList() { |
|||
this.$http |
|||
.post('/gov/org/icbuildingunit/unitoption', { |
|||
buildingId: this.dataForm.buildId |
|||
}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
console.log('获取查询详情成功', res.data) |
|||
this.optionsD = res.data |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
getHouseList() { |
|||
this.$http |
|||
.post('/gov/org/ichouse/houseoption', { unitId: this.dataForm.unitId }) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
console.log('获取查询详情成功', res.data) |
|||
this.optionsH = res.data |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error('网络错误') |
|||
}) |
|||
}, |
|||
//重置搜索条件 |
|||
resetForm() { |
|||
this.dataForm = { |
|||
gridId: '', |
|||
villageId: '', |
|||
buildId: '', |
|||
unitId: '', |
|||
homeId: '', |
|||
name: '', |
|||
idCard: '', |
|||
mobile: '', |
|||
isVaccination: '' |
|||
}; |
|||
this.pageNo = 1 |
|||
}, |
|||
// 上传文件之前的钩子 |
|||
beforeUpload(file) { |
|||
this.files = file; |
|||
|
|||
const isText = file.type === "application/vnd.ms-excel"; |
|||
const isTextComputer = |
|||
file.type === |
|||
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"; |
|||
|
|||
if (!isText && !isTextComputer) { |
|||
this.$message.error("请选择正确格式的文件"); |
|||
this.files = null; |
|||
this.fileName = ""; |
|||
return false; |
|||
} else { |
|||
this.fileName = file.name; |
|||
return true; |
|||
} |
|||
}, |
|||
async uploadFile() { |
|||
if (this.fileName == "") { |
|||
this.$message.warning("请选择要上传的文件！"); |
|||
return false; |
|||
} |
|||
|
|||
this.$message({ |
|||
showClose: true, |
|||
message: "导入中，请到系统管理-导入记录中查看进度", |
|||
duration: 0, |
|||
}); |
|||
|
|||
//清空上传列表 |
|||
this.$refs["upload"].clearFiles(); |
|||
let url = ""; |
|||
|
|||
let fileFormData = new FormData(); |
|||
fileFormData.append("file", this.files); //filename是键，file是值，就是要传的文件，test.zip是要传的文件名 |
|||
|
|||
url = "/epmetuser/icVaccinePrarmeter/importFile"; |
|||
|
|||
window.app.ajax.post2( |
|||
url, |
|||
fileFormData, |
|||
(data, rspMsg) => { |
|||
if (data.code === 0 && data.msg == "success") { |
|||
// this.$message.success('导入成功') |
|||
} else { |
|||
// this.$message({ |
|||
// showClose: true, |
|||
// message: rspMsg, |
|||
// duration: 0, |
|||
// type: "error" |
|||
// }) |
|||
// this.$message.error(rspMsg) |
|||
} |
|||
this.loadTable(); |
|||
}, |
|||
(rspMsg, data) => {}, |
|||
{ headers: { "Content-Type": "multipart/form-data" } } |
|||
); |
|||
}, |
|||
//导出表格 |
|||
async handleExport() { |
|||
let title = "新冠病毒疫苗接种人员信息台账"; |
|||
|
|||
const url = "/epmetuser/icVaccinePrarmeter/vaccine-export"; |
|||
|
|||
app.ajax.exportFilePost( |
|||
url, |
|||
this.dataForm, |
|||
(data, rspMsg) => { |
|||
console.log(data) |
|||
this.download(data, title + ".xlsx"); |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg); |
|||
} |
|||
); |
|||
}, |
|||
// 下载文件 |
|||
download(data, fileName) { |
|||
if (!data) { |
|||
return; |
|||
} |
|||
|
|||
var csvData = new Blob([data]); |
|||
|
|||
if (window.navigator && window.navigator.msSaveOrOpenBlob) { |
|||
window.navigator.msSaveOrOpenBlob(csvData, fileName); |
|||
} |
|||
else { |
|||
var a = document.createElement("a"); |
|||
document.body.appendChild(a); |
|||
a.style = "display: none"; |
|||
var url = window.URL.createObjectURL(csvData); |
|||
a.href = url; |
|||
a.download = fileName; |
|||
a.click(); |
|||
a.remove(); |
|||
window.URL.revokeObjectURL(url); |
|||
} |
|||
}, |
|||
handleExportModule() { |
|||
let title = "新冠病毒疫苗接种人员信息台账模板"; |
|||
let url = "/epmetuser/icVaccinePrarmeter/exporttemplate"; |
|||
|
|||
let params = {}; |
|||
|
|||
app.ajax.exportFilePost( |
|||
url, |
|||
params, |
|||
(data, rspMsg) => { |
|||
this.download(data, title + ".xls"); |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg); |
|||
} |
|||
); |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import '@/assets/scss/buttonstyle.scss'; |
|||
@import "@/assets/scss/modules/visual/communityManage.scss"; |
|||
@import "@/assets/scss/modules/management/list-main.scss"; |
|||
|
|||
.resi-container .resi-card-table { |
|||
::v-deep .el-table th { |
|||
color: #fff; |
|||
background-color: rgba(33, 149, 254, 1); |
|||
// border-right: 1px solid rgba(33, 149, 254, 1); |
|||
} |
|||
} |
|||
.resi-table { |
|||
::v-deep .el-button--text { |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
.resi-card-table { |
|||
margin-top: 20px; |
|||
} |
|||
.resi-row-btn { |
|||
margin-bottom: 13px; |
|||
.upload-btn { |
|||
display: inline-block; |
|||
margin: 0 10px; |
|||
} |
|||
} |
|||
|
|||
.resi-btns { |
|||
margin-top: 20px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.resi-container .resi-card { |
|||
position: relative; |
|||
overflow: visible; |
|||
} |
|||
|
|||
.demo-form-inline { |
|||
// display: flex; |
|||
// align-items: center; |
|||
// margin-bottom: 20px; |
|||
|
|||
.resi-cell-label { |
|||
flex-shrink: 0; |
|||
min-width: 0; |
|||
box-sizing: border-box; |
|||
margin-right: 15px; |
|||
// text-align: right; |
|||
// line-height: 32; |
|||
} |
|||
.resi-cell-label1 { |
|||
width: max-content; |
|||
} |
|||
.resi-cell-value-radio { |
|||
display: flex; |
|||
align-items: center; |
|||
min-height: 32px; |
|||
} |
|||
.resi-cell-input { |
|||
width: 200px; |
|||
} |
|||
.resi-cell--daterange { |
|||
max-width: 260px; |
|||
} |
|||
.resi-cell-select { |
|||
width: 200px; |
|||
box-sizing: border-box; |
|||
margin-right: 10px; |
|||
&-middle { |
|||
width: 120px; |
|||
} |
|||
&-small { |
|||
width: 88px; |
|||
} |
|||
} |
|||
.resi-cell-select:last-child { |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
|
|||
.mt10 { |
|||
margin-top: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,461 @@ |
|||
<template> |
|||
<div> |
|||
<div class="dialog-h-content scroll-h"> |
|||
<el-form ref="ref_form" |
|||
:inline="false" |
|||
:model="dataForm" |
|||
:rules="dataRule" |
|||
:disabled="formType === 'detail'" |
|||
class="form"> |
|||
|
|||
<el-form-item label="所属楼栋" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<span>{{ agencyObj.neighborHoodName }}-{{agencyObj.label}}</span> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="单元号" |
|||
prop="buildingUnitId" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-select class="item_width_1" |
|||
v-model="dataForm.buildingUnitId" |
|||
placeholder="请选择" |
|||
clearable> |
|||
<el-option v-for="item in unitList" |
|||
:key="item.id" |
|||
:label="item.unitName" |
|||
:value="item.id"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="门牌号" |
|||
prop="doorName" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
placeholder="请输入门牌号" |
|||
v-model="dataForm.doorName"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item v-if="formType != 'detail'" label="房屋编码" |
|||
prop="coding" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_2" |
|||
maxlength="50" |
|||
placeholder="请输入楼栋编码" |
|||
v-model="dataForm.coding"> |
|||
|
|||
</el-input> |
|||
<el-button style="margin-left: 10px" |
|||
type="primary" |
|||
size="small" |
|||
@click="handleCode">生成</el-button> |
|||
</el-form-item> |
|||
<div v-if="formType === 'detail'"> |
|||
<el-form-item label="房屋编码" |
|||
prop="houseCode" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
maxlength="30" |
|||
v-model="dataForm.houseCode"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<div v-if="dataForm.houseQrcodeUrl" |
|||
style="display: flex;flex-direction: column;"> |
|||
<img style="margin-left: 70px;width: 200px;" |
|||
:src="dataForm.houseQrcodeUrl"> |
|||
<a style="margin-left: 80px" |
|||
:href="dataForm.houseQrcodeUrl" |
|||
target="_blank">下载</a> |
|||
</div> |
|||
</div> |
|||
<!-- <el-form-item label="居住人数" |
|||
style="display: block" |
|||
prop="realPerson" |
|||
label-width="150px"> |
|||
<el-input-number class="item_width_4" |
|||
v-model="dataForm.realPerson" |
|||
:min="0" |
|||
:max="9999" |
|||
label="居住人数"></el-input-number> |
|||
</el-form-item> --> |
|||
<el-form-item label="房屋类型" |
|||
prop="houseType" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-radio-group v-model="houseType"> |
|||
|
|||
<el-radio :label="'1'">楼房</el-radio> |
|||
<el-radio :label="'2'">平房</el-radio> |
|||
<el-radio :label="'3'">别墅</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="房屋用途" |
|||
prop="purpose" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-radio-group v-model="purpose"> |
|||
|
|||
<el-radio :label="'1'">住宅</el-radio> |
|||
<el-radio :label="'2'">商业</el-radio> |
|||
<el-radio :label="'3'">办公</el-radio> |
|||
<el-radio :label="'4'">工业</el-radio> |
|||
<el-radio :label="'5'">仓储</el-radio> |
|||
<el-radio :label="'6'">商住混用</el-radio> |
|||
<el-radio :label="'7'">其他</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="房屋状态" |
|||
prop="rentFlag" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-radio-group v-model="rentFlag"> |
|||
|
|||
<el-radio :label="1">出租</el-radio> |
|||
<el-radio :label="2">闲置</el-radio> |
|||
<el-radio :label="0">自住</el-radio> |
|||
<el-radio :label="3">未出售</el-radio> |
|||
|
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="房主姓名" |
|||
prop="ownerName" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
maxlength="30" |
|||
placeholder="请输入房主姓名" |
|||
v-model="dataForm.ownerName"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="联系方式" |
|||
prop="ownerPhone" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
type='number' |
|||
placeholder="请输入联系方式" |
|||
v-model="dataForm.ownerPhone"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="房主身份证" |
|||
prop="ownerIdCard" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
placeholder="请输入房主身份证" |
|||
v-model="dataForm.ownerIdCard"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="备注" |
|||
prop="remark" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
maxlength="30" |
|||
placeholder="请输入备注" |
|||
v-model="dataForm.remark"> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
</div> |
|||
<div class="div_btn"> |
|||
<el-button size="small" |
|||
@click="handleCancle">取 消</el-button> |
|||
<el-button size="small" |
|||
v-if="formType != 'detail'" |
|||
type="primary" |
|||
:disabled="btnDisable" |
|||
@click="handleComfirm">确 定</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost, requestGet } from '@/js/dai/request' |
|||
|
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
formType: 'add', //表单操作类型 add新增，edit编辑，detail详情 |
|||
btnDisable: false, |
|||
unitList: [], |
|||
|
|||
houseId: '', //房屋ID |
|||
houseType: '1', |
|||
purpose: '1', |
|||
rentFlag: 0, |
|||
dataForm: { |
|||
neighborHoodId: '', // 所属小区ID |
|||
buildingId: '',//所属楼栋ID |
|||
buildingUnitId: '',//所属单元ID |
|||
doorName: '',//门牌号 |
|||
houseType: '',//房屋类型【楼房，平房，别墅】 |
|||
purpose: '',//房屋用途【住宅，商业，办公，工业，仓储，商住混用，其他】 |
|||
rentFlag: 0,//房屋状态【是：1，否：0】 出租1、闲置2、自住 0 |
|||
ownerPhone: '', //联系方式 |
|||
ownerName: '', //房主名字 |
|||
ownerIdCard: '', //房主身份证 |
|||
remark: '', |
|||
// realPerson: 0, |
|||
coding: '', |
|||
sysCoding: '' |
|||
}, |
|||
|
|||
keyWords: '', |
|||
agencyObj: {}, |
|||
|
|||
} |
|||
}, |
|||
components: {}, |
|||
mounted () { |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
async initForm (type, row, agencyObj) { |
|||
console.log('>>>>>>>>>>>>>>>>:::::::::::::') |
|||
|
|||
this.$refs.ref_form.resetFields(); |
|||
this.agencyObj = agencyObj |
|||
this.formType = type |
|||
console.log('agencyObj-----', agencyObj) |
|||
if (row) { |
|||
|
|||
this.houseId = row.houseId |
|||
await this.loadHouseInfo() |
|||
// this.dataForm = JSON.parse(JSON.stringify(row)) |
|||
// this.houseId = this.dataForm.houseId |
|||
|
|||
// this.dataForm.buildingUnitId = this.dataForm.unitNumKey |
|||
// this.dataForm = { ... this.dataForm } |
|||
// this.houseType = this.dataForm.houseTypeKey |
|||
// this.purpose = this.dataForm.purposeKey |
|||
// this.rentFlag = parseInt(this.dataForm.rentFlagKey) |
|||
|
|||
} else { |
|||
|
|||
this.dataForm.neighborHoodId = this.agencyObj.neighborHoodId |
|||
this.dataForm.buildingId = this.agencyObj.id |
|||
this.dataForm.buildingUnitId = this.agencyObj.buildingUnitId |
|||
this.dataForm.doorName = this.agencyObj.doorName |
|||
} |
|||
|
|||
|
|||
await this.loadUnitList() |
|||
|
|||
}, |
|||
|
|||
async loadHouseInfo () { |
|||
|
|||
const url = "/gov/org/ichouse/" + this.houseId |
|||
|
|||
const { data, code, msg } = await requestGet(url) |
|||
|
|||
if (code === 0) { |
|||
// debugger |
|||
this.dataForm = { ...data } |
|||
|
|||
this.houseType = this.dataForm.houseType |
|||
this.purpose = this.dataForm.purpose |
|||
this.rentFlag = parseInt(this.dataForm.rentFlag) |
|||
|
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
//加载单元 |
|||
async loadUnitList () { |
|||
const url = '/gov/org/building/buildingunitlist' |
|||
|
|||
let params = { |
|||
buildingId: this.dataForm.buildingId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.unitList = data |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
async handleCode() { |
|||
if (!this.dataForm.buildingUnitId) return this.$message.error('请选择单元') |
|||
const { data, code, msg } = await requestPost( |
|||
"/gov/org/houseInformation/getHouseCoding/" + this.dataForm.buildingUnitId); |
|||
if (msg == "success" && code == 0) { |
|||
this.dataForm.coding = data.coding |
|||
this.dataForm.sysCoding = data.sysCoding |
|||
|
|||
} |
|||
}, |
|||
|
|||
async handleComfirm () { |
|||
this.btnDisable = true |
|||
setTimeout(() => { |
|||
this.btnDisable = false |
|||
}, 10000) |
|||
|
|||
this.dataForm.houseType = this.houseType |
|||
this.dataForm.purpose = this.purpose |
|||
this.dataForm.rentFlag = this.rentFlag |
|||
this.$refs['ref_form'].validate((valid, messageObj) => { |
|||
if (!valid) { |
|||
this.btnDisable = false |
|||
app.util.validateRule(messageObj) |
|||
} else { |
|||
this.addRoom() |
|||
} |
|||
|
|||
}) |
|||
}, |
|||
|
|||
async addRoom () { |
|||
const regCard = /(^\d{15}$)|(^\d{17}(\d|X)$)/; //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X |
|||
if (this.dataForm.ownerIdCard && regCard.test(this.dataForm.ownerIdCard) === false) { |
|||
this.btnDisable = false |
|||
this.$message({ |
|||
type: 'warning', |
|||
message: '请输入正确的身份证号码' |
|||
}) |
|||
return false; |
|||
} |
|||
const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //手机号码 |
|||
if (this.dataForm.ownerPhone && regPhone.test(this.dataForm.ownerPhone) === false) { |
|||
this.btnDisable = false |
|||
this.$message({ |
|||
type: 'warning', |
|||
message: '请输入正确的手机号码' |
|||
}) |
|||
return false; |
|||
} |
|||
|
|||
let url = '' |
|||
|
|||
if (this.formType === 'add') { |
|||
url = '/gov/org/house/houseadd' |
|||
} else { |
|||
url = '/gov/org/house/houseupdate' |
|||
this.dataForm.houseId = this.houseId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, this.dataForm) |
|||
this.btnDisable = false |
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '操作成功' |
|||
}) |
|||
this.resetData() |
|||
this.$emit('dialogOk') |
|||
|
|||
} else { |
|||
|
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleCancle () { |
|||
this.resetData() |
|||
this.$emit('dialogCancle') |
|||
|
|||
}, |
|||
|
|||
resetData () { |
|||
this.houseId = '' //房屋ID |
|||
this.houseType = '1' |
|||
this.purpose = '1' |
|||
this.rentFlag = 0 |
|||
this.dataForm = { |
|||
neighborHoodId: '', // 所属小区ID |
|||
buildingId: '',//所属楼栋ID |
|||
buildingUnitId: '',//所属单元ID |
|||
doorName: '',//门牌号 |
|||
houseType: '1',//房屋类型【楼房，平房，别墅】 |
|||
purpose: '1',//房屋用途【住宅，商业，办公，工业，仓储，商住混用，其他】 |
|||
rentFlag: 0,//是否出租【是：1，否：0】 |
|||
ownerPhone: '', //联系方式 |
|||
ownerName: '', //房主名字 |
|||
ownerIdCard: '', //房主身份证 |
|||
remark: '', // 备注 |
|||
coding: '', |
|||
sysCoding: '' |
|||
} |
|||
|
|||
}, |
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
buildingUnitId: [ |
|||
{ required: true, message: '所属单元不能为空', trigger: 'blur' }, |
|||
], |
|||
doorName: [ |
|||
{ required: true, message: '门牌号不能为空', trigger: 'blur' } |
|||
], |
|||
coding: [ |
|||
{ required: true, message: '房屋编码不能为空', trigger: 'blur' } |
|||
], |
|||
houseType: [ |
|||
{ required: true, message: '房屋类型不能为空', trigger: 'blur' } |
|||
], |
|||
purpose: [ |
|||
{ required: true, message: '房屋用途不能为空', trigger: 'blur' } |
|||
], |
|||
rentFlag: [ |
|||
{ required: true, message: '是否出租不能为空', trigger: 'blur' } |
|||
], |
|||
ownerPhone: [ |
|||
{ required: false } |
|||
], |
|||
ownerName: [ |
|||
{ required: false } |
|||
], |
|||
ownerIdCard: [ |
|||
{ required: false } |
|||
], |
|||
remark: [ |
|||
{ required: false } |
|||
], |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
props: {} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/modules/visual/communityManageForm.scss"; |
|||
</style> |
|||
Loading…
Reference in new issue