阅片页面表格内层问题,部分问题无法使用(截图、附件修改)
continuous-integration/drone/push Build is passing Details

main
wangxiaoshuang 2025-07-22 11:53:28 +08:00
parent 5ef755249c
commit eab207fc35
2 changed files with 117 additions and 81 deletions

View File

@ -21,7 +21,7 @@
<el-table-column :prop="item.Id" :label="item.QuestionName" :key="item.Id"
v-for="item of question.TableQuestions.Questions" show-overflow-tooltip :render-header="renderHeader">
<template slot-scope="scope">
<span v-if="item.Type === 'upload'">
<span v-if="item.Type === 'upload' || item.Type === 'screenshot'">
{{ scope.row[item.Id] === '' ? '' : scope.row[item.Id] ? scope.row[item.Id].split('|').length : '' }}
</span>
<span v-else-if="item.Type === 'number'">
@ -82,7 +82,8 @@
validator: question.Type === 'number' && !question.TypeValue ? validatorNumberInput : (rule, value, callback) => { callback() },
trigger: ['blur', 'change']
}
]" :class="[question.Type === 'group' ? 'mb' : question.Type === 'upload' ? 'uploadWrapper' : '']">
]"
:class="[question.Type === 'group' ? 'mb' : question.Type === 'upload' || question.Type === 'screenshot' ? 'uploadWrapper' : '']">
<!-- 输入框 -->
<el-input v-if="question.Type === 'input'" v-model="questionForm[question.Id]"
:disabled="question.TableQuestionType === 2 || readingTaskState === 2" />
@ -237,18 +238,18 @@
</el-input>
</template>
<!-- 上传图像 -->
<el-upload v-if="question.Type === 'upload'" :disabled="readingTaskState === 2" action
:accept="question.FileType" :limit="question.ImageCount === 0 ? 100 : question.ImageCount"
:on-preview="handlePictureCardPreview"
:before-upload="(file) => { return handleBeforeUpload(file, question.FileType) }"
<el-upload v-if="question.Type === 'upload' || question.Type === 'screenshot'"
:disabled="readingTaskState === 2" action :accept="question.FileType"
:limit="question.ImageCount === 0 ? 100 : question.ImageCount" :on-preview="handlePictureCardPreview"
:before-upload="(file) => { return handleBeforeUpload(file, question.FileType, question.Type) }"
:http-request="uploadScreenshot" :on-remove="handleRemove" :file-list="fileList"
:class="{ disabled: question.ImageCount === 0 ? false : fileList.length >= question.ImageCount }">
<el-button slot="default" class="el-icon-plus" v-if="readingTaskState < 2">
{{ this.$t('common:button:upload') }}
</el-button>
</el-upload>
<viewer v-if="question.Type === 'upload' && imgVisible" :ref="imageUrl" style="margin:0 10px;"
:images="[imageUrl]">
<viewer v-if="(question.Type === 'upload' || question.Type === 'screenshot') && imgVisible" :ref="imageUrl"
style="margin:0 10px;" :images="[imageUrl]">
<img v-show="false" crossorigin="anonymous" :src="imageUrl" alt="Image">
</viewer>
</el-form-item>
@ -275,24 +276,28 @@
</base-model> -->
<!-- 预览文件 -->
<el-dialog v-if="previewVisible" :visible.sync="previewVisible" :title="$t('common:button:preview')"
<!-- <el-dialog v-if="previewVisible" :visible.sync="previewVisible" :title="$t('common:button:preview')"
:fullscreen="true" append-to-body custom-class="base-dialog-wrapper">
<div class="base-modal-body" style="border: 2px solid #ccc; padding: 10px">
<PreviewFile v-if="previewVisible" :file-path="currentPath" :file-type="currentType" />
</div>
</el-dialog>
</el-dialog> -->
</div>
</template>
<script>
import { deleteReadingRowAnswer, getQuestionCalculateRelation, submitTableQuestion, deleteCustomTag } from '@/api/trials'
import QuestionTableFormItem from './QuestionTableFormItem'
import BaseModel from '@/components/BaseModel'
import PreviewFile from '@/components/PreviewFile/index'
// import PreviewFile from '@/components/PreviewFile/index'
import { mapGetters } from 'vuex'
import DicomEvent from '@/views/trials/trials-panel/reading/dicoms/components/DicomEvent'
export default {
name: 'QuestionFormItem',
components: { QuestionTableFormItem, BaseModel, PreviewFile },
components: {
QuestionTableFormItem,
BaseModel,
// PreviewFile
},
props: {
isBaseline: {
type: Boolean,
@ -355,9 +360,9 @@ export default {
digitPlaces: 2,
CalculationTabelList: [],
classArr: [],
previewVisible: false,
currentPath: '',
currentType: '',
// previewVisible: false,
// currentPath: '',
// currentType: '',
markTableQuestions: [],
parentQsId: ''
}
@ -441,12 +446,14 @@ export default {
// }
// }
// }, 300)
if (this.question.Type === 'upload') {
if (this.question.Type === 'upload' || this.question.Type === 'screenshot') {
if (this.questionForm[this.question.Id]) {
this.urls = this.questionForm[this.question.Id].split('|')
this.fileList = []
this.urls.map((url, index) => {
this.fileList.push({ name: `${this.$t('trials:emailManageCfg:title:fileName')}${index + 1}`, url: `${url}` })
var index = url.lastIndexOf('.')
var suffix = url.substring(index + 1, url.length)
this.fileList.push({ name: `${this.$t('trials:emailManageCfg:title:fileName')}${index + 1}(${suffix})`, url: `${url}` })
})
}
}
@ -1249,9 +1256,11 @@ export default {
spinner: 'el-icon-loading'
})
var fileName = param.file.name
var index = fileName.lastIndexOf('.')
var suffix = fileName.substring(index + 1, url.length)
let file = await this.fileToBlob(param.file)
let res = await this.OSSclient.put(`/${this.$route.query.trialId}/Customize/${this.visitTaskId}/${fileName}`, file)
this.fileList.push({ name: `${this.$t('trials:emailManageCfg:title:fileName')}${this.fileList.length + 1}`, url: this.$getObjectName(res.url) })
this.fileList.push({ name: `${this.$t('trials:emailManageCfg:title:fileName')}${this.fileList.length + 1}(${suffix})`, url: this.$getObjectName(res.url) })
this.urls.push(this.$getObjectName(res.url))
this.$emit("setFormItemData", { key: this.question.Id, val: this.urls.length > 0 ? this.urls.join('|') : '', question: this.question })
this.$set(this.QuestionsForm, this.question.Id, this.urls.length > 0 ? this.urls.join('|') : '')
@ -1267,7 +1276,10 @@ export default {
// loading.close()
// })
},
handleBeforeUpload(file, accept) {
handleBeforeUpload(file, accept, type) {
if (type === 'screenshot') {
accept = '.png,.jpeg,.jpg'
}
//
if (this.checkFileSuffix(file.name, accept) || accept === '-1') {
return true
@ -1290,11 +1302,27 @@ export default {
handlePictureCardPreview(file) {
var suffix = file.url.substring(file.url.lastIndexOf(".") + 1)
suffix = suffix ? suffix.toLowerCase() : ''
if (suffix === 'doc' || suffix === 'docx' || suffix === 'pdf') {
if (['ppt',
'pptx',
'doc',
'docx',
'xls',
'xlsx'].includes(suffix)) {
// window.open(this.OSSclientConfig.basePath + file.url,'_blank')
this.currentPath = file.url
this.currentType = suffix
this.previewVisible = true
this.$onlyOffice({
path: file.url,
type: suffix,
title: file.name
})
// this.currentPath = file.url
// this.currentType = suffix
// this.previewVisible = true
} else if (['pdf'].includes(suffix)) {
this.$preview({
path: file.url,
type: 'pdf',
title: file.name,
})
} else {
this.imageUrl = this.OSSclientConfig.basePath + file.url
this.imgVisible = true

View File

@ -11,7 +11,8 @@
validator: question.Type === 'number' && !question.TypeValue ? validatorNumberInput : (rule, value, callback) => { callback() },
trigger: ['blur', 'change']
}
]" :class="[question.Type === 'group' ? 'mb' : question.Type === 'upload' ? 'uploadWrapper' : '']">
]"
:class="[question.Type === 'group' ? 'mb' : question.Type === 'upload' || question.Type === 'screenshot' ? 'uploadWrapper' : '']">
<!-- 输入框 -->
<el-input v-if="question.Type === 'input'" v-model="questionForm[question.Id]"
:disabled="question.TableQuestionType === 2 || (question.IsCopy && type === 'edit' && !isBaseline && questionForm.IsCurrentTaskAdd === 'False')" />
@ -157,41 +158,20 @@
</el-input>
</template>
<!-- 上传图像 -->
<el-upload v-if="question.Type === 'upload'" action :accept="question.FileType"
:limit="question.ImageCount === 0 ? 100 : question.ImageCount" :on-preview="handlePictureCardPreview"
:before-upload="handleBeforeUpload" :http-request="uploadScreenshot" list-type="picture-card"
:on-remove="handleRemove" :file-list="fileList"
<el-upload v-if="question.Type === 'upload' || question.Type === 'screenshot'" :disabled="readingTaskState === 2"
action :accept="question.FileType" :limit="question.ImageCount === 0 ? 100 : question.ImageCount"
:on-preview="handlePictureCardPreview"
:before-upload="(file) => { return handleBeforeUpload(file, question.FileType, question.Type) }"
:http-request="uploadScreenshot" :on-remove="handleRemove" :file-list="fileList"
:class="{ disabled: question.ImageCount === 0 ? false : fileList.length >= question.ImageCount }">
<i slot="default" class="el-icon-plus" />
<div slot="file" slot-scope="{file}">
<viewer :ref="file.url" :images="[imageUrl]" style="
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
">
<img class="el-upload-list__item-thumbnail" :src="OSSclientConfig.basePath + file.url"
crossOrigin="anonymous" alt="" style="max-width: 100%; max-height: 100%" />
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
<i class="el-icon-zoom-in" />
</span>
<span v-if="readingTaskState < 2" class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete" />
</span>
</span>
</viewer>
</div>
<el-button slot="default" class="el-icon-plus" v-if="readingTaskState < 2">
{{ this.$t('common:button:upload') }}
</el-button>
</el-upload>
<el-dialog v-if="question.Type === 'upload'" append-to-body :visible.sync="imgVisible" width="600px">
<el-image :src="imageUrl" width="100%">
<div slot="placeholder" class="image-slot">
{{ $t('trials:readingUnit:qsList:message:loading') }}<span class="dot">...</span>
</div>
</el-image>
</el-dialog>
<viewer v-if="(question.Type === 'upload' || question.Type === 'screenshot') && imgVisible" :ref="imageUrl"
style="margin:0 10px;" :images="[imageUrl]">
<img v-show="false" crossorigin="anonymous" :src="imageUrl" alt="Image">
</viewer>
</el-form-item>
</div>
</template>
@ -298,12 +278,14 @@ export default {
mounted() {
var digitPlaces = Number(localStorage.getItem('digitPlaces'))
this.digitPlaces = digitPlaces === -1 ? this.digitPlaces : digitPlaces
if (this.question.Type === 'upload') {
if (this.question.Type === 'upload' || this.question.Type === 'screenshot') {
if (this.questionForm[this.question.Id]) {
this.urls = this.questionForm[this.question.Id].split('|')
this.fileList = []
this.urls.map(url => {
this.fileList.push({ name: '', url: `${url}` })
this.urls.map((url, index) => {
var index = url.lastIndexOf('.')
var suffix = url.substring(index + 1, url.length)
this.fileList.push({ name: `${this.$t('trials:emailManageCfg:title:fileName')}${index + 1}(${suffix})`, url: `${url}` })
})
}
}
@ -575,32 +557,33 @@ export default {
text: 'Loading',
spinner: 'el-icon-loading'
})
var trialId = this.$route.query.trialId
var subjectId = this.$route.query.trialId
var fileName = param.file.name
var index = fileName.lastIndexOf('.')
var suffix = fileName.substring(index + 1, fileName.length)
var file = await this.fileToBlob(param.file)
const res = await this.OSSclient.put(`/${trialId}/Read/${subjectId}/Visit/${param.file.name}`, file)
this.fileList.push({ name: param.file.name, path: this.$getObjectName(res.url), url: this.$getObjectName(res.url) })
let res = await this.OSSclient.put(`/${this.$route.query.trialId}/Customize/${this.visitTaskId}/${fileName}`, file)
this.fileList.push({ name: `${this.$t('trials:emailManageCfg:title:fileName')}${this.fileList.length + 1}(${suffix})`, url: this.$getObjectName(res.url) })
this.urls.push(this.$getObjectName(res.url))
this.$emit('setFormItemData', { key: this.question.Id, val: this.urls.length > 0 ? this.urls.join('|') : '', question: this.question })
loading.close()
},
handleBeforeUpload(file) {
handleBeforeUpload(file, accept, type) {
if (type === 'screenshot') {
accept = '.png,.jpeg,.jpg'
}
//
if (this.checkFileSuffix(file.name)) {
// this.fileList = []
if (this.checkFileSuffix(file.name, accept) || accept === '-1') {
return true
} else {
let msg = this.$t(
"trials:readingUnit:qsList:message:imageFormat"
).replace("xxx", this.question.FileType)
const msg = this.$t('trials:adReview:title:msg4').replace('xxx', accept)
this.$alert(msg)
return false
}
},
checkFileSuffix(fileName) {
checkFileSuffix(fileName, accept) {
var index = fileName.lastIndexOf('.')
var suffix = fileName.substring(index + 1, fileName.length)
if (this.question.FileType.toLocaleLowerCase().search(suffix.toLocaleLowerCase()) === -1) {
if (accept.toLocaleLowerCase().search(suffix.toLocaleLowerCase()) === -1) {
return false
} else {
return true
@ -610,21 +593,46 @@ export default {
handlePictureCardPreview(file) {
var suffix = file.url.substring(file.url.lastIndexOf(".") + 1)
suffix = suffix ? suffix.toLowerCase() : ''
if (suffix === 'doc' || suffix === 'docx' || suffix === 'pdf') {
window.open(this.OSSclientConfig.basePath + file.url, '_blank')
if (['ppt',
'pptx',
'doc',
'docx',
'xls',
'xlsx'].includes(suffix)) {
// window.open(this.OSSclientConfig.basePath + file.url,'_blank')
this.$onlyOffice({
path: file.url,
type: suffix,
title: file.name
})
// this.currentPath = file.url
// this.currentType = suffix
// this.previewVisible = true
} else if (['pdf'].includes(suffix)) {
this.$preview({
path: file.url,
type: 'pdf',
title: file.name,
})
} else {
this.imageUrl = this.OSSclientConfig.basePath + file.url
// this.imgVisible = true
this.$refs[file.url].$viewer.show()
this.imgVisible = true
this.$nextTick(() => {
this.$refs[this.imageUrl].$viewer.show()
})
}
},
//
handleRemove(file, fileList) {
this.imageUrl = ''
this.fileList.splice(this.fileList.findIndex(f => f.url === file.url), 1)
this.urls.splice(this.fileList.findIndex(f => f === file.url), 1)
this.$emit('setFormItemData', { key: this.question.Id, val: this.urls.length > 0 ? this.urls.join('|') : '', question: this.question })
if (file && file.status === "success") {
this.imageUrl = ''
this.fileList.splice(this.fileList.findIndex(f => f.url === file.url), 1)
this.fileList.forEach((i, index) => {
i.name = `${this.$t('trials:emailManageCfg:title:fileName')}${index + 1}`
})
this.urls.splice(this.fileList.findIndex(f => f === file.url), 1)
this.$emit('setFormItemData', { key: this.question.Id, val: this.urls.length > 0 ? this.urls.join('|') : '', question: this.question })
}
}
}
}