refactor(wms/mes/cost): 优化多页面表单与表格交互逻辑

1. 调整质检任务表单的任务类型与入场卷号展示顺序，根据任务类型动态显示入场卷号字段并优化校验规则 2. 替换wms报表页面的pendingAction接口为轻量版listLightPendingAction 3. 给成本综合页面的表格拖拽排序功能新增置于最上/最下按钮，完善拖拽交互与样式
2026-05-28 13:03:09 +08:00
parent 6de1bbfe0b
commit 4fcbf10afd
5 changed files with 48 additions and 23 deletions
--- a/klp-ui/src/components/KLPService/SchemeSelect/index.vue
+++ b/klp-ui/src/components/KLPService/SchemeSelect/index.vue
@@ -72,7 +72,7 @@
          </el-select>
        </el-form-item>
      </el-form>
-      <el-form :model="form" ref="taskForm" label-width="80px" size="small">
+      <el-form :model="form" ref="taskForm" label-width="80px" size="small" v-if="form.taskType === '产品检验'">
        <el-form-item label="入场卷号" prop="enterCoilNos" :rules="[{ required: true, message: '请输入入场卷号', trigger: 'blur' }]">
          <el-autocomplete
            v-model="form.enterCoilNos"
--- a/klp-ui/src/views/cost/comprehensive.vue
+++ b/klp-ui/src/views/cost/comprehensive.vue
@@ -66,7 +66,7 @@
            <el-button size="mini" plain @click="openCopyCfg">复制配置</el-button>
          </div>
        </div>
-        <el-table :data="allCols" border stripe size="mini" highlight-current-row @current-change="curIdx = allCols.indexOf($event)" @selection-change="selCol=$event">
+        <el-table :data="allCols" border stripe size="mini" highlight-current-row @dragover.native.prevent @drop.native="onNativeDrop" @current-change="curIdx = allCols.indexOf($event)" @selection-change="selCol=$event">
          <el-table-column type="selection" width="40" />
          <el-table-column label="序号" type="index" width="50" align="center" />
          <el-table-column label="类型" width="60" align="center">
@@ -90,17 +90,19 @@
          <el-table-column label="分班次" width="70" align="center">
            <template slot-scope="s"><el-checkbox v-model="s.row.isShift" /></template>
          </el-table-column>
-          <el-table-column label="操作" width="140" align="center">
+          <el-table-column label="操作" width="175" align="center">
            <template slot-scope="s">
-              <span style="display:inline-flex;align-items:center"
-                @dragover.prevent @dragenter.prevent
-                @drop.stop="onDragDrop(s.$index)">
-                <el-button size="mini" type="text" icon="el-icon-rank"
-                  style="cursor:grab;font-size:14px" title="拖拽排序"
-                  draggable="true"
-                  @dragstart.stop="dragIdx=s.$index" />
+              <span style="display:inline-flex;align-items:center">
+                <span class="drag-handle" title="拖拽排序"
+                  :draggable="true"
+                  @dragstart.stop="onDragStart(s.$index)"
+                  @dragend="onDragEnd">
+                  <i class="el-icon-rank" />
+                </span>
+                <el-button size="mini" type="text" icon="el-icon-d-arrow-left" :disabled="s.$index===0" title="置于最上" @click="moveColToEdge(s.$index,'top')" />
                <el-button size="mini" type="text" icon="el-icon-top" :disabled="s.$index===0" @click="moveCol(s.$index,-1)" />
                <el-button size="mini" type="text" icon="el-icon-bottom" :disabled="s.$index===allCols.length-1" @click="moveCol(s.$index,1)" />
+                <el-button size="mini" type="text" icon="el-icon-d-arrow-right" :disabled="s.$index===allCols.length-1" title="置于最下" @click="moveColToEdge(s.$index,'bottom')" />
                <el-button size="mini" type="text" icon="el-icon-delete" @click="allCols.splice(s.$index,1)" />
              </span>
            </template>
