Skip to content

F
frontend-h5
Commit 60c14dac authored by gengchunlei's avatar gengchunlei
Browse files
Options

慢综 医生端 图片预览实现

parent 7dd76a03
Hide whitespace changes
Inline Side-by-side
Showing with 140 additions and 115 deletions
src/doctor/Doctor.vue
View file @ 60c14dac
...@@ -52,7 +52,7 @@ export default { ...@@ -52,7 +52,7 @@ export default {
if (!token) { if (!token) {
token = sessionStorage.getItem('token') token = sessionStorage.getItem('token')
if (process.env.NODE_ENV !== 'production') { if (process.env.NODE_ENV !== 'production') {
token = '83cc8934-c543-45cd-a3fd-364cf6f9739d' token = '812fd32f-f78d-4b49-aaed-ce16f0c80544'
} }
} }
if (token) { if (token) {
......
src/doctor/followUp/generalFU/form/GeneralFUForm.vue
View file @ 60c14dac
...@@ -3,100 +3,102 @@ ...@@ -3,100 +3,102 @@
<van-form ref='form'> <van-form ref='form'>
<div class='title'>随访信息</div> <div class='title'>随访信息</div>
<van-cell-group inset> <van-cell-group inset>
<div v-if="showOne && firstForm.visitSituation == 1"> <div v-if='showOne && firstForm.visitSituation == 1'>
<div class='no-req-label'>随访内容</div> <div class='no-req-label'>随访内容</div>
<van-field <van-field
v-model='form.visitContent' v-model='form.visitContent'
placeholder='随访内容' placeholder='随访内容'
class='input-back mt-2 form-input' class='input-back mt-2 form-input'
rows='2' rows='2'
autosize autosize
type='textarea' type='textarea'
/> />
</div> </div>
<div v-if="showOne && firstForm.visitSituation == 1"> <div v-if='showOne && firstForm.visitSituation == 1'>
<div class='no-req-label mt-5'>处置意见</div> <div class='no-req-label mt-5'>处置意见</div>
<van-field <van-field
v-model='form.idCard' v-model='form.idCard'
rows='2' rows='2'
autosize autosize
type='textarea' type='textarea'
placeholder='处置意见' placeholder='处置意见'
class='input-back mt-2 form-input' class='input-back mt-2 form-input'
/> />
</div> </div>
<div v-if='(showOne || showTwo) && firstForm.visitSituation == 1 && firstForm.isHealthGuide == 1'> <div v-if='(showOne || showTwo) && firstForm.visitSituation == 1 && firstForm.isHealthGuide == 1'>
<div class='no-req-label mt-5'>健康指导</div> <div class='no-req-label mt-5'>健康指导</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>
<van-field <van-field
v-model='item.templateContent' v-model='item.templateContent'
rows='1' rows='1'
autosize autosize
type='textarea' type='textarea'
placeholder='请输入' placeholder='请输入'
class='input-back mt-2 form-input' class='input-back mt-2 form-input'
/> />
</div>
</div> </div>
</div> </div>
</div>
<div v-if="showOne && firstForm.visitSituation == 1"> <div v-if='showOne && firstForm.visitSituation == 1'>
<div class='no-req-label mt-5'>上传随访记录</div> <div class='no-req-label mt-5'>上传随访记录</div>
<div class='tips'> <div class='tips'>
支持上传jpg、png、jpeg文件，大小请在10M以内 支持上传jpg、png、jpeg文件，大小请在10M以内
</div> </div>
<div class='img-btn mt-2' @click="toUpload('imgId')"> <div class='img-btn mt-2' @click="toUpload('imgId')">
<input type='file' id='imgId' multiple @change='choiceImg' style='display: none' :key='new Date().getTime()'> <input type='file' id='imgId' multiple @change='choiceImg' style='display: none'
<div class='flex items-center justify-center'> :key='new Date().getTime()'>
<div> <div class='flex items-center justify-center'>
<doc-icon type='doc-upload' class='doc-up' /> <div>
<doc-icon type='doc-upload' class='doc-up' />
</div>
<div class='ml-2'>上传图片</div>
</div> </div>
<div class='ml-2'>上传图片</div>
</div> </div>
</div>
<div class='flex items-center' style='flex-wrap: wrap'> <div class='flex items-center' style='flex-wrap: wrap'>
<div v-for='(item, index) in imgList'> <div v-for='(item, index) in imgList'>
<!-- 图片--> <!-- 图片-->
<div v-if="item.imgFlag == 'img'" class='mt-2' style='position: relative'> <div v-if="item.imgFlag == 'img'" class='mt-2' style='position: relative'>
<div> <div>
<doc-icon type='doc-remove' class='remove' @click='delImg(item.indexF)'></doc-icon> <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(imgList,index)'>
</div> </div>
<img :src='item.trueDownloadUrl' class='ml-2' style='width: 95px;height: 95px;'
@click='toPreview(index)'>
</div> </div>
</div> </div>
</div> <!-- pdf-->
<!-- pdf--> <div>
<div> <div v-for='item in imgList'>
<div v-for='item in imgList'> <div class='mt-2 pdf' v-if="item.imgFlag == 'pdf'">
<div class='mt-2 pdf' v-if="item.imgFlag == 'pdf'"> <div class='flex items-center justify-between'>
<div class='flex items-center justify-between'> <div class='flex items-center' @click.stop='toPdf(item)'>
<div class='flex items-center' @click.stop='toPdf(item)'> <div>
<div> <doc-icon type='doc-PDF' style='font-size: .48rem'></doc-icon>
<doc-icon type='doc-PDF' style='font-size: .48rem'></doc-icon> </div>
<div class='ml-1'>{{ item.name }}</div>
</div> </div>
<div class='ml-1'>{{ item.name }}</div> <div>
</div>
<div>
<span><doc-icon type='doc-remove' style='font-size: .24rem' <span><doc-icon type='doc-remove' style='font-size: .24rem'
@click='delImg(item.indexF)'></doc-icon></span> @click='delImg(item.indexF)'></doc-icon></span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div v-if="showOne && firstForm.visitSituation == 1"> <div v-if='showOne && firstForm.visitSituation == 1'>
<div class='no-req-label mt-5'>现场随访照片</div> <div class='no-req-label mt-5'>现场随访照片</div>
<div class='tips'> <div class='tips'>
支持上传jpg、png、jpeg文件，大小请在10M以内 支持上传jpg、png、jpeg文件，大小请在10M以内
</div> </div>
<div class='img-btn mt-2' @click="toUpload('imgId2')"> <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'> <input type='file' id='imgId2' multiple @change='choiceImg2' style='display: none'
:key='new Date().getTime()-10000'>
<div class='flex items-center justify-center'> <div class='flex items-center justify-center'>
<div> <div>
<doc-icon type='doc-upload' class='doc-up' /> <doc-icon type='doc-upload' class='doc-up' />
...@@ -113,7 +115,7 @@ ...@@ -113,7 +115,7 @@
<doc-icon type='doc-remove' class='remove' @click='delImg2(item.indexF)'></doc-icon> <doc-icon type='doc-remove' class='remove' @click='delImg2(item.indexF)'></doc-icon>
</div> </div>
<img :src='item.trueDownloadUrl' class='ml-2' style='width: 95px;height: 95px;' <img :src='item.trueDownloadUrl' class='ml-2' style='width: 95px;height: 95px;'
@click='toPreview(index)'> @click='toPreview(imgList2 ,index)'>
</div> </div>
</div> </div>
</div> </div>
...@@ -138,20 +140,31 @@ ...@@ -138,20 +140,31 @@
</div> </div>
</div> </div>
<div v-if="firstForm.visitSituation == 1"> <!-- 图片预览-->
<div class='label-title mt-5'>下次随访日期</div> <van-overlay :show='imgShow' @click='imgShow = false'>
<van-field <div class='wrapper'>
v-model='form.nextVisitDate' <van-swipe class='block' :initial-swipe='initSwipe'>
is-link <van-swipe-item v-for='image in showImgList' :key='image'>
disabled <img :src='image' style='width: 100%;height: 100%'/>
placeholder='下次随访日期' </van-swipe-item>
class='input-back mt-2 form-input' </van-swipe>
@click="showDate = true" </div>
:rules='rules.nextVisitDate' </van-overlay>
/>
<van-popup v-model:show="showDate" position="bottom"> <div v-if='firstForm.visitSituation == 1'>
<van-date-picker @confirm="dataConfirm" @cancel="showDate = false" /> <div class='label-title mt-5'>下次随访日期</div>
</van-popup> <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> </div>
</van-cell-group> </van-cell-group>
</van-form> </van-form>
...@@ -178,7 +191,7 @@ export default { ...@@ -178,7 +191,7 @@ export default {
default: () => { default: () => {
return {} return {}
} }
}, }
}, },
data() { data() {
return { return {
...@@ -191,8 +204,11 @@ export default { ...@@ -191,8 +204,11 @@ export default {
imgInputList1: [], imgInputList1: [],
imgInputList2: [], imgInputList2: [],
showDate: false, showDate: false,
imgShow: false,
showImgList: [],
initSwipe: 0,
rules: { rules: {
nextVisitDate: [{required: true,message: '请选择'}] nextVisitDate: [{ required: true, message: '请选择' }]
} }
} }
}, },
...@@ -206,12 +222,12 @@ export default { ...@@ -206,12 +222,12 @@ export default {
} }
}, },
immediate: true immediate: true
}, }
}, },
computed: { computed: {
//复检指导 //复检指导
showOne() { showOne() {
const {visitWay} = this.firstForm const { visitWay } = this.firstForm
let res = false let res = false
if (visitWay == 5 || visitWay == 6 || visitWay == 7 || visitWay == 8) { if (visitWay == 5 || visitWay == 6 || visitWay == 7 || visitWay == 8) {
res = true res = true
...@@ -220,7 +236,7 @@ export default { ...@@ -220,7 +236,7 @@ export default {
}, },
//微信、短信指导 //微信、短信指导
showTwo() { showTwo() {
const {visitWay} = this.firstForm const { visitWay } = this.firstForm
let res = false let res = false
if (visitWay == 9 || visitWay == 11) { if (visitWay == 9 || visitWay == 11) {
res = true res = true
...@@ -229,7 +245,7 @@ export default { ...@@ -229,7 +245,7 @@ export default {
}, },
//催检 //催检
showThree() { showThree() {
const {visitWay} = this.firstForm const { visitWay } = this.firstForm
let res = false let res = false
if (visitWay == 10 || visitWay == 12) { if (visitWay == 10 || visitWay == 12) {
res = true res = true
...@@ -237,7 +253,7 @@ export default { ...@@ -237,7 +253,7 @@ export default {
return res return res
}, },
imgListInfo1() { imgListInfo1() {
const {uploadVisitRecordImageList = []} = this.info const { uploadVisitRecordImageList = [] } = this.info
uploadVisitRecordImageList.forEach((item, index) => { uploadVisitRecordImageList.forEach((item, index) => {
item['imgFlag'] = '' item['imgFlag'] = ''
item['indexF'] = index + 1 item['indexF'] = index + 1
...@@ -251,7 +267,7 @@ export default { ...@@ -251,7 +267,7 @@ export default {
return uploadVisitRecordImageList return uploadVisitRecordImageList
}, },
imgListInfo2() { imgListInfo2() {
const {sceneVisitImageList = []} = this.info const { sceneVisitImageList = [] } = this.info
sceneVisitImageList.forEach((item, index) => { sceneVisitImageList.forEach((item, index) => {
item['imgFlag'] = '' item['imgFlag'] = ''
item['indexF'] = index + 1 item['indexF'] = index + 1
...@@ -263,7 +279,7 @@ export default { ...@@ -263,7 +279,7 @@ export default {
} }
}) })
return sceneVisitImageList return sceneVisitImageList
}, }
}, },
methods: { methods: {
setForm(info = {}) { setForm(info = {}) {
...@@ -321,9 +337,9 @@ export default { ...@@ -321,9 +337,9 @@ export default {
let input = document.getElementById('imgId') let input = document.getElementById('imgId')
let file = input.files let file = input.files
let newFile = Array.from(file) let newFile = Array.from(file)
let maxIndexF = Math.max(...this.imgList.map(item => item.indexF)); let maxIndexF = Math.max(...this.imgList.map(item => item.indexF))
newFile.forEach((item, index) => { newFile.forEach((item, index) => {
item['indexF'] = maxIndexF+ index + 1 item['indexF'] = maxIndexF + index + 1
item['trueDownloadUrl'] = window.URL.createObjectURL(item) item['trueDownloadUrl'] = window.URL.createObjectURL(item)
item['imgFlag'] = '' item['imgFlag'] = ''
if (item.type == 'application/pdf') { if (item.type == 'application/pdf') {
...@@ -340,9 +356,9 @@ export default { ...@@ -340,9 +356,9 @@ export default {
let input = document.getElementById('imgId2') let input = document.getElementById('imgId2')
let file = input.files let file = input.files
let newFile = Array.from(file) let newFile = Array.from(file)
let maxIndexF = Math.max(...this.imgList2.map(item => item.indexF)); let maxIndexF = Math.max(...this.imgList2.map(item => item.indexF))
newFile.forEach((item, index) => { newFile.forEach((item, index) => {
item['indexF'] = maxIndexF+ index + 1 item['indexF'] = maxIndexF + index + 1
item['trueDownloadUrl'] = window.URL.createObjectURL(item) item['trueDownloadUrl'] = window.URL.createObjectURL(item)
item['imgFlag'] = '' item['imgFlag'] = ''
if (item.type == 'application/pdf') { if (item.type == 'application/pdf') {
...@@ -357,17 +373,15 @@ export default { ...@@ -357,17 +373,15 @@ export default {
this.imgInputList2 = this.imgInputList2.concat(newFile) this.imgInputList2 = this.imgInputList2.concat(newFile)
}, },
//图片预览 //图片预览
toPreview(index) { toPreview(list = [], index) {
// let list = [] let res = []
// this.imgList.forEach(item => { this.showImgList = []
// list.push(item.trueDownloadUrl) list.forEach(item => {
// }) res.push(item.trueDownloadUrl)
// showImagePreview({ })
// images: list, this.showImgList = res
// className: 'custom-image-preview', this.initSwipe = index
// startPosition: index, this.imgShow = true
// loop: false
// })
}, },
//pdf预览 //pdf预览
toPdf(item) { toPdf(item) {
...@@ -393,7 +407,7 @@ export default { ...@@ -393,7 +407,7 @@ export default {
img2: this.imgList2 || [], img2: this.imgList2 || [],
imgInput1: this.imgInputList1, imgInput1: this.imgInputList1,
imgInput2: this.imgInputList2, imgInput2: this.imgInputList2,
...this.form, ...this.form,
healthGuideContent: JSON.stringify(this.form.visitHealthGuideList) healthGuideContent: JSON.stringify(this.form.visitHealthGuideList)
} }
resolve(par) resolve(par)
...@@ -506,7 +520,16 @@ export default { ...@@ -506,7 +520,16 @@ export default {
top: -9px; top: -9px;
z-index: 1; z-index: 1;
} }
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
.block {
width: 100%;
height: 300px;
}
}
:deep(.van-cell-group--inset) { :deep(.van-cell-group--inset) {
overflow: visible; overflow: visible;
...@@ -537,9 +560,10 @@ export default { ...@@ -537,9 +560,10 @@ export default {
} }
.van-swipe__track { .van-swipe__track {
width: 100%!important; width: 100% !important;
} }
.van-swipe-item { .van-swipe-item {
width: 100%!important; width: 100% !important;
} }
</style> </style>
\ No newline at end of file
vue.config.js
View file @ 60c14dac
...@@ -30,11 +30,11 @@ module.exports = defineConfig({ ...@@ -30,11 +30,11 @@ module.exports = defineConfig({
} }
}, },
'/chronic-admin': { '/chronic-admin': {
// target: 'https://beta-tumour.zmnyjk.com', target: 'https://beta-tumour.zmnyjk.com',
target: 'http://192.168.1.43:8900', // target: 'http://192.168.1.43:8900',
changOrigin: true, changOrigin: true,
pathRewrite: { pathRewrite: {
'^/chronic-admin': '/' '^/chronic-admin': '/chronic-admin'
} }
}, },
'/chronic-resident': { '/chronic-resident': {
......
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