559 lines
18 KiB
Plaintext
559 lines
18 KiB
Plaintext
<template>
|
|
<div class="criterion-form-item">
|
|
<div
|
|
v-if="!!question.QuestionName && question.ClinicalQuestionType==='group'"
|
|
style="font-weight: bold;font-size: 16px;margin: 5px 0px;"
|
|
>
|
|
{{ language==='en'?question.QuestionEnName:question.QuestionName }}
|
|
</div>
|
|
<div
|
|
v-else-if="question.ClinicalQuestionType==='table' && ((question.ClinicalQuestionShowEnum===1 && question.ParentTriggerValue === questionForm[question.ParentId].toString()) || question.ClinicalQuestionShowEnum===0)"
|
|
style="font-weight: bold;font-size: 14px;margin: 5px 0px;"
|
|
>
|
|
<div style="display: flex;justify-content: space-between;">
|
|
<span>
|
|
{{ question.QuestionName }}
|
|
</span>
|
|
<!-- 添加 -->
|
|
<el-button type="primary" @click="openAddTableCol(question)">
|
|
{{ $t('trials:readingUnit:qsList:title:add') }}
|
|
</el-button>
|
|
</div>
|
|
<el-table
|
|
:data="questionForm[question.Id]"
|
|
>
|
|
<el-table-column
|
|
v-for="item of question.TableQuestions"
|
|
:key="item.Id"
|
|
:prop="item.Id"
|
|
:label="item.QuestionName"
|
|
min-width="100"
|
|
show-overflow-tooltip
|
|
/>
|
|
</el-table>
|
|
</div>
|
|
<template v-else>
|
|
<el-form-item
|
|
v-if="(question.ClinicalQuestionShowEnum===1 && question.ParentTriggerValue === questionForm[question.ParentId].toString()) || question.ClinicalQuestionShowEnum===0"
|
|
:label="`${question.QuestionName}`"
|
|
:prop="question.Id"
|
|
:rules="[
|
|
{ required: (question.IsRequired === 0 || (question.IsRequired ===1 && question.RelevanceId && (question.RelevanceValue === questionForm[question.RelevanceId].toString()))) && question.Type!=='group' && question.Type!=='table',
|
|
message: this.$t('common:ruleMessage:specify'), trigger: ['blur', 'change']},
|
|
]"
|
|
:class="[question.Type==='group'?'mb':question.Type==='upload'?'uploadWrapper':'']"
|
|
>
|
|
<!-- 输入框 -->
|
|
<el-input
|
|
v-if="question.ClinicalQuestionType==='input'"
|
|
v-model="questionForm[question.Id]"
|
|
:disabled="question.TableQuestionType === 2"
|
|
/>
|
|
<!-- 多行文本输入框 -->
|
|
<el-input
|
|
v-if="question.ClinicalQuestionType==='textarea'"
|
|
v-model="questionForm[question.Id]"
|
|
type="textarea"
|
|
:autosize="{ minRows: 2, maxRows: 4}"
|
|
/>
|
|
<!-- 下拉框 -->
|
|
<el-select
|
|
v-if="question.ClinicalQuestionType==='select'"
|
|
v-model="questionForm[question.Id]"
|
|
clearable
|
|
:disabled="(question.TableQuestionType === 2 || question.QuestionGenre === 2) && !!question.DictionaryCode"
|
|
@change="((val)=>{formItemChange(val, question)})"
|
|
>
|
|
<template v-if="question.TableQuestionType === 1">
|
|
<el-option
|
|
v-for="item in organList"
|
|
:key="item.Id"
|
|
:label="item[question.DataTableColumn]"
|
|
:value="item[question.DataTableColumn]"
|
|
/>
|
|
</template>
|
|
<template v-else-if="question.TableQuestionType === 3 || question.QuestionGenre === 3">
|
|
<el-option
|
|
v-for="item of $d[question.DictionaryCode]"
|
|
:key="item.id"
|
|
:value="item.value"
|
|
:label="item.label"
|
|
/>
|
|
</template>
|
|
<template v-else-if="(question.TableQuestionType === 2 || question.QuestionGenre === 2) && question.DictionaryCode">
|
|
<el-option
|
|
v-for="item of $d[question.DictionaryCode]"
|
|
:key="item.id"
|
|
:value="item.value"
|
|
:label="item.label"
|
|
/>
|
|
</template>
|
|
<template v-else>
|
|
<el-option
|
|
v-for="val in question.TypeValue.split('|')"
|
|
:key="val"
|
|
:label="val"
|
|
:value="val"
|
|
/>
|
|
</template>
|
|
|
|
</el-select>
|
|
<!-- 单选 -->
|
|
<el-date-picker
|
|
v-if="question.ClinicalQuestionType === 'time'"
|
|
v-model="questionForm[question.Id]"
|
|
style="width: 200px"
|
|
align="right"
|
|
type="date"
|
|
format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="选择日期"
|
|
>
|
|
</el-date-picker>
|
|
<!-- 单选 -->
|
|
<el-radio-group
|
|
v-if="question.ClinicalQuestionType==='radio'"
|
|
v-model="questionForm[question.Id]"
|
|
@change="((val)=>{formItemChange(val, question)})"
|
|
>
|
|
<template v-if="question.DictionaryCode">
|
|
<el-radio
|
|
v-for="item of $d[question.DictionaryCode]"
|
|
:key="item.id"
|
|
:label="item.value"
|
|
>
|
|
{{ item.label }}
|
|
</el-radio>
|
|
</template>
|
|
<template v-if="question.TypeValue">
|
|
<el-radio
|
|
v-for="val in question.TypeValue.split('|')"
|
|
:key="val"
|
|
:label="val"
|
|
>
|
|
{{ val }}
|
|
</el-radio>
|
|
</template>
|
|
</el-radio-group>
|
|
<!-- 复选框 -->
|
|
<el-checkbox-group
|
|
v-if="question.ClinicalQuestionType==='checkbox'"
|
|
v-model="questionForm[question.Id]"
|
|
>
|
|
<template v-if="question.DictionaryCode">
|
|
<el-checkbox
|
|
v-for="item of $d[question.DictionaryCode]"
|
|
:key="item.id"
|
|
:label="item.value"
|
|
>
|
|
{{ item.label }}
|
|
</el-checkbox>
|
|
</template>
|
|
<template v-if="question.TypeValue">
|
|
<el-checkbox
|
|
v-for="val in question.TypeValue.split('|')"
|
|
:key="val"
|
|
:label="val"
|
|
>
|
|
{{ val }}
|
|
</el-checkbox>
|
|
</template>
|
|
</el-checkbox-group>
|
|
<el-input
|
|
type="number"
|
|
v-if="question.ClinicalQuestionType === 'number'"
|
|
style="width: 200px"
|
|
v-model="questionForm[question.Id]"
|
|
>
|
|
<template slot="append" v-if="question.Unit">{{question.Unit}}</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</template>
|
|
|
|
<template v-if="question.Childrens && question.Childrens.length>0 && question.ClinicalQuestionType !== 'table'">
|
|
<QuestionFormItem
|
|
v-for="(item) in question.Childrens"
|
|
:key="item.Id"
|
|
:question="item"
|
|
:question-form="questionForm"
|
|
:trial-clinical-id="trialClinicalId"
|
|
@formItemNumberChange="formItemNumberChange"
|
|
@setFormItemData="setFormItemData"
|
|
@resetFormItemData="resetFormItemData"
|
|
/>
|
|
</template>
|
|
<el-dialog
|
|
v-if="addOrEdit.visible"
|
|
class="my_dialog"
|
|
:visible.sync="addOrEdit.visible"
|
|
:close-on-click-modal="false"
|
|
:title="addOrEdit.title"
|
|
width="400px"
|
|
append-to-body
|
|
>
|
|
<el-form
|
|
ref="tableQsForm"
|
|
v-loading="loading"
|
|
size="small"
|
|
:model="QuestionsForm"
|
|
>
|
|
<QuestionTableFormItem
|
|
v-for="(item) in QuestionsList"
|
|
:key="item.Id"
|
|
:question="item"
|
|
:question-form="QuestionsForm"
|
|
@setFormItemData="setFormItemData"
|
|
@resetFormItemData="resetFormItemData"
|
|
/>
|
|
<div class="base-dialog-footer" style="text-align:right;margin-top:10px;">
|
|
<el-form-item>
|
|
<!-- 取消 -->
|
|
<el-button
|
|
size="small"
|
|
type="primary"
|
|
@click="addOrEdit.visible = false"
|
|
>
|
|
{{ $t('common:button:cancel') }}
|
|
</el-button>
|
|
<!-- 保存 -->
|
|
<el-button size="small" type="primary" @click="save">
|
|
{{ $t('common:button:save') }}
|
|
</el-button>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { uploadReadingAnswerImage, getTrialOrganList, getCustomTableQuestionPreview, getQuestionCalculateRelation } from '@/api/trials'
|
|
import QuestionTableFormItem from './QuestionTableFormItem'
|
|
import { mapGetters } from 'vuex'
|
|
export default {
|
|
name: 'QuestionFormItem',
|
|
components: { QuestionTableFormItem },
|
|
props: {
|
|
questionForm: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
},
|
|
question: {
|
|
type: Object,
|
|
default() {
|
|
return []
|
|
}
|
|
},
|
|
trialClinicalId: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters(['language'])
|
|
},
|
|
data() {
|
|
return {
|
|
addOrEdit: { visible: false, title: '' },
|
|
fileList: [],
|
|
accept: '.png,.jpg,.jpeg',
|
|
imgVisible: false,
|
|
imageUrl: '',
|
|
urls: [],
|
|
organList: [],
|
|
QuestionsList: [],
|
|
QuestionsForm: {},
|
|
AnswersList: [],
|
|
loading: false
|
|
}
|
|
},
|
|
watch: {
|
|
questionForm: {
|
|
deep: true,
|
|
immediate: true,
|
|
handler(v, oldv) {
|
|
try {
|
|
if (!v || !v[this.question.Id] || !oldv || !oldv[this.question.Id]) return
|
|
} catch (e) {
|
|
console.log(e, v)
|
|
}
|
|
this.formItemNumberChange(this.question.Id, false)
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.question.ClinicalQuestionType === 'table') {
|
|
// this.getQuestionCalculateRelation()
|
|
if (this.questionForm[this.question.Id]) {
|
|
this.QuestionsForm = {}
|
|
this.question.TableQuestions.forEach(v => {
|
|
if (v.ClinicalQuestionType === 'number') {
|
|
this.$set(this.QuestionsForm, v.Id, 0)
|
|
} else {
|
|
this.$set(this.QuestionsForm, v.Id, '')
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
limitInput(value, a, b) {
|
|
if (value.indexOf('.') > -1) {
|
|
if (value.split('.')[1].length >= this.digitPlaces) {
|
|
this.$set(a, b, parseFloat(value).toFixed(this.digitPlaces))
|
|
}
|
|
} else {
|
|
}
|
|
},
|
|
formItemNumberChange() {
|
|
},
|
|
getQuestionCalculateRelation() {
|
|
getQuestionCalculateRelation({
|
|
TrialReadingCriterionId: this.criterionId,
|
|
ReadingQuestionId: this.question.Id
|
|
}).then(res => {
|
|
this.calculationList = res.Result
|
|
})
|
|
},
|
|
save() {
|
|
this.$refs.tableQsForm.validate(valid => {
|
|
if (!valid) return
|
|
this.AnswersList.push(this.QuestionsForm)
|
|
this.$emit('setFormItemData', { key: this.question.Id, val: this.AnswersList })
|
|
this.formItemNumberChange(this.question.Id, true)
|
|
this.addOrEdit.visible = false
|
|
})
|
|
},
|
|
// logic(rules, num = 0) {
|
|
// try {
|
|
// if (rules.CalculateQuestionList.length === 0) {
|
|
// return false
|
|
// }
|
|
// rules.CalculateQuestionList.forEach((o, i) => {
|
|
// if (i === 0) {
|
|
// if (rules.CustomCalculateMark > 4) {
|
|
// switch (rules.CustomCalculateMark) {
|
|
// case 5:
|
|
// this.questionForm[o.QuestionId].forEach((q, qi) => {
|
|
// if (qi === 0) {
|
|
// num = parseFloat(q[o.TableQuestionId])
|
|
// } else {
|
|
// num *= parseFloat(q[o.TableQuestionId])
|
|
// }
|
|
// })
|
|
// break
|
|
// case 6:
|
|
// console.log(this.questionForm[o.QuestionId])
|
|
// console.log(this.questionForm)
|
|
// this.questionForm[o.QuestionId].forEach((q, qi) => {
|
|
// if (qi === 0) {
|
|
// num = parseFloat(q[o.TableQuestionId])
|
|
// } else {
|
|
// num += parseFloat(q[o.TableQuestionId])
|
|
// }
|
|
// })
|
|
// break
|
|
// case 7:
|
|
// this.questionForm[o.QuestionId].forEach((q, qi) => {
|
|
// if (qi === 0) {
|
|
// num = parseFloat(q[o.TableQuestionId])
|
|
// } else {
|
|
// num += parseFloat(q[o.TableQuestionId])
|
|
// }
|
|
// })
|
|
// num = this.questionForm[o.QuestionId].length === 0 ? 0 : num / this.questionForm[o.QuestionId].length
|
|
// break
|
|
// case 8:
|
|
// var arr = []
|
|
// this.questionForm[o.QuestionId].forEach(q => {
|
|
// arr.push(q[o.TableQuestionId])
|
|
// })
|
|
// num = arr.length === 0 ? 0 : Math.max(...arr)
|
|
// break
|
|
// case 9:
|
|
// var arr = []
|
|
// this.questionForm[o.QuestionId].forEach(q => {
|
|
// arr.push(q[o.TableQuestionId])
|
|
// })
|
|
// num = arr.length === 0 ? 0 : Math.min(...arr)
|
|
// console.log('min', this.questionForm[o.QuestionId], arr, num)
|
|
// break
|
|
// }
|
|
// } else {
|
|
// num = parseFloat(this.questionForm[o.TableQuestionId])
|
|
// }
|
|
// } else {
|
|
// switch (rules.CustomCalculateMark) {
|
|
// case 1:
|
|
// num += parseFloat(this.questionForm[o.TableQuestionId])
|
|
// break
|
|
// case 2:
|
|
// num -= parseFloat(this.questionForm[o.TableQuestionId])
|
|
// break
|
|
// case 3:
|
|
// num *= parseFloat(this.questionForm[o.TableQuestionId])
|
|
// break
|
|
// case 4:
|
|
// num /= parseFloat(this.questionForm[o.TableQuestionId])
|
|
// break
|
|
// }
|
|
// }
|
|
// })
|
|
// } catch (e) {
|
|
// console.log(e)
|
|
// }
|
|
// return num
|
|
// },
|
|
// formItemNumberChange(questionId, isTable) {
|
|
// if (isTable) {
|
|
// this.calculationList.forEach((v, i) => {
|
|
// console.log(v, i)
|
|
// var find = v.CalculateQuestionList.filter(o => {
|
|
// return o.QuestionId === questionId
|
|
// })
|
|
// // find的自动计算值number
|
|
// console.log('find', find)
|
|
// if (find) {
|
|
// var num = this.logic(v)
|
|
// if (num !== false) {
|
|
// this.$emit('setFormItemData', { key: v.QuestionId, val: num })
|
|
// }
|
|
// }
|
|
// })
|
|
// } else {
|
|
// this.calculationList.forEach(v => {
|
|
// var find = v.CalculateQuestionList.filter(o => {
|
|
// return o.TableQuestionId === questionId
|
|
// })
|
|
// // find的自动计算值number
|
|
// if (find) {
|
|
// var num = this.logic(v)
|
|
// if (num !== false) {
|
|
// this.$emit('setFormItemData', { key: v.QuestionId, val: num })
|
|
// }
|
|
// }
|
|
// })
|
|
// }
|
|
// // this.$emit('formItemNumberChange')
|
|
// },
|
|
// formItemTableNumberChange() {
|
|
// this.question.TableQuestions.Questions.forEach(v => {
|
|
// if (v.Type === 'number' && v.DataSource === 1) {
|
|
// var CalculateQuestions = JSON.parse(v.CalculateQuestions)
|
|
// var num
|
|
// CalculateQuestions.forEach((o, i) => {
|
|
// if (i === 0) {
|
|
// num = this.QuestionsForm[o.TableQuestionId]
|
|
// } else {
|
|
// switch (v.CustomCalculateMark) {
|
|
// case 1:
|
|
// num += this.QuestionsForm[o.TableQuestionId]
|
|
// break
|
|
// case 2:
|
|
// num -= this.QuestionsForm[o.TableQuestionId]
|
|
// break
|
|
// case 3:
|
|
// num *= this.QuestionsForm[o.TableQuestionId]
|
|
// break
|
|
// case 4:
|
|
// num /= this.QuestionsForm[o.TableQuestionId]
|
|
// break
|
|
// }
|
|
// }
|
|
// })
|
|
// this.$set(this.QuestionsForm, v.Id, num.toString())
|
|
// }
|
|
// })
|
|
// },
|
|
openAddTableCol(row) {
|
|
this.addOrEdit.visible = true
|
|
this.addOrEdit.title = row.QuestionName + this.$t('trials:readingUnit:qsList:title:tableQs')// '表格问题'
|
|
this.QuestionsList = row.TableQuestions
|
|
this.QuestionsForm = {}
|
|
},
|
|
// getOrganInfoList() {
|
|
// var param = {
|
|
// trialId: this.$route.query.trialId,
|
|
// lesionType: this.question.LesionType,
|
|
// // systemCriterionId: this.criterionId,
|
|
// isEnable: true
|
|
// }
|
|
// getTrialOrganList(param).then(res => {
|
|
// this.organList = res.Result
|
|
// })
|
|
// },
|
|
// formNumberItemChange(v) {
|
|
// this.$emit('setFormItemData', { key: v.QuestionId, val: num })
|
|
// },
|
|
formItemChange(v, question) {
|
|
if (question.Childrens.length > 0) {
|
|
this.resetChild(question.Childrens)
|
|
}
|
|
// if (question.TableQuestionType === 1 && question.RelationQuestions.length > 0) {
|
|
// var index = this.organList.findIndex(item => item[question.DataTableColumn] === v)
|
|
// if (index < 0) return
|
|
// var selected = this.organList[index]
|
|
// this.question.RelationQuestions.map(qs => {
|
|
// var val = selected[qs.DataTableColumn]
|
|
// // if (typeof val === 'boolean') {
|
|
// // // val = String(val)
|
|
// // }
|
|
// this.$emit('setFormItemData', { key: qs.Id, val: val })
|
|
// })
|
|
// }
|
|
},
|
|
resetChild(obj) {
|
|
obj.forEach(i => {
|
|
this.$emit('resetFormItemData', i.Id, i)
|
|
if (i.Childrens && i.Childrens.length > 0) {
|
|
this.resetChild(i.Childrens)
|
|
}
|
|
})
|
|
},
|
|
resetFormItemData(v, i) {
|
|
this.$emit('resetFormItemData', v, i)
|
|
},
|
|
setFormItemData(obj) {
|
|
this.$emit('setFormItemData', obj)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.my_dialog{
|
|
.criterion-form-item{
|
|
>>>.el-form-item__content{
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
.criterion-form-item{
|
|
.el-form-item{
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
}
|
|
>>>.el-form-item__content{
|
|
width: 500px;
|
|
}
|
|
.el-input{
|
|
width:100%;
|
|
}
|
|
.mb{
|
|
margin-bottom: 0px;
|
|
}
|
|
.disabled{
|
|
>>>.el-upload--picture-card {
|
|
display: none;
|
|
}
|
|
}
|
|
.uploadWrapper{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
</style>
|