542 lines
17 KiB
Plaintext
542 lines
17 KiB
Plaintext
<template>
|
|
<div v-loading="loading" class="chat-wrapper">
|
|
<div class="chat-content">
|
|
<div v-for="(record,index) in recordContent" :key="index">
|
|
<div v-if="!record.IsCurrentUser" class="word">
|
|
<!-- <img :src="record.headUrl"> -->
|
|
<img v-if="record.UserTypeEnum*1 === 8" :src="adminAvatar" alt="Admin">
|
|
<img v-else-if="record.UserTypeEnum*1 === 1" :src="pmAvatar" alt="PM">
|
|
<img v-else-if="record.UserTypeEnum*1 === 2" :src="crcAvatar" alt="CRC">
|
|
<img v-else-if="record.UserTypeEnum*1 === 3" :src="qcAvatar" alt="QC">
|
|
<div class="info">
|
|
<p class="user-info">
|
|
<span style="font-weight:700;">{{ record.CreateUserName }} </span>
|
|
<span>({{ record.CreateTime }}) </span>
|
|
</p>
|
|
<div class="info-content" v-html="record.TalkContent" />
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="word-my">
|
|
<div class="info">
|
|
<p class="user-info">
|
|
<span style="font-weight:700;">{{ record.CreateUserName }} </span>
|
|
<span>({{ record.CreateTime }}) </span>
|
|
</p>
|
|
<div class="info-content" v-html="record.TalkContent" />
|
|
</div>
|
|
<!-- <img :src="record.headUrl"> -->
|
|
<img v-if="record.UserTypeEnum*1 === 8" :src="adminAvatar" alt="Admin">
|
|
<img v-else-if="record.UserTypeEnum*1 === 1" :src="pmAvatar" alt="PM">
|
|
<img v-else-if="record.UserTypeEnum*1 === 2" :src="crcAvatar" alt="CRC">
|
|
<img v-else-if="record.UserTypeEnum*1 === 3" :src="qcAvatar" alt="QC">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-show="showNewMessage"
|
|
v-if="hasPermi(['trials:trials-panel:visit:crc-upload:send'])"
|
|
class="chat-message"
|
|
>
|
|
<div class="message">
|
|
<el-input
|
|
v-model="newMessage"
|
|
type="textarea"
|
|
:rows="2"
|
|
/>
|
|
</div>
|
|
<div class="function">
|
|
<!-- 申请重传 -->
|
|
<el-button
|
|
v-show="ReuploadEnum === 0 || ReuploadEnum === 3"
|
|
v-hasPermi="['trials:trials-panel:visit:crc-upload:apply-reupload']"
|
|
type="primary"
|
|
@click="handleCRCApplyReupload"
|
|
>
|
|
{{ $t('trials:crcQuestion:button:applyReupload') }}
|
|
</el-button>
|
|
<!-- 重传 -->
|
|
<el-button
|
|
v-show="ReuploadEnum === 2"
|
|
v-hasPermi="['trials:trials-panel:visit:crc-upload:reupload']"
|
|
type="primary"
|
|
:loading="uploadBtnLoading"
|
|
@click="openUploadDialog"
|
|
>
|
|
{{ $t('trials:crcQuestion:button:reupload') }}
|
|
</el-button>
|
|
<!-- 确认重传完成 -->
|
|
<el-button
|
|
v-show=" ReuploadEnum === 2"
|
|
v-hasPermi="['trials:trials-panel:visit:crc-upload:set-reupload-finished']"
|
|
type="primary"
|
|
@click="handleSetUploadFinished"
|
|
>
|
|
{{ $t('trials:crcQuestion:button:reuploadCompleted') }}
|
|
</el-button>
|
|
<!-- 发送 -->
|
|
<el-button
|
|
v-hasPermi="['trials:trials-panel:visit:crc-upload:send']"
|
|
:disabled="newMessage===''"
|
|
type="primary"
|
|
:loading="btnLoading"
|
|
@click="handleReply"
|
|
>
|
|
{{ $t('trials:crcQuestion:button:send') }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 上传Dicom/非Dicom文件 -->
|
|
<el-dialog
|
|
v-if="uploadVisible"
|
|
:visible.sync="uploadVisible"
|
|
:fullscreen="true"
|
|
append-to-body
|
|
custom-class="upload-dialog"
|
|
>
|
|
<span slot="title">
|
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
|
<label style="float: left;margin-right:10px;">Upload: </label>
|
|
<el-breadcrumb-item v-show="trialCode">{{ trialCode }}</el-breadcrumb-item>
|
|
<el-breadcrumb-item v-show="data.TrialSiteCode">{{ data.TrialSiteCode }}</el-breadcrumb-item>
|
|
<el-breadcrumb-item v-show="data.SubjectCode">{{ data.SubjectCode }}</el-breadcrumb-item>
|
|
<el-breadcrumb-item v-show="data.VisitName">{{ `${data.VisitName} (${data.VisitNum})` }}</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</span>
|
|
<div>
|
|
<el-tabs v-model="activeName" type="border-card">
|
|
<!-- DICOM影像上传 -->
|
|
<el-tab-pane :label="$t('trials:uploadedDicoms:tab:uploadDicoms')" name="dicom">
|
|
<upload-dicom-files v-if="uploadVisible" :data="data" :subject-id="data.SubjectId" :subject-visit-id="data.SubjectVisitId" @close="closeUpload" @getList="reFreshList" />
|
|
</el-tab-pane>
|
|
<!-- 非DICOM影像上传 -->
|
|
<el-tab-pane :label="$t('trials:uploadNonDicoms:tab:uploadNonDicoms')" name="non-dicom">
|
|
<upload-non-dicom-files v-if="activeName==='non-dicom'" :data="data" :site-id="data.SiteId" :subject-id="data.SubjectId" :allow-add-or-edit="true" :body-parts="bodyParts" :modalities="modalities" :subject-visit-id="data.SubjectVisitId" @getList="reFreshList" />
|
|
</el-tab-pane>
|
|
<!-- 临床数据采集 -->
|
|
<el-tab-pane v-if="data.IsBaseLine && clinicalEnum>0" :label="$t('trials:uploadClinicalData:tab:uploadClinicalData')" name="clinical-data">
|
|
<upload-clinical-data v-if="activeName==='clinical-data'" :allow-add-or-edit="true" :data="data" :subject-visit-id="data.SubjectVisitId" :enum-type="clinicalEnum" @getList="reFreshList" />
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<!-- 临床数据签名框 -->
|
|
<el-dialog
|
|
v-if="signVisible"
|
|
:visible.sync="signVisible"
|
|
:close-on-click-modal="false"
|
|
width="600px"
|
|
append-to-body
|
|
custom-class="base-dialog-wrapper"
|
|
>
|
|
<div slot="title">
|
|
<span style="font-size:18px;">{{ $t('common:dialogTitle:sign') }}</span>
|
|
<span style="font-size:12px;margin-left:5px">{{ `(${$t('common:label:sign')}${ currentUser })` }}</span>
|
|
</div>
|
|
<SignForm ref="signForm" :sign-code-enum="signCode" :subject-visit-id="data.SubjectVisitId" @closeDialog="closeReuploadFinishedDialog" />
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getQCChallengeDialogList, addQCChallengeReply, cRCRequestReUpload, verifyReuploadIsCanJump } from '@/api/trials'
|
|
import { setReuploadFinished } from '@/api/trials/visit'
|
|
import adminAvatar from '@/assets/Admin.png'
|
|
import pmAvatar from '@/assets/PM.png'
|
|
import crcAvatar from '@/assets/CRC.png'
|
|
import qcAvatar from '@/assets/QC.png'
|
|
import UploadDicomFiles from '@/views/trials/trials-panel/visit/crc-upload/components/uploadDicomFiles'
|
|
import UploadNonDicomFiles from '@/views/trials/trials-panel/visit/crc-upload/components/uploadNonDicomFiles'
|
|
import UploadClinicalData from '@/views/trials/trials-panel/visit/crc-upload/components/uploadClinicalData'
|
|
import SignForm from '@/views/trials/components/newSignForm'
|
|
import dicomStore from '@/utils/dicom-store'
|
|
import const_ from '@/const/sign-code'
|
|
export default {
|
|
name: 'ChatForm',
|
|
components: { UploadDicomFiles, UploadNonDicomFiles, UploadClinicalData, SignForm },
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
},
|
|
bodyParts: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
modalities: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
signText: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
clinicalEnum: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
recordContent: [],
|
|
newMessage: '',
|
|
showNewMessage: false,
|
|
loading: false,
|
|
btnLoading: false,
|
|
userId: zzSessionStorage.getItem('userId'),
|
|
adminAvatar,
|
|
pmAvatar,
|
|
crcAvatar,
|
|
qcAvatar,
|
|
trialCode: this.$route.query.trialCode,
|
|
needReUpload: false,
|
|
uploadVisible: false,
|
|
setUploadLoading: false,
|
|
activeName: 'dicom',
|
|
isReuploaded: false,
|
|
currentUser: zzSessionStorage.getItem('userName'),
|
|
signVisible: false,
|
|
signCode: '',
|
|
ReuploadEnum: 0,
|
|
trialId: '',
|
|
uploadBtnLoading: false
|
|
|
|
}
|
|
},
|
|
mounted() {
|
|
this.trialId = this.$route.query.trialId
|
|
if (!this.data.IsClosed) {
|
|
this.showNewMessage = true
|
|
}
|
|
this.ReuploadEnum = this.data.ReuploadEnum * 1
|
|
this.getMessageList()
|
|
},
|
|
methods: {
|
|
// 初始化聊天信息
|
|
getMessageList() {
|
|
var recordContent = []
|
|
var contents = []
|
|
if (this.data.Content && this.data.Content.indexOf('|') !== -1) {
|
|
contents = this.data.Content.split('|')
|
|
} else if (this.data.Content && this.data.Content !== '') {
|
|
contents.push(this.data.Content)
|
|
}
|
|
|
|
var li = contents.map(content => { return `<li>${content}</li>` })
|
|
const content = `
|
|
<div>${this.$t('trials:qcQuality:dialog:qcContent')}
|
|
<ol>
|
|
${li.join('')}
|
|
</ol>
|
|
</div>
|
|
<p>
|
|
${this.$t('trials:qcQuality:dialogTips:tip')}
|
|
</p>
|
|
<p style='color:red'>${this.$t('trials:qcQuality:dialog:deadline')}: ${this.data.DeadlineTime ? this.data.DeadlineTime : this.$t('trials:qcQuality:dialog:none')}}</p>`
|
|
const userId = zzSessionStorage.getItem('userId')
|
|
recordContent.push(
|
|
{
|
|
IsCurrentUser: this.data.CreateUserId === userId,
|
|
TalkContent: content,
|
|
CreateTime: this.data.CreateTime,
|
|
CreateUserName: this.data.CreateUserName,
|
|
CreateUserId: this.data.CreateUserId,
|
|
UserTypeEnum: this.data.UserTypeEnum
|
|
}
|
|
)
|
|
this.data.DialogList.forEach(element => {
|
|
recordContent.push(element)
|
|
})
|
|
this.recordContent = recordContent
|
|
this.setScrollHeight()
|
|
},
|
|
addMessage(newMsg) {
|
|
this.recordContent.push(newMsg)
|
|
this.setScrollHeight()
|
|
},
|
|
getMessageList2() {
|
|
this.loading = true
|
|
var recordContent = []
|
|
var contents = []
|
|
if (this.data.Content && this.data.Content.indexOf('|') !== -1) {
|
|
contents = this.data.Content.split('|')
|
|
} else if (this.data.Content && this.data.Content !== '') {
|
|
contents.push(this.data.Content)
|
|
}
|
|
|
|
var li = contents.map(content => { return `<li>${content}</li>` })
|
|
const content = `
|
|
<div>${this.$t('trials:qcQuality:dialog:qcContent')}
|
|
<ol>
|
|
${li.join('')}
|
|
</ol>
|
|
</div>
|
|
<p>
|
|
${this.$t('trials:qcQuality:dialogTips:tip')}
|
|
</p>
|
|
<p style='color:red'>${this.$t('trials:qcQuality:dialog:deadline')}: ${this.data.DeadlineTime ? this.data.DeadlineTime : this.$t('trials:qcQuality:dialog:none')}}</p>`
|
|
const userId = zzSessionStorage.getItem('userId')
|
|
recordContent.push(
|
|
{
|
|
IsCurrentUser: this.data.CreateUserId === userId,
|
|
TalkContent: content,
|
|
CreateTime: this.data.CreateTime,
|
|
CreateUserName: this.data.CreateUserName,
|
|
CreateUserId: this.data.CreateUserId,
|
|
UserTypeEnum: this.data.UserTypeEnum
|
|
}
|
|
)
|
|
getQCChallengeDialogList(this.data.Id).then(res => {
|
|
this.loading = false
|
|
res.Result.forEach(element => {
|
|
recordContent.push(element)
|
|
})
|
|
this.recordContent = recordContent
|
|
this.setScrollHeight()
|
|
}).catch(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
setScrollHeight() {
|
|
setTimeout(() => {
|
|
var container = document.querySelectorAll('.chat-content')[0]
|
|
container.scrollTop = container.scrollHeight
|
|
}, 100)
|
|
},
|
|
// 回复质疑
|
|
handleReply() {
|
|
if (!this.newMessage) return
|
|
this.btnLoading = true
|
|
var params = {
|
|
talkContent: this.newMessage,
|
|
qcChallengeId: this.data.Id,
|
|
subjectVisitId: this.data.SubjectVisitId
|
|
}
|
|
addQCChallengeReply(this.trialId, params).then(res => {
|
|
this.btnLoading = false
|
|
if (res.IsSuccess) {
|
|
// this.getMessageList()
|
|
this.newMessage = ''
|
|
this.reFreshList()
|
|
}
|
|
}).catch(() => { this.btnLoading = false })
|
|
},
|
|
// 打开重传框
|
|
openUploadDialog() {
|
|
const qcChallengeId = this.data.Id
|
|
if (!qcChallengeId) return
|
|
this.uploadBtnLoading = true
|
|
verifyReuploadIsCanJump(this.trialId, qcChallengeId).then(res => {
|
|
this.uploadBtnLoading = false
|
|
if (res.IsSuccess) {
|
|
dicomStore.studyList = []
|
|
this.uploadVisible = true
|
|
}
|
|
}).catch(() => {
|
|
// this.getMessageList()
|
|
|
|
this.$emit('getDialogList')
|
|
this.uploadBtnLoading = false
|
|
})
|
|
},
|
|
// 刷新父组件列表
|
|
reFreshList() {
|
|
this.$emit('getDialogList')
|
|
},
|
|
// 关闭上传弹框
|
|
closeUpload() {
|
|
this.uploadVisible = true
|
|
},
|
|
// CRC申请重传
|
|
handleCRCApplyReupload() {
|
|
this.$confirm(this.$t('trials:crcQuestion:message:applyReupload'), {
|
|
type: 'warning',
|
|
distinguishCancelAndClose: true
|
|
})
|
|
.then(() => {
|
|
this.loading = true
|
|
cRCRequestReUpload(this.trialId, this.data.SubjectVisitId, this.data.Id)
|
|
.then(res => {
|
|
if (res.IsSuccess) {
|
|
this.ReuploadEnum = 1
|
|
this.$message.success(this.$t('common:message:savedSuccessfully'))
|
|
// this.getMessageList()
|
|
this.reFreshList()
|
|
}
|
|
this.loading = false
|
|
}).catch(() => { this.loading = false })
|
|
}).catch(() => {})
|
|
},
|
|
// 设置重传完成
|
|
handleSetUploadFinished() {
|
|
// 签名认证
|
|
if (this.clinicalEnum > 0 && this.data.IsBaseLine) {
|
|
const { ClinicalDataConfirmation } = const_.processSignature
|
|
this.signCode = ClinicalDataConfirmation
|
|
this.signVisible = true
|
|
} else {
|
|
this.$confirm(this.$t('trials:crcQuestion:message:reuploadConfirm'), {
|
|
type: 'warning',
|
|
distinguishCancelAndClose: true
|
|
})
|
|
.then(() => {
|
|
this.setReuploadFinished()
|
|
}).catch(() => {})
|
|
}
|
|
},
|
|
setReuploadFinished(signInfo) {
|
|
this.loading = true
|
|
var params = {
|
|
data: {
|
|
QcChallengeId: this.data.Id,
|
|
TrialId: this.trialId,
|
|
SetOrCancel: true
|
|
},
|
|
signInfo: signInfo
|
|
}
|
|
setReuploadFinished(params)
|
|
.then(res => {
|
|
if (signInfo) {
|
|
this.$refs['signForm'].btnLoading = false
|
|
this.signVisible = false
|
|
}
|
|
this.loading = false
|
|
if (res.IsSuccess) {
|
|
this.ReuploadEnum = 3
|
|
this.$message.success(this.$t('common:message:savedSuccessfully'))
|
|
|
|
// this.getMessageList()
|
|
this.reFreshList()
|
|
}
|
|
}).catch(() => {
|
|
this.loading = false
|
|
this.$refs['signForm'].btnLoading = false
|
|
})
|
|
},
|
|
// 关闭重传完成签名弹窗
|
|
closeReuploadFinishedDialog(isSign, signInfo) {
|
|
if (isSign) {
|
|
this.setReuploadFinished(signInfo)
|
|
} else {
|
|
this.signVisible = false
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
<style lang="scss">
|
|
.chat-wrapper{
|
|
::-webkit-scrollbar {
|
|
width: 7px;
|
|
height: 7px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
background: #d0d0d0;
|
|
}
|
|
.chat-content{
|
|
width:100%;
|
|
padding: 20px;
|
|
height: 500px;
|
|
overflow-y: auto;
|
|
.word{
|
|
display: flex;
|
|
margin-bottom: 20px;
|
|
img{
|
|
width:40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
}
|
|
.info{
|
|
margin-left: 10px;
|
|
.user-info{
|
|
font-size: 12px;
|
|
color:rgba(51,51,51,0.8);
|
|
margin:0;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
margin-top: -5px;
|
|
}
|
|
.info-content{
|
|
padding: 10px;
|
|
font-size: 14px;
|
|
background-color: #ebeef5;
|
|
position: relative;
|
|
margin-top: 8px;
|
|
}
|
|
.info-content::before{
|
|
position: absolute;
|
|
left: -8px;
|
|
top: 8px;
|
|
content: '';
|
|
border-right: 10px solid #ebeef5;
|
|
border-top: 8px solid transparent;
|
|
border-bottom: 8px solid transparent;
|
|
}
|
|
}
|
|
}
|
|
.word-my{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 20px;
|
|
img{
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
}
|
|
.info{
|
|
width: 90%;
|
|
margin-left: 10px;
|
|
text-align: right;
|
|
.user-info{
|
|
font-size: 12px;
|
|
color: rgba(51,51,51,0.8);
|
|
margin: 0;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
margin-top: -5px;
|
|
margin-right: 10px;
|
|
}
|
|
.info-content{
|
|
position: relative;
|
|
max-width: 70%;
|
|
padding: 10px;
|
|
font-size: 14px;
|
|
float: right;
|
|
margin-right: 10px;
|
|
margin-top: 8px;
|
|
background-color: #7574d9;
|
|
color: #fff;
|
|
text-align: left;
|
|
}
|
|
.info-content::after{
|
|
position: absolute;
|
|
right: -8px;
|
|
top: 8px;
|
|
content: '';
|
|
border-left: 10px solid #7574d9;
|
|
border-top: 8px solid transparent;
|
|
border-bottom: 8px solid transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.chat-message{
|
|
padding: 0 50px;
|
|
.function{
|
|
margin-top: 10px;
|
|
text-align: right;
|
|
}
|
|
}
|
|
ol{
|
|
margin: 5px;
|
|
padding: 0px 10px;
|
|
}
|
|
}
|
|
</style>
|