142 lines
3.6 KiB
Plaintext
142 lines
3.6 KiB
Plaintext
<template>
|
|
<div>
|
|
<div
|
|
v-if="!!question.GroupName && (questionForm[question.ParentId] === question.ParentTriggerValue) || question.ParentId===''||question.ParentId===null"
|
|
style="font-weight: bold;font-size: 16px;margin: 5px 0px;"
|
|
>
|
|
{{ question.GroupName }}
|
|
</div>
|
|
<el-form-item
|
|
v-if="(questionForm[question.ParentId] === question.ParentTriggerValue) || question.ParentId===''||question.ParentId===null"
|
|
:label="`${question.QuestionName}`"
|
|
:prop="question.Id"
|
|
:rules="[
|
|
{ required: question.IsRequired && question.Type!=='group' && question.Type!=='summary',
|
|
message: this.$t('common:ruleMessage:specify'), trigger: ['blur', 'change']},
|
|
]"
|
|
:class="[question.Type==='group'?'mb':'']"
|
|
>
|
|
|
|
<!-- 输入框 -->
|
|
<el-input
|
|
v-if="question.Type==='input'"
|
|
v-model="questionForm[question.Id]"
|
|
:disabled="auditState >= 2"
|
|
style="max-width:300px"
|
|
/>
|
|
<!-- 多行文本输入框 -->
|
|
<el-input
|
|
v-if="question.Type==='textarea'"
|
|
v-model="questionForm[question.Id]"
|
|
type="textarea"
|
|
:autosize="{ minRows: 2, maxRows: 4}"
|
|
:disabled="auditState >= 2"
|
|
style="max-width:300px"
|
|
/>
|
|
<!-- 下拉框 -->
|
|
<el-select
|
|
v-if="question.Type==='select'"
|
|
v-model="questionForm[question.Id]"
|
|
:disabled="auditState >= 2"
|
|
clearable
|
|
@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]"
|
|
:disabled="auditState >= 2"
|
|
@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]"
|
|
:disabled="auditState >= 2"
|
|
>
|
|
<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"
|
|
:audit-state="auditState"
|
|
:question-form="questionForm"
|
|
@resetFormItemData="resetFormItemData"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'FormItem',
|
|
props: {
|
|
questionForm: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
},
|
|
question: {
|
|
type: Object,
|
|
default() {
|
|
return []
|
|
}
|
|
},
|
|
auditState: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
},
|
|
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)
|
|
}
|
|
})
|
|
},
|
|
resetFormItemData(v) {
|
|
this.$emit('resetFormItemData', v)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.mb{
|
|
margin-bottom: 0px;
|
|
}
|
|
</style>
|