373 lines
11 KiB
Vue
373 lines
11 KiB
Vue
<template>
|
||
<div class="Edit">
|
||
<div class="header-tips">请确保以下信息全部由本人填写，本人对所填写内容的真实性和完整性负责</div>
|
||
<div class="form-info">
|
||
<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>请选择</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>请选择</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>
|
||
<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: {},
|
||
showDateSelect: false,
|
||
showDictSelect: false,
|
||
selectDictName: '',
|
||
selectFormName: '',
|
||
dateType: '',
|
||
cropAreaId: '',
|
||
params: {
|
||
year: true,
|
||
month: true,
|
||
day: true,
|
||
hour: true,
|
||
minute: true
|
||
},
|
||
travelTypeList: [],
|
||
travelType: []
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(['user']),
|
||
},
|
||
onLoad(option) {
|
||
this.areaId = this.user.areaId
|
||
this.areaName = this.user.areaName
|
||
this.$dict.load('yesOrNo', 'EP_registerPersonType', 'EP_travelType', 'EP_abnormalType', 'epidemicTouchInFourteen',
|
||
'EP_homeStatus2', 'EP_quarantineStrategy', 'EP_communityHandleType', 'EP_highRiskIndustries', 'EP_controlMethod').then(() => {
|
||
this.id = option.id
|
||
this.travelTypeList = this.$dict.getDict('EP_travelType')
|
||
this.getDetail()
|
||
this.getCropAreaId()
|
||
})
|
||
|
||
},
|
||
onShow() {
|
||
document.title = '编辑行程信息'
|
||
},
|
||
methods: {
|
||
submit() {
|
||
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('请选择目的地')
|
||
}
|
||
|
||
this.$http.post(`/app/appepidemicpreventionregisterinfo/updateForAdmin`, {
|
||
...this.form,
|
||
startTime: this.form.startTime + ':00',
|
||
arriveTime: this.form.arriveTime + ':00',
|
||
travelType: this.travelType.join(',')
|
||
}).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
|
||
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
|
||
}
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</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>
|