refactor(wms-report): 统一报表页面模板，提取公共逻辑为action-template

1.  将merge、repair下的多个报表页面重构为使用action-template组件
2.  提取自定义导出功能为公共组件CustomExport并复用至receive.vue和action-template
3.  统一报表页面的查询、导出、列配置等公共逻辑

klp-ui/src/views/wms/report/components/CustomExport.vue

@@ -0,0 +1,306 @@
+<template>
+  <el-dialog title="自定义导出 - 选择导出列" :visible.sync="visible" width="850px" top="5vh">
+    <div class="custom-export-toolbar">
+      <el-input v-model="columnSearch" placeholder="搜索列名" prefix-icon="el-icon-search" clearable size="small" style="width: 200px" />
+      <div class="custom-export-actions">
+        <el-button size="small" @click="selectAllColumns">全选</el-button>
+        <el-button size="small" @click="invertColumns">反选</el-button>
+        <el-button size="small" @click="selectedColumns = []">清空</el-button>
+      </div>
+    </div>
+    <div class="custom-export-body">
+      <div class="export-left">
+        <div class="export-panel-title">可选列</div>
+        <div class="export-left-scroll">
+          <el-checkbox-group v-model="selectedColumns">
+            <div v-for="(group, gName) in groupedColumns" :key="gName" class="column-group">
+              <div class="column-group-title">{{ gName }}</div>
+              <div class="column-group-items">
+                <el-checkbox
+                  v-for="field in group"
+                  :key="field.key"
+                  :label="field.key"
+                  :style="{ display: columnSearch && !filterMatch(field) ? 'none' : '' }"
+                >{{ field.label }}</el-checkbox>
+              </div>
+            </div>
+          </el-checkbox-group>
+        </div>
+      </div>
+      <div class="export-right">
+        <div class="export-panel-title">
+          导出顺序
+          <span class="order-count">{{ orderedColumns.length }}</span>
+        </div>
+        <div class="export-right-scroll">
+          <draggable v-model="orderedColumns" class="ordered-list" ghost-class="ghost" handle=".drag-handle">
+            <div v-for="field in orderedColumns" :key="field" class="ordered-item">
+              <i class="el-icon-rank drag-handle"></i>
+              <span class="order-index">{{ orderedColumns.indexOf(field) + 1 }}</span>
+              <span class="order-label">{{ exportColumns[field] || field }}</span>
+              <i class="el-icon-close order-remove" @click.stop="removeOrderedField(field)"></i>
+            </div>
+          </draggable>
+          <div v-if="orderedColumns.length === 0" class="empty-tip">勾选左侧列后出现在此处，可拖拽排序</div>
+        </div>
+      </div>
+    </div>
+    <div slot="footer" class="custom-export-footer">
+      <span class="selected-tip">已选 <b>{{ orderedColumns.length }}</b> / {{ flatColumns.length }} 列</span>
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="doCustomExport" :disabled="orderedColumns.length === 0">
+        导出
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getExportColumns } from "@/api/wms/coil";
+import draggable from 'vuedraggable';
+
+export default {
+  name: 'CustomExport',
+  components: { draggable },
+  props: {
+    storageKey: { type: String, required: true },
+    columnGroups: { type: Object, required: true },
+    visible: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      exportColumns: {},
+      selectedColumns: [],
+      orderedColumns: [],
+      columnSearch: '',
+    }
+  },
+  computed: {
+    groupedColumns() {
+      const result = {}
+      Object.entries(this.columnGroups).forEach(([groupName, fieldKeys]) => {
+        const items = fieldKeys
+          .filter(key => this.exportColumns[key])
+          .map(key => ({ key, label: this.exportColumns[key] }))
+        if (items.length) {
+          result[groupName] = items
+        }
+      })
+      return result
+    },
+    flatColumns() {
+      return Object.values(this.groupedColumns).flat()
+    },
+  },
+  watch: {
+    selectedColumns: {
+      handler(nv, ov) {
+        const newSet = new Set(nv)
+        const oldSet = ov ? new Set(ov) : new Set()
+        this.orderedColumns = this.orderedColumns.filter(f => newSet.has(f))
+        const added = nv.filter(f => !oldSet.has(f))
+        if (added.length) {
+          this.orderedColumns.push(...added)
+        }
+      }
+    }
+  },
+  methods: {
+    open() {
+      getExportColumns().then(res => {
+        this.exportColumns = res.data
+        const cached = localStorage.getItem(`custom-export-columns-${this.storageKey}`)
+        if (cached) {
+          try {
+            const arr = JSON.parse(cached)
+            if (Array.isArray(arr) && arr.length) {
+              this.selectedColumns = [...arr]
+              this.orderedColumns = [...arr]
+              this.$emit('update:visible', true)
+              return
+            }
+          } catch (e) { /* ignore */ }
+        }
+        this.selectedColumns = []
+        this.orderedColumns = []
+        this.$emit('update:visible', true)
+      })
+    },
+    doCustomExport() {
+      localStorage.setItem(`custom-export-columns-${this.storageKey}`, JSON.stringify(this.orderedColumns))
+      this.$emit('update:visible', false)
+      this.$emit('export', this.orderedColumns)
+    },
+    removeOrderedField(field) {
+      this.selectedColumns = this.selectedColumns.filter(f => f !== field)
+    },
+    filterMatch(field) {
+      const keyword = this.columnSearch.toLowerCase()
+      return !keyword || field.label.toLowerCase().includes(keyword) || field.key.toLowerCase().includes(keyword)
+    },
+    selectAllColumns() {
+      this.selectedColumns = this.flatColumns.map(f => f.key)
+    },
+    invertColumns() {
+      const allKeys = this.flatColumns.map(f => f.key)
+      this.selectedColumns = allKeys.filter(k => !this.selectedColumns.includes(k))
+    },
+  }
+}
+</script>
+
+<style scoped>
+.custom-export-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ebeef5;
+}
+.custom-export-actions {
+  display: flex;
+  gap: 8px;
+}
+.custom-export-body {
+  display: flex;
+  gap: 16px;
+  height: 420px;
+}
+.export-left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.export-right {
+  width: 260px;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid #ebeef5;
+  padding-left: 16px;
+}
+.export-panel-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.order-count {
+  background: #409eff;
+  color: #fff;
+  font-size: 11px;
+  padding: 1px 7px;
+  border-radius: 10px;
+  font-weight: normal;
+}
+.export-left-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding-right: 8px;
+}
+.export-right-scroll {
+  flex: 1;
+  overflow-y: auto;
+}
+.column-group {
+  margin-bottom: 12px;
+}
+.column-group-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #909399;
+  margin-bottom: 6px;
+  padding-left: 8px;
+  border-left: 2px solid #dcdfe6;
+}
+.column-group-items {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 2px 8px;
+}
+.column-group-items .el-checkbox {
+  margin-right: 0;
+}
+.ordered-list {
+  min-height: 60px;
+}
+.ordered-item {
+  display: flex;
+  align-items: center;
+  padding: 6px 8px;
+  margin-bottom: 4px;
+  background: #f5f7fa;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  cursor: default;
+  transition: background .2s;
+}
+.ordered-item:hover {
+  background: #ecf5ff;
+  border-color: #c6e2ff;
+}
+.ordered-item.ghost {
+  opacity: 0.4;
+  background: #409eff;
+}
+.drag-handle {
+  color: #c0c4cc;
+  cursor: grab;
+  margin-right: 6px;
+}
+.drag-handle:active {
+  cursor: grabbing;
+}
+.order-index {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  font-size: 11px;
+  color: #909399;
+  background: #e4e7ed;
+  border-radius: 50%;
+  margin-right: 6px;
+  flex-shrink: 0;
+}
+.order-label {
+  flex: 1;
+  font-size: 13px;
+  color: #303133;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.order-remove {
+  color: #c0c4cc;
+  cursor: pointer;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+.order-remove:hover {
+  color: #f56c6c;
+}
+.empty-tip {
+  color: #c0c4cc;
+  font-size: 12px;
+  text-align: center;
+  padding-top: 30px;
+}
+.custom-export-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.selected-tip {
+  font-size: 13px;
+  color: #909399;
+}
+.selected-tip b {
+  color: #409eff;
+}
+</style>

klp-ui/src/views/wms/report/merge/acid.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <merge-template :actionType="201"></merge-template>
+    <action-template :actionType="201" reportType="all"></action-template>
   </div>
 </template>
 
 <script>
-import mergeTemplate from "@/views/wms/report/template/merge.vue";
+import actionTemplate from "@/views/wms/report/template/action.vue";
 export default {
   components: {
-    mergeTemplate,
+    actionTemplate,
   },
 }
 </script>

klp-ui/src/views/wms/report/merge/duge.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <merge-template :actionType="206"></merge-template>
+    <action-template :actionType="206" reportType="all"></action-template>
   </div>
 </template>
 
 <script>
-import mergeTemplate from "@/views/wms/report/template/merge.vue";
+import actionTemplate from "@/views/wms/report/template/action.vue";
 export default {
   components: {
-    mergeTemplate,
+    actionTemplate,
   },
 }
 </script>

klp-ui/src/views/wms/report/merge/index.vue

@@ -1,299 +1,14 @@
 <template>
-  <div class="app-container" v-loading="loading">
+  <div>
-    <el-row>
+    <action-template :actionType="'201,202,203,204,205,206'" reportType="all"></action-template>
-      <el-form label-width="80px" inline>
-        <el-form-item label="开始时间" prop="startTime">
-          <el-date-picker style="width: 200px;" v-model="queryParams.startTime" type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间"></el-date-picker>
-        </el-form-item>
-        <el-form-item label="结束时间" prop="endTime">
-          <el-date-picker style="width: 200px;" v-model="queryParams.endTime" type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间"></el-date-picker>
-        </el-form-item>
-        <el-form-item label="入场钢卷号" prop="enterCoilNo">
-          <el-input style="width: 200px; display: inline-block;" v-model="queryParams.enterCoilNo"
-            placeholder="请输入入场钢卷号" clearable @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="当前钢卷号" prop="currentCoilNo">
-          <el-input style="width: 200px;" v-model="queryParams.currentCoilNo" placeholder="请输入当前钢卷号" clearable
-            @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="产品名称" prop="itemName">
-          <el-input style="width: 200px;" v-model="queryParams.itemName" placeholder="请输入产品名称" clearable
-            @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="规格" prop="itemSpecification">
-          <memo-input style="width: 200px;" v-model="queryParams.itemSpecification" storageKey="coilSpec"
-            placeholder="请选择规格" clearable @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="材质" prop="itemMaterial">
-          <muti-select style="width: 200px;" v-model="queryParams.itemMaterial" :options="dict.type.coil_material"
-            placeholder="请选择材质" clearable @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="厂家" prop="itemManufacturer">
-          <muti-select style="width: 200px;" v-model="queryParams.itemManufacturer"
-            :options="dict.type.coil_manufacturer" placeholder="请选择厂家" clearable @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="getList">查询</el-button>
-          <el-button type="primary" @click="exportData">导出产出钢卷</el-button>
-          <el-button type="primary" @click="exportLossData">导出消耗钢卷</el-button>
-          <el-button type="primary" @click="settingVisible = true">列设置</el-button>
-        </el-form-item>
-      </el-form>
-    </el-row>
-
-     <el-descriptions title="统计信息" :column="3" border>
-      <el-descriptions-item label="产出数量">{{ summary.outCount }}</el-descriptions-item>
-      <el-descriptions-item label="产出总重">{{ summary.outTotalWeight }}t</el-descriptions-item>
-      <el-descriptions-item label="产出均重">{{ summary.outAvgWeight }}t</el-descriptions-item>
-
-      <el-descriptions-item label="消耗数量">{{ summary.lossCount }}</el-descriptions-item>
-      <el-descriptions-item label="消耗总重">{{ summary.lossTotalWeight }}t</el-descriptions-item>
-      <el-descriptions-item label="消耗均重">{{ summary.lossAvgWeight }}t</el-descriptions-item>
-
-      <el-descriptions-item label="数量差值">{{ summary.countDiff }}</el-descriptions-item>
-      <el-descriptions-item label="总重差值">{{ summary.weightDiff }}</el-descriptions-item>
-      <el-descriptions-item label="均重差值">{{ summary.avgWeightDiff }}t</el-descriptions-item>
-      <!-- <el-descriptions-item label="合计均重">{{ summary.totalAvgWeight }}t</el-descriptions-item> -->
-
-      <!-- 成品率 -->
-      <el-descriptions-item label="成品率">{{ summary.passRate }}</el-descriptions-item>
-      <el-descriptions-item label="损耗率">{{ summary.lossRate }}</el-descriptions-item>
-      <!-- 异常率 -->
-      <el-descriptions-item label="异常率">{{ summary.abRate }}</el-descriptions-item>
-      <!-- 正品率 -->
-      <el-descriptions-item label="正品率">{{ summary.passRate2 }}</el-descriptions-item>
-    </el-descriptions>
-
-    <!-- 已处理M统计信息 -->
-    <!-- <el-descriptions title="已处理M统计信息" :column="3" border>
-      <el-descriptions-item label="产出数量">{{ mSummary.outCount }}</el-descriptions-item>
-      <el-descriptions-item label="产出总重">{{ mSummary.outTotalWeight }}t</el-descriptions-item>
-      <el-descriptions-item label="产出均重">{{ mSummary.outAvgWeight }}t</el-descriptions-item>
-
-      <el-descriptions-item label="消耗数量">{{ mSummary.lossCount }}</el-descriptions-item>
-      <el-descriptions-item label="消耗总重">{{ mSummary.lossTotalWeight }}t</el-descriptions-item>
-      <el-descriptions-item label="消耗均重">{{ mSummary.lossAvgWeight }}t</el-descriptions-item>
-
-      <el-descriptions-item label="数量差值">{{ mSummary.countDiff }}</el-descriptions-item>
-      <el-descriptions-item label="总重差值">{{ mSummary.weightDiff }}</el-descriptions-item>
-      <el-descriptions-item label="均重差值">{{ mSummary.avgWeightDiff }}t</el-descriptions-item>
-      <el-descriptions-item label="成品率">{{ mSummary.passRate }}</el-descriptions-item>
-      <el-descriptions-item label="损耗率">{{ mSummary.lossRate }}</el-descriptions-item>
-      <el-descriptions-item label="异常率">{{ mSummary.abRate }}</el-descriptions-item>
-      <el-descriptions-item label="正品率">{{ mSummary.passRate2 }}</el-descriptions-item>
-    </el-descriptions> -->
-
-    <el-descriptions title="明细信息" :column="3" border>
-    </el-descriptions>
-    <el-tabs v-model="activeTab">
-      <el-tab-pane label="投入钢卷" name="loss">
-        <coil-table :data="lossList" :columns="lossColumns" :loading="loading" height="calc(100vh - 360px)" />
-      </el-tab-pane>
-      <el-tab-pane label="产出钢卷" name="output">
-        <coil-table :data="outList" :columns="outputColumns" :loading="loading" height="calc(100vh - 360px)" />
-      </el-tab-pane>
-    </el-tabs>
-
-    <el-dialog title="列设置" :visible.sync="settingVisible" width="50%">
-      <el-radio-group v-model="activeColumnConfig">
-        <el-radio-button label="coil-report-loss">投入明细配置</el-radio-button>
-        <el-radio-button label="coil-report-output">产出明细配置</el-radio-button>
-      </el-radio-group>
-      <columns-setting :reportType="activeColumnConfig"></columns-setting>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listCoilWithIds } from "@/api/wms/coil";
+import actionTemplate from "@/views/wms/report/template/action.vue";
-import {
-  listPendingAction,
-} from '@/api/wms/pendingAction';
-import MemoInput from "@/components/MemoInput";
-import MutiSelect from "@/components/MutiSelect";
-import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
-import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
-import CoilNo from "@/components/KLPService/Renderer/CoilNo.vue";
-import { calcSummary, calcMSummary } from "@/views/wms/report/js/calc";
-import CoilTable from "@/views/wms/report/components/coilTable";
-import ColumnsSetting from "@/views/wms/report/components/setting/columns";
-
 export default {
-  name: 'MergeTemplate',
-  props: {
-    actionType: {
-      type: Number,
-      required: true
-    }
-  },
   components: {
-    MemoInput,
+    actionTemplate,
-    MutiSelect,
-    ProductInfo,
-    RawMaterialInfo,
-    CoilNo,
-    CoilTable,
-    ColumnsSetting
   },
-  dicts: ['product_coil_status', 'coil_material', 'coil_itemname', 'coil_manufacturer'],
-  data() {
-    // 工具函数：个位数补零
-    const addZero = (num) => num.toString().padStart(2, '0')
-
-    // 获取当前日期（默认选中当天）
-    const now = new Date()
-    const currentDate = `${now.getFullYear()}-${addZero(now.getMonth() + 1)}`
-
-    /**
-     * 生成指定日期/月份的时间范围字符串
-     * @param {string} dateStr - 支持格式：yyyy-MM（月份） 或 yyyy-MM-dd（具体日期）
-     * @returns {object} 包含start（开始时间）和end（结束时间）的对象
-     */
-    const getDayTimeRange = (dateStr) => {
-      // 先校验输入格式是否合法
-      const monthPattern = /^\d{4}-\d{2}$/; // yyyy-MM 正则
-      const dayPattern = /^\d{4}-\d{2}-\d{2}$/; // yyyy-MM-dd 正则
-
-      if (!monthPattern.test(dateStr) && !dayPattern.test(dateStr)) {
-        throw new Error('输入格式错误，请传入 yyyy-MM 或 yyyy-MM-dd 格式的字符串');
-      }
-
-      let startDate, endDate;
-
-      if (monthPattern.test(dateStr)) {
-        // 处理 yyyy-MM 格式：获取本月第一天和最后一天
-        const [year, month] = dateStr.split('-').map(Number);
-        // 月份是0基的（0=1月，1=2月...），所以要减1
-        // 第一天：yyyy-MM-01
-        startDate = `${dateStr}-01`;
-        // 最后一天：通过 new Date(year, month, 0) 计算（month是原始月份，比如2代表2月，传2则取3月0日=2月最后一天）
-        const lastDayOfMonth = new Date(year, month, 0).getDate();
-        endDate = `${dateStr}-${lastDayOfMonth.toString().padStart(2, '0')}`;
-      } else {
-        // 处理 yyyy-MM-dd 格式：直接使用传入的日期
-        startDate = dateStr;
-        endDate = dateStr;
-      }
-
-      // 拼接时间部分
-      return {
-        start: `${startDate} 00:00:00`,
-        end: `${endDate} 23:59:59`
-      };
-    };
-
-    const { start, end } = getDayTimeRange(currentDate)
-    return {
-      lossList: [],
-      outList: [],
-      activeTab: 'loss',
-      activeColumnConfig: 'coil-report-loss',
-      settingVisible: false,
-      loading: false,
-      queryParams: {
-        startTime: start,
-        endTime: end,
-        enterCoilNo: '',
-        currentCoilNo: '',
-        warehouseId: '',
-        itemName: '',
-        itemSpecification: '',
-        itemMaterial: '',
-        itemManufacturer: '',
-        pageSize: 9999,
-        pageNum: 1,
-      },
-      lossColumns: [],
-      outputColumns: []
-    }
-  },
-  computed: {
-    summary() {
-      return calcSummary(this.outList, this.lossList)
-    },
-    // mSummary() {
-    //   return calcMSummary(this.outList, this.lossList)
-    // },
-  },
-  created() {
-    this.handleQuery()
-    this.loadColumns()
-  },
-  methods: {
-    handleQuery() {
-      this.getList()
-    },
-    async getList() {
-      this.loading = true;
-      const res1 = await listPendingAction({ ...this.queryParams, actionTypes: '201,202,203,204,205,206', actionStatus: 2 });
-
-      const res = res1.rows;
-      // 获取两层数据
-      const lossIds = res.map(item => item.coilId);
-      // 使用new Set去重
-      const outIds = [...new Set(res.map(item => item.processedCoilIds))];
-
-      if (lossIds.length === 0 || outIds.length === 0) {
-        this.$message({
-          message: '查询结果为空',
-          type: 'warning'
-        })
-        this.loading = false;
-        return
-      }
-
-      const [lossRes, outRes] = await Promise.all([
-        listCoilWithIds({ ...this.queryParams, coilIds: lossIds.join(',') || '', startTime: '', endTime: '' }),
-        listCoilWithIds({ ...this.queryParams, coilIds: outIds.join(',') || '', startTime: '', endTime: '' }),
-      ]);
-      this.lossList = lossRes.rows.map(item => {
-        // 计算宽度和厚度，将规格按照*分割，*前的是厚度，*后的是宽度
-        const [thickness, width] = item.specification?.split('*') || []
-        return {
-          ...item,
-          computedThickness: parseFloat(thickness),
-          computedWidth: parseFloat(width),
-        }
-      });
-      this.outList = outRes.rows.map(item => {
-        // 计算宽度和厚度，将规格按照*分割，*前的是厚度，*后的是宽度
-        const [thickness, width] = item.specification?.split('*') || []
-        return {
-          ...item,
-          computedThickness: parseFloat(thickness),
-          computedWidth: parseFloat(width),
-        }
-      });
-      this.loading = false;
-    },
-    // 导出
-    exportData() {
-      if (this.outList.length === 0) {
-        this.$message.warning('暂无数据可导出')
-        return
-      }
-      this.download('wms/materialCoil/export', {
-        coilIds: this.outList.map(item => item.coilId).join(',')
-      }, `materialCoil_${new Date().getTime()}.xlsx`)
-    },
-    exportLossData() {
-      if (this.lossList.length === 0) {
-        this.$message.warning('暂无数据可导出')
-        return
-      }
-      this.download('wms/materialCoil/export', {
-        coilIds: this.lossList.map(item => item.coilId).join(',')
-      }, `materialCoil_${new Date().getTime()}.xlsx`)
-    },
-    // 加载列设置
-    loadColumns() {
-      this.lossColumns = JSON.parse(localStorage.getItem('preference-tableColumns-coil-report-loss') || '[]') || []
-      this.outputColumns = JSON.parse(localStorage.getItem('preference-tableColumns-coil-report-output') || '[]') || []
-    }
-  }
 }
 </script>
