<template> <div> <van-form ref='form'> <div class='title'>随访信息</div> <van-cell-group inset> <div v-if="showOne && firstForm.visitSituation == 1"> <div class='no-req-label'>随访内容</div> <van-field v-model='form.visitContent' placeholder='随访内容' class='input-back mt-2 form-input' rows='2' autosize type='textarea' /> </div> <div v-if="showOne && firstForm.visitSituation == 1"> <div class='no-req-label mt-5'>处置意见</div> <van-field v-model='form.idCard' rows='2' autosize type='textarea' placeholder='处置意见' class='input-back mt-2 form-input' /> </div> <div v-if='(showOne || showTwo) && firstForm.visitSituation == 1 && firstForm.isHealthGuide == 1'> <div class='no-req-label mt-5'>健康指导</div> <div class='health mt-2'> <div class='health-cell mt-2' v-for='item in form.visitHealthGuideList'> <div class='no-req-label' v-if="item.name != '无'">{{ item.name }}</div> <van-field v-model='item.templateContent' rows='1' autosize type='textarea' placeholder='请输入' class='input-back mt-2 form-input' /> </div> </div> </div> <div v-if="showOne && firstForm.visitSituation == 1"> <div class='no-req-label mt-5'>上传随访记录</div> <div class='tips'> 支持上传jpg、png、jpeg文件,大小请在10M以内 </div> <div class='img-btn mt-2' @click="toUpload('imgId')"> <input type='file' id='imgId' multiple @change='choiceImg' style='display: none' :key='new Date().getTime()'> <div class='flex items-center justify-center'> <div> <doc-icon type='doc-upload' class='doc-up' /> </div> <div class='ml-2'>上传图片</div> </div> </div> <div class='flex items-center' style='flex-wrap: wrap'> <div v-for='(item, index) in imgList'> <!-- 图片--> <div v-if="item.imgFlag == 'img'" class='mt-2' style='position: relative'> <div> <doc-icon type='doc-remove' class='remove' @click='delImg(item.indexF)'></doc-icon> </div> <img :src='item.trueDownloadUrl' class='ml-2' style='width: 95px;height: 95px;' @click='toPreview(index)'> </div> </div> </div> <!-- pdf--> <div> <div v-for='item in imgList'> <div class='mt-2 pdf' v-if="item.imgFlag == 'pdf'"> <div class='flex items-center justify-between'> <div class='flex items-center' @click.stop='toPdf(item)'> <div> <doc-icon type='doc-PDF' style='font-size: .48rem'></doc-icon> </div> <div class='ml-1'>{{ item.name }}</div> </div> <div> <span><doc-icon type='doc-remove' style='font-size: .24rem' @click='delImg(item.indexF)'></doc-icon></span> </div> </div> </div> </div> </div> </div> <div v-if="showOne && firstForm.visitSituation == 1"> <div class='no-req-label mt-5'>现场随访照片</div> <div class='tips'> 支持上传jpg、png、jpeg文件,大小请在10M以内 </div> <div class='img-btn mt-2' @click="toUpload('imgId2')"> <input type='file' id='imgId2' multiple @change='choiceImg2' style='display: none' :key='new Date().getTime()-10000'> <div class='flex items-center justify-center'> <div> <doc-icon type='doc-upload' class='doc-up' /> </div> <div class='ml-2'>上传图片</div> </div> </div> <div class='flex items-center' style='flex-wrap: wrap'> <div v-for='(item, index) in imgList2'> <!-- 图片--> <div v-if="item.imgFlag == 'img'" class='mt-2' style='position: relative'> <div> <doc-icon type='doc-remove' class='remove' @click='delImg2(item.indexF)'></doc-icon> </div> <img :src='item.trueDownloadUrl' class='ml-2' style='width: 95px;height: 95px;' @click='toPreview(index)'> </div> </div> </div> <!-- pdf--> <div> <div v-for='item in imgList2'> <div class='mt-2 pdf' v-if="item.imgFlag == 'pdf'"> <div class='flex items-center justify-between'> <div class='flex items-center' @click.stop='toPdf(item)'> <div> <doc-icon type='doc-PDF' style='font-size: .48rem'></doc-icon> </div> <div class='ml-1'>{{ item.name }}</div> </div> <div> <span><doc-icon type='doc-remove' style='font-size: .24rem' @click='delImg2(item.indexF)'></doc-icon></span> </div> </div> </div> </div> </div> </div> <div v-if="firstForm.visitSituation == 1"> <div class='label-title mt-5'>下次随访日期</div> <van-field v-model='form.nextVisitDate' is-link disabled placeholder='下次随访日期' class='input-back mt-2 form-input' @click="showDate = true" :rules='rules.nextVisitDate' /> <van-popup v-model:show="showDate" position="bottom"> <van-date-picker @confirm="dataConfirm" @cancel="showDate = false" /> </van-popup> </div> </van-cell-group> </van-form> </div> </template> <script> import { useStore } from '@/resident/store' import dayjs from 'dayjs' import DocIcon from '@/components/docIcon/DocIcon' import { showImagePreview } from 'vant' import { fetchDataHandle } from '@/utils/common' export default { name: 'GeneralFUForm', components: { DocIcon }, props: { info: { default: () => { return {} } }, firstForm: { default: () => { return {} } }, }, data() { return { store: useStore(), form: {}, imgList: [], imgList2: [], showDate: false, rules: { nextVisitDate: [{required: true,message: '请选择'}] } } }, watch: { 'info': { handler() { this.form = this.setForm(this.info) if (this.info.id) { this.imgList = this.info.uploadVisitRecordImageList || [] this.imgList2 = this.info.sceneVisitImageList || [] } }, immediate: true }, }, computed: { //复检指导 showOne() { const {visitWay} = this.firstForm let res = false if (visitWay == 5 || visitWay == 6 || visitWay == 7 || visitWay == 8) { res = true } return res }, //微信、短信指导 showTwo() { const {visitWay} = this.firstForm let res = false if (visitWay == 9 || visitWay == 11) { res = true } return res }, //催检 showThree() { const {visitWay} = this.firstForm let res = false if (visitWay == 10 || visitWay == 12) { res = true } return res } }, methods: { setForm(info = {}) { const modeArray = this.store.getDict('DC00084') let visitHealthGuideList = [] if (info.healthGuideContent) { visitHealthGuideList = JSON.parse(info.healthGuideContent) } const form = { id: info.id, diseaseType: info.diseaseType, visitDate: info.visitDate || new dayjs(), nextVisitDate: info.nextVisitDate, isSms: info.isSms, isWx: info.isWx, visitContent: info.visitContent, disposalOpinion: info.disposalOpinion, uploadVisitRecord: info.uploadVisitRecord, sceneVisitImage: info.sceneVisitImage, sendInfo: info.sendInfo, visitHealthGuideList: modeArray.map(e => { const item = visitHealthGuideList.find(i => i.templateMode === e.value) return { templateMode: e.value, name: e.name, templateContent: item ? item.templateContent : '', id: item ? item.visitId : '' } }) } return form }, setTemForm(info) { const modeArray = this.store.getDict('DC00084') const visitHealthGuideList = info.contentList || [] const form = { visitHealthGuideList: modeArray.map(e => { const item = visitHealthGuideList.find(i => i.templateMode === e.value) return { templateMode: e.value, name: e.name, templateContent: item ? item.templateContent : '', id: item ? item.visitId : '' } }) } return form.visitHealthGuideList }, toUpload(id) { let input = document.getElementById(id) input.click() }, choiceImg() { let input = document.getElementById('imgId') let file = input.files let newFile = Array.from(file) let maxIndexF = Math.max(...this.imgList.map(item => item.indexF)); newFile.forEach((item, index) => { item['indexF'] = maxIndexF+ index + 1 item['trueDownloadUrl'] = window.URL.createObjectURL(item) item['imgFlag'] = '' if (item.type == 'application/pdf') { item['imgFlag'] = 'pdf' } if (item.type == 'image/jpeg' || item.type == 'image/png') { item['imgFlag'] = 'img' } }) this.imgList = this.imgList.concat(newFile) }, choiceImg2() { let input = document.getElementById('imgId2') let file = input.files let newFile = Array.from(file) let maxIndexF = Math.max(...this.imgList2.map(item => item.indexF)); newFile.forEach((item, index) => { item['indexF'] = maxIndexF+ index + 1 item['trueDownloadUrl'] = window.URL.createObjectURL(item) item['imgFlag'] = '' if (item.type == 'application/pdf') { item['imgFlag'] = 'pdf' } if (item.type == 'image/jpeg' || item.type == 'image/png') { item['imgFlag'] = 'img' } }) this.imgList2 = this.imgList2.concat(newFile) }, //图片预览 toPreview(index) { // let list = [] // this.imgList.forEach(item => { // list.push(item.trueDownloadUrl) // }) // showImagePreview({ // images: list, // className: 'custom-image-preview', // startPosition: index, // loop: false // }) }, //pdf预览 toPdf(item) { // window.open(item.trueDownloadUrl) }, delImg(index) { this.imgList = this.imgList.filter(item => item.indexF != index) }, delImg2(index) { this.imgList2 = this.imgList2.filter(item => item.indexF != index) }, dataConfirm({ selectedValues }) { this.form.nextVisitDate = selectedValues.join('-') this.showDate = false }, onSubmit() { return new Promise((resolve, reject) => { this.$refs.form.validate().then(() => { let par = { img1: this.imgList || [], img2: this.imgList2 || [], ...this.form, healthGuideContent: JSON.stringify(this.form.visitHealthGuideList) } resolve(par) }).catch((e) => { console.warn('ArchiveCommon error', e) // reject(e) }) }) } } } </script> <style scoped lang='less'> .title { font-weight: bold; margin-bottom: 20px; } .label-title { font-size: 13px; color: #595959; font-weight: 500; &::after { content: "*"; color: red; font-weight: bold; margin-left: 4px; } } .no-req-label { font-size: 13px; color: #595959; font-weight: 500; } .form-input { padding: 8px 12px; border-radius: 8px; } .input-back { background: #FAFAFA; } .tel-back { background: #F5F5F5; padding: 8px; border-radius: 0px 0px 8px 8px; } .tel { background: #FFFFFF; padding: 8px; border-radius: 8px; } .tel-label { color: #607FF0; font-weight: bold; } .p-12-0 { padding: 12px 0px; } .health { padding: 1px 8px 8px 8px; background: #FAFAFA; border-radius: 8px; .health-cell { padding: 8px; background: #FFFFFF; border-radius: 8px; } } .tips { color: #A5AEBE; font-size: 12px; margin-top: 8px; } .img-btn { border: 1px solid #EEEEEE; background: #FAFAFA; border-radius: 8px; padding: 14px 46px; text-align: center; color: #607FF0; } .doc-up { font-size: 20px; } .pdf { border: 1px solid #EEEEEE; border-radius: 8px; padding: 8px; } .remove { font-size: 24px; position: absolute; right: -8px; top: -9px; z-index: 1; } :deep(.van-cell-group--inset) { overflow: visible; } :deep(.van-cell) { overflow: visible; } :deep(.van-field__error-message) { position: absolute; } :deep(.van-cell:after) { border-bottom: 0px; } </style> <style lang='less'> .custom-image-preview .van-image-preview__container .van-image-preview__item:not(:first-child):not(last-child) { display: block !important; } .van-image__img { width: 100%; } .van-swipe__track { width: 100%!important; } .van-swipe-item { width: 100%!important; } </style>