perf: visual board implement map component data source bind

ww
1 parent a27a5e41
Showing 2 changed files with 47 additions and 42 deletions
src/components/Form/src/components/ApiSearchSelect.vue
src/views/visual/board/detail/config/basicConfiguration.ts
--- a/src/components/Form/src/components/ApiSearchSelect.vue
View file @e6353bc
+++ b/src/components/Form/src/components/ApiSearchSelect.vue
View file @e6353bc
+<script lang="ts">
+  export type OptionsItem = { label: string; value: string; disabled?: boolean };
+  export interface OnChangeHookParams {
+    options: Ref<OptionsItem[]>;
+  }
+</script>
+
 <script lang="ts" setup>
-  import { ref, watchEffect, computed, unref, watch } from 'vue';
+  import { ref, watchEffect, computed, unref, watch, Ref } from 'vue';
   import { Select } from 'ant-design-vue';
   import { isFunction } from '/@/utils/is';
   import { useRuleFormItem } from '/@/hooks/component/useFormItem';
@@ -8,8 +15,6 @@
   import { LoadingOutlined } from '@ant-design/icons-vue';
   import { useI18n } from '/@/hooks/web/useI18n';
-  type OptionsItem = { label: string; value: string; disabled?: boolean };
-
   const emit = defineEmits(['options-change', 'change']);
   const props = withDefaults(
     defineProps<{
@@ -22,12 +27,16 @@
       labelField?: string;
       valueField?: string;
       immediate?: boolean;
+      queryEmptyDataAgin?: boolean;
+      onChangeHook?: ({ options }: OnChangeHookParams) => void;
+      dropdownVisibleChangeHook?: ({ options }: OnChangeHookParams) => void;
     }>(),
     {
       resultField: '',
       labelField: 'label',
       valueField: 'value',
       immediate: true,
+      queryEmptyDataAgin: true,
     }
   );
   const options = ref<OptionsItem[]>([]);
