feat(router): 添加数字钢卷路由

feat(components): 为MutiSelect组件添加collapseTags属性

feat(views): 新增酸连轧系统页面及组件

feat(views): 添加数字钢卷信息展示组件

refactor(views): 重构基础面板组件，支持数字钢卷功能

klp-ui/src/components/MutiSelect/index.vue

@@ -11,6 +11,7 @@
         :allow-create="allowAdd"
         :disabled="disabled"
         :size="size"
+        :collapse-tags="collapseTags"
         @change="handleChange"
       >
         <!-- 全选选项 -->
@@ -98,6 +99,10 @@
       showSelectAll: {
         type: Boolean,
         default: true
+      },
+      collapseTags: {
+        type: Boolean,
+        default: true
       }
     },
     // 计算属性捕获实现双向绑定

klp-ui/src/router/index.js

@@ -112,6 +112,12 @@ export const constantRoutes = [
         component: () => import('@/views/wms/todo/index'),
         name: 'Task',
         meta: { title: '待办任务', icon: 'checkbox' }
+      },
+      {
+        path: 'coil/:coilId',
+        component: () => import('@/views/wms/coil/info'),
+        name: 'CoilInfo',
+        meta: { title: '数字钢卷', icon: 'checkbox' }
       }
     ],
   },

