优化网站导航模块

modules/views/bak/account/components/merchant-select.vue

@@ -0,0 +1,73 @@
+<!-- 角色选择下拉框 -->
+<template>
+  <a-select
+    allow-clear
+    mode="multiple"
+    :value="merchantIds"
+    :placeholder="placeholder"
+    @update:value="updateValue"
+    @blur="onBlur"
+  >
+    <a-select-option
+      v-for="item in data"
+      :key="item.merchantId"
+      :value="item.merchantId"
+    >
+      {{ item.merchantName }}
+    </a-select-option>
+  </a-select>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import { Merchant } from '@/api/shop/merchant/model';
+  import { listMerchant } from '@/api/shop/merchant';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: Merchant[]): void;
+    (e: 'blur'): void;
+  }>();
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的商户
+      value?: Merchant[];
+      //
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择场馆'
+    }
+  );
+
+  // 选中的角色id
+  const merchantIds = computed(() =>
+    props.value?.map((d) => d.merchantId as number)
+  );
+
+  // 角色数据
+  const data = ref<Merchant[]>([]);
+
+  /* 更新选中数据 */
+  const updateValue = (value: number[]) => {
+    emit(
+      'update:value',
+      value.map((v) => ({ merchantId: v }))
+    );
+  };
+
+  /* 获取角色数据 */
+  listMerchant({})
+    .then((list) => {
+      data.value = list;
+    })
+    .catch((e) => {
+      message.error(e.message);
+    });
+
+  /* 失去焦点 */
+  const onBlur = () => {
+    emit('blur');
+  };
+</script>