JhHardwareWRS/pages/reconciliationLedger/reconciliationLedger.wxml

<scroll-view
  class="page safe-bottom"
  scroll-y
  type="list"
  refresher-enabled
  refresher-triggered="{{refreshing}}"
  bindrefresherrefresh="onPullDownRefresh"
>
  <view class="header">
    <text class="title">对账小账本</text>
    <text class="subtitle">按产品名称汇总最后一道工序的已审核成品数量，对账数量和退货数量可手工维护</text>
  </view>

  <view class="card toolbar-card">
    <view class="toolbar-row">
      <picker mode="selector" range="{{yearLabels}}" value="{{yearIndex}}" bindchange="onYearChange">
        <view class="picker year-picker">{{selectedYear}}年</view>
      </picker>
      <view class="ledger-summary">
        <view>
          <text class="label">已报工合计</text>
          <text class="value">{{totalReported}}</text>
        </view>
        <view>
          <text class="label">对账合计</text>
          <text class="value">{{totalReconciled}}</text>
        </view>
        <view>
          <text class="label">退货合计</text>
          <text class="value">{{totalReturn}}</text>
        </view>
      </view>
    </view>
    <view class="hint-row">
      <text>当前年份默认定位到本月，向右滑动可查看前面月份，已过月份可点击月份标题展开。</text>
    </view>
  </view>

  <view wx:if="{{!rawRows.length && !loading}}" class="list-empty">暂无产品</view>

  <view wx:if="{{rawRows.length}}" class="ledger-shell">
    <view class="ledger-fixed">
      <view class="fixed-head">
        <text class="fixed-head-title">考勤点 / 产品名称</text>
        <picker mode="selector" range="{{pointLabels}}" value="{{pointIndex}}" bindchange="onPointChange">
          <view class="point-filter-picker">
            <text>{{selectedPointLabel || '全部考勤点'}}</text>
          </view>
        </picker>
      </view>
      <view
        wx:for="{{rows}}"
        wx:key="uniqueKey"
        wx:for-item="row"
        class="fixed-product data-row"
      >
        <text class="point-name">{{row.attendancePointName || '-'}}</text>
        <text class="product-name">{{row.productName}}</text>
      </view>
      <view wx:if="{{!rows.length && !loading}}" class="fixed-product empty-product">
        <text>当前考勤点暂无产品</text>
      </view>
    </view>

    <scroll-view
      class="ledger-x"
      scroll-x
      enhanced
      show-scrollbar
      scroll-left="{{monthScrollLeft}}"
    >
      <view class="ledger-table" style="width: {{monthTableWidth}}rpx;">
        <view class="ledger-row ledger-head">
          <view
            wx:for="{{months}}"
            wx:key="month"
            wx:for-item="month"
            wx:for-index="monthIndex"
            class="month-block {{month.expanded ? 'expanded' : 'collapsed'}}"
            style="width: {{month.width}}rpx;"
          >
            <view class="month-title" data-index="{{monthIndex}}" bindtap="toggleMonth">
              <text>{{month.label}}</text>
              <text class="month-toggle">{{month.expanded ? '收起' : '展开'}}</text>
            </view>
            <view wx:if="{{month.expanded}}" class="month-subhead">
              <text>已报工成品</text>
              <text>对账成品</text>
              <text>退货数量</text>
            </view>
          </view>
          <view wx:if="{{monthEndSpacerWidth}}" class="month-end-spacer" style="width: {{monthEndSpacerWidth}}rpx;"></view>
        </view>

        <view
          wx:for="{{rows}}"
          wx:key="uniqueKey"
          wx:for-item="row"
          wx:for-index="rowIndex"
          class="ledger-row data-row"
        >
          <view
            wx:for="{{row.months}}"
            wx:key="month"
            wx:for-item="month"
            wx:for-index="monthIndex"
            class="month-block row-month {{month.expanded ? 'expanded' : 'collapsed'}}"
            style="width: {{month.width}}rpx;"
          >
            <block wx:if="{{month.expanded}}">
              <view class="qty-cell reported">
                <text>{{month.reportedGoodQtyText}}</text>
              </view>
              <view class="qty-cell editable">
                <input
                  class="ledger-input"
                  type="digit"
                  value="{{month.reconciledGoodQtyInput}}"
                  data-row-index="{{rowIndex}}"
                  data-month-index="{{monthIndex}}"
                  data-field="reconciledGoodQty"
                  bindinput="onQtyInput"
                  bindblur="saveCell"
                />
              </view>
              <view class="qty-cell editable return">
                <input
                  class="ledger-input"
                  type="digit"
                  value="{{month.returnQtyInput}}"
                  data-row-index="{{rowIndex}}"
                  data-month-index="{{monthIndex}}"
                  data-field="returnQty"
                  bindinput="onQtyInput"
                  bindblur="saveCell"
                />
              </view>
            </block>
            <view wx:else class="collapsed-cell" data-index="{{monthIndex}}" bindtap="toggleMonth">
              <text>{{month.label}}</text>
            </view>
          </view>
          <view wx:if="{{monthEndSpacerWidth}}" class="month-end-spacer" style="width: {{monthEndSpacerWidth}}rpx;"></view>
        </view>

        <view wx:if="{{!rows.length && !loading}}" class="ledger-row data-row ledger-empty-row">
          <view class="ledger-empty-cell" style="width: {{monthTableWidth}}rpx;">当前考勤点暂无产品</view>
        </view>
      </view>
    </scroll-view>
  </view>
</scroll-view>