feat: 产品编辑时新增ota升级包配置&&变更ApiSearchSelect组件用法

@@ -17,7 +17,7 @@ enum Api {
   CREATE_OTA_PACKAGES = '/otaPackage',
   UPLOAD_OTA_PACKAGES = '/otaPackage',
   DELETE_OTA_PACKAGES = '/otaPackage',
-  GET_DEVICE_PROFILE_INFO_DEFAULT = '/deviceProfileInfo/default',
+  GET_DEVICE_PROFILE_INFO_DEFAULT = '/deviceProfileInfo',
   GET_OTA_PACKAGE_INFO = '/otaPackage/info',
   DOWNLOAD_PACKAGE = '/otaPackage',
 
@@ -75,13 +75,13 @@ export const uploadOtaPackages = (params: UploadOtaPackagesParams) => {
 };
 
 /**
- * @description 获取设备默认信息
+ * @description 获取设备信息
  * @returns
  */
-export const getDefaultDeviceProfile = () => {
+export const getDeviceProfileInfo = (id: string) => {
   return defHttp.get<DefaultDeviceProfileInfo>(
     {
-      url: Api.GET_DEVICE_PROFILE_INFO_DEFAULT,
+      url: `${Api.GET_DEVICE_PROFILE_INFO_DEFAULT}/${id}`,
     },
     {
       joinPrefix: false,

@@ -88,6 +88,7 @@ export interface CreateOtaPackageParams {
   type: string;
   deviceProfileId: IdRecord;
   isURL: boolean;
+  url: Nullable<string>;
   additionalInfo: AdditionalInfo;
 }
 

-<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, Ref } from 'vue';
-  import { Select } from 'ant-design-vue';
-  import { isFunction } from '/@/utils/is';
-  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
-  import { get, omit } from 'lodash-es';
-  import { LoadingOutlined } from '@ant-design/icons-vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { useDebounceFn } from '@vueuse/shared';
-
-  const emit = defineEmits(['options-change', 'change']);
-  const props = withDefaults(
-    defineProps<{
-      value?: Recordable | number | string;
-      numberToString?: boolean;
-      api?: (arg?: Recordable) => Promise<Recordable>;
-      queryApi?: (value?: any) => Promise<Recordable>;
-      params?: Recordable | ((searchText?: string) => Recordable);
-      resultField?: string;
-      labelField?: string;
-      valueField?: string;
-      immediate?: boolean;
-      queryEmptyDataAgin?: boolean;
-    }>(),
-    {
-      resultField: '',
-      labelField: 'label',
-      valueField: 'value',
-      searchField: 'text',
-      immediate: true,
-      queryEmptyDataAgin: true,
-    }
-  );
-
-  const selectOption = ref<OptionsItem>();
-  const options = ref<OptionsItem[]>([]);
-  const loading = ref(false);
-  const isFirstLoad = ref(true);
-  const emitData = ref<any[]>([]);
-  const { t } = useI18n();
-
-  // Embedded in the form, just use the hook binding to perform form verification
-  const [state] = useRuleFormItem(props, 'value', 'change', emitData);
-
-  const getOptions = computed(() => {
-    const { labelField, valueField = 'value', numberToString } = props;
-    const _options = unref(options);
-
-    if (
-      unref(selectOption) &&
-      !_options.find((item) => get(item, valueField) === get(unref(selectOption), valueField))
-    ) {
-      _options.push(unref(selectOption)!);
-    }
-    return _options.reduce((prev, next: Recordable) => {
-      if (next) {
-        const value = get(next, valueField);
-        const label = get(next, labelField);
-        prev.push({
-          ...omit(next, [labelField, valueField]),
-          label,
-          value: numberToString ? `${value}` : value,
-        });
-      }
-      return prev;
-    }, [] as OptionsItem[]);
-  });
-
-  watchEffect(() => {
-    props.immediate && fetch();
-  });
-
-  watch(
-    () => props.params,
-    () => {
-      !unref(isFirstLoad) && fetch();
-    },
-    { deep: true }
-  );
-
-  watch(
-    () => props.value,
-    async (target) => {
-      if (target && props.queryApi && isFunction(props.queryApi)) {
-        if (unref(getOptions).find((item) => item.value === target)) return;
-        const detail = await props.queryApi(target);
-        if (
-          unref(options).find(
-            (item) => get(item, props.valueField) === get(detail, props.valueField)
-          )
-        )
-          return;
-
-        selectOption.value = detail as OptionsItem;
-      }
-    },
-    {
-      immediate: true,
-    }
-  );
-
-  async function fetch(searchText?: string) {
-    const api = props.api;
-    if (!api || !isFunction(api)) return;
-    options.value = [];
-    try {
-      loading.value = true;
-      const params =
-        props.params && isFunction(props.params) ? props.params(searchText) : props.params;
-
-      const res = await api(params);
-
-      if (Array.isArray(res)) {
-        options.value = res;
-        emitChange();
-        return;
-      }
-
-      if (props.resultField) {
-        options.value = get(res, props.resultField) || [];
-      }
-      emitChange();
-    } catch (error) {
-      console.warn(error);
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  async function handleFetch() {
-    const { immediate } = props;
-    if (!immediate && unref(isFirstLoad)) {
-      await fetch();
-      isFirstLoad.value = false;
-    }
-  }
-
-  function emitChange() {
-    emit('options-change', unref(getOptions));
-  }
-
-  function handleChange(value: string, ...args) {
-    emitData.value = args;
-    if (!value && props.queryEmptyDataAgin) fetch();
-  }
-
-  const debounceSearchFunction = useDebounceFn(fetch, 300);
-</script>
-
-<template>
-  <Select
-    v-bind="$attrs"
-    show-search
-    @dropdownVisibleChange="handleFetch"
-    @change="handleChange"
-    :options="getOptions"
-    :filter-option="false"
-    @search="debounceSearchFunction"
-    v-model:value="state"
-  >
-    <template #[item]="data" v-for="item in Object.keys($slots)">
-      <slot :name="item" v-bind="data || {}"></slot>
-    </template>
-    <template #suffixIcon v-if="loading">
-      <LoadingOutlined spin />
-    </template>
-    <template #notFoundContent v-if="loading">
-      <span>
-        <LoadingOutlined spin class="mr-1" />
-        {{ t('component.form.apiSelectNotFound') }}
-      </span>
-    </template>
-  </Select>
-</template>

@@ -10,7 +10,6 @@
   import { Select } from 'ant-design-vue';
   import { isFunction } from '/@/utils/is';
   import { useRuleFormItem } from '/@/hooks/component/useFormItem';
-  import { useAttrs } from '/@/hooks/core/useAttrs';
   import { get, omit } from 'lodash-es';
   import { LoadingOutlined } from '@ant-design/icons-vue';
   import { useI18n } from '/@/hooks/web/useI18n';
@@ -21,17 +20,14 @@
     defineProps<{
       value?: Recordable | number | string;
       numberToString?: boolean;
-      api?: (arg?: Recordable) => Promise<OptionsItem[]>;
-      searchApi?: (arg?: Recordable) => Promise<OptionsItem[]>;
-      params?: Recordable;
+      api?: (arg?: Recordable) => Promise<Recordable>;
+      queryApi?: (value?: any) => Promise<Recordable>;
+      params?: Recordable | ((searchText?: string) => Recordable);
       resultField?: string;
       labelField?: string;
       valueField?: string;
       immediate?: boolean;
-      searchField?: string;
       queryEmptyDataAgin?: boolean;
-      onChangeHook?: ({ options }: OnChangeHookParams) => void;
-      dropdownVisibleChangeHook?: ({ options }: OnChangeHookParams) => void;
     }>(),
     {
       resultField: '',
@@ -42,11 +38,12 @@
       queryEmptyDataAgin: true,
     }
   );
+
+  const selectOption = ref<OptionsItem>();
   const options = ref<OptionsItem[]>([]);
   const loading = ref(false);
   const isFirstLoad = ref(true);
   const emitData = ref<any[]>([]);
-  const attrs = useAttrs();
   const { t } = useI18n();
 
   // Embedded in the form, just use the hook binding to perform form verification
@@ -54,7 +51,15 @@
 
   const getOptions = computed(() => {
     const { labelField, valueField = 'value', numberToString } = props;
-    return unref(options).reduce((prev, next: Recordable) => {
+    const _options = unref(options);
+
+    if (
+      unref(selectOption) &&
+      !_options.find((item) => get(item, valueField) === get(unref(selectOption), valueField))
+    ) {
+      _options.push(unref(selectOption)!);
+    }
+    return _options.reduce((prev, next: Recordable) => {
       if (next) {
         const value = get(next, valueField);
         const label = get(next, labelField);
@@ -68,15 +73,6 @@
     }, [] as OptionsItem[]);
   });
 
-  const getBindProps = computed(() => {
-    const { searchApi } = props;
-    return {
-      ...attrs,
-      showSearch: true,
-      filterOption: !searchApi,
-    };
-  });
-
   watchEffect(() => {
     props.immediate && fetch();
   });
@@ -89,18 +85,45 @@
     { deep: true }
   );
 
-  async function fetch() {
+  watch(
+    () => props.value,
+    async (target) => {
+      if (target && props.queryApi && isFunction(props.queryApi)) {
+        if (unref(getOptions).find((item) => item.value === target)) return;
+        const detail = await props.queryApi(target);
+        if (
+          !detail ||
+          unref(options).find(
+            (item) => get(item, props.valueField) === get(detail, props.valueField)
+          )
+        )
+          return;
+
+        selectOption.value = detail as OptionsItem;
+      }
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  async function fetch(searchText?: string) {
     const api = props.api;
     if (!api || !isFunction(api)) return;
     options.value = [];
     try {
       loading.value = true;
-      const res = await api(props.params);
+      const params =
+        props.params && isFunction(props.params) ? props.params(searchText) : props.params;
+
+      const res = await api(params);
+
       if (Array.isArray(res)) {
         options.value = res;
         emitChange();
         return;
       }
+
       if (props.resultField) {
         options.value = get(res, props.resultField) || [];
       }
@@ -113,14 +136,11 @@
   }
 
   async function handleFetch() {
-    const { immediate, dropdownVisibleChangeHook } = props;
+    const { immediate } = props;
     if (!immediate && unref(isFirstLoad)) {
       await fetch();
       isFirstLoad.value = false;
     }
-    if (dropdownVisibleChangeHook && isFunction(dropdownVisibleChangeHook)) {
-      dropdownVisibleChangeHook({ options });
-    }
   }
 
   function emitChange() {
@@ -129,47 +149,20 @@
 
   function handleChange(value: string, ...args) {
     emitData.value = args;
-    if (!value && props.queryEmptyDataAgin) handleSearch();
-    const { onChangeHook } = props;
-    if (!onChangeHook && !isFunction(onChangeHook)) return;
-    onChangeHook({ options });
+    if (!value && props.queryEmptyDataAgin) fetch();
   }
 
-  const debounceSearchFunction = useDebounceFn(handleSearch, 300);
-  async function handleSearch(params?: string) {
-    let { searchApi, api, searchField } = props;
-    if (!searchApi || !isFunction(searchApi)) {
-      if (!api || !isFunction(api)) return;
-      searchApi = api;
-    }
-    options.value = [];
-    try {
-      loading.value = true;
-      const res = await searchApi({ ...props.params, [searchField]: params });
-      if (Array.isArray(res)) {
-        options.value = res;
-        emitChange();
-        return;
-      }
-      if (props.resultField) {
-        options.value = get(res, props.resultField) || [];
-      }
-      emitChange();
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.warn(error);
-    } finally {
-      loading.value = false;
-    }
-  }
+  const debounceSearchFunction = useDebounceFn(fetch, 300);
 </script>
 
 <template>
   <Select
+    v-bind="$attrs"
+    show-search
     @dropdownVisibleChange="handleFetch"
-    v-bind="getBindProps"
     @change="handleChange"
     :options="getOptions"
+    :filter-option="false"
     @search="debounceSearchFunction"
     v-model:value="state"
   >

@@ -13,7 +13,6 @@ import { OrgTreeSelect } from '/@/views/common/OrgTreeSelect';
 import { TCPProtocolTypeEnum, TransportTypeEnum } from '/@/enums/deviceEnum';
 import { HexInput, InputTypeEnum } from '../../profiles/components/ObjectModelForm/HexInput';
 import { DeviceProfileDetail } from '/@/api/device/model/deviceConfigModel';
-import ApiQuerySelectVue from '/@/components/Form/src/components/ApiQuerySelect.vue';
 import { getDeviceProfileOtaPackages, getOtaPackageInfo } from '/@/api/ota';
 import { QueryDeviceProfileOtaPackagesType } from '/@/api/ota/model';
 import { OTAPackageType } from '/@/enums/otaEnum';
@@ -22,7 +21,6 @@ useComponentRegister('JSONEditor', JSONEditor);
 useComponentRegister('LockControlGroup', LockControlGroup);
 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
 useComponentRegister('HexInput', HexInput);
-useComponentRegister('ApiQuerySelect', ApiQuerySelectVue);
 
 export enum TypeEnum {
   IS_GATEWAY = 'GATEWAY',
@@ -382,7 +380,7 @@ export const step1Schemas: FormSchema[] = [
   {
     field: 'firmwareId',
     label: '分配的固件',
-    component: 'ApiQuerySelect',
+    component: 'ApiSearchSelect',
     ifShow: ({ model }) => model?.isUpdate,
     componentProps: ({ formModel }) => {
       return {
@@ -411,7 +409,7 @@ export const step1Schemas: FormSchema[] = [
   {
     field: 'softwareId',
     label: '分配的软件',
-    component: 'ApiQuerySelect',
+    component: 'ApiSearchSelect',
     ifShow: ({ model }) => model?.isUpdate,
     componentProps: ({ formModel }) => {
       return {

@@ -16,6 +16,9 @@ import { useMessage } from '/@/hooks/web/useMessage';
 import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
 import { createImgPreview } from '/@/components/Preview';
 import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
+import { getDeviceProfileOtaPackages, getOtaPackageInfo } from '/@/api/ota';
+import { QueryDeviceProfileOtaPackagesType } from '/@/api/ota/model';
+import { OTAPackageType } from '/@/enums/otaEnum';
 
 export enum Mode {
   CARD = 'card',
@@ -305,7 +308,78 @@ export const step1Schemas: FormSchema[] = [
       resultField: 'items',
     },
   },
-
+  {
+    field: 'isUpdate',
+    component: 'Switch',
+    label: '',
+    ifShow: false,
+  },
+  {
+    field: 'profileId',
+    component: 'Input',
+    label: '',
+    ifShow: false,
+  },
+  {
+    field: 'firmwareId',
+    label: '分配的固件',
+    component: 'ApiSearchSelect',
+    colProps: { span: 14 },
+    ifShow: ({ model }) => model?.isUpdate,
+    componentProps: ({ formModel }) => {
+      return {
+        placeholder: '请选择分配的固件',
+        api: async (params: QueryDeviceProfileOtaPackagesType) => {
+          if (!params.deviceProfileId) return [];
+          const result = await getDeviceProfileOtaPackages(params);
+          return result.data.map((item) => ({ label: item.title, value: item.id.id }));
+        },
+        params: (textSearch: string) => {
+          return {
+            textSearch,
+            page: 0,
+            type: OTAPackageType.FIRMWARE,
+            pageSize: 10,
+            deviceProfileId: formModel?.profileId,
+          };
+        },
+        queryApi: async (id: string) => {
+          const result = await getOtaPackageInfo(id);
+          return { label: result.title, value: result.id.id };
+        },
+      };
+    },
+  },
+  {
+    field: 'softwareId',
+    label: '分配的软件',
+    component: 'ApiSearchSelect',
+    colProps: { span: 14 },
+    ifShow: ({ model }) => model?.isUpdate,
+    componentProps: ({ formModel }) => {
+      return {
+        placeholder: '请选择分配的软件',
+        api: async (params: QueryDeviceProfileOtaPackagesType) => {
+          if (!params.deviceProfileId) return [];
+          const result = await getDeviceProfileOtaPackages(params);
+          return result.data.map((item) => ({ label: item.title, value: item.id.id }));
+        },
+        params: (textSearch: string) => {
+          return {
+            textSearch,
+            page: 0,
+            type: OTAPackageType.SOFTWARE,
+            pageSize: 10,
+            deviceProfileId: formModel?.profileId,
+          };
+        },
+        queryApi: async (id: string) => {
+          const result = await getOtaPackageInfo(id);
+          return { label: result.title, value: result.id.id };
+        },
+      };
+    },
+  },
   {
     label: '描述',
     field: 'description',

@@ -90,7 +90,12 @@
     // 不能把image字段回显进去，页面会显示大量警告
     const { image, ...params } = v;
     imageUrl.value = image;
-    setFieldsValue({ ...params, category: params?.categoryId ? 1 : 2 });
+    setFieldsValue({
+      ...params,
+      category: params?.categoryId ? 1 : 2,
+      isUpdate: true,
+      profileId: v?.tbProfileId,
+    });
   };
   //获取数据
   async function getFormData() {

@@ -55,9 +55,12 @@
     try {
       setLoading(true);
       const { id } = await createOtaPackage(value);
-      const { isURL } = value;
-      if (!isURL) {
+      const { url } = value;
+      if (!url) {
         await handleUploadFile(value, id.id);
+      } else {
+        closeModal();
+        emit('update:list');
       }
     } catch (error) {
     } finally {
@@ -69,7 +72,10 @@
     try {
       await validate();
       const value = getFieldsValue();
-      value[PackageField.DEVICE_PROFILE_INFO] = JSON.parse(value[PackageField.DEVICE_PROFILE_INFO]);
+      value[PackageField.DEVICE_PROFILE_INFO] = {
+        id: value[PackageField.DEVICE_PROFILE_INFO],
+        entityType: 'DEVICE_PROFILE',
+      };
       value[PackageField.ADDITIONAL_INFO] = {
         [PackageField.DESCRIPTION]: value[PackageField.DESCRIPTION],
       };

-import { getDefaultDeviceProfile, getDeviceProfileInfos } from '/@/api/ota';
-import { Id } from '/@/api/ota/model';
+import { getDeviceProfileInfo, getDeviceProfileInfos } from '/@/api/ota';
+
 import { FormSchema } from '/@/components/Form';
 import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
 
@@ -109,29 +109,36 @@ export const formSchema: FormSchema[] = [
     label: '所属产品',
     component: 'ApiSearchSelect',
     helpMessage: ['上传的包仅适用于具有所选配置文件的设备'],
-    defaultValue: 'default',
     rules: [{ required: true, message: '所属产品为必填项' }],
-    componentProps: ({ formActionType }) => {
-      const { setFieldsValue } = formActionType;
+    defaultValue: 'default',
+    componentProps: ({ formModel, formActionType }) => {
       return {
         placeholder: '请选择所属产品',
         showSearch: true,
-        resultField: 'data',
         labelField: 'name',
         valueField: 'id',
-        api: async () => {
-          const data = await getDefaultDeviceProfile();
-          data.id = JSON.stringify(data.id) as unknown as Id;
-          setFieldsValue({ [PackageField.DEVICE_PROFILE_INFO]: data.id });
-          return { data: [data] };
-        },
-        searchApi: async (params: Recordable) => {
-          const data = await getDeviceProfileInfos({ textSearch: params.text });
-          data.data = data.data.map((item) => ({
+        api: async (params: Recordable) => {
+          const data = await getDeviceProfileInfos(params);
+          return data.data.map((item) => ({
             ...item,
-            id: JSON.stringify(item.id) as unknown as Id,
+            id: item.id.id,
           }));
-          return data;
+        },
+        params: (textSearch: string) => {
+          return {
+            page: 0,
+            pageSize: 10,
+            textSearch,
+          };
+        },
+        queryApi: async (id = 'default') => {
+          const data = await getDeviceProfileInfo(id);
+
+          if (formModel[PackageField.DEVICE_PROFILE_INFO] === 'default' && id === 'default') {
+            formActionType.setFieldsValue({ [PackageField.DEVICE_PROFILE_INFO]: data.id.id });
+          }
+
+          return { ...data, id: data.id.id };
         },
       };
     },

@@ -17,21 +17,17 @@ const { t } = useI18n();
 
 import {
   getEntityDevice,
-  getEntityAssets,
-  getEntityViews,
   getEntityTenant,
   getEntityCustomer,
   getEntityUser,
-  getEntityDashboard,
-  getEntityEdge,
 } from '/@/api/ruleChainDesigner';
 import { useUserStore } from '/@/store/modules/user';
 
 export const getEntityIdSelect = (type: EntityTypeEnum) => {
   const method = {
     [EntityTypeEnum.DEVICE]: getEntityDevice,
-    [EntityTypeEnum.ASSET]: getEntityAssets,
-    [EntityTypeEnum.ENTITY_VIEW]: getEntityViews,
+    // [EntityTypeEnum.ASSET]: getEntityAssets,
+    // [EntityTypeEnum.ENTITY_VIEW]: getEntityViews,
     [EntityTypeEnum.TENANT]: async () => {
       const userInfo = useUserStore();
       const params = { tenantId: userInfo.getUserInfo.tenantId! };
@@ -40,8 +36,8 @@ export const getEntityIdSelect = (type: EntityTypeEnum) => {
     },
     [EntityTypeEnum.CUSTOMER]: getEntityCustomer,
     [EntityTypeEnum.USER]: getEntityUser,
-    [EntityTypeEnum.DASHBOARD]: getEntityDashboard,
-    [EntityTypeEnum.EDGE]: getEntityEdge,
+    // [EntityTypeEnum.DASHBOARD]: getEntityDashboard,
+    // [EntityTypeEnum.EDGE]: getEntityEdge,
   };
 
   const params: Recordable = {

 import { RouteLocationNormalizedLoaded } from 'vue-router';
 import { RuleChainFieldsEnum, RuleChainFieldsNameEnum } from '../../../enum/formField/flow';
-import { getRuleChains } from '/@/api/ruleDesigner';
+import { getRuleChainDetail, getRuleChains } from '/@/api/ruleDesigner';
 import { FormSchema } from '/@/components/Form';
 import { useI18n } from '/@/hooks/web/useI18n';
 
@@ -31,13 +31,20 @@ export const getFormSchemas = (route: RouteLocationNormalizedLoaded): FormSchema
         return {
           placeholder: '请选择规则链',
           showSearch: true,
-          params: {
-            pageSize: 50,
-            page: 0,
-            type: 'CORE',
+          params: (textSearch: string) => {
+            return {
+              pageSize: 10,
+              page: 0,
+              type: 'CORE',
+              textSearch,
+            };
           },
           api: (params: Recordable) => fetch(params, ruleChainId),
-          searchApi: (params: Recordable) => fetch(params, ruleChainId),
+          queryApi: async (id: string) => {
+            if (!id) return;
+            const data = await getRuleChainDetail(id);
+            return { label: data.name, value: data.id.id };
+          },
           getPopupContainer: () => document.body,
         };
       },