457 lines
16 KiB
Plaintext
457 lines
16 KiB
Plaintext
<template>
|
|
<div>
|
|
<div v-for="(qs,index) in questions" :key="index" v-loading="loading" class="lesions lesions_wrapper">
|
|
<h4 v-if="qs.Type === 'group'" style="color: #ddd;padding: 5px 0px;margin: 0;">
|
|
{{ qs.GroupName }}
|
|
</h4>
|
|
<div class="lesion_list">
|
|
<div v-for="item in qs.Childrens" v-show="!(isBaseLineTask && item.LesionType === 2)" :key="item.Id">
|
|
<div v-if="item.Type === 'table'" class="flex-row">
|
|
<div class="title">{{ item.QuestionName }}</div>
|
|
<div v-if="readingTaskState<2 && (isBaseLineTask || item.LesionType === 2)" class="add-icon" @click.prevent="handleAdd(item)">
|
|
<i class="el-icon-plus" />
|
|
</div>
|
|
</div>
|
|
<!-- @change="handleCollapseChange(qs.Childrens,item)" -->
|
|
<el-collapse
|
|
v-if="item.Type === 'table' && item.TableQuestions"
|
|
v-model="activeName"
|
|
accordion
|
|
@change="handleCollapseChange"
|
|
>
|
|
<el-collapse-item
|
|
v-for="(q,i) in item.TableQuestions.Answers"
|
|
:key="i"
|
|
:name="`${item.Id}_${q.RowIndex}`"
|
|
>
|
|
<template slot="title">
|
|
<div style="width:300px;position: relative;" :style="{color:(activeName===item.Id+q.RowIndex?'#ffeb3b':'#fff')}">
|
|
<el-tooltip v-show="readingTaskState<2 && !!item.TableQuestions.Answers[i].RowId && !isBaseLineTask" class="item" content="分裂" placement="left">
|
|
<i class="el-icon-plus" style="color:#fff;font-size: 16px;" @click.stop="handleSplit(item.TableQuestions.Answers[i].RowId,item.Id)" />
|
|
</el-tooltip>
|
|
{{ getLesionName(item.OrderMark,q.RowIndex) }}
|
|
<el-tooltip v-if="!item.TableQuestions.Answers[i].isLesionSaved" class="item" effect="dark" content="未保存" placement="bottom">
|
|
<i class="el-icon-warning" style="color:red" />
|
|
</el-tooltip>
|
|
<div style="position: absolute;left: 60px;top: 2px;">
|
|
<div style="display: flex;flex-direction: row;font-size: 10px;width:200px;">
|
|
<div v-if="item.TableQuestions.Answers[i].lesionPart" style="margin-left:10px;margin-bottom:5px;">
|
|
{{ item.TableQuestions.Answers[i].lesionPart }}
|
|
</div>
|
|
<div style="margin-left:10px;margin-bottom:5px;">
|
|
<span v-if="item.TableQuestions.Answers[i].lesionLength && item.TableQuestions.Answers[i].lesionShort">
|
|
{{ item.TableQuestions.Answers[i].lesionShort }}mm
|
|
</span>
|
|
<span v-else>
|
|
{{ item.TableQuestions.Answers[i].lesionLength? `${item.TableQuestions.Answers[i].lesionLength}mm`:'' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<PCWG3QuestionsForm
|
|
:ref="`${item.Id}_${q.RowIndex}`"
|
|
:questions="item.TableQuestions.Questions"
|
|
:answers="item.TableQuestions.Answers[i]"
|
|
:lesion-type="item.LesionType"
|
|
:order-mark="item.OrderMark"
|
|
:table-questions="tableQuestions"
|
|
:row-index="String(q.RowIndex)"
|
|
:question-name="item.QuestionName"
|
|
:parent-qs-id="item.Id"
|
|
:visit-task-id="visitTaskId"
|
|
:is-current-task="isCurrentTask"
|
|
:reading-task-state="readingTaskState"
|
|
:is-base-line-task="isBaseLineTask"
|
|
@getReadingQuestionAndAnswer="getReadingQuestionAndAnswer"
|
|
@determineExistsUnsavedLession="determineExistsUnsavedLession"
|
|
@resetQuestions="resetQuestions"
|
|
@close="close"
|
|
/>
|
|
</el-collapse-item>
|
|
|
|
</el-collapse>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import DicomEvent from '../DicomEvent'
|
|
import { splitLesion } from '@/api/trials'
|
|
import PCWG3QuestionsForm from './PCWG3QuestionsForm'
|
|
import store from '@/store'
|
|
import { mapGetters } from 'vuex'
|
|
import Questions from "../Questions";
|
|
import MeasurementForm from "../MeasurementForm";
|
|
export default {
|
|
name: "PCWG3Questions",
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
activeName: null,
|
|
isBaseLineTask: false,
|
|
readingTaskState: false,
|
|
tableQuestions: [],
|
|
unSaveTargets: [],
|
|
activeItem: {
|
|
activeRowIndex: null,
|
|
activeCollapseId: null
|
|
},
|
|
isFirstRender: false,
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['visitTaskList'])
|
|
},
|
|
components: {
|
|
MeasurementForm, PCWG3QuestionsForm
|
|
},
|
|
props: {
|
|
questions: {
|
|
type: Array,
|
|
default() { return [] }
|
|
}
|
|
},
|
|
mounted() {
|
|
console.log('questions', this.questions)
|
|
DicomEvent.$on('loadMeasurementList', async obj => {
|
|
console.log('loadMeasurementList')
|
|
this.initPage(obj)
|
|
})
|
|
},
|
|
methods: {
|
|
determineExistsUnsavedLession(callback) {
|
|
// const loading = this.$loading({ fullscreen: true })
|
|
this.getUnSaveTarget()
|
|
if (this.unSaveTargets.length > 0) {
|
|
var rowIndex = String(this.unSaveTargets[0].rowIndex)
|
|
var questionId = this.unSaveTargets[0].questionId
|
|
if (rowIndex === String(this.activeItem.activeRowIndex) && questionId === this.activeItem.activeCollapseId) {
|
|
callback(true)
|
|
// loading.close()
|
|
return
|
|
} else {
|
|
this.$confirm(`病灶${this.unSaveTargets[0].lessionName}信息未保存，不允许执行此操作！`, {
|
|
type: 'warning',
|
|
showCancelButton: false,
|
|
callback: action => { }
|
|
})
|
|
callback(false)
|
|
// loading.close()
|
|
return
|
|
}
|
|
}
|
|
callback(true)
|
|
// loading.close()
|
|
return
|
|
},
|
|
getReadingQuestionAndAnswer() {
|
|
return new Promise(async resolve => {
|
|
const loading = this.$loading({ fullscreen: true })
|
|
await store.dispatch('reading/getReadingQuestionAndAnswer', { trialId: this.$router.currentRoute.query.trialId, visitTaskId: this.visitTaskId }).then(() => {
|
|
var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === this.visitTaskId)
|
|
if (idx > -1) {
|
|
if (this.visitTaskList[idx].ReadingQuestions.length > 0) {
|
|
this.questions = this.visitTaskList[idx].ReadingQuestions
|
|
}
|
|
this.readingTaskState = this.visitTaskList[idx].ReadingTaskState
|
|
this.isBaseLineTask = this.visitTaskList[idx].IsBaseLineTask
|
|
this.isCurrentTask = this.visitTaskList[idx].IsCurrentTask
|
|
}
|
|
this.getTableQuestions()
|
|
})
|
|
await store.dispatch('reading/getMeasuredData', this.visitTaskId)
|
|
DicomEvent.$emit('getMeasureData')
|
|
loading.close()
|
|
resolve()
|
|
})
|
|
},
|
|
getUnSaveTarget() {
|
|
this.unSaveTargets = []
|
|
console.log('tableQuestions', this.tableQuestions)
|
|
this.tableQuestions.map(item => {
|
|
if (item.TableQuestions && item.TableQuestions.Answers) {
|
|
item.TableQuestions.Answers.map(t => {
|
|
if (!t.RowId) {
|
|
var lessionName = this.getLesionName(item.OrderMark, t.RowIndex)
|
|
this.unSaveTargets.push({ lessionName: lessionName, rowIndex: t.RowIndex, questionId: item.Id })
|
|
}
|
|
})
|
|
}
|
|
})
|
|
return this.unSaveTargets
|
|
},
|
|
|
|
async resetQuestions(obj) {
|
|
this.setQuestions(this.questions, obj)
|
|
store.dispatch('reading/setReadingQuestionAndAnswer', { questions: this.questions, visitTaskId: this.visitTaskId })
|
|
this.getTableQuestions()
|
|
},
|
|
setQuestions(questions, obj) {
|
|
questions.forEach(item => {
|
|
if (item.Type === 'table' && item.Id === obj.questionId) {
|
|
var idx = item.TableQuestions.Answers.findIndex(i => i.RowIndex === obj.rowIndex)
|
|
item.TableQuestions.Answers[idx].isLymphLesion = obj.isLymphLesion
|
|
item.TableQuestions.Answers[idx].loctation = obj.lesionOrgan
|
|
item.TableQuestions.Answers[idx].lesionPart = obj.lesionPart
|
|
item.TableQuestions.Answers[idx].lesionLength = obj.lesionLength
|
|
item.TableQuestions.Answers[idx].lesionShort = obj.lesionShort
|
|
item.TableQuestions.Answers[idx].isLesionSaved = obj.isLesionSaved
|
|
for (const i in obj.anwsers) {
|
|
if (i === 'MeasureData' && obj.anwsers[i]) {
|
|
item.TableQuestions.Answers[idx].InstanceId = obj.anwsers[i].instanceId
|
|
item.TableQuestions.Answers[idx].SeriesId = obj.anwsers[i].seriesId
|
|
item.TableQuestions.Answers[idx][i] = JSON.stringify(obj.anwsers[i])
|
|
} else {
|
|
item.TableQuestions.Answers[idx][i] = String(obj.anwsers[i])
|
|
}
|
|
}
|
|
}
|
|
if (item.Childrens.length > 0) {
|
|
this.setQuestions(item.Childrens, obj)
|
|
}
|
|
})
|
|
},
|
|
getQuestions(questions) {
|
|
questions.forEach(item => {
|
|
if (item.Type === 'table' && item.TableQuestions && item.TableQuestions.Answers.length > 0) {
|
|
item.TableQuestions.Answers.forEach(answerObj => {
|
|
this.$set(answerObj, 'loctation', this.getQuestionAnswer(item.TableQuestions.Questions, 6, answerObj))
|
|
this.$set(answerObj, 'lesionLength', this.getQuestionAnswer(item.TableQuestions.Questions, 0, answerObj))
|
|
this.$set(answerObj, 'lesionShort', this.getQuestionAnswer(item.TableQuestions.Questions, 1, answerObj))
|
|
var isLymphLesion = this.getQuestionAnswer(item.TableQuestions.Questions, 2, answerObj)
|
|
isLymphLesion = isLymphLesion ? parseInt(isLymphLesion) : null
|
|
this.$set(answerObj, 'isLymphLesion', isLymphLesion)
|
|
this.$set(answerObj, 'isLesionSaved', true)
|
|
})
|
|
}
|
|
if (item.Childrens.length > 0) {
|
|
this.getQuestions(item.Childrens)
|
|
}
|
|
})
|
|
return questions
|
|
},
|
|
getTableQuestions() {
|
|
this.tableQuestions = []
|
|
console.log(this.questions)
|
|
this.questions.map(item => {
|
|
if (item.Type === 'table') {
|
|
this.tableQuestions.push(item)
|
|
}
|
|
if (item.Childrens.length > 0) {
|
|
this.getTableQuestionsChild(item.Childrens)
|
|
}
|
|
})
|
|
console.log(this.tableQuestions)
|
|
},
|
|
getTableQuestionsChild(obj) {
|
|
obj.map(item => {
|
|
if (item.Type === 'table') {
|
|
this.tableQuestions.push(item)
|
|
}
|
|
if (item.Childrens.length > 0) {
|
|
this.getTableQuestionsChild(item.Childrens)
|
|
}
|
|
})
|
|
},
|
|
getLesionName(orderMark, rowIndex) {
|
|
console.log(orderMark, rowIndex)
|
|
var lessionName = ''
|
|
var rowIndexArr = rowIndex.split('.')
|
|
var x = parseInt(rowIndexArr[0])
|
|
var y = parseInt(rowIndexArr[1])
|
|
if (y > 0) {
|
|
y = String.fromCharCode(parseInt(rowIndexArr[1]) - 1 + 65 + 32)
|
|
lessionName = `${orderMark}${String(x).padStart(2, '0')}${y}`
|
|
} else {
|
|
lessionName = `${orderMark}${String(x).padStart(2, '0')}`
|
|
}
|
|
|
|
return lessionName
|
|
},
|
|
handleAdd(qs) {
|
|
this.getUnSaveTarget()
|
|
if (this.unSaveTargets.length > 0) {
|
|
this.$confirm(`病灶${this.unSaveTargets[0].lessionName}信息未保存，不允许继续添加！`, {
|
|
type: 'warning',
|
|
showCancelButton: false,
|
|
callback: action => {}
|
|
})
|
|
return
|
|
}
|
|
if (!!qs.MaxQuestionCount && qs.MaxQuestionCount <= qs.TableQuestions.Answers.length) {
|
|
this.$confirm(`${qs.QuestionName}个数最多不能超过${qs.MaxQuestionCount}个`, {
|
|
type: 'warning',
|
|
showCancelButton: false,
|
|
callback: action => {}
|
|
})
|
|
} else {
|
|
var obj = {
|
|
isSave: false
|
|
}
|
|
qs.TableQuestions.Questions.forEach(item => {
|
|
console.log(item)
|
|
if (item.QuestionMark === 3) {
|
|
var maxIndex = this.getMaxRowIndex(qs.TableQuestions.Answers)
|
|
obj.RowIndex = `${maxIndex + 1}.00`
|
|
// obj[item.Id] = `${qs.OrderMark}${String(obj.RowIndex).padStart(2, '0')}`
|
|
obj[item.Id] = `${qs.OrderMark}${String(maxIndex + 1).padStart(2, '0')}`
|
|
} else {
|
|
obj[item.Id] = ''
|
|
}
|
|
})
|
|
qs.TableQuestions.Answers.push(obj)
|
|
console.log(obj)
|
|
this.activeItem.activeRowIndex = String(obj.RowIndex)
|
|
this.activeItem.activeCollapseId = qs.Id
|
|
this.activeName = `${this.activeItem.activeCollapseId}_${this.activeItem.activeRowIndex}`
|
|
}
|
|
},
|
|
getMaxRowIndex(answerList) {
|
|
if (answerList.length > 0) {
|
|
var arr = []
|
|
answerList.forEach(item => {
|
|
var rowIndex = item.RowIndex
|
|
arr.push(parseInt(rowIndex))
|
|
})
|
|
var max = Math.max.apply(null, arr)
|
|
return max
|
|
} else {
|
|
return 0
|
|
}
|
|
},
|
|
handleCollapseChange() {
|
|
|
|
},
|
|
initPage(obj) {
|
|
if (this.visitTaskId !== obj.visitTaskId) {
|
|
this.visitTaskId = obj.visitTaskId
|
|
this.taskBlindName = obj.taskBlindName
|
|
this.activeName = ''
|
|
this.activeItem.activeRowIndex = null
|
|
this.activeItem.activeCollapseId = null
|
|
console.log(this.$refs['ecrf'])
|
|
// this.$refs['ecrf'].getQuestions(obj.visitTaskId)
|
|
this.$emit('getECRFQuestions', obj)
|
|
}
|
|
var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === obj.visitTaskId)
|
|
console.log('idx', idx)
|
|
if (idx > -1) {
|
|
if (this.visitTaskList[idx].ReadingQuestions.length > 0) {
|
|
this.questions = this.visitTaskList[idx].ReadingQuestions
|
|
}
|
|
this.readingTaskState = this.visitTaskList[idx].ReadingTaskState
|
|
this.isBaseLineTask = this.visitTaskList[idx].IsBaseLineTask
|
|
this.isCurrentTask = this.visitTaskList[idx].IsCurrentTask
|
|
this.getTableQuestions()
|
|
if (this.isFirstRender) {
|
|
this.$nextTick(() => {
|
|
this.tableQuestions.forEach(item => {
|
|
item.TableQuestions.Answers.forEach(i => {
|
|
var refName = `${item.Id}_${i.RowIndex}`
|
|
this.$refs[refName][0].initForm()
|
|
})
|
|
})
|
|
})
|
|
}
|
|
}
|
|
if (!this.isFirstRender) {
|
|
this.isFirstRender = true
|
|
}
|
|
},
|
|
async close(questionsObj) {
|
|
if (questionsObj) {
|
|
await store.dispatch('reading/removeReadingQuestionAndAnswer', { lesionType: questionsObj.lesionType, rowIndex: questionsObj.rowIndex, visitTaskId: questionsObj.visitTaskId })
|
|
var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === this.visitTaskId)
|
|
if (idx > -1) {
|
|
if (this.visitTaskList[idx].ReadingQuestions.length > 0) {
|
|
this.questions = this.visitTaskList[idx].ReadingQuestions
|
|
}
|
|
this.getTableQuestions()
|
|
}
|
|
}
|
|
this.activeItem.activeRowIndex = null
|
|
this.activeItem.activeCollapseId = null
|
|
this.activeName = ''
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.measurement-wrapper{
|
|
overflow-y: auto;
|
|
// overflow: hidden;
|
|
|
|
.container{
|
|
padding: 10px;
|
|
}
|
|
.title{
|
|
padding: 5px;
|
|
font-weight: bold;
|
|
color: #ddd;
|
|
font-size: 15px;
|
|
|
|
}
|
|
.add-icon{
|
|
padding: 5px;
|
|
font-weight: bold;
|
|
color: #ddd;
|
|
font-size: 15px;
|
|
border: 1px solid #938b8b;
|
|
margin-bottom: 2px;
|
|
cursor: pointer;
|
|
}
|
|
.add-icon:hover{
|
|
background-color: #607d8b;
|
|
}
|
|
|
|
.flex-row{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
background-color: #424242;
|
|
|
|
}
|
|
.lesion_list{
|
|
position: relative;
|
|
}
|
|
.el-collapse{
|
|
border-bottom:none;
|
|
>>>.el-collapse-item{
|
|
background-color: #000!important;
|
|
color: #ddd;
|
|
|
|
}
|
|
>>>.el-collapse-item__header{
|
|
background-color: #000!important;
|
|
color: #ddd;
|
|
border-bottom-color:#5a5a5a;
|
|
padding-left: 5px;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
}
|
|
>>>.el-collapse-item__wrap{
|
|
background-color: #000!important;
|
|
color: #ddd;
|
|
}
|
|
>>>.el-collapse-item__content{
|
|
width:260px;
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
border: 1px solid #ffeb3b;
|
|
z-index: 1;
|
|
color: #ddd;
|
|
padding: 5px;
|
|
background-color:#1e1e1e;
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|
|
|