jiangyy
3 years ago
5 changed files with 559 additions and 42 deletions
@ -0,0 +1,26 @@ |
|||||
|
.bg-app { |
||||
|
// background-color: rgb(230, 230, 230); |
||||
|
height: 100vh; |
||||
|
width: 100vw; |
||||
|
padding: 20px; |
||||
|
|
||||
|
.title { |
||||
|
text-align: center; |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
margin-top: 20px; |
||||
|
// font-size: 40px; |
||||
|
|
||||
|
.line { |
||||
|
border: 1px solid #e4e4e48e; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.div-btn { |
||||
|
margin-top: 50px; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
} |
||||
@ -1,65 +1,549 @@ |
|||||
<template> |
<template> |
||||
<div class="g-app"> |
<div class="bg-app"> |
||||
<div class="g-bd" v-if="true"> |
<div class="title"> |
||||
居民信息填报 |
居民信息填报 |
||||
</div> |
</div> |
||||
|
<div class="content"> |
||||
|
|
||||
|
<mt-cell title="所属社区"> |
||||
|
|
||||
|
<span>{{shequName}}</span> |
||||
|
</mt-cell> |
||||
|
<div class="line"></div> |
||||
|
|
||||
|
<div @click="handelSel('community')"> |
||||
|
<mt-cell title="小区" |
||||
|
is-link> |
||||
|
<span v-if="selCommunity">{{selCommunity.label}}</span> |
||||
|
<span v-else>请选择</span> |
||||
|
</mt-cell> |
||||
|
</div> |
||||
|
<div class="line"></div> |
||||
|
|
||||
|
<div @click="handelSel('building')"> |
||||
|
<mt-cell title="楼宇" |
||||
|
is-link> |
||||
|
<span v-if="selBuilding">{{selBuilding.label}}</span> |
||||
|
<span v-else>请选择</span> |
||||
|
</mt-cell> |
||||
|
</div> |
||||
|
<div class="line"></div> |
||||
|
|
||||
|
<div @click="handelSel('unit')"> |
||||
|
<mt-cell title="单元" |
||||
|
is-link> |
||||
|
<span v-if="selUnit">{{selUnit.label}}</span> |
||||
|
<span v-else>请选择</span> |
||||
|
</mt-cell> |
||||
|
</div> |
||||
|
<div class="line"></div> |
||||
|
|
||||
|
<div v-if="!selUnit || selUnit.value!=='else'" |
||||
|
@click="handelSel('room')"> |
||||
|
<mt-cell title="房屋" |
||||
|
is-link> |
||||
|
<span v-if="selRoom">{{selRoom.label}}</span> |
||||
|
<span v-else>请选择</span> |
||||
|
</mt-cell> |
||||
|
<div class="line"></div> |
||||
|
</div> |
||||
|
<div v-if="showAddressField"> |
||||
|
<mt-field class="my-field" |
||||
|
label="详细地址" |
||||
|
placeholder="请输入" |
||||
|
v-model="address"></mt-field> |
||||
|
<div class="line"></div> |
||||
|
</div> |
||||
|
|
||||
|
<div @click="handelSel('roomType')"> |
||||
|
<mt-cell title="房屋类型" |
||||
|
is-link> |
||||
|
<span v-if="selRoomType">{{selRoomType.label}}</span> |
||||
|
<span v-else>请选择</span> |
||||
|
</mt-cell> |
||||
|
</div> |
||||
|
<div class="line"></div> |
||||
|
|
||||
|
<mt-field class="my-field" |
||||
|
label="户主姓名" |
||||
|
placeholder="请输入" |
||||
|
v-model="username"></mt-field> |
||||
|
<div class="line"></div> |
||||
|
|
||||
|
<mt-field class="my-field" |
||||
|
label="居住成员人数" |
||||
|
placeholder="请输入" |
||||
|
type="number" |
||||
|
v-model="memberNum"></mt-field> |
||||
|
<div class="line"></div> |
||||
|
|
||||
|
<div v-for="(item,index) in memberList" |
||||
|
:key="index"> |
||||
|
<mt-field class="my-field" |
||||
|
:label="'成员'+(index+1)+'姓名'" |
||||
|
placeholder="请输入" |
||||
|
v-model="item.name"></mt-field> |
||||
|
<div class="line"></div> |
||||
|
<mt-field class="my-field" |
||||
|
:label="'成员'+(index+1)+'身份证'" |
||||
|
placeholder="请输入" |
||||
|
v-model="item.idcard"></mt-field> |
||||
|
<div class="line"></div> |
||||
|
<mt-field class="my-field" |
||||
|
:label="'成员'+(index+1)+'手机号'" |
||||
|
placeholder="请输入" |
||||
|
type="tel" |
||||
|
v-model="item.phone"></mt-field> |
||||
|
<div class="line"></div> |
||||
|
|
||||
|
<div @click="handelSel('detNum',index)"> |
||||
|
<mt-cell :title="'成员'+(index+1)+'参加几轮全员核酸检测'" |
||||
|
is-link> |
||||
|
<span v-if="item.selDetNum.value">{{item.selDetNum.label}}</span> |
||||
|
<span v-else>请选择</span> |
||||
|
</mt-cell> |
||||
|
</div> |
||||
|
<div class="line"></div> |
||||
|
|
||||
|
<div @click="handelSel('detCondition',index)"> |
||||
|
<mt-cell :title="'成员'+(index+1)+'新冠疫苗接种情况'" |
||||
|
is-link> |
||||
|
<span v-if="item.selDetCondition.value">{{item.selDetCondition.label}}</span> |
||||
|
<span v-else>请选择</span> |
||||
|
</mt-cell> |
||||
|
</div> |
||||
|
<div class="line"></div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="div-btn"> |
||||
|
<mt-button @click="handleSubmit" |
||||
|
type="primary" |
||||
|
size="small">提交</mt-button> |
||||
|
</div> |
||||
|
|
||||
|
<mt-popup v-model="popupVisible" |
||||
|
popup-transition="popup-fade" |
||||
|
closeOnClickModal="true" |
||||
|
position="bottom"> |
||||
|
<mt-picker :slots="popupSlots" |
||||
|
value-key="label" |
||||
|
@change="onPickerChange" |
||||
|
showToolbar> |
||||
|
<div class="picker-toolbar-title"> |
||||
|
<div class="usi-btn-cancel" |
||||
|
@click="popupVisible = !popupVisible">取消</div> |
||||
|
<div class="">请选择</div> |
||||
|
<div class="usi-btn-sure" |
||||
|
@click="popupOk()">确定</div> |
||||
|
</div> |
||||
|
</mt-picker> |
||||
|
</mt-popup> |
||||
|
|
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
<script> |
<script> |
||||
import Cookies from 'js-cookie' |
|
||||
import debounce from 'lodash/debounce' |
|
||||
import { messages } from '@/i18n' |
import { requestPost } from "@/js/dai/request"; |
||||
import { getUUID } from '@/utils' |
|
||||
import { Loading } from 'element-ui' // 引入Loading服务 |
|
||||
import JSEncrypt from 'jsencrypt' //引入加密 |
|
||||
|
|
||||
let loading // 加载动画 |
let loading // 加载动画 |
||||
export default { |
export default { |
||||
data() { |
data () { |
||||
return { |
return { |
||||
pubKey: null, // 获取到公钥 |
popupVisible: false, |
||||
isShowLogin: true, |
shequName: '其他小区', |
||||
i18nMessages: messages |
shequId: '111', |
||||
|
showAddressField: false,//是否显示其他 |
||||
|
|
||||
|
communityList: [], |
||||
|
buildingList: [], |
||||
|
unitList: [], |
||||
|
roomList: [], |
||||
|
selType: 'community',//弹出框所显示的数据类型：community、building、unit、room |
||||
|
pickerData: [], |
||||
|
|
||||
|
selObj: {}, |
||||
|
selCommunity: null, |
||||
|
selBuilding: null, |
||||
|
selUnit: null, |
||||
|
selRoom: null, |
||||
|
selRoomType: null, |
||||
|
|
||||
|
address: '', |
||||
|
username: '', |
||||
|
phone: '', |
||||
|
idcard: '', |
||||
|
value: '', |
||||
|
memberNum: 2, |
||||
|
|
||||
|
selMemberIndex: null, |
||||
|
|
||||
|
memberList: [ |
||||
|
{ |
||||
|
name: '', |
||||
|
phone: '', |
||||
|
idcard: '', |
||||
|
num: 0, |
||||
|
condition: '', |
||||
|
selDetNum: {}, |
||||
|
selDetCondition: {} |
||||
|
}, |
||||
|
{ |
||||
|
name: '', |
||||
|
phone: '', |
||||
|
idcard: '', |
||||
|
num: 0, |
||||
|
condition: '', |
||||
|
selDetNum: {}, |
||||
|
selDetCondition: {} |
||||
|
} |
||||
|
], |
||||
|
|
||||
|
roomTypeList: [ |
||||
|
{ |
||||
|
value: '1', |
||||
|
label: '自有' |
||||
|
}, |
||||
|
{ |
||||
|
value: '2', |
||||
|
label: '租住' |
||||
|
}, |
||||
|
], |
||||
|
|
||||
|
detNumList: [ |
||||
|
{ |
||||
|
value: '0', |
||||
|
label: '0' |
||||
|
}, |
||||
|
{ |
||||
|
value: '1', |
||||
|
label: '1' |
||||
|
}, |
||||
|
{ |
||||
|
value: '2', |
||||
|
label: '2' |
||||
|
}, |
||||
|
{ |
||||
|
value: '3', |
||||
|
label: '3' |
||||
|
}, |
||||
|
],//参加核酸次数list |
||||
|
detConditionList: [//参加核酸类型list |
||||
|
{ |
||||
|
label: '已全程接种（包含加强针或序贯）', |
||||
|
value: '1' |
||||
|
}, |
||||
|
{ |
||||
|
label: '未全程接种', |
||||
|
value: '2' |
||||
|
}, |
||||
|
{ |
||||
|
label: '未接种', |
||||
|
value: '3' |
||||
|
}, |
||||
|
], |
||||
|
|
||||
|
|
||||
|
popupSlots: [//问题类型弹框数据 |
||||
|
{ |
||||
|
values: [] |
||||
|
} |
||||
|
], |
||||
|
|
||||
} |
} |
||||
}, |
}, |
||||
components: {}, |
components: {}, |
||||
computed: {}, |
computed: { |
||||
created() {}, |
|
||||
mounted() {}, |
}, |
||||
|
created () { }, |
||||
|
mounted () { |
||||
|
this.loadCommunity() |
||||
|
|
||||
|
}, |
||||
|
|
||||
methods: { |
methods: { |
||||
handleClickItem(k) { |
//根据社区id获取小区列表 |
||||
if (k == 1) { |
async loadCommunity () { |
||||
this.$router.replace({ name: 'main' }) |
const url = "/gov/org/neighborhood/neighborhoodlist" |
||||
} else if (k == 2) { |
|
||||
this.$router.replace({ name: 'main-shuju' }) |
let params = { |
||||
|
pageSize: 100, |
||||
|
pageNo: 0, |
||||
|
level: 'community', |
||||
|
id: 'f6e183d8e6687020074e6d8061926bfa' |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
data.list.forEach(element => { |
||||
|
element.label = element.neighborHoodName |
||||
|
element.value = element.neighborHoodId |
||||
|
}); |
||||
|
this.communityList = data.list |
||||
|
let obj = { |
||||
|
values: this.communityList |
||||
|
} |
||||
|
|
||||
|
this.popupSlots = [] |
||||
|
this.popupSlots.push(obj) |
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
} |
} |
||||
}, |
}, |
||||
|
//获取楼宇列表 |
||||
|
async loadBuilding () { |
||||
|
const url = "/gov/org/icbuilding/buildingoption" |
||||
|
let params = { |
||||
|
|
||||
|
neighborHoodId: this.selCommunity.value |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
// data.forEach(element => { |
||||
|
// element.label = element.buildingName |
||||
|
// element.value = element.buildingId |
||||
|
// }); |
||||
|
this.buildingList = data |
||||
|
let obj = { |
||||
|
values: this.buildingList |
||||
|
} |
||||
|
|
||||
// 平阴联动 自动登录接口 |
this.popupSlots = [] |
||||
getAutoLogin(platformToken) { |
this.popupSlots.push(obj) |
||||
this.dataForm.thirdToken = platformToken |
} else { |
||||
this.dataForm.platform = 'pyld' |
this.$message.error(msg) |
||||
this.$http |
} |
||||
.post(`/auth/sso/oper/third/login`, this.dataForm) |
}, |
||||
.then(({ data: res }) => { |
//获取单元列表 |
||||
if (res.code !== 0) { |
async loadUnit () { |
||||
if (res.code == 8302) { |
const url = '/gov/org/icbuildingunit/unitoption' |
||||
return this.$message.error(res.msg) |
|
||||
} |
let params = { |
||||
return this.$message.error(res.msg) |
buildingId: this.selBuilding.value |
||||
} |
} |
||||
localStorage.setItem('customerId', res.data.customerId) |
|
||||
localStorage.setItem('userType', 'work') |
const { data, code, msg } = await requestPost(url, params) |
||||
localStorage.setItem('showHeader', '0') |
|
||||
localStorage.setItem('token', res.data.token) |
if (code === 0) { |
||||
this.$router.replace({ name: 'home' }) |
// data.forEach(element => { |
||||
|
// element.label = element.unitName |
||||
|
// element.value = element.id |
||||
|
// }); |
||||
|
this.unitList = data |
||||
|
this.unitList.push({ |
||||
|
label: '其他', |
||||
|
value: 'else' |
||||
}) |
}) |
||||
.catch(() => {}) |
let obj = { |
||||
// epmet-ext9.elinkservice.cn/platform-admin |
values: this.unitList |
||||
} |
} |
||||
|
|
||||
|
this.popupSlots = [] |
||||
|
this.popupSlots.push(obj) |
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
}, |
||||
|
//获取房间列表 |
||||
|
async loadRoom () { |
||||
|
const url = "/gov/org/ichouse/houseoption" |
||||
|
|
||||
|
let params = { |
||||
|
buildingId: this.selBuilding.value, |
||||
|
unitId: this.selUnit.value |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
// data.forEach(element => { |
||||
|
// element.label = element.unitName |
||||
|
// element.value = element.id |
||||
|
// }); |
||||
|
this.roomList = data |
||||
|
this.roomList.push({ |
||||
|
label: '其他', |
||||
|
value: 'else' |
||||
|
}) |
||||
|
let obj = { |
||||
|
values: this.roomList |
||||
|
} |
||||
|
|
||||
|
this.popupSlots = [] |
||||
|
this.popupSlots.push(obj) |
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handelSel (selType, index) { |
||||
|
this.selType = selType |
||||
|
if (selType === 'community') { |
||||
|
this.pickerData = this.communityList |
||||
|
|
||||
|
} |
||||
|
if (selType === 'building') { |
||||
|
if (!this.selCommunity) { |
||||
|
Toast({ |
||||
|
message: '请先选择小区', |
||||
|
duration: 5000 |
||||
|
}); |
||||
|
return false |
||||
|
} else { |
||||
|
this.pickerData = this.buildingList |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
if (selType === 'unit') { |
||||
|
if (!this.selBuilding) { |
||||
|
Toast({ |
||||
|
message: '请先选择楼宇', |
||||
|
duration: 5000 |
||||
|
}); |
||||
|
return false |
||||
|
} else { |
||||
|
this.pickerData = this.unitList |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
if (selType === 'room') { |
||||
|
if (!this.selUnit) { |
||||
|
Toast({ |
||||
|
message: '请先选择单元', |
||||
|
duration: 5000 |
||||
|
}); |
||||
|
return false |
||||
|
} else { |
||||
|
this.pickerData = this.roomList |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
if (selType === 'roomType') { |
||||
|
this.pickerData = this.roomTypeList |
||||
|
} |
||||
|
if (selType === 'detNum') { |
||||
|
this.selMemberIndex = index |
||||
|
this.pickerData = this.detNumList |
||||
|
} |
||||
|
if (selType === 'detCondition') { |
||||
|
this.selMemberIndex = index |
||||
|
this.pickerData = this.detConditionList |
||||
|
} |
||||
|
|
||||
|
|
||||
|
let obj = { |
||||
|
values: this.pickerData |
||||
|
} |
||||
|
|
||||
|
this.popupSlots = [] |
||||
|
this.popupSlots.push(obj) |
||||
|
this.popupVisible = !this.popupBuildingVisibl |
||||
|
}, |
||||
|
|
||||
|
handleSubmit () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
popupOk () { |
||||
|
if (this.selType === 'community') { |
||||
|
this.selCommunity = this.selObj |
||||
|
this.selBuilding = null |
||||
|
this.selUnit = null |
||||
|
this.selRoom = null |
||||
|
this.loadBuilding() |
||||
|
|
||||
|
} |
||||
|
if (this.selType === 'building') { |
||||
|
this.selBuilding = this.selObj |
||||
|
this.selUnit = null |
||||
|
this.selRoom = null |
||||
|
this.loadUnit() |
||||
|
|
||||
|
} |
||||
|
if (this.selType === 'unit') { |
||||
|
this.selUnit = this.selObj |
||||
|
this.selRoom = null |
||||
|
if (this.selUnit && this.selUnit.value === 'else') { |
||||
|
this.showAddressField = true |
||||
|
} else { |
||||
|
this.showAddressField = false |
||||
|
} |
||||
|
this.loadRoom() |
||||
|
|
||||
|
} |
||||
|
if (this.selType === 'room') { |
||||
|
this.selRoom = this.selObj |
||||
|
if (this.selRoom && this.selRoom.value === 'else') { |
||||
|
this.showAddressField = true |
||||
|
} else { |
||||
|
this.showAddressField = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (this.selType === 'roomType') { |
||||
|
this.selRoomType = this.selObj |
||||
|
} |
||||
|
|
||||
|
if (this.selType === 'detNum') { |
||||
|
// this.selMemberIndex = index |
||||
|
// this.pickerData = this.detNumList |
||||
|
} |
||||
|
if (this.selType === 'detCondition') { |
||||
|
// this.selMemberIndex = index |
||||
|
// this.pickerData = this.detConditionList |
||||
|
} |
||||
|
|
||||
|
this.popupVisible = false |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
onPickerChange (picker, values) { |
||||
|
|
||||
|
this.selObj = values[0] |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" src="@/assets/scss/pages/indexWork.scss" scoped></style> |
<style lang="scss" scoped > |
||||
|
@import "@/assets/scss/pages/caiji.scss"; |
||||
|
|
||||
|
.my-field /deep/ .mint-field-core { |
||||
|
text-align: right; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
/deep/ .mint-popup-bottom { |
||||
|
width: 100vw; |
||||
|
} |
||||
|
|
||||
|
.picker-toolbar-title { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
background-color: #eee; |
||||
|
height: 44px; |
||||
|
line-height: 44px; |
||||
|
font-size: 16px; |
||||
|
.usi-btn-cancel, |
||||
|
.usi-btn-sure { |
||||
|
color: #26a2ff; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|||||
Loading…
Reference in new issue