vue3-迪卡尔-el-input-number问题修复

1.<el-input-number v-model="row.rawPrice" v-if="row.rawPrice||row.rawPrice==null ||route.query.type=='add'||row.rawPrice==0" :disabled="route.query.type == 'view' ? true : false" size="small" :min="0" :precision="2" :step="0.01" placeholder="请输入值" />

避免测试或者上线组件精度丢失等问题，注：笛卡尔在添加删除等操作时调用避免数据不响应

2.编辑时对数据处理/**

 * 对数组按照指定的key进行排序

 * @param array 待排序的数组

 * @param key 排序的关键字

 * @return 排序后的数组

 */

function sortList(array: Array<any>, key: string) {

    return array.sort(function (a, b) {

        let x = a[key];

        let y = b[key];

        return ((y > x) ? -1 : ((y < x) ? 1 : 0));//根据比较结果返回排序标志

    });

}

3.详情接口

const getDetailsData = () => {

    getDetails({ id: route.query.spuId }).then(res => {

        const { status, message, data } = res

        if (200 == status) {

            //重新排序规格列表

            sortList(ruleForm.skuItem, 'id');

            // 价格数据处理

            data.skuList.map((item: { price: number; rawPrice: number; stock: number; stockWarn: number; wholesalePrice: number }) => {

                item.price = item.price / 100

                item.rawPrice = item.rawPrice / 100

                item.wholesalePrice = item.wholesalePrice / 100

            })

            if (data.deliveryReqVo.calculationReqVoList) {

                data.deliveryReqVo.calculationReqVoList.map((item: { num: number; freight: number }) => {

                    item.num = item.num / 100

                    item.freight = item.freight / 100

                })

            }

            Object.assign(ruleForm, data)

            preSkuItemLength.value = ruleForm.skuItem.length  // 记录下开始的skuItem的数据长度

            localStorage.setItem('shopForm', JSON.stringify(data))

            ruleForm.mediaUrls = data.mediaUrls.map((item: { url: string; }) => ({ url: item }))

            ruleForm.detailsMediaUrls = data.detailsMediaUrls.map((item: { url: string; }) => ({ url: item }))

            if (data.categoryId) {

                getshopBrands()

                shopClassTree.value.map(item => {

                    if (item.id == data.categoryId) {

                        breadcrumb.value = [item.name] as any

                    } else {

                        if (item.childCategoryList && item.childCategoryList.length > 0) {

                            item.childCategoryList.map(itechild => {

                                if (itechild.id == data.categoryId) {

                                    breadcrumb.value = [item.name, itechild.name] as any

                                }

                            })

                        }

                    }

                })

            }

            if (data.skuItem.length > 0) {

                data.skuItem.map((item: { skuAttrList: any[] }) => {

                    item.skuAttrList.map(attrItem => {

                        const { attrId } = attrItem

                        specationChildValues(attrId)

                    })

                })

            }

            if (data.brandId) {

                getseriesData(data.brandId)

            }

            if (data.seriesId) {

                getmodel(data.seriesId)

            }

            if (data.paramReqVoList.length > 0) {

                data.paramReqVoList.map((item: { attrId: number }) => {

                    selectValue(item.attrId)

                })

            }

        } else {

            ElMessage.error(message)

        }

    }).catch(err => {

        ElMessage.error('详情接口异常')

    })

}

4.

/**

     * 合并和列

     * @param rowIndex 行

     * @param columnIndex 列

     */

const skuTableDataMethod = ({ rowIndex, columnIndex }: { rowIndex: number, columnIndex: number }) => {

    let specList = ruleForm.skuItem.filter((e: { values: string | any[] }) => e.values.length > 0);//过滤掉空的数组

    if (columnIndex < specList.length - 1) {

        let rowSpanNum = 1;

        for (let i = columnIndex + 1; i < specList.length; i++) {

            // 依次拿到每一列要合并的行数

            rowSpanNum *= specList[i].values.length;

        }

        // 当条件成立时就，即合并行数

        if (rowIndex % rowSpanNum === 0) {

            return { rowspan: rowSpanNum, colspan: 1 }

        } else {

            return { rowspan: 0, colspan: 0 }

        }

    }

}

5.

// 创建校准数据的map

