feat(组件): 新增多选组件并优化钢卷选择器

新增MutiSelect多选组件，支持逗号分隔字符串绑定优化CoilSelector组件，使用MutiSelect替换输入框并新增规格字段移除多处钢种字段显示及输入增强CoilNo组件，支持悬停显示钢卷详细信息在收货详情页添加删除按钮功能
2025-12-15 11:05:27 +08:00
parent 1cf1b23ca2
commit d90f72c662
9 changed files with 202 additions and 54 deletions
--- a/klp-ui/src/components/CoilSelector/index.vue
+++ b/klp-ui/src/components/CoilSelector/index.vue
@@ -23,17 +23,18 @@
          <el-input v-model="queryParams.currentCoilNo" placeholder="请输入卷号" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
-        <el-form-item label="钢种">
-          <el-input v-model="queryParams.itemName" placeholder="请输入钢种" clearable size="small"
+        <el-form-item label="物料">
+          <muti-select v-model="queryParams.itemName" :options="dict.type.coil_itemname" placeholder="请选择物料" clearable />
+        </el-form-item>
+        <el-form-item label="规格">
+          <memo-input storageKey="coilSpec" v-model="queryParams.specification" placeholder="请输入规格" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="材质">
-          <el-input v-model="queryParams.itemMaterial" placeholder="请输入材质" clearable size="small"
-            @keyup.enter.native="handleQuery" />
+          <muti-select v-model="queryParams.itemMaterial" :options="dict.type.coil_material" placeholder="请选择材质" clearable />
        </el-form-item>
        <el-form-item label="厂家">
-          <el-input v-model="queryParams.itemManufacturer" placeholder="请输入厂家" clearable size="small"
-            @keyup.enter.native="handleQuery" />
+          <muti-select v-model="queryParams.itemManufacturer" :options="dict.type.coil_manufacturer" placeholder="请选择厂家" clearable />
        </el-form-item>
        
        <el-form-item>
@@ -68,9 +69,16 @@

 <script>
 import { listMaterialCoil } from '@/api/wms/coil';