-
-<style></style>

klp-ui/src/views/wms/report/merge/lajiao.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <merge-template :actionType="204"></merge-template>
+    <action-template :actionType="204" reportType="all"></action-template>
   </div>
 </template>
 
 <script>
-import mergeTemplate from "@/views/wms/report/template/merge.vue";
+import actionTemplate from "@/views/wms/report/template/action.vue";
 export default {
   components: {
-    mergeTemplate,
+    actionTemplate,
   },
 }
 </script>

klp-ui/src/views/wms/report/merge/shuang.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <merge-template :actionType="205"></merge-template>
+    <action-template :actionType="205" reportType="all"></action-template>
   </div>
 </template>
 
 <script>
-import mergeTemplate from "@/views/wms/report/template/merge.vue";
+import actionTemplate from "@/views/wms/report/template/action.vue";
 export default {
   components: {
-    mergeTemplate,
+    actionTemplate,
   },
 }
 </script>

klp-ui/src/views/wms/report/merge/tuozhi.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <merge-template :actionType="203"></merge-template>
+    <action-template :actionType="203" reportType="all"></action-template>
   </div>
 </template>
 
 <script>
-import mergeTemplate from "@/views/wms/report/template/merge.vue";
+import actionTemplate from "@/views/wms/report/template/action.vue";
 export default {
   components: {
-    mergeTemplate,
+    actionTemplate,
   },
 }
 </script>

