<template> <div> <van-form ref='form'> <div class='title'>随访信息</div> <van-cell-group inset> <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 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 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 class='no-req-label mt-5'>上传随访记录</div> <div class='tips'> 支持上传jpg、png、jpeg文件,大小请在10M以内 </div> <div class='img-btn mt-2' @click='toUpload'> <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.src' 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 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> </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' export default { name: 'GeneralFUForm', components: { DocIcon }, props: { info: { default: () => { return {} } } }, data() { return { store: useStore(), authInfo: {}, form: {}, imgList: [], showDate: false, rules: { nextVisitDate: [{required: true,message: '请选择'}] } } }, watch: { 'info': { handler() { this.form = this.setForm(this.info) }, immediate: true } }, 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() { let input = document.getElementById('imgId') input.click() }, choiceImg() { let input = document.getElementById('imgId') let file = input.files let newFile = Array.from(file) newFile.forEach((item, index) => { item['indexF'] = index + 1 item['src'] = 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) }, toPreview(index) { let list = [] this.imgList.forEach(item => { list.push(item.src) }) showImagePreview({ images: list, className: 'custom-image-preview', startPosition: index, loop: false }) }, toPdf(item) { window.open(item.src) }, delImg(index) { this.imgList = this.imgList.filter(item => item.indexF != index) }, dataConfirm({ selectedValues }) { this.form.nextVisitDate = selectedValues.join('-') this.showDate = false }, } } </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>