js数据结构变化 table动态列展示

龙旋风 / 2023-05-04 / 原文

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="TYMD">1231231</div>
</body>


</html>

<script>
    let oneData = {
        "code": 200,
        "message": "操作成功",
        "data": {
            "flag": [{
                "unit": "公斤（千克）",
                "productCode": "01.02.01.001.00003",
                "supplierDocName": "武汉钢铁江北集团有限公司精密带钢厂",
                "taxprice": "20",
                "mainNum": 350,
                "cName": "月结30天（30%电汇和70%半年电子银承）",
                "nmny": 7000,
                "nnum": "0~3000",
                "productName": "荧光粉",
                "productType": "珠江光电三基色绿粉 tb8.5-T8 荧光粉 T8 USC LGOSR-04"
            }, {
                "unit": "公斤（千克）",
                "productCode": "01.02.01.001.00003",
                "supplierDocName": "武汉钢铁江北集团有限公司精密带钢厂",
                "taxprice": "19",
                "mainNum": 350,
                "cName": "月结30天（30%电汇和70%半年电子银承）",
                "nmny": 6650,
                "nnum": "3000~7000",
                "productName": "荧光粉",
                "productType": "珠江光电三基色绿粉 tb8.5-T8 荧光粉 T8 USC LGOSR-04"
            }, {
                "unit": "个",
                "productCode": "03.03.20.001.0021",
                "supplierDocName": "武汉钢铁江北集团有限公司精密带钢厂",
                "taxprice": "29",
                "mainNum": 200,
                "cName": "月结30天（30%电汇和70%半年电子银承）",
                "nmny": 5800,
                "nnum": "0~5000",
                "productName": "020白色贴片",
                "productType": "E020UW45-40"
            }, {
                "unit": "个",
                "productCode": "03.03.20.001.0021",
                "supplierDocName": "武汉钢铁江北集团有限公司精密带钢厂",
                "taxprice": "15",
                "mainNum": 200,
                "cName": "月结30天（30%电汇和70%半年电子银承）",
                "nmny": 3000,
                "nnum": "5000~8000",
                "productName": "020白色贴片",
                "productType": "E020UW45-40"
            }, {
                "unit": "公斤（千克）",
                "productCode": "01.02.01.001.00003",
                "supplierDocName": "广州铜材厂有限公司",
                "taxprice": "20",
                "mainNum": 350,
                "nmny": 7000,
                "nnum": "0~3000",
                "productName": "荧光粉",
                "productType": "珠江光电三基色绿粉 tb8.5-T8 荧光粉 T8 USC LGOSR-04"
            }, {
                "unit": "公斤（千克）",
                "productCode": "01.02.01.001.00003",
                "supplierDocName": "广州铜材厂有限公司",
                "taxprice": "19",
                "mainNum": 350,
                "nmny": 6650,
                "nnum": "3000~7000",
                "productName": "荧光粉",
                "productType": "珠江光电三基色绿粉 tb8.5-T8 荧光粉 T8 USC LGOSR-04"
            }, {
                "unit": "个",
                "productCode": "03.03.20.001.0021",
                "supplierDocName": "广州铜材厂有限公司",
                "taxprice": "23",
                "mainNum": 200,
                "nmny": 4600,
                "nnum": "0~5000",
                "productName": "020白色贴片",
                "productType": "E020UW45-40"
            }, {
                "unit": "个",
                "productCode": "03.03.20.001.0021",
                "supplierDocName": "广州铜材厂有限公司",
                "taxprice": "15",
                "mainNum": 200,
                "nmny": 3000,
                "nnum": "5000~8000",
                "productName": "020白色贴片",
                "productType": "E020UW45-40"
            }]



        }
    }

    let twoData = oneData.data.flag;
    console.log(twoData);

    let PersonCollect =
        twoData.reduce((total, cur, index) => {
            let hasValue = total.findIndex(current => {

                return current.unit === cur.unit &&
                    current.productCode == cur.productCode &&
                    current.productName == cur.productName &&
                    current.productType == cur.productType &&
                    current.mainNum == cur.mainNum &&
                    current.nnum == cur.nnum
            })
            hasValue === -1 && total.push(cur)
                // hasValue !== -1 && (total[hasValue].Expenses = floatObj.add(Number(total[hasValue].Expenses), Number(cur.Expenses)));
            return total
        }, []).map(item => {

            let dataOption = {
                unit: item.unit,
                productCode: item.productCode,
                productName: item.productName,
                productType: item.productType,
                mainNum: item.mainNum,
                nnum: item.nnum
            }
            return dataOption;
        })

    console.log(PersonCollect);
    let ctList = [];
    let tyList = [];

    for (let i = 0; i < PersonCollect.length; i++) {
        const elementi = PersonCollect[i];
        let list = {
            unit: elementi.unit,
            productCode: elementi.productCode,
            productName: elementi.productName,
            productType: elementi.productType,
            mainNum: elementi.mainNum,
            nnum: elementi.nnum,
        };
        let index = 0;

        for (let j = 0; j < twoData.length; j++) {
            const elementj = twoData[j];
            if (
                elementi.unit == elementj.unit &&
                elementi.productCode == elementj.productCode &&
                elementi.productName == elementj.productName &&
                elementi.productType == elementj.productType &&
                elementi.mainNum == elementj.mainNum &&
                elementi.nnum == elementj.nnum
            ) {
                index++;


                // list[0][`taxprice${index}`] = elementj.taxprice ? elementj.taxprice : elementj.taxprice;
                // list[0][`nmny${index}`] = elementj.nmny ? elementj.nmny : elementj.nmny;
                // list[0][`supplierDocName${index}`] = elementj.supplierDocName ? elementj.supplierDocName : elementj.supplierDocName;
                // list[0][`cName${index}`] = elementj.cName ? elementj.cName : elementj.cName;

                list[`taxprice${elementj.supplierDocName}`] = elementj.taxprice ? elementj.taxprice : elementj.taxprice;
                list[`nmny${elementj.supplierDocName}`] = elementj.nmny ? elementj.nmny : elementj.nmny;
                list[`${elementj.supplierDocName}`] = elementj.supplierDocName ? elementj.supplierDocName : elementj.supplierDocName;
                list[`cName${elementj.supplierDocName}`] = elementj.cName ? elementj.cName : elementj.cName;

                tyList.push(elementj.supplierDocName);
            }
        };
        ctList.push(list);
    };

    tyList = [...new Set(tyList)];
    console.log(tyList);

    // tyList =  ["武汉钢铁江北集团有限公司精密带钢厂", "广州铜材厂有限公司"];
    console.log(ctList);


    var tableTitle = '';
    tyList.forEach((item) => {
        tableTitle = tableTitle + '<col width="100"></col>'
    });


    console.log(tableTitle);



    let tablebody = "";
    let MRow = "";
    let tablebottom = "";
    let rowtable = "";

    tyList.forEach((item, index) => {
        MRow = MRow +
            '<td colspan="3" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;font-weight: bolder;text-align: center;"><span>' + `${item}` + '</span></td>'
    });
    MRow += '</tr>' + '<tr>';

    tyList.forEach((item, index) => {
        rowtable = rowtable +
            '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;font-weight: bolder;text-align: center;"><span>' + `含税单价` + '</span></td>' +
            '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;font-weight: bolder;text-align: center;"><span>' + `含税总价` + '</span></td>' +
            '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;font-weight: bolder;text-align: center;"><span>' + `付款协议` + '</span></td>'
    });
    rowtable += '</tr>';

    tablebody = '<tr>' +
        '<td  rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;font-weight: bolder;text-align: center;"><span>' + `物料编码` + '</span></td>' +
        '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;font-weight: bolder;text-align: center;"><span>' + `物料名称` + '</span></td>' +
        '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:140px;padding: 0 5px 0 5px;font-weight: bolder;text-align: center;"><span>' + `规格型号` + '</span></td>' +
        '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;font-weight: bolder;text-align: center;"><span>' + `单位` + '</span></td>' +
        '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;font-weight: bolder;text-align: center;"><span>' + `数量` + '</span></td>' +
        '<td rowspan="2" style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;font-weight: bolder;text-align: center;"><span>' + `阶梯数量` + '</span></td>' +
        MRow + rowtable;

    console.log(ctList);

    for (let i = 0; i < ctList.length; i++) {
        const element = ctList[i];

        tablebottom += '<tr>';
        tablebottom +=
            '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;"><span>' + (element["productCode"] ? element["productCode"] : '') + '</span></td>' +
            '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;"><span>' + (element["productName"] ? element["productName"] : '') + '</span></td>' +
            '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:140px;padding: 0 5px 0 5px;"><span>' + (element["productType"] ? element["productType"] : '') + '</span></td>' +
            '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;"><span>' + (element["unit"] ? element["unit"] : '') + '</span></td>' +
            '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;"><span>' + (element["mainNum"] ? element["mainNum"] : '') + '</span></td>' +
            '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;"><span>' + (element["nnum"] ? element["nnum"] : '') + '</span></td>'

        for (let j = 0; j < tyList.length; j++) {
            const object = tyList[j];
            tablebottom +=
                // '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;"><span>' + (element[`${object}`] ? element[`${object}`] : '') + '</span></td>' +
                '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;"><span>' + (element[`taxprice${object}`] ? element[`taxprice${object}`] : '') + '</span></td>' +
                '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;"><span>' + (element[`nmny${object}`] ? element[`nmny${object}`] : '') + '</span></td>' +
                '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;"><span>' + (element[`cName${object}`] ? element[`cName${object}`] : '') + '</span></td>'
        }
        tablebottom += '<tr>';
    }




    var tablediv = '<table  style ="border-collapse:collapse;margin: 1px;" ><colgroup><col width="90"></col><col width="90"></col><col width="140"></col><col width="90"></col><col width="90"></col><col width="90"></col>' +
        tableTitle +
        '</colgroup><thead><tr>' +
        '</tr></thead><tbody>' + tablebody + tablebottom +
        '</tbody></table>';

    var htmlTable = '<div id="testdivid" style="display: flex;justify-content: center;margin: 0 auto;margin: 0;padding: 0;"><div id="divTTable" >' + tablediv + '</div></div>';


    TYMD.innerHTML = htmlTable;
</script>