Skip to content

F
frontend-h5
Commit 0f6d77b6 authored by gengchunlei's avatar gengchunlei
Browse files
Options

居民端小程序 v1.2 随访详情 组件引入

parent 8861fdc2
chronic-master-his-1.2.1 chronic-dev chronic-master
1 merge request!1Chronic dev
Hide whitespace changes
Inline Side-by-side
Showing with 958 additions and 262 deletions
src/api/doctor/generalFU.js
View file @ 0f6d77b6
...@@ -72,4 +72,9 @@ export function upLoadMultifile(params) { ...@@ -72,4 +72,9 @@ export function upLoadMultifile(params) {
loading: false, loading: false,
contentType: 'file' contentType: 'file'
}) })
}
//短信重发
export function messageResend(params) {
return fetchBase({ url: `/chronic-admin/v1/chronic-visit-currency/resend-sms`, body: params, loading: true })
} }
\ No newline at end of file
src/doctor/components/imagePreview/imagePreview.vue 0 → 100644
View file @ 0f6d77b6
<template>
<div>
<div class='list gap-x-2.5 gap-y-1 flex items-center flex-wrap'>
<div v-for="(url, index) in imgList" :key="index" @click='toPreview(index)'>
<img style='width: 1.47rem;height: 2.04rem' :src="url.trueDownloadUrl" />
</div>
</div>
<van-overlay :show='imgShow' @click='imgShow = false'>
<div class='wrapper'>
<van-swipe class='block' :initial-swipe='initSwipe'>
<van-swipe-item v-for='image in imgList' :key='image'>
<img :src='image.trueDownloadUrl' style='width: 100%;height: 100%'/>
</van-swipe-item>
</van-swipe>
</div>
</van-overlay>
</div>
</template>
<script>
export default {
name: 'imagePreview',
props: {
imgList: Array,
},
data() {
return {
imgShow: false,
initSwipe: 0
}
},
methods: {
//图片预览
toPreview(index) {
this.initSwipe = index
this.imgShow = true
},
}
}
</script>
<style scoped lang='less'>
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
.block {
width: 100%;
}
}
</style>
\ No newline at end of file
src/doctor/components/mediaPlay/Mp3.vue 0 → 100644
View file @ 0f6d77b6
<template>
<div class="p-1 flex flex-col mp3">
<div v-if="file.annexFileName" class="text-12 mb-1 text-ellipsis">{{ file.annexFileName }}</div>
<div class="flex items-center justify-between gap-x-2.5">
<div class="shrink-0 play-bt" @click="start(file)">
<doc-icon type="doc-play" v-if="!player.playing"/>
<doc-icon type="doc-pause" v-else/>
</div>
<span class="shrink-0 time">{{timeFormat(player.duration)}}</span>
<div class="grow progress">
<van-slider v-model="player.currentTime" :max="sliderMax" :bar-height="6" :button-size="0"
@change="onProgress" />
<!-- <div :style="`width: ${progress}%`"></div> -->
</div>
<span class="shrink-0 time" :style="`opacity: ${player.currentTime ? 1 : 0}`">
{{ timeFormat(player.currentTime) }}</span>
</div>
<audio ref="audio" type="audio/mpeg" crossOrigin="anonymous" style="display: none"></audio>
</div>
</template>
<script>
import { musicPlayer } from './mp3.js'
import { showToast } from 'vant'
export default {
props: {
file: { default: () => ({}) },
activeMediaUrl: { default: '' }
},
data() {
return {
player: {},
// 正在播放的items
activeAudio: {},
}
},
computed: {
sliderMax() {
return this.player.duration ? Math.floor(this.player.duration) : 100
},
progress() {
if (!this.player.currentTime) return 0
const temp = this.player.currentTime / this.player.duration
return Math.round(temp * 1000) / 10
}
},
mounted() {
this.init()
},
methods: {
init() {
this.player = new musicPlayer(this.$refs.audio)
this.player.init()
this.player.setSrc(this.file.annexUrl)
this.player.audioEl.onended = () => {
console.log('播放结束')
this.stop()
}
},
start(item) {
if (!item || !item.annexUrl) {
showToast('文件获取失败')
return
}
if (!this.player.audioCtx) {
this.player.init()
this.player.setSrc(item.annexUrl)
}
if (this.player.playing) {
this.stop()
} else {
this.player.audioEl.play()
this.activeAudio = item
this.player.playing = true
this.$emit('play', item)
}
console.log('this.player', this.player)
},
stop() {
this.player.audioEl.pause()
this.player.playing = false
},
timeFormat(value) {
if (!value) {
return '00:00'
}
let date = Math.ceil(value)
let minutes = Math.floor(date / 60)
let seconds = date % 60
let format = '' + (minutes >= 10 ? minutes : '0' + minutes) + ':' + (seconds >= 10 ? seconds : '0' + seconds)
return format
},
onProgress(value) {
this.player.progressChange(value)
this.player.playing = true
}
},
watch: {
activeMediaUrl(val) {
console.log('activeMediaUrl', val)
if (val !== this.file.annexUrl) {
this.stop()
}
}
}
}
</script>
<style lang="less" scoped>
.mp3 {
background-color: #fff;
.play-bt {
display: inline-flex;
width: 24px;
height: 24px;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #E4F2F0;
font-size: 10px;
padding-left: 2px;
color: var(--van-primary-color);
}
.progress {
// height: 6px;
// border-radius: 4px;
// background: #EFF2F7;
// overflow: hidden;
// text-align: left;
// >div {
// height: 100%;
// background: #54CCBD;
// }
}
}
</style>
src/doctor/components/mediaPlay/Mp4.vue 0 → 100644
View file @ 0f6d77b6
<template>
<div class="mp4">
<div class="flex flex-wrap justify-between video-list">
<div v-for="item in files" :key="item.annexId">
<div class="item">
<div class="shrink-0 play-bt" @click="start(item)">
<doc-icon type="doc-play" />
</div>
</div>
<div v-if="item.annexFileName" class="text-12 my-1 text-ellipsis">{{ item.annexFileName }}</div>
</div>
</div>
<!-- <van-popup v-model:show="visible" :close-on-click-overlay="false" closeable
close-icon-position="top-right"
close-icon="clear">
<video controls v-if="visible" style="width: calc(100vw - var(--van-padding-md) * 2)">
<source :src="activeVideo.annexUrl" type="video/mp4" />
播放失败!
</video>
</van-popup> -->
<van-overlay :show="visible">
<div class="h-full flex items-center justify-center wrapper" @click.stop>
<video controls v-if="visible">
<source :src="activeVideo.annexUrl" type="video/mp4" />
播放失败!
</video>
<van-icon name="close" class="close-icon" @click="visible = false"/>
</div>
</van-overlay>
</div>
</template>
<script>
export default {
props: {
files: { default: () => [] }
},
data() {
return {
visible: false,
activeVideo: {}
}
},
methods: {
start(item) {
this.activeVideo = item
this.visible = true
this.$emit('play', item)
}
}
}
</script>
<style lang="less" scoped>
.video-list {
>div {
width: calc(50% - 5px);
.item {
background: url('@/assets/image/residentWX/video-default.png') no-repeat;
background-size: 100%;
height: .84rem;
display: flex;
align-items: center;
justify-content: center;
}
}
.play-bt {
display: inline-flex;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #E4F2F0;
font-size: 15px;
padding-left: 2px;
}
}
.wrapper {
position: relative;
.close-icon {
position: absolute;
top: 16px;
right: 16px;
color: #ccc;
font-size: 24px;
}
video {
width: calc(100vw - var(--van-padding-md) * 2);
background-color: #fff;
}
}
</style>
src/doctor/components/mediaPlay/mp3.js 0 → 100644
View file @ 0f6d77b6
export class musicPlayer {
constructor(audioEl) {
this.audioEl = audioEl
// 音频上下文
this.audioCtx = null
// 音源
this.audioSource = null
// 时长
this.duration = 0
// 当前播放时间
this.currentTime = 0
// 播放进度
this.progress = 0
// 声音
this.volume = 20
// AnalyserNode 接口表示了一个可以提供实时频域和时域分析信息的节点
this.analyser = null
// 音量节点
this.gainNode = null
// 缓冲进度
this.timeRange = null
// 是否播放中
this.playing = false
}
init() {
// 音频上下文
this.audioCtx = new (window.AudioContext || window.webkitAudioContext)()
if (!this.audioCtx) {
throw new Error('audioCtx is null')
}
// 获取音频数据的节点
this.analyser = this.audioCtx.createAnalyser()
// 音量节点
this.gainNode = this.audioCtx.createGain()
this.gainNode.gain.value = 1
this.audioEl.volume = this.volume / 100
// 从<audio>或<video>元素生成的音频源
this.audioSource = this.audioCtx.createMediaElementSource(this.audioEl)
this.audioEl.ontimeupdate = () => {
this.currentTime = this.audioEl.currentTime
if (this.progress >= this.duration) return
this.progress = this.currentTime
}
this.audioEl.onloadedmetadata = () => {
// 时长
this.duration = this.audioEl.duration
console.log('onloadedmetadata', this.duration)
}
this.audioEl.onprogress = () => {
// 当浏览器正在下载音频/视频时
this.timeRange = this.audioEl.buffered
if (this.timeRange && this.timeRange.length > 0) {
console.log(
'buffered',
this.audioEl.buffered.start(0),
this.audioEl.buffered.end(0)
)
}
}
this.audioEl.oncanplay = () => {
console.log('可播放')
setTimeout(() => {
this.getAudioSource()
}, 100)
}
this.audioEl.onerror = (e) => {
console.error('加载出现错误', e)
this.onerror(e)
}
}
onerror() {}
onended() {}
setSrc(src) {
this.progress = 0
this.audioEl.src = src
}
// 调整进度
progressChange(value) {
this.audioEl.currentTime = value
}
// 调整音量
volumeChange(value) {
this.volume = value
this.audioEl.volume = this.volume / 100
}
// 音频波形处理
getAudioSource() {
// 节点链接到音源
this.audioSource.connect(this.analyser)
// 链接音量节点
this.analyser.connect(this.gainNode)
this.gainNode.connect(this.audioCtx.destination)
return
// 使用快速傅立叶变换(Fast Fourier Transform (FFT) )来捕获音频数据
// this.analyser.fftSize = 2048
this.analyser.fftSize = 256
let bufferLength = this.analyser.frequencyBinCount
let dataArray = new Uint8Array(bufferLength)
let c = this.boardEl
let canvasWidth = c.width
let canvasHeight = c.height
let ctx = c.getContext('2d')
let left = this
ctx.strokeStyle = 'rgba(81,167,255, .5)'
drawBar()
function drawBar() {
// 波形绘制
ctx.clearRect(0, 0, canvasWidth, canvasHeight)
let barWidth = (canvasWidth / bufferLength) * 1
let barHeight = 0
let x = 0
left.analyser.getByteFrequencyData(dataArray)
for (let i = 0; i < bufferLength; i++) {
barHeight = dataArray[i] / 2
let tempColor = barHeight * 3 > 255 ? 255 : barHeight * 3
ctx.fillStyle = 'rgba(' + tempColor + ', 160, 255, .5)'
ctx.fillRect(x, canvasHeight - barHeight / 2, barWidth, barHeight)
x += barWidth + 0.1
}
requestAnimationFrame(drawBar)
}
}
}
src/doctor/components/template/temDetail.vue 0 → 100644
View file @ 0f6d77b6
<template>
</template>
<script>
export default {
name: 'temDetail'
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/doctor/components/template/temList.vue 0 → 100644
View file @ 0f6d77b6
<template>
<van-popup v-model:show="show" position="right" :style="{ height: '100%' }" >
<div>1111111</div>
</van-popup>
</template>
<script>
export default {
name: 'temList',
data() {
return {
show: false
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/doctor/followUp/generalFU/detail/Detail.vue
View file @ 0f6d77b6
<!--通用随访详情-->
<template> <template>
<div> <div class='flex flex-col' style='height: 100vh'>
<van-nav-bar title='随访详情' left-text='' left-arrow @click-left='toBack'></van-nav-bar> <div class='p-3 text-black text-center shrink-0 doc-nav-bar'>
<div class='p-4 detail-info'> <span @click='onBack' class='text-12 back-bt'>
<div class='title'>居民信息</div> <doc-icon type='doc-left2' />
<div class='detail-div mt-3'> </span>
<!-- <div class='flex items-center justify-between'> <span>随访详情</span>
<div class='label'>证件类型</div> </div>
<div>{{ residentInfo.certificateTypeName || '-' }}</div> <div class='px-4 py-3 flex shrink-0 base-info'>
</div> <div class='flex w-full'>
<div class='flex items-center justify-between mt-2'> <div class='grow flex flex-col justify-between'>
<div class='label'>证件号码</div> <div class='flex justify-between'>
<div>{{ residentInfo.idCard || '-' }}</div> <span class='name'>{{ residentInfo.residentName }}</span>
</div>-->
<div class='flex items-center justify-between mt-2'>
<div class='label'>姓名</div>
<div>{{ residentInfo.residentName || '-' }}</div>
</div>
<!-- <div class='flex items-center justify-between mt-2'>
<div class='label'>性别</div>
<div>{{ residentInfo.genderName || '-' }}</div>
</div>
<div class='flex items-center justify-between mt-2'>
<div class='label'>出生日期</div>
<div>{{ residentInfo.dataBirth || '-' }}</div>
</div>-->
<div class='flex items-center justify-between mt-2'>
<div class='label'>本人电话</div>
<div>{{ residentInfo.telephone || '-' }}</div>
</div>
<div class='flex items-center justify-between mt-2'>
<div class='label'>民族</div>
<div>{{ residentInfo.nationalName || '-' }}</div>
</div>
<!-- <div class='flex items-center justify-between mt-2'>
<div class='label'>年龄</div>
<div>{{ residentInfo.currentAge || '-' }} 岁</div>
</div>-->
<div class='flex flex-wrap justify-between mt-2'>
<div class='label'>现住址</div>
<div style='flex: 1'>{{ residentInfo.fullNowAddress || '-' }}</div>
</div>
<div class='flex flex-wrap justify-between mt-2'>
<div class='label'>户籍地址</div>
<div style='flex: 1'>{{ residentInfo.fullPermanentAddress || '-' }}</div>
</div>
</div>
<div class='title mt-3'>联系人信息</div>
<div class='detail-div mt-3'>
<div class='flex items-center justify-between'>
<div class='label'>联系人姓名</div>
<div>{{ residentInfo.contactName || '-' }}</div>
</div>
<div class='flex items-center justify-between mt-2'>
<div class='label'>与居民关系</div>
<div>{{ residentInfo.relationName || '-' }}</div>
</div>
<div class='flex items-center justify-between mt-2'>
<div class='label'>联系电话</div>
<div>{{ residentInfo.contactPhone || '-' }}</div>
</div>
</div>
<div class='title mt-3'>随访信息</div>
<div class='detail-div mt-3'>
<div class='flex items-center justify-between'>
<div>本次随访情况</div>
<div>{{ info.visitSituationName }}</div>
</div>
<div class='flex items-center justify-between mt-2' v-if='info.visitSituation == 2'>
<div>失访原因</div>
<div>
<span v-if='info.lossReason != 9'>{{ info.lossReasonName || '-' }}</span>
<span v-if='info.lossReason == 9'>{{ info.lossReasonOther || '-' }}</span>
</div> </div>
</div> <div class='top-label'>
<div class='flex items-center justify-between mt-2' v-if='info.lossReason == 3'> <div class='mt-3 flex'>
<div>死亡原因</div> <div><span>随访方式：</span><span class='color-b'>{{ info.visitWayName }}</span></div>
<div>{{ info.deathReason }}</div> <div class='ml-4'>随访日期：<span class='color-b'>{{ info.visitDate }}</span></div>
</div> </div>
<div class='flex items-center justify-between mt-2' v-if='info.visitSituation == 1'> <div><span>下次随访日期：</span><span class='color-b'>{{ info.nextVisitDate }}</span></div>
<div>随访方式</div>
<div>{{ info.visitWayName }}</div>
</div>
<div class='white-b mt-2' v-if='showOne && info.visitSituation == 1'>
<span>居民电话： </span><span>{{ residentInfo.telephone || '-' }}</span>
</div>
<div class='white-b mt-2' v-if='showThree && info.visitSituation == 1'>
<div>催检内容：</div>
<div>{{ info.urgentInsContent }}</div>
</div>
<div class='mt-2' v-if='showOne && info.visitSituation == 1'>
<div>随访内容</div>
<div class='white-b mt-2' style='min-height: 60px'>
<div>{{ info.visitContent }}</div>
</div> </div>
</div> </div>
<div class='mt-2' v-if='showOne && info.visitSituation == 1'> </div>
<div>处置意见</div> </div>
<div class='white-b mt-2' style='min-height: 60px'> <div class='p-3 grow cont-box'>
<div>{{ info.disposalOpinion }}</div> <div class='p-3 h-full cont-inner'>
</div> <div class='flex justify-between collapse-head mt-2'>
<span class='text-16 font-semibold'>全部内容</span>
<span @click='toggleAll'>
<span v-if='!collapseAll'>展开全部</span>
<span v-else>收起全部</span>
<span :class="['ml-2 icon-down', { 'icon-down-expanded': collapseAll }]">
<doc-icon type='doc-down' />
</span>
</span>
</div> </div>
<div class='mt-2' v-if='(showOne || showTwo) && info.visitSituation == 1 && info.isHealthGuide == 1'> <van-collapse :model-value='activeCollapse' ref='collapse' class='doc-collapse'
<div>健康指导</div> @change='collapseChange'>
<div class='white-b mt-2'> <van-collapse-item key='1' title='居民信息' name='1'>
<div class='flex flex-wrap mt-2' <template #right-icon>
v-for='(item, index) in healthInterventionsInfo.visitHealthGuideList'> <doc-icon type='doc-down' />
<div v-if="item.name != '无'" class='label'>{{ item.name }}：</div> </template>
<div style='flex: 1'>{{ item.templateContent }}</div> <div class='list'>
<div v-for='item in columnsBase' :key='item.key'>
<div class='flex justify-between py-1 border-bottom item'>
<span class='shrink-0 mr-2 label'>{{ item.title }}</span>
<span v-if="item.key === 'idCard'">{{ $idCardHide(residentInfo.idCard) || '-'
}}</span>
<span class='text-end' v-else>
<span>{{ residentInfo[item.key] || '-' }}</span>
<span v-if='item.unit' class='ml-1'>{{ item.unit }}</span>
</span>
</div>
</div>
</div> </div>
</div> </van-collapse-item>
</div> <van-collapse-item key='2' title='随访人群' name='2'>
<template #right-icon>
<div class='mt-2' v-if='imgList1.length'> <doc-icon type='doc-down' />
<div>随访记录</div> </template>
<div class='flex items-center' style='flex-wrap: wrap'> <div class='list'>
<div v-for='(item, index) in imgList1'> <div class='flex justify-between py-1 border-bottom item'>
<!-- 图片--> <span class='shrink-0 mr-2 label'>随访人群</span>
<div v-if="item.imgFlag == 'img'" class='mt-2'> <span class='text-end'>
<img :src='item.trueDownloadUrl' class='ml-2' style='width: 95px;height: 95px;'> <span>{{ info.groupsArraysName || '-' }}</span>
</span>
</div> </div>
</div> </div>
</div> </van-collapse-item>
<!-- pdf--> <van-collapse-item key='3' title='随访方式' name='3'>
<div> <template #right-icon>
<div v-for='item in imgList1'> <doc-icon type='doc-down' />
<div class='mt-2 pdf' v-if="item.imgFlag == 'pdf'"> </template>
<div class='flex items-center justify-between'> <div class='list'>
<div class='flex items-center' @click.stop='toPdf(item)'> <div class='flex justify-between py-1 border-bottom item'>
<div> <span class='shrink-0 mr-2 label'>随访方式</span>
<doc-icon type='doc-PDF' style='font-size: .48rem'></doc-icon> <span class='text-end'>
</div> <span>{{ info.visitWayName || '-' }}</span>
<div class='ml-1'>{{ item.name }}</div> </span>
</div> </div>
</div>
</van-collapse-item>
<van-collapse-item key='4' title='随访类型' name='4'>
<template #right-icon>
<doc-icon type='doc-down' />
</template>
<div class='list'>
<div class='flex justify-between py-1 border-bottom item'>
<span class='shrink-0 mr-2 label'>随访类型</span>
<span class='text-end'>
<span>{{ info.visitWayRulesName || '-' }}</span>
</span>
</div>
</div>
</van-collapse-item>
<van-collapse-item key='5' title='随访内容' name='5' v-if='showOne'>
<template #right-icon>
<doc-icon type='doc-down' />
</template>
<div class='list'>
<div class='py-1 border-bottom item card'
:style="{textIndent: info.visitContent ? '2em' : '0'}">
<span>{{ info.visitContent || '-' }}</span>
</div>
</div>
</van-collapse-item>
<van-collapse-item key='6' title='处置意见' name='6' v-if='showOne'>
<template #right-icon>
<doc-icon type='doc-down' />
</template>
<div class='list'>
<div class='py-1 border-bottom item card'
:style="{textIndent: info.disposalOpinion ? '2em' : '0'}">
<span>{{ info.disposalOpinion || '-' }}</span>
</div>
</div>
</van-collapse-item>
<van-collapse-item key='7' title='健康指导' name='7' v-if='showTwo'>
<template #right-icon>
<doc-icon type='doc-down' />
</template>
<div>
<div v-if='guideContentList.length' class='flex flex-col card'>
<!-- 文本 -->
<div v-for='item in guideContentList' :key='item.templateMode' class='mb-1 flex'
:style='`order: ${item.templateMode}`'>
<span class='shrink-0 mr-1'
v-if="item.templateModeTrans != '无'">{{ item.templateModeTrans }} :</span>
<span> {{ item.templateContent }}</span>
</div> </div>
</div> </div>
</div> </div>
</div> </van-collapse-item>
</div> <van-collapse-item key='8' title='宣教内容' name='8' v-if='showThree'>
<template #right-icon>
<div class='mt-2' v-if='imgList2.length'> <doc-icon type='doc-down' />
<div>现场随访照片</div> </template>
<div class='flex items-center' style='flex-wrap: wrap'> <div>
<div v-for='(item, index) in imgList2'> <div class='flex flex-col card' v-if='detailInfo?.publicizeType?.includes(1)'>
<!-- 图片--> <!-- 文本 -->
<div v-if="item.imgFlag == 'img'" class='mt-2'> <div v-for='item in contentList' :key='item.templateMode' class='mb-1 flex'
<img :src='item.trueDownloadUrl' class='ml-2' style='width: 95px;height: 95px;'> :style='`order: ${item.templateMode}`'>
<span class='shrink-0 mr-1'
v-if="item.templateModeTrans != '无'">{{ item.templateModeTrans }} :</span>
<span> {{ item.templateContent }}</span>
</div>
</div>
<div class='card mt-2' v-if='detailInfo?.publicizeType?.includes(3)'>
<Mp4 :files='mp4List' :activeMediaUrl='activeMediaUrl'
@play='e => activeMediaUrl = e.annexUrl' />
</div>
<div class='card flex flex-col mt-2' style='row-gap: .06rem;'
v-if='detailInfo?.publicizeType?.includes(2)'>
<Mp3 :file='item' v-for='item in mp3List' :key='item.annexId'
:activeMediaUrl='activeMediaUrl'
@play='e => activeMediaUrl = e.annexUrl' />
</div> </div>
</div> </div>
</div> </van-collapse-item>
<!-- pdf--> <van-collapse-item key='9' title='催检内容' name='9' v-if='showFour'>
<div> <template #right-icon>
<div v-for='item in imgList2'> <doc-icon type='doc-down' />
<div class='mt-2 pdf' v-if="item.imgFlag == 'pdf'"> </template>
<div class='flex items-center justify-between'> <div class='list'>
<div class='flex items-center' @click.stop='toPdf(item)'> <div class='py-1 border-bottom item card'
<div> :style="{textIndent: info.urgentInsContent ? '2em' : '0'}">
<doc-icon type='doc-PDF' style='font-size: .48rem'></doc-icon> <span>{{ info.urgentInsContent || '-' }}</span>
</div> </div>
<div class='ml-1'>{{ item.name }}</div> </div>
</div> </van-collapse-item>
<van-collapse-item key='10' title='上传随访记录' name='10' v-if='showOne'>
<template #right-icon>
<doc-icon type='doc-down' />
</template>
<div>
<image-preview :img-list='info.uploadVisitRecordImageList'></image-preview>
</div>
</van-collapse-item>
<van-collapse-item key='11' title='现场随访照片' name='11'>
<template #right-icon>
<doc-icon type='doc-down' />
</template>
<!-- <div class='list gap-x-2.5 gap-y-1 flex items-center flex-wrap'>
<div v-for="(url, index) in info.sceneVisitImageList" :key="index" >
<img style='width: 1.47rem;height: 2.04rem' :src="url.trueDownloadUrl" />
</div>
</div>-->
<div>
<image-preview :img-list='info.sceneVisitImageList'></image-preview>
</div>
</van-collapse-item>
<van-collapse-item key='12' title='推送渠道' name='12'
v-if='info?.visitWayRules?.includes(2) || info?.visitWayRules?.includes(3) || info?.visitWayRules?.includes(4)'>
<template #right-icon>
<doc-icon type='doc-down' />
</template>
<div class='list'>
<div class='flex justify-between py-1 border-bottom item'>
<span class='shrink-0 mr-2 label'>推送渠道</span>
<span class='text-end'>
<span v-if='info.isSms == 1'>短信</span><span
v-if='info.isSms == 1 && info.isWx == 1'>；</span>
<span v-if='info.isWx == 1'>微信</span>
<span v-if='info.isSms != 1 && info.isWx != 1'>-</span>
</span>
</div>
<div class='flex justify-between py-1 border-bottom item'
v-if='info.isSms == 1 && (info?.visitWayRules?.includes(2) || info?.visitWayRules?.includes(3) || info?.visitWayRules?.includes(4))'>
<span class='shrink-0 mr-2 label'>短信推送情况</span>
<span class='text-end'>
<span>{{ info?.serviceResidents?.messageStateName || '-' }}</span>
<span class='ml-4' v-if='info?.serviceResidents?.messageState == 3' style='font-size: 12px'>
<van-button ghost type='primary' size='small' @click='toReSend'>重发</van-button>
</span>
</span>
</div>
</div>
</van-collapse-item>
<van-collapse-item key='13' title='随访机构' name='13'>
<template #right-icon>
<doc-icon type='doc-down' />
</template>
<div class='list'>
<div v-for='item in columnsOrg' :key='item.key'>
<div class='flex justify-between py-1 border-bottom item'>
<span class='shrink-0 mr-2 label'>{{ item.title }}</span>
<span class='text-end'>
<span>{{ info[item.key] || '-' }}</span>
</span>
</div> </div>
</div> </div>
</div> </div>
</div> </van-collapse-item>
</div> </van-collapse>
<div class='flex items-center justify-between mt-2' v-if='info.visitSituation == 1'>
<div>下次随访日期</div>
<div>{{ info.nextVisitDate || '-' }}</div>
</div>
<div class='flex items-center justify-between mt-2'>
<div>随访单位</div>
<div>{{ info.visitUnitName || '-' }}</div>
</div>
<div class='flex items-center justify-between mt-2'>
<div>随访科室</div>
<div>{{ info.visitOfficeName || '-' }}</div>
</div>
<div class='flex items-center justify-between mt-2'>
<div>随访医生</div>
<div>{{ info.visitDoctorName || '-' }}</div>
</div>
</div> </div>
</div> </div>
<div class='px-5 flex align-center justify-around pt-2 pb-2'>
<van-button type='primary' round plain style='width: 70%;background: #F0F3FF;border: 0px'
@click='toBack'>返回
</van-button>
</div>
</div> </div>
</template> </template>
<script> <script>
import { fetchCurrencyById } from '@/api/doctor/generalFU'
import { showToast } from 'vant' import { showToast } from 'vant'
import { useStore } from '@/doctor/store' import Mp3 from '@/residentWX/components/mediaPlay/Mp3.vue'
import Mp4 from '@/residentWX/components/mediaPlay/Mp4'
import ImagePreview from '@/residentWX/components/imagePreview/imagePreview'
import { fetchCurrencyById, messageResend } from '@/api/doctor/generalFU'
export default { export default {
name: 'Detail', name: 'CurrencyFUDetail.vue',
props: { components: { ImagePreview, Mp4, Mp3 },
id: [String, Number] inject: ['showNav'],
},
data() { data() {
return { return {
store: useStore(), activeCollapse: [],
detailInfo: {
publicizeType: [],
visitWayRules: []
},
collapseList: [
{ title: '居民信息', name: '1' },
{ title: '随访人群', name: '2' },
{ title: '随访方式', name: '3' },
{ title: '随访类型', name: '4' },
{ title: '随访内容', name: '5' },
{ title: '处置意见', name: '6' },
{ title: '健康指导', name: '7' },
{ title: '宣教内容', name: '8' },
{ title: '催检内容', name: '9' },
{ title: '上传随访记录', name: '10' },
{ title: '现场随访照片', name: '11' },
{ title: '推送渠道', name: '12' },
{ title: '下次随访日期', name: '13' },
{ title: '随访机构', name: '14' }
],
// 全部展开、收起
collapseAll: false,
info: {}, info: {},
residentInfo: {} columnsBase: [
{ title: '姓名', key: 'residentName' },
{ title: '证件号码', key: 'idCard' },
{ title: '性别', key: 'genderName' },
{ title: '出生日期', key: 'dataBirth' },
{ title: '年龄', key: 'currentAge' },
{ title: '民族', key: 'nationalName' },
{ title: '本人电话', key: 'telephone' },
{ title: '现住址', key: 'presentCodeName' },
{ title: '详细地址', key: 'nowAddress' },
{ title: '户籍地址', key: 'registeredCodeName' },
{ title: '详细地址', key: 'permanentAddress' }
],
columnsOrg: [
{ title: '随访单位', key: 'visitUnitName' },
{ title: '随访科室', key: 'visitOfficeName' },
{ title: '随访医生', key: 'visitDoctorName' }
],
activeMediaUrl: ''
} }
}, },
computed: { computed: {
routerDetail() { routerDetail() {
return this.$route.query return this.$route.query
}, },
//复检指导 residentInfo() {
return this.info.residentsRecord || {}
},
//复检
showOne() { showOne() {
const { visitWay } = this.info const { visitWayRules = [] } = this.info
let res = false let res = false
if (visitWay == 5 || visitWay == 6 || visitWay == 7 || visitWay == 8) { if (visitWayRules.includes(1)) {
res = true res = true
} }
return res return res
}, },
//微信、短信指导 //指导
showTwo() { showTwo() {
const { visitWay } = this.info const { visitWayRules = [] } = this.info
let res = false let res = false
if (visitWay == 9 || visitWay == 11) { if (visitWayRules.includes(2)) {
res = true res = true
} }
return res return res
}, },
//催检 //宣教
showThree() { showThree() {
const { visitWay } = this.info const { visitWayRules = [] } = this.info
let res = false let res = false
if (visitWay == 10 || visitWay == 12) { if (visitWayRules.includes(3)) {
res = true res = true
} }
return res return res
}, },
//健康指导 //催检
healthInterventionsInfo() { showFour() {
const modeArray = this.store.getDict('DC00084') const { visitWayRules = [] } = this.info
let visitHealthGuideList = [] let res = false
if (this.info.healthGuideContent) { if (visitWayRules.includes(4)) {
visitHealthGuideList = JSON.parse(this.info.healthGuideContent) res = true
}
const res = {
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 res return res
}, },
imgList1() { // 文本内容
const { uploadVisitRecordImageList = [] } = this.info guideContentList() {
uploadVisitRecordImageList.forEach(item => { return this.info?.guide?.contentList || []
item['imgFlag'] = ''
if (item.fileType == 'pdf') {
item['imgFlag'] = 'pdf'
}
if (item.fileType == 'img') {
item['imgFlag'] = 'img'
}
})
return uploadVisitRecordImageList
}, },
imgList2() { // 文本内容
const { sceneVisitImageList = [] } = this.info contentList() {
sceneVisitImageList.forEach(item => { return this.info?.publicize?.contentList || []
item['imgFlag'] = '' },
if (item.fileType == 'pdf') { // 文件内容
item['imgFlag'] = 'pdf' annexList() {
} return this.info?.publicize?.annexList || []
if (item.fileType == 'img') { },
item['imgFlag'] = 'img' mp3List() {
} return this.annexList.filter(e => e.type == 2)
}) },
return sceneVisitImageList mp4List() {
return this.annexList.filter(e => e.type == 3)
} }
}, },
created() { created() {
document.title = '通用随访详情'
this.load() this.load()
}, },
methods: { methods: {
async load() { async load() {
debugger
if (!this.routerDetail.relationId) { if (!this.routerDetail.relationId) {
showToast('未获取到信息') showToast('未获取到信息')
return return
...@@ -305,50 +375,141 @@ export default { ...@@ -305,50 +375,141 @@ export default {
fetchCurrencyById(par).then(res => { fetchCurrencyById(par).then(res => {
let result = res.data || {} let result = res.data || {}
this.info = result this.info = result
this.residentInfo = result.residentsRecord || {} this.dataHandle()
}).finally(() => { }).finally(() => {
}) })
}, },
toBack() { //数据处理
dataHandle() {
const { visitWayRules, publicizeType } = this.info
if (publicizeType) {
this.detailInfo.publicizeType = publicizeType.split(',').map(item => Number(item))
}
if (visitWayRules) {
this.detailInfo.visitWayRules = visitWayRules.split(',').map(item => Number(item))
}
},
//重新发送
toReSend() {
let par = {
id: this.routerDetail.relationId
}
messageResend(par).then(() => {
this.load()
})
},
// 折叠面板切换
collapseChange(val) {
if (val && val.length <= 2) {
this.activeCollapse = val.slice(val.length - 1)
} else {
if (this.activeCollapse.length > val.length) {
this.activeCollapse = val
}
if (this.activeCollapse.length < val.length) {
this.activeCollapse = val.slice(val.length - 1)
}
}
if (val && val.length === this.collapseList.length) {
this.collapseAll = true
} else {
this.collapseAll = false
}
},
// 全部展开、收起
toggleAll() {
if (this.collapseAll) {
this.activeCollapse = []
} else {
this.activeCollapse = this.collapseList.map(e => e.name)
}
this.collapseAll = !this.collapseAll
},
onBack() {
this.$router.back() this.$router.back()
} }
} }
} }
</script> </script>
<style scoped lang='less'> <style lang='less' scoped>
.title { @import url('../../../utils/common.less');
font-weight: bold;
}
.mt-4 { .base-info {
margin-top: 24px; background: linear-gradient(to bottom, #DFF5F4, #fff 50%);
color: #8c8c8c;
.name {
font-weight: 600;
color: #000;
font-size: 18px;
}
.top-label {
font-size: 13px;
line-height: 22px;
}
.color-b {
color: #262626;
}
} }
.detail-info { .cont-box {
height: calc(100vh - 110px); background-color: #f9f9f9;
overflow-y: auto;
.cont-inner {
background: linear-gradient(to bottom, #DFF5F4, #fff .6rem);
border-top-left-radius: .08rem;
border-top-right-radius: .08rem;
}
} }
.detail-div { .collapse-head {
padding: 12px; .icon-down {
border: 1px solid #EEEEEE; vertical-align: middle;
background: #F8FAFC; font-size: .12rem;
border-radius: 8px;
.svg-icon {
transition: all .2s;
}
}
.icon-down-expanded {
.svg-icon {
transform: rotate(-180deg);
}
}
} }
.white-b {
background: #FFFFFF; table {
padding: 12px; text-align: left;
border: 1px solid #EEEEEE; border-bottom: 1px solid var(--van-cell-border-color);
border-radius: 8px;
> tr {
> td {
padding-left: 14px;
padding-bottom: 12px;
&:first-child {
text-align: right;
padding-left: 0;
}
}
}
} }
.label { .list {
width: 104px; .label {
min-width: 5em;
}
} }
:deep(.van-nav-bar .van-icon) { .card {
color: #000000; background-color: #F8FAFC;
padding: 4px 10px;
border-radius: 4px;
color: #4D5665;
} }
</style> </style>
\ No newline at end of file
src/doctor/followUp/generalFU/form/GeneralFUForm.vue
View file @ 0f6d77b6
...@@ -26,7 +26,11 @@ ...@@ -26,7 +26,11 @@
/> />
</div> </div>
<div v-if='showTwo'> <div v-if='showTwo'>
<div class='no-req-label mt-5'>健康指导</div> <div class='flex justify-between items-center'>
<div class='label-title mt-5'>健康指导</div>
<van-button class='doc-btn-primary'>选择内容</van-button>
</div>
<div class='health mt-2'> <div class='health mt-2'>
<div class='health-cell mt-2' v-for='item in form.visitHealthGuideList'> <div class='health-cell mt-2' v-for='item in form.visitHealthGuideList'>
<div class='no-req-label' v-if="item.name != '无'">{{ item.name }}</div> <div class='no-req-label' v-if="item.name != '无'">{{ item.name }}</div>
......
src/doctor/utils/common.less 0 → 100644
View file @ 0f6d77b6
:deep(.doc-tabs) {
border-bottom: 1px solid #EBEBEC;
.van-tab {
font-weight: 500;
}
.van-tabs__line {
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
}
// 顶部导航栏
.doc-nav-bar {
position: relative;
border-bottom: 1px solid #3C3C435C;
font-size: 18px;
font-weight: 600;
.back-bt {
position: absolute;
left: .16rem;
top: 50%;
transform: translateY(-50%);
}
}
// 折叠面板
:deep(.doc-collapse) {
margin-top: .1rem;
&::after {
display: none;
}
.van-cell {
padding: .1rem 0;
color: #8C8C8C;
font-weight: 600;
background: transparent;
&::after {
display: none;
}
.svg-icon {
font-size: .12rem;
transition: all .2s;
}
}
.van-collapse-item {
.van-collapse-item__content {
padding: 0;
color: #262626;
}
&::after {
display: none;
}
}
// 展开
.van-collapse-item__title--expanded {
.svg-icon {
transform: rotate(-180deg);
}
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment