eln_web/src/components/Template/BaseInfoFormPcakge.vue

<template>
    <div>
        <div v-for="(item, index) in formConfig" :key="index">
            <template v-if="item.type === 'cardItem'">
                <div class="grid-container">
                    <div v-for="(sItem, sIndex) in item.config" class="form-item" :class="sItem.span == 1 ? 'full-row' : ''"
                        :key="sIndex">
                        <template v-if="sItem.type === 'input'">
                            <div class="form-title">{{ sItem.label }}</div>
                            <el-input :maxlength="sItem.maxlength || 30" :disabled="sItem.disabled"
                                v-model="formFields[sIndex]" :class="sItem.borderType | getBorderType"
                                :placeholder="sItem.placeholder ? sItem.placeholder : ('请输入' + sItem.label)" />
                        </template>
                    </div>
                </div>
            </template>
            <template v-else-if="item.type === 'conditionItem'">
                <div class="form-item ">
                    <div class="form-title fs-16">{{ item.label }}</div>
                    <div v-for="(sItem, sIndex) in item.config" class="flex">
                        <div class="flex1 mr-24">
                            <div class="form-title">{{ sItem.label }}</div>
                            <div class="flex">
                                <el-select class="flex1" v-model="formFields[sIndex]" multiple placeholder="请选择">
                                    <el-option
                                    v-for="op in sItem.options"
                                    :key="op.value"
                                    :label="op.label"
                                    :value="op.value">
                                    </el-option>
                                </el-select>

                            </div>
                        </div>
                        <div class="flex1" v-show = "isShowOther(formFields[sIndex])">
                            <div class="form-title">其他</div>
                            <div class="flex">
                                <el-input v-model="formFields[sItem.otherCode]" :class="sItem.borderType | getBorderType"></el-input>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
export default {
    components: {
    },
    props: {
        formConfig: {
            type: Array,
            value: () => [],
        },
        formData: {
            type: Object,
            value: () => ({})
        }
    },
    data() {
        return {
            formFields: {},//表单双休绑定字段
            allFieldsConfig: {},//包含config的所有字段,主要用于校验表单是否填写
        };
    },
    watch: {
        immediate: true,
        formData: {
            handler(v) {
                this.handleFormField();
            }
        }
    },
    mounted() {
        this.handleFormField();
    },
    filters: {
        getBorderType(type) {
            const typeObj = {
                orange: "orange-border",
                green: "green-border",
                blue: "blue-border",
            }
            return typeObj[type] || ""
        },
       
    },
    methods: {
        isShowOther(v = []){
            return v.includes(-1);
        },
        //根据formConifg回填form表单数据
        handleFormField() {
            const result = {};
            let config = {};
            const { formConfig, formData } = this;
            formConfig.forEach((item) => {
                if (item.config) {
                    config = { ...config, ...item.config }
                    Object.keys(item.config).forEach(key => {
                        const currentConfig = item.config[key];
                        result[key] = formData[key];
                        if(currentConfig.otherCode){//如果有其它的字段需要赋值给formData
                            const {otherCode} = currentConfig;
                            result[otherCode] = formData[otherCode]
                            config[otherCode] = {label:"其他",type:"input"}
                        }
                    });
                    console.log(item.config,"config")
                    if(item.config?.otherCode){
                        config[item.config?.otherCode] = item.config?.otherCode;
                    }
                }

            })
            this.formFields = result;
            this.allFieldsConfig = config;
            console.log(config, "allFieldsConfig")
        },
        getFormData() {
            const { formFields, allFieldsConfig } = this;
            for (const key in formFields) {
                if (!formFields[key]) {
                    const o = allFieldsConfig[key];
                    let prefix = "";
                    if (o.type === "input") {
                        prefix = "填写"
                    } else {
                        prefix = "选择"
                    }
                    this.$message.error(`${o.label}还未${prefix}请${prefix}后再提交`);
                    return;
                }
            }
            return formFields;
        }
    },
}
</script>

<style lang="scss" >
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 默认2列 */
    gap: 0 24px;
}

.form-item {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    margin-top: 24px;
    padding: 24px;
    border-radius: 5px 5px;

}

/* 或者使用 span 语法 */
.full-row {
    grid-column: span 2;
}

.form-title {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: normal;
    color:#606266;
}

.orange-border {
    input {
        border-color: #f9c588;

        &:focus {
            border-color: #f9c588;
        }

        &:hover {
            border-color: #f9c588;
        }
    }

}

.green-border {
    input {
        border-color: green;

        &:focus {
            border-color: green;
        }

        &:hover {
            border-color: green;
        }
    }

}

.blue-border {
    input {
        border-color: #4ea2ff;

        &:focus {
            border-color: #4ea2ff;
        }

        &:hover {
            border-color: #4ea2ff;
        }
    }

}
.fs-16{
    font-size: 0.96rem;
    font-weight: bold;
    color:#464647
}
.flex1{
    flex:1;
}
.flex{
    display: flex;
}
.mr-24{
    margin-right: 24px;
}
</style>