产品需求量统计页面数据加单位、加合计行、加搜索

zhangwencui

昨天 e526b174afb7b3d1f3d1cbc764d003a19b6a2d9e

 src/views/productionPlan/summaryByProduct/index.vue

@@ -1,13 +1,33 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title ml10">物料编码：</span>
        <el-input v-model="searchForm.materialCode"
                  style="width: 200px"
                  placeholder="请输入物料编码"
                  clearable />
        <span class="search_title ml10">产品名称：</span>
        <el-input v-model="searchForm.productName"
                  style="width: 200px"
                  placeholder="请输入产品名称"
                  clearable />
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
    </div>
    <div class="table_list">
      <PIMTable rowKey="materialCode"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                height="calc(100vh - 200px)"
                height="calc(100vh - 280px)"
                :tableLoading="tableLoading"
                :isSelection="false"
                :isShowSummary="true"
                :summaryMethod="summaryMethod"
                @pagination="pagination">
      </PIMTable>
    </div>
@@ -46,26 +66,31 @@
      label: "长",
      prop: "length",
      className: "dimension-cell",
      formatData: cell => (cell ? `${cell}mm` : ""),
    },
    {
      label: "宽",
      prop: "width",
      className: "dimension-cell",
      formatData: cell => (cell ? `${cell}mm` : ""),
    },
    {
      label: "高",
      prop: "height",
      className: "dimension-cell",
      formatData: cell => (cell ? `${cell}mm` : ""),
    },
    {
      label: "块数",
      prop: "quantity",
      className: "quantity-cell",
      formatData: cell => (cell ? `${cell}块` : ""),
    },
    {
      label: "方数",
      prop: "volume",
      className: "volume-cell",
      formatData: cell => (cell ? `${cell}方` : ""),
    },
  ]);
  const tableData = ref([]);
@@ -78,13 +103,21 @@

  // 搜索表单
  const searchForm = reactive({
    materialCode: "",
    productName: "",
    productSpec: "",
  });

  // 查询列表
  /** 搜索按钮操作 */
  const handleQuery = () => {
    page.current = 1;
    getList();
  };

  /** 重置按钮操作 */
  const handleReset = () => {
    searchForm.materialCode = "";
    searchForm.productName = "";
    page.current = 1;
    getList();
  };
@@ -109,6 +142,31 @@
      .catch(() => {
        tableLoading.value = false;
      });
  };

  // 汇总方法
  const summaryMethod = ({ columns, data }) => {
    const sums = [];
    columns.forEach((column, index) => {
      if (index === 0) {
        sums[index] = "总计";
        return;
      }
      if (column.property === "quantity") {
        const total = data.reduce((acc, item) => {
          return acc + (Number(item.quantity) || 0);
        }, 0);
        sums[index] = `${total}块`;
      } else if (column.property === "volume") {
        const total = data.reduce((acc, item) => {
          return acc + (Number(item.volume) || 0);
        }, 0);
        sums[index] = `${total.toFixed(4)}方`;
      } else {
        sums[index] = "";
      }
    });
    return sums;
  };

  onMounted(() => {
@@ -137,6 +195,16 @@
    &:hover {
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
    }

    .search_title {
      color: #606266;
      font-size: 14px;
      font-weight: 500;
    }

    .ml10 {
      margin-left: 10px;
    }
  }

  .table_list {
@@ -144,7 +212,7 @@
    border-radius: 6px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    overflow: hidden;
    height: calc(100vh - 150px);
    height: calc(100vh - 230px);
  }

  :deep(.el-table) {
@@ -162,7 +230,6 @@
        color: #ffffff;
        border-bottom: none;
        padding: 16px 0;
        font-size: 14px;
        letter-spacing: 0.5px;
      }
    }
@@ -185,7 +252,6 @@
          border-bottom: 1px solid #f0f0f0;
          padding: 14px 0;
          color: #303133;
          font-size: 13px;
        }
      }

@@ -204,7 +270,6 @@
        font-weight: 600;
        color: #409eff;
        font-family: "Courier New", monospace;
        font-size: 14px;
        text-shadow: 0 1px 2px rgba(64, 158, 255, 0.2);
      }

@@ -228,7 +293,6 @@
      // 日期字段样式
      .date-cell {
        color: #909399;
        font-size: 12px;
        font-style: italic;
      }
    }