前言
大家好 我是歌谣 今天需要进行一个数据处理的问题
原始数据到目标数据的处理过程 数据处理的过程就是逻辑推理的过程 类似一道数学题的解法 原始数据格式(本次以两组数据格式为例Rawdata)
[ { "id": 1047, "name": "README.md", "manufacture_id": 176, "materiel_id": 3555, "lead_time": null, "is_layer": 1, "cloth_width": null, "mark": null, "t_base_materiel": { "id": 3555, "code": "ML-QT0184", "name": "25D涤纶密可柔", "color": "黑色/8056" }, "cut_scheme_detail": [ { "id": 2667, "size_id": 135, "ratio": 13, "layer": 0, "t_base_size": { "id": 135, "name": "165" } }, { "id": 2668, "size_id": 136, "ratio": 13, "layer": 0, "t_base_size": { "id": 136, "name": "170" } }, { "id": 2669, "size_id": 137, "ratio": 13, "layer": 0, "t_base_size": { "id": 137, "name": "175" } }, { "id": 2670, "size_id": 157, "ratio": 13, "layer": 0, "t_base_size": { "id": 157, "name": "160" } }, { "id": 2671, "size_id": 277, "ratio": 13, "layer": 0, "t_base_size": { "id": 277, "name": "155" } } ] }, { "id": 1048, "name": "README.md", "manufacture_id": 176, "materiel_id": 3555, "lead_time": null, "is_layer": 1, "cloth_width": null, "mark": null, "t_base_materiel": { "id": 3555, "code": "ML-QT0184", "name": "25D涤纶密可柔", "color": "黑色/8056" }, "cut_scheme_detail": [ { "id": 2672, "size_id": 135, "ratio": 12, "layer": 0, "t_base_size": { "id": 135, "name": "165" } }, { "id": 2673, "size_id": 136, "ratio": 12312, "layer": 0, "t_base_size": { "id": 136, "name": "170" } }, { "id": 2674, "size_id": 137, "ratio": 1231, "layer": 0, "t_base_size": { "id": 137, "name": "175" } }, { "id": 2675, "size_id": 157, "ratio": 12, "layer": 0, "t_base_size": { "id": 157, "name": "160" } }, { "id": 2676, "size_id": 277, "ratio": 12, "layer": 0, "t_base_size": { "id": 277, "name": "155" } }, { "id": 2677, "size_id": 135, "ratio": 12123, "layer": 1, "t_base_size": { "id": 135, "name": "165" } }, { "id": 2678, "size_id": 136, "ratio": 12312, "layer": 1, "t_base_size": { "id": 136, "name": "170" } }, { "id": 2679, "size_id": 137, "ratio": 112, "layer": 1, "t_base_size": { "id": 137, "name": "175" } }, { "id": 2680, "size_id": 157, "ratio": 12312, "layer": 1, "t_base_size": { "id": 157, "name": "160" } }, { "id": 2681, "size_id": 277, "ratio": 1231, "layer": 1, "t_base_size": { "id": 277, "name": "155" } } ] } ]
原始column直接变量声明(RawColumns)
[{ title: "物料代码", dataIndex: "materielCode", key: "materielCode" }, { title: "物料名称", dataIndex: "materielName", key: "materielName" }, { title: "颜色", dataIndex: "color", key: "color", }, { title: "方案名称", dataIndex: "name", key: "name", }, { title: "是否拉高低层", dataIndex: "isLayer", key: "isLayer", }, { title: "门幅宽", dataIndex: "width", key: "width" }, ]
目标数据格式
1需要拆解为dataSource和dataColumn格式 目标的过程都是推理的过程(首先我们考虑不合并的表头状态 省略号表示带处理的动态尺码部分) 变化1:dataColumn数据格式变化
[{ title: "物料代码", dataIndex: "materielCode", key: "materielCode" }, { title: "物料名称", dataIndex: "materielName", key: "materielName" }, { title: "颜色", dataIndex: "color", key: "color", }, { title: "方案名称", dataIndex: "name", key: "name", }, { title: "是否拉高低层", dataIndex: "isLayer", key: "isLayer", }, { title: "门幅宽", dataIndex: "width", key: "width" }, ]
dataSource数据格式(最终数据格式)
[ { "155": 12, "160": 12, "165": 12, "170": 12312, "175": 1231, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "README.md", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 0 }, { "155": 1231, "160": 12312, "165": 12123, "170": 12312, "175": 112, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "README.md", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 1 } ]
需要做出动态表头拼接的数据格式(表头数据处理)
拿出所有的尺码 形成数组 处理过程
第一步 所有尺码形成数组 定义变量arr=[] Rawdata && Rawdata.map((item, index) => { item.cut_scheme_detail && item.cut_scheme_detail.map((item, index) => { arr.push(item.t_base_size.name) }) })
第二步 去重操作
const data = Array.from(new Set(arr))
第三步 拼接得到表头
data && data.map((item, index) => { RawColumns.push({ title: item, dataIndex: item, key: item }) })
结果:此时表头数据处理完成
[ { "title": "物料代码", "dataIndex": "materielCode", "key": "materielCode" }, { "title": "物料名称", "dataIndex": "materielName", "key": "materielName" }, { "title": "颜色", "dataIndex": "color", "key": "color" }, { "title": "方案名称", "dataIndex": "name", "key": "name" }, { "title": "是否拉高低层", "dataIndex": "isLayer", "key": "isLayer" }, { "title": "门幅宽", "dataIndex": "width", "key": "width" }, { "title": "165", "dataIndex": "165", "key": "165" }, { "title": "170", "dataIndex": "170", "key": "170" }, { "title": "175", "dataIndex": "175", "key": "175" }, { "title": "160", "dataIndex": "160", "key": "160" }, { "title": "155", "dataIndex": "155", "key": "155" } ]
第四步 紧接着就是datsource格式处理的过程
定义变量arr1=[] Rawdata && Rawdata.map((item, index) => { item.cut_scheme_detail.map((item1, index1) => { arr1.push( { materielCode: item.t_base_materiel.code, materielName: item.t_base_materiel.name, name: item.name, leadTime: item.leadTime, isLayer: item.is_layer == 1 ? "是" : "否", width: item.cloth_width, color: item.t_base_materiel.color, mark: item.mark, layer:item1.layer, [`${item1.t_base_size.name}`]: item1.ratio }) }) })
结果:arr1处理完成数据为
[ { "165": 1, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 0 }, { "170": 1, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 0 }, { "175": 1, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 0 }, { "160": 1, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 0 }, { "155": 1, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 0 }, { "165": 2, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 1 }, { "170": 2, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 1 }, { "175": 2, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 1 }, { "160": 2, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 1 }, { "155": 2, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 1 } ]
这样的数据格式还是不满足条件 接着就是继续对arr1进行数据处理(typeof去判断对象的键是不是数字类型插入 arr2是一个对象 利用层数+对象属性名拼接形成对象) 定义一个对象arr2接收arr2={}
arr1&&arr1.map((item,index)=>{ Object.keys(item).map((key)=>{ if(typeof(key)=="number"){ arr2[`${key}-${item.layer}`]=item[key] }else{ arr2[`${key}-${item.layer}`]=item[key] } }) }) 结果格式处理为: 这样的数据格式还是不满足条件 但是距离我们的目标已经接近
{ "165-0": 1, "materielCode-0": "ML-QT0184", "materielName-0": "25D涤纶密可柔", "name-0": "package.json", "isLayer-0": "是", "width-0": null, "color-0": "黑色/8056", "mark-0": null, "layer-0": 0, "170-0": 1, "175-0": 1, "160-0": 1, "155-0": 1, "165-1": 2, "materielCode-1": "ML-QT0184", "materielName-1": "25D涤纶密可柔", "name-1": "package.json", "isLayer-1": "是", "width-1": null, "color-1": "黑色/8056", "mark-1": null, "layer-1": 1, "170-1": 2, "175-1": 2, "160-1": 2, "155-1": 2 }
最后最后 封装一个函数进行处理
export function myFunc(obj: any) { const newObj: any = {} for (const [key, value] of Object.entries(obj)) { const strList = key.split('-') const groupId = strList.pop() // 拿到最后一个"-"之后的字符 const keyName = strList.join('') // 最后一个"-"之前的所有字符再加起来(理论上如果只有一个"-"可以直接key.split('-')[0]和key.split('-')[1]) if (!newObj[groupId as string]) { newObj[groupId as string] = {} } newObj[groupId as string][keyName] = value } console.log(Object.values(newObj)) return Object.values(newObj) }
定义变量arr3=[] arr3= myFunc(arr2) 结果最后就是我们需要的datasource格式
[ { "155": 1, "160": 1, "165": 1, "170": 1, "175": 1, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 0 }, { "155": 2, "160": 2, "165": 2, "170": 2, "175": 2, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 1 } ]
3 最后就是我们的合并操作的 他是在render中进行的
export function filterNumData(obj: any, arr: any, record: any, index: number, flag: any) { let length: number = 0 if (arr.length > 0) { for (let i = index; i < arr.length; i++) { if (i === arr.length - 1 && arr.length != 1) { if (arr[i - 1][`${flag}`] === record[`${flag}`]) { length += 1 break } } else { if (arr[i][`${flag}`] === record[`${flag}`]) { length += 1 } else { break } } } } if (index == 0 || arr[index - 1][`${flag}`] != record[`${flag}`]) { // 匹配到相同数据的长度 obj.props.rowSpan = length; } else { // 如果上一行的数据与当前的数据相同，就将rowSpan变为0 obj.props.rowSpan = 0; } return obj }
只要在对应的表头中调用我们的filterNumber函数 就进行了合并操作
{ title: "颜色", dataIndex: "color", key: "color", render: (value: any, record: any, index: any) => { // 处理列，相同数据则合并 // 处理rowSpan const obj = { children: value, props: { rowSpan: 1 }, }; return filterNumData(obj, arr1, record, index, 'color') }, }, { title: "方案名称", dataIndex: "name", key: "name", render: (value: any, record: any, index: any) => { // 处理列，相同数据则合并 // 处理rowSpan const obj = { children: value, props: { rowSpan: 1 }, }; return filterNumData(obj, arr1, record, index, 'name') }, },
