Merge branch 'feat/device-ota-package' into 'main_dev'

feat: 设备编辑时新增ota升级包

See merge request yunteng/thingskit-front!1220

@@ -6,6 +6,7 @@ import {
   GetDeviceProfileInfosParams,
   GetOtaPackagesParams,
   OtaRecordDatum,
+  QueryDeviceProfileOtaPackagesType,
   TBResponse,
   UploadOtaPackagesParams,
 } from './model';
@@ -137,3 +138,18 @@ export const getDeviceProfileInfoById = (id: string) => {
     { joinPrefix: false }
   );
 };
+
+export const getDeviceProfileOtaPackages = (params: QueryDeviceProfileOtaPackagesType) => {
+  const { deviceProfileId, type, page, pageSize, textSearch } = params;
+  return defHttp.get<TBResponse<OtaRecordDatum>>(
+    {
+      url: `${Api.GET_OTA_PACKAGES}/${deviceProfileId}/${type}`,
+      params: {
+        page,
+        pageSize,
+        textSearch,
+      },
+    },
+    { joinPrefix: false }
+  );
+};

+import { OTAPackageType } from '/@/enums/otaEnum';
 import { ALG, CheckSumWay } from '/@/views/operation/ota/config/packageDetail.config';
+import { OrderByEnum } from '/@/views/rule/designer/enum/form';
 
 export interface GetOtaPackagesParams {
   pageSize: number;
@@ -105,3 +107,13 @@ export interface DeviceProfileRecord {
   type: string;
   transportType: string;
 }
+
+export interface QueryDeviceProfileOtaPackagesType {
+  deviceProfileId: string;
+  type: OTAPackageType;
+  page: number;
+  pageSize: number;
+  textSearch?: string;
+  sortProperty?: string;
+  sortOrder?: OrderByEnum;
+}

+<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>

+export enum OTAPackageType {
+  FIRMWARE = 'FIRMWARE',
+  SOFTWARE = 'SOFTWARE',
+}

@@ -13,11 +13,16 @@ 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';
 
 useComponentRegister('JSONEditor', JSONEditor);
 useComponentRegister('LockControlGroup', LockControlGroup);
 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
 useComponentRegister('HexInput', HexInput);
+useComponentRegister('ApiQuerySelect', ApiQuerySelectVue);
 
 export enum TypeEnum {
   IS_GATEWAY = 'GATEWAY',
@@ -115,6 +120,7 @@ export const step1Schemas: FormSchema[] = [
     component: 'Input',
     show: false,
   },
+
   {
     field: 'profileId',
     label: '所属产品',
@@ -156,7 +162,6 @@ export const step1Schemas: FormSchema[] = [
             const { profileId } = formModel;
             if (profileId) {
               const selectRecord = options.find((item) => item.value === profileId);
-
               selectRecord &&
                 setFieldsValue({
                   transportType: selectRecord!.transportType,
@@ -373,6 +378,65 @@ export const step1Schemas: FormSchema[] = [
     component: 'Input',
     slot: 'deviceAddress',
   },
+
+  {
+    field: 'firmwareId',
+    label: '分配的固件',
+    component: 'ApiQuerySelect',
+    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: 'ApiQuerySelect',
+    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 };
+        },
+      };
+    },
+  },
   {
     field: 'description',
     label: '备注',

@@ -405,7 +405,6 @@
             icon: [{ uid: buildUUID(), name: 'name', url: deviceInfo.avatar } as FileItem],
           });
         }
-
         setFieldsValue({
           ...data,
           code: data?.code,