Files
dvcp_v2_wxcp_app/library/project/pingchang/AppCheckpointRegistration/ManagementContent.vue
2024-10-31 14:34:57 +08:00

394 lines
14 KiB
Vue

<template>
<div class="ManagementContent">
<div class="info mar-b16">
<div class="item">
<div class="label">
<span class="tips">*</span>处置意见
</div>
</div>
<div class="type-select" v-if="haveHomeQuarantineBtn == 1">
<div class="type-item" :class="form.handleType == item.dictValue ? 'active' : ''" v-for="(item, index) in handlerTypeList" :key="index" @click="handleTypeClick(item.dictValue)" v-if="index > 0 && item.dictValue != 6">{{item.dictName}}</div>
</div>
<div class="type-select" v-else>
<div class="type-item" :class="form.handleType == index ? 'active' : ''" v-for="(item, index) in handlerTypeList" :key="index" @click="handleTypeClick(index)" v-if="index != 0 && index != 3 && index != 4">{{item.dictName}}</div>
</div>
</div>
<div class="info mar-b16" v-if="form.handleType == 2">
<div class="item solid">
<div class="label">
<span class="tips">*</span>隔离地点
</div>
<div class="value" @click="dictSelectClick('EP_quarantineAddress', 'quarantineAddress')">
<span :class="form.quarantineAddress === '' ? 'color-999' : ''">{{ $dict.getLabel('EP_quarantineAddress', form.quarantineAddress) || '请选择'}}</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" @click="showDateSelect=true">
<span class="color-999" v-if="!form.quarantineBeginTime">请选择</span>
<span v-else>{{form.quarantineBeginTime}}{{form.quarantineEndTime}}</span>
<u-icon name="arrow-right" color="#999" size="16" style="margin-left: 4px" />
</div>
</div>
<div class="item">
<div class="label">
<span class="tips">*</span>隔离策略
</div>
<div class="value" @click="dictSelectClick('EP_quarantineStrategy', 'quarantineStrategy')">
<span :class="form.quarantineStrategy === '' ? 'color-999' : ''">{{ $dict.getLabel('EP_quarantineStrategy', form.quarantineStrategy) || '请选择'}}</span>
<u-icon name="arrow-right" color="#999" size="16" style="margin-left: 4px" />
</div>
</div>
</div>
<div class="info mar-b16" v-if="form.handleType == 3">
<!-- <div class="item solid">
<div class="label">
<span class="tips">*</span>居家状态
</div>
<div class="value" @click="dictSelectClick('EP_homeStatus', 'homeStatus')">
<span :class="form.homeStatus === '' ? 'color-999' : ''">{{ $dict.getLabel('EP_homeStatus', form.homeStatus) || '请选择'}}</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" @click="showDateSelect=true">
<span class="color-999" v-if="!form.quarantineBeginTime">请选择</span>
<span v-else>{{form.quarantineBeginTime}}{{form.quarantineEndTime}}</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" @click="dictSelectClick('EP_quarantineStrategy', 'quarantineStrategy')">
<span :class="form.quarantineStrategy === '' ? 'color-999' : ''">{{ $dict.getLabel('EP_quarantineStrategy', form.quarantineStrategy) || '请选择'}}</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" @click="dictSelectClick('EP_controlMethod', 'controlMethod')">
<span :class="form.controlMethod === '' ? 'color-999' : ''">{{ $dict.getLabel('EP_controlMethod', form.controlMethod) || '请选择'}}</span>
<u-icon name="arrow-right" color="#999" size="16" style="margin-left: 4px" />
</div>
</div>
<div class="item">
<div class="label">
<span class="tips"></span>备注
</div>
</div>
<div class="solid">
<textarea placeholder="请输入备注" v-model="form.remarks" maxlength="500"></textarea>
</div> -->
<div class="item">
<div class="label">
<span class="tips"></span>图片
</div>
</div>
<div style="padding: 0 16px 24px 0;">
<AiUploader :def.sync="form.fileList" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"></AiUploader>
</div>
</div>
<div class="info mar-b16" v-if="form.handleType == 6 || form.handleType == 2">
<div class="item solid">
<div class="label">
<span class="tips">*</span>移交对象
</div>
<div class="value" @click="dictSelectClick('EP_handoverObject', 'handoverObject')">
<span :class="form.handoverObject === '' ? 'color-999' : ''">{{ $dict.getLabel('EP_handoverObject', form.handoverObject) || '请选择'}}</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" @click="dictSelectClick('EP_handoverMethod', 'handoverMethod')">
<span :class="form.handoverMethod === '' ? 'color-999' : ''">{{ $dict.getLabel('EP_handoverMethod', form.handoverMethod) || '请选择'}}</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">
<u-input placeholder="请输入" input-align="right" height="32" maxlength="6" v-model="form.handoverPersonName" :custom-style="{'font-size': '17px'}" />
</div>
</div>
<div class="item solid">
<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.handoverPersonPhone" :custom-style="{'font-size': '17px'}" />
</div>
</div>
<div class="item">
<div class="label">
<span class="tips">*</span>交接图片
</div>
</div>
<div style="padding: 0 16px 24px 0;">
<AiUploader :def.sync="form.fileList" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"></AiUploader>
</div>
</div>
<div class="info">
<div class="item">
<div class="label">
<span class="tips"></span>备注
</div>
</div>
<div class="solid">
<textarea placeholder="请输入备注" v-model="form.remarks" maxlength="500"></textarea>
</div>
</div>
<div class="btn-height"></div>
<div class="footer" @click="submit">提交</div>
<u-calendar v-model="showDateSelect" mode="range" min-year="2020" max-date="2050-12-31" @change="dateConfirm"></u-calendar>
<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 {
handlerTypeList: [],
form: {
registerId: '',
registerIdNumber: '',
handleType: '',
quarantineAddress: '',
quarantineBeginTime: '',
quarantineEndTime: '',
quarantineStrategy: '',
homeStatus: '',
controlMethod: '',
remarks: '',
handoverObject: '',
handoverMethod: '',
handoverPersonName: '',
handoverPersonPhone: '',
fileList: []
},
showDateSelect: false,
showDictSelect: false,
selectDictName: '',
selectFormName: '',
haveHomeQuarantineBtn: 1, //0隐藏居家 1不隐藏
}
},
computed: {
...mapState(['user']),
},
onLoad(option) {
this.form.registerId = option.id
this.form.registerIdNumber = option.idNumber
this.haveHomeQuarantineBtn = option.haveHomeQuarantineBtn
this.$dict.load('EP_handleType', 'EP_quarantineAddress', 'EP_quarantineStrategy', 'EP_homeStatus', 'EP_controlMethod', 'EP_handoverObject', 'EP_handoverMethod').then(() => {
this.handlerTypeList = this.$dict.getDict('EP_handleType')
})
},
onShow() {
document.title = '风险处置'
},
methods: {
submit() {
if(!this.form.handleType) {
return this.$u.toast('请选择处置意见')
}
//handleType 2集中隔离 3居家隔离 6转交人员
if(this.form.handleType == 2 && this.form.quarantineAddress === '') {
return this.$u.toast('请选择地点')
}
if([2].includes(this.form.handleType) && !this.form.quarantineBeginTime) {
return this.$u.toast('请选择隔离时间')
}
if([2].includes(this.form.handleType) && this.form.quarantineStrategy === '') {
return this.$u.toast('请选择隔离策略')
}
// if(this.form.handleType == 3 && this.form.controlMethod === '') {
// return this.$u.toast('请选择管控方式')
// }
if([2, 6].includes(this.form.handleType) && this.form.handoverObject === '') {
return this.$u.toast('请选择移交对象')
}
if([2, 6].includes(this.form.handleType) && this.form.handoverMethod === '') {
return this.$u.toast('请选择移交方式')
}
if([2, 6].includes(this.form.handleType) && !this.form.handoverPersonName) {
return this.$u.toast('请输入交接人姓名')
}
// if(this.form.handleType == 6 && this.form.handoverPersonPhone && !/^1[0-9]{10,10}$/.test(this.form.handoverPersonPhone)) {
// return this.$u.toast("请输入正确的手机号码");
// }
if([2, 6].includes(this.form.handleType) && !this.form.fileList.length) {
return this.$u.toast('请上传交接图片')
}
if(this.form.handleType == 1 || this.form.handleType == 4 || this.form.handleType == 5) {
this.$confirm(`确认`+this.$dict.getLabel('EP_handleType', this.form.handleType)+`操作`).then(() => {
this.form.quarantineBeginTime = null
this.form.quarantineEndTime = null
this.$http.post(`/app/appepidemicpreventionregisterinfo/riskDisposal`, this.form).then((res) => {
if (res.code == 0) {
this.$u.toast('提交成功')
uni.$emit('updateDetail')
uni.$emit('updateList')
uni.navigateBack()
}
}).catch((err) => {
this.$u.toast(err)
})
})
}else {
uni.setStorageSync('checkPointContent', this.form)
uni.navigateTo({ url: `./ManagementHistory?id=${this.form.registerId}` })
}
},
handleTypeClick(index) {
if(index == this.form.handleType) return
for(var i in this.form) {
if(i != 'registerId' && i != 'registerIdNumber') {
this.form[i] = ''
}
}
this.form.handleType = index
this.form.fileList = []
},
dateConfirm(e) {
this.form.quarantineBeginTime = e.startDate
this.form.quarantineEndTime = e.endDate
},
dictSelectClick(dictName, formName) {
this.selectDictName = dictName
this.selectFormName = formName
this.showDictSelect = true
},
dictConfirm(e) {
this.form[this.selectFormName] = e[0].value
}
},
}
</script>
<style scoped lang="scss">
.ManagementContent {
background-color: #F3F6F9;
padding-top: 16px;
.type-select {
.type-item {
display: inline-block;
width: 218px;
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;
}
.type-item:nth-of-type(3n) {
margin-right: 0;
}
.active {
background: #4181FF;
border: none;
color: #fff;
}
}
.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%;
}
}
::v-deep uni-textarea{
width: calc(100% - 32px);
}
.info {
padding-left: 32px;
background-color: #fff;
.item {
padding-left: 0;
}
.solid {
border-bottom: 1px solid #ddd;
box-sizing: border-box;
}
}
.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>