mim医学审核截图样式修改
DESKTOP-6C3NK6N\WXS
parent
d1bf7f1088
commit
ba3cae7a40
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div class="conclusions">
|
||||
|
||||
<el-form
|
||||
ref="conclusionsForm"
|
||||
v-loading="loading"
|
||||
|
|
@ -12,13 +11,15 @@
|
|||
<el-form-item
|
||||
:label="$t('trials:medicalFeedback:button:isQuestions')"
|
||||
prop="IsHaveQuestion"
|
||||
:rules="[
|
||||
{ required: true, message: $t('common:ruleMessage:select')},
|
||||
]"
|
||||
: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'])"
|
||||
:disabled="
|
||||
isSendMessage ||
|
||||
auditState === 2 ||
|
||||
!hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])
|
||||
"
|
||||
@change="isHaveQuestionChange"
|
||||
>
|
||||
<el-radio
|
||||
|
|
@ -38,16 +39,18 @@
|
|||
maxlength="500"
|
||||
autosize
|
||||
show-word-limit
|
||||
:rules="[
|
||||
{ required: true, message: $t('common:ruleMessage:specify')},
|
||||
]"
|
||||
:rules="[{ required: true, message: $t('common:ruleMessage:specify') }]"
|
||||
>
|
||||
<el-input
|
||||
v-model="form.Questioning"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 3, maxRows: 5}"
|
||||
:autosize="{ minRows: 3, maxRows: 5 }"
|
||||
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>
|
||||
<!-- 审核建议 -->
|
||||
|
|
@ -55,13 +58,15 @@
|
|||
v-if="form.IsHaveQuestion === true"
|
||||
:label="$t('trials:medicalFeedback:title:auditAdviceEnum')"
|
||||
prop="AuditAdviceEnum"
|
||||
:rules="[
|
||||
{ required: true, message: $t('common:ruleMessage:select')},
|
||||
]"
|
||||
: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'])"
|
||||
:disabled="
|
||||
isSendMessage ||
|
||||
auditState === 2 ||
|
||||
!hasPermi(['trials:trials-panel:reading:mim-medical-audit:edit'])
|
||||
"
|
||||
>
|
||||
<el-radio
|
||||
v-for="item of $d.AuditAdvice"
|
||||
|
|
@ -79,26 +84,40 @@
|
|||
>
|
||||
<el-upload
|
||||
:action="accept"
|
||||
:class="{disabled:isSendMessage}"
|
||||
: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"
|
||||
: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}">
|
||||
<viewer :ref="file.url" :images="images">
|
||||
<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"
|
||||
|
|
@ -108,7 +127,7 @@
|
|||
</span>
|
||||
|
||||
<span
|
||||
v-if="!isSendMessage && auditState!==2"
|
||||
v-if="!isSendMessage && auditState !== 2"
|
||||
class="el-upload-list__item-delete"
|
||||
@click="handleRemove(file)"
|
||||
>
|
||||
|
|
@ -130,7 +149,6 @@
|
|||
</el-image>
|
||||
</el-dialog> -->
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<!-- <viewer v-if="imgVisible" :images="[imageUrl]" ref="viewer">
|
||||
<img :src="imageUrl" crossorigin="anonymous" alt="">
|
||||
|
|
@ -140,7 +158,9 @@
|
|||
:visible.sync="chatVisible"
|
||||
:close-on-click-modal="false"
|
||||
width="800px"
|
||||
:title="`${$t('trials:medicalFeedback:title:qaRecord')} (${subjectCode} ${taskBlindName})`"
|
||||
:title="`${$t(
|
||||
'trials:medicalFeedback:title:qaRecord'
|
||||
)} (${subjectCode} ${taskBlindName})`"
|
||||
append-to-body
|
||||
>
|
||||
<ChatForm
|
||||
|
|
@ -170,260 +190,285 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { saveMedicalReviewInfo } from '@/api/trials'
|
||||
import ChatForm from './ChatForm'
|
||||
import CloseQC from './CloseQC'
|
||||
import Viewer from 'v-viewer'
|
||||
import { saveMedicalReviewInfo } from "@/api/trials";
|
||||
import ChatForm from "./ChatForm";
|
||||
import CloseQC from "./CloseQC";
|
||||
import Viewer from "v-viewer";
|
||||
export default {
|
||||
name: 'AuditConclusions',
|
||||
name: "AuditConclusions",
|
||||
components: {
|
||||
ChatForm,
|
||||
CloseQC
|
||||
CloseQC,
|
||||
},
|
||||
props: {
|
||||
medicalReviewInfo: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
return {};
|
||||
},
|
||||
},
|
||||
auditState: {
|
||||
type: Number,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
visitTaskId: {
|
||||
type: String,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
subjectCode: {
|
||||
type: String,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
taskBlindName: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
TaskMedicalReviewId: '',
|
||||
TaskMedicalReviewId: "",
|
||||
IsHaveQuestion: null,
|
||||
Questioning: '',
|
||||
Questioning: "",
|
||||
AuditAdviceEnum: null,
|
||||
FileList: []
|
||||
FileList: [],
|
||||
},
|
||||
|
||||
loading: false,
|
||||
accept: '.png,.jpg,.jpeg',
|
||||
accept: ".png,.jpg,.jpeg",
|
||||
imgVisible: false,
|
||||
imageUrl: '',
|
||||
imageUrl: "",
|
||||
uploadDisabled: false,
|
||||
fileList: [],
|
||||
chatVisible: false,
|
||||
userTypeEnumInt: zzSessionStorage.getItem('userTypeEnumInt') * 1,
|
||||
userTypeEnumInt: zzSessionStorage.getItem("userTypeEnumInt") * 1,
|
||||
isClosedDialog: false,
|
||||
isSendMessage: false,
|
||||
closeQuestionVisible: false,
|
||||
images: []
|
||||
}
|
||||
images: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initializeViewer()
|
||||
this.initForm()
|
||||
this.initializeViewer();
|
||||
this.initForm();
|
||||
},
|
||||
methods: {
|
||||
initForm() {
|
||||
if (Object.keys(this.medicalReviewInfo).length > 0) {
|
||||
for (const k in this.form) {
|
||||
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) {
|
||||
this.form.FileList.map(file => {
|
||||
this.fileList.push({ name: file.FileName, url: file.ImagePath })
|
||||
})
|
||||
this.form.FileList.map((file) => {
|
||||
this.fileList.push({ name: file.FileName, url: file.ImagePath });
|
||||
});
|
||||
}
|
||||
this.isClosedDialog = this.medicalReviewInfo.IsClosedDialog
|
||||
this.isSendMessage = this.medicalReviewInfo.IsSendMessage
|
||||
this.isClosedDialog = this.medicalReviewInfo.IsClosedDialog;
|
||||
this.isSendMessage = this.medicalReviewInfo.IsSendMessage;
|
||||
}
|
||||
},
|
||||
handleSave(isPrompt) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$refs['conclusionsForm'].validate((valid) => {
|
||||
this.$refs["conclusionsForm"].validate((valid) => {
|
||||
if (!valid) {
|
||||
reject()
|
||||
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()
|
||||
})
|
||||
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) => {
|
||||
this.$refs["conclusionsForm"].validate((valid) => {
|
||||
if (!valid) {
|
||||
resolve(false)
|
||||
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()
|
||||
})
|
||||
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)
|
||||
})
|
||||
})
|
||||
this.$refs["conclusionsForm"].validate((valid) => {
|
||||
resolve(valid);
|
||||
});
|
||||
});
|
||||
},
|
||||
handleReply() {
|
||||
this.chatVisible = true
|
||||
this.chatVisible = true;
|
||||
},
|
||||
handleCloseReply() {
|
||||
this.closeQuestionVisible = true
|
||||
this.closeQuestionVisible = true;
|
||||
},
|
||||
isHaveQuestionChange(val) {
|
||||
this.$emit('setIsHaveQuestion', val)
|
||||
this.$emit("setIsHaveQuestion", val);
|
||||
},
|
||||
refresh() {
|
||||
this.isClosedDialog = true
|
||||
this.$emit('getMedicalAuditList')
|
||||
this.$refs['chatForm'].getMessageList()
|
||||
this.$emit('handleSign')
|
||||
this.isClosedDialog = true;
|
||||
this.$emit("getMedicalAuditList");
|
||||
this.$refs["chatForm"].getMessageList();
|
||||
this.$emit("handleSign");
|
||||
},
|
||||
convertBase64ToBlob(imageEditorBase64) {
|
||||
var base64Arr = imageEditorBase64.split(',')
|
||||
var imgtype = ''
|
||||
var base64String = ''
|
||||
var base64Arr = imageEditorBase64.split(",");
|
||||
var imgtype = "";
|
||||
var base64String = "";
|
||||
if (base64Arr.length > 1) {
|
||||
// 如果是图片base64，去掉头信息
|
||||
base64String = base64Arr[1]
|
||||
base64String = base64Arr[1];
|
||||
imgtype = base64Arr[0].substring(
|
||||
base64Arr[0].indexOf(':') + 1,
|
||||
base64Arr[0].indexOf(';')
|
||||
)
|
||||
base64Arr[0].indexOf(":") + 1,
|
||||
base64Arr[0].indexOf(";")
|
||||
);
|
||||
}
|
||||
// 将base64解码
|
||||
var bytes = atob(base64String)
|
||||
var bytes = atob(base64String);
|
||||
// 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码
|
||||
for (var i = 0; i < bytes.length; i++) {
|
||||
byteArray[i] = bytes.charCodeAt(i)
|
||||
byteArray[i] = bytes.charCodeAt(i);
|
||||
}
|
||||
|
||||
// 生成Blob对象（文件对象）
|
||||
return new Blob([bytesCode], { type: imgtype })
|
||||
return new Blob([bytesCode], { type: imgtype });
|
||||
},
|
||||
async uploadScreenshot(param) {
|
||||
this.loading = true
|
||||
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
|
||||
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)
|
||||
console.log(e);
|
||||
}
|
||||
},
|
||||
handleBeforeUpload(file) {
|
||||
// 检测文件类型是否符合要求
|
||||
if (this.checkFileSuffix(file.name)) {
|
||||
return true
|
||||
return true;
|
||||
} else {
|
||||
var msg = this.$t('trials:medicalFeedback:message:format')
|
||||
msg = msg.replace('xxx', this.accept)
|
||||
this.$alert(msg)
|
||||
return false
|
||||
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
|
||||
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
|
||||
return true;
|
||||
}
|
||||
},
|
||||
// 预览图片
|
||||
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.$refs[file.url].$viewer.show()
|
||||
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)
|
||||
var idx = this.fileList.findIndex((i) => i.url === file.url);
|
||||
if (idx === -1) return;
|
||||
this.fileList.splice(idx, 1);
|
||||
},
|
||||
initializeViewer() {
|
||||
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>
|
||||
<style lang="scss" scoped>
|
||||
.conclusions{
|
||||
.disabled{
|
||||
.conclusions {
|
||||
.disabled {
|
||||
/deep/ .el-upload--picture-card {
|
||||
display: none;
|
||||
|
||||
}
|
||||
}
|
||||
/deep/ .el-upload-list__item {
|
||||
/deep/ .el-upload-list__item {
|
||||
transition: none !important;
|
||||
width:140px;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
margin: 0 10px 5px 0;
|
||||
}
|
||||
/deep/ .el-upload-list__item-thumbnail {
|
||||
/* 图片在方框内显示长边 */
|
||||
object-fit: scale-down !important;
|
||||
/deep/ .el-upload-list__item-thumbnail {
|
||||
/* 图片在方框内显示长边 */
|
||||
object-fit: scale-down !important;
|
||||
}
|
||||
.el-radio-group,.el-textarea,.el-input,.el-select{
|
||||
width:300px;
|
||||
.el-radio-group,
|
||||
.el-textarea,
|
||||
.el-input,
|
||||
.el-select {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue