266 lines
7.2 KiB
Plaintext
266 lines
7.2 KiB
Plaintext
<template>
|
|
<div class="criterion-form-item">
|
|
|
|
<el-form-item
|
|
:label="`${question.QuestionName}`"
|
|
:prop="question.Id"
|
|
:rules="[
|
|
{ required: (question.IsRequired === 0 || (question.IsRequired ===1 && question.RelevanceId && !!~question.RelevanceValueList.indexOf(questionForm[question.RelevanceId]))) && question.Type!=='group',
|
|
message: $t('common:ruleMessage:specify'), trigger: ['blur'],
|
|
type: question.ClinicalTableQuestionType === 'checkbox' ? 'array' : 'string'},
|
|
]"
|
|
:class="[question.ClinicalTableQuestionType==='group'?'mb':question.ClinicalTableQuestionType==='upload'?'uploadWrapper':'']"
|
|
>
|
|
<el-input
|
|
v-if="question.ClinicalTableQuestionType==='input'"
|
|
v-model="questionForm[question.Id]"
|
|
:disabled="question.TableQuestionType === 2"
|
|
/>
|
|
<!-- 多行文本输入框 -->
|
|
<el-input
|
|
v-if="question.ClinicalTableQuestionType==='textarea'"
|
|
v-model="questionForm[question.Id]"
|
|
type="textarea"
|
|
:autosize="{ minRows: 2, maxRows: 4}"
|
|
/>
|
|
<!-- 多行文本输入框 -->
|
|
<el-input
|
|
v-if="question.ClinicalQuestionType==='textarea'"
|
|
v-model="questionForm[question.Id]"
|
|
type="textarea"
|
|
:maxLength="question.MaxAnswerLength ? question.MaxAnswerLength : 200"
|
|
:autosize="{ minRows: 2, maxRows: 4}"
|
|
/>
|
|
<!-- 下拉框 -->
|
|
<el-select
|
|
v-if="question.ClinicalTableQuestionType==='select'"
|
|
v-model="questionForm[question.Id]"
|
|
clearable
|
|
:disabled="(question.TableQuestionType === 2 || question.QuestionGenre === 2) && !!question.DictionaryCode"
|
|
>
|
|
<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.ClinicalTableQuestionType === 'time'"
|
|
v-model="questionForm[question.Id]"
|
|
format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd"
|
|
style="width: 200px"
|
|
align="right"
|
|
type="date"
|
|
placeholder="选择日期"
|
|
>
|
|
</el-date-picker>
|
|
<!-- 单选 -->
|
|
<el-radio-group
|
|
v-if="question.ClinicalTableQuestionType==='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.ClinicalTableQuestionType==='checkbox'"
|
|
v-model="questionForm[question.Id]"
|
|
>
|
|
<el-checkbox
|
|
v-for="val in question.TypeValue.split('|')"
|
|
:key="val"
|
|
:label="val"
|
|
>
|
|
{{ val }}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
<el-input
|
|
type="number"
|
|
v-if="question.ClinicalTableQuestionType === 'number'"
|
|
style="width: 200px"
|
|
v-model="questionForm[question.Id]"
|
|
>
|
|
<template slot="append" v-if="question.Unit">{{question.Unit}}</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { uploadReadingAnswerImage, getTrialOrganList, getCustomTableQuestionPreview } from '@/api/trials'
|
|
export default {
|
|
name: 'QuestionFormItem',
|
|
props: {
|
|
questionForm: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
},
|
|
question: {
|
|
type: Object,
|
|
default() {
|
|
return []
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
addOrEdit: { visible: false, title: '' },
|
|
fileList: [],
|
|
accept: '.png,.jpg,.jpeg',
|
|
imgVisible: false,
|
|
imageUrl: '',
|
|
urls: [],
|
|
organList: [],
|
|
QuestionsList: [],
|
|
QuestionsForm: {}
|
|
}
|
|
},
|
|
computed: {
|
|
calculationValue: {
|
|
get() {
|
|
return this.questionForm[this.question.Id]
|
|
},
|
|
set() {
|
|
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
questionForm: {
|
|
deep: true,
|
|
immediate: true,
|
|
handler(v) {
|
|
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
console.log(this.question)
|
|
if (this.question.ClinicalTableQuestionType === 'number') {
|
|
this.$set(this.questionForm, this.question.Id, 0)
|
|
} else if (this.question.ClinicalTableQuestionType === 'time') {
|
|
this.$set(this.questionForm, this.question.Id, null)
|
|
} else if (this.question.ClinicalTableQuestionType === 'checkbox') {
|
|
this.$set(this.questionForm, this.question.Id, [])
|
|
} else {
|
|
this.$set(this.questionForm, this.question.Id, '')
|
|
}
|
|
},
|
|
methods: {
|
|
save() {
|
|
},
|
|
openAddTableCol(row) {
|
|
this.addOrEdit.visible = true
|
|
this.addOrEdit.title = row.QuestionName + '表格问题'
|
|
this.QuestionsList = row.TableQuestions.Questions
|
|
this.AnswersList = row.TableQuestions.Answers
|
|
this.questionForm = {}
|
|
console.log(this.questionForm)
|
|
},
|
|
formItemChange(v, question) {
|
|
},
|
|
formItemNumberChange(v, question) {
|
|
this.$emit('formItemTableNumberChange', v, question)
|
|
},
|
|
resetChild(obj) {
|
|
obj.forEach(i => {
|
|
this.$emit('resetFormItemData', i.Id)
|
|
if (i.Childrens && i.Childrens.length > 0) {
|
|
this.resetChild(i.Childrens)
|
|
}
|
|
})
|
|
},
|
|
resetFormItemData(v) {
|
|
this.$emit('resetFormItemData', v)
|
|
},
|
|
setFormItemData(obj) {
|
|
this.$emit('setFormItemData', obj)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.my_dialog{
|
|
.criterion-form-item{
|
|
/deep/ .el-form-item__content{
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
.criterion-form-item{
|
|
.el-form-item{
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
}
|
|
/deep/ .el-form-item__content{
|
|
width: 500px;
|
|
}
|
|
.el-input{
|
|
width:100%;
|
|
}
|
|
.mb{
|
|
margin-bottom: 0px;
|
|
}
|
|
.disabled{
|
|
/deep/ .el-upload--picture-card {
|
|
display: none;
|
|
}
|
|
}
|
|
.uploadWrapper{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
</style>
|