上传图片预览样式修改1
continuous-integration/drone/push Build is passing Details

uat_us
DESKTOP-6C3NK6N\WXS 2024-08-22 17:02:46 +08:00
parent 3204d1d305
commit 4b8ba07123
3 changed files with 712 additions and 419 deletions

File diff suppressed because it is too large Load Diff

View File

@ -1,14 +1,15 @@
<template> <template>
<div class="ad_review_wrapper"> <div class="ad_review_wrapper">
<div style="text-align:left"> <div style="text-align: left">
<el-button v-if="auditInfo.IsExistsClinicalData" type="text" @click="previewCD"> <el-button
{{ $t('trials:adReview:title:clinicalData') }} v-if="auditInfo.IsExistsClinicalData"
type="text"
@click="previewCD"
>
{{ $t("trials:adReview:title:clinicalData") }}
</el-button> </el-button>
</div> </div>
<el-table <el-table :data="adInfo.VisitInfoList" style="width: 100%">
:data="adInfo.VisitInfoList"
style="width: 100%"
>
<!-- 访视名称 --> <!-- 访视名称 -->
<el-table-column <el-table-column
prop="VisitName" prop="VisitName"
@ -28,7 +29,7 @@
> >
<template> <template>
<el-table-column <el-table-column
v-for="(qs,i) in j.judgeQuestionList" v-for="(qs, i) in j.judgeQuestionList"
:key="i" :key="i"
prop="" prop=""
:label="qs" :label="qs"
@ -36,28 +37,83 @@
width="150" width="150"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if="scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].QuestionType===1"> <div
<span v-if="scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].DictionaryCode">{{ $fd(scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].DictionaryCode, parseInt(scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].Answer )) }}</span> v-if="
<span v-else>{{ scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].Answer }}</span> scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
.QuestionType === 1
"
>
<span
v-if="
scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
.DictionaryCode
"
>{{
$fd(
scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
.DictionaryCode,
parseInt(
scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[
i
].Answer
)
)
}}</span
>
<span v-else>{{
scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
.Answer
}}</span>
</div> </div>
<div v-else-if="scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].QuestionType===2"> <div
<div v-if="scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].Answer"> v-else-if="
<span>{{ $fd('YesOrNo', scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].Answer ) }}</span> scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
.QuestionType === 2
"
>
<div
v-if="
scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
.Answer
"
>
<span>{{
$fd(
"YesOrNo",
scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
.Answer
)
}}</span>
<!-- 查看详情 --> <!-- 查看详情 -->
<el-button <el-button
type="text" type="text"
style="margin-left:5px;" style="margin-left: 5px"
@click="handleViewDetail(scope.row.VisitTaskInfoList[j.index].GlobalVisitTaskId)" @click="
handleViewDetail(
scope.row.VisitTaskInfoList[j.index].GlobalVisitTaskId
)
"
> >
{{ $t('trials:adReview:table:view') }} {{ $t("trials:adReview:table:view") }}
</el-button> </el-button>
</div> </div>
<div v-else> <div v-else>
{{ $fd('YesOrNo', scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].Answer ) }} {{
$fd(
"YesOrNo",
scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
.Answer
)
}}
</div> </div>
</div> </div>
<div v-else>{{ scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].Answer }}</div> <div v-else>
{{
scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
.Answer
}}
</div>
</template> </template>
</el-table-column> </el-table-column>
</template> </template>
@ -73,7 +129,7 @@
<el-button <el-button
type="text" type="text"
:title="$t('trials:adReview:table:viewR1')" :title="$t('trials:adReview:table:viewR1')"
@click="handleView(scope.row,1)" @click="handleView(scope.row, 1)"
> >
R1 R1
</el-button> </el-button>
@ -81,18 +137,18 @@
<el-button <el-button
type="text" type="text"
:title="$t('trials:adReview:table:viewR2')" :title="$t('trials:adReview:table:viewR2')"
@click="handleView(scope.row,2)" @click="handleView(scope.row, 2)"
> >
R2 R2
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<h3>{{ $t('trials:adReview:title:adResult') }}</h3> <h3>{{ $t("trials:adReview:title:adResult") }}</h3>
<el-form <el-form
ref="adForm" ref="adForm"
:model="adForm" :model="adForm"
style="width:800px" style="width: 800px"
label-width="100" label-width="100"
> >
<!-- 选择阅片人 --> <!-- 选择阅片人 -->
@ -100,16 +156,13 @@
:label="$t('trials:adReview:title:choseReader')" :label="$t('trials:adReview:title:choseReader')"
prop="judgeResultTaskId" prop="judgeResultTaskId"
> >
<el-radio-group <el-radio-group v-model="adForm.judgeResultTaskId" disabled>
v-model="adForm.judgeResultTaskId"
disabled
>
<el-radio <el-radio
v-for="t in visitTaskArmList" v-for="t in visitTaskArmList"
:key="t.VisitTaskId" :key="t.VisitTaskId"
:label="t.VisitTaskId" :label="t.VisitTaskId"
> >
{{ $fd('ArmEnum', t.ArmEnum) }} {{ $fd("ArmEnum", t.ArmEnum) }}
</el-radio> </el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
@ -121,14 +174,12 @@
<el-input <el-input
v-model="adForm.judgeResultRemark" v-model="adForm.judgeResultRemark"
type="textarea" type="textarea"
:autosize="{ minRows: 4, maxRows: 6}" :autosize="{ minRows: 4, maxRows: 6 }"
disabled disabled
/> />
</el-form-item> </el-form-item>
<!-- 截图说明 --> <!-- 截图说明 -->
<el-form-item <el-form-item :label="$t('trials:adReview:title:screenShot')">
:label="$t('trials:adReview:title:screenShot')"
>
<el-upload <el-upload
action=".png,.jpg,.jpeg" action=".png,.jpg,.jpeg"
list-type="picture-card" list-type="picture-card"
@ -137,30 +188,41 @@
class="disabled" class="disabled"
> >
<i slot="default" class="el-icon-plus" /> <i slot="default" class="el-icon-plus" />
<div slot="file" slot-scope="{file}"> <div
<viewer :ref="file.url" :images="images"> slot="file"
<img slot-scope="{ file }"
class="el-upload-list__item-thumbnail" style="width: 100%; height: 100%"
:src="OSSclientConfig.basePath + file.url" >
alt="" <viewer
crossorigin="anonymous" :ref="file.url"
:images="images"
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"
alt=""
crossorigin="anonymous"
style="max-width: 100%; max-height: 100%"
/>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
> >
<span class="el-upload-list__item-actions"> <i class="el-icon-zoom-in" />
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in" />
</span>
</span> </span>
</viewer> </span>
</viewer>
</div> </div>
</el-upload> </el-upload>
<el-dialog <el-dialog append-to-body :visible.sync="imgVisible" width="600px">
append-to-body
:visible.sync="imgVisible"
width="600px"
>
<!-- <img width="100%" :src="imageUrl" alt="图片未找到"> --> <!-- <img width="100%" :src="imageUrl" alt="图片未找到"> -->
<el-image :src="imageUrl" width="100%" crossorigin="anonymous"> <el-image :src="imageUrl" width="100%" crossorigin="anonymous">
<!-- <div slot="placeholder" class="image-slot"> <!-- <div slot="placeholder" class="image-slot">
@ -173,138 +235,166 @@
</div> </div>
</template> </template>
<script> <script>
import { getToken } from '@/utils/auth' import { getToken } from "@/utils/auth";
export default { export default {
name: 'AReview', name: "AReview",
props: { props: {
auditInfo: { auditInfo: {
type: Object, type: Object,
default() { default() {
return {} return {};
} },
}, },
rowData: { rowData: {
type: Object, type: Object,
default() { default() {
return {} return {};
} },
} },
}, },
data() { data() {
return { return {
adInfo: {}, adInfo: {},
adForm: {}, adForm: {},
imgVisible: false, imgVisible: false,
imageUrl: '', imageUrl: "",
fileList: [], fileList: [],
visitTaskArmList: [], visitTaskArmList: [],
judgeQuestion: [], judgeQuestion: [],
isFixed: false isFixed: false,
} };
}, },
mounted() { mounted() {
this.initPage() this.initPage();
}, },
methods: { methods: {
initPage() { initPage() {
var JudgeInfo = this.auditInfo.JudgeInfo var JudgeInfo = this.auditInfo.JudgeInfo;
var judgeQS = [] var judgeQS = [];
if (JudgeInfo.VisitInfoList.length > 0) { if (JudgeInfo.VisitInfoList.length > 0) {
JudgeInfo.VisitInfoList[0].VisitTaskInfoList.map((v, index) => { JudgeInfo.VisitInfoList[0].VisitTaskInfoList.map((v, index) => {
var qsObj = { armEnum: v.ArmEnum, judgeQuestionList: [], index: index } var qsObj = {
v.JudgeQuestionList.map(q => { armEnum: v.ArmEnum,
judgeQuestionList: [],
index: index,
};
v.JudgeQuestionList.map((q) => {
if (q.QuestionType === 1) { if (q.QuestionType === 1) {
qsObj.judgeQuestionList.push(q.QuestionName) qsObj.judgeQuestionList.push(q.QuestionName);
} else { } else {
qsObj.judgeQuestionList.push(this.$fd('JudgeReadingQuestionType', q.QuestionType)) qsObj.judgeQuestionList.push(
this.$fd("JudgeReadingQuestionType", q.QuestionType)
);
} }
}) });
judgeQS.push(qsObj) judgeQS.push(qsObj);
}) });
} }
this.judgeQuestion = judgeQS this.judgeQuestion = judgeQS;
this.isFixed = this.judgeQuestion.length > 0 && this.judgeQuestion[0].judgeQuestionList.length > 4 this.isFixed =
this.judgeQuestion.length > 0 &&
this.judgeQuestion[0].judgeQuestionList.length > 4;
this.adInfo = JudgeInfo this.adInfo = JudgeInfo;
this.adForm.judgeResultTaskId = JudgeInfo.JudgeResultTaskId this.adForm.judgeResultTaskId = JudgeInfo.JudgeResultTaskId;
this.adForm.judgeResultRemark = JudgeInfo.JudgeResultRemark this.adForm.judgeResultRemark = JudgeInfo.JudgeResultRemark;
this.fileList = [] this.fileList = [];
if (JudgeInfo.JudgeResultImagePathList) { if (JudgeInfo.JudgeResultImagePathList) {
JudgeInfo.JudgeResultImagePathList.map(url => { JudgeInfo.JudgeResultImagePathList.map((url) => {
if (url) { this.fileList.push({ name: '', url: url }) } if (url) {
}) this.fileList.push({ name: "", url: url });
this.adForm.judgeResultImagePathList = JudgeInfo.JudgeResultImagePathList }
});
this.adForm.judgeResultImagePathList =
JudgeInfo.JudgeResultImagePathList;
} }
this.visitTaskArmList = JudgeInfo.VisitTaskArmList this.visitTaskArmList = JudgeInfo.VisitTaskArmList;
}, },
handlePictureCardPreview(file) { handlePictureCardPreview(file) {
this.images = this.fileList.map(f => this.OSSclientConfig.basePath + f.url) this.images = this.fileList.map(
this.$refs[file.url].$viewer.show() (f) => this.OSSclientConfig.basePath + f.url
);
this.$refs[file.url].$viewer.show();
}, },
handleViewDetail(visitTaskId) { handleViewDetail(visitTaskId) {
console.log(this.rowData) console.log(this.rowData);
var trialId = this.$route.query.trialId var trialId = this.$route.query.trialId;
var token = getToken() var token = getToken();
var criterionType = this.rowData.CriterionType var criterionType = this.rowData.CriterionType;
var readingTool = this.rowData.ReadingTool var readingTool = this.rowData.ReadingTool;
readingTool = isNaN(parseInt(readingTool)) ? null : parseInt(readingTool) readingTool = isNaN(parseInt(readingTool)) ? null : parseInt(readingTool);
var isReadingTaskViewInOrder = this.rowData.IsReadingTaskViewInOrder var isReadingTaskViewInOrder = this.rowData.IsReadingTaskViewInOrder;
var trialReadingCriterionId = this.rowData.TrialReadingCriterionId var trialReadingCriterionId = this.rowData.TrialReadingCriterionId;
var path = '' var path = "";
if (readingTool === 0) { if (readingTool === 0) {
path = `/readingDicoms?TrialReadingCriterionId=${trialReadingCriterionId}&trialId=${trialId}&subjectCode=${this.rowData.SubjectCode}&subjectId=${this.rowData.SubjectId}&visitTaskId=${visitTaskId}&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}&key=${new Date().getTime()}` path = `/readingDicoms?TrialReadingCriterionId=${trialReadingCriterionId}&trialId=${trialId}&subjectCode=${
this.rowData.SubjectCode
}&subjectId=${
this.rowData.SubjectId
}&visitTaskId=${visitTaskId}&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}&key=${new Date().getTime()}`;
} else { } else {
path = `/noneDicomReading?TrialReadingCriterionId=${trialReadingCriterionId}&trialId=${trialId}&subjectCode=${this.rowData.SubjectCode}&subjectId=${this.rowData.SubjectId}&visitTaskId=${visitTaskId}&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}&key=${new Date().getTime()}` path = `/noneDicomReading?TrialReadingCriterionId=${trialReadingCriterionId}&trialId=${trialId}&subjectCode=${
this.rowData.SubjectCode
}&subjectId=${
this.rowData.SubjectId
}&visitTaskId=${visitTaskId}&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}&key=${new Date().getTime()}`;
} }
var routeData = this.$router.resolve({ path }) var routeData = this.$router.resolve({ path });
window.open(routeData.href, '_blank') window.open(routeData.href, "_blank");
}, },
handleView(row, armEnum) { handleView(row, armEnum) {
var task = row.VisitTaskInfoList.find(item => item.ArmEnum === armEnum) var task = row.VisitTaskInfoList.find((item) => item.ArmEnum === armEnum);
var trialId = this.$route.query.trialId var trialId = this.$route.query.trialId;
var token = getToken() var token = getToken();
var criterionType = this.rowData.CriterionType var criterionType = this.rowData.CriterionType;
var readingTool = this.rowData.ReadingTool var readingTool = this.rowData.ReadingTool;
readingTool = isNaN(parseInt(readingTool)) ? null : parseInt(readingTool) readingTool = isNaN(parseInt(readingTool)) ? null : parseInt(readingTool);
var isReadingTaskViewInOrder = this.rowData.IsReadingTaskViewInOrder var isReadingTaskViewInOrder = this.rowData.IsReadingTaskViewInOrder;
var trialReadingCriterionId = this.rowData.TrialReadingCriterionId var trialReadingCriterionId = this.rowData.TrialReadingCriterionId;
var path = '' var path = "";
if (readingTool === 0) { if (readingTool === 0) {
path = `/readingDicoms?TrialReadingCriterionId=${trialReadingCriterionId}&trialId=${trialId}&subjectCode=${this.rowData.SubjectCode}&subjectId=${this.rowData.SubjectId}&visitTaskId=${task.VisitTaskId}&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}&key=${new Date().getTime()}` path = `/readingDicoms?TrialReadingCriterionId=${trialReadingCriterionId}&trialId=${trialId}&subjectCode=${
this.rowData.SubjectCode
}&subjectId=${this.rowData.SubjectId}&visitTaskId=${
task.VisitTaskId
}&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}&key=${new Date().getTime()}`;
} else { } else {
path = `/noneDicomReading?TrialReadingCriterionId=${trialReadingCriterionId}&trialId=${trialId}&subjectCode=${this.rowData.SubjectCode}&subjectId=${this.rowData.SubjectId}&visitTaskId=${task.VisitTaskId}&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}&key=${new Date().getTime()}` path = `/noneDicomReading?TrialReadingCriterionId=${trialReadingCriterionId}&trialId=${trialId}&subjectCode=${
this.rowData.SubjectCode
}&subjectId=${this.rowData.SubjectId}&visitTaskId=${
task.VisitTaskId
}&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}&key=${new Date().getTime()}`;
} }
var routeData = this.$router.resolve({ path }) var routeData = this.$router.resolve({ path });
window.open(routeData.href, '_blank') window.open(routeData.href, "_blank");
}, },
previewCD() { previewCD() {
var token = getToken() var token = getToken();
var trialId = this.$route.query.trialId var trialId = this.$route.query.trialId;
const routeData = this.$router.resolve({ const routeData = this.$router.resolve({
path: `/clinicalData?subjectId=${this.auditInfo.SubjectId}&trialId=${trialId}&visitTaskId=${this.auditInfo.VisitTaskId}&TokenKey=${token}` path: `/clinicalData?subjectId=${this.auditInfo.SubjectId}&trialId=${trialId}&visitTaskId=${this.auditInfo.VisitTaskId}&TokenKey=${token}`,
}) });
window.open(routeData.href, '_blank') window.open(routeData.href, "_blank");
} },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.ad_review_wrapper{ .ad_review_wrapper {
.disabled {
.disabled{
/deep/ .el-upload--picture-card { /deep/ .el-upload--picture-card {
display: none; display: none;
} }
} }
/deep/ .el-upload-list__item { /deep/ .el-upload-list__item {
transition: none !important; transition: none !important;
} }
/deep/ .el-upload-list__item-thumbnail { /deep/ .el-upload-list__item-thumbnail {
/* 图片在方框内显示长边 */ /* 图片在方框内显示长边 */
object-fit: scale-down !important; object-fit: scale-down !important;
} }
} }
</style> </style>

View File

@ -99,7 +99,11 @@
style="width: 300px" style="width: 300px"
> >
<i slot="default" class="el-icon-plus" /> <i slot="default" class="el-icon-plus" />
<div slot="file" slot-scope="{ file }" style="width: 100%; height: 100%"> <div
slot="file"
slot-scope="{ file }"
style="width: 100%; height: 100%"
>
<viewer <viewer
:ref="file.url" :ref="file.url"
:images="images" :images="images"