107 lines
2.7 KiB
Plaintext
107 lines
2.7 KiB
Plaintext
<template>
|
|
<div>
|
|
<el-form-item
|
|
v-if="(questionForm[question.parentId] === question.triggleValue) || question.parentId===''"
|
|
:label="`${question.question}`"
|
|
:prop="question.id"
|
|
:rules="[
|
|
{ required: question.isRequired, message: '请注明', trigger: ['blur', 'change']},
|
|
]"
|
|
>
|
|
<!-- 输入框 -->
|
|
<el-input
|
|
v-if="question.type==='input'"
|
|
v-model="questionForm[question.id]"
|
|
style="width:500px"
|
|
/>
|
|
<!-- 多行文本输入框 -->
|
|
<el-input
|
|
v-if="question.type==='textarea'"
|
|
v-model="questionForm[question.id]"
|
|
type="textarea"
|
|
:autosize="{ minRows: 2, maxRows: 4}"
|
|
style="width:500px"
|
|
/>
|
|
<!-- 下拉框 -->
|
|
<el-select
|
|
v-if="question.type==='select'"
|
|
v-model="questionForm[question.id]"
|
|
@change="((val)=>{formItemChange(val, question)})"
|
|
>
|
|
<el-option
|
|
v-for="val in question.typeValue.split('|')"
|
|
:key="val"
|
|
:label="val"
|
|
:value="val"
|
|
/>
|
|
</el-select>
|
|
<!-- 单选 -->
|
|
<el-radio-group
|
|
v-if="question.type==='radio'"
|
|
v-model="questionForm[question.id]"
|
|
@change="((val)=>{formItemChange(val, question)})"
|
|
>
|
|
<el-radio v-for="val in question.typeValue.split('|')" :key="val" :label="val">{{ val }}</el-radio>
|
|
</el-radio-group>
|
|
<!-- 复选框 -->
|
|
<el-checkbox-group
|
|
v-if="question.type==='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-form-item>
|
|
|
|
<FormItem v-for="(item) in question.childrens" :key="item.id" :question="item" :question-form="questionForm" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'FormItem',
|
|
props: {
|
|
questionForm: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
},
|
|
question: {
|
|
type: Object,
|
|
default() {
|
|
return []
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
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)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|