klp-ui/src/views/micro/pages/acid/components/Inventory.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="inventory-container">
+    <BasePage 
+      :qrcode="qrcode" 
+      :querys="querys" 
+      :showControl="showControl" 
+      :useWarehouseIds="useWarehouseIds"
+      :warehouseOptions="warehouseOptions"
+      :showMaterialType="showMaterialType"
+    />
+  </div>
+</template>
+
+<script>
+import BasePage from '@/views/wms/coil/panels/base.vue';
+
+export default {
+  name: 'AcidInventory',
+  components: {
+    BasePage
+  },
+  data() {
+    return {
+      qrcode: false,
+      querys: {
+        dataType: 1,
+        status: 0
+      },
+      useWarehouseIds: true,
+      warehouseOptions: [
+        {value: '1988150044862377986', label: '酸连轧原料库'},
+        {value: '1988150099140866050', label: '酸连轧成品库'}, 
+        {value: '1988150263284953089', label: '镀锌原料库'}, 
+        {value: '1988150545175736322', label: '脱脂原料库'},
+      ],
+      showControl: false,
+      showMaterialType: true,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.inventory-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

klp-ui/src/views/micro/pages/acid/components/Processing.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="processing-container">
+    <el-tabs v-model="activeTab" type="border-card">
+      <el-tab-pane v-for="tab in tabs" :label="tab.title" :name="tab.name">
+        <DoPage 
+          v-if="activeTab === tab.name"
+          :label="tab.label" 
+          :tabs="tab.tabs" 
+          :useSpecialSplit="tab.useSpecialSplit" 
+        />
+      </el-tab-pane>
+    </el-tabs>
+    
+  </div>
+</template>
+
+<script>
+import DoPage from '@/views/wms/coil/panels/do.vue';
+
+export default {
+  name: 'AcidProcessing',
+  components: {
+    DoPage
+  },
+  data() {
+    return {
+      activeTab: 'typing',
+      tabs: [
+        { 
+          title: '酸轧加工',
+          name: 'typing',
+          label: '酸轧工序',
+          tabs: [
+            {value: '1988150044862377986', label: '酸连轧原料库'},
+            {value: '1988150099140866050', label: '酸连轧成品库'}, 
+            {value: '1988150263284953089', label: '镀锌原料库'}, 
+            {value: '1988150545175736322', label: '脱脂原料库'},
+          ],
+          useSpecialSplit: false,
+        },
+        {
+          title: '酸轧分条',
+          name: 'split',
+          label: '分条',
+          useSpecialSplit: false,
+        },
+        {
+          title: '合卷',
+          name: 'merge',
+          label: '酸轧合卷',
+          useSpecialSplit: false,
+        },
+        { 
+          title: '酸轧修复',
+          name: 'repair',
+          label: '酸轧修复工序',
+          tabs: [
+            {value: '1988150044862377986', label: '酸连轧原料库'},
+            {value: '1988150099140866050', label: '酸连轧成品库'}, 
+            {value: '1988150263284953089', label: '镀锌原料库'}, 
+            {value: '1988150545175736322', label: '脱脂原料库'},
+          ],
+          useSpecialSplit: true,
+        },
+      ]
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.processing-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

klp-ui/src/views/micro/pages/acid/components/Quality.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="quality-container">
+    <el-tabs v-model="activeTab" class="quality-tabs">
+      <el-tab-pane label="异常钢卷" name="abnormal">
+        <div class="tab-content" v-if="activeTab === 'abnormal'">
+          <BasePage 
+            :qrcode="qrcode" 
+            :querys="abnormalQuerys" 
+            :labelType="labelType" 
+            :hideType="hideType" 
+            :showAbnormal="showAbnormal" 
+            :showControl="showControl" 
+            :useWarehouseIds="useWarehouseIds"
+            :warehouseOptions="warehouseOptions"
+            :showMaterialType="showMaterialType"
+          />
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="钢卷判级" name="gradeCoil">
+        <div class="tab-content" v-if="activeTab === 'gradeCoil'">
+          <BasePage 
+            :qrcode="false" 
+            :querys="{
+              dataType: 0,
+              status: 1,
+            }" 
+            :hideType="false" 
+            :showControl="false" 
+            :showGrade="true"
+            :showStatus="false"
+            :useWarehouseIds="useWarehouseIds"
+            :warehouseOptions="warehouseOptions"
+            :showMaterialType="showMaterialType"
+          />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import BasePage from '@/views/wms/coil/panels/base.vue';
+
+export default {
+  name: 'AcidQuality',
+  components: {
+    BasePage,
+  },
+  data() {
+    return {
+      activeTab: 'abnormal',
+      qrcode: false,
+      abnormalQuerys: {
+        dataType: 1,
+        orderByAbnormal: true,
+      },
+      useWarehouseIds: true,
+      warehouseOptions: [
+        {value: '1988150044862377986', label: '酸连轧原料库'},
+        {value: '1988150099140866050', label: '酸连轧成品库'}, 
+        {value: '1988150263284953089', label: '镀锌原料库'}, 
+        {value: '1988150545175736322', label: '脱脂原料库'},
+      ],
+      labelType: '2',
+      hideType: false,
+      showAbnormal: true,
+      showControl: false,
+      showMaterialType: true,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.quality-container {
+  width: 100%;
+  height: 100%;
+  
+  .quality-tabs {
+    height: 100%;
+    overflow-y: auto;
+  }
+  
+  .tab-content {
+    height: 100%;
+  }
+}
+</style>

klp-ui/src/views/micro/pages/acid/components/Report.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="report-container">
+    <el-tabs v-model="activeTab" class="report-tabs">
+      <el-tab-pane label="综合报表" name="comprehensive">
+        <Comprehensive v-if="activeTab === 'comprehensive'"/>
+      </el-tab-pane>
+      <el-tab-pane label="日报表" name="day">
+        <DayReport v-if="activeTab === 'day'"/>
+      </el-tab-pane>
+      <el-tab-pane label="月报表" name="month">
+        <MonthReport v-if="activeTab === 'month'"/>
+      </el-tab-pane>
+      <el-tab-pane label="年报表" name="year">
+        <YearReport v-if="activeTab === 'year'"/>
+      </el-tab-pane>
+      <el-tab-pane label="损耗报表" name="loss">
+        <LossReport v-if="activeTab === 'loss'"/>
+      </el-tab-pane>
+      <el-tab-pane label="产出报表" name="out">
+        <OutReport v-if="activeTab === 'out'"/>
+      </el-tab-pane>
+      <el-tab-pane label="班报表" name="team">
+        <TeamReport v-if="activeTab === 'team'"/>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import Comprehensive from '@/views/wms/report/zha/comprehensive.vue';
+import DayReport from '@/views/wms/report/zha/day.vue';
+import MonthReport from '@/views/wms/report/zha/month.vue';
+import YearReport from '@/views/wms/report/zha/year.vue';
+import LossReport from '@/views/wms/report/zha/loss.vue';
+import OutReport from '@/views/wms/report/zha/out.vue';
+import TeamReport from '@/views/wms/report/zha/team.vue';
+
+export default {
+  name: 'AcidReport',
+  components: {
+    Comprehensive,
+    DayReport,
+    MonthReport,
+    YearReport,
+    LossReport,
+    OutReport,
+    TeamReport,
+  },
+  data() {
+    return {
+      activeTab: 'comprehensive',
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.report-container {
+  width: 100%;
+  height: 100%;
+  
+  .report-tabs {
+    height: 100%;
+    overflow-y: auto;
+  }
+}
+</style>

klp-ui/src/views/micro/pages/acid/components/Shipping.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="shipping-container">
+    <el-tabs v-model="activeTab" class="shipping-tabs">
+      <el-tab-pane label="配卷情况" name="waybill">
+        <div class="tab-content">
+          <BasePage 
+            :qrcode="qrcode" 
+            :showWaybill="showWaybill"
+            :showNewExport="showNewExport"
+            :querys="waybillQuerys" 
+            :showStatus="showStatus" 
+            :hideType="hideType" 
+            :useWarehouseIds="useWarehouseIds"
+            :warehouseOptions="warehouseOptions"
+            :showMaterialType="showMaterialType"
+          />
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="发货记录" name="ship">
+        <div class="tab-content">
+          <BasePage 
+            :qrcode="qrcode" 
+            :querys="shipQuerys" 
+            :showStatus="showStatus" 
+            :hideType="hideType" 
+            :useWarehouseIds="useWarehouseIds"
+            :warehouseOptions="warehouseOptions"
+            :showControl="false" 
+            :showExportTime="true" 
+            :showMaterialType="showMaterialType"
+          />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import BasePage from '@/views/wms/coil/panels/base.vue';
+
+export default {
+  name: 'AcidShipping',
+  components: {
+    BasePage
+  },
+  data() {
+    return {
+      activeTab: 'waybill',
+      qrcode: false,
+      waybillQuerys: {
+        dataType: 1,
+        includeBindInfo: true,
+      },
+      shipQuerys: {
+        dataType: 1,
+        status: 1,
+      },
+      useWarehouseIds: true,
+      warehouseOptions: [
+        {value: '1988150044862377986', label: '酸连轧原料库'},
+        {value: '1988150099140866050', label: '酸连轧成品库'}, 
+        {value: '1988150263284953089', label: '镀锌原料库'}, 
+        {value: '1988150545175736322', label: '脱脂原料库'},
+      ],
+      showControl: false,
+      labelType: '3',
+      showStatus: false,
+      hideType: false,
+      showExportTime: false,
+      showWaybill: true,
+      showNewExport: true,
+      showMaterialType: true,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.shipping-container {
+  width: 100%;
+  height: 100%;
+  
+  .shipping-tabs {
+    height: 100%;
+    overflow-y: auto;
+  }
+  
+  .tab-content {
+    height: 100%;
+  }
+}
+</style>

klp-ui/src/views/micro/pages/acid/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="acid-container">
+    <div class="acid-sidebar">
+      <el-menu
+        :default-active="activeMenu"
+        class="sidebar-menu"
+        @select="handleMenuSelect"
+      >
+        <el-menu-item index="inventory">
+          <i class="el-icon-box"></i>
+          <span slot="title">库存</span>
+        </el-menu-item>
+        <el-menu-item index="processing">
+          <i class="el-icon-s-operation"></i>
+          <span slot="title">加工</span>
+        </el-menu-item>
+        <el-menu-item index="report">
+          <i class="el-icon-document"></i>
+          <span slot="title">报表</span>
+        </el-menu-item>
+        <el-menu-item index="shipping">
+          <i class="el-icon-truck"></i>
+          <span slot="title">发货</span>
+        </el-menu-item>
+        <el-menu-item index="quality">
+          <i class="el-icon-warning-outline"></i>
+          <span slot="title">品质</span>
+        </el-menu-item>
+      </el-menu>
+    </div>
+    <div>
+      <component :is="currentComponent" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Inventory from './components/Inventory.vue';
+import Processing from './components/Processing.vue';
+import Report from './components/Report.vue';
+import Shipping from './components/Shipping.vue';
+import Quality from './components/Quality.vue';
+
+export default {
+  name: 'AcidSystem',
+  components: {
+    Inventory,
+    Processing,
+    Report,
+    Shipping,
+    Quality,
+  },
+  data() {
+    return {
+      activeMenu: 'inventory',
+    };
+  },
+  computed: {
+    currentComponent() {
+      const componentMap = {
+        inventory: 'Inventory',
+        processing: 'Processing',
+        report: 'Report',
+        shipping: 'Shipping',
+        quality: 'Quality',
+      };
+      return componentMap[this.activeMenu];
+    },
+  },
+  methods: {
+    handleMenuSelect(index) {
+      this.activeMenu = index;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.acid-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  height: calc(100vh - 84px);
+  background-color: #f5f7fa;
+}
+
+.acid-sidebar {
+  width: 100px;
+  background-color: #fff;
+  border-right: 1px solid #e4e7ed;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
+
+  .sidebar-menu {
+    border: none;
+    background-color: transparent;
+    flex: 1;
+    overflow-y: auto;
+    border-right: none;
+
+    ::v-deep .el-menu-item {
+      color: #606266;
+      padding: 0 20px;
+      font-size: 14px;
+      
+      &:hover {
+        background-color: #ecf5ff;
+        color: #409eff;
+      }
+      
+      &.is-active {
+        background-color: #ecf5ff;
+        color: #409eff;
+        border-right: 3px solid #409eff;
+      }
+      
+      i {
+        font-size: 18px;
+        margin-right: 8px;
+      }
+    }
+  }
+}
+</style>

klp-ui/src/views/wms/coil/components/CoilInfo.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-descriptions
+    :column="column"
+    :border="true"
+    size="small"
+  >
+    <el-descriptions-item label="入场卷号">{{ coilInfo.enterCoilNo || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="当前卷号">{{ coilInfo.currentCoilNo || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="厂家原料号">{{ coilInfo.supplierCoilNo || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="逻辑库位">{{ coilInfo.warehouseName || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="实际库区">{{ coilInfo.actualWarehouseName || '-' }}</el-descriptions-item>
+
+    <el-descriptions-item label="班组">{{ coilInfo.team || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="材料类型">{{ coilInfo.materialType || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="产品/原料">{{ coilInfo.itemName || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="规格">{{ coilInfo.specification || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="材质">{{ coilInfo.material || '-' }}</el-descriptions-item>
+
+    <el-descriptions-item label="厂家">{{ coilInfo.manufacturer || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="镀层质量">{{ coilInfo.zincLayer || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="表面处理">{{ coilInfo.surfaceTreatmentDesc || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="质量状态">
+      <span :class="getStatusClass(coilInfo.qualityStatus)">{{ coilInfo.qualityStatus || '-' }}</span>
+    </el-descriptions-item>
+    <el-descriptions-item label="切边要求">{{ coilInfo.trimmingRequirement || '-' }}</el-descriptions-item>
+
+    <el-descriptions-item label="原料材质">{{ coilInfo.packingStatus || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="包装要求">{{ coilInfo.packagingRequirement || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="实测厚度">{{ coilInfo.actualThickness ? `${coilInfo.actualThickness} m` : '-' }}</el-descriptions-item>
+    <el-descriptions-item label="实测宽度">{{ coilInfo.actualWidth ? `${coilInfo.actualWidth} m` : '-' }}</el-descriptions-item>
+    <el-descriptions-item label="长度">{{ coilInfo.length ? `${coilInfo.length} m` : '-' }}</el-descriptions-item>
+
+    <el-descriptions-item label="毛重">{{ coilInfo.grossWeight ? `${coilInfo.grossWeight} t` : '-' }}</el-descriptions-item>
+    <el-descriptions-item label="净重">{{ coilInfo.netWeight ? `${coilInfo.netWeight} t` : '-' }}</el-descriptions-item>
+    <el-descriptions-item label="生产开始">{{ coilInfo.productionStartTime || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="生产结束">{{ coilInfo.productionEndTime || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="调制度">{{ coilInfo.temperGrade || '-' }}</el-descriptions-item>
+
+    <el-descriptions-item label="镀层种类">{{ coilInfo.coatingType || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="表面处理">{{ coilInfo.coilSurfaceTreatment || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="备注" :span="column - 2">{{ coilInfo.remark || '-' }}</el-descriptions-item>
+  </el-descriptions>
+</template>
+
+<script>
+export default {
+  name: 'CoilInfo',
+  props: {
+    coilInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    column: {
+      type: Number,
+      default: 5
+    }
+  },
+  methods: {
+    getStatusClass(status) {
+      if (!status) return ''
+      const statusLower = status.toLowerCase()
+      if (statusLower.includes('合格')) return 'status-success'
+      if (statusLower.includes('不合格')) return 'status-danger'
+      if (statusLower.includes('待检')) return 'status-warning'
+      return ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.status-success {
+  color: #67c23a;
+  font-weight: 500;
+}
+
+.status-danger {
+  color: #f56c6c;
+  font-weight: 500;
+}
+
+.status-warning {
+  color: #e6a23c;
+  font-weight: 500;
+}
+</style>

klp-ui/src/views/wms/coil/panels/base.vue

@@ -1,16 +1,21 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
-      <el-form-item label="入场钢卷号" prop="enterCoilNo">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="60px">
+      <el-form-item label="入场卷号" prop="enterCoilNo">
         <el-input v-model="queryParams.enterCoilNo" placeholder="请输入入场钢卷号" clearable
           @keyup.enter.native="handleQuery" />
       </el-form-item>
-      <el-form-item label="当前钢卷号" prop="currentCoilNo">
+      <el-form-item label="当前卷号" prop="currentCoilNo">
         <el-input v-model="queryParams.currentCoilNo" placeholder="请输入当前钢卷号" clearable
           @keyup.enter.native="handleQuery" />
       </el-form-item>
-      <el-form-item label="逻辑库位" prop="warehouseId" v-if="!hideWarehouseQuery && !leftWarehouseQuery">
-        <warehouse-select v-model="queryParams.warehouseId" placeholder="请选择仓库/库区/库位"
+      <el-form-item label="逻辑库位" prop="warehouseId" v-if="useWarehouseIds">
+        <muti-select v-model="warehouseIds" placeholder="请选择逻辑库位" 
+          style="width: 100%; display: inline-block;" clearable :options="warehouseOptions">
+        </muti-select>
+      </el-form-item>
+      <el-form-item label="逻辑库位" prop="warehouseId" v-else-if="!hideWarehouseQuery && !leftWarehouseQuery">
+        <warehouse-select v-model="queryParams.warehouseId" placeholder="请选择逻辑库位"
           style="width: 100%; display: inline-block;" clearable />
       </el-form-item>
 
@@ -20,6 +25,13 @@
           :clearInput="false" :showEmpty="true" />
       </el-form-item>
 
+      <el-form-item v-if="showMaterialType" label="物料类型" prop="materialType">
+        <el-select v-model="queryParams.materialType" placeholder="请选择物料类型" clearable>
+          <el-option label="原料" value="原料"></el-option>
+          <el-option label="成品" value="成品"></el-option>
+        </el-select>
+      </el-form-item>
+
       <el-form-item label="产品名称" prop="itemName">
         <muti-select v-model="queryParams.itemName" :options="dict.type.coil_itemname" placeholder="请选择物料" clearable />
       </el-form-item>
@@ -298,6 +310,9 @@
               <el-button size="mini" type="text" icon="el-icon-printer" @click="handlePrintLabel(scope.row)">
                 打印标签
               </el-button>
+              <el-button size="mini" type="text" icon="el-icon-view" @click="handleNumberCoilClick(scope.row)">
+                数字钢卷
+              </el-button>
               <el-button size="mini" v-if="showStatus" type="text" icon="el-icon-upload"
                 @click="handleExportCoil(scope.row)">
                 发货
@@ -680,7 +695,7 @@ export default {
       type: Boolean,
       default: false,
     },
-    hideType: {
+    showMaterialType: {
       type: Boolean,
       default: false,
     },
@@ -762,6 +777,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    useWarehouseIds: {
+      type: Boolean,
+      default: false,
+    },
+    warehouseOptions: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -883,6 +906,7 @@ export default {
         loading: false,
         list: [],
       },
+      warehouseIds: '',
       __printOldTitle: document.title,
       floatLayerConfig: {
         columns: [
@@ -974,12 +998,21 @@ export default {
     },
   },
   created() {
-    this.getList();
     if (this.showExportTime) {
       this.getUserList();
     }
+    if (this.useWarehouseIds) {
+      this.warehouseIds = this.warehouseOptions.map(item => item.value).join(',');
+    }
+    this.getList();
   },
   methods: {
+    // 进入数字钢卷页面
+    handleNumberCoilClick(row) {
+      this.$router.push({
+        path: '/wms/coil/' + row.coilId,
+      });
+    },
     // 处理行点击事件
     handleRowClick(row) {
       this.currentCoilId = row.coilId;
@@ -1186,6 +1219,9 @@ export default {
       }
       // 如果没有设置itemType，则设置为raw_material
       query.selectType = this.querys.materialType === '原料' ? 'raw_material' : 'product';
+      if (this.useWarehouseIds) {
+        query.warehouseIds = this.warehouseIds;
+      }
       if (this.showWaybill) {
         const { shipmentTime, ...query } = {
           ...this.queryParams,