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