chuchu-new/packageA/targetBoard/index.js

const _Http = getApp().globalData.http;

Page({
  data: {
    quarterMap: {
      1: "一",
      2: "二",
      3: "三",
      4: "四"
    },
    monthsCopy: [],
    totalWidth: 14290,
  },
  onLoad(options) {
    this.setData({
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth() + 1,
      currentQuarter: Math.ceil((new Date().getMonth() + 1) / 3),
      months: wx.getStorageSync('siteP').statistics_months
    })
    this.getAreaList()
    _Http.basic({
      "id": "2025103010165903",
      "content": {
        date: Date.now(),
      }
    }).then(res => {
      console.log("当前业务员区域", res)
      if (res.code != 1) return wx.showToast({
        title: res.msg,
        icon: "none"
      });
      this.setData({
        currentUser: res.data.map(v => {
          v.key = v.areaname + (v.name ? '(' + v.name + ")" : '')
          return v
        })[0]
      })
      // 查询目标
      this.queryTarget()
      this.queryPaymentDetails();
    })
    this.getAreaList();
  },

  queryTarget() {
    _Http.basic({
      "id": "2025103010192003",
      "content": {
        isexport: 0,
        date: Date.now(),
        "year": this.data.currentYear,
        "month": this.data.currentMonth,
        months: this.data.months,
        where: {
          areaname: this.data.currentUser.areaname
        }
      }
    }).then(res => {
      console.log('查询目标', res)
      if (res.code == 1) {
        let data = res.data.find(v => v.areaname == this.data.currentUser.areaname);
        this.setData({
          target: data
        })
      }
    })
  },

  // 查询回款明细
  queryPaymentDetails() {
    const keys = [{
        label: '现金账户回款',
        key: 'amount',
        number: '1',
        style: 'width:250rpx;'
      },
      {
        label: '活动预存账户回款',
        key: 'amount',
        number: '5',
        style: 'width:250rpx;'
      },
      {
        label: '返利',
        key: 'amount',
        number: '3',
        style: 'width:150rpx;'
      },
      {
        label: '小计',
        key: 'sum',
        number: '',
        style: 'width:150rpx;'
      },
      {
        label: 'GC工程账户汇款',
        key: 'amount',
        number: '2',
        style: 'width:240rpx;'
      },
      {
        label: '整装工程',
        key: 'amount',
        number: '6',
        style: 'width:200rpx;'
      },
      {
        label: '木制品',
        key: 'amount',
        number: '4',
        style: 'width:150rpx;border-right:1px solid #999;',
        class: 'mzp'
      }
    ];
    _Http.basic({
      "id": "2025103015304303",
      "content": {
        "pageNumber": 1,
        "pageSize": 20,
        "year": 2025,
        date123: Date.now(),
        months: this.data.months,
        "year": this.data.currentYear,
        "month": this.data.currentMonth,
        "where": {
          areaname: this.data.currentUser.areaname == '全国' ? '' : this.data.currentUser.areaname,
          "areaname2": "",
          "areaname3": this.data.currentUser.areaname == '全国' ? '' : this.data.currentUser.areaname,
          "province": "",
          "status": "启用"
        }
      }
    }).then(res => {
      console.log("回款明细", res)
      if (res.code != 1) return wx.showToast({
        title: res.msg,
        icon: "none"
      });
      if (res.data.length == 0 && res.code == 1) this.setData({
        paymentDetails: []
      })

      let areaMap = new Map();

      // === 构建明细行 ===
      let paymentDetails = res.data.map((v, index1) => {
        v.cols = [{
            label: '区域',
            value: v.areaname3,
            style: 'width:150rpx;'
          },
          {
            label: '省份',
            value: v.province,
            style: 'width:120rpx;'
          },
          {
            label: '经销商名称',
            value: v.enterprisename,
            style: 'width:220rpx; position: sticky; left: 0; border-right:1px solid #999; z-index: 1;'
          }
        ];

        // 查找或创建区域项
        let item = areaMap.get(v.areaname2);
        if (!item) {
          item = {
            areaname2: v.areaname2,
            row: []
          };
          areaMap.set(v.areaname2, item);
        }

        // 遍历12个月
        for (let month = 1; month <= 12; month++) {
          keys.forEach((s, si) => {
            const key = `${s.key}${month}${s.number}`;
            const value = Number(v[key]) || 0;

            v.cols.push({
              ...s,
              value: this.CNY(value)
            });
            delete v[key];

            if (!item.row[month - 1]) item.row[month - 1] = [];

            item.row[month - 1][si] = (item.row[month - 1][si] || 0) + value;

            // 仅对合计项字段参与求和
            /*  if (['现金账户回款', '小计', '工程账户回款'].includes(s.label)) {
               item.row[month - 1][si] = (item.row[month - 1][si] || 0) + value;
             } else {
               item.row[month - 1][si] = item.row[month - 1][si] || 0;
             } */
          });
        }

        return v;
      });

      // === Map 转数组 ===
      const total = Array.from(areaMap.values());

      // === 表头 ===
      const monthWidth = this.getTotalWidth(keys);
      let headerRow = [{
          label: '',
          value: '',
          style: 'width:150rpx;'
        },
        {
          label: '',
          value: '',
          style: 'width:120rpx;'
        },
        {
          label: '月份',
          value: '',
          style: 'width:220rpx; position: sticky; left: 0; border-right:1px solid #999; z-index: 1;'
        }
      ];

      for (let month = 1; month <= 12; month++) {
        headerRow.push({
          label: `${this.data.currentYear}-${month}月`,
          value: '',
          style: `width: ${monthWidth}rpx; text-align: center; border-top: 1px solid #999;`
        });
      }

      // === ✅ 修复后的合计行插入逻辑 ===
      total.forEach((t) => {
        t.cols = [{
            label: '区域',
            value: '',
            style: 'width:150rpx;'
          },
          {
            label: '省份',
            value: '',
            style: 'width:120rpx;'
          },
          {
            label: '经销商名称',
            value: `${t.areaname2}合计`,
            style: 'width:220rpx; position: sticky; left: 0; border-right:1px solid #999; z-index: 1;'
          }
        ];

        t.row.forEach((r) => {
          keys.forEach((s, si) => {
            const isSummaryField = ['现金账户回款', '小计', '工程账户回款'].includes(s.label);
            const rawValue = r[si] || 0;
            //仅合计指定字段
            // const displayValue = isSummaryField ? this.CNY(rawValue) : '-';
            const displayValue = this.CNY(rawValue);
            t.cols.push({
              ...s,
              value: displayValue
            });
          });
        });
      });

      // 找出每个区域的最后一条明细所在索引
      const inserts = total.map(t => {
        const lastIdx = paymentDetails.reduce((acc, p, idx) => {
          return (p.areaname2 === t.areaname2) ? idx : acc;
        }, -1);
        return {
          t,
          index: lastIdx + 1
        };
      });

      // 按索引从大到小插入，防止前插后移位
      inserts.sort((a, b) => b.index - a.index);
      inserts.forEach(({
        t,
        index
      }) => {
        if (index < 0 || index > paymentDetails.length) {
          index = paymentDetails.length;
        }
        paymentDetails.splice(index, 0, t);
      });

      // === 计算总宽与表头 ===
      this.setData({
        totalWidth: paymentDetails.length ? this.getTotalWidth(paymentDetails[0].cols) : this.data.totalWidth,
        headerRow: paymentDetails.length ? headerRow : []
      });

      // === 分批渲染 ===
      const BATCH_SIZE = 200;
      let renderedData = [];
      let currentIndex = 0;
      wx.showLoading({
        title: '加载中...',
      })
      const renderBatch = () => {
        if (currentIndex < paymentDetails.length) {
          const nextBatch = paymentDetails.slice(currentIndex, currentIndex + BATCH_SIZE);
          renderedData = renderedData.concat(nextBatch);
          this.setData({
            paymentDetails: renderedData
          });
          currentIndex += BATCH_SIZE;
          setTimeout(renderBatch, 0);
        } else {
          wx.hideLoading()
        }
      };

      renderBatch();
    });
  },

  getTotalWidth(cols) {
    //计算总宽度
    let totalWidth = 0;
    cols.forEach(item => {
      let width = item.style.match(/width:\s*([\d.]+)rpx/);
      if (width && width[1]) {
        totalWidth += parseFloat(width[1]);
      }
    })
    return totalWidth
  },
  //获取当前业务员区域及其下属区域
  getAreaList() {
    _Http.basic({
      "id": "2025103009445603",
      "content": {
        pageSize: 9999,
        date: Date.now(),
      }
    }).then(res => {
      console.log("业务员及其下属区域", res)
      if (res.code != 1) return wx.showToast({
        title: res.msg,
        icon: "none"
      });
      this.setData({
        areaList: res.data.map(v => {
          v.key = v.areaname + (v.name ? '(' + v.name + ")" : '')
          return v
        })
      })
    })
  },
  CNY(value) {
    if (value === null || value === undefined || isNaN(value)) return '0';
    let num = parseFloat(value).toFixed(2);
    num = num.replace(/\.?0+$/, '');
    const parts = num.split('.');
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    return parts.join('.');
  },
  // 切换月
  changeDate(e) {
    let value = e.detail.value.split("-")
    this.setData({
      currentYear: value[0],
      currentMonth: value[1],
      currentQuarter: Math.ceil((value[1] - 0 + 1) / 3)
    })
    this.queryTarget();
    this.queryPaymentDetails();
  },
  // 切换区域
  changeSalearea(e) {
    let index = e.detail.value;
    this.setData({
      currentUser: this.data.areaList[index]
    })
    this.queryTarget();
    this.queryPaymentDetails();
  },
  // 选择月
  selectedOption(e) {
    let {
      index
    } = e.currentTarget.dataset,
      monthsCopy = this.data.monthsCopy;
    if (monthsCopy.includes(index)) {
      monthsCopy = monthsCopy.filter(v => v != index)
    } else {
      monthsCopy.push(index)
      monthsCopy.sort((a, b) => a - b)
    }
    this.setData({
      monthsCopy
    })
  },
  onClose() {
    this.setData({
      monthsCopy: []
    })
  },
  onConfirm() {
    this.setData({
      months: this.data.monthsCopy
    })
    this.queryTarget();
  },
  openDialog() {
    this.setData({
      monthsCopy: this.data.months
    })
  }
})