282 lines
11 KiB
Vue
282 lines
11 KiB
Vue
<template>
|
||
<div v-loading="loading">
|
||
<div style="padding: 0 20px;">
|
||
<div class="info-content" v-html="crcMessageInfo.TalkContent" />
|
||
</div>
|
||
<div>
|
||
<div style="padding: 10px;background: #f3f3f3;border-radius: 10px;margin-top: 10px">
|
||
<div style="display:flex;margin-bottom: 10px;justify-content: space-between;align-items: center">
|
||
<div style="font-size: 18px;font-weight: blod;color: #409EFF">
|
||
<!-- 请准确核实后录入当前访视的实际影像检查记录： -->
|
||
{{ $t('trials:consistencyCheck:title:message20') }}
|
||
</div>
|
||
<!-- 添加 -->
|
||
<el-button type="primary" size="mini" @click="addMsg">{{ $t('trials:consistencyCheck:title:add')
|
||
}}</el-button>
|
||
</div>
|
||
<el-table :data="msgList">
|
||
<el-table-column type="index" width="40" />
|
||
<!-- 检查日期 -->
|
||
<el-table-column prop="" :label="$t('trials:consistencyCheck:title:studyDate')" show-overflow-tooltip>
|
||
<template slot-scope="scope">
|
||
{{ scope.row.StudyDate }}
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 检查类型 -->
|
||
<el-table-column prop="" :label="$t('trials:consistencyCheck:title:studyModality')" show-overflow-tooltip>
|
||
<template slot-scope="scope">
|
||
{{ scope.row.Modality }}
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 已提交 -->
|
||
<el-table-column prop="" :label="$t('trials:consistencyCheck:title:submitted')" show-overflow-tooltip>
|
||
<template slot-scope="scope">
|
||
{{ $fd('YesOrNo', scope.row.IsJoin) }}
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 实际存在 -->
|
||
<el-table-column prop="" :label="$t('trials:consistencyCheck:title:existed')" show-overflow-tooltip
|
||
min-width="120px">
|
||
<template slot-scope="scope">
|
||
<el-switch v-model="scope.row.IsCheck" :active-text="$fd('YesOrNo', true)"
|
||
:inactive-text="$fd('YesOrNo', false)" :disabled="!scope.row.IsJoin" @change="compareStudy" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="" width="100px" :label="$t('common:action:action')" fixed="right">
|
||
<template slot-scope="scope">
|
||
<!-- 删除 -->
|
||
<el-button :disabled="scope.row.IsJoin" size="small" icon="el-icon-delete"
|
||
:title="$t('trials:consistencyCheck:title:delete')" circle @click="moveMsg(scope.$index)">
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-form ref="revenusForm" size="small" label-width="400px" :label-position="'top'" :rules="rules" :model="form"
|
||
v-if="false">
|
||
<!-- IRC与实际情况影像检查不一致的原因为： -->
|
||
<el-form-item v-if="isLackOf" :label="$t('trials:consistencyCheck:title:title1')" prop="reason">
|
||
<el-checkbox-group v-model="form.reason" style="display: flex;flex-direction: column">
|
||
<!-- <el-checkbox style="display: block" :label="$t('trials:consistencyCheck:title:message9')">
|
||
{{ $t('trials:consistencyCheck:title:message9') }}
|
||
</el-checkbox> -->
|
||
<el-checkbox style="display: block" :label="$t('trials:consistencyCheck:title:message10')">
|
||
{{ $t('trials:consistencyCheck:title:message10') }}
|
||
</el-checkbox>
|
||
<el-checkbox disabled style="display: block" :label="$t('trials:consistencyCheck:title:message11')">
|
||
{{ $t('trials:consistencyCheck:title:message11') }}
|
||
</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
<div class="function">
|
||
<!-- 发送 -->
|
||
<el-button type="primary" @click="handleReply">
|
||
{{ $t('trials:consistencyCheck:button:sendMessage') }}
|
||
</el-button>
|
||
</div>
|
||
<!-- 添加检查 -->
|
||
<el-dialog v-if="studyVisible" v-dialogDrag :visible.sync="studyVisible" :close-on-click-modal="false"
|
||
append-to-body custom-class="base-dialog-wrapper" :width="'500px'"
|
||
:title="$t('trials:consistencyCheck:title:addStudy')">
|
||
<el-form>
|
||
<div class="base-dialog-body">
|
||
<!-- 检查日期 -->
|
||
<el-form-item label-width="80px" :label="$t('trials:consistencyCheck:title:studyDate')">
|
||
<el-date-picker v-model="typeInfo.StudyDate" style="width: 100%" type="date" value-format="yyyy-MM-dd" />
|
||
</el-form-item>
|
||
<!-- 检查类型 -->
|
||
<el-form-item label-width="80px" :label="$t('trials:consistencyCheck:title:studyModality')">
|
||
<el-select v-model="typeInfo.Modality" style="width: 100%">
|
||
<el-option v-for="item of $d.Modality" :label="item.raw.Value" :value="item.value" :key="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="base-dialog-footer" style="text-align:right;margin-top:10px;">
|
||
<el-form-item style="text-align:right;">
|
||
<el-button size="small" type="primary" @click="handleCancel"> {{ $t('common:button:cancel') }}</el-button>
|
||
<el-button size="small" type="primary" @click="handleSave">
|
||
{{ $t('common:button:save') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
export default {
|
||
name: 'CrcSendMessage',
|
||
props: {
|
||
crcMessageInfo: {
|
||
type: Object,
|
||
default() {
|
||
return {
|
||
TalkContent: null
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
msgList: [],
|
||
studyVisible: false,
|
||
typeInfo: {
|
||
StudyDate: null,
|
||
Modality: null,
|
||
IsJoin: false,
|
||
IsCheck: true
|
||
},
|
||
isLackOf: false,
|
||
EDCList: [],
|
||
IRCList: [],
|
||
form: {
|
||
reason: [this.$t('trials:consistencyCheck:title:message11')]
|
||
},
|
||
rules: {
|
||
reason: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }]
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.crcMessageInfo.ParamInfoList.forEach((v, i) => {
|
||
this.msgList.push({ ...v, IsJoin: true, IsCheck: false, Id: this.getGuid(String(Date.now() + i)) })
|
||
})
|
||
this.compareStudy()
|
||
},
|
||
methods: {
|
||
compareStudy() {
|
||
var isLackOf = false
|
||
this.IRCList = []
|
||
this.msgList.forEach(v => {
|
||
if (v.IsJoin !== v.IsCheck) {
|
||
isLackOf = true
|
||
this.IRCList.push(v)
|
||
}
|
||
})
|
||
this.isLackOf = isLackOf
|
||
},
|
||
handleCancel() {
|
||
this.studyVisible = false
|
||
this.typeInfo = {
|
||
StudyDate: null,
|
||
Modality: null,
|
||
IsJoin: false,
|
||
IsCheck: true
|
||
}
|
||
},
|
||
handleSave() {
|
||
if (!this.typeInfo.StudyDate || !this.typeInfo.Modality) {
|
||
this.$alert(this.$t('trials:consistencyCheck:title:title2'))// '请选择检查日期和检查类型'
|
||
return
|
||
}
|
||
this.msgList.push({ ...this.typeInfo, Id: this.getGuid(String(Date.now())) })
|
||
this.compareStudy()
|
||
this.studyVisible = false
|
||
this.typeInfo = {
|
||
StudyDate: null,
|
||
Modality: null,
|
||
IsJoin: false,
|
||
IsCheck: true
|
||
}
|
||
},
|
||
closeLoading() {
|
||
this.loading = false
|
||
},
|
||
addMsg() {
|
||
this.studyVisible = true
|
||
},
|
||
moveMsg(index) {
|
||
// '确定删除该条检查记录？'
|
||
this.$confirm(this.$t('trials:consistencyCheck:title:title3')).then(res => {
|
||
this.msgList.splice(index, 1)
|
||
this.compareStudy()
|
||
})
|
||
},
|
||
async handleReply() {
|
||
try {
|
||
if (this.msgList.length === 0) {
|
||
// '请录入真实的检查情况'
|
||
this.$alert(this.$t('trials:consistencyCheck:title:title4'))
|
||
return
|
||
}
|
||
// let valid = await this.$refs.revenusForm.validate()
|
||
// if (!valid) return
|
||
let confirm = true
|
||
if (this.msgList.every(item => !item.IsCheck)) {
|
||
confirm = await this.$confirm(this.$t('trials:consistencyCheck:title:confirm'), '', {
|
||
showConfirmButton: false
|
||
})
|
||
}
|
||
if (!confirm) return false
|
||
var TalkContent = ''
|
||
// '经核实，该受试者当前访视的实际影像检查如下：<br>'
|
||
TalkContent += `${this.$t('trials:consistencyCheck:title:title5')}<br>`
|
||
this.msgList.forEach((v, i) => {
|
||
// `${i + 1}.${v.StudyDate}的${v.Modality}影像检查<br>`
|
||
let msg = this.$t('trials:consistencyCheck:title:title6').replace('yyyy', v.StudyDate)
|
||
msg = msg.replace('xxx', v.Modality)
|
||
let message = `${i + 1}. ${msg}`
|
||
let index = this.IRCList.findIndex(item => item.Id === v.Id)
|
||
if (!!~index) {
|
||
let data = this.IRCList[index]
|
||
message += `（${data.IsJoin && !data.IsCheck ? this.$t('trials:consistencyCheck:title:title8') : this.$t('trials:consistencyCheck:title:title9')}）<br>`
|
||
} else {
|
||
message += `（${this.$t('trials:consistencyCheck:title:title12')}）<br>`
|
||
}
|
||
TalkContent += message
|
||
})
|
||
if (this.isLackOf) {
|
||
TalkContent += `<br>${this.$t('trials:consistencyCheck:title:title13')}`
|
||
// TalkContent += '<br>'
|
||
// // 'IRC与实际情况不一致影像检查如下：<br>'
|
||
// TalkContent += `${this.$t('trials:consistencyCheck:title:title7')}<br>`
|
||
// this.IRCList.forEach((v, i) => {
|
||
// let msg = this.$t('trials:consistencyCheck:title:title6').replace('yyyy', v.StudyDate)
|
||
// msg = msg.replace('xxx', v.Modality)
|
||
// TalkContent += `${i + 1}.${msg}（${v.IsJoin && !v.IsCheck ? this.$t('trials:consistencyCheck:title:title8') : this.$t('trials:consistencyCheck:title:title9')}）<br>`
|
||
// })
|
||
|
||
|
||
// if (this.form.reason.length > 0) {
|
||
// TalkContent += '<br>'
|
||
// // 'IRC与实际情况影像检查不一致的原因为：<br>'
|
||
// TalkContent += `${this.$t('trials:consistencyCheck:title:title10')}<br>`
|
||
|
||
// this.form.reason.forEach((v, i) => {
|
||
// TalkContent += `${i + 1}.${v}<br>`
|
||
// })
|
||
// }
|
||
} else {
|
||
// `<br>IRC与实际情况影像检查一致`
|
||
TalkContent += `<br>${this.$t('trials:consistencyCheck:title:title11')}`
|
||
// TalkContent += '<br>'
|
||
// TalkContent += `${this.$t('trials:consistencyCheck:title:title10')}<br>`
|
||
// TalkContent += `1.${this.$t('trials:consistencyCheck:title:message10')}<br>`
|
||
}
|
||
console.log(TalkContent)
|
||
this.$emit('sendMessage', TalkContent, this.closeLoading)
|
||
} catch (err) {
|
||
console.log(err)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.function {
|
||
margin-top: 10px;
|
||
text-align: right;
|
||
}
|
||
|
||
::v-deep .el-form--label-top .el-form-item__label {
|
||
padding-bottom: 0;
|
||
padding-top: 20px;
|
||
}
|
||
</style>
|