@@ -328,6 +330,21 @@ export default {
    /* column config */
    async openColCfg() { await this.loadItems(); await this.restoreAllCols(); this.colOpen = true },
    moveCol(idx, dir) { const arr = this.allCols; const t = idx + dir; if (t >= 0 && t < arr.length) { const item = arr.splice(idx, 1)[0]; arr.splice(t, 0, item) } },
+    moveColToEdge(idx, edge) { const arr = this.allCols; const item = arr.splice(idx, 1)[0]; edge === 'top' ? arr.unshift(item) : arr.push(item) },
+    onDragStart(idx) {
+      this.dragIdx = idx
+    },
+    onDragEnd() {
+      this.dragIdx = -1
+    },
+    onNativeDrop(e) {
+      if (this.dragIdx < 0) return
+      const tr = e.target.closest('tr')
+      if (!tr) return
+      const rows = Array.from(tr.parentElement.querySelectorAll('tr'))
+      const targetIdx = rows.indexOf(tr)
+      if (targetIdx >= 0) this.onDragDrop(targetIdx)
+    },
    onDragDrop(targetIdx) {
      if (this.dragIdx < 0 || targetIdx < 0 || this.dragIdx === targetIdx) return
      const arr = this.allCols
@@ -592,4 +609,7 @@ export default {
 .vars-tag:hover { opacity: 0.8; }
 .var-sys { background: #ecf5ff; border-color: #d9ecff; color: #409eff; }
 .var-mtr { background: #f0f9eb; border-color: #e1f3d8; color: #67c23a; }
+.drag-handle { cursor: grab; font-size: 14px; color: #909399; padding: 2px; display: inline-flex; align-items: center; }
+.drag-handle:active { cursor: grabbing; }
+.drag-handle:hover { color: #409eff; }
 </style>
--- a/klp-ui/src/views/mes/qc/inspection/task.vue
+++ b/klp-ui/src/views/mes/qc/inspection/task.vue
@@ -245,7 +245,13 @@
        <el-form-item label="任务编号" prop="taskCode">
          <el-input v-model="taskForm.taskCode" placeholder="请输入任务编号" />
        </el-form-item>
-        <el-form-item label="入场卷号" prop="enterCoilNos">
+        <el-form-item label="任务类型" prop="taskType">
+          <el-select v-model="taskForm.taskType" placeholder="请选择任务类型" clearable filterable allow-create>
+            <el-option label="内控检验" value="内控检验" />
+            <el-option label="产品检验" value="产品检验" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="入场卷号" prop="enterCoilNos" v-if="taskForm.taskType === '产品检验'">
          <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px;">
            <el-tag
              v-for="(coilNo, index) in selectedEnterCoilNos"
@@ -266,12 +272,6 @@
            @select="handleSelectEnterCoilNo"
          />
        </el-form-item>
-        <el-form-item label="任务类型" prop="taskType">
-          <el-select v-model="taskForm.taskType" placeholder="请选择任务类型" clearable filterable allow-create>
-            <el-option label="内控检验" value="内控检验" />
-            <el-option label="产品检验" value="产品检验" />
-          </el-select>
-        </el-form-item>
        <el-form-item label="所属单位" prop="belongCompany">
          <el-input v-model="taskForm.belongCompany" placeholder="请输入所属单位" />
        </el-form-item>
@@ -419,9 +419,9 @@ export default {
        result: undefined,
      },
      taskForm: {},
-      taskRules: {
+      taskRules: {},
+      baseTaskRules: {
        taskCode: [{ required: true, message: '请输入任务编号', trigger: 'blur' }],
-        enterCoilNos: [{ required: true, message: '请输入入场卷号', trigger: 'blur' }],
        taskType: [{ required: true, message: '请选择任务类型', trigger: 'change' }],
        belongCompany: [{ required: true, message: '请输入所属公司', trigger: 'blur' }],
        schemeName: [{ required: true, message: '请输入检验方案名称', trigger: 'blur' }],
@@ -474,6 +474,12 @@ export default {
    };
  },
  computed: {
+    taskRules() {
+      return {
+        ...this.baseTaskRules,
+        enterCoilNos: [{ required: this.taskForm.taskType === '产品检验', message: '请输入入场卷号', trigger: 'blur' }],
+      };
+    },
    itemReadonly() {
      if (!this.readonly) return false;
      const status = this.currentTask?.status;
--- a/klp-ui/src/views/wms/report/abnormal.vue
+++ b/klp-ui/src/views/wms/report/abnormal.vue
@@ -128,7 +128,7 @@
 <script>
 import { listCoilWithIds } from "@/api/wms/coil";
 import {
-  listPendingAction,
+  listLightPendingAction,
 } from '@/api/wms/pendingAction';
 import MemoInput from "@/components/MemoInput";
 import MutiSelect from "@/components/MutiSelect";
@@ -271,7 +271,7 @@ export default {
    },
    async getList() {
      this.loading = true;
-      const actions = await listPendingAction({ ...this.queryParams, actionTypes: this.actionTypes, actionStatus: 2 });
+      const actions = await listLightPendingAction({ ...this.queryParams, actionTypes: this.actionTypes, actionStatus: 2 });

      const outIds = actions.rows.map(item => item.processedCoilIds).join(',');

--- a/klp-ui/src/views/wms/report/template/action.vue
+++ b/klp-ui/src/views/wms/report/template/action.vue
@@ -325,7 +325,6 @@
 import { listCoilWithIds } from "@/api/wms/coil";
 import {
  listLightPendingAction,
-  listPendingAction,
 } from '@/api/wms/pendingAction';
 import MemoInput from "@/components/MemoInput";
 import MutiSelect from "@/components/MutiSelect";
@@ -763,7 +762,7 @@ export default {
          return item
        })

-        listPendingAction({
+        listLightPendingAction({
          actionStatus: 2,
          actionType: this.actionType,
          pageSize: 99999,