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

<!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>

　　

viewModel.on("customInit", function(data) {
    // 211211详情--页面初始化
    viewModel.on("afterLoadData", function() {
        debugger;
        // let id = "XJ000327";
        let id = viewModel.getParams().id ? viewModel.getParams().id : "";
        let proxy = viewModel.setProxy({
            ensure: {
                url: "/priceCompaData/priceCompaDetail",
                method: "POST",
            },
        });
        let param = {
            id: id,
        };
        proxy.ensure(param, function(error, result) {
            if (error) {
                cb.utils.alert(error.message, "error");
                viewModel.execute("refresh");
            } else {
                debugger;
                let twoData = result.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);
                        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[`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);

                console.log(ctList);
                var tableTitle = "";

                tyList.forEach((item) => {
                    tableTitle = tableTitle + '<col width="90"></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 2px 0 2px;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 2px 0 2px;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 2px 0 2px;font-weight: bolder;text-align: center;"><span>' +
                        `含税总价` +
                        "</span></td>" +
                        '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:130px;padding: 0 2px 0 2px;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 2px 0 2px;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 2px 0 2px;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:130px;padding: 0 2px 0 2px;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:80px;padding: 0 2px 0 2px;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:60px;padding: 0 2px 0 2px;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 2px 0 2px;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 2px 0 2px;"><span>' +
                        (element["productCode"] ? element["productCode"] : "") +
                        "</span></td>" +
                        '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;"><span>' +
                        (element["productName"] ? element["productName"] : "") +
                        "</span></td>" +
                        '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:130px;padding: 0 2px 0 2px;"><span>' +
                        (element["productType"] ? element["productType"] : "") +
                        "</span></td>" +
                        '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:80px;padding: 0 2px 0 2px;"><span>' +
                        (element["unit"] ? element["unit"] : "") +
                        "</span></td>" +
                        '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:60px;padding: 0 2px 0 2px;"><span>' +
                        (element["mainNum"] ? element["mainNum"] : "") +
                        "</span></td>" +
                        '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;"><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 2px 0 2px;"><span>' + (element[`${object}`] ? element[`${object}`] : '') + '</span></td>' +
                            '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:70px;padding: 0 2px 0 2px;"><span>' +
                            (element[`taxprice${object}`] ?
                                element[`taxprice${object}`] :
                                "") +
                            "</span></td>" +
                            '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:70px;padding: 0 2px 0 2px;"><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 2px 0 2px;"><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="130"></col><col width="80"></col><col width="60"></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>";

                // document.getElementById("yxyweb-support-container").innerHTML = "";
                setTimeout(() => {
                    // document.getElementById("yxyweb-support-container").innerHTML = htmlTable;
                    document.getElementsByClassName(
                        "mdf-modal-body wui-modal-body"
                    )[0].innerHTML = htmlTable;
                }, 1000);
            }
        });
    });
});

　　

viewModel.on("customInit", function(data) {
    // 211211详情--页面初始化
    viewModel.on("afterLoadData", function() {
        debugger;
        // let id = "XJ000327";
        let id = viewModel.getParams().id ? viewModel.getParams().id : "";
        let proxy = viewModel.setProxy({
            ensure: {
                url: "/priceCompaData/priceCompaDetail",
                method: "POST",
            },
        });
        let param = {
            id: id,
        };
        proxy.ensure(param, function(error, result) {
            if (error) {
                cb.utils.alert(error.message, "error");
                viewModel.execute("refresh");
            } else {
                debugger;
                let twoData = result.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);
                        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[`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);

                console.log(ctList);
                var tableTitle = "";

                tyList.forEach((item) => {
                    tableTitle = tableTitle + '<col width="75"></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:85px;padding: 0 2px 0 2px;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:75px;padding: 0 2px 0 2px;font-weight: bolder;text-align: center;"><span>' +
                        `含税单价` +
                        "</span></td>" +
                        '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:75px;padding: 0 2px 0 2px;font-weight: bolder;text-align: center;"><span>' +
                        `含税总价` +
                        "</span></td>" +
                        '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:140px;padding: 0 2px 0 2px;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 2px 0 2px;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 2px 0 2px;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:130px;padding: 0 2px 0 2px;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:70px;padding: 0 2px 0 2px;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:60px;padding: 0 2px 0 2px;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 2px 0 2px;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 2px 0 2px;"><span>' +
                        (element["productCode"] ? element["productCode"] : "") +
                        "</span></td>" +
                        '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;"><span>' +
                        (element["productName"] ? element["productName"] : "") +
                        "</span></td>" +
                        '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:130px;padding: 0 2px 0 2px;"><span>' +
                        (element["productType"] ? element["productType"] : "") +
                        "</span></td>" +
                        '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:70px;padding: 0 2px 0 2px;text-align: center;"><span>' +
                        (element["unit"] ? element["unit"] : "") +
                        "</span></td>" +
                        '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:60px;padding: 0 2px 0 2px;text-align: center;"><span>' +
                        (element["mainNum"] ? element["mainNum"] : "") +
                        "</span></td>" +
                        '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 2px 0 2px;text-align: center;"><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 2px 0 2px;"><span>' + (element[`${object}`] ? element[`${object}`] : '') + '</span></td>' +
                            '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:70px;padding: 0 2px 0 2px;text-align: center;"><span>' +
                            (element[`taxprice${object}`] ?
                                element[`taxprice${object}`] :
                                "") +
                            "</span></td>" +
                            '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:70px;padding: 0 2px 0 2px;text-align: center;"><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 2px 0 2px;"><span>' +
                            (element[`cName${object}`] ? element[`cName${object}`] : "") +
                            "</span></td>";
                    }
                    tablebottom += "<tr>";
                }

                var tablediv =
                    '<table  style ="border-collapse:collapse;margin: 1px; flex-shrink: 0;" ><colgroup><col width="90"></col><col width="90"></col><col width="130"></col><col width="70"></col><col width="60"></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;overflow-x:scroll;overflow-y:scroll;"><div id="divTTable"  style="display:flex;" >' +
                    tablediv +
                    "</div></div>";

                // document.getElementById("yxyweb-support-container").innerHTML = "";
                setTimeout(() => {
                    // document.getElementById("yxyweb-support-container").innerHTML = htmlTable;
                    document.getElementsByClassName(
                        "mdf-modal-body wui-modal-body"
                    )[0].innerHTML = htmlTable;
                }, 1000);
            }
        });
    });
});

　　

 

posted @ 2023-05-04 21:26  龙旋风  阅读(99)  评论(0)  编辑  收藏  举报