irc_web/.svn/pristine/85/855ab84c58c8a4cf9b81a96b48e...

632 lines
24 KiB
Plaintext

<template>
<div class="measurement-wrapper" :style="{'height':height+10+'px'}">
<div class="container" :style="{'height':height+'px'}">
<h3 style="color: #ddd;padding: 5px 0px;margin: 0;">
{{ taskBlindName }}
</h3>
<!-- 非测量问题 -->
<div class="lesions">
<ECRF ref="ecrf" />
</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" :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>
<el-collapse
v-if="item.Type === 'table' && item.TableQuestions"
v-model="activeName"
accordion
@change="handleCollapseChange(qs.Childrens,item)"
>
<el-collapse-item
v-for="(q,i) in item.TableQuestions.Answers"
:key="i"
:name="item.Id+q.RowIndex"
>
<template slot="title">
<span :style="{color:(activeName===item.Id+q.RowIndex?'#ffeb3b':'#fff')}">
{{ `${item.OrderMark}${String(q.RowIndex).padStart(2, '0')}` }}
</span>
</template>
<MeasurementForm
:ref="`${item.Id}${q.RowIndex}`"
:questions="item.TableQuestions.Questions"
:answers="item.TableQuestions.Answers[i]"
:lesion-type="item.LesionType"
:order-mark="item.OrderMark"
: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"
@refreshReadingQuestionAndAnswer="refreshReadingQuestionAndAnswer"
@determineExistsUnsavedLession="determineExistsUnsavedLession"
@removeQuestionAnswer="removeQuestionAnswer"
@close="close"
/>
</el-collapse-item>
</el-collapse>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { getReadingQuestionAndAnswer } from '@/api/trials'
import Store from './Store'
import ECRF from './ECRF.vue'
import MeasurementForm from './MeasurementForm'
export default {
name: 'MeasurementList',
components: {
ECRF,
MeasurementForm
},
props: {
isCurrentTask: {
type: Boolean,
required: true
}
},
data() {
return {
height: window.innerHeight - 140,
questions: [],
activeName: '',
activeItem: {
activeRowIndex: null,
activeCollapseId: null
},
visitTaskId: '',
loading: false,
unSaveTargets: [],
readingTaskState: 2,
isBaseLineTask: false,
taskBlindName: '',
tableQuestions: []
}
},
mounted() {
// Store.$on('getMeasuredData', visitTaskId => {
// this.visitTaskId = visitTaskId
// this.$refs['ecrf'].getQuestions(visitTaskId)
// this.getReadingQuestionAndAnswer(visitTaskId)
// })
Store.$on('loadMeasurementList', obj => {
if (this.visitTaskId === obj.visitTaskId) return
this.visitTaskId = obj.visitTaskId
this.taskBlindName = obj.taskBlindName
this.$refs['ecrf'].getQuestions(obj.visitTaskId)
this.getReadingQuestionAndAnswer(obj.visitTaskId)
this.activeName = ''
this.activeItem.activeRowIndex = null
this.activeItem.activeCollapseId = null
console.log('loadMeasurementList')
})
Store.$on('setCollapseActive', measuredData => {
this.setCollapseActive(measuredData)
console.log('setCollapseActive')
})
Store.$on('changeLesionType', (questionsObj) => {
this.changeLesionType(questionsObj)
console.log('changeLesionType')
})
window.addEventListener('resize', this.setHeight)
},
beforeDestroy() {
Store.$off('loadMeasurementList')
Store.$off('setCollapseActive')
Store.$off('changeLesionType')
},
methods: {
getReadingQuestionAndAnswer(visitTaskId) {
return new Promise((resolve, reject) => {
// this.loading = true
const loading = this.$loading({ fullscreen: true })
var params = {
trialId: this.$router.currentRoute.query.trialId,
visitTaskId: visitTaskId
}
getReadingQuestionAndAnswer(params).then(res => {
this.questions = res.Result.SinglePage
this.readingTaskState = res.OtherInfo.readingTaskState
this.isBaseLineTask = res.Result.IsBaseLineTask
// this.loading = false
this.getTableQuestions()
loading.close()
resolve()
}).catch(() => {
// this.loading = false
loading.close()
reject()
})
})
},
getTableQuestions() {
this.tableQuestions = []
this.questions.map(item => {
if (item.Type === 'table') {
this.tableQuestions.push(item)
}
if (item.Childrens.length > 0) {
this.getTableQuestionsChild(item.Childrens)
}
})
},
getTableQuestionsChild(obj) {
obj.map(item => {
if (item.Type === 'table') {
this.tableQuestions.push(item)
}
if (item.Childrens.length > 0) {
this.getTableQuestionsChild(item.Childrens)
}
})
},
refreshReadingQuestionAndAnswer(type) {
if (type === 0) {
// 删除
this.activeName = ''
this.activeItem.activeRowIndex = null
this.activeItem.activeCollapseId = null
}
this.getReadingQuestionAndAnswer(this.visitTaskId)
},
setHeight() {
this.height = window.innerHeight - 140
},
isCanActiveTool(toolName, isPrompt = true) {
this.getUnSaveTarget()
if (this.unSaveTargets.length > 0) {
var rowIndex = String(this.unSaveTargets[0].rowIndex)
var questionId = this.unSaveTargets[0].questionId
const refName = `${this.activeItem.activeCollapseId}${this.activeItem.activeRowIndex}`
if (rowIndex === this.activeItem.activeRowIndex && questionId === this.activeItem.activeCollapseId && !this.$refs[refName][0].questionForm.MeasureData) {
return this.checkCurrentCollapseCanActiveTool(toolName, isPrompt)
} else {
// if (isPrompt) {
// this.$confirm(`病灶${this.unSaveTargets[0].lessionName}信息未保存,不允许继续添加!`, {
// type: 'warning',
// showCancelButton: false,
// callback: action => {}
// })
// }
return { isCanActiveTool: false, reason: `病灶${this.unSaveTargets[0].lessionName}信息未保存,不允许继续添加!` }
}
} else {
if (this.activeItem.activeCollapseId) {
return this.checkCurrentCollapseCanActiveTool(toolName, isPrompt)
} else {
if (toolName === 'ArrowAnnotate' || toolName === 'Bidirectional' || toolName === 'Length') {
return { isCanActiveTool: true, reason: '' }
} else {
return { isCanActiveTool: false, reason: '' }
}
}
}
},
checkCurrentCollapseCanActiveTool(toolName, isPrompt) {
const refName = `${this.activeItem.activeCollapseId}${this.activeItem.activeRowIndex}`
// 未测量且未保存 可激活
if (!this.$refs[refName][0].questionForm.MeasureData && this.$refs[refName][0].questionForm.isSave === false) {
// 靶病灶
if (this.$refs[refName][0].lesionType === 0) {
var isLymphNodes = this.$refs[refName][0].getQuestionVal(2)
if ((isLymphNodes === '是' || isLymphNodes === 'Yes') && toolName !== 'Bidirectional') {
return { isCanActiveTool: false, reason: '淋巴结靶病灶只能使用长短径测量工具' }
} else if ((isLymphNodes === '否' || isLymphNodes === 'No') && toolName !== 'Length') {
return { isCanActiveTool: false, reason: '非淋巴结靶病灶只能使用长径测量工具' }
} else if (!isLymphNodes && (toolName !== 'Bidirectional' || toolName !== 'Length')) {
return { isCanActiveTool: false, reason: '靶病灶只能使用长径测量工具或长短径测量工具' }
} else {
return { isCanActiveTool: true, reason: '' }
}
}
if (this.$refs[refName][0].lesionType === 1) {
// 非靶病灶,不限制
if (toolName === 'Bidirectional' || toolName === 'Length' || toolName === 'ArrowAnnotate') {
return { isCanActiveTool: true, reason: '' }
} else {
return { isCanActiveTool: false, reason: '非靶病灶只能使用长径测量工具或长短径测量工具或标注工具' }
}
}
if (this.$refs[refName][0].lesionType === 2) {
// 新病灶,不限制
if (toolName === 'Bidirectional' || toolName === 'Length' || toolName === 'ArrowAnnotate') {
return { isCanActiveTool: true, reason: '' }
} else {
return { isCanActiveTool: false, reason: '新病灶只能使用长径测量工具或长短径测量工具或标注工具' }
}
}
} else if (this.$refs[refName][0].questionForm.MeasureData && this.$refs[refName][0].questionForm.isSave === false) {
// 未保存且有标记 不可激活 提示当前未保存
// if (isPrompt) {
// this.$confirm(`病灶${this.unSaveTargets[0].lessionName}信息未保存,不允许继续添加!`, {
// type: 'warning',
// showCancelButton: false,
// callback: action => {}
// })
// }
return { isCanActiveTool: false, reason: `病灶${this.unSaveTargets[0].lessionName}信息未保存,不允许继续添加!` }
} else if (this.$refs[refName][0].questionForm.isSave !== false) {
// 当前病灶已保存 可激活 (新病灶)
if (toolName === 'Bidirectional' || toolName === 'Length' || toolName === 'ArrowAnnotate') {
return { isCanActiveTool: true, reason: '' }
} else {
return { isCanActiveTool: false, reason: '' }
}
}
},
// checkCurrentCollapseCanActiveTool(toolName, isPrompt) {
// const refName = `${this.activeItem.activeCollapseId}${this.activeItem.activeRowIndex}`
// console.log(this.$refs[refName][0].questionForm)
// // 未测量且未保存 可激活
// if (!this.$refs[refName][0].questionForm.MeasureData && this.$refs[refName][0].questionForm.isSave === false) {
// // 靶病灶
// if (this.$refs[refName][0].lesionType === 0) {
// var isLymphNodes = this.$refs[refName][0].getQuestionVal(2)
// if ((isLymphNodes === '是' || isLymphNodes === 'Yes') && toolName === 'Bidirectional') {
// return true
// } else if ((isLymphNodes === '否' || isLymphNodes === 'No') && toolName === 'Length') {
// return true
// } else if (!isLymphNodes && (toolName === 'Bidirectional' || toolName === 'Length')) {
// return true
// } else {
// return false
// }
// }
// if (this.$refs[refName][0].lesionType === 1) {
// // 非靶病灶,不限制
// if (toolName === 'Bidirectional' || toolName === 'Length' || toolName === 'ArrowAnnotate') {
// return true
// } else {
// return false
// }
// }
// if (this.$refs[refName][0].lesionType === 2) {
// // 新病灶,不限制
// if (toolName === 'Bidirectional' || toolName === 'Length' || toolName === 'ArrowAnnotate') {
// return true
// } else {
// return false
// }
// }
// } else if (this.$refs[refName][0].questionForm.MeasureData && this.$refs[refName][0].questionForm.isSave === false) {
// // 未保存且有标记 不可激活 提示当前未保存
// if (isPrompt) {
// this.$confirm(`病灶${this.unSaveTargets[0].lessionName}信息未保存,不允许继续添加!`, {
// type: 'warning',
// showCancelButton: false,
// callback: action => {}
// })
// }
// return false
// } else if (this.$refs[refName][0].questionForm.isSave !== false) {
// // 当前病灶已保存 可激活 (新病灶)
// if (toolName === 'Bidirectional' || toolName === 'Length' || toolName === 'ArrowAnnotate') {
// return true
// } else {
// return false
// }
// }
// },
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.MaxQuestionCount}个`, {
type: 'warning',
showCancelButton: false,
callback: action => {}
})
} else {
var obj = {
isSave: false
}
qs.TableQuestions.Questions.forEach(item => {
if (item.Type === 'increment') {
obj.RowIndex = qs.TableQuestions.Answers.length + 1
obj[item.Id] = `${qs.OrderMark}${String(obj.RowIndex).padStart(2, '0')}`
} else {
obj[item.Id] = ''
}
})
qs.TableQuestions.Answers.push(obj)
this.activeItem.activeRowIndex = String(obj.RowIndex)
this.activeItem.activeCollapseId = qs.Id
this.activeName = this.activeItem.activeCollapseId + this.activeItem.activeRowIndex
this.$nextTick(() => {
const refName = `${this.activeItem.activeCollapseId}${this.activeItem.activeRowIndex}`
this.$refs[refName][0].handleSave()
})
}
},
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
},
getUnSaveTarget() {
this.unSaveTargets = []
this.tableQuestions.map(item => {
if (item.TableQuestions && item.TableQuestions.Answers) {
item.TableQuestions.Answers.map(t => {
const refName = `${item.Id}${t.RowIndex}`
if (this.$refs[refName][0] && this.$refs[refName][0].questionForm.isSave === false) {
this.unSaveTargets.push({ lessionName: `${item.OrderMark}${String(t.RowIndex).padStart(2, '0')}`, rowIndex: t.RowIndex, questionId: item.Id })
}
})
}
})
return this.unSaveTargets
},
handleCollapseChange() {
if (this.activeName) {
const len = this.activeName.length
this.activeItem.activeRowIndex = this.activeName.substring(len - 1, len)
this.activeItem.activeCollapseId = this.activeName.substring(0, len - 1)
const refName = `${this.activeItem.activeCollapseId}${this.activeItem.activeRowIndex}`
this.$refs[refName][0].handleLocation()
} else {
this.activeItem.activeRowIndex = null
this.activeItem.activeCollapseId = null
// if (this.activeItem.activeRowIndex) {
// const refName = `${this.activeItem.activeCollapseId}${this.activeItem.activeRowIndex}`
// if (this.$refs[refName][0].questionForm.isSave === false) {
// this.activeName = this.activeItem.activeCollapseId + this.activeItem.activeRowIndex
// this.$confirm('请将病灶信息填写完整!', {
// type: 'warning',
// distinguishCancelAndClose: true
// })
// .then(() => { this.activeName = this.activeItem.activeCollapseId + this.activeItem.activeRowIndex })
// .catch(() => {})
// return
// } else {
// this.activeItem.activeRowIndex = null
// this.activeItem.activeCollapseId = null
// }
// } else {
// this.activeItem.activeRowIndex = null
// this.activeItem.activeCollapseId = null
// }
}
},
// 更改病灶类型
async changeLesionType(questionsObj) {
if (questionsObj.type === 1) {
this.removeQuestionAnswer(questionsObj)
} else {
await this.getReadingQuestionAndAnswer(this.visitTaskId)
}
var lesionObj = { isSave: false }
var questionObj = questionsObj.questionForm
// 切换到新的病灶集合
var targetObj = this.tableQuestions.find(item => item.LesionType === questionsObj.newLesionType)
var rowIndex = targetObj.TableQuestions.Answers.length + 1
targetObj.TableQuestions.Questions.forEach(i => {
if (i.QuestionMark === 3) {
lesionObj[i.Id] = `${targetObj.OrderMark}${String(rowIndex).padStart(2, '0')}`
} else {
var obj = questionObj.find(v => v.QuestionMark === i.QuestionMark)
if (obj) {
lesionObj[i.Id] = obj.Answer
}
}
})
lesionObj.RowIndex = rowIndex
lesionObj.isSave = false
targetObj.TableQuestions.Answers.push(lesionObj)
this.activeItem.activeRowIndex = String(rowIndex)
this.activeItem.activeCollapseId = targetObj.Id
this.activeName = this.activeItem.activeCollapseId + this.activeItem.activeRowIndex
const refName = `${this.activeItem.activeCollapseId}${this.activeItem.activeRowIndex}`
this.$nextTick(() => {
if (questionsObj.measureData) {
var measureData = questionsObj.measureData
measureData.data.remark = `${targetObj.OrderMark}${String(rowIndex).padStart(2, '0')}`
Store.$emit('removeToolState', measureData)
this.$refs[refName][0].setMeasureData(measureData)
}
})
// setTimeout(() => {
// }, 500)
},
removeQuestionAnswer(questionsObj) {
// 移除当前病灶
var currentObj = this.tableQuestions.find(item => item.LesionType === questionsObj.oldLesionType)
console.log(currentObj)
if (currentObj) {
var i = currentObj.TableQuestions.Answers.findIndex(i => String(i.RowIndex) === String(questionsObj.rowIndex))
if (i === -1) return
currentObj.TableQuestions.Answers.splice(i, 1)
}
},
// 创建新病灶
createNLTarget(measureData) {
var idx = this.tableQuestions.findIndex(item => item.LesionType === 2)
if (idx > -1) {
this.addNLTarget(this.tableQuestions[idx], measureData)
}
},
addNLTarget(nlTarget, measureData) {
var obj = { isSave: false }
obj.RowIndex = nlTarget.TableQuestions.Answers.length + 1
var questions = nlTarget.TableQuestions.Questions.find(item => item.QuestionMark === 3)
if (questions) {
obj[questions.Id] = `${nlTarget.OrderMark}${String(obj.RowIndex).padStart(2, '0')}`
}
nlTarget.TableQuestions.Answers.push(obj)
this.activeItem.activeRowIndex = String(obj.RowIndex)
this.activeItem.activeCollapseId = nlTarget.Id
this.activeName = this.activeItem.activeCollapseId + this.activeItem.activeRowIndex
const refName = `${this.activeItem.activeCollapseId}${this.activeItem.activeRowIndex}`
this.$nextTick(() => {
this.$refs[refName][0].setMeasureData(measureData)
})
},
setCollapseActive(measuredData) {
if (measuredData) {
if (this.activeItem.activeRowIndex === measuredData.RowIndex && this.activeItem.activeCollapseId === measuredData.QuestionId) {
return
} else {
this.activeItem.activeCollapseId = measuredData.QuestionId
this.activeItem.activeRowIndex = measuredData.RowIndex
this.activeName = this.activeItem.activeCollapseId + this.activeItem.activeRowIndex
}
}
},
modifyMeasuredData(measureObj) {
if (measureObj.questionInfo) {
this.activeItem.activeCollapseId = measureObj.questionInfo.QuestionId
this.activeItem.activeRowIndex = String(measureObj.questionInfo.RowIndex)
this.activeName = this.activeItem.activeCollapseId + this.activeItem.activeRowIndex
const refName = `${this.activeItem.activeCollapseId}${this.activeItem.activeRowIndex}`
this.$refs[refName][0].setMeasureData(measureObj.measureData)
}
},
// 设置测量数据
setMeasuredData(measureData) {
if (this.activeItem.activeCollapseId) {
// 判断是否存在测量数据
const refName = `${this.activeItem.activeCollapseId}${this.activeItem.activeRowIndex}`
if ((this.$refs[refName][0].questionForm.MeasureData && measureData.data.uuid === this.$refs[refName][0].questionForm.MeasureData.data.uuid) || !this.$refs[refName][0].questionForm.MeasureData) {
this.$refs[refName][0].setMeasureData(measureData)
} else {
this.createNLTarget(measureData)
}
} else {
// 作为新病灶
this.createNLTarget(measureData)
}
},
close() {
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{
>>>.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>