|
|
@@ -1,39 +1,42 @@
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, type Ref, watch } from "vue";
|
|
|
+import { ref, type Ref } from "vue";
|
|
|
import { debounce } from "lodash";
|
|
|
+import { PlusOutlined } from '@ant-design/icons-vue';
|
|
|
+import * as companyService from "@/services/company.service";
|
|
|
+import type { SelectProps } from "ant-design-vue";
|
|
|
+import { CompLog } from "@/helpers/log.helper";
|
|
|
|
|
|
-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;
|
|
|
- });
|
|
|
+const name: Ref<string> = ref('');
|
|
|
+const companyId: Ref<number | null> = ref(null);
|
|
|
+
|
|
|
+const options = ref<SelectProps['options']>([]);
|
|
|
+
|
|
|
+const newName = ref('');
|
|
|
+
|
|
|
+const visible = ref(false);
|
|
|
+
|
|
|
+const fetchCompany = debounce((val) => {
|
|
|
+ companyService.query(val, 10).then((companies) => {
|
|
|
+ const data = companies.map((company) => ({ value: company.id, label: company.name }));
|
|
|
+ options.value = data;
|
|
|
+ }).catch(CompLog.logError);
|
|
|
}, 300);
|
|
|
|
|
|
-watch(value.value, () => {
|
|
|
- data.value = [];
|
|
|
- fetching.value = false;
|
|
|
-});
|
|
|
+function onFocus() {
|
|
|
+ fetchCompany(name.value);
|
|
|
+}
|
|
|
+
|
|
|
+function onChange(val: number) {
|
|
|
+ companyId.value = val;
|
|
|
+}
|
|
|
+
|
|
|
+function onModalOk() {
|
|
|
+ visible.value = false;
|
|
|
+ companyService.create(newName.value).then((company) => {
|
|
|
+ name.value = company.name;
|
|
|
+ companyId.value = company.id;
|
|
|
+ }).catch(CompLog.logError);
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
@@ -43,20 +46,27 @@ watch(value.value, () => {
|
|
|
</a-col>
|
|
|
<a-col flex="1">
|
|
|
<a-select
|
|
|
- v-model:value="value"
|
|
|
- mode="multiple"
|
|
|
- label-in-value
|
|
|
- placeholder="请输入企业名称"
|
|
|
+ v-model:value="name"
|
|
|
+ show-search
|
|
|
+ mode="combobox"
|
|
|
+ placeholder="input search text"
|
|
|
style="width: 100%"
|
|
|
+ :default-active-first-option="false"
|
|
|
+ :show-arrow="true"
|
|
|
:filter-option="false"
|
|
|
- :not-found-content="fetching ? undefined : null"
|
|
|
- :options="data"
|
|
|
- @search="fetchUser"
|
|
|
+ :not-found-content="null"
|
|
|
+ :options="options"
|
|
|
+ @focus="onFocus"
|
|
|
+ @search="fetchCompany"
|
|
|
+ @change="onChange"
|
|
|
>
|
|
|
- <template v-if="fetching" #notFoundContent>
|
|
|
- <a-spin size="small" />
|
|
|
- </template>
|
|
|
</a-select>
|
|
|
</a-col>
|
|
|
+ <a-col>
|
|
|
+ <a-button @click="visible = true"><plus-outlined />新增企业</a-button>
|
|
|
+ </a-col>
|
|
|
</a-row>
|
|
|
+ <a-modal v-model:visible="visible" title="新增企业名称" @ok="onModalOk">
|
|
|
+ <p><a-input v-model:value="newName" placeholder="请输入新企业名称" /></p>
|
|
|
+ </a-modal>
|
|
|
</template>
|