gaoluyang
2 天以前 b64a0deae5b5d33f9e20671a68936b27f0b9b00b
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<script lang="ts" setup>
import type { SelectValue } from 'ant-design-vue/es/select';
 
import type { WmsMerchantApi } from '#/api/wms/md/merchant';
 
import { computed, onMounted, ref, watch } from 'vue';
 
import {
  CustomerMerchantTypeList,
  SupplierMerchantTypeList,
} from '@vben/constants';
 
import { Select } from 'ant-design-vue';
 
import { getMerchantSimpleList } from '#/api/wms/md/merchant';
 
defineOptions({ name: 'WmsMerchantSelect', inheritAttrs: false });
 
const props = withDefaults(
  defineProps<{
    allowClear?: boolean;
    customer?: boolean;
    disabled?: boolean;
    modelValue?: number;
    placeholder?: string;
    supplier?: boolean;
  }>(),
  {
    allowClear: true,
    customer: false,
    disabled: false,
    modelValue: undefined,
    placeholder: '请选择往来企业',
    supplier: false,
  },
);
 
const emit = defineEmits<{
  change: [merchant: undefined | WmsMerchantApi.Merchant];
  'update:modelValue': [value: number | undefined];
}>();
 
const loading = ref(false);
const merchantList = ref<WmsMerchantApi.Merchant[]>([]);
 
const options = computed(() =>
  merchantList.value
    .filter((merchant) => merchant.id !== undefined)
    .map((merchant) => ({
      label: merchant.name,
      value: merchant.id,
    })),
);
 
/** 选中变化 */
function handleChange(value: SelectValue) {
  const merchantId = typeof value === 'number' ? value : undefined;
  emit('update:modelValue', merchantId);
  emit(
    'change',
    merchantList.value.find((merchant) => merchant.id === merchantId),
  );
}
 
/** 查询往来企业精简列表 */
async function getList() {
  let types: number[] | undefined;
  if (props.supplier) {
    types = SupplierMerchantTypeList;
  } else if (props.customer) {
    types = CustomerMerchantTypeList;
  }
  loading.value = true;
  try {
    merchantList.value = await getMerchantSimpleList(
      types ? { types } : undefined,
    );
  } finally {
    loading.value = false;
  }
}
 
watch(
  () => [props.supplier, props.customer],
  () => {
    getList();
  },
);
 
onMounted(() => {
  getList();
});
</script>
 
<template>
  <Select
    v-bind="$attrs"
    :allow-clear="allowClear"
    :disabled="disabled"
    :loading="loading"
    :options="options"
    :placeholder="placeholder"
    :value="modelValue"
    class="w-full"
    option-filter-prop="label"
    show-search
    @change="handleChange"
  />
</template>