feat(组件): 增强物料选择组件功能并优化样式

- 为ProductSelect、MaterialSelect和RawMaterialSelect组件添加多选支持 - 优化el-select组件样式，调整高度和标签显示宽度 - 在QRCode组件中添加内容变化监听自动生成二维码 - 在标签预览组件中添加qrcodeRecordId字段 - 在基础面板中添加物料多选查询和状态筛选功能
2025-11-01 13:02:42 +08:00
parent 66b740288b
commit 6cb591a7ce
8 changed files with 98 additions and 23 deletions
--- a/klp-ui/src/assets/styles/element-ui.scss
+++ b/klp-ui/src/assets/styles/element-ui.scss
@@ -847,6 +847,13 @@ body {
 .el-select {
  .el-input__inner {
    border-radius: 0;
+    height: 24px !important;
+  }
+
+  .el-select__tags {
+    .el-tag {
+      max-width: 100px;
+    }
  }

  // 下拉面板
--- a/klp-ui/src/components/KLPService/MaterialSelect/index.vue
+++ b/klp-ui/src/components/KLPService/MaterialSelect/index.vue
@@ -1,14 +1,14 @@
 <template>
  <span>
-    <el-form-item label="物料类型">
+    <el-form-item label="物料类型" v-show="!hideType">
      <el-select v-model="_itemType" placeholder="请选择物料类型" clearable>
        <el-option v-for="dict in dict.type.stock_item_type" :key="dict.value" :label="dict.label" :value="dict.value" />
      </el-select>
    </el-form-item>
-    <el-form-item label="物料信息">
-      <ProductSelect v-if="_itemType === 'product'" v-model="_itemId" placeholder="请选择产品" @change="onItemChange" />
-      <SemiSelect v-else-if="_itemType === 'semi'" v-model="_itemId" placeholder="请选择半成品" @change="onItemChange" />
-      <RawMaterialSelect v-else-if="_itemType === 'raw_material'" v-model="_itemId" placeholder="请选择原材料" @change="onItemChange" />
+    <el-form-item label="产品类型">
+      <ProductSelect v-if="_itemType === 'product'" v-model="_itemId" placeholder="请选择产品" @change="onItemChange" :multiple="multiple" />
+      <SemiSelect v-else-if="_itemType === 'semi'" v-model="_itemId" placeholder="请选择半成品" @change="onItemChange" :multiple="multiple" />
+      <RawMaterialSelect v-else-if="_itemType === 'raw_material'" v-model="_itemId" placeholder="请选择原材料" @change="onItemChange" :multiple="multiple" /> 
      <el-input v-else disabled v-model="_itemId" placeholder="请先选择物料类型" :disabled="true" style="width: 100%;" />
    </el-form-item>
  </span>
@@ -32,9 +32,17 @@
        require: true
      },
      itemId: {
-        type: String,
+        type: [String, Array],
        require: true
-      }
+      },
+      hideType: {
+        type: Boolean,
+        default: false
+      },
+      multiple: {
+        default: false,
+        type: Boolean
+      },
    },
    // 计算属性劫持双向绑定的数据
    computed: {
--- a/klp-ui/src/components/KLPService/ProductSelect/index.vue
+++ b/klp-ui/src/components/KLPService/ProductSelect/index.vue
@@ -1,7 +1,7 @@
 <template>
  <span>
-    <el-select v-model="selected" :placeholder="placeholder" :disabled="disabled" filterable clearable
-      @change="onChange" :value-key="'productId'">
+    <el-select v-model="selected" :placeholder="placeholder" :disabled="disabled" filterable clearable size="mini"
+      @change="onChange" :value-key="'productId'" :multiple="multiple" collapse-tags>
      <template #empty>
        <el-button v-if="canAdd" @click="add" icon="el-icon-plus">未搜索到产品，点击添加</el-button>
        <div v-else style="padding: 10px;">未搜索到产品</div>
@@ -66,7 +66,7 @@ import BomPanel from '../BomPanel/index.vue';
 export default {
  name: 'ProductSelect',
  props: {
-    value: [String, null],
+    value: [String, null, Array],
    disabled: Boolean,
    placeholder: {
      type: String,
@@ -76,6 +76,10 @@ export default {
      default: false,
      type: Boolean
    },
+    multiple: {
+      default: false,
+      type: Boolean
+    }
  },
  components: {
    BomPanel
@@ -111,10 +115,24 @@ export default {
  },
  watch: {
    value(val) {
-      this.selected = val;
+      console.log(val, 'value');
+      if (!val) {
+        this.selected = [];
+        return;
+      }
+      if (this.multiple) {
+        this.selected = val.split(',') || undefined;
+      } else {
+        this.selected = val || undefined;
+      }
    },
    selected(val) {
-      this.$emit('input', val);
+      console.log(val, 'selected');
+      if (this.multiple) {
+        this.$emit('input', val.join(','));
+      } else {
+        this.$emit('input', val);
+      }
    }
  },
  created() {
--- a/klp-ui/src/components/KLPService/RawMaterialSelect/index.vue
+++ b/klp-ui/src/components/KLPService/RawMaterialSelect/index.vue
@@ -1,7 +1,7 @@
 <template>
  <span>
-    <el-select v-model="selected" :placeholder="placeholder" filterable clearable :loading="loading" size="large"
-      style="width: 100%" :value-key="'rawMaterialId'">
+    <el-select v-model="selected" :placeholder="placeholder" filterable clearable :loading="loading" size="mini"
+      style="width: 100%" :value-key="'rawMaterialId'" :multiple="multiple" collapse-tags>
      <template #empty>
        <el-button v-if="canAdd" @click="add" icon="el-icon-plus">未搜索到原材料，点击添加</el-button>
        <div v-else style="padding: 10px;">未搜索到原材料</div>
@@ -63,12 +63,11 @@
 import { mapGetters } from "vuex";
 import { addRawMaterial } from '@/api/wms/rawMaterial';
 import BomPanel from '../BomPanel/index.vue';
-import { findItemWithBom } from '@/api/wms/bom';

 export default {
  name: "RawMaterialSelect",
  props: {
-    value: [String, null],
+    value: [String, null, Array],
    placeholder: {
      type: String,
      default: "请选择原材料"
@@ -76,7 +75,11 @@ export default {
    canAdd: {
      type: Boolean,
      default: false
-    }
+    },
+    multiple: {
+      default: false,
+      type: Boolean
+    },
  },
  components: {
    BomPanel
@@ -113,10 +116,22 @@ export default {
  },
  watch: {
    value(val) {
-      this.selected = val;
+      if (!val) {
+        this.selected = [];
+        return;
+      }
+      if (this.multiple) {
+        this.selected = val.split(',') || undefined;
+      } else {
+        this.selected = val || undefined;
+      }
    },
    selected(val) {
-      this.$emit("input", val);
+      if (this.multiple) {
+        this.$emit("input", val.join(','));
+      } else {
+        this.$emit("input", val);
+      }
      this.$emit('change', this.rawMaterialList.find(p => p.rawMaterialId === val));
    }
  },
--- a/klp-ui/src/views/wms/coil/panels/LabelRender/OuterTagPreview.vue
+++ b/klp-ui/src/views/wms/coil/panels/LabelRender/OuterTagPreview.vue
@@ -142,7 +142,8 @@ export default {
        address: '唐山市滦州市茨榆坨工业区',
        englishAddress: 'Donghai special steel, ciyutuo Industrial Zone, Luanzhou, Tangshan, Hebei province, China.',
        tel: '0315-7560777',
-        timestamp: '2025.04.12 10:14'
+        timestamp: '2025.04.12 10:14',
+        qrcodeRecordId: '',
      })
    }
  },
--- a/klp-ui/src/views/wms/coil/panels/LabelRender/ProductionTagPreview.vue
+++ b/klp-ui/src/views/wms/coil/panels/LabelRender/ProductionTagPreview.vue
@@ -63,7 +63,8 @@ export default {
        material: '',
        nextProcess: '',
        productionTeam: '',
-        productionDate: ''
+        productionDate: '',
+        qrcodeRecordId: '',
      })
    }
  }
--- a/klp-ui/src/views/wms/coil/panels/base.vue
+++ b/klp-ui/src/views/wms/coil/panels/base.vue
@@ -22,10 +22,23 @@
        <el-input v-model="queryParams.supplierCoilNo" placeholder="请输入厂家原料卷号" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
+          <el-option v-for="item in dict.type.product_coil_status" :key="item.value" :value="parseInt(item.value)" :label="item.label" />
+        </el-select>
+      </el-form-item>
+
+      <MaterialSelect :hideType="true" :itemId.sync="queryParams.itemIds" :itemType.sync="queryParams.itemType" :multiple="true"/>
+
+      <el-form-item label="班组" prop="team">
+        <el-input v-model="queryParams.team" placeholder="请输入班组" clearable
+          @keyup.enter.native="handleQuery" />
+      </el-form-item>
      <el-form-item label="更新时间" prop="updateTime">
-        <el-date-picker v-model="queryParams.updateTime" type="daterange" value-format="yyyy-MM-dd HH:mm:ss"
+        <el-date-picker size="mini" v-model="queryParams.updateTime" type="daterange" value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
      </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>
@@ -186,6 +199,7 @@ import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
 // 引入封装的追溯结果组件
 import CoilTraceResult from "./CoilTraceResult.vue"; // 路径根据实际存放位置调整
 import LabelRender from './LabelRender/index.vue'
+import MaterialSelect from "@/components/KLPService/MaterialSelect";
 import { findItemWithBom } from "@/store/modules/category";

 export default {
@@ -193,7 +207,7 @@ export default {
  components: {
    WarehouseSelect,
    QRCode,
-    // MaterialSelect,
+    MaterialSelect,
    ProductSelect,
    RawMaterialSelect,
    ProductInfo,
@@ -265,6 +279,7 @@ export default {
        hasMergeSplit: undefined,
        parentCoilNos: undefined,
        itemId: undefined,
+        itemIds: undefined,
        status: undefined,
        updateTime: undefined,
        ...this.querys,
--- a/klp-ui/src/views/wms/print/components/QRCode.vue
+++ b/klp-ui/src/views/wms/print/components/QRCode.vue
@@ -22,6 +22,16 @@ export default {
      qrcode: null
    }
  },
+  watch: {
+    content: {
+      handler(newVal, oldVal) {
+        if (newVal !== oldVal) {
+          this.generateQRCode();
+        }
+      },
+      immediate: true
+    }
+  },
  mounted() {
    this.generateQRCode();
  },