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

- 为ProductSelect、MaterialSelect和RawMaterialSelect组件添加多选支持
- 优化el-select组件样式，调整高度和标签显示宽度
- 在QRCode组件中添加内容变化监听自动生成二维码
- 在标签预览组件中添加qrcodeRecordId字段
- 在基础面板中添加物料多选查询和状态筛选功能

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: {

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() {

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));
     }
   },