irc_web/.svn/pristine/1a/1a83b77db16210c6f477906bb7d...

159 lines
5.2 KiB
Plaintext

<template>
<el-form
v-if="isRender"
ref="questionForm"
:model="questionForm"
size="small"
style="width:600px;"
>
<template v-for="item in answers">
<el-form-item
v-if="item.IsShow"
:key="item.TrialQCQuestionConfigureId"
:label="`${item.QuestionName}`"
:prop="item.TrialQCQuestionConfigureId"
:rules="{required: item.IsRequired, message: $t('common:ruleMessage:specify')}"
>
<!-- 输入框 -->
<el-input
v-if="item.Type==='input'"
v-model="questionForm[item.TrialQCQuestionConfigureId]"
:disabled="!item.IsEnable"
style="width:500px"
/>
<!-- 多行文本输入框 -->
<el-input
v-if="item.Type==='textarea'"
v-model="questionForm[item.TrialQCQuestionConfigureId]"
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
:disabled="!item.IsEnable"
style="width:500px"
/>
<!-- 下拉框 -->
<el-select
v-if="item.Type==='select'"
v-model="questionForm[item.TrialQCQuestionConfigureId]"
:disabled="!item.IsEnable"
@change="((val)=>{formItemChange(val, item)})"
>
<el-option
v-for="val in item.TypeValue.split('|')"
:key="val"
:label="val"
:value="val"
/>
</el-select>
<!-- 单选 -->
<el-radio-group
v-if="item.Type==='radio'"
v-model="questionForm[item.TrialQCQuestionConfigureId]"
:disabled="!item.IsEnable"
@change="((val)=>{formItemChange(val, item)})"
>
<el-radio v-for="val in item.TypeValue.split('|')" :key="val" :label="val">{{ val }}</el-radio>
</el-radio-group>
<!-- 复选框 -->
<el-checkbox-group
v-if="item.Type==='checkbox'"
v-model="questionForm[item.TrialQCQuestionConfigureId]"
:disabled="!item.IsEnable"
@change="((val)=>{formItemChange(val, item)})"
>
<el-checkbox v-for="val in item.TypeValue.split('|')" :key="val" :label="val">{{ val }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</template>
</el-form>
</template>
<script>
export default {
props: {
answers: {
type: Array,
default() {
return []
}
}
},
data() {
return {
questionForm: {},
isRender: false
}
},
mounted() {
this.formatAnswers()
},
methods: {
formatAnswers() {
this.answers.forEach((item, index) => {
if (!item.IsChild || (item.IsChild && item.Answer !== '')) {
this.$set(this.answers[index], 'IsShow', true)
this.$set(this.questionForm, item.TrialQCQuestionConfigureId, item.Answer)
} else {
this.$set(this.answers[index], 'IsShow', false)
this.$set(this.questionForm, item.TrialQCQuestionConfigureId, '')
}
})
this.isRender = true
},
formItemChange(val, currentFormItem) {
// 设置触发项
this.answers.forEach((item, index) => {
// 显示触发项且重置Answer
// 重置未触发项
if (item.ParentId === currentFormItem.TrialQCQuestionConfigureId) {
if (item.ParentTriggerValue === val) {
this.$set(this.answers[index], 'Answer', '')
this.$set(this.questionForm, item.TrialQCQuestionConfigureId, '')
this.$set(this.answers[index], 'IsShow', true)
} else {
this.$set(this.answers[index], 'Answer', '')
this.$set(this.answers[index], 'IsShow', false)
this.$set(this.questionForm, item.TrialQCQuestionConfigureId, '')
// 判断是否有子问题如果有则设置为隐藏且清空值
const scope = this
this.removeChild(item.TrialQCQuestionConfigureId, scope)
}
}
})
},
removeChild(trialQCQuestionConfigureId, scope) {
if (scope.answers.length > 0) {
scope.answers.forEach(function(v, i) {
if (v.ParentId === trialQCQuestionConfigureId) {
scope.$set(scope.answers[i], 'Answer', '')
scope.$set(scope.answers[i], 'IsShow', false)
scope.$set(scope.questionForm, v.TrialQCQuestionConfigureId, '')
scope.removeChild(v.TrialQCQuestionConfigureId, scope)
}
})
}
},
submit() {
return new Promise((resolve, reject) => {
this.$refs['questionForm'].validate(valid => {
if (!valid) {
this.$confirm(this.$t('trials:audit:message:specifyQuestions'), {
type: 'warning',
showCancelButton: false,
callback: action => {}
})
reject()
} else {
// 设置当前节点的Answer
this.answers.forEach((item, index) => {
if (item.IsShow) {
this.$set(this.answers[index], 'Answer', this.questionForm[item.TrialQCQuestionConfigureId])
}
})
resolve(this.answers)
}
})
})
}
}
}
</script>