+import MemoInput from '@/components/MemoInput/index.vue';
+import MutiSelect from '@/components/MutiSelect/index.vue';

 export default {
  name: 'CoilSelector',
+  components: {
+    MemoInput,
+    MutiSelect
+  },
+  dicts: ['coil_itemname', 'coil_material', 'coil_manufacturer'],
  props: {
    // 非触发器模式下，外部控制显隐（触发器模式下无效）
    visible: {
--- a/klp-ui/src/components/KLPService/Renderer/CoilNo.vue
+++ b/klp-ui/src/components/KLPService/Renderer/CoilNo.vue
@@ -1,22 +1,104 @@
 <template>
  <div :class="{'g-coil-no': isGCoilNo}">
-    <el-tag type="info" size="small">{{ coilNo }}</el-tag>
+    <!-- 有coilId时显示popover，无则只显示标签 -->
+    <el-popover
+      v-if="coilId"
+      placement="left"
+      width="200"
+      trigger="hover"
+    >
+      <div class="coil-info">
+        <div class="info-item">
+          <span class="label">物料名称：</span>
+          <span class="value">{{ itemName }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">材质：</span>
+          <span class="value">{{ material }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">生产厂家：</span>
+          <span class="value">{{ manufacturer }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">规格：</span>
+          <span class="value">
+            {{ specification }}
+          </span>
+        </div>
+      </div>
+      
+      <el-tag type="info" size="small" slot="reference">{{ coilNo }}</el-tag>
+    </el-popover>
+
+    <!-- 无coilId时仅显示标签 -->
+    <el-tag v-else type="info" size="small">{{ coilNo }}</el-tag>
  </div>
 </template>

 <script>
+import { getMaterialCoil } from '@/api/wms/coil'
+
 export default {
  props: {
    coilNo: {
      type: String,
      default: ''
+    },
+    coilId: {
+      type: String,
+      default: ''
+    },
+  },
+  data() { // 修正：data应该是函数
+    return {
+      coilInfo: {}
    }
  },
  computed: {
    isGCoilNo() {
-      return this.coilNo.startsWith('G');
+      return this.coilNo && this.coilNo.startsWith('G');
+    },
+    specification() {
+      return this.coilInfo.product?.specification || this.coilInfo.rawMaterial?.specification || '-'
+    },
+    itemName() {
+      return this.coilInfo.product?.productName || this.coilInfo.rawMaterial?.rawMaterialName || '-'
+    },
+    material() {
+      return this.coilInfo.product?.material || this.coilInfo.rawMaterial?.material || '-'
+    },
+    manufacturer() {
+      return this.coilInfo.product?.manufacturer || this.coilInfo.rawMaterial?.manufacturer || '-'
+    },
+  },
+  methods: {
+    getCoilInfo() {
+      if (!this.coilId) {
+        return;
+      }
+      getMaterialCoil(this.coilId).then(res => {
+        this.coilInfo = res.data || {};
+      }).catch(err => {
+        console.error('获取钢卷信息失败：', err);
+        this.coilInfo = {};
+      })
    }
  },
+  mounted() {
+    // 组件挂载时获取线圈信息
+    this.getCoilInfo();
+  },
+  watch: {
+    // 监听coilId变化，重新获取信息
+    coilId(newVal) {
+      if (newVal) {
+        this.getCoilInfo();
+      } else {
+        this.coilInfo = {};
+      }
+    }
+  }
 }
 </script>

@@ -26,5 +108,33 @@ export default {
  display: inline-block; /* 让容器尺寸贴合内部el-tag */
  border: 2px solid #67c23a !important;
  border-radius: 4px; /* 可选：和el-tag圆角保持一致，更美观 */
+  padding: 1px; /* 调整内边距，避免边框和标签重叠 */
+}
+
+/* 弹窗信息样式 */
+.coil-info {
+  font-size: 12px;
+  line-height: 1.8;
+}
+
+.coil-info .info-item {
+  display: flex;
+  margin-bottom: 4px;
+}
+
+.coil-info .info-item:last-child {
+  margin-bottom: 0;
+}
+
+.coil-info .label {
+  color: #666;
+  width: 70px;
+  flex-shrink: 0;
+}
+
+.coil-info .value {
+  color: #333;
+  flex: 1;
+  word-break: break-all;
 }
 </style>
--- a/klp-ui/src/components/MutiSelect/index.vue
+++ b/klp-ui/src/components/MutiSelect/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <el-select v-model="innerValue" multiple placeholder="请选择" filterable clearable :allow-create="allowAdd">
+    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+  </el-select>
+</template>
+
+<!-- v-model上床绑定逗号分隔的字符串，可以props配置是否允许新增 -->
+<script>
+  export default {
+    name: 'MutiSelect',
+    props: {
+      value: {
+        type: String,
+        default: ''
+      },
+      options: {
+        type: Array,
+        default: () => []
+      },
+      allowAdd: {
+        type: Boolean,
+        default: false
+      }
+    },
+    // 计算属性捕获实现双向绑定
+    computed: {
+      innerValue: {
+        get() {
+          if (!this.value) {
+            return [];
+          }
+          return this.value.split(',');
+        },
+        set(val) {
+          this.$emit('input', val.join(','));
+        }
+      }
+    }
+  }
+</script>
--- a/klp-ui/src/utils/enum.js
+++ b/klp-ui/src/utils/enum.js
@@ -10,4 +10,5 @@ export const MemoInputStorageKey = {
  trimmingRequirement: 'trimmingRequirement', // 钢卷修剪要求
  packingStatus: 'packingStatus', // 打包状态
  packagingRequirement: 'packagingRequirement', // 打包要求
+  coilSpec: 'coilSpec', // 钢卷规格
 }
--- a/klp-ui/src/views/lines/panels/quality/components/DataCorrection.vue
+++ b/klp-ui/src/views/lines/panels/quality/components/DataCorrection.vue
@@ -72,12 +72,6 @@
          <el-input size="mini" v-model="formData.status"></el-input>
        </el-form-item>
      </el-col>
-      <!-- 钢种 -->
-      <el-col :span="8">
-        <el-form-item label="钢种" prop="steelGrade">
-          <el-input size="mini" v-model="formData.steelGrade"></el-input>
-        </el-form-item>
-      </el-col>
      <!-- 来料厚度 -->
      <el-col :span="8">
        <el-form-item label="来料厚度" prop="entryThick">
--- a/klp-ui/src/views/wms/coil/do/search.vue
+++ b/klp-ui/src/views/wms/coil/do/search.vue
@@ -161,10 +161,7 @@
                            <span class="param-label">规格：</span>
                            <span class="param-value">{{ item.rawMaterial.specification }}</span>
                          </div>
-                          <div class="param-row" v-if="item.rawMaterial.steelGrade">
-                            <span class="param-label">钢种：</span>
-                            <span class="param-value">{{ item.rawMaterial.steelGrade }}</span>
-                          </div>
+
                          <div class="param-row" v-if="item.rawMaterial.thickness">
                            <span class="param-label">厚度：</span>
                            <span class="param-value">{{ item.rawMaterial.thickness }}mm</span>
--- a/klp-ui/src/views/wms/coil/panels/base.vue
+++ b/klp-ui/src/views/wms/coil/panels/base.vue
@@ -21,17 +21,21 @@
      </el-form-item>

      <el-form-item label="产品名称" prop="itemName">
-        <el-input v-model="queryParams.itemName" placeholder="请输入产品名称" clearable
+        <muti-select v-model="queryParams.itemName" :options="dict.type.coil_itemname" placeholder="请选择物料" clearable />
+      </el-form-item>
+
+      <el-form-item label="规格" prop="itemSpecification">
+        <memo-input v-model="queryParams.itemSpecification" storageKey="coilSpec" placeholder="请选择规格" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="材质" prop="itemMaterial">
-        <el-input v-model="queryParams.itemMaterial" placeholder="请输入材质" clearable
+        <muti-select v-model="queryParams.itemMaterial" :options="dict.type.coil_material" placeholder="请选择材质" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="厂家" prop="itemManufacturer">
-        <el-input v-model="queryParams.itemManufacturer" placeholder="请输入厂家" clearable
+        <muti-select v-model="queryParams.itemManufacturer" :options="dict.type.coil_manufacturer" placeholder="请选择厂家" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>

@@ -251,6 +255,8 @@ import MaterialSelect from "@/components/KLPService/MaterialSelect";
 import ActualWarehouseSelect from "@/components/KLPService/ActualWarehouseSelect";
 import { findItemWithBom } from "@/store/modules/category";
 import CoilNo from "@/components/KLPService/Renderer/CoilNo.vue";
+import MemoInput from "@/components/MemoInput";
+import MutiSelect from "@/components/MutiSelect";


 export default {
@@ -267,9 +273,11 @@ export default {
    CoilTraceResult,
    LabelRender,
    ActualWarehouseSelect,
-    CoilNo
+    CoilNo,
+    MemoInput,
+    MutiSelect,
  },
-  dicts: ['product_coil_status'],
+  dicts: ['product_coil_status', 'coil_material', 'coil_itemname', 'coil_manufacturer'],
  props: {
    qrcode: {
      type: Boolean,
@@ -399,7 +407,8 @@ export default {
          { label: '质量状态', prop: 'qualityStatus' },
          { label: '打包状态', prop: 'packingStatus' },
          { label: '切边要求', prop: 'edgeRequirement' },
-          { label: '包装要求', prop: 'packagingRequirement' }
+          { label: '包装要求', prop: 'packagingRequirement' },
+          { label: '厂家', prop: 'itemManufacturer' }, 
        ],
        title: '详细信息'
      }
--- a/klp-ui/src/views/wms/delivery/components/coilsTranfer.vue
+++ b/klp-ui/src/views/wms/delivery/components/coilsTranfer.vue
@@ -9,10 +9,6 @@
          <el-input v-model="queryParams.currentCoilNo" placeholder="请输入卷号" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
-        <el-form-item label="钢种">
-          <el-input v-model="queryParams.grade" placeholder="请输入钢种" clearable size="small"
-            @keyup.enter.native="handleQuery" />
-        </el-form-item>
        <!-- 分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" />
--- a/klp-ui/src/views/wms/receive/detail/index.vue
+++ b/klp-ui/src/views/wms/receive/detail/index.vue
@@ -43,9 +43,9 @@
          </el-form>

          <el-table v-loading="loading" border :data="deliveryWaybillList" highlight-current-row>
-            <el-table-column label="钢卷号" align="center" prop="currentCoilNo" :show-overflow-tooltip="true">
+            <el-table-column label="钢卷号" align="center" prop="currentCoilNo">
              <template slot-scope="scope">
-                <CoilNo :coil-no="scope.row.currentCoilNo" />
+                <CoilNo :coil-no="scope.row.currentCoilNo" :coil-id="scope.row.coilId" />
                <!-- <el-tag type="info" size="small">{{ scope.row.currentCoilNo }}</el-tag> -->
              </template>
            </el-table-column>
@@ -86,16 +86,10 @@
              <template slot-scope="scope">
                <el-button v-if="scope.row.actionStatus == 0 || scope.row.actionStatus == 1" type="primary"
                  @click="openReceiptModal(scope.row)">签收</el-button>
+                  <el-button v-if="scope.row.actionStatus == 0 || scope.row.actionStatus == 1" type="danger"
+                  @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
-            <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-              <template slot-scope="scope">
-                <el-button size="mini" type="text" icon="el-icon-edit"
-                  @click.stop="handleUpdate(scope.row)">修改</el-button>
-                <el-button size="mini" type="text" icon="el-icon-delete"
-                  @click.stop="handleDelete(scope.row)">删除</el-button>
-              </template>
-            </el-table-column> -->
          </el-table>

          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
@@ -143,7 +137,7 @@

 <script>
 import { updateMaterialCoilSimple, getMaterialCoil } from '@/api/wms/coil'
-import { listPendingAction, updatePendingAction } from '@/api/wms/pendingAction'
+import { listPendingAction, updatePendingAction, delPendingAction } from '@/api/wms/pendingAction'
 import { listDeliveryPlan } from '@/api/wms/deliveryPlan'
 import MemoInput from "@/components/MemoInput";
 import ImportGuide from "@/views/wms/receive/components/ImportGuide.vue";
@@ -320,6 +314,20 @@ export default {
        // 转换为树形数据格式
        this.planTreeData = response.rows;
        this.planLoading = false;
+        // 后台加载每一条钢卷的明细
+      });
+    },
+
+    handleDelete(row) {
+      this.$modal.confirm("确认删除吗？", "删除确认", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        delPendingAction(row.actionId).then(response => {
+          this.$modal.msgSuccess("删除成功");
+          this.getList();
+        });
      });
    },

@@ -385,21 +393,6 @@ export default {
        }
      });
    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const waybillIds = row.waybillId || this.ids;
-      this.$modal.confirm('是否确认删除收货单编号为"' + waybillIds + '"的数据项？').then(() => {
-        this.loading = true;
-        return delDeliveryWaybill(waybillIds);
-      }).then(() => {
-        this.loading = false;
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {
-      }).finally(() => {
-        this.loading = false;
-      });
-    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('wms/deliveryWaybill/export', {