feat(cms): 刀具库存列表增加库存统计功能

lixiangyu

5 小时以前 4193a7b909f0244ba3d62b808e695d5f23c31f97

feat(cms): 刀具库存列表增加库存统计功能

- 新增库存统计表格，展示刀具编码、库存状态和数量
- 实现统计数据的加载和分页功能
- 添加刀具编码列的行合并逻辑
- 为库存状态添加不同颜色的标签- 修改搜索和重置功能，以支持统计信息的更新

 src/views/cms/CuttingInventoryList.vue

@@ -108,8 +108,23 @@
            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </div>
    <!-- 库存统计表格 -->
    <div style="margin-top: 20px;">
      <a-card title="库存统计">
        <a-table
          :pagination="statisticsPagination"
          :columns="statisticsColumns"/>in
          :dataSource="statisticsData"
          :loading="statisticsLoading"
          bordered
          size="middle">
          <span slot="inventoryStatus" slot-scope="text">
            <a-tag :color="getTagColor(text)">{{ text }}</a-tag>
          </span>
        </a-table>
      </a-card>
    </div>

    <cutting-inventory-modal ref="modalForm" @ok="modalFormOk"></cutting-inventory-modal>
@@ -173,20 +188,80 @@
          //   scopedSlots: { customRender: 'action' }
          // }
        ],
        // 统计表格列定义
        statisticsColumns: [
          {
            title:'刀具编码',
            align:"center",
            dataIndex: 'cuttingCode',
            customRender: (text, record, index) => {
              const obj = {
                children: text,
                attrs: {}
              };
              // 设置合并逻辑
              if (record.rowSpan !== undefined) {
                obj.attrs.rowSpan = record.rowSpan;
              } else {
                obj.attrs.rowSpan = 1;
              }
              return obj;
            }
          },
          {
            title: '库存状态',
            dataIndex: 'inventoryStatus',
            align: "center",
          },
          {
            title: '数量',
            dataIndex: 'cuttingIdNumber',
            align: "center"
          }
        ],
        url: {
          list: "/cms/cuttingInventory/list",
          delete: "/cms/cuttingInventory/delete",
          deleteBatch: "/cms/cuttingInventory/deleteBatch",
          exportXlsUrl: "/cms/cuttingInventory/exportXls",
          importExcelUrl: "cms/cuttingInventory/importExcel",

          statistics: "/cms/cuttingInventory/statistics" // 添加统计接口地址
        },
        dictOptions:{},
        superFieldList:[],
        // 统计数据
        statisticsData: [],
        statisticsLoading: false,

        // 为主表格保留原有的分页配置
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        // 为统计表格添加单独的分页配置
        statisticsPagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        }
      }
    },
    created() {
    this.getSuperFieldList();
      this.getSuperFieldList();
      this.loadStatisticsData();
    },
    computed: {
      importExcelUrl: function(){
@@ -203,8 +278,133 @@
        fieldList.push({type:'string',value:'inventoryStatus',text:'库存状态'})
        fieldList.push({type:'number',value:'currentLife',text:'当前寿命(百分比)'})
        this.superFieldList = fieldList
      },
      // 加载统计信息
      loadStatisticsData() {
        this.statisticsLoading = true;
        // 调用后端接口获取统计数据
        this.$http({
          url: this.url.statistics,
          method: "get",
          params: {
            ...this.getQueryParams(),
            pageNo: this.statisticsPagination.current,
            pageSize: this.statisticsPagination.pageSize
          }
        }).then((res) => {
          if (res.success) {
            // 更新统计表格的分页总数
            this.statisticsPagination.total = res.result.total;
            // 对数据进行合并处理，使用 res.result.records 而不是 res.result
            this.statisticsData = this.mergeStatisticsData(res.result.records);
          }
          this.statisticsLoading = false;
        }).catch(() => {
          this.statisticsLoading = false;
        });
      },

      // 根据状态返回标签颜色
      getTagColor(status) {
        const colorMap = {
          '正常': 'green',
          '已出库': 'orange',
        };
        return colorMap[status];
      },

      // 重写搜索方法，在搜索完成后加载统计信息
      searchQuery() {
        this.loadData(1);
        // 搜索完成后加载统计信息
        this.$nextTick(() => {
          this.loadStatisticsData();
        });
      },

      // 重写重置方法
      searchReset() {
        this.queryParam = {};
        this.loadData(1);
        this.$nextTick(() => {
          this.loadStatisticsData();
        });
      },

      // 重写加载数据方法
      loadData(arg) {
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams();//查询条件
        this.loading = true;
        this.$http({
          url: this.url.list,
          method: "get",
          params: params
        }).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records;
            this.ipagination.total = res.result.total;

            // 加载统计信息
            this.loadStatisticsData();
          }
          this.loading = false;
        })
      },
      // 合并统计数据方法
      mergeStatisticsData(data) {
        if (!data || data.length === 0) return [];

        const grouped = {};

        // 按刀具编码分组
        data.forEach(item => {
          const key = item.cuttingCode;
          if (!grouped[key]) {
            grouped[key] = {
              cuttingCode: item.cuttingCode,
              cuttingId: item.cuttingId,
              statuses: []
            };
          }
          // 使用 item.inventoryStatus 和 item.cuttingIdNumber
          grouped[key].statuses.push({
            status: item.inventoryStatus,
            count: item.cuttingIdNumber
          });
        });

        // 转换为表格需要的格式，并添加行合并信息
        const result = [];
        Object.values(grouped).forEach(group => {
          const statuses = group.statuses;
          const totalCount = statuses.reduce((sum, s) => sum + s.count, 0);

          // 第一行显示刀具编码，设置rowSpan
          result.push({
            cuttingCode: group.cuttingCode,
            cuttingId: group.cuttingId,
            inventoryStatus: `${statuses[0].status}:${statuses[0].count}`,
            cuttingIdNumber: totalCount,
            rowSpan: statuses.length  // 合并的行数
          });

          // 剩余行只显示状态信息，刀具编码列rowSpan为0
          for (let i = 1; i < statuses.length; i++) {
            result.push({
              cuttingCode: group.cuttingCode,
              cuttingId: group.cuttingId,
              inventoryStatus: `${statuses[i].status}:${statuses[i].count}`,
              cuttingIdNumber: totalCount,
              rowSpan: 0  // 表示被合并
            });
          }
        });
        return result;
      }
    }
    },
  }
</script>
<style scoped>