重构商品模块，支持多规格

src/components/SelectSpec/index.vue

@@ -1,58 +1,61 @@
-<!-- 选择下拉框 -->
 <template>
-  <a-select
-    :allow-clear="allowClear"
-    :show-search="showSearch"
-    optionFilterProp="label"
-    :options="specDict"
-    :value="value"
-    :placeholder="placeholder"
-    @update:value="updateValue"
-    :style="`width: ${width}px`"
-    @blur="onBlur"
-    @change="onChange"
-  />
+  <div>
+    <a-input-group compact>
+      <a-input
+        disabled
+        style="width: calc(100% - 32px)"
+        v-model:value="value"
+        :placeholder="placeholder"
+      />
+      <a-button @click="openEdit">
+        <template #icon><BulbOutlined class="ele-text-warning" /></template>
+      </a-button>
+    </a-input-group>
+    <!-- 选择弹窗 -->
+    <SelectData
+      v-model:visible="showEdit"
+      :data="current"
+      :title="placeholder"
+      :customer-type="customerType"
+      @done="onChange"
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>
+  import { BulbOutlined } from '@ant-design/icons-vue';
+  import { ref } from 'vue';
+  import SelectData from './components/select-data.vue';
   import { Spec } from '@/api/shop/spec/model';
 
-  const props = withDefaults(
+  withDefaults(
     defineProps<{
-      value?: string;
+      value?: any;
+      customerType?: string;
       placeholder?: string;
-      showSearch?: string;
-      allowClear?: boolean;
-      width?: number;
-      specDict?: Spec[];
-      index?: number;
     }>(),
     {
-      placeholder: '请选择服务器厂商'
+      placeholder: '请选择商户'
     }
   );
 
   const emit = defineEmits<{
-    (e: 'update:value', value: string): void;
-    (e: 'blur'): void;
-    (e: 'done', value: Spec, index: number): void;
+    (e: 'done', Merchant): void;
+    (e: 'clear'): void;
   }>();
 
-  /* 更新选中数据 */
-  const updateValue = (value: string) => {
-    emit('update:value', value);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 当前编辑数据
+  const current = ref<Spec | null>(null);
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Spec) => {
+    current.value = row ?? null;
+    showEdit.value = true;
   };
 
-  /* 失去焦点 */
-  const onBlur = () => {
-    emit('blur');
-  };
-
-  const onChange = (value: string) => {
-    props.specDict?.map((d) => {
-      if (d.value == value) {
-        emit('done', d, Number(props.index));
-      }
-    });
+  const onChange = (row) => {
+    emit('done', row);
   };
 </script>