@@ -42,7 +51,6 @@
   const getOptions = computed(() => {
     const { labelField, valueField = 'value', numberToString } = props;
-
     return unref(options).reduce((prev, next: Recordable) => {
       if (next) {
         const value = next[valueField];
@@ -92,24 +100,34 @@
   }
   async function handleFetch() {
-    if (!props.immediate && unref(isFirstLoad)) {
+    const { immediate, dropdownVisibleChangeHook } = props;
+    if (!immediate && unref(isFirstLoad)) {
       await fetch();
       isFirstLoad.value = false;
     }
+    if (dropdownVisibleChangeHook && isFunction(dropdownVisibleChangeHook)) {
+      dropdownVisibleChangeHook({ options });
+    }
   }
   function emitChange() {
     emit('options-change', unref(getOptions));
   }
-  function handleChange(_, ...args) {
+  function handleChange(value: string, ...args) {
     emitData.value = args;
-    if (!_) handleSearch();
+    if (!value && props.queryEmptyDataAgin) handleSearch();
+    const { onChangeHook } = props;
+    if (!onChangeHook && !isFunction(onChangeHook)) return;
+    onChangeHook({ options });
   }
   async function handleSearch(params?: string) {
-    const searchApi = props.searchApi;
-    if (!searchApi || !isFunction(searchApi)) return;
+    let { searchApi, api } = props;
+    if (!searchApi || !isFunction(searchApi)) {
+      if (!api || !isFunction(api)) return;
+      searchApi = api;
+    }
     options.value = [];
     try {
       loading.value = true;
@@ -135,6 +153,7 @@
   <Select
     @dropdownVisibleChange="handleFetch"
     v-bind="attrs"
+    show-search
     @change="handleChange"
     :options="getOptions"
     @search="handleSearch"
--- a/src/views/visual/board/detail/config/basicConfiguration.ts
View file @e6353bc
+++ b/src/views/visual/board/detail/config/basicConfiguration.ts
View file @e6353bc
@@ -2,6 +2,8 @@ import { getAllDeviceByOrg, getDeviceAttributes, getGatewaySlaveDevice } from '/
 import { getOrganizationList } from '/@/api/system/system';
 import { FormSchema } from '/@/components/Form';
 import { copyTransFun } from '/@/utils/fnUtils';
+import { OnChangeHookParams } from '/@/components/Form/src/components/ApiSearchSelect.vue';
+import { unref } from 'vue';
 export enum BasicConfigField {
   NAME = 'name',
@@ -366,84 +368,68 @@ export const mapFormSchema: FormSchema[] = [
   },
   {
     field: DataSourceField.LONGITUDE_ATTRIBUTE,
-    component: 'ApiSelect',
+    component: 'ApiSearchSelect',
     label: '经度属性',
     colProps: { span: 8 },
     rules: [{ required: true, message: '属性为必填项' }],
-    componentProps({ formModel, formActionType }) {
-      const { updateSchema, setFieldsValue } = formActionType;
+    componentProps({ formModel }) {
       const organizationId = formModel[DataSourceField.ORIGINATION_ID];
       const isGatewayDevice = formModel[DataSourceField.IS_GATEWAY_DEVICE];
       const deviceId = formModel[DataSourceField.DEVICE_ID];
       const slaveDeviceId = formModel[DataSourceField.SLAVE_DEVICE_ID];
-
-      let attrs: Record<'label' | 'value', string>[] = [];
       return {
         api: async () => {
           if (organizationId && deviceId) {
             try {
               if (isGatewayDevice && slaveDeviceId) {
-                return (attrs = await getDeviceAttribute(slaveDeviceId));
+                return await getDeviceAttribute(slaveDeviceId);
               }
               if (!isGatewayDevice) {
-                return (attrs = await getDeviceAttribute(deviceId));
+                return await getDeviceAttribute(deviceId);
               }
             } catch (error) {}
           }
           return [];
         },
         placeholder: '请选择经度属性',
-        getPopupContainer: () => document.body,
-        onChange: (value: string) => {
-          if (!value) return;
-          setFieldsValue({ [DataSourceField.LATITUDE_ATTRIBUTE]: null });
-          updateSchema({
-            field: DataSourceField.LATITUDE_ATTRIBUTE,
-            componentProps: {
-              options: attrs.filter((item) => item.value !== value),
-            },
-          });
+        dropdownVisibleChangeHook: ({ options }: OnChangeHookParams) => {
+          options.value = unref(options).filter(
+            (item) => item.value !== formModel[DataSourceField.LATITUDE_ATTRIBUTE]
+          );
         },
+        getPopupContainer: () => document.body,
       };
     },
   },
   {
     field: DataSourceField.LATITUDE_ATTRIBUTE,
-    component: 'ApiSelect',
+    component: 'ApiSearchSelect',
     label: '纬度属性',
     colProps: { span: 8 },
     rules: [{ required: true, message: '属性为必填项' }],
-    componentProps({ formModel, formActionType }) {
-      const { updateSchema, setFieldsValue } = formActionType;
+    componentProps({ formModel }) {
       const organizationId = formModel[DataSourceField.ORIGINATION_ID];
       const isGatewayDevice = formModel[DataSourceField.IS_GATEWAY_DEVICE];
       const deviceId = formModel[DataSourceField.DEVICE_ID];
       const slaveDeviceId = formModel[DataSourceField.SLAVE_DEVICE_ID];
-      let attrs: Record<'label' | 'value', string>[] = [];
-
       return {
         api: async () => {
           if (organizationId && deviceId) {
             try {
               if (isGatewayDevice && slaveDeviceId) {
-                return (attrs = await getDeviceAttribute(slaveDeviceId));
+                return getDeviceAttribute(slaveDeviceId);
               }
               if (!isGatewayDevice) {
-                return (attrs = await getDeviceAttribute(deviceId));
+                return await getDeviceAttribute(deviceId);
               }
             } catch (error) {}
           }
           return [];
         },
-        onChange: (value: string) => {
-          if (!value) return;
-          setFieldsValue({ [DataSourceField.LONGITUDE_ATTRIBUTE]: null });
-          updateSchema({
-            field: DataSourceField.LATITUDE_ATTRIBUTE,
-            componentProps: {
-              options: attrs.filter((item) => item.value !== value),
-            },
-          });
+        dropdownVisibleChangeHook: ({ options }: OnChangeHookParams) => {
+          options.value = unref(options).filter(
+            (item) => item.value !== formModel[DataSourceField.LONGITUDE_ATTRIBUTE]
+          );
         },
         placeholder: '请选择纬度属性',
         getPopupContainer: () => document.body,