前言
大家好 我是歌谣 今天需要进行一个数据处理的问题
原始数据到目标数据的处理过程 数据处理的过程就是逻辑推理的过程 类似一道数学题的解法 原始数据格式(本次以两组数据格式为例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')
},
},