eln_web/src/components/Template/mixins/formPackageMixins.js

import _ from "lodash";
import { getuuid, isEqual, isValueEmpty } from "@/utils/index.js";
import { isShowOtherByCheckboxTree } from "@/utils/formPackageCommon.js";
export default {
    inject: ["getZdxgjl", "updateZdxgjl"],
    watch: {
        formData: {
            immediate: true,
            deep: true, // 深度监听，以便检测嵌套对象变化
            handler(v) {
                if (v) {
                    this.handleFormField(true);
                }
            }
        },
        fieldItemLabel: {
            immediate: true,
            deep: true, // 深度监听，以便检测嵌套对象变化
            handler(v) {
                if (v) {
                    console.log(v, "fieldItemLabel")
                }
            }
        },
        formConfig: {
            immediate: true,
            deep: true, // 深度监听，以便检测嵌套对象变化
            handler(v) {
                this.handleFormField();
            }
        }
    },
    data() {
        return {
            uuid: getuuid(),
            oldFormFields: {},
            clickableKey: "",
        }
    },
    mounted() {
        this.handleFormField();
    },
    unmounted() {
        this.formFields = {};//清空当前填写的数据
    },

    methods: {
        onSelectChange(key, val, type) {
            // 获取对应的配置
            const currentConfig = this.allFieldsConfig[key];
            if (currentConfig.selectTo) {
                this.formFields[currentConfig.selectTo] = val;
            }
            this.onValueChangeCompareTo(key, val);
            this.formFields[key] = val;
            this.$emit("select", { key, value: val, type, ...this.formFields });
            // 清除该表单项的错误状态
            if (this.errors[key]) {
                this.$set(this.errors, key, false);
            }
        },

        //试剂/仪器等弹窗提交
        onRegentSubmit(data, inputValue, key, item) {
            this.updateFormData(key, inputValue);
            this.$emit("onRegentSubmit", { selectInfo: data, inputValue, key, config: item });
        },
        getRegentItem(item, fieldCode = "type") {
            const type = item[fieldCode];
            console.log(item, "type")
            return {
                label: "",
                type,
                fillType: item.subFillType || item.fillType,
                parentLabel: item.label,
                filledCodes: item.filledCodes,
                qxbdType: item.qxbdType,
                checkType: item.checkType,
            }
        },

        handleClickButton(key) {
            this.$emit("clickButton", key)
        },
        getFillType(type) {
            const typeObj = {
                actFill: "orange-border",//实际填写的边框颜色
                green: "green-border",
                preFill: "blue-border",//预填写的边框颜色
            }
            return typeObj[type] || ""
        },
        onInputNumberChange(key, val) {
            this.formFields[key] = val;
            // 清除该表单项的错误状态
            if (this.errors[key]) {
                this.$set(this.errors, key, false);
            }
        },
        //批量更新表单数据
        batchUpdateFormData(data) {
            const cloneFormFields = JSON.parse(JSON.stringify(this.formFields));
            Object.keys(data).forEach(key => {
                this.oldFormFields[key] = cloneFormFields[key];
                this.formFields[key] = data[key];
                // 清除该表单项的错误状态
                if (this.errors[key]) {
                    this.$set(this.errors, key, false);
                }
            })

        },
        //更新表单数据
        updateFormData(key, value, data) {
            const { isUpdateRecord, signData } = data || {};
            // 深拷贝当前表单数据，避免直接修改原数据
            const cloneFormFields = JSON.parse(JSON.stringify(this.formFields));

            this.oldFormFields[key] = cloneFormFields[key];
            this.formFields[key] = value;
            // 清除该表单项的错误状态
            if (this.errors[key]) {
                this.$set(this.errors, key, false);
            }

            if (isUpdateRecord) {
                setTimeout(() => {
                    this.$refs[key][0].handleUpdateRecord(signData, { oldValue: this.oldFormFields[key], inputValue: value });
                }, 10);
            }
        },


        handleClickable(sItem, key) {
            if (this.templateFillType !== 'actFill') {
                return
            }
            this.clickableKey = key;
            this.$emit("clickable", sItem)
        },
        //根据span判断一行显示几列
        getSpanClass(sItem) {
            const spanArr = ["full-row", "", "three-row"]
            if (sItem.span) {
                return spanArr[sItem.span - 1]
            }
            return ""
        },
        //获取其他下拉框的配置
        getOtherItem(sItem) {
            return {
                label: sItem.otherLabel ? this.$t(sItem.otherLabel) : this.$t("template.common.other"),
                fillType: sItem.fillType,
                maxlength: sItem.otherMaxlength || 50,
                parentLabel: sItem.label,
            }
        },
        getRadioOtherItem(sItem) {
            return {
                // label: sItem.otherLabel ? this.$t(sItem.otherLabel) : this.$t("template.common.other"),
                fillType: sItem.fillType,
                maxlength: sItem.otherMaxlength || 50,
                parentLabel: sItem.label,
            }
        },
        getClickableItem(sItem) {
            return {
                label: "",
                type: "clickable",
                fillType: sItem.subFillType || sItem.fillType,
                parentLabel: sItem.label,
            }
        },
        getSubItem(sItem) {
            const config = {
                label: "",
                options: sItem.subOptions || [],
                fillType: sItem.subFillType || sItem.fillType,
                parentLabel: sItem.label,
            }
            if (sItem.subDisabled) {
                config.disabled = sItem.subDisabled;
            }
            return config;
        },
        // 根据formConfig回填form表单数据
        handleFormField(update = false) {
            const result = {};
            let config = {};
            const { formConfig, formData, formFields } = this;
            // 遍历配置
            formConfig.forEach((item) => {
                if (item.config) {
                    // 合并配置项
                    config = { ...config, ...item.config }

                    // 处理每个配置项
                    Object.keys(item.config).forEach(key => {
                        const currentConfig = item.config[key];
                        let value = formData[key];

                        // 如果formFields中已经有值，保持原值（用户输入或之前设置的值）
                        if (formFields[key] !== null &&
                            formFields[key] !== undefined &&
                            formFields[key] !== ''
                            // typeof formFields[key] !== 'object'
                        ) {

                            // 保留原值，不使用formData中的值
                            result[key] = formFields[key];

                        } else {
                            // 使用formData中的值
                            result[key] = value;
                        }

                        // 处理特殊字段 - "其他"字段
                        if (currentConfig.otherCode) {
                            const { otherCode, type } = currentConfig;
                            //如果是更新的话，优先使用formFields中的值
                            if (update) {
                                result[otherCode] = formFields[otherCode] || formData[otherCode] || '';
                            } else {
                                result[otherCode] = formData[otherCode] || formFields[otherCode] || '';
                            }
                            config[otherCode] = { label: "template.common.other", parentType: type, parentKey: key, type: "input", fillType: currentConfig.fillType }
                        }
                        if (currentConfig.subKey) {
                            const { subKey } = currentConfig;
                            if (update) {
                                result[subKey] = formFields[subKey] || formData[subKey] || '';
                            } else {
                                result[subKey] = formData[subKey] || formFields[subKey] || '';
                            }
                            config[subKey] = { label: currentConfig.label, subKey, type: currentConfig.subType, fillType: currentConfig.subFillType || currentConfig.fillType, selectTo: currentConfig.selectTo }
                        }

                        // 检查compareTo字段
                        if (currentConfig.compareTo && formData[currentConfig.compareTo] && result[key]) {
                            const compareToValue = formData[currentConfig.compareTo];
                            const currentValue = result[key];
                            this.compareFieldsIsEqual(currentValue, compareToValue, key)

                        }
                        // 检查compareTo字段
                        if (currentConfig.subCompareTo && formData[currentConfig.subCompareTo] && result[currentConfig.subKey]) {
                            const compareToValue = formData[currentConfig.subCompareTo];
                            const currentValue = result[currentConfig.subKey];
                            this.compareFieldsIsEqual(currentValue, compareToValue, currentConfig.subKey)

                        }
                    });

                    // 处理可能存在的直接otherCode字段
                    if (item.config?.otherCode) {
                        config[item.config?.otherCode] = item.config?.otherCode;
                    }
                }
            });
            // 处理selectInfo_开头的字段，步骤表单需要保留selectInfo_开头的字段
            const selectInfoKeys = Object.keys(formData).filter(key => key.startsWith("selectInfo_"));
            selectInfoKeys.forEach(key => {
                result[key] = formData[key];
            })
            // 更新表单字段
            this.formFields = result;
            this.allFieldsConfig = config;
        },
        //比较值是否相等
        compareFieldsIsEqual(currentValue, compareToValue, key) {
            if (!currentValue || !compareToValue) return;
            // 如果当前值与compareTo字段的值不相等，则设置橙色背景
            if (isEqual(currentValue, compareToValue)) {
                // 如果相等，移除橙色背景（如果之前设置了的话）
                this.$set(this.orangeBgFields, key, false);
            } else {
                this.$set(this.orangeBgFields, key, true);
            }
        },
        //判断是否禁用
        getDisabled() {
            const { item } = this;
            const { fillType } = item;
            if (item.hasOwnProperty("disabled")) {
                return item.disabled
            } else {
                if (fillType === "actFill") {//当模板状态是实际填写时，只有当fillType是actFill时才能填写
                    return this.templateFillType !== "actFill"
                } else if (fillType === "preFill") {//当模板状态是预填写时，只有当fillType是preFill才能填写
                    return this.templateFillType !== "preFill"
                } else {
                    return true
                }
            }
        },
        // 表单数据校验
        validateFormData() {
            const { formFields, allFieldsConfig } = this;
            const errors = [];
            // 清空之前的错误状态
            this.errors = {};
            for (const key in allFieldsConfig) {
                const o = allFieldsConfig[key];
                if (o.otherCode) {//
                    if (o.type === "select") {
                        const isSelectedOther = this.isShowOther(formFields[key]);
                        if (!isSelectedOther) {//如果其他选项没有被选择，清空其他字段
                            formFields[o.otherCode] = "";
                        }
                    } else if (o.subType === "select") {
                        const isSelectedOther = this.isShowOther(formFields[o.subKey]);
                        if (!isSelectedOther) {//如果其他选项没有被选择，清空其他字段
                            formFields[o.otherCode] = "";
                        }
                    } else if (o.type === "radioAndOther") {
                        const isSelectedOther = this.isShowOtherByRadioAndOther(formFields[key]);
                        if (!isSelectedOther) {//如果其他选项没有被选择，清空其他字段
                            formFields[o.otherCode] = "";
                        }
                    }

                }
                if (o.type === "attachment"&&o.fillType === this.templateFillType) {
                    const attValue = formFields[key];
                    if (!attValue || attValue == "[]") {
                        errors.push({
                            field: key,
                            label: o.label,
                            error: "请上传附件"
                        });
                        this.$set(this.errors, key, true);
                    }
                } else if (o.type === "fqyq" &&o.fillType === this.templateFillType) {
                    const fqyqValue = formFields[key] || {};
                    const {mainRadio, subRadio,inputValue} = fqyqValue;
                    if (!mainRadio) {
                        errors.push({
                            field: key,
                            label: o.label,
                            error: "请选择是否在规定时间完成"
                        });
                        this.$set(this.errors, key, true);
                    } else {
                        if (mainRadio==="是") {
                            if (!subRadio) {
                                errors.push({
                                    field: key,
                                    label: o.label,
                                    error: "请选择是否在规定时间完成"
                                });
                                this.$set(this.errors, key, true);
                            }else if(!inputValue){
                                errors.push({
                                    field: key,
                                    label: o.label,
                                    error: "请输入信息"
                                });
                                this.$set(this.errors, key, true);
                            }
                        }
                    }

                    continue
                }else if(o.type === "checkboxTree"&&o.fillType === this.templateFillType){
                    const checkboxTreeValue = formFields[key] || {};
                    const {checkedValues=[],otherValues = {}} = checkboxTreeValue;;
                    const {options = []} = o;
                    //需要校验第一层是否有选中项
                    const parentOptions = options.map(item => item.label);
                    const isChecked = parentOptions.some(option => {
                        var found = checkedValues.find(item => item.label === option);
                        return found && found.checked === true;
                    });
                    //获取所有选中的选项
                    const allCheckedOptions = checkedValues.filter(item => item.checked).map(item => item.label);
                    //再筛选出需要显示其他输入框的选项
                    const otherOptions = allCheckedOptions.filter((label)=>isShowOtherByCheckboxTree(label))
                    const isHasOtherInfo = otherOptions.every(item => otherValues[item]);
                    console.log(otherOptions,allCheckedOptions,isHasOtherInfo,"otherOptions")
                    console.log(o,checkedValues,otherValues,options,isChecked,"checkboxTreeValue")
                    if (!isChecked || !isHasOtherInfo) {
                        errors.push({
                            field: key,
                            label: o.label,
                            error: "请选择方法学验证"
                        });
                        this.$set(this.errors, key, true);
                    }
                    continue
                }
                if (isValueEmpty(formFields[key])) {
                    // 其他字段需要判断是否显示再校验   
                    if (o.label === "template.common.other" && !this.isShowOther(formFields[o.parentKey]) && o.parentType !== "radioAndOther") {
                        continue
                    }
                    if (o.type === "radioAndOther" && o.label === "template.common.other" && !this.isShowOtherByRadioAndOther(formFields[o.parentKey])) {
                        continue
                    }
                    //span的字段不校验
                    if (o.type === "span" || o.type === "text" || o.type === "button") {
                        continue
                    }
                    if (o.fillType === this.templateFillType && !o.disabled) {
                        let prefix = "";
                        if (o.type === "input" || o.type === "inputNumber" || o.type === "textarea") {
                            prefix = "填写";
                        } else {
                            prefix = "选择";
                        }

                        const errorItem = {
                            field: key,
                            label: o.label,
                            error: `请${prefix}${o.label}`
                        };

                        errors.push(errorItem);
                        this.$set(this.errors, key, true);
                    }
                }
            }
            console.log(errors, "errors")
            return {
                valid: errors.length === 0,
                errors: errors
            };
        },
        getFormData() {
            // 同时执行数据校验和子组件校验
            const validateResult = this.validateFormData();
            const subComponentValidateResult = this.validateSubComponents();
            // const subComponentValidateResult = {valid: true, error: ''};

            return new Promise((resolve, reject) => {
                if (validateResult.valid && subComponentValidateResult.valid) {
                    resolve(this.formFields);
                } else if (!validateResult.valid) {
                    // this.$message.error("表单内容未填完,请填写后再提交");
                    reject(validateResult.errors[0].error);
                } else {
                    reject(subComponentValidateResult.error);
                }
            });
        },
        // 子组件校验钩子方法，子组件可以重写此方法来添加额外的校验逻辑
        validateSubComponents() {
            return {
                valid: true,
                error: ''
            };
        },
        //直接获取表单数据，不做校验
        getFilledFormData() {
            return this.formFields;
        },
        getFormDataByKey(key) {
            return this.formFields[key];
        },
        onBlur(key, val) {
            // compareTo 功能：当fillType==="actFill"时，判断当前值是否与compareTo字段的值一样，如果不一样则将当前input框的背景色标记成橙色
            this.onValueChangeCompareTo(key, val);

            this.$emit("blur", { key, value: val, ...this.formFields });
        },
        onValueChangeCompareTo(key, val, compKey) {
            // compareTo 功能：当fillType==="actFill"时，判断当前值是否与compareTo字段的值一样，如果不一样则将当前input框的背景色标记成橙色
            const currentFieldConfig = this.allFieldsConfig[key];
            if (currentFieldConfig && currentFieldConfig.fillType === "actFill" && (currentFieldConfig.compareTo || compKey)) {
                const compareToKey = compKey || currentFieldConfig.compareTo;
                const compareToValue = this.formFields[compareToKey];
                this.compareFieldsIsEqual(val, compareToValue, key);
            }
        },
        onAttachmentChange(key, val) {
            this.formFields[key] = val;
            // 清除该表单项的错误状态
            if (this.errors[key]) {
                this.$set(this.errors, key, false);
            }

            // 如果是checkboxList类型，需要处理otherValues
            if (val && typeof val === 'object' && val.otherValues) {
                // 将otherValues中的每个值也保存到formFields中
                Object.keys(val.otherValues).forEach(otherCode => {
                    this.formFields[otherCode] = val.otherValues[otherCode];
                });
            }
        },
        //复制
        onCopy(config, key) {
            const { formFields } = this;
            if (config.copyFrom) {
                formFields[key] = formFields[config.copyFrom];
                this.onBlur(key, formFields[key]);
            }
        },
        resetRecord(key) {
            this.formFields = { ...this.formFields, ...this.oldFormFields };
            this.oldFormFields = {};
        },
    }
}