|
|
@@ -0,0 +1,62 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, type Ref, watch } from "vue";
|
|
|
+import { debounce } from "lodash";
|
|
|
+
|
|
|
+let lastFetchId = 0;
|
|
|
+
|
|
|
+const data: Ref<string[]> = ref([]);
|
|
|
+const value: Ref<string[]> = ref([]);
|
|
|
+const fetching = ref(false);
|
|
|
+
|
|
|
+const fetchUser = debounce(value => {
|
|
|
+ console.log('fetching user', value);
|
|
|
+ lastFetchId += 1;
|
|
|
+ const fetchId = lastFetchId;
|
|
|
+ data.value = [];
|
|
|
+ fetching.value = true;
|
|
|
+ fetch('https://randomuser.me/api/?results=5')
|
|
|
+ .then(response => response.json())
|
|
|
+ .then(body => {
|
|
|
+ if (fetchId !== lastFetchId) {
|
|
|
+ // for fetch callback order
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const data = body.results.map((user: any) => ({
|
|
|
+ label: `${user.name.first} ${user.name.last}`,
|
|
|
+ value: user.login.username,
|
|
|
+ }));
|
|
|
+ data.value = data;
|
|
|
+ fetching.value = false;
|
|
|
+ });
|
|
|
+}, 300);
|
|
|
+
|
|
|
+watch(value.value, () => {
|
|
|
+ data.value = [];
|
|
|
+ fetching.value = false;
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <a-row type="flex" style="align-items: center">
|
|
|
+ <a-col style="width: 100px; text-align: right;">
|
|
|
+ 关联企业:
|
|
|
+ </a-col>
|
|
|
+ <a-col flex="1">
|
|
|
+ <a-select
|
|
|
+ v-model:value="value"
|
|
|
+ mode="multiple"
|
|
|
+ label-in-value
|
|
|
+ placeholder="请输入企业名称"
|
|
|
+ style="width: 100%"
|
|
|
+ :filter-option="false"
|
|
|
+ :not-found-content="fetching ? undefined : null"
|
|
|
+ :options="data"
|
|
|
+ @search="fetchUser"
|
|
|
+ >
|
|
|
+ <template v-if="fetching" #notFoundContent>
|
|
|
+ <a-spin size="small" />
|
|
|
+ </template>
|
|
|
+ </a-select>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+</template>
|