const createCalibrateMap = (values:any[]) => {

    const calibrateMap = new Map() // ,组合的title作为map的唯一key记录下之前的数据值

    values.forEach(item => {

        const jointTitle = item.join(',') // item:['银色','512g']  i.title:'银色,512g'

        ruleForm.skuList.forEach(i=>{

            if(jointTitle===i.title){

                calibrateMap.set(jointTitle,i)

            }

        })

    })

    return calibrateMap

}

6.// 调整新skuList每个对象的属性

const adjustObjAttr = (item:any[],obj:{ [key: string]: any },names:any[]) => {

    item.forEach((val, index: number) => {

        // 给 obj 添加属性，属性名为规格名称，值为对应的规格值

        obj['id_' + names[index]] = val;  

        obj.title.push(val)

        obj.specification.push(names[index] + '_' + val)

    });

    // 将 title 字符串和 specification 字符串进行拼接，以供表格使用

    obj.title = obj.title.join()

    obj.specification = obj.specification.join()

}

7.

// 笛卡尔

const skuDescartes = () => {

    const valueList = ruleForm.skuItem.filter((item: { values: string | any[] }) => item.values.length).map((item: any[]) => item.values)

    const names = ruleForm.skuItem.filter((item: { values: string | any[] }) => item.values.length).map((item: { title: any }) => item.title).filter(Boolean);

    if (valueList.length == 0) return ruleForm.skuList = []

    let values = valueList.reduce((total: string[][], currentValue: any[]) => {

        let temp: string[][] = [];

        total.forEach((item) => {

            currentValue.forEach(node => {

                temp.push(item.concat([node]));

            });

        });

        return temp;

    }, [[]]);

    if( preSkuItemLength.value == ruleForm.skuItem.filter(i=>i.values.length).length){

        const calibrateMap = createCalibrateMap(values)

        // 将拼接好的值，与表格需要的信息进行拼接

        let list = values.map((item: any[], index: number) => {

            const jointTitle = item.join(',')

            let obj: { [propName: string]: any } = {

                // 如果map有值则返回没有则给0

                price: calibrateMap.get(jointTitle)?.price ?? 0,

                rawPrice: calibrateMap.get(jointTitle)?.rawPrice ?? 0,

                skuId: '',

                stock: calibrateMap.get(jointTitle)?.stock ?? 0,

                stockWarn: calibrateMap.get(jointTitle)?.stockWarn ?? 0,

                wholesalePrice: calibrateMap.get(jointTitle)?.wholesalePrice ?? 0,

                title: [],

                specification: [],

                imgUrl: calibrateMap.get(jointTitle)?.imgUrl ?? ''

            };

            adjustObjAttr(item,obj,names)

            return obj;

        });

        ruleForm.skuList.length = 0

        Object.assign(ruleForm.skuList, list)

    } else {

        let list = values.map((item: any[], index: number) => {

            let obj: { [propName: string]: any } = {

                skuId: '',

                title: [],

                specification: [],

            };

            adjustObjAttr(item,obj,names)

            return obj;

        });

        // 横向增加数据的话，index是不会乱的，所以这里直接index合并

        // 这里之所以要先合并一次是为了生成map，而forEach是为了避免数据被全量覆盖，这样才能保住原有的价格

        ruleForm.skuList.forEach((i,index)=>{

            Object.assign(i,list[index])

        })

        const calibrateMap = createCalibrateMap(values)

        list.forEach(item=>{

            item.price = calibrateMap.get(item.title)?.price ?? 0

            item.rawPrice = calibrateMap.get(item.title)?.rawPrice ?? 0

            item.stock = calibrateMap.get(item.title)?.stock ?? 0

            item.stockWarn = calibrateMap.get(item.title)?.stockWarn ?? 0

            item.wholesalePrice = calibrateMap.get(item.title)?.wholesalePrice ?? 0

            item.imgUrl = calibrateMap.get(item.title)?.imgUrl ?? ''

        })

        ruleForm.skuList.length = 0

        Object.assign(ruleForm.skuList, list)

        // 这里数据处理好后要将最新的skuItem的长度更新

        preSkuItemLength.value = ruleForm.skuItem.filter(i=>i.values.length).length

    }

    // 处理选择相同的数据获取原定义的价格

    if (route.query.type == 'edit') {

        let arrayForm = localStorage.getItem('shopForm') as any

        let locashopForm = JSON.parse(arrayForm)

        ruleForm.skuList.map((listItem, listIndex) => {

            locashopForm.skuList.map((locaItem, locaIndex) => {

                if (listItem.title == locaItem.title) {

                    Object.assign(listItem, locaItem);

                }

            })

        })

    }

}