The backend of the multi-select drop-down menu uses the string type to receive the solution: lodash deep copy

Create a new form record, and there is a multi-select drop-down menu in it. Click Save to convert the multi-select drop-down menu into a string type.
Back to the list page, click to view, and when echoing, in order to ensure correct echoing, the backend needs to return the string type Change the two fields of the array type into an array type
, click Save again, and if the submitted array type does not correspond to the backend, an error will be reported.

Solution
When you click Save again, deep copy a form object value, judge whether the drop-down menu value is an array, convert it into a string, and use the copied object as the input parameter of the save interface.

// 基本信息保存
        saveform(val) {
            console.log(val)
            let val2 = _.cloneDeep(val)
            if(Array.isArray(val2.dispatchVehicle) || Array.isArray(val2.driver)){
                val2.dispatchVehicle = val2.dispatchVehicle.join(",")
                val2.driver = val2.driver.join(",")
            }
            if (val.id) {
                carSendupd(val.id, val2).then((res) => {
                    if (res.data.code == 200) {
                        this.$message.success(res.data.message);
                        this.isOpenRegister = false;
                        this.getData();
                        
                    }
                });
            } else {
                val.deleteState = 0;
                carSendadd(val).then((res) => {
                    if (res.data.code == 200) {
                        // this.isOpenRegister = false;
                        console.log(res.data.data)
                        this.getData();
                        this.applydata = res.data.data;
                        this.$message.success(res.data.message);
                        this.isShowPushBtn = false;
                        
                    }
                });
            }
        },
//回显
async getdetail(val) {
            return carSenddetail(val.id).then((res) => {
                if (res.data.code == 200) {
                    
                    res.data.data.fillingTime    = getNowHumanFormat(
                        res.data.data.fillingTime
                    );
                    res.data.data.departureTime  = getNowHumanFormat(
                        res.data.data.departureTime
                    );
                    res.data.data.collectionTime = getNowHumanFormat(
                        res.data.data.collectionTime
                    );
                   
                    if(res.data.data.dispatchVehicle !== "" && res.data.data.dispatchVehicle.length !== 0){
                        res.data.data.dispatchVehicle = res.data.data.dispatchVehicle.split(",") ?? ""
                    }
                    if(res.data.data.driver !== "" && res.data.data.driver.length !== 0){
                        res.data.data.driver = res.data.data.driver.split(",") ?? ""
                    }
                    let obj = {};
                    obj   = Object.assign(res.data.data, {
                        taskId     : val.taskId,
                        businessKey: val.businessKey,
                    });
                    this.carformdatalist = obj;
                    this.detailid = val;
                }
            });
        },

Note:
?? is a new operator in es11. It acts like a ternary form. If the condition before ??

Reference link: https://www.jianshu.com/p/06ea14f9f19d

Guess you like

Origin blog.csdn.net/qq_43907534/article/details/123104096