477 lines
15 KiB
Vue
477 lines
15 KiB
Vue
<template>
|
||
<div class="Edit">
|
||
<div class="header-tips">请确保以下信息全部由本人填写，本人对所填写内容的真实性和完整性负责</div>
|
||
<div class="form-info">
|
||
<div class="info mar-b16" v-if="fromType == 2 || fromType == 0">
|
||
<div class="title">基本信息</div>
|
||
<div class="item solid">
|
||
<div class="label">
|
||
<span class="tips">*</span>身份证号
|
||
</div>
|
||
<div class="value">
|
||
<input placeholder="请输入" type="idcard" input-align="right" height="32" maxlength="18" v-model="form.idNumber" placeholder-style="font-size: 16px;color: #999;" :custom-style="{'font-size': '17px'}" @blur="idNumberChange" />
|
||
</div>
|
||
</div>
|
||
<div class="item solid">
|
||
<div class="label">
|
||
<span class="tips">*</span>姓名
|
||
</div>
|
||
<div class="value">
|
||
<u-input placeholder="请输入" type="text" input-align="right" height="32" maxlength="6" v-model="form.name" :custom-style="{'font-size': '17px'}" />
|
||
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label">
|
||
<span class="tips">*</span>手机号
|
||
</div>
|
||
<div class="value">
|
||
<u-input placeholder="请输入" type="number" input-align="right" height="32" maxlength="11" v-model="form.phone" :custom-style="{'font-size': '17px'}" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="info mar-b16">
|
||
<div class="title">行程信息</div>
|
||
<div class="item solid">
|
||
<div class="label">
|
||
<span class="tips">*</span>出发时间
|
||
</div>
|
||
<div class="value" @click="showDateSelect=true;dateType='startTime'">
|
||
<span class="color-999" v-if="!form.startTime">请选择</span>
|
||
<span v-else>{{form.startTime}}</span>
|
||
<u-icon name="arrow-right" color="#999" size="16" style="margin-left: 4px" />
|
||
</div>
|
||
</div>
|
||
<div class="item solid">
|
||
<div class="label">
|
||
<span class="tips">*</span>出发地
|
||
</div>
|
||
<div class="value">
|
||
<AiAreaPicker v-model="form.startAreaId" all @select="areaSelectStart" :fullName.sync="form.startAreaName" style="color: #666">
|
||
<span style="margin-left: 4px" v-if="form.startAreaName">{{ form.startAreaName }}</span>
|
||
<span v-else class="color-999">请选择</span>
|
||
<u-icon name="arrow-right" color="#999" size="16" style="margin-left: 4px" />
|
||
</AiAreaPicker>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label">
|
||
<span class="tips"></span>出发地详址
|
||
</div>
|
||
</div>
|
||
<div class="item-textarea solid">
|
||
<u-input v-model="form.startAddress" type="textarea" placeholder="请输入" height="200" :custom-style="{'font-size': '17px'}" maxlength="50" />
|
||
</div>
|
||
<div class="item">
|
||
<div class="label">
|
||
<span class="tips">*</span>出行方式
|
||
</div>
|
||
</div>
|
||
<div class="type-select solid ai-radio">
|
||
<div class="type-item" :class="[travelType.includes(v.dictValue)? 'active':'']" v-for="(v, index) in travelTypeList" :key="index" @click="travelTypeSelect(v.dictValue)">{{v.dictName}}</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label" style="width:100%;">
|
||
<span class="tips"></span>车次/车牌/航班
|
||
</div>
|
||
</div>
|
||
<div class="item-textarea solid">
|
||
<u-input v-model="form.trainNo" type="textarea" placeholder="请输入" height="200" :custom-style="{'font-size': '17px'}" maxlength="100" />
|
||
</div>
|
||
<div class="item">
|
||
<div class="label">
|
||
<span class="tips"></span>行程描述
|
||
</div>
|
||
</div>
|
||
<div class="item-textarea solid">
|
||
<u-input v-model="form.description" type="textarea" placeholder="请输入" height="200" :custom-style="{'font-size': '17px'}" maxlength="500" />
|
||
</div>
|
||
<div class="item solid">
|
||
<div class="label">
|
||
<span class="tips">*</span>抵平时间
|
||
</div>
|
||
<div class="value" @click="showDateSelect=true;dateType='arriveTime'">
|
||
<span class="color-999" v-if="!form.arriveTime">请选择</span>
|
||
<span v-else>{{form.arriveTime}}</span>
|
||
<u-icon name="arrow-right" color="#999" size="16" style="margin-left: 4px" />
|
||
</div>
|
||
</div>
|
||
<div class="item solid">
|
||
<div class="label">
|
||
<span class="tips">*</span>目的地
|
||
</div>
|
||
<div class="value">
|
||
<AiAreaPicker v-model="form.arriveAreaId" :areaId="cropAreaId" @select="areaSelectArrive" :name.sync="form.arriveAreaName" style="color: #666" selectRoot>
|
||
<span style="margin-left: 4px" v-if="form.arriveAreaName">{{ form.arriveAreaName }}</span>
|
||
<span v-else class="color-999">请选择</span>
|
||
<u-icon name="arrow-right" color="#999" size="16" style="margin-left: 4px" />
|
||
</AiAreaPicker>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label">
|
||
<span class="tips"></span>目的地详址
|
||
</div>
|
||
</div>
|
||
<div class="item-textarea solid">
|
||
<u-input v-model="form.arriveAddress" type="textarea" placeholder="请输入" height="200" :custom-style="{'font-size': '17px'}" maxlength="50" />
|
||
</div>
|
||
</div>
|
||
<div class="info mar-b16" v-if="fromType == 2">
|
||
<div class="title">健康状况</div>
|
||
<div class="item">
|
||
<div class="label" style="width:100%;">
|
||
<span class="tips">*</span>是否有风险旅居史
|
||
</div>
|
||
</div>
|
||
<AiRadio class="solid ai-radio" v-model="form.fromHighRiskArea" dict="yesOrNo"/>
|
||
<div class="item">
|
||
<div class="label" style="width:100%;">
|
||
<span class="tips">*</span>近七日是否接触新冠确诊或疑似患者？
|
||
</div>
|
||
</div>
|
||
<AiRadio class="solid ai-radio" v-model="form.contactPatients" dict="epidemicTouchInFourteen"/>
|
||
<div class="item">
|
||
<div class="label" style="width:100%;">
|
||
<span class="tips"></span>是否有健康异常状况？
|
||
</div>
|
||
</div>
|
||
<AiRadio class="ai-radio" v-model="form.abnormalHealth" dict="yesOrNo"/>
|
||
</div>
|
||
</div>
|
||
<div class="btn-height"></div>
|
||
<div class="footer" @click="submit">提交</div>
|
||
<u-picker mode="time" :params="params" v-model="showDateSelect" @confirm="dateConfirm"></u-picker>
|
||
<u-select v-model="showDictSelect" :list="$dict.getDict(selectDictName)" label-name="dictName" value-name="dictValue" @confirm="dictConfirm"></u-select>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from 'vuex'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
id: '',
|
||
form: {
|
||
infoType: '3'
|
||
},
|
||
showDateSelect: false,
|
||
showDictSelect: false,
|
||
selectDictName: '',
|
||
selectFormName: '',
|
||
dateType: '',
|
||
cropAreaId: '',
|
||
params: {
|
||
year: true,
|
||
month: true,
|
||
day: true,
|
||
hour: true,
|
||
minute: true
|
||
},
|
||
travelTypeList: [],
|
||
travelType: [],
|
||
fromType: '', //1编辑行程信息 2纳入管理
|
||
titleList: ['新增排查', '编辑行程信息', '纳入管理']
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(['user']),
|
||
},
|
||
onLoad(option) {
|
||
this.areaId = this.user.areaId
|
||
this.areaName = this.user.areaName
|
||
this.fromType = option.fromType
|
||
this.$dict.load('yesOrNo', 'EP_registerPersonType', 'EP_travelType', 'EP_abnormalType', 'epidemicTouchInFourteen',
|
||
'EP_homeStatus2', 'EP_quarantineStrategy', 'EP_communityHandleType', 'EP_highRiskIndustries', 'EP_controlMethod').then(() => {
|
||
if(option.id) {
|
||
this.id = option.id
|
||
this.getDetail()
|
||
}
|
||
this.travelTypeList = this.$dict.getDict('EP_travelType')
|
||
this.getCropAreaId()
|
||
})
|
||
|
||
},
|
||
onShow() {
|
||
console.log(this.fromType)
|
||
document.title = this.titleList[this.fromType]
|
||
},
|
||
methods: {
|
||
submit() {
|
||
if (!this.form.idNumber && this.fromType != 1) {
|
||
return this.$u.toast('请输入身份证号')
|
||
}
|
||
let reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
|
||
|
||
if (this.form.idNumber.length == 18 && !reg.test(this.form.idNumber) && this.fromType != 1) {
|
||
return this.$u.toast('请输入正确的身份证账号')
|
||
}
|
||
if (!this.form.name && this.fromType != 1) {
|
||
return this.$u.toast('请输入姓名')
|
||
}
|
||
if (!this.form.phone && this.fromType != 1) {
|
||
return this.$u.toast('请输入手机号码')
|
||
}
|
||
let regTel = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
|
||
if (this.form.phone.length == 11 && !regTel.test(this.form.phone) && this.fromType != 1) {
|
||
return this.$u.toast('请输入正确的手机号')
|
||
}
|
||
if(!this.form.startTime) {
|
||
return this.$u.toast('请选择出发时间')
|
||
}
|
||
if(!this.form.startAreaId) {
|
||
return this.$u.toast('请选择出发地')
|
||
}
|
||
if (this.form.startAreaId.substr(4,this.form.startAreaId.length - 4) === '00000000') {
|
||
return this.$u.toast('出发地必须选至县级及以下')
|
||
}
|
||
if(!this.travelType.length) {
|
||
return this.$u.toast('请选择出行方式')
|
||
}
|
||
if(!this.form.arriveTime) {
|
||
return this.$u.toast('请选择抵平时间')
|
||
}
|
||
if(!this.form.arriveAreaId) {
|
||
return this.$u.toast('请选择目的地')
|
||
}
|
||
|
||
var url = this.fromType == 0 ? '/app/appepidemicpreventionregisterinfo/addForCM' : '/app/appepidemicpreventionregisterinfo/updateForAdmin'
|
||
this.$http.post(url, {
|
||
...this.form,
|
||
startTime: this.form.startTime + ':00',
|
||
arriveTime: this.form.arriveTime + ':00',
|
||
travelType: this.travelType.join(','),
|
||
companionList: []
|
||
}).then((res) => {
|
||
if (res.code == 0) {
|
||
this.$u.toast('提交成功')
|
||
uni.$emit('updateDetail')
|
||
uni.$emit('updateList')
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 600)
|
||
}
|
||
}).catch((err) => {
|
||
this.$u.toast(err)
|
||
})
|
||
|
||
},
|
||
travelTypeSelect(value) {
|
||
const index = this.travelType.indexOf(value)
|
||
if (index === -1) {
|
||
this.travelType.push(value)
|
||
} else {
|
||
this.travelType.splice(index, 1)
|
||
}
|
||
},
|
||
getDetail() {
|
||
this.$http.post(`/app/appepidemicpreventionregisterinfo/queryDetailById?id=${this.id}`).then((res) => {
|
||
if (res.code == 0) {
|
||
this.form = res.data
|
||
if(res.data.travelType) {
|
||
this.travelType = res.data.travelType?.split(',')
|
||
}
|
||
|
||
if(res.data.startTime) {
|
||
this.form.startTime = res.data.startTime.substring(0, 16)
|
||
}
|
||
if(res.data.arriveTime) {
|
||
this.form.arriveTime = res.data.arriveTime.substring(0, 16)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getCropAreaId() {
|
||
this.$http.post(`/app/appdvcpconfig/getCorpArea`).then((res) => {
|
||
if (res.code == 0) {
|
||
this.cropAreaId = res.data
|
||
}
|
||
})
|
||
},
|
||
dateConfirm(e) {
|
||
this.form[this.dateType] = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
|
||
},
|
||
dictSelectClick(dictName, formName) {
|
||
this.selectDictName = dictName
|
||
this.selectFormName = formName
|
||
this.showDictSelect = true
|
||
},
|
||
dictConfirm(e) {
|
||
this.form[this.selectFormName] = e[0].value
|
||
},
|
||
areaSelectStart(e) {
|
||
this.form.startAreaId = e
|
||
console.log(11)
|
||
this.getRiskLevel(e)
|
||
},
|
||
areaSelectArrive(e) {
|
||
this.form.arriveAreaId = e
|
||
},
|
||
// 获取风险等级
|
||
getRiskLevel(areaId) {
|
||
this.$http.post(`/app/appepidemicpreventionriskarea/queryAreaRiskLevel?areaId=${areaId}`).then(res=> {
|
||
if(res?.data) {
|
||
this.form.riskLevel = res.data
|
||
}
|
||
})
|
||
},
|
||
idNumberChange(e) {
|
||
if(e.detail.value.length) {
|
||
this.getOwnerInfo(e.detail.value)
|
||
}
|
||
},
|
||
// 获取个人信息
|
||
getOwnerInfo(idNumber) {
|
||
this.$http.post(`/app/appepidemicpreventionregisterinfo/queryDetailByIdNumber`, null, {
|
||
params: {
|
||
idNumber: idNumber,
|
||
}
|
||
}).then(res => {
|
||
if(res?.data) {
|
||
this.form.name = res.data.name || ''
|
||
this.form.phone = res.data.phone || ''
|
||
this.form.startAreaId = res.data.startAreaId
|
||
this.form.startAreaName = res.data.startAreaName
|
||
this.form.description = res.data.description || ''
|
||
this.form.arriveAreaId = res.data.arriveAreaId
|
||
this.form.arriveAreaName = res.data.arriveAreaName
|
||
this.form.startAddress = res.data.startAddress || ''
|
||
this.form.arriveAddress = res.data.arriveAddress || ''
|
||
}
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.Edit {
|
||
background-color: #F3F6F9;
|
||
padding-top: 16px;
|
||
.header-tips{
|
||
line-height: 1.3;
|
||
padding: 32px 32px;
|
||
color: #FF883C;
|
||
font-size: 30px;
|
||
text-align: justify;
|
||
background: #FFF8F3;
|
||
}
|
||
|
||
.item-textarea {
|
||
width: calc(100% - 32px);
|
||
}
|
||
.type-select {
|
||
.type-item {
|
||
display: inline-block;
|
||
width: calc(100% - 32px);
|
||
height: 80px;
|
||
line-height: 80px;
|
||
text-align: center;
|
||
background: #FFF;
|
||
border: 1px solid #CCC;
|
||
border-radius: 16px;
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 28px;
|
||
color: #333;
|
||
margin: 0 16px 16px 0;
|
||
box-sizing: border-box;
|
||
}
|
||
.active {
|
||
background: #4181FF;
|
||
border: none;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
::v-deep uni-textarea{
|
||
width: calc(100% - 32px);
|
||
}
|
||
.form-info {
|
||
.info {
|
||
padding-left: 32px;
|
||
background-color: #fff;
|
||
.title{
|
||
line-height: 116px;
|
||
background: #FFF;
|
||
font-size: 38px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #333;
|
||
overflow: hidden;
|
||
}
|
||
.item {
|
||
padding-left: 0;
|
||
}
|
||
.solid {
|
||
border-bottom: 1px solid #ddd;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
.item {
|
||
background-color: #fff;
|
||
display: flex;
|
||
padding: 40px 0 40px 32px;
|
||
.label {
|
||
width: 220px;
|
||
line-height: 48px;
|
||
font-family: PingFangSC-Medium;
|
||
font-weight: 500;
|
||
font-size: 34px;
|
||
color: #666;
|
||
.tips {
|
||
display: inline-block;
|
||
font-family: PingFangSC-Medium;
|
||
font-weight: 700;
|
||
font-size: 34px;
|
||
color: #F46;
|
||
margin-right: 8px;
|
||
vertical-align: text-top;
|
||
}
|
||
}
|
||
.value {
|
||
width: calc(100% - 220px);
|
||
padding-right: 32px;
|
||
text-align: right;
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 34px;
|
||
color: #333;
|
||
.color-999 {
|
||
color: #999;
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
textarea {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
.ai-radio {
|
||
width: 100%;
|
||
padding-bottom: 32px;
|
||
}
|
||
|
||
.mar-b16 {
|
||
margin-bottom: 16px;
|
||
}
|
||
.btn-height{
|
||
height: 130px;
|
||
}
|
||
.footer{
|
||
width: 100%;
|
||
height: 112px;
|
||
line-height: 112px;
|
||
background: #1365DD;
|
||
box-shadow: inset 0px 1px 0px 0px #EEEEEE;
|
||
font-size: 32px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #FFF;
|
||
text-align: center;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
}
|
||
</style>
|