feat(cms): 优化刀具库存列表功能

lixiangyu

昨天 8ae1654dd283f11a5be3bc155064217f3454a3f1

 src/views/cms/CuttingInventoryList.vue

@@ -1,42 +1,42 @@
<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
   <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="刀具编码">
              <a-input placeholder="请输入刀具编码" v-model="queryParam.cuttingId" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
              <a-form-item label="刀具条码">
                <a-input placeholder="请输入刀具条码" v-model="queryParam.cuttingBarcode" />
              </a-form-item>
            </a-col>
            <a-col
            :md="6"
            :sm="8"
          >
            <span
              style="float: left;overflow: hidden;"
              class="table-page-search-submitButtons"
            >
              <a-button
                type="primary"
                @click="searchQuery"
                icon="search"
              >查询</a-button>
              <a-button
                type="primary"
                @click="searchReset"
                icon="reload"
                style="margin-left: 8px"
              >重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    <div class="table-page-search-wrapper">
<!--      <a-form layout="inline" @keyup.enter.native="searchQuery">-->
<!--        <a-row :gutter="24">-->
<!--          <a-col :md="6" :sm="8">-->
<!--            <a-form-item label="刀具编码">-->
<!--              <a-input placeholder="请输入刀具编码" v-model="queryParam.cuttingId" />-->
<!--            </a-form-item>-->
<!--          </a-col>-->
<!--          <a-col :md="6" :sm="8">-->
<!--              <a-form-item label="刀具条码">-->
<!--                <a-input placeholder="请输入刀具条码" v-model="queryParam.cuttingBarcode" />-->
<!--              </a-form-item>-->
<!--            </a-col>-->
<!--            <a-col-->
<!--            :md="6"-->
<!--            :sm="8"-->
<!--          >-->
<!--            <span-->
<!--              style="float: left;overflow: hidden;"-->
<!--              class="table-page-search-submitButtons"-->
<!--            >-->
<!--              <a-button-->
<!--                type="primary"-->
<!--                @click="searchQuery"-->
<!--                icon="search"-->
<!--              >查询</a-button>-->
<!--              <a-button-->
<!--                type="primary"-->
<!--                @click="searchReset"-->
<!--                icon="reload"-->
<!--                style="margin-left: 8px"-->
<!--              >重置</a-button>-->
<!--            </span>-->
<!--          </a-col>-->
<!--        </a-row>-->
<!--      </a-form>-->
    </div>
    <!-- 查询区域-END -->

@@ -51,11 +51,12 @@

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
<!--      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
<!--        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项-->
<!--        <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
<!--      </div>-->

      <!--        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"-->
      <a-table
        ref="table"
        size="middle"
@@ -66,7 +67,6 @@
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">

@@ -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"
          :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>
@@ -147,7 +162,7 @@
          {
            title:'刀具编码',
            align:"center",
            dataIndex: 'cuttingId'
            dataIndex: 'cuttingId_dictText'
          },
          {
            title:'刀具条码',
@@ -157,7 +172,13 @@
          {
            title:'库存状态',
            align:"center",
            dataIndex: 'inventoryStatus'
            dataIndex: 'inventoryStatus',
            filters: [
              { text: '正常', value: '正常' },
              { text: '已出库', value: '已出库' },
            ],
            filterMultiple: true, // 设置为false表示单选，true表示多选
            scopedSlots: { customRender: 'inventoryStatus' }
          },
          {
            title:'当前寿命(百分比)',
@@ -173,20 +194,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(){
@@ -194,15 +275,206 @@
      },
    },
    methods: {
      initDictConfig(){
      initDictConfig() {
      },
      getSuperFieldList(){
        let fieldList=[];
        fieldList.push({type:'string',value:'cuttingId',text:'刀具ID'})
        fieldList.push({type:'string',value:'cuttingBarcode',text:'刀具条码'})
        fieldList.push({type:'string',value:'inventoryStatus',text:'库存状态'})
        fieldList.push({type:'number',value:'currentLife',text:'当前寿命(百分比)'})
      getCuttingInventory(cuttingId) {
        this.queryParam.cuttingId = cuttingId;
        // 重置分页到第一页
        this.ipagination.current = 1;
        // 加载数据
        this.loadData();

        this.statisticsPagination.current = 1;
        // 同时加载统计信息
        this.loadStatisticsData();
      },
      getSuperFieldList() {
        let fieldList = [];
        fieldList.push({ type: 'string', value: 'cuttingId', text: '刀具ID' })
        fieldList.push({ type: 'string', value: 'cuttingBarcode', text: '刀具条码' })
        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();
        });
      },

      handleTableChange(pagination, filters, sorter) {
        // 处理表格变化事件，包括筛选
        this.ipagination = pagination;

        // 处理筛选条件 - 使用OR逻辑
        if (filters.inventoryStatus && filters.inventoryStatus.length > 0) {
          // 如果有筛选条件，将多个状态用逗号连接
          this.queryParam.inventoryStatus = filters.inventoryStatus.join(',');
        } else {
          // 如果没有筛选条件，删除查询参数中的库存状态
          delete this.queryParam.inventoryStatus;
        }

        // 重新加载数据
        this.loadData();
      },

      // 重写加载数据方法
      loadData(arg) {
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        // 确保查询参数被正确传递
        var params = this.getQueryParams(); // 这个方法应该包含 queryParam 中的所有参数

        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;
        }).catch(() => {
          this.loading = false;
        })
      },

      // 合并统计数据方法
      mergeStatisticsData(data) {
        if (!data || data.length === 0) return [];

        const grouped = {};
        // 初始化总计统计
        const totalStats = {
          normal: 0,
          outbound: 0,
          total: 0
        };

        // 按刀具编码分组
        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
          });

          // 累计总计数据
          if (item.inventoryStatus === '正常') {
            totalStats.normal += item.cuttingIdNumber;
          } else if (item.inventoryStatus === '已出库') {
            totalStats.outbound += item.cuttingIdNumber;
          }
          totalStats.total += 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: '', // 修改这里，将重复的cuttingCode设为空字符串
              cuttingId: group.cuttingId,
              inventoryStatus: `${statuses[i].status}:${statuses[i].count}`,
              cuttingIdNumber: totalCount,
              rowSpan: 0  // 表示被合并
            });
          }
        });

        // 添加总计行
        if (result.length > 0) {
          result.push({
            cuttingCode: '总计',
            cuttingId: '',
            inventoryStatus: `正常:${totalStats.normal}`,
            cuttingIdNumber: totalStats.total,
            rowSpan: 1
          });

          result.push({
            cuttingCode: '', // 修改这里，将重复的cuttingCode设为空字符串
            cuttingId: '',
            inventoryStatus: `已出库:${totalStats.outbound}`,
            cuttingIdNumber: '',
            rowSpan: 1
          });
        }

        return result;
      }
    }
  }