feat(coil): 添加钢卷加工流程图组件并优化界面

- 新增ProcessFlow组件展示钢卷加工流程
- 在base面板中添加流程图显示开关
- 调整DragResizeBox的z-index确保显示层级
- 修复部分样式问题和代码格式
- 更新字典项从warehouse_sync改为wms_next_warehouse

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

@@ -48,6 +48,10 @@
       <MaterialSelect :hideType="hideType" :itemId.sync="queryParams.itemIds" :itemType.sync="queryParams.itemType"
         :multiple="true" />
 
+      <el-form-item v-if="editNext" label="显示流程图" prop="showProcessFlow">
+        <el-checkbox v-model="showProcessFlow" @change="handleShowProcessFlowChange"></el-checkbox>
+      </el-form-item>
+
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -82,7 +86,8 @@
     </el-row>
 
     <KLPTable v-loading="loading" :data="materialCoilList" @selection-change="handleSelectionChange" :floatLayer="true"
-      :floatLayerConfig="floatLayerConfig" @row-click="handleRowClick" :height="showAbnormal ? 'calc(100vh - 400px)' : ''">
+      :floatLayerConfig="floatLayerConfig" @row-click="handleRowClick"
+      :height="showAbnormal ? 'calc(100vh - 400px)' : ''">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="入场钢卷号" align="center" prop="enterCoilNo">
         <template slot-scope="scope">
@@ -164,7 +169,7 @@
         <template slot-scope="scope">
           <el-select v-model="scope.row.nextWarehouseId" placeholder="钢卷去向" filterable
             @change="handleNextWarehouseChange(scope.row)">
-            <el-option v-for="item in dict.type.warehouse_sync" :key="item.value" :value="item.value"
+            <el-option v-for="item in dict.type.wms_next_warehouse" :key="item.value" :value="item.value"
               :label="item.label" />
           </el-select>
         </template>
@@ -253,7 +258,7 @@
 
       <el-table-column label="生产耗时" align="center" prop="productionDuration" v-if="showProductionTimeEdit" width="150">
         <template slot-scope="scope">
-          {{ formatDuration(scope.row.productionDuration * 60 * 1000)}}
+          {{ formatDuration(scope.row.productionDuration * 60 * 1000) }}
         </template>
       </el-table-column>
 
@@ -425,11 +430,13 @@
         label-width="100px">
         <el-form-item label="生产开始时间" prop="productionStartTime">
           <el-date-picker v-model="productionTimeForm.productionStartTime" type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择生产时间" @change="(value) => { productionTimeForm.productionStartTime = value; calculateProductionDuration(); }" />
+            value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择生产时间"
+            @change="(value) => { productionTimeForm.productionStartTime = value; calculateProductionDuration(); }" />
         </el-form-item>
         <el-form-item label="生产结束时间" prop="productionEndTime">
           <el-date-picker v-model="productionTimeForm.productionEndTime" type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择生产时间" @change="(value) => { productionTimeForm.productionEndTime = value; calculateProductionDuration(); }" />
+            value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择生产时间"
+            @change="(value) => { productionTimeForm.productionEndTime = value; calculateProductionDuration(); }" />
         </el-form-item>
         <el-form-item label="生产耗时" prop="productionDuration">
           <!-- <div>{{ productionTimeForm.formattedDuration }}</div> -->
@@ -442,14 +449,15 @@
       </div>
     </el-dialog>
 
-    <!-- <el-dialog title="异常信息" :visible.sync="abnormalOpen" width="90%" append-to-body> -->
     <abnormal-list v-if="showAbnormal && currentCoilId" :coil-id="currentCoilId"></abnormal-list>
-    <!-- </el-dialog> -->
 
-    <!-- 吞吐记录 -->
-    <!-- <el-dialog v-if="showWareLog" title="吞吐记录" :visible.sync="logOpen" width="90%" append-to-body> -->
     <log-table v-if="showWareLog && currentCoilId" :coil-id="currentCoilId"></log-table>
-    <!-- </el-dialog> -->
+
+    <DragResizeBox v-if="editNext && showProcessFlow" storageKey="coil-process-flow" @size-change="resizeChart">
+      <div style="height: 100%; width: 100%; overflow-y: scroll; display: flex; background-color: #fff;">
+        <process-flow v-if="showProcessFlow" ref="processFlow"></process-flow>
+      </div>
+    </DragResizeBox>
   </div>
 </template>
 
@@ -492,7 +500,11 @@ import { PDFDocument } from 'pdf-lib';
 import { listUser } from "@/api/system/user";
 import AbnormalList from "./abnormal.vue";
 import LogTable from "@/views/wms/warehouse/components/LogTable.vue";
-import { getCoilTagPrintType } from '@/views/wms/coil/js/coilPrint'
+import { getCoilTagPrintType } from '@/views/wms/coil/js/coilPrint';
+import DragResizeBox from '@/components/DragResizeBox/index.vue';
+import ProcessFlow from '../components/ProcessFlow.vue';
+
+
 
 export default {
   name: "MaterialCoil",
@@ -513,8 +525,10 @@ export default {
     OuterTagPreview,
     AbnormalList,
     LogTable,
+    ProcessFlow,
+    DragResizeBox,
   },
-  dicts: ['product_coil_status', 'coil_material', 'coil_itemname', 'coil_manufacturer', 'coil_quality_status', 'warehouse_sync', 'coil_business_purpose'],
+  dicts: ['product_coil_status', 'coil_material', 'coil_itemname', 'coil_manufacturer', 'coil_quality_status', 'wms_next_warehouse', 'coil_business_purpose'],
   props: {
     qrcode: {
       type: Boolean,
@@ -615,6 +629,7 @@ export default {
     return {
       // 按钮loading
       buttonLoading: false,
+      showProcessFlow: false,
       // 遮罩层
       loading: true,
       // 追溯加载中
@@ -821,6 +836,10 @@ export default {
       this.currentCoilId = row.coilId;
       this.logOpen = true;
     },
+    // 处理大小变化事件
+    resizeChart() {
+      this.$refs.processFlow.resizeChart();
+    },
     // 获取用户列表
     getUserList() {
       listUser({ pageNum: 1, pageSize: 1000 }).then(res => {