146 lines
3.6 KiB
Plaintext
146 lines
3.6 KiB
Plaintext
<template>
|
|
<div>
|
|
<div
|
|
v-if="!!question.GroupName && question.Type==='group'"
|
|
>
|
|
<h4 style="color: #ddd;padding: 5px 0px;margin: 0;font-size: 15px;">
|
|
{{ language==='en'?question.GroupEnName:question.GroupName }}
|
|
</h4>
|
|
</div>
|
|
<template v-else>
|
|
<el-form-item
|
|
:label="`${language==='en'?question.QuestionEnName:question.QuestionName}`"
|
|
:prop="question.Id"
|
|
:rules="[
|
|
{ required: true,
|
|
message: $t('common:ruleMessage:select'), trigger: ['blur', 'change']},
|
|
]"
|
|
:class="[question.Type==='group'?'mb':'']"
|
|
>
|
|
<!-- 下拉框 -->
|
|
<el-select
|
|
v-if="question.Type==='select'"
|
|
v-model="questionForm[question.Id]"
|
|
clearable
|
|
@change="((val)=>{formItemChange(val, question)})"
|
|
>
|
|
<template v-if="question.DictionaryCode">
|
|
<el-option
|
|
v-for="item of $d[question.DictionaryCode]"
|
|
:key="item.id"
|
|
:value="String(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-radio-group
|
|
v-if="question.Type==='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="String(item.value)"
|
|
>
|
|
{{ item.label }}
|
|
</el-radio>
|
|
</template>
|
|
<template v-else-if="question.TypeValue">
|
|
<el-radio
|
|
v-for="val in question.TypeValue.split('|')"
|
|
:key="val"
|
|
:label="val"
|
|
>
|
|
{{ val }}
|
|
</el-radio>
|
|
</template>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</template>
|
|
|
|
<AssessmentFormItem
|
|
v-for="(item) in question.Childrens"
|
|
:key="item.Id"
|
|
:question="item"
|
|
:question-form="questionForm"
|
|
@setFormItemData="setFormItemData"
|
|
@resetFormItemData="resetFormItemData"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
export default {
|
|
name: 'AssessmentFormItem',
|
|
props: {
|
|
questionForm: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
},
|
|
question: {
|
|
type: Object,
|
|
default() {
|
|
return []
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['language'])
|
|
},
|
|
watch: {
|
|
questionForm: {
|
|
deep: true,
|
|
immediate: true,
|
|
handler(v) {
|
|
// console.log(v)
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
formItemChange(v, question) {
|
|
if (question.Childrens.length > 0) {
|
|
this.resetChild(question.Childrens)
|
|
}
|
|
},
|
|
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>
|
|
.mb{
|
|
margin-bottom: 0px;
|
|
}
|
|
</style>
|