vue3组件api调用参数映射关系实现

摘要

今天实现表格时，表格绑定的API入参为fCode，但是表单值需要取到code字段，因此需要为表格设定一个映射属性，处理这种映射。

实现

添加paramsMapping属性，储存需要映射的字段，未出现的字段不需要做映射。
API入参格式为：

let enterParams = [{
    param: 'code',
    paramName: '编码'
}, {
    param: 'code2',
    paramName: '编码2'
}];

因此处理逻辑为：

let paramsMapping = [{
    paramName: 'feeCode', // API入参名称
    formName: 'code', // 表单字段名，未填写按照paramName来取值
    defaultValue: '10000' // 默认值
}];

let enterParams = [{
        param: 'code',
        paramName: 'code'
    },
    {
        param: 'code2',
        paramName: 'code2'
    }
];

let formData = {
    code: '123',
    time: '2021-10-01'
};

let mappedData = {};

// 构建参数映射对象，便于查找
let paramMappingObj = {};
paramsMapping.forEach(mapping => {
    paramMappingObj[mapping.formName] = mapping;
});

enterParams.forEach(paramObj => {
    const mapping = paramMappingObj[paramObj.param];
    if (mapping) {
        const mappedParam = mapping.paramName;
        if (formData[paramObj.param]) {
            mappedData[mappedParam] = formData[paramObj.param];
        } else {
            mappedData[mappedParam] = mapping.defaultValue || '';
        }
    } else {
        // 如果没有映射关系，则直接拷贝参数
        mappedData[paramObj.param] = formData[paramObj.param] || '';
    }
});

console.log(mappedData);

输出结果为

 "映射后的数据:" Object { code: "123", code2: "" }