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> |
|||
<div class="g-app"> |
|||
<div class="g-bd" v-if="true"> |
|||
<div class="bg-app"> |
|||
<div class="title"> |
|||
居民信息填报 |
|||
</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> |
|||
</template> |
|||
<script> |
|||
import Cookies from 'js-cookie' |
|||
import debounce from 'lodash/debounce' |
|||
import { messages } from '@/i18n' |
|||
import { getUUID } from '@/utils' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import JSEncrypt from 'jsencrypt' //引入加密 |
|||
|
|||
|
|||
import { requestPost } from "@/js/dai/request"; |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data() { |
|||
data () { |
|||
return { |
|||
pubKey: null, // 获取到公钥 |
|||
isShowLogin: true, |
|||
i18nMessages: messages |
|||
popupVisible: false, |
|||
shequName: '其他小区', |
|||
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: {}, |
|||
computed: {}, |
|||
created() {}, |
|||
mounted() {}, |
|||
computed: { |
|||
|
|||
}, |
|||
created () { }, |
|||
mounted () { |
|||
this.loadCommunity() |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
handleClickItem(k) { |
|||
if (k == 1) { |
|||
this.$router.replace({ name: 'main' }) |
|||
} else if (k == 2) { |
|||
this.$router.replace({ name: 'main-shuju' }) |
|||
} |
|||
}, |
|||
|
|||
// 平阴联动 自动登录接口 |
|||
getAutoLogin(platformToken) { |
|||
this.dataForm.thirdToken = platformToken |
|||
this.dataForm.platform = 'pyld' |
|||
this.$http |
|||
.post(`/auth/sso/oper/third/login`, this.dataForm) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
if (res.code == 8302) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
return this.$message.error(res.msg) |
|||
} |
|||
localStorage.setItem('customerId', res.data.customerId) |
|||
localStorage.setItem('userType', 'work') |
|||
localStorage.setItem('showHeader', '0') |
|||
localStorage.setItem('token', res.data.token) |
|||
this.$router.replace({ name: 'home' }) |
|||
//根据社区id获取小区列表 |
|||
async loadCommunity () { |
|||
const url = "/gov/org/neighborhood/neighborhoodlist" |
|||
|
|||
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 = [] |
|||
this.popupSlots.push(obj) |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
//获取单元列表 |
|||
async loadUnit () { |
|||
const url = '/gov/org/icbuildingunit/unitoption' |
|||
|
|||
let params = { |
|||
buildingId: this.selBuilding.value |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
// data.forEach(element => { |
|||
// element.label = element.unitName |
|||
// element.value = element.id |
|||
// }); |
|||
this.unitList = data |
|||
this.unitList.push({ |
|||
label: '其他', |
|||
value: 'else' |
|||
}) |
|||
.catch(() => {}) |
|||
// epmet-ext9.elinkservice.cn/platform-admin |
|||
let obj = { |
|||
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> |
|||
|
|||
<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