klp-ui/src/views/wms/report/merge/zinc.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <merge-template :actionType="202"></merge-template>
+    <action-template :actionType="202" reportType="all"></action-template>
   </div>
 </template>
 
 <script>
-import mergeTemplate from "@/views/wms/report/template/merge.vue";
+import actionTemplate from "@/views/wms/report/template/action.vue";
 export default {
   components: {
-    mergeTemplate,
+    actionTemplate,
   },
 }
 </script>

klp-ui/src/views/wms/report/receive.vue

@@ -86,66 +86,18 @@
       <columns-setting :reportType="activeColumnConfig"></columns-setting>
     </el-dialog>
 
-    <!-- 自定义导出列选择弹窗 -->
+    <custom-export
-    <el-dialog title="自定义导出 - 选择导出列" :visible.sync="customExportVisible" width="850px" top="5vh">
+      ref="customExport"
-      <div class="custom-export-toolbar">
+      :visible.sync="customExportVisible"
-        <el-input v-model="columnSearch" placeholder="搜索列名" prefix-icon="el-icon-search" clearable size="small" style="width: 200px" />
+      storage-key="coil-report-receive"
-        <div class="custom-export-actions">
+      :column-groups="columnGroups"
-          <el-button size="small" @click="selectAllColumns">全选</el-button>
+      @export="handleCustomExport"
-          <el-button size="small" @click="invertColumns">反选</el-button>
+    />
-          <el-button size="small" @click="selectedColumns = []">清空</el-button>
-        </div>
-      </div>
-      <div class="custom-export-body">
-        <div class="export-left">
-          <div class="export-panel-title">可选列</div>
-          <div class="export-left-scroll">
-            <el-checkbox-group v-model="selectedColumns">
-              <div v-for="(group, gName) in groupedColumns" :key="gName" class="column-group">
-                <div class="column-group-title">{{ gName }}</div>
-                <div class="column-group-items">
-                  <el-checkbox
-                    v-for="field in group"
-                    :key="field.key"
-                    :label="field.key"
-                    :style="{ display: columnSearch && !filterMatch(field) ? 'none' : '' }"
-                  >{{ field.label }}</el-checkbox>
-                </div>
-              </div>
-            </el-checkbox-group>
-          </div>
-        </div>
-        <div class="export-right">
-          <div class="export-panel-title">
-            导出顺序
-            <span class="order-count">{{ orderedColumns.length }}</span>
-          </div>
-          <div class="export-right-scroll">
-            <draggable v-model="orderedColumns" class="ordered-list" ghost-class="ghost" handle=".drag-handle">
-              <div v-for="field in orderedColumns" :key="field" class="ordered-item">
-                <i class="el-icon-rank drag-handle"></i>
-                <span class="order-index">{{ orderedColumns.indexOf(field) + 1 }}</span>
-                <span class="order-label">{{ exportColumns[field] || field }}</span>
-                <i class="el-icon-close order-remove" @click.stop="removeOrderedField(field)"></i>
-              </div>
-            </draggable>
-            <div v-if="orderedColumns.length === 0" class="empty-tip">勾选左侧列后出现在此处，可拖拽排序</div>
-          </div>
-        </div>
-      </div>
-      <div slot="footer" class="custom-export-footer">
-        <span class="selected-tip">已选 <b>{{ orderedColumns.length }}</b> / {{ flatColumns.length }} 列</span>
-        <el-button @click="customExportVisible = false">取消</el-button>
-        <el-button type="primary" @click="doCustomExport" :disabled="orderedColumns.length === 0">
-          导出
-        </el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listCoilWithIds, getExportColumns } from "@/api/wms/coil";
+import { listCoilWithIds } from "@/api/wms/coil";
 import {
   listPendingAction,
 } from '@/api/wms/pendingAction';
