539 lines
18 KiB
Plaintext
539 lines
18 KiB
Plaintext
<template>
|
|
<div v-loading="loading" class="history-chat">
|
|
<el-tabs tab-position="left" type="card" @tab-click="clickTab">
|
|
<el-tab-pane v-for="(item,index) in list" :key="item.Id">
|
|
<span slot="label">
|
|
{{ item.ChallengeCode }}
|
|
<i v-show="!item.IsClosed" class="el-icon-message-solid" style="color:red" />
|
|
</span>
|
|
<div class="chat-wrapper">
|
|
<div class="chat-content">
|
|
<div v-for="record in item.DialogList" :key="record.Id">
|
|
<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-if="!item.IsClosed" class="chat-message">
|
|
<div class="message" v-if="hasPermi(['trials:trials-panel:visit:crc-upload:send'])" >
|
|
<el-input
|
|
v-model="newMessage"
|
|
type="textarea"
|
|
:rows="2"
|
|
/>
|
|
</div>
|
|
<div class="function">
|
|
<!-- 申请重传 -->
|
|
<el-button
|
|
v-show="(item.ReuploadEnum === 0 || item.ReuploadEnum === 3) "
|
|
v-hasPermi="['trials:trials-panel:visit:crc-upload:apply-reupload']"
|
|
type="primary"
|
|
:loading="applyBtnLoading"
|
|
@click="handleCRCApplyReupload(item)"
|
|
>
|
|
{{ $t('trials:reuploadDicoms:button:applyReupload') }}
|
|
</el-button>
|
|
<!-- 重传 -->
|
|
<el-button
|
|
v-show="item.ReuploadEnum === 2"
|
|
v-hasPermi="['trials:trials-panel:visit:crc-upload:reupload']"
|
|
type="primary"
|
|
:loading="uploadBtnLoading"
|
|
@click="openUploadDialog(index)"
|
|
>
|
|
{{ $t('trials:reuploadDicoms:button:reupload') }}
|
|
</el-button>
|
|
<!-- 确认重传完成 -->
|
|
<el-button
|
|
v-show="item.ReuploadEnum === 2"
|
|
v-hasPermi="['trials:trials-panel:visit:crc-upload:set-reupload-finished']"
|
|
type="primary"
|
|
:disabled="item.IsReuploaded"
|
|
:loading="reuploadedFinishbtnLoading"
|
|
@click="handleSetUploadFinished(index)"
|
|
>
|
|
{{ $t('trials:reuploadDicoms:button:reuploadFinished') }}
|
|
</el-button>
|
|
<!-- 发送 -->
|
|
<el-button
|
|
v-hasPermi="['trials:trials-panel:visit:crc-upload:send']"
|
|
:disabled="newMessage===''"
|
|
type="primary"
|
|
:loading="btnLoading"
|
|
@click="handleReply(item.Id,index)"
|
|
>
|
|
{{ $t('trials:reuploadDicoms:button:send') }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<!-- 上传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 class="base-modal-body" style="display: flex;flex-direction: column;">
|
|
<el-tabs v-model="activeName" type="border-card" style="flex:1;">
|
|
<!-- DICOM影像上传 -->
|
|
<el-tab-pane
|
|
:label="$t('trials:uploadedDicoms:tab:uploadDicoms')"
|
|
name="dicom"
|
|
>
|
|
<upload-dicom-files :data="data" :subject-id="data.SubjectId" :subject-visit-id="data.Id" @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" :allow-add-or-edit="true" :body-parts="bodyParts" :modalities="modalities" :subject-visit-id="data.Id" @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'" :data="data" :subject-id="data.SubjectId" :subject-visit-id="data.Id" :allow-add-or-edit="true" :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.Id" @closeDialog="closeClinicalDataSignDialog" />
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getCRCVisitChallengeAndDialog, verifyReuploadIsCanJump, addQCChallengeReply, cRCRequestReUpload } 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 './uploadDicomFiles'
|
|
import UploadNonDicomFiles from './uploadNonDicomFiles'
|
|
import UploadClinicalData from './uploadClinicalData'
|
|
import SignForm from '@/views/trials/components/newSignForm'
|
|
import dicomStore from '@/utils/dicom-store'
|
|
import const_ from '@/const/sign-code'
|
|
export default {
|
|
name: 'HistoryChat',
|
|
components: { UploadDicomFiles, UploadNonDicomFiles, UploadClinicalData, SignForm },
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
},
|
|
bodyParts: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
modalities: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
clinicalEnum: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
list: [],
|
|
loading: false,
|
|
btnLoading: false,
|
|
newMessage: '',
|
|
userId: zzSessionStorage.getItem('userId'),
|
|
trialCode: this.$route.query.trialCode,
|
|
adminAvatar,
|
|
pmAvatar,
|
|
crcAvatar,
|
|
qcAvatar,
|
|
uploadVisible: false,
|
|
activeName: 'dicom',
|
|
currentChallengeIndex: null,
|
|
signVisible: false,
|
|
signCode: '',
|
|
currentUser: zzSessionStorage.getItem('userName'),
|
|
trialId: this.$route.query.trialId,
|
|
uploadBtnLoading: false,
|
|
applyBtnLoading: false,
|
|
reuploadedFinishbtnLoading: false
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initChat()
|
|
},
|
|
methods: {
|
|
clickTab(tab) {
|
|
this.setScrollHeight(tab.index * 1)
|
|
},
|
|
// 初始化聊天记录
|
|
initChat(index) {
|
|
var list = []
|
|
this.loading = true
|
|
getCRCVisitChallengeAndDialog(this.data.Id, this.data.QCProcessEnum).then(res => {
|
|
res.Result.forEach(item => {
|
|
var contents = []
|
|
if (item.Content && item.Content.indexOf('|') !== -1) {
|
|
contents = item.Content.split('|')
|
|
} else if (item.Content && item.Content !== '') {
|
|
contents.push(item.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')}: ${item.DeadlineTime ? item.DeadlineTime : this.$t('trials:qcQuality:dialog:none')}</p>`
|
|
const userId = zzSessionStorage.getItem('userId')
|
|
var recordContent = []
|
|
recordContent.push(
|
|
{
|
|
IsCurrentUser: item.CreateUserId === userId,
|
|
TalkContent: content,
|
|
CreateTime: item.CreateTime,
|
|
CreateUserName: item.CreateUserName,
|
|
CreateUserId: item.CreateUserId,
|
|
UserTypeEnum: item.UserTypeEnum
|
|
|
|
}
|
|
)
|
|
recordContent.push(...item.DialogList)
|
|
list.push({ Id: item.Id, ChallengeCode: item.ChallengeCode, IsClosed: item.IsClosed, ReuploadEnum: item.ReuploadEnum * 1, DialogList: recordContent, Content: item.Content, DeadlineTime: item.DeadlineTime, IsOverTime: item.IsOverTime })
|
|
this.list = Object.assign({}, list)
|
|
this.loading = false
|
|
this.setScrollHeight(index || 0)
|
|
})
|
|
}).catch(() => { this.loading = false })
|
|
},
|
|
setScrollHeight(index) {
|
|
setTimeout(() => {
|
|
var container = document.querySelectorAll('.chat-content')[index]
|
|
container.scrollTop = container.scrollHeight
|
|
}, 100)
|
|
},
|
|
// 回复质疑
|
|
handleReply(qcChallengeId, index) {
|
|
if (!this.newMessage) return
|
|
this.btnLoading = true
|
|
var params = {
|
|
talkContent: this.newMessage,
|
|
qcChallengeId: qcChallengeId,
|
|
subjectVisitId: this.data.Id
|
|
}
|
|
addQCChallengeReply(this.data.TrialId, params).then(res => {
|
|
if (res.IsSuccess) {
|
|
// this.list[index].DialogList.push({ IsCurrentUser: true, TalkContent: this.newMessage, CreateTime: res.Result.CreateTime, CreateUserName: res.Result.CreateUserName, CreateUserId: res.Result.CreateUserId, UserTypeEnum: res.Result.UserTypeEnum })
|
|
this.initChat(index)
|
|
this.newMessage = ''
|
|
}
|
|
this.btnLoading = false
|
|
}).catch(() => { this.btnLoading = false })
|
|
},
|
|
// 打开上传弹窗
|
|
openUploadDialog(index) {
|
|
const qcChallengeId = this.list[index].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.initChat(index)
|
|
this.$emit('getList')
|
|
this.uploadBtnLoading = false
|
|
})
|
|
},
|
|
// 关闭重传弹框
|
|
closeUpload() {
|
|
this.uploadVisible = false
|
|
},
|
|
// 刷新父组件列表
|
|
reFreshList() {
|
|
this.$emit('getList')
|
|
},
|
|
// 设置重传完成
|
|
handleSetUploadFinished(index) {
|
|
if (this.clinicalEnum > 0 && this.data.IsBaseLine) {
|
|
this.currentChallengeIndex = index
|
|
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.currentChallengeIndex = index
|
|
this.setReuploadFinished()
|
|
}).catch(() => {})
|
|
}
|
|
},
|
|
setReuploadFinished(signInfo) {
|
|
this.loading = true
|
|
var item = Object.assign({}, this.list[this.currentChallengeIndex])
|
|
var params = {
|
|
data: {
|
|
QcChallengeId: item.Id,
|
|
TrialId: this.trialId,
|
|
SetOrCancel: true
|
|
},
|
|
signInfo: signInfo
|
|
}
|
|
this.loading = true
|
|
this.reuploadedFinishbtnLoading = true
|
|
setReuploadFinished(params)
|
|
.then(res => {
|
|
this.loading = false
|
|
this.reuploadedFinishbtnLoading = false
|
|
if (res.IsSuccess) {
|
|
if (signInfo) {
|
|
this.$refs['signForm'].btnLoading = false
|
|
this.signVisible = false
|
|
}
|
|
this.list[this.currentChallengeIndex].ReuploadEnum = 3
|
|
this.initChat()
|
|
// this.$message.success(this.$t('common:message:savedSuccessfully'))
|
|
this.reFreshList()
|
|
}
|
|
}).catch(() => {
|
|
this.loading = false
|
|
this.reuploadedFinishbtnLoading = false
|
|
this.$refs['signForm'].btnLoading = false
|
|
})
|
|
},
|
|
// 关闭临床数据签名弹窗
|
|
closeClinicalDataSignDialog(isSign, signInfo) {
|
|
if (isSign) {
|
|
this.setReuploadFinished(signInfo)
|
|
} else {
|
|
this.signVisible = false
|
|
}
|
|
},
|
|
// crc申请重传
|
|
handleCRCApplyReupload(item) {
|
|
this.$confirm(this.$t('trials:crcQuestion:message:applyReupload'), {
|
|
type: 'warning',
|
|
distinguishCancelAndClose: true
|
|
})
|
|
.then(() => {
|
|
this.applyBtnLoading = true
|
|
cRCRequestReUpload(this.trialId, this.data.Id, item.Id)
|
|
.then(res => {
|
|
this.applyBtnLoading = false
|
|
if (res.IsSuccess) {
|
|
item.ReuploadEnum = 1
|
|
this.initChat()
|
|
// this.$message.success(this.$t('common:message:savedSuccessfully'))
|
|
this.$forceUpdate()
|
|
this.reFreshList()
|
|
}
|
|
}).catch(() => { this.applyBtnLoading = false })
|
|
}).catch(() => {})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.history-chat{
|
|
height: 500px;
|
|
::-webkit-scrollbar {
|
|
width: 7px;
|
|
height: 7px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
background: #d0d0d0;
|
|
}
|
|
>>>.el-tabs{
|
|
>>>.el-tabs__header{
|
|
width: 100px;
|
|
margin-right: 10px;
|
|
height: 500px;
|
|
overflow-y: auto;
|
|
}
|
|
>>>.el-tabs__content{
|
|
margin-right: 10px;
|
|
height: 500px;
|
|
width: calc(100%-120px);
|
|
overflow-y: auto;
|
|
}
|
|
.chat-wrapper{
|
|
background-color: #f5f7fa;
|
|
height: 500px;
|
|
display: flex;
|
|
flex-direction: column !important;
|
|
overflow: hidden;
|
|
.chat-content{
|
|
width:100%;
|
|
padding: 20px;
|
|
// height: 400px;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
.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{
|
|
height: 100px;
|
|
padding: 0 50px;
|
|
.function{
|
|
margin-top: 10px;
|
|
text-align: right;
|
|
}
|
|
}
|
|
ol{
|
|
margin: 5px;
|
|
padding: 0px 10px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
</style>
|