XCKJ
/
irc_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mim医学审核截图样式修改

uat_us
DESKTOP-6C3NK6N\WXS 2024-08-20 11:24:43 +08:00
parent d1bf7f1088
commit ba3cae7a40
1 changed files with 200 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

355
src/views/trials/trials-panel/reading/mim-medical-audit/components/Conclusions.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<div class="conclusions"> <div class="conclusions">
<el-form <el-form
ref="conclusionsForm" ref="conclusionsForm"
v-loading="loading" v-loading="loading"
@ -12,13 +11,15 @@
<el-form-item <el-form-item
:label="$t('trials:medicalFeedback:button:isQuestions')" :label="$t('trials:medicalFeedback:button:isQuestions')"
prop="IsHaveQuestion" prop="IsHaveQuestion"
:rules="[ :rules="[{ required: true, message: $t('common:ruleMessage:select') }]"
{ required: true, message: $t('common:ruleMessage:select')},
]"
> >
<el-radio-group <el-radio-group
v-model="form.IsHaveQuestion" v-model="form.IsHaveQuestion"
:disabled="isSendMessage || auditState===2 || !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])" :disabled="
isSendMessage ||
auditState === 2 ||
!hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])
"
@change="isHaveQuestionChange" @change="isHaveQuestionChange"
> >
<el-radio <el-radio
@ -38,16 +39,18 @@
maxlength="500" maxlength="500"
autosize autosize
show-word-limit show-word-limit
:rules="[ :rules="[{ required: true, message: $t('common:ruleMessage:specify') }]"
{ required: true, message: $t('common:ruleMessage:specify')},
]"
> >
<el-input <el-input
v-model="form.Questioning" v-model="form.Questioning"
type="textarea" type="textarea"
:autosize="{ minRows: 3, maxRows: 5}" :autosize="{ minRows: 3, maxRows: 5 }"
maxlength="500" maxlength="500"
:disabled="isSendMessage || auditState===2 || !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])" :disabled="
isSendMessage ||
auditState === 2 ||
!hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])
"
/> />
</el-form-item> </el-form-item>
<!-- 审核建议 --> <!-- 审核建议 -->
@ -55,13 +58,15 @@
v-if="form.IsHaveQuestion === true" v-if="form.IsHaveQuestion === true"
:label="$t('trials:medicalFeedback:title:auditAdviceEnum')" :label="$t('trials:medicalFeedback:title:auditAdviceEnum')"
prop="AuditAdviceEnum" prop="AuditAdviceEnum"
:rules="[ :rules="[{ required: true, message: $t('common:ruleMessage:select') }]"
{ required: true, message: $t('common:ruleMessage:select')},
]"
> >
<el-radio-group <el-radio-group
v-model="form.AuditAdviceEnum" v-model="form.AuditAdviceEnum"
:disabled="isSendMessage || auditState===2 || !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])" :disabled="
isSendMessage ||
auditState === 2 ||
!hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])
"
> >
<el-radio <el-radio
v-for="item of $d.AuditAdvice" v-for="item of $d.AuditAdvice"
@ -79,26 +84,40 @@
> >
<el-upload <el-upload
:action="accept" :action="accept"
:class="{disabled:isSendMessage}" :class="{ disabled: isSendMessage }"
:on-preview="handlePictureCardPreview" :on-preview="handlePictureCardPreview"
:before-upload="handleBeforeUpload" :before-upload="handleBeforeUpload"
:http-request="uploadScreenshot" :http-request="uploadScreenshot"
list-type="picture-card" list-type="picture-card"
:on-remove="handleRemove" :on-remove="handleRemove"
:file-list="fileList" :file-list="fileList"
:disabled="
:disabled="isSendMessage || auditState===2 || !hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])" isSendMessage ||
style="width:300px" auditState === 2 ||
!hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])
"
style="width: 300px"
> >
<i slot="default" class="el-icon-plus" /> <i slot="default" class="el-icon-plus" />
<div slot="file" slot-scope="{file}"> <div slot="file" slot-scope="{ file }" style="width: 100%; height: 100%">
<viewer :ref="file.url" :images="images"> <viewer
:ref="file.url"
:images="images"
style="
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
"
>
<img <img
class="el-upload-list__item-thumbnail" class="el-upload-list__item-thumbnail"
:src="OSSclientConfig.basePath + file.url" :src="OSSclientConfig.basePath + file.url"
crossOrigin="anonymous" crossOrigin="anonymous"
alt="" alt=""
> style="max-width: 100%; max-height: 100%"
/>
<span class="el-upload-list__item-actions"> <span class="el-upload-list__item-actions">
<span <span
class="el-upload-list__item-preview" class="el-upload-list__item-preview"
@ -108,7 +127,7 @@
</span> </span>
<span <span
v-if="!isSendMessage && auditState!==2" v-if="!isSendMessage && auditState !== 2"
class="el-upload-list__item-delete" class="el-upload-list__item-delete"
@click="handleRemove(file)" @click="handleRemove(file)"
> >
@ -130,7 +149,6 @@
</el-image> </el-image>
</el-dialog> --> </el-dialog> -->
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- <viewer v-if="imgVisible" :images="[imageUrl]" ref="viewer"> <!-- <viewer v-if="imgVisible" :images="[imageUrl]" ref="viewer">
<img :src="imageUrl" crossorigin="anonymous" alt=""> <img :src="imageUrl" crossorigin="anonymous" alt="">
@ -140,7 +158,9 @@
:visible.sync="chatVisible" :visible.sync="chatVisible"
:close-on-click-modal="false" :close-on-click-modal="false"
width="800px" width="800px"
:title="`${$t('trials:medicalFeedback:title:qaRecord')} (${subjectCode} ${taskBlindName})`" :title="`${$t(
'trials:medicalFeedback:title:qaRecord'
)} (${subjectCode} ${taskBlindName})`"
append-to-body append-to-body
> >
<ChatForm <ChatForm
@ -170,260 +190,285 @@
</div> </div>
</template> </template>
<script> <script>
import { saveMedicalReviewInfo } from '@/api/trials' import { saveMedicalReviewInfo } from "@/api/trials";
import ChatForm from './ChatForm' import ChatForm from "./ChatForm";
import CloseQC from './CloseQC' import CloseQC from "./CloseQC";
import Viewer from 'v-viewer' import Viewer from "v-viewer";
export default { export default {
name: 'AuditConclusions', name: "AuditConclusions",
components: { components: {
ChatForm, ChatForm,
CloseQC CloseQC,
}, },
props: { props: {
medicalReviewInfo: { medicalReviewInfo: {
type: Object, type: Object,
default() { default() {
return {} return {};
} },
}, },
auditState: { auditState: {
type: Number, type: Number,
required: true required: true,
}, },
visitTaskId: { visitTaskId: {
type: String, type: String,
required: true required: true,
}, },
subjectCode: { subjectCode: {
type: String, type: String,
required: true required: true,
}, },
taskBlindName: { taskBlindName: {
type: String, type: String,
required: true required: true,
} },
}, },
data() { data() {
return { return {
form: { form: {
TaskMedicalReviewId: '', TaskMedicalReviewId: "",
IsHaveQuestion: null, IsHaveQuestion: null,
Questioning: '', Questioning: "",
AuditAdviceEnum: null, AuditAdviceEnum: null,
FileList: [] FileList: [],
}, },
loading: false, loading: false,
accept: '.png,.jpg,.jpeg', accept: ".png,.jpg,.jpeg",
imgVisible: false, imgVisible: false,
imageUrl: '', imageUrl: "",
uploadDisabled: false, uploadDisabled: false,
fileList: [], fileList: [],
chatVisible: false, chatVisible: false,
userTypeEnumInt: zzSessionStorage.getItem('userTypeEnumInt') * 1, userTypeEnumInt: zzSessionStorage.getItem("userTypeEnumInt") * 1,
isClosedDialog: false, isClosedDialog: false,
isSendMessage: false, isSendMessage: false,
closeQuestionVisible: false, closeQuestionVisible: false,
images: [] images: [],
} };
}, },
mounted() { mounted() {
this.initializeViewer() this.initializeViewer();
this.initForm() this.initForm();
}, },
methods: { methods: {
initForm() { initForm() {
if (Object.keys(this.medicalReviewInfo).length > 0) { if (Object.keys(this.medicalReviewInfo).length > 0) {
for (const k in this.form) { for (const k in this.form) {
if (this.medicalReviewInfo.hasOwnProperty(k)) { if (this.medicalReviewInfo.hasOwnProperty(k)) {
this.form[k] = this.medicalReviewInfo[k] this.form[k] = this.medicalReviewInfo[k];
} }
} }
this.fileList = [] this.fileList = [];
if (this.form.FileList) { if (this.form.FileList) {
this.form.FileList.map(file => { this.form.FileList.map((file) => {
this.fileList.push({ name: file.FileName, url: file.ImagePath }) this.fileList.push({ name: file.FileName, url: file.ImagePath });
}) });
} }
this.isClosedDialog = this.medicalReviewInfo.IsClosedDialog this.isClosedDialog = this.medicalReviewInfo.IsClosedDialog;
this.isSendMessage = this.medicalReviewInfo.IsSendMessage this.isSendMessage = this.medicalReviewInfo.IsSendMessage;
} }
}, },
handleSave(isPrompt) { handleSave(isPrompt) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.$refs['conclusionsForm'].validate((valid) => { this.$refs["conclusionsForm"].validate((valid) => {
if (!valid) { if (!valid) {
reject() reject();
} else { } else {
this.form.IsSendDialog = this.form.IsHaveQuestion this.form.IsSendDialog = this.form.IsHaveQuestion;
var files = [] var files = [];
this.fileList.map(file => { this.fileList.map((file) => {
files.push({ FileName: file.name, ImagePath: file.url }) files.push({ FileName: file.name, ImagePath: file.url });
}) });
this.form.FileList = files this.form.FileList = files;
saveMedicalReviewInfo(this.form).then(res => { saveMedicalReviewInfo(this.form)
if (isPrompt) { .then((res) => {
this.$message.success(this.$t('common:message:savedSuccessfully')) if (isPrompt) {
this.$emit('getMedicalAuditList') this.$message.success(
} this.$t("common:message:savedSuccessfully")
this.isSendMessage = this.form.IsHaveQuestion );
resolve() this.$emit("getMedicalAuditList");
}).catch(() => { }
reject() this.isSendMessage = this.form.IsHaveQuestion;
}) resolve();
})
.catch(() => {
reject();
});
} }
}) });
}) });
}, },
save() { save() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.$refs['conclusionsForm'].validate((valid) => { this.$refs["conclusionsForm"].validate((valid) => {
if (!valid) { if (!valid) {
resolve(false) resolve(false);
} else { } else {
this.loading = true this.loading = true;
this.form.IsSendDialog = this.form.IsHaveQuestion this.form.IsSendDialog = this.form.IsHaveQuestion;
var files = [] var files = [];
this.fileList.map(file => { this.fileList.map((file) => {
files.push({ FileName: file.name, ImagePath: file.url }) files.push({ FileName: file.name, ImagePath: file.url });
}) });
this.form.FileList = files this.form.FileList = files;
saveMedicalReviewInfo(this.form).then(res => { saveMedicalReviewInfo(this.form)
this.$emit('getMedicalAuditList') .then((res) => {
this.isSendMessage = this.form.IsHaveQuestion this.$emit("getMedicalAuditList");
this.loading = false this.isSendMessage = this.form.IsHaveQuestion;
resolve(true) this.loading = false;
}).catch(() => { resolve(true);
this.loading = false })
reject() .catch(() => {
}) this.loading = false;
reject();
});
} }
}) });
}) });
}, },
validForm() { validForm() {
return new Promise((resolve) => { return new Promise((resolve) => {
this.$refs['conclusionsForm'].validate((valid) => { this.$refs["conclusionsForm"].validate((valid) => {
resolve(valid) resolve(valid);
}) });
}) });
}, },
handleReply() { handleReply() {
this.chatVisible = true this.chatVisible = true;
}, },
handleCloseReply() { handleCloseReply() {
this.closeQuestionVisible = true this.closeQuestionVisible = true;
}, },
isHaveQuestionChange(val) { isHaveQuestionChange(val) {
this.$emit('setIsHaveQuestion', val) this.$emit("setIsHaveQuestion", val);
}, },
refresh() { refresh() {
this.isClosedDialog = true this.isClosedDialog = true;
this.$emit('getMedicalAuditList') this.$emit("getMedicalAuditList");
this.$refs['chatForm'].getMessageList() this.$refs["chatForm"].getMessageList();
this.$emit('handleSign') this.$emit("handleSign");
}, },
convertBase64ToBlob(imageEditorBase64) { convertBase64ToBlob(imageEditorBase64) {
var base64Arr = imageEditorBase64.split(',') var base64Arr = imageEditorBase64.split(",");
var imgtype = '' var imgtype = "";
var base64String = '' var base64String = "";
if (base64Arr.length > 1) { if (base64Arr.length > 1) {
// 如果是图片base64，去掉头信息 // 如果是图片base64，去掉头信息
base64String = base64Arr[1] base64String = base64Arr[1];
imgtype = base64Arr[0].substring( imgtype = base64Arr[0].substring(
base64Arr[0].indexOf(':') + 1, base64Arr[0].indexOf(":") + 1,
base64Arr[0].indexOf(';') base64Arr[0].indexOf(";")
) );
} }
// 将base64解码 // 将base64解码
var bytes = atob(base64String) var bytes = atob(base64String);
// var bytes = base64; // var bytes = base64;
var bytesCode = new ArrayBuffer(bytes.length) var bytesCode = new ArrayBuffer(bytes.length);
// 转换为类型化数组 // 转换为类型化数组
var byteArray = new Uint8Array(bytesCode) var byteArray = new Uint8Array(bytesCode);
// 将base64转换为ascii码 // 将base64转换为ascii码
for (var i = 0; i < bytes.length; i++) { for (var i = 0; i < bytes.length; i++) {
byteArray[i] = bytes.charCodeAt(i) byteArray[i] = bytes.charCodeAt(i);
} }
// 生成Blob对象（文件对象） // 生成Blob对象（文件对象）
return new Blob([bytesCode], { type: imgtype }) return new Blob([bytesCode], { type: imgtype });
}, },
async uploadScreenshot(param) { async uploadScreenshot(param) {
this.loading = true this.loading = true;
try { try {
var file = await this.fileToBlob(param.file) var file = await this.fileToBlob(param.file);
var trialId = this.$route.query.trialId var trialId = this.$route.query.trialId;
const res = await this.OSSclient.put(`/${trialId}/MedicalReview/${param.file.name}`, file) const res = await this.OSSclient.put(
this.fileList.push({ name: param.file.name, url: this.$getObjectName(res.url) }) `/${trialId}/MedicalReview/${param.file.name}`,
this.loading = false file
);
this.fileList.push({
name: param.file.name,
url: this.$getObjectName(res.url),
});
this.loading = false;
} catch (e) { } catch (e) {
console.log(e) console.log(e);
} }
}, },
handleBeforeUpload(file) { handleBeforeUpload(file) {
// 检测文件类型是否符合要求 // 检测文件类型是否符合要求
if (this.checkFileSuffix(file.name)) { if (this.checkFileSuffix(file.name)) {
return true return true;
} else { } else {
var msg = this.$t('trials:medicalFeedback:message:format') var msg = this.$t("trials:medicalFeedback:message:format");
msg = msg.replace('xxx', this.accept) msg = msg.replace("xxx", this.accept);
this.$alert(msg) this.$alert(msg);
return false return false;
} }
}, },
checkFileSuffix(fileName) { checkFileSuffix(fileName) {
var index = fileName.lastIndexOf('.') var index = fileName.lastIndexOf(".");
var suffix = fileName.substring(index + 1, fileName.length) var suffix = fileName.substring(index + 1, fileName.length);
if (this.accept.toLocaleLowerCase().search(suffix.toLocaleLowerCase()) === -1) { if (
return false this.accept.toLocaleLowerCase().search(suffix.toLocaleLowerCase()) ===
-1
) {
return false;
} else { } else {
return true return true;
} }
}, },
// 预览图片 // 预览图片
handlePictureCardPreview(file) { handlePictureCardPreview(file) {
this.images = this.fileList.map(f => this.OSSclientConfig.basePath + f.url) this.images = this.fileList.map(
(f) => this.OSSclientConfig.basePath + f.url
);
// this.imageUrl = this.OSSclientConfig.basePath + file.url // this.imageUrl = this.OSSclientConfig.basePath + file.url
this.$refs[file.url].$viewer.show() this.$refs[file.url].$viewer.show();
}, },
// 删除图片 // 删除图片
handleRemove(file, fileList) { handleRemove(file, fileList) {
var idx = this.fileList.findIndex(i => i.url === file.url) var idx = this.fileList.findIndex((i) => i.url === file.url);
if (idx === -1) return if (idx === -1) return;
this.fileList.splice(idx, 1) this.fileList.splice(idx, 1);
}, },
initializeViewer() { initializeViewer() {
Viewer.setDefaults({ Viewer.setDefaults({
toolbar: { zoomIn: true, zoomOut: true, rotateLeft: true, rotateRight: true, flipHorizontal: true, flipVertical: true } toolbar: {
}) zoomIn: true,
} zoomOut: true,
} rotateLeft: true,
} rotateRight: true,
flipHorizontal: true,
flipVertical: true,
},
});
},
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.conclusions{ .conclusions {
.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;
width:140px; width: 140px;
height: 140px; height: 140px;
margin: 0 10px 5px 0; margin: 0 10px 5px 0;
} }
/deep/ .el-upload-list__item-thumbnail { /deep/ .el-upload-list__item-thumbnail {
/* 图片在方框内显示长边 */ /* 图片在方框内显示长边 */
object-fit: scale-down !important; object-fit: scale-down !important;
} }
.el-radio-group,.el-textarea,.el-input,.el-select{ .el-radio-group,
width:300px; .el-textarea,
.el-input,
.el-select {
width: 300px;
} }
} }
</style> </style>