@@ -162,7 +114,7 @@ import TimeRangePicker from "@/views/wms/report/components/timeRangePicker.vue";
 import HierarchicalPivot from "@/views/wms/report/components/hierarchicalPivot/index.vue";
 import CrossTable from "@/views/wms/report/components/crossTable/index.vue";
 import { saveReportFile } from "@/views/wms/report/js/reportFile";
-import draggable from 'vuedraggable';
+import CustomExport from "@/views/wms/report/components/CustomExport.vue";
 
 
 export default {
@@ -178,7 +130,7 @@ export default {
     TimeRangePicker,
     HierarchicalPivot,
     CrossTable,
-    draggable,
+    CustomExport,
   },
   dicts: ['product_coil_status', 'coil_material', 'coil_itemname', 'coil_manufacturer', 'coil_quality_status'],
   data() {
@@ -206,10 +158,6 @@ export default {
       activeColumnConfig: 'coil-report-receive',
       settingVisible: false,
       customExportVisible: false,
-      exportColumns: {},
-      selectedColumns: [],
-      orderedColumns: [],
-      columnSearch: '',
       columnGroups: {
         '基本信息': ['itemTypeDesc', 'warehouseName', 'actualWarehouseName', 'dataTypeText'],
         '钢卷号': ['enterCoilNo', 'supplierCoilNo', 'currentCoilNo'],
@@ -295,38 +243,22 @@ export default {
     coilIds() {
       return this.list.map(item => item.coilId).join(',')
     },
-    groupedColumns() {
+    actionIds() {
-      const result = {}
+      const ids = this.list.map(item => item.actionId).filter(id => id)
-      Object.entries(this.columnGroups).forEach(([groupName, fieldKeys]) => {
+      return ids.length ? ids.join(',') : ''
-        const items = fieldKeys
-          .filter(key => this.exportColumns[key])
-          .map(key => ({ key, label: this.exportColumns[key] }))
-        if (items.length) {
-          result[groupName] = items
-        }
-      })
-      return result
     },
-    flatColumns() {
+    exportIdParams() {
-      return Object.values(this.groupedColumns).flat()
+      return this.actionIds ? { actionIds: this.actionIds } : { coilIds: this.coilIds }
+    },
+    hasExportData() {
+      return !!(this.coilIds || this.actionIds)
+    },
+    exportQueryParams() {
+      const { pageNum, pageSize, ...filters } = this.queryParams
+      return filters
     },
-
   },
   watch: {
-    selectedColumns: {
-      immediate: false,
-      handler(nv, ov) {
-        const newSet = new Set(nv)
-        const oldSet = ov ? new Set(ov) : new Set()
-        // 移除取消勾选的列
-        this.orderedColumns = this.orderedColumns.filter(f => newSet.has(f))
-        // 新勾选的追加到末尾
-        const added = nv.filter(f => !oldSet.has(f))
-        if (added.length) {
-          this.orderedColumns.push(...added)
-        }
-      }
-    }
   },
   methods: {
     // 加载列设置
@@ -384,55 +316,25 @@ export default {
     // 导出
     exportData() {
       this.download('wms/materialCoil/export', {
-        coilIds: this.coilIds,
+        ...this.exportQueryParams,
+        ...this.exportIdParams,
       }, `materialCoil_${new Date().getTime()}.xlsx`)
     },
     // 打开自定义导出弹窗
     openCustomExport() {
-      getExportColumns().then(res => {
+      if (!this.hasExportData) {
-        this.exportColumns = res.data
+        this.$message({ message: '暂无数据可导出', type: 'warning' })
-        // 读缓存：上次保存的列顺序
+        return
-        const cached = localStorage.getItem('custom-export-columns-coil-report-receive')
+      }
-        if (cached) {
+      this.$refs.customExport.open()
-          try {
-            const arr = JSON.parse(cached)
-            if (Array.isArray(arr) && arr.length) {
-              this.selectedColumns = [...arr]
-              this.orderedColumns = [...arr]
-              this.customExportVisible = true
-              return
-            }
-          } catch (e) { /* ignore */ }
-        }
-        this.selectedColumns = []
-        this.orderedColumns = []
-        this.customExportVisible = true
-      })
     },
-    // 执行自定义导出（按 orderedColumns 顺序）
+    handleCustomExport(orderedColumns) {
-    doCustomExport() {
-      // 缓存当前配置
-      localStorage.setItem('custom-export-columns-coil-report-receive', JSON.stringify(this.orderedColumns))
-      this.customExportVisible = false
       this.download('wms/materialCoil/exportCustomOrdered', {
-        coilIds: this.coilIds,
+        ...this.exportQueryParams,
-        columnsOrdered: this.orderedColumns.join(','),
+        ...this.exportIdParams,
+        columnsOrdered: orderedColumns.join(','),
       }, `materialCoil_${new Date().getTime()}.xlsx`)
     },
-    removeOrderedField(field) {
-      this.selectedColumns = this.selectedColumns.filter(f => f !== field)
-    },
-    filterMatch(field) {
-      const keyword = this.columnSearch.toLowerCase()
-      return !keyword || field.label.toLowerCase().includes(keyword) || field.key.toLowerCase().includes(keyword)
-    },
-    selectAllColumns() {
-      this.selectedColumns = this.flatColumns.map(f => f.key)
-    },
-    invertColumns() {
-      const allKeys = this.flatColumns.map(f => f.key)
-      this.selectedColumns = allKeys.filter(k => !this.selectedColumns.includes(k))
-    },
     saveReport() {
       this.loading = true
       saveReportFile(this.coilIds, {
@@ -462,157 +364,4 @@ export default {
 </script>
 
 <style scoped>
-.custom-export-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #ebeef5;
-}
-.custom-export-actions {
-  display: flex;
-  gap: 8px;
-}
-.custom-export-body {
-  display: flex;
-  gap: 16px;
-  height: 420px;
-}
-.export-left {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-.export-right {
-  width: 260px;
-  display: flex;
-  flex-direction: column;
-  border-left: 1px solid #ebeef5;
-  padding-left: 16px;
-}
-.export-panel-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: #303133;
-  margin-bottom: 10px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.order-count {
-  background: #409eff;
-  color: #fff;
-  font-size: 11px;
-  padding: 1px 7px;
-  border-radius: 10px;
-  font-weight: normal;
-}
-.export-left-scroll {
-  flex: 1;
-  overflow-y: auto;
-  padding-right: 8px;
-}
-.export-right-scroll {
-  flex: 1;
-  overflow-y: auto;
-}
-.column-group {
-  margin-bottom: 12px;
-}
-.column-group-title {
-  font-size: 12px;
-  font-weight: 600;
-  color: #909399;
-  margin-bottom: 6px;
-  padding-left: 8px;
-  border-left: 2px solid #dcdfe6;
-}
-.column-group-items {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 2px 8px;
-}
-.column-group-items .el-checkbox {
-  margin-right: 0;
-}
-.ordered-list {
-  min-height: 60px;
-}
-.ordered-item {
-  display: flex;
-  align-items: center;
-  padding: 6px 8px;
-  margin-bottom: 4px;
-  background: #f5f7fa;
-  border: 1px solid #e4e7ed;
-  border-radius: 4px;
-  cursor: default;
-  transition: background .2s;
-}
-.ordered-item:hover {
-  background: #ecf5ff;
-  border-color: #c6e2ff;
-}
-.ordered-item.ghost {
-  opacity: 0.4;
-  background: #409eff;
-}
-.drag-handle {
-  color: #c0c4cc;
-  cursor: grab;
-  margin-right: 6px;
-}
-.drag-handle:active {
-  cursor: grabbing;
-}
-.order-index {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  font-size: 11px;
-  color: #909399;
-  background: #e4e7ed;
-  border-radius: 50%;
-  margin-right: 6px;
-  flex-shrink: 0;
-}
-.order-label {
-  flex: 1;
-  font-size: 13px;
-  color: #303133;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.order-remove {
-  color: #c0c4cc;
-  cursor: pointer;
-  font-size: 12px;
-  flex-shrink: 0;
-}
-.order-remove:hover {
-  color: #f56c6c;
-}
-.empty-tip {
-  color: #c0c4cc;
-  font-size: 12px;
-  text-align: center;
-  padding-top: 30px;
-}
-.custom-export-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.selected-tip {
-  font-size: 13px;
-  color: #909399;
-}
-.selected-tip b {
-  color: #409eff;
-}
 </style>

klp-ui/src/views/wms/report/repair/acid.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <merge-template :actionType="520"></merge-template>
+    <action-template :actionType="520" reportType="all"></action-template>
   </div>
 </template>
 
 <script>
-import mergeTemplate from "@/views/wms/report/template/merge.vue";
+import actionTemplate from "@/views/wms/report/template/action.vue";
 export default {
   components: {
-    mergeTemplate,
+    actionTemplate,
   },
 }
 </script>

klp-ui/src/views/wms/report/repair/duge.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <merge-template :actionType="525"></merge-template>
+    <action-template :actionType="525" reportType="all"></action-template>
   </div>
 </template>
 
 <script>
-import mergeTemplate from "@/views/wms/report/template/merge.vue";
+import actionTemplate from "@/views/wms/report/template/action.vue";
 export default {
   components: {
-    mergeTemplate,
+    actionTemplate,
   },
 }
 </script>

klp-ui/src/views/wms/report/repair/index.vue

@@ -1,300 +1,14 @@
 <template>
-  <div class="app-container" v-loading="loading">
+  <div>
-    <el-row>
+    <action-template :actionType="'520,521,522,523,524,525'" reportType="all"></action-template>
-      <el-form label-width="80px" inline>
-        <el-form-item label="开始时间" prop="startTime">
-          <el-date-picker style="width: 200px;" v-model="queryParams.startTime" type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间"></el-date-picker>
-        </el-form-item>
-        <el-form-item label="结束时间" prop="endTime">
-          <el-date-picker style="width: 200px;" v-model="queryParams.endTime" type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间"></el-date-picker>
-        </el-form-item>
-        <el-form-item label="入场钢卷号" prop="enterCoilNo">
-          <el-input style="width: 200px; display: inline-block;" v-model="queryParams.enterCoilNo"
-            placeholder="请输入入场钢卷号" clearable @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="当前钢卷号" prop="currentCoilNo">
-          <el-input style="width: 200px;" v-model="queryParams.currentCoilNo" placeholder="请输入当前钢卷号" clearable
-            @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="产品名称" prop="itemName">
-          <el-input style="width: 200px;" v-model="queryParams.itemName" placeholder="请输入产品名称" clearable
-            @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="规格" prop="itemSpecification">
-          <memo-input style="width: 200px;" v-model="queryParams.itemSpecification" storageKey="coilSpec"
-            placeholder="请选择规格" clearable @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="材质" prop="itemMaterial">
-          <muti-select style="width: 200px;" v-model="queryParams.itemMaterial" :options="dict.type.coil_material"
-            placeholder="请选择材质" clearable @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="厂家" prop="itemManufacturer">
-          <muti-select style="width: 200px;" v-model="queryParams.itemManufacturer"
-            :options="dict.type.coil_manufacturer" placeholder="请选择厂家" clearable @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="getList">查询</el-button>
-          <el-button type="primary" @click="exportData">导出产出钢卷</el-button>
-          <el-button type="primary" @click="exportLossData">导出消耗钢卷</el-button>
-          <el-button type="primary" @click="settingVisible = true">列设置</el-button>
-        </el-form-item>
-      </el-form>
-    </el-row>
-
-    <el-descriptions title="统计信息" :column="3" border>
-      <el-descriptions-item label="产出数量">{{ summary.outCount }}</el-descriptions-item>
-      <el-descriptions-item label="产出总重">{{ summary.outTotalWeight }}t</el-descriptions-item>
-      <el-descriptions-item label="产出均重">{{ summary.outAvgWeight }}t</el-descriptions-item>
-
-      <el-descriptions-item label="消耗数量">{{ summary.lossCount }}</el-descriptions-item>
-      <el-descriptions-item label="消耗总重">{{ summary.lossTotalWeight }}t</el-descriptions-item>
-      <el-descriptions-item label="消耗均重">{{ summary.lossAvgWeight }}t</el-descriptions-item>
-
-      <el-descriptions-item label="合计数量">{{ summary.totalCount }}</el-descriptions-item>
-      <el-descriptions-item label="合计总重">{{ summary.totalWeight }}t</el-descriptions-item>
-      <el-descriptions-item label="合计均重">{{ summary.totalAvgWeight }}t</el-descriptions-item>
-
-      <!-- 成品率 -->
-      <el-descriptions-item label="成品率">{{ summary.passRate }}</el-descriptions-item>
-      <el-descriptions-item label="损耗率">{{ summary.lossRate }}</el-descriptions-item>
-      <!-- 异常率 -->
-      <el-descriptions-item label="异常率">{{ summary.abRate }}</el-descriptions-item>
-       <!-- 正品率 -->
-      <el-descriptions-item label="正品率">{{ summary.passRate2 }}</el-descriptions-item>
-    </el-descriptions>
-
-     <!-- 已处理M统计信息 -->
-    <!-- <el-descriptions title="已处理M统计信息" :column="3" border>
-      <el-descriptions-item label="产出数量">{{ mSummary.outCount }}</el-descriptions-item>
-      <el-descriptions-item label="产出总重">{{ mSummary.outTotalWeight }}t</el-descriptions-item>
-      <el-descriptions-item label="产出均重">{{ mSummary.outAvgWeight }}t</el-descriptions-item>
-
-      <el-descriptions-item label="消耗数量">{{ mSummary.lossCount }}</el-descriptions-item>
-      <el-descriptions-item label="消耗总重">{{ mSummary.lossTotalWeight }}t</el-descriptions-item>
-      <el-descriptions-item label="消耗均重">{{ mSummary.lossAvgWeight }}t</el-descriptions-item>
-
-      <el-descriptions-item label="合计数量">{{ mSummary.totalCount }}</el-descriptions-item>
-      <el-descriptions-item label="合计总重">{{ mSummary.totalWeight }}t</el-descriptions-item>
-      <el-descriptions-item label="合计均重">{{ mSummary.totalAvgWeight }}t</el-descriptions-item>
-
-      <el-descriptions-item label="成品率">{{ mSummary.passRate }}</el-descriptions-item>
-      <el-descriptions-item label="损耗率">{{ mSummary.lossRate }}</el-descriptions-item>
-      <el-descriptions-item label="异常率">{{ mSummary.abRate }}</el-descriptions-item>
-      <el-descriptions-item label="正品率">{{ mSummary.passRate2 }}</el-descriptions-item>
-    </el-descriptions> -->
-
-    <el-descriptions title="明细信息" :column="3" border>
-    </el-descriptions>
-    <el-tabs v-model="activeTab">
-      <el-tab-pane label="投入钢卷" name="loss">
-        <coil-table :data="lossList" :columns="lossColumns" :loading="loading" height="calc(100vh - 360px)" />
-      </el-tab-pane>
-      <el-tab-pane label="产出钢卷" name="output">
-        <coil-table :data="outList" :columns="outputColumns" :loading="loading" height="calc(100vh - 360px)" />
-      </el-tab-pane>
-    </el-tabs>
-
-    <el-dialog title="列设置" :visible.sync="settingVisible" width="50%">
-      <el-radio-group v-model="activeColumnConfig">
-        <el-radio-button label="coil-report-loss">投入明细配置</el-radio-button>
-        <el-radio-button label="coil-report-output">产出明细配置</el-radio-button>
-      </el-radio-group>
-      <columns-setting :reportType="activeColumnConfig"></columns-setting>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listCoilWithIds } from "@/api/wms/coil";
+import actionTemplate from "@/views/wms/report/template/action.vue";
-import {
-  listPendingAction,
-} from '@/api/wms/pendingAction';
-import MemoInput from "@/components/MemoInput";
-import MutiSelect from "@/components/MutiSelect";
-import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
-import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
-import CoilNo from "@/components/KLPService/Renderer/CoilNo.vue";
-import { calcSummary, calcMSummary } from "@/views/wms/report/js/calc";
-import CoilTable from "@/views/wms/report/components/coilTable";
-import ColumnsSetting from "@/views/wms/report/components/setting/columns";
-
 export default {
-  name: 'MergeTemplate',
-  props: {
-    actionType: {
-      type: Number,
-      required: true
-    }
-  },
   components: {
-    MemoInput,
+    actionTemplate,
-    MutiSelect,
-    ProductInfo,
-    RawMaterialInfo,
-    CoilNo,
-    CoilTable,
-    ColumnsSetting
   },
-  dicts: ['product_coil_status', 'coil_material', 'coil_itemname', 'coil_manufacturer'],
-  data() {
-    // 工具函数：个位数补零
-    const addZero = (num) => num.toString().padStart(2, '0')
-
-    // 获取当前日期（默认选中当天）
-    const now = new Date()
-    const currentDate = `${now.getFullYear()}-${addZero(now.getMonth() + 1)}`
-
-    /**
-     * 生成指定日期/月份的时间范围字符串
-     * @param {string} dateStr - 支持格式：yyyy-MM（月份） 或 yyyy-MM-dd（具体日期）
-     * @returns {object} 包含start（开始时间）和end（结束时间）的对象
-     */
-    const getDayTimeRange = (dateStr) => {
-      // 先校验输入格式是否合法
-      const monthPattern = /^\d{4}-\d{2}$/; // yyyy-MM 正则
-      const dayPattern = /^\d{4}-\d{2}-\d{2}$/; // yyyy-MM-dd 正则
-
-      if (!monthPattern.test(dateStr) && !dayPattern.test(dateStr)) {
-        throw new Error('输入格式错误，请传入 yyyy-MM 或 yyyy-MM-dd 格式的字符串');
-      }
-
-      let startDate, endDate;
-
-      if (monthPattern.test(dateStr)) {
-        // 处理 yyyy-MM 格式：获取本月第一天和最后一天
-        const [year, month] = dateStr.split('-').map(Number);
-        // 月份是0基的（0=1月，1=2月...），所以要减1
-        // 第一天：yyyy-MM-01
-        startDate = `${dateStr}-01`;
-        // 最后一天：通过 new Date(year, month, 0) 计算（month是原始月份，比如2代表2月，传2则取3月0日=2月最后一天）
-        const lastDayOfMonth = new Date(year, month, 0).getDate();
-        endDate = `${dateStr}-${lastDayOfMonth.toString().padStart(2, '0')}`;
-      } else {
-        // 处理 yyyy-MM-dd 格式：直接使用传入的日期
-        startDate = dateStr;
-        endDate = dateStr;
-      }
-
-      // 拼接时间部分
-      return {
-        start: `${startDate} 00:00:00`,
-        end: `${endDate} 23:59:59`
-      };
-    };
-
-    const { start, end } = getDayTimeRange(currentDate)
-    return {
-      lossList: [],
-      outList: [],
-      activeTab: 'loss',
-      activeColumnConfig: 'coil-report-loss',
-      settingVisible: false,
-      loading: false,
-      queryParams: {
-        startTime: start,
-        endTime: end,
-        enterCoilNo: '',
-        currentCoilNo: '',
-        warehouseId: '',
-        itemName: '',
-        itemSpecification: '',
-        itemMaterial: '',
-        itemManufacturer: '',
-        pageSize: 9999,
-        pageNum: 1,
-      },
-      lossColumns: [],
-      outputColumns: []
-    }
-  },
-  computed: {
-    summary() {
-      return calcSummary(this.outList, this.lossList)
-    },
-    // mSummary() {
-    //   return calcMSummary(this.outList, this.lossList)
-    // },
-  },
-  created() {
-    this.handleQuery()
-    this.loadColumns()
-  },
-  methods: {
-    handleQuery() {
-      this.getList()
-    },
-    async getList() {
-      this.loading = true;
-      const res1 = await listPendingAction({ ...this.queryParams, actionTypes: '520,521,522,523,524,525', actionStatus: 2 });
-
-      const res = res1.rows;
-      // 获取两层数据
-      const lossIds = res.map(item => item.coilId);
-      // const actions = res.map(item => item.actionId);
-      // 使用new Set去重
-      const outIds = [...new Set(res.map(item => item.processedCoilIds))];
-
-      if (lossIds.length === 0 || outIds.length === 0) {
-        this.$message({
-          message: '查询结果为空',
-          type: 'warning'
-        })
-        this.loading = false;
-        return
-      }
-
-      const [lossRes, outRes] = await Promise.all([
-        listCoilWithIds({ ...this.queryParams, coilIds: lossIds.join(',') || '', startTime: '', endTime: '' }),
-        listCoilWithIds({ ...this.queryParams, coilIds: outIds.join(',') || '', startTime: '', endTime: '' }),
-      ]);
-      this.lossList = lossRes.rows.map(item => {
-        // 计算宽度和厚度，将规格按照*分割，*前的是厚度，*后的是宽度
-        const [thickness, width] = item.specification?.split('*') || []
-        return {
-          ...item,
-          computedThickness: parseFloat(thickness),
-          computedWidth: parseFloat(width),
-        }
-      });
-      this.outList = outRes.rows.map(item => {
-        // 计算宽度和厚度，将规格按照*分割，*前的是厚度，*后的是宽度
-        const [thickness, width] = item.specification?.split('*') || []
-        return {
-          ...item,
-          computedThickness: parseFloat(thickness),
-          computedWidth: parseFloat(width),
-        }
-      });
-      this.loading = false;
-    },
-    // 导出
-    exportData() {
-      if (this.outList.length === 0) {
-        this.$message.warning('暂无数据可导出')
-        return
-      }
-      this.download('wms/materialCoil/export', {
-        coilIds: this.outList.map(item => item.coilId).join(',')
-      }, `materialCoil_${new Date().getTime()}.xlsx`)
-    },
-    exportLossData() {
-      if (this.lossList.length === 0) {
-        this.$message.warning('暂无数据可导出')
-        return
-      }
-      this.download('wms/materialCoil/export', {
-        coilIds: this.lossList.map(item => item.coilId).join(',')
-      }, `materialCoil_${new Date().getTime()}.xlsx`)
-    },
-    // 加载列设置
-    loadColumns() {
-      this.lossColumns = JSON.parse(localStorage.getItem('preference-tableColumns-coil-report-loss') || '[]') || []
-      this.outputColumns = JSON.parse(localStorage.getItem('preference-tableColumns-coil-report-output') || '[]') || []
-    }
-  }
 }
 </script>
-
-<style></style>

klp-ui/src/views/wms/report/repair/lajiao.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <merge-template :actionType="523"></merge-template>
+    <action-template :actionType="523" reportType="all"></action-template>
   </div>
 </template>
 
 <script>
-import mergeTemplate from "@/views/wms/report/template/merge.vue";
+import actionTemplate from "@/views/wms/report/template/action.vue";
 export default {
   components: {
-    mergeTemplate,
+    actionTemplate,
   },
 }
 </script>

klp-ui/src/views/wms/report/repair/shuang.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <merge-template :actionType="524"></merge-template>
+    <action-template :actionType="524" reportType="all"></action-template>
   </div>
 </template>
 
 <script>
-import mergeTemplate from "@/views/wms/report/template/merge.vue";
+import actionTemplate from "@/views/wms/report/template/action.vue";
 export default {
   components: {
-    mergeTemplate,
+    actionTemplate,
   },
 }
 </script>

klp-ui/src/views/wms/report/repair/tuozhi.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <merge-template :actionType="522"></merge-template>
+    <action-template :actionType="522" reportType="all"></action-template>
   </div>
 </template>
 
 <script>
-import mergeTemplate from "@/views/wms/report/template/merge.vue";
+import actionTemplate from "@/views/wms/report/template/action.vue";
 export default {
   components: {
-    mergeTemplate,
+    actionTemplate,
   },
 }
 </script>

klp-ui/src/views/wms/report/repair/zinc.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <merge-template :actionType="521"></merge-template>
+    <action-template :actionType="521" reportType="all"></action-template>
   </div>
 </template>
 
 <script>
-import mergeTemplate from "@/views/wms/report/template/merge.vue";
+import actionTemplate from "@/views/wms/report/template/action.vue";
 export default {
   components: {
-    mergeTemplate,
+    actionTemplate,
   },
 }
 </script>

klp-ui/src/views/wms/report/template/action.vue

@@ -137,15 +137,19 @@
         </template>
         <el-form-item>
           <el-button type="primary" @click="handleQuery">查询</el-button>
+          <el-button type="primary" @click="settingVisible = true">列配置</el-button>
           <el-button v-if="['out', 'team', 'day', 'month', 'year', 'all'].includes(reportType)" type="primary"
-            @click="exportData">导出产出钢卷</el-button>
+            @click="exportData">导出产出</el-button>
           <el-button v-if="['loss', 'team', 'day', 'month', 'year', 'all'].includes(reportType)" type="primary"
-            @click="exportLossData">导出消耗钢卷</el-button>
+            @click="exportLossData">导出消耗</el-button>
-          <el-button type="primary" @click="settingVisible = true">列设置</el-button>
           <el-button v-if="['out', 'team', 'day', 'month', 'year', 'all'].includes(reportType)" type="primary"
-            @click="saveOutputReport">保存产出报表</el-button>
+            @click="openCustomExport('output')">自定义导出产出</el-button>
           <el-button v-if="['loss', 'team', 'day', 'month', 'year', 'all'].includes(reportType)" type="primary"
-            @click="saveLossReport">保存消耗报表</el-button>
+            @click="openCustomExport('loss')">自定义导出消耗</el-button>
+          <el-button v-if="['out', 'team', 'day', 'month', 'year', 'all'].includes(reportType)" type="primary"
+            @click="saveOutputReport">保存产出</el-button>
+          <el-button v-if="['loss', 'team', 'day', 'month', 'year', 'all'].includes(reportType)" type="primary"
+            @click="saveLossReport">保存消耗</el-button>
         </el-form-item>
       </el-form>
     </el-row>
@@ -278,6 +282,30 @@
           <el-table-column label="产出总重" align="center" prop="outWeight" />
         </el-table>
       </template>
+
+      <!-- day 类型：小时数据趋势图 -->
+      <div v-if="reportType === 'day'" style="margin-top: 20px; height: 400px;">
+        <el-card>
+          <template slot="header">
+            <div class="clearfix">
+              <span>小时数据趋势</span>
+            </div>
+          </template>
+          <div ref="dayChart" style="width: 100%; height: 350px;"></div>
+        </el-card>
+      </div>
+
+      <!-- month 类型：日数据趋势图 -->
+      <div v-if="reportType === 'month'" style="margin-top: 20px; height: 400px;">
+        <el-card>
+          <template slot="header">
+            <div class="clearfix">
+              <span>日数据趋势</span>
+            </div>
+          </template>
+          <div ref="monthChart" style="width: 100%; height: 350px;"></div>
+        </el-card>
+      </div>
     </template>
 
     <!-- 明细信息和标签页 -->
@@ -318,6 +346,14 @@
       </el-radio-group>
       <columns-setting :reportType="activeColumnConfig"></columns-setting>
     </el-dialog>
+
+    <custom-export
+      ref="customExport"
+      :visible.sync="customExportVisible"
+      :storage-key="customExportStorageKey"
+      :column-groups="columnGroups"
+      @export="handleCustomExport"
+    />
   </div>
 </template>
 
@@ -337,6 +373,7 @@ import CoilTable from "@/views/wms/report/components/coilTable";
 import ColumnsSetting from "@/views/wms/report/components/setting/columns";
 import TimeRangePicker from "@/views/wms/report/components/timeRangePicker.vue";
 import SplitSummary from "@/views/wms/report/components/summary/splitSummary.vue";
+import CustomExport from "@/views/wms/report/components/CustomExport.vue";
 
 import { saveReportFile } from "@/views/wms/report/js/reportFile";
 import * as echarts from 'echarts';
@@ -372,6 +409,7 @@ export default {
     ColumnsSetting,
     TimeRangePicker,
     SplitSummary,
+    CustomExport,
   },
   dicts: ['product_coil_status', 'coil_material', 'coil_itemname', 'coil_manufacturer', 'coil_quality_status'],
   data() {
@@ -437,6 +475,19 @@ export default {
       viewType: 'custom',
       yesterdaySummary: {},
       monthChart: null,
+      dayChart: null,
+      customExportVisible: false,
+      customExportType: 'output',
+      columnGroups: {
+        '基本信息': ['itemTypeDesc', 'warehouseName', 'actualWarehouseName', 'dataTypeText'],
+        '钢卷号': ['enterCoilNo', 'supplierCoilNo', 'currentCoilNo'],
+        '时间': ['createTime', 'exportTime', 'exportBy'],
+        '物理属性': ['netWeight', 'length', 'specification', 'actualThickness', 'theoreticalThickness', 'theoreticalLength'],
+        '材质属性': ['material', 'manufacturer', 'surfaceTreatmentDesc', 'zincLayer', 'packingStatus', 'temperGrade', 'coatingType', 'chromePlateCoilNo'],
+        '用途': ['purpose', 'businessPurpose'],
+        '状态': ['qualityStatus', 'statusDesc', 'isRelatedToOrderText'],
+        '其他': ['itemName', 'itemId', 'packagingRequirement', 'trimmingRequirement', 'transferType', 'saleName', 'remark', 'team'],
+      },
       queryParams: {
         startTime: start,
         endTime: end,
@@ -523,6 +574,9 @@ export default {
       })
       return commonIds
     },
+    customExportStorageKey() {
+      return `coil-report-action-${this.actionType}`
+    },
   },
   watch: {
     warehouseOptions: {
@@ -718,10 +772,21 @@ export default {
         });
       }
 
+      if (this.reportType === 'day') {
+        this.$nextTick(() => {
+          this.initDayChart()
+        })
+      }
+      if (this.reportType === 'month') {
+        this.$nextTick(() => {
+          this.initMonthChart()
+        })
+      }
+
       this.loading = false;
     },
-    // all 类型：获取昨日数据
+    // all 类型：获取昨日数据（逻辑同 getList，时间向前推一天）
-    getYesterdayData() {
+    async getYesterdayData() {
       const yesterday = new Date(this.dayDate)
       yesterday.setDate(yesterday.getDate() - 1)
       const year = yesterday.getFullYear()
@@ -730,66 +795,37 @@ export default {
       const yesterdayDate = `${year}-${month}-${day}`
       const { start, end } = this.getDayTimeRange(yesterdayDate)
 
-      Promise.all([
+      const yesterdayParams = {
-        listCoilWithIds({
+        ...this.queryParams,
-          selectType: 'raw_material',
+        startTime: start,
-          itemType: 'raw_material',
+        endTime: end,
-          warehouseIds: this.warehouseIds.join(','),
+      }
-          ...this.queryParams,
-          startTime: start,
-          endTime: end,
-          pageSize: 99999,
-          pageNum: 1,
-        }),
-        listCoilWithIds({
-          selectType: 'product',
-          itemType: 'product',
-          warehouseIds: this.warehouseIds.join(','),
-          ...this.queryParams,
-          startTime: start,
-          endTime: end,
-          pageSize: 99999,
-          pageNum: 1,
-        }),
-      ]).then((resList) => {
-        const list = resList.flatMap(res => res.rows)
-        const yesterdayList = list.sort(
-          (a, b) => new Date(b.createTime) - new Date(a.createTime)
-        ).map(item => {
-          if (!item.selectType) {
-            item.selectType = item.itemType === 'product' ? 'product' : 'raw_material'
-          }
-          return item
-        })
 
-        listLightPendingAction({
+      const res = await listLightPendingAction({ ...yesterdayParams, actionTypes: this.actionType, actionStatus: 2 })
-          actionStatus: 2,
+      const lossIds = res.data.filter(item => item.coilId).map(item => item.coilId)
-          actionType: this.actionType,
+      const lossActionIds = res.data.filter(item => item.actionId).map(item => item.actionId)
-          pageSize: 99999,
+      const outIds = [...new Set(res.data.filter(item => item.processedCoilIds).map(item => item.processedCoilIds))]
-          pageNum: 1,
-          startTime: start,
-          endTime: end,
-        }).then((lossRes) => {
-          const lossActions = lossRes.rows
-          const lossCoilIds = lossActions.map(item => item.coilId).join(',')
 
-          if (lossCoilIds) {
+      if (lossIds.length === 0 || outIds.length === 0) {
-            listCoilWithIds({
+        this.yesterdaySummary = {}
-              ...this.queryParams,
+        return
-              startTime: undefined,
+      }
-              endTime: undefined,
+
-              coilIds: lossCoilIds,
+      const [lossRes, outRes] = await Promise.all([
-              pageSize: 99999,
+        listCoilWithIds({ ...yesterdayParams, actionIds: lossActionIds.join(',') || '', startTime: '', endTime: '', selectType: 'raw_material' }),
-              pageNum: 1,
+        listCoilWithIds({ ...yesterdayParams, coilIds: outIds.join(',') || '', startTime: '', endTime: '', byCreateTimeStart: start, byCreateTimeEnd: end, selectType: 'product' }),
-            }).then(res => {
+      ])
-              const yesterdayLossList = res.rows
+
-              this.yesterdaySummary = calcSummary(yesterdayList, yesterdayLossList)
+      const yesterdayLossList = lossRes.rows.map(item => {
-            })
+        const [thickness, width] = item.specification?.split('*') || []
-          } else {
+        return { ...item, computedThickness: parseFloat(thickness), computedWidth: parseFloat(width) }
-            this.yesterdaySummary = calcSummary(yesterdayList, [])
-          }
-        })
       })
+      const yesterdayOutList = outRes.rows.map(item => {
+        const [thickness, width] = item.specification?.split('*') || []
+        return { ...item, computedThickness: parseFloat(thickness), computedWidth: parseFloat(width) }
+      })
+
+      this.yesterdaySummary = calcSummary(yesterdayOutList, yesterdayLossList)
     },
     // all 类型：初始化月视图折线图
     initMonthChart() {
@@ -852,6 +888,97 @@ export default {
         this.monthChart.resize()
       })
     },
+    // day 类型：初始化小时数据折线图
+    initDayChart() {
+      if (!this.$refs.dayChart) return
+
+      if (this.dayChart) {
+        this.dayChart.dispose()
+      }
+
+      this.dayChart = echarts.init(this.$refs.dayChart)
+
+      const hourlyData = {}
+      for (let h = 0; h < 24; h++) {
+        hourlyData[h] = { outCount: 0, outTotalWeight: 0, lossCount: 0, lossTotalWeight: 0 }
+      }
+
+      this.outList.forEach(item => {
+        const timeStr = item.createTime?.split(' ')[1] || '00:00:00'
+        const hour = parseInt(timeStr.split(':')[0])
+        if (hourlyData[hour] !== undefined) {
+          hourlyData[hour].outCount++
+          hourlyData[hour].outTotalWeight += parseFloat(item.netWeight) || 0
+        }
+      })
+
+      this.lossList.forEach(item => {
+        const timeStr = item.actionCompleteTime?.split(' ')[1] || '00:00:00'
+        const hour = parseInt(timeStr.split(':')[0])
+        if (hourlyData[hour] !== undefined) {
+          hourlyData[hour].lossCount++
+          hourlyData[hour].lossTotalWeight += parseFloat(item.netWeight) || 0
+        }
+      })
+
+      const hours = Object.keys(hourlyData).map(Number).sort((a, b) => a - b)
+      const hourLabels = hours.map(h => `${String(h).padStart(2, '0')}:00`)
+      const outCountData = hours.map(h => hourlyData[h].outCount)
+      const outTotalWeightData = hours.map(h => hourlyData[h].outTotalWeight.toFixed(2))
+      const lossCountData = hours.map(h => hourlyData[h].lossCount)
+      const lossTotalWeightData = hours.map(h => hourlyData[h].lossTotalWeight.toFixed(2))
+
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
+        },
+        legend: { data: ['产出数量', '产出总重', '消耗数量', '消耗总重'] },
+        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+        xAxis: [{ type: 'category', boundaryGap: false, data: hourLabels }],
+        yAxis: [
+          { type: 'value', name: '数量', position: 'left' },
+          { type: 'value', name: '重量(t)', position: 'right' }
+        ],
+        series: [
+          { name: '产出数量', type: 'line', data: outCountData, yAxisIndex: 0 },
+          { name: '产出总重', type: 'line', data: outTotalWeightData, yAxisIndex: 1 },
+          { name: '消耗数量', type: 'line', data: lossCountData, yAxisIndex: 0 },
+          { name: '消耗总重', type: 'line', data: lossTotalWeightData, yAxisIndex: 1 }
+        ]
+      }
+
+      this.dayChart.setOption(option)
+
+      window.addEventListener('resize', () => {
+        this.dayChart.resize()
+      })
+    },
+    // 自定义导出
+    openCustomExport(type) {
+      if (type === 'output' && this.outList.length === 0) {
+        this.$message({ message: '暂无产出数据可导出', type: 'warning' })
+        return
+      }
+      if (type === 'loss' && this.lossList.length === 0) {
+        this.$message({ message: '暂无消耗数据可导出', type: 'warning' })
+        return
+      }
+      this.customExportType = type
+      this.$refs.customExport.open()
+    },
+    handleCustomExport(orderedColumns) {
+      const { pageNum, pageSize, startTime, endTime, ...filters } = this.queryParams
+      const type = this.customExportType
+      const ids = type === 'loss'
+        ? { actionIds: this.actionIds }
+        : { coilIds: this.outList.map(item => item.coilId).join(',') }
+      this.download('wms/materialCoil/exportCustomOrdered', {
+        ...filters,
+        ...ids,
+        columnsOrdered: orderedColumns.join(','),
+      }, `materialCoil_${new Date().getTime()}.xlsx`)
+    },
     exportData() {
       if (this.outList.length === 0) {
         this.$message.warning('暂无数据可导出')