<template>
<div>
<van-form ref='form'>
<div class='title'>随访信息</div>
<div v-if='showOne'>
<div class='label-title'>随访内容</div>
<van-field
v-model='form.visitContent'
name='visitContent'
placeholder='随访内容'
class='input-back mt-2 form-input'
rows='2'
autosize
type='textarea'
:rules='rules.visitContent'
/>
</div>
<div v-if='showOne'>
<div class='no-req-label mt-5'>处置意见</div>
<van-field
v-model='form.disposalOpinion'
rows='2'
autosize
type='textarea'
placeholder='处置意见'
class='input-back mt-2 form-input'
/>
</div>
<!-- 健康指导-->
<div v-if='showTwo'>
<div class='flex justify-between items-center mt-5'>
<div class='label-title '>健康指导</div>
<!-- <van-button class='doc-btn-p' @click='toShowTem(1)'>选择内容</van-button>-->
</div>
<div class='health mt-2'>
<GuideTextVideo :file-type='[1]'
:info='form.guide'
:content-title="'指导内容'"
:classify='1'
@changeSelect='toShowTem'
ref='guideRef'
></GuideTextVideo>
</div>
</div>
<!-- 宣教内容-->
<div v-if='showThree'>
<div class='flex justify-between items-center mt-5'>
<div class='label-title '>宣教内容</div>
<!-- <van-button class='doc-btn-p' @click='toShowTem(2)'>选择内容</van-button>-->
</div>
<div class='health mt-2'>
<div class='health-cell mt-2'>
<div class='no-req-label'>健康宣教</div>
<van-field
v-model='form.publicizeTypeName'
readonly
is-link
placeholder='请选择'
class='input-back mt-2 form-input'
@click='showPublicizeType= true'
>
<template #input>
<span class='text-end' v-if='form.publicizeTypeName'>{{ form.publicizeTypeName }}</span>
<span class='text-end' v-if='!form.publicizeTypeName' style='color: #dfdfe1'>请选择</span>
</template>
</van-field>
<van-popup v-model:show='showPublicizeType' position='bottom'>
<div class='p-4'>
<div class='flex justify-between mb-4 items-center pop-title'>
<div class='greyColor' @click='showPublicizeType = false' style='font-weight: 400'>
取消
</div>
<div>健康宣教（可多选）</div>
<div class='blueColor' @click='publicizeTypeConfirm'>确定</div>
</div>
<CheckBtn multiple column-3 :options="store.getDict('DC00091')"
v-model:value='checkPublicizeType'
:fieldNames="{text: 'name', value: 'value'}"
/>
</div>
</van-popup>
</div>
<div class='mt-2' v-if='form.publicizeTypeName &&!form?.publicizeType?.includes(1)'>
<van-button type='primary' plain class='w-full' @click='toShowTem(2)' size='small'>选择内容</van-button>
</div>
<div v-if='form?.publicizeType?.includes(1)'>
<GuideTextVideo :file-type='[1]'
:info='form.publicize'
:content-title="'文本内容'"
:classify='2'
@changeSelect='toShowTem'
ref='contentOne'></GuideTextVideo>
</div>
<div v-if='form?.publicizeType?.includes(2)'>
<GuideTextVideo :file-type='[2]'
:info='form.publicize'
:classify='2'
ref='contentTwo'></GuideTextVideo>
</div>
<div v-if='form?.publicizeType?.includes(3)'>
<GuideTextVideo :file-type='[3]'
:info='form.publicize'
:classify='2'
ref='contentThree'></GuideTextVideo>
</div>
</div>
</div>
<!-- 催检-->
<div v-if='showFour'>
<div class='no-req-label mt-5'>催检内容</div>
<div class='tel-back mt-2'>
<div class='tel'>
<div style='text-indent: 2em;line-height: .2rem'>
<span v-if='modeEnumList.urgeResidentShow'>{{ firstForm.residentsRecord.residentName
}}先生/女士，</span>
<span v-else>您好，</span>
<span>请您于{{ form.screenTime }}</span>
<span>到{{ authInfo.unitName }}</span>
<span>进行专病高危筛查/慢病复查，</span>
<span>祝早日康复！</span>
</div>
<div class='mt-2' style='text-align: center' @click='showTime1 = true'>
<span style='color: #607FF0'>修改日期</span>
</div>
</div>
</div>
<DataTime
:values='startTime'
:showType="['year', 'month', 'day', 'hour']"
@changeValue='showTime1 = false'
:showPicker='showTime1'
@confirm='timeConfirm1'
:min-date='startDateRange.min'
:max-date='startDateRange.max'
/>
</div>
<!-- 上传随访照片-->
<div v-if='showOne'>
<div class='no-req-label mt-5'>上传随访记录</div>
<DocImageUpload
description='支持上传jpg、png、jpeg文件，大小请在10M以内'
lengthMessage='抱歉，最多可上传6个文件。'
@change='(ids, option) => form.uploadVisitRecord = ids'
:maxLength='6'
class='mt-2'
/>
</div>
<!-- 现场随访照片-->
<div>
<div class='no-req-label mt-5'>现场随访照片</div>
<DocImageUpload
description='支持上传jpg、png、jpeg文件，大小请在10M以内'
lengthMessage='抱歉，最多可上传6个文件。'
@change='(ids, option) => form.sceneVisitImage = ids'
:maxLength='6'
class='mt-2'
/>
</div>
<div>
<div class='label-title mt-5'>下次随访日期</div>
<van-field
v-model='form.nextVisitDate'
is-link
readonly
name='nextVisitDate'
placeholder='下次随访日期'
class='input-back mt-2 form-input'
:rules='rules.nextVisitDate'
@click='showDate = true' />
<van-popup v-model:show='showDate' position='bottom'>
<van-date-picker v-model='form._nextVisitDate'
:min-date='nextVisitDateRange.min'
:max-date='nextVisitDateRange.max'
@confirm='dataConfirm' @cancel='showDate = false' />
</van-popup>
</div>
</van-form>
<div v-if='showTem'>
<temList :show='showTem' @closed='closedTem' @selectRecord='getSelectTem' :templateClassify='citeInfo'></temList>
</div>
</div>
</template>
<script>
import { useStore } from '@/resident/store'
import dayjs from 'dayjs'
import DocIcon from '@/components/docIcon/DocIcon'
import { showFailToast } from 'vant'
import { fetchDataHandle, uniqueArr } from '@/utils/common'
import DocImageUpload from '@/doctor/components/docImageUpload/DocImageUpload'
import TemList from '@/doctor/components/template/temList'
import { getTemplateDetail } from '@/api/doctor/workbench'
import GuideTextVideo from '@/doctor/followUp/generalFU/form/GuideTextVideo'
import CheckBtn from '@/doctor/components/checkBtn/CheckBtn'
import DataTime from '@/doctor/components/dataTime/dataTime'
export default {
name: 'GeneralFUForm',
components: { DataTime, CheckBtn, GuideTextVideo, TemList, DocImageUpload, DocIcon },
props: {
info: {
default: () => {
return {}
}
},
firstForm: {
default: () => {
return {}
}
},
modeEnumList: {
default: () => {
return {}
}
}
},
data() {
return {
store: useStore(),
form: {},
showDate: false,
showTime1: false,
showTem: false,
showPublicizeType: false,
checkPublicizeType: [],
currentTime1: null,
citeInfo: 1,
rules: {
visitContent: [{ required: true, message: '请输入' }],
nextVisitDate: [{ required: true, message: '请选择' }]
},
// 筛查日期可选范围
nextVisitDateRange: {
min: undefined,
max: undefined
},
startTime: '',
// 催检时间范围
startDateRange: {
min: undefined,
max: undefined
},
}
},
watch: {
'info': {
handler() {
this.form = this.setForm(this.info)
},
immediate: true
}
},
computed: {
authInfo() {
return this.store.$state.authInfo
},
//复检
showOne() {
const { visitWayRules } = this.firstForm
let res = false
let list = visitWayRules && visitWayRules.split(',').map(item => Number(item))
if (list && list.includes(1)) {
res = true
}
return res
},
//指导
showTwo() {
const { visitWayRules } = this.firstForm
let res = false
let list = visitWayRules && visitWayRules.split(',').map(item => Number(item))
if (list && list.includes(2)) {
res = true
}
return res
},
//宣教
showThree() {
const { visitWayRules } = this.firstForm
let res = false
let list = visitWayRules && visitWayRules.split(',').map(item => Number(item))
if (list && list.includes(3)) {
res = true
}
return res
},
//催检
showFour() {
const { visitWayRules } = this.firstForm
let res = false
let list = visitWayRules && visitWayRules.split(',').map(item => Number(item))
if (list && list.includes(4)) {
res = true
}
return res
}
},
created() {
const date = dayjs()
this.nextVisitDateRange.max = new Date(date.year() + 10, date.month(), date.date())
this.nextVisitDateRange.min = new Date(date.year(), date.month(), date.date() + 1)
this.form._nextVisitDate = [date.year(), date.month(), date.date() + 1]
let time = new dayjs().add(1, 'day').format('YYYY-MM-DD')
this.currentTime1 = time.split('-')
this.startTime = new dayjs().add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
this.startDateRange.max = new Date(date.year() + 10, date.month(), date.date())
this.startDateRange.min = new Date(date.year(), date.month(), date.date() + 1)
},
methods: {
setForm(data = {}) {
let info = fetchDataHandle(data, {
visitWayRules: 'strToArrNum',
groupsArrays: 'strToArrNum',
publicizeType: 'strToArrNum'
})
let isSmsIsWx = []
if (info.id) {
const { isSms, isWx } = info
if (isSms == 1) {
isSmsIsWx = [1]
}
if (isWx == 1) {
isSmsIsWx = [2]
}
if (isSms == 1 && isWx == 1) {
isSmsIsWx = [1, 2]
}
} else {
isSmsIsWx = [1]
}
const form = {
id: info.id,
groupsArrays: info.groupsArrays,
visitDate: info.visitDate || new dayjs(),
nextVisitDate: info.nextVisitDate,
visitWay: info.visitWay || 1,
isSms: info.isSms,
isWx: info.isWx,
isSmsIsWx: isSmsIsWx,
visitContent: info.visitContent,
disposalOpinion: info.disposalOpinion,
uploadVisitRecord: info.uploadVisitRecord,
sceneVisitImage: info.sceneVisitImage,
screenTime: info.screenTime || new dayjs().add(1, 'day').format('YYYY-MM-DD HH:00:00'),
sendInfo: info.sendInfo,
publicizeType: info.publicizeType,
guide: info.guide || {},
publicize: info.publicize || {}
}
return form
},
dataConfirm({ selectedValues }) {
this.form.nextVisitDate = selectedValues.join('-')
this.showDate = false
},
//催检日期选择
timeConfirm1(selectedValues) {
this.form.screenTime = dayjs(selectedValues).format('YYYY-MM-DD HH:00:00')
this.startTime = dayjs(selectedValues).format('YYYY-MM-DD HH:00:00')
this.showTime1 = false
console.log(this.form)
},
toShowTem(val) {
this.citeInfo = val
this.showTem = true
},
closedTem(val) {
this.showTem = val
},
//获取选中的模板
async getSelectTem(val, selectType = []) {
if (val && selectType && selectType.length) {
let par = { id: val }
let result = await getTemplateDetail(par)
const { data } = result
let obj = {
annexList: [],
contentList: [],
drugsList: []
}
let mp3List = data.annexList && data.annexList.filter(item => item.type == 2)
let mp4List = data.annexList && data.annexList.filter(item => item.type == 3)
if (selectType.includes(1)) { //是否返回文本选中
obj.contentList = data.contentList
obj.drugsList = data.drugsList
}
if (selectType.includes(2)) {//是否返回音频选中
obj.annexList = [...obj.annexList, ...mp3List]
}
if (selectType.includes(3)) {//是否返回视频选中
obj.annexList = [...obj.annexList, ...mp4List]
}
//健康指导
if (this.showTwo && this.citeInfo == 1) {
this.setGuide(obj)
}
//宣教内容
if (this.showThree && this.citeInfo == 2) {
this.setPublicize(obj)
}
}
},
publicizeTypeConfirm() {
let res = []
this.store.getDict('DC00091').forEach(item => {
let selected = this.checkPublicizeType.filter(i => i == item.value)
if (selected && selected.length) {
res.push(item.name)
}
})
if (this.checkPublicizeType && this.checkPublicizeType.length) {
this.form.publicizeType = this.checkPublicizeType.join()
this.form.publicizeTypeName = res.join()
} else {
this.form.publicizeType = ''
this.form.publicizeTypeName = ''
}
this.showPublicizeType = false
},
//健康指导模板赋值
async setGuide(val = {}) {
//获取上一次的值
let lastObj = {
contentList: [],
drugsList: []
}
let obj = await this.$refs.guideRef.getForm()
lastObj = {
contentList: obj.contentList,
drugsList: obj.drugsList
}
//重新赋值
let resObj = {
contentList: [],
drugsList: []
}
if (lastObj.contentList && lastObj.contentList.length) {
resObj.contentList = [...lastObj.contentList]
}
if (lastObj.drugsList && lastObj.drugsList.length) {
resObj.drugsList = [...lastObj.drugsList]
}
//判断模板文本是否选中 并赋值
if (val.contentList) {
//文本内容区域存在 初始值 后面选中的模板内容需要拼接在初始值后面
if (lastObj.contentList && lastObj.contentList.length) {
//合并相同的文本选项内容
resObj.contentList.forEach(item => {
val.contentList.forEach(vitem => {
if (item.templateMode != 5 && item.templateMode == vitem.templateMode) {
item.templateContent = item.templateContent ? item.templateContent + `\n` + vitem.templateContent : vitem.templateContent
}
})
})
//去掉 返回的val中与合并后相同的文本
resObj.contentList.forEach(item => {
let reIndex = val.contentList.findIndex(vitem => vitem.templateMode == item.templateMode)
if (reIndex != -1) {
val.contentList.splice(reIndex, 1)
}
})
//合并剩余的val.contentList到 resObj.contentList中
resObj.contentList = [...resObj.contentList, ...val.contentList]
//合并药物指导
//判断之前是否存在药物指导
if (lastObj.drugsList && lastObj.drugsList.length) {
//获取之前药物指导的最大_id的值
let rowId = 0
rowId = Math.max.apply(null, lastObj.drugsList.map(item => Number(item._id)))
val.drugsList.forEach((item, index) => {
item.id = ''
item._id = rowId + index + 1
})
//合并
resObj.drugsList = [...resObj.drugsList, ...val.drugsList]
} else {
resObj.drugsList = [...val.drugsList]
}
} else {
if (val.contentList) {
resObj.contentList = [...val.contentList]
resObj.drugsList = [...val.drugsList]
}
}
} else {
//模板未选中文本 赋初始值
if (lastObj.contentList && lastObj.contentList.length) {
resObj.contentList = [...lastObj.contentList]
}
}
console.log('resObj', resObj)
this.form.guide = resObj
},
//宣教内容模板赋值
async setPublicize(val = {}) {
//获取上一次的值
let lastObj = {
annexList: [],
contentList: [],
drugsList: []
}
//文本
if (this.form?.publicizeType?.includes(1)) {
let obj1 = await this.$refs.contentOne.getForm()
lastObj = {
annexList: [],
contentList: obj1.contentList,
drugsList: obj1.drugsList
}
}
//音频
if (this.form?.publicizeType?.includes(2)) {
let obj2 = await this.$refs.contentTwo.getForm()
let list = obj2.annexList.filter(item => item.type == 2)
lastObj = {
...lastObj,
annexList: list
}
}
//视频
if (this.form?.publicizeType?.includes(3)) {
let obj3 = await this.$refs.contentThree.getForm()
let list = obj3.annexList.filter(item => item.type == 3)
lastObj = {
...lastObj,
annexList: [...lastObj.annexList, ...list]
}
}
//重新赋值
console.log('json', val)
let resObj = {
annexList: [],
contentList: [],
drugsList: []
}
const { publicizeType = [], publicize = {} } = this.form
if (lastObj.annexList && lastObj.annexList.length) {
resObj.annexList = [...lastObj.annexList]
}
if (lastObj.contentList && lastObj.contentList.length) {
resObj.contentList = [...lastObj.contentList]
}
if (lastObj.drugsList && lastObj.drugsList.length) {
resObj.drugsList = [...lastObj.drugsList]
}
//文本
if (publicizeType.includes(1)) {
//判断模板文本是否选中 并赋值
if (val.contentList) {
//文本内容区域存在 初始值 后面选中的模板内容需要拼接在初始值后面
if (lastObj.contentList && lastObj.contentList.length) {
//合并相同的文本选项内容
resObj.contentList.forEach(item => {
val.contentList.forEach(vitem => {
if (item.templateMode != 5 && item.templateMode == vitem.templateMode) {
item.templateContent = item.templateContent ? item.templateContent + `\n` + vitem.templateContent : vitem.templateContent
}
})
})
//去掉 返回的val中与合并后相同的文本
resObj.contentList.forEach(item => {
let reIndex = val.contentList.findIndex(vitem => vitem.templateMode == item.templateMode)
if (reIndex != -1) {
val.contentList.splice(reIndex, 1)
}
})
//合并剩余的val.contentList到 resObj.contentList中
resObj.contentList = [...resObj.contentList, ...val.contentList]
//合并药物指导
//判断之前是否存在药物指导
if (lastObj.drugsList && lastObj.drugsList.length) {
//获取之前药物指导的最大_id的值
let rowId = 0
rowId = Math.max.apply(null, lastObj.drugsList.map(item => Number(item._id)))
val.drugsList.forEach((item, index) => {
item.id = ''
item._id = rowId + index + 1
})
//合并
resObj.drugsList = [...resObj.drugsList, ...val.drugsList]
} else {
resObj.drugsList = [...val.drugsList]
}
} else {
if (val.contentList) {
resObj.contentList = [...val.contentList]
resObj.drugsList = [...val.drugsList]
}
}
} else {
//模板未选中文本 赋初始值
if (lastObj.contentList && lastObj.contentList.length) {
resObj.contentList = [...lastObj.contentList]
}
}
}
//音频
if (publicizeType.includes(2)) {
//判断模板音频是否选中 并赋值
let mp3List = val.annexList.filter(item => item.type == 2) || []
if (mp3List && mp3List.length) {
if (resObj.annexList && resObj.annexList.length) {
let rowId = 0
rowId = Math.max.apply(null, resObj.annexList.map(item => Number(item.annexId)))
mp3List.forEach((item, index) => {
item['annexId'] = rowId + index + 1
resObj.annexList.push(item)
})
} else {
resObj.annexList = [...mp3List]
}
}
}
//视频
if (publicizeType.includes(3)) {
//判断模板视频是否选中 并赋值
let mp4List = val.annexList.filter(item => item.type == 3) || []
if (mp4List && mp4List.length) {
if (resObj.annexList && resObj.annexList.length) {
let rowId = 0
rowId = Math.max.apply(null, resObj.annexList.map(item => Number(item.annexId)))
mp4List.forEach((item, index) => {
item['annexId'] = rowId + index + 1
resObj.annexList.push(item)
})
} else {
resObj.annexList = [...mp4List]
}
}
}
//对视频音频去重
resObj.annexList = uniqueArr(resObj.annexList, 'relativeUrl')
this.form.publicize = resObj
},
async onSubmit() {
try {
if (this.showTwo) {
await this.$refs.guideRef.submit()
}
if (this.showThree) {
//文本
if (this.form?.publicizeType?.includes(1)) {
await this.$refs.contentOne.submit()
}
//音频
if (this.form?.publicizeType?.includes(2)) {
await this.$refs.contentTwo.submit()
}
//视频
if (this.form?.publicizeType?.includes(3)) {
await this.$refs.contentThree.submit()
}
}
}catch (e) {}
return new Promise((resolve, reject) => {
this.$refs.form.validate().then(async () => {
let time = dayjs(this.form.screenTime).format('YYYY-MM-DD HH:00:00')
let content = `${this.modeEnumList?.urgeResidentShow ? `${this.firstForm?.residentsRecord?.residentName}先生/女士，` : `您好，`}请您于${time}到${this.authInfo.unitName}进行专病高危筛查/慢病复查，祝早日恢复健康！`
const { publicizeType, ...others } = this.form
let publicizeTypeInfo = ''
if (publicizeType && publicizeType instanceof Array) {
publicizeTypeInfo = publicizeType.join()
}
if (publicizeType && typeof publicizeType === 'string') {
publicizeTypeInfo = publicizeType
}
let res = {
...others,
publicizeType: publicizeTypeInfo,
urgentInsContent: content
}
//健康指导
if (this.showTwo) {
let obj = await this.$refs.guideRef.submit()
res.guide = {
contentList: obj.contentList,
drugsList: obj.drugsList
}
}
//宣教内容
if (this.showThree) {
let resObj = {
annexList: [],
contentList: [],
drugsList: []
}
//文本
if (this.form?.publicizeType?.includes(1)) {
let obj1 = await this.$refs.contentOne.submit()
resObj = {
annexList: [],
contentList: obj1.contentList,
drugsList: obj1.drugsList
}
}
//音频
if (this.form?.publicizeType?.includes(2)) {
let obj2 = await this.$refs.contentTwo.submit()
let list = obj2.annexList.filter(item => item.type == 2)
if (!list.length) {
showFailToast('请上传音频')
return
}
resObj = {
...resObj,
annexList: list
}
}
//视频
if (this.form?.publicizeType?.includes(3)) {
let obj3 = await this.$refs.contentThree.submit()
let list = obj3.annexList.filter(item => item.type == 3)
if (!list.length) {
showFailToast('请上传视频')
return
}
resObj = {
...resObj,
annexList: [...resObj.annexList, ...list]
}
}
res.publicize = {
...resObj
}
}
resolve(res)
}).catch((e) => {
console.warn('generaFu error', e)
// reject(e)
})
})
}
}
}
</script>
<style scoped lang='less'>
// 按钮样式
.doc-btn {
border: 0;
padding: 4px 8px;
height: 26px;
border-radius: 38px;
}
.doc-btn-p {
.doc-btn();
color: var(--van-primary-color);
background: #F0F3FF;
font-size: 13px;
}
.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;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
.block {
width: 100%;
height: 300px;
}
}
:deep(.van-cell-group--inset) {
overflow: visible;
}
:deep(.van-cell) {
overflow: visible;
}
//:deep(.van-field__error-message) {
// position: absolute;
// margin-top: 3px;
//}
:deep(.van-cell:after) {
border-bottom: 0px;
}
.warn {
color: #ee0a24;
text-align: left;
}
//灰色
.greyColor {
color: var(--van-text-color-2);
}
//确定按钮颜色
.blueColor {
color: var(--van-primary-color)
}
.pop-title {
color: #262626;
font-size: 16px;
line-height: 24px;
font-weight: bold;
}
:deep(.van-popup) {
min-height: 30% !important;
}
</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>