feat: basic implement operation/ota page

+import {
+  CreateOtaPackageParams,
+  DefaultDeviceProfileInfo,
+  DeviceProfileRecord,
+  GetDeviceProfileInfosParams,
+  GetOtaPackagesParams,
+  OtaRecordDatum,
+  TBResponse,
+  UploadOtaPackagesParams,
+} from './model';
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  GET_OTA_PACKAGES = '/otaPackages',
+  CREATE_OTA_PACKAGES = '/otaPackage',
+  UPLOAD_OTA_PACKAGES = '/otaPackage',
+  DELETE_OTA_PACKAGES = '/otaPackage',
+  GET_DEVICE_PROFILE_INFO_DEFAULT = '/deviceProfileInfo/default',
+  GET_OTA_PACKAGE_INFO = '/otaPackage/info',
+  DOWNLOAD_PACKAGE = '/otaPackage',
+
+  GET_DEVICE_PROFILE_INFO_BY_ID = '/deviceProfileInfo',
+  GET_DEVICE_PROFILE_INFOS = '/deviceProfileInfos',
+}
+
+/**
+ * @description 获取ota包列表
+ * @param params
+ * @returns
+ */
+export const getOtaPackagesList = (params: GetOtaPackagesParams) => {
+  return defHttp.get<TBResponse<OtaRecordDatum>>(
+    {
+      url: Api.GET_OTA_PACKAGES,
+      params,
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};
+
+/**
+ * @description 创建ota包
+ * @param params
+ * @returns
+ */
+export const createOtaPackages = (params: CreateOtaPackageParams) => {
+  return defHttp.post<OtaRecordDatum>(
+    {
+      url: Api.CREATE_OTA_PACKAGES,
+      params,
+    },
+    { joinPrefix: false }
+  );
+};
+
+/**
+ * @description 上传ota包
+ * @param param
+ * @returns
+ */
+export const uploadOtaPackages = (params: UploadOtaPackagesParams) => {
+  return defHttp.post(
+    {
+      url: `${Api.UPLOAD_OTA_PACKAGES}/${params.otaPackageId}?checksumAlgorithm=${
+        params.checksumAlgorithm
+      }${params.checksum ? `&checksum=${params.checksum}` : ''}`,
+      params: params.file,
+    },
+    { joinPrefix: false }
+  );
+};
+
+/**
+ * @description 获取设备默认信息
+ * @returns
+ */
+export const getDevicePRofileInfo = () => {
+  return defHttp.get<DefaultDeviceProfileInfo>(
+    {
+      url: Api.GET_DEVICE_PROFILE_INFO_DEFAULT,
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};
+
+export const deleteOtaPackage = (id: string) => {
+  return defHttp.delete(
+    {
+      url: `${Api.DELETE_OTA_PACKAGES}/${id}`,
+    },
+    { joinPrefix: false }
+  );
+};
+
+export const getOtaPackageInfo = (id: string) => {
+  return defHttp.get<OtaRecordDatum>(
+    {
+      url: `${Api.GET_OTA_PACKAGE_INFO}/${id}`,
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};
+
+export const downloadPackage = (id: string) => {
+  return defHttp.get({ url: `${Api.DOWNLOAD_PACKAGE}/${id}/download` }, { joinPrefix: false });
+};
+
+export const getDeviceProfileInfos = (params: GetDeviceProfileInfosParams) => {
+  const { page = 0, pageSize = 10, sortOrder = 'ASC', sortProperty = 'name', textSearch } = params;
+  return defHttp.get<TBResponse<DeviceProfileRecord>>(
+    {
+      url: `${Api.GET_DEVICE_PROFILE_INFOS}`,
+      params: {
+        page,
+        pageSize,
+        sortOrder,
+        sortProperty,
+        textSearch,
+      },
+    },
+    { joinPrefix: false }
+  );
+};
+
+export const getDeviceProfileInfoById = (id: string) => {
+  return defHttp.get<DeviceProfileRecord>(
+    {
+      url: `${Api.GET_DEVICE_PROFILE_INFO_BY_ID}/${id}`,
+    },
+    { joinPrefix: false }
+  );
+};

+import { ALG, CheckSumWay } from '/@/views/operation/ota/config/packageDetail.config';
+
+export interface GetOtaPackagesParams {
+  pageSize: number;
+  page: number;
+  textSearch?: string;
+  title?: string;
+}
+
+export interface CreateOtaPackagesParams {
+  additionalInfo?: { description?: string };
+  checksum?: Nullable<number>;
+  checksumAlgorithm?: ALG;
+  deviceProfileId?: {
+    entityType?: string;
+    id?: string;
+  };
+  isURL: boolean;
+  tag?: string;
+  title?: string;
+  type?: CheckSumWay;
+  url?: string;
+  version?: string;
+}
+
+export interface UploadOtaPackagesParams {
+  otaPackageId?: string;
+  checksum?: string;
+  checksumAlgorithm?: ALG;
+  file?: FormData;
+}
+
+export interface Id {
+  entityType: string;
+  id: string;
+}
+
+export interface AdditionalInfo {
+  description: string;
+}
+
+export interface IdRecord {
+  entityType: string;
+  id: string;
+}
+
+export interface OtaRecordDatum {
+  id: Id;
+  createdTime: any;
+  additionalInfo: AdditionalInfo;
+  tenantId: IdRecord;
+  deviceProfileId: IdRecord;
+  type: string;
+  title: string;
+  version: string;
+  tag: string;
+  url: string;
+  hasData: boolean;
+  fileName: string;
+  contentType: string;
+  checksumAlgorithm: string;
+  checksum: string;
+  dataSize?: number;
+}
+
+export interface TBResponse<T> {
+  data: T[];
+  totalPages: number;
+  totalElements: number;
+  hasNext: boolean;
+}
+
+export interface DefaultDeviceProfileInfo {
+  id: {
+    entityType: string;
+    id: string;
+  };
+}
+
+export interface CreateOtaPackageParams {
+  title: string;
+  version: string;
+  tag: string;
+  type: string;
+  deviceProfileId: IdRecord;
+  isURL: boolean;
+  additionalInfo: AdditionalInfo;
+}
+
+export interface GetDeviceProfileInfosParams {
+  pageSize?: number;
+  page?: number;
+  textSearch?: string;
+  sortProperty?: string;
+  sortOrder?: 'ASC' | 'DESC';
+}
+
+export interface DeviceProfileRecord {
+  id: Id;
+  name: string;
+  image: string;
+  defaultDashboardId?: any;
+  type: string;
+  transportType: string;
+}

@@ -34,6 +34,7 @@ import { JEasyCron } from './externalCompns/components/JEasyCron';
 import ColorPicker from './components/ColorPicker.vue';
 import IconDrawer from './components/IconDrawer.vue';
 import ApiUpload from './components/ApiUpload.vue';
+import ApiSearchSelect from './components/ApiSearchSelect.vue';
 
 const componentMap = new Map<ComponentType, Component>();
 
@@ -75,6 +76,7 @@ componentMap.set('JEasyCron', JEasyCron);
 componentMap.set('ColorPicker', ColorPicker);
 componentMap.set('IconDrawer', IconDrawer);
 componentMap.set('ApiUpload', ApiUpload);
+componentMap.set('ApiSearchSelect', ApiSearchSelect);
 
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);

+<script lang="ts" setup>
+  import { ref, watchEffect, computed, unref, watch } from 'vue';
+  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';
+
+  type OptionsItem = { label: string; value: string; disabled?: boolean };
+
+  const emit = defineEmits(['options-change', 'change']);
+  const props = withDefaults(
+    defineProps<{
+      value?: Recordable | number | string;
+      numberToString?: boolean;
+      api?: (arg?: Recordable) => Promise<OptionsItem[]>;
+      searchApi?: (arg?: Recordable) => Promise<OptionsItem[]>;
+      params?: Recordable;
+      resultField?: string;
+      labelField?: string;
+      valueField?: string;
+      immediate?: boolean;
+    }>(),
+    {
+      resultField: '',
+      labelField: 'label',
+      value: 'value',
+      immediate: true,
+    }
+  );
+  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
+  const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+
+  const getOptions = computed(() => {
+    const { labelField, valueField = 'value', numberToString } = props;
+
+    return unref(options).reduce((prev, next: Recordable) => {
+      if (next) {
+        const value = next[valueField];
+        prev.push({
+          label: next[labelField],
+          value: numberToString ? `${value}` : value,
+          ...omit(next, [labelField, valueField]),
+        });
+      }
+      return prev;
+    }, [] as OptionsItem[]);
+  });
+
+  watchEffect(() => {
+    props.immediate && fetch();
+  });
+
+  watch(
+    () => props.params,
+    () => {
+      !unref(isFirstLoad) && fetch();
+    },
+    { deep: true }
+  );
+
+  async function fetch() {
+    const api = props.api;
+    if (!api || !isFunction(api)) return;
+    options.value = [];
+    try {
+      loading.value = true;
+      const res = await api(props.params);
+      if (Array.isArray(res)) {
+        options.value = res;
+        emitChange();
+        return;
+      }
+      if (props.resultField) {
+        options.value = get(res, props.resultField) || [];
+      }
+      console.log('fetch', unref(options));
+      emitChange();
+    } catch (error) {
+      console.warn(error);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function handleFetch() {
+    if (!props.immediate && unref(isFirstLoad)) {
+      await fetch();
+      isFirstLoad.value = false;
+    }
+  }
+
+  function emitChange() {
+    emit('options-change', unref(getOptions));
+  }
+
+  function handleChange(_, ...args) {
+    emitData.value = args;
+    if (!_) handleSearch();
+  }
+
+  async function handleSearch(params?: string) {
+    const searchApi = props.searchApi;
+    if (!searchApi || !isFunction(searchApi)) return;
+    options.value = [];
+    try {
+      loading.value = true;
+      const res = await searchApi({ ...props.params, text: 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;
+    }
+  }
+</script>
+
+<template>
+  <Select
+    @dropdownVisibleChange="handleFetch"
+    v-bind="attrs"
+    @change="handleChange"
+    :options="getOptions"
+    @search="handleSearch"
+    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>

@@ -115,4 +115,5 @@ export type ComponentType =
   | 'Rate'
   | 'ColorPicker'
   | 'IconDrawer'
-  | 'ApiUpload';
+  | 'ApiUpload'
+  | 'ApiSearchSelect';

 <script lang="ts" setup>
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { formSchema } from '../config/packageDetail.config';
-  defineEmits(['register']);
+  import { ALG, formSchema, PackageField } from '../config/packageDetail.config';
+  import { ref } from 'vue';
+  import { createOtaPackages, uploadOtaPackages, deleteOtaPackage } from '/@/api/ota';
+  import { CreateOtaPackageParams } from '/@/api/ota/model';
 
-  const [registerModal] = useModalInner((_record: Recordable) => {});
+  interface FieldsValue extends CreateOtaPackageParams {
+    fileList: { file: File }[];
+    checksum?: string;
+    checksumAlgorithm?: ALG;
+  }
 
-  const [registerForm] = useForm({
+  const emit = defineEmits(['register', 'update:list']);
+
+  const loading = ref(false);
+
+  const [registerModal, { changeLoading, closeModal }] = useModalInner();
+
+  const setLoading = (status: boolean) => {
+    changeLoading(status);
+    loading.value = status;
+  };
+
+  const [registerForm, { getFieldsValue, validate }] = useForm({
     schemas: formSchema,
     showActionButtonGroup: false,
     // labelCol: { span: 8 },
     labelWidth: 100,
     wrapperCol: { span: 16 },
   });
+
+  const handleUploadFile = async (value: FieldsValue, id: string) => {
+    try {
+      const file = new FormData();
+      file.append('file', value.fileList.at(0)!.file);
+      await uploadOtaPackages({
+        otaPackageId: id,
+        file,
+        checksumAlgorithm: value.checksumAlgorithm,
+      });
+    } catch (error) {
+      console.log(error);
+      if ((error as { status: number }).status) {
+        await deleteOtaPackage(id);
+      }
+    } finally {
+      closeModal();
+      emit('update:list');
+    }
+  };
+
+  const handleCreatePackages = async (value: FieldsValue) => {
+    try {
+      setLoading(true);
+      const { id } = await createOtaPackages(value);
+      const { isURL } = value;
+      if (!isURL) {
+        await handleUploadFile(value, id.id);
+      }
+    } catch (error) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = async () => {
+    try {
+      await validate();
+      const value = getFieldsValue();
+      value[PackageField.DEVICE_PROFILE_INFO] = JSON.parse(value[PackageField.DEVICE_PROFILE_INFO]);
+      value[PackageField.ADDITIONAL_INFO] = {
+        [PackageField.DESCRIPTION]: value[PackageField.DESCRIPTION],
+      };
+      handleCreatePackages(value as unknown as FieldsValue);
+    } catch (error) {
+      window.console.error(error);
+    }
+  };
 </script>
 
 <template>
-  <BasicModal title="包管理" @register="registerModal">
+  <BasicModal title="包管理" destroy-on-close @register="registerModal" @ok="handleSubmit">
     <BasicForm @register="registerForm" />
   </BasicModal>
 </template>

+<script lang="ts" setup>
+  import { OtaRecordDatum } from '/@/api/ota/model';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { Tabs, Space, Button } from 'ant-design-vue';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { formSchema } from '../config/packageDrawer.config';
+  import { ref, unref } from 'vue';
+  import { PackageField } from '../config/packageDetail.config';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { deleteOtaPackage, getDeviceProfileInfoById, getOtaPackageInfo } from '/@/api/ota';
+  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { useDownload } from '../hook/useDownload';
+
+  const emit = defineEmits(['register', 'update:list']);
+
+  const otaRecord = ref<OtaRecordDatum>({} as unknown as OtaRecordDatum);
+
+  const { createConfirm, createMessage } = useMessage();
+
+  const [registerForm, { setFieldsValue, getFieldsValue }] = useForm({
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    disabled: true,
+  });
+
+  const [register, { closeDrawer }] = useDrawerInner(async (id: string) => {
+    try {
+      const record = await getOtaPackageInfo(id);
+      const deviceInfo = await getDeviceProfileInfoById(record.deviceProfileId.id);
+      setFieldsValue({
+        ...record,
+        [PackageField.DESCRIPTION]: record.additionalInfo.description,
+        [PackageField.DEVICE_PROFILE_INFO]: deviceInfo.name,
+      });
+      otaRecord.value = record;
+    } catch (error) {}
+  });
+
+  const openDetailPage = () => {};
+
+  const downloadPackage = async () => {
+    await useDownload(unref(otaRecord));
+  };
+
+  const deletePackage = () => {
+    createConfirm({
+      iconType: 'warning',
+      content: '是否确认删除操作？',
+      onOk: async () => {
+        try {
+          await deleteOtaPackage(otaRecord.value.id.id);
+          closeDrawer();
+          emit('update:list');
+          createMessage.success('删除成功');
+        } catch (error) {}
+      },
+    });
+  };
+
+  const { clipboardRef, isSuccessRef } = useCopyToClipboard('');
+  const copyPackageId = () => {
+    clipboardRef.value = otaRecord.value.id.id;
+    if (unref(isSuccessRef)) createMessage.success('复制成功');
+  };
+
+  const copyUrl = () => {
+    if (!unref(otaRecord).url) {
+      createMessage.warning('无直接URL');
+      return;
+    }
+    clipboardRef.value = otaRecord.value.url;
+    if (unref(isSuccessRef)) createMessage.success('复制成功');
+  };
+
+  const handleSubmit = async () => {
+    getFieldsValue();
+  };
+</script>
+
+<template>
+  <BasicDrawer width="40%" class="relative" @register="register" @ok="handleSubmit">
+    <Tabs>
+      <Tabs.TabPane tab="详情" key="detail">
+        <Space>
+          <Button type="primary" @click="openDetailPage">打开详情页</Button>
+          <Button type="primary" @click="downloadPackage" :disabled="!!otaRecord.url">
+            下载包
+          </Button>
+          <Button type="primary" @click="deletePackage" danger>删除包</Button>
+        </Space>
+        <div class="mt-3">
+          <Space>
+            <Button type="primary" @click="copyPackageId">复制包ID</Button>
+            <Button type="primary" @click="copyUrl">复制直接URL</Button>
+          </Space>
+        </div>
+        <BasicForm @register="registerForm" />
+      </Tabs.TabPane>
+    </Tabs>
+    <div
+      class="absolute right-0 bottom-0 w-full border-t bg-light-50 border-t-gray-100 py-2 px-4 text-right"
+    >
+      <Button class="mr-2">取消</Button>
+      <Button type="primary">保存</Button>
+    </div>
+  </BasicDrawer>
+</template>

 import { BasicColumn, FormSchema } from '/@/components/Table';
-import { PackageField } from './packageDetail.config';
+import { PackageField, PackageType } from './packageDetail.config';
+import { dateUtil } from '/@/utils/dateUtil';
+import { DEFAULT_DATE_FORMAT } from '/@/views/visual/board/detail/config/util';
+
+export interface ModalPassRecord {
+  isUpdate: boolean;
+  record?: Recordable;
+}
+
 export const columns: BasicColumn[] = [
   {
     title: '创建时间',
     dataIndex: PackageField.CREATE_TIME,
+    format(text) {
+      return dateUtil(text).format(DEFAULT_DATE_FORMAT);
+    },
     width: 120,
   },
   {
@@ -18,29 +29,54 @@ export const columns: BasicColumn[] = [
   },
   {
     title: '版本标签',
-    dataIndex: PackageField.VERSION_LABEL,
+    dataIndex: PackageField.VERSION_TAG,
     width: 120,
   },
   {
     title: '包类型',
     dataIndex: PackageField.PACKAGE_TYPE,
+    format: (text) => {
+      return text === PackageType.FIRMWARE ? '固件' : '软件';
+    },
     width: 120,
   },
   {
     title: '直接URL',
-    dataIndex: PackageField.PACKAGE_EXTERNAL_URL,
+    dataIndex: PackageField.URL,
+    width: 120,
+  },
+  {
+    title: '文件名',
+    dataIndex: PackageField.FILE_NAME,
     width: 120,
   },
   {
     title: '文件大小',
     dataIndex: PackageField.FILE_SIZE,
+    format(text, record) {
+      return record[PackageField.FILE_SIZE]
+        ? `${Math.ceil(((text as unknown as number) / 1024) * 100) / 100}kb`
+        : '';
+    },
     width: 120,
   },
   {
     title: '校验和',
     dataIndex: PackageField.CHECK_SUM,
+    format(text, record) {
+      return text ? `${record[PackageField.CHECK_SUM_ALG]}: ${text.slice(0, 11)}` : '';
+    },
     width: 120,
   },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    flag: 'ACTION',
+    fixed: 'right',
+    slots: {
+      customRender: 'action',
+    },
+  },
 ];
 
 export const searchFormSchema: FormSchema[] = [

+import { getDevicePRofileInfo, getDeviceProfileInfos } from '/@/api/ota';
+import { Id } from '/@/api/ota/model';
 import { FormSchema } from '/@/components/Form';
+import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
 
 export enum PackageField {
   TITLE = 'title',
   VERSION = 'version',
-  VERSION_LABEL = 'versionLabel',
-  DEVICE_CONFIGURATION = 'deviceConfiguration',
-  PACKAGE_TYPE = 'packageType',
-  PACKAGE_UPDATE_TYPE = 'PackageUpdateType',
-  PACKAGE_BINARY_FILE = 'fileList',
-  PACKAGE_EXTERNAL_URL = 'packageEexternalUrl',
-  CHECK_SUM_WAY = 'checkSumWay',
-  ALG = 'alg',
-  CHECK_SUM = 'checkSum',
+  VERSION_TAG = 'tag',
+  PACKAGE_TYPE = 'type',
+  URL = 'url',
+  IS_URL = 'isUrl',
+  CHECK_SUM_ALG = 'checksumAlgorithm',
+  CHECK_SUM = 'checksum',
   DESCRIPTION = 'description',
+  DEVICE_PROFILE_INFO = 'deviceProfileId',
 
-  CREATE_TIME = 'createTIme',
-  FILE_SIZE = 'fileSize',
-}
+  CREATE_TIME = 'createdTime',
+  FILE_SIZE = 'dataSize',
+  FILE_NAME = 'fileName',
+  ADDITIONAL_INFO = 'additionalInfo',
+  FILE_TYPE = 'contentType',
 
-export enum PackageUpdateType {
-  BINARY_FILE = 'binaryFile',
-  EXTERNAL_URL = 'externalUrl',
+  PACKAGE_BINARY_FILE = 'fileList',
+  VALIDATE_WAY = 'validateWay',
 }
 
 export enum PackageType {
-  FIRMWARE = 'firmware',
-  SOFTWARE = 'software',
+  FIRMWARE = 'FIRMWARE',
+  SOFTWARE = 'SOFTWARE',
 }
 
 export enum CheckSumWay {
@@ -34,13 +36,13 @@ export enum CheckSumWay {
 }
 
 export enum ALG {
-  MD5 = 'md5',
-  SHA_256 = 'sha-256',
-  SHA_384 = 'sha-384',
-  SHA_512 = 'sha-512',
-  CRC_32 = 'crc-32',
-  MURMUR3_32 = 'murmur3-32',
-  MURMUR3_128 = 'murmur3-128',
+  MD5 = 'MD$',
+  SHA_256 = 'SHA256',
+  SHA_384 = 'SHA384',
+  SHA_512 = 'SHA512',
+  CRC_32 = 'CRC32',
+  MURMUR3_32 = 'MURMUR332',
+  MURMUR3_128 = 'MURMUR3128',
 }
 
 export const formSchema: FormSchema[] = [
@@ -63,25 +65,51 @@ export const formSchema: FormSchema[] = [
     },
   },
   {
-    field: PackageField.VERSION_LABEL,
+    field: PackageField.VERSION_TAG,
     label: '版本标签',
     component: 'Input',
     helpMessage: ['自定义标签应与您设备报告的软件包版本相匹配'],
-    componentProps: {
-      placeholder: '请输入版本标签',
+    componentProps: () => {
+      return {
+        placeholder: '请输入版本标签',
+      };
     },
   },
   {
-    field: PackageField.DEVICE_CONFIGURATION,
+    field: PackageField.DEVICE_PROFILE_INFO,
+    label: '',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: PackageField.DEVICE_PROFILE_INFO,
     label: '设备配置',
-    component: 'Select',
+    component: 'ApiSearchSelect',
     helpMessage: ['上传的包仅适用于具有所选配置文件的设备'],
     defaultValue: 'default',
     rules: [{ required: true, message: '设备配置为必填项' }],
-    componentProps: () => {
+    componentProps: ({ formActionType }) => {
+      const { setFieldsValue } = formActionType;
       return {
-        options: [{ label: 'default', value: 'default' }],
         placeholder: '请选择设备配置',
+        showSearch: true,
+        resultField: 'data',
+        labelField: 'name',
+        valueField: 'id',
+        api: async () => {
+          const data = await getDevicePRofileInfo();
+          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) => ({
+            ...item,
+            id: JSON.stringify(item.id) as unknown as Id,
+          }));
+          return data;
+        },
       };
     },
   },
@@ -103,15 +131,16 @@ export const formSchema: FormSchema[] = [
     },
   },
   {
-    field: PackageField.PACKAGE_UPDATE_TYPE,
+    field: PackageField.IS_URL,
     label: '上传方式',
     component: 'RadioGroup',
-    defaultValue: PackageUpdateType.BINARY_FILE,
+    defaultValue: false,
     componentProps: () => {
       return {
+        defaultValue: false,
         options: [
-          { label: '上传二进制文件', value: PackageUpdateType.BINARY_FILE },
-          { label: '使用外部URL', value: PackageUpdateType.EXTERNAL_URL },
+          { label: '上传二进制文件', value: false },
+          { label: '使用外部URL', value: true },
         ],
       };
     },
@@ -120,25 +149,25 @@ export const formSchema: FormSchema[] = [
     field: PackageField.PACKAGE_BINARY_FILE,
     label: '二进制文件',
     ifShow: ({ model }) => {
-      return model[PackageField.PACKAGE_UPDATE_TYPE] === PackageUpdateType.BINARY_FILE;
+      return !model[PackageField.IS_URL];
     },
     component: 'ApiUpload',
     valueField: PackageField.PACKAGE_BINARY_FILE,
     changeEvent: `update:${PackageField.PACKAGE_BINARY_FILE}`,
+    rules: [{ required: true, message: '请上传二进制文件', type: 'array' }],
     componentProps: {
       maxFileLimit: 1,
-      api: (_file: File) => {
-        console.log({ _file });
-        return { uid: _file.uid, name: _file.name };
+      api: (file: FileItem) => {
+        return { uid: file.uid, name: file.name, file };
       },
     },
   },
   {
-    field: PackageField.PACKAGE_EXTERNAL_URL,
+    field: PackageField.URL,
     label: '外部URL',
     component: 'Input',
     ifShow: ({ model }) => {
-      return model[PackageField.PACKAGE_UPDATE_TYPE] === PackageUpdateType.EXTERNAL_URL;
+      return model[PackageField.IS_URL];
     },
     rules: [{ required: true, message: '外部URL为必填项' }],
     componentProps: {
@@ -146,10 +175,13 @@ export const formSchema: FormSchema[] = [
     },
   },
   {
-    field: PackageField.CHECK_SUM_WAY,
+    field: PackageField.VALIDATE_WAY,
     label: '校验和方式',
     component: 'RadioGroup',
     defaultValue: CheckSumWay.AUTO,
+    ifShow: ({ model }) => {
+      return !model[PackageField.IS_URL];
+    },
     componentProps: () => {
       return {
         options: [
@@ -160,12 +192,13 @@ export const formSchema: FormSchema[] = [
     },
   },
   {
-    field: PackageField.ALG,
+    field: PackageField.CHECK_SUM_ALG,
     label: '校验和算法',
     component: 'Select',
     ifShow: ({ model }) => {
-      return model[PackageField.CHECK_SUM_WAY] === CheckSumWay.MANUAL;
+      return model[PackageField.VALIDATE_WAY] === CheckSumWay.MANUAL && !model[PackageField.IS_URL];
     },
+    defaultValue: ALG.SHA_256,
     componentProps: {
       placeholder: '请选择校验和算法',
       options: Object.keys(ALG).map((key) => {
@@ -181,7 +214,7 @@ export const formSchema: FormSchema[] = [
     label: '校验和',
     component: 'Input',
     ifShow: ({ model }) => {
-      return model[PackageField.CHECK_SUM_WAY] === CheckSumWay.MANUAL;
+      return model[PackageField.VALIDATE_WAY] === CheckSumWay.MANUAL && !model[PackageField.IS_URL];
     },
     helpMessage: ['如果校验和为空,会自动生成'],
     componentProps: {

+import { ALG, PackageField, PackageType } from './packageDetail.config';
+import { FormSchema } from '/@/components/Form';
+
+export const formSchema: FormSchema[] = [
+  {
+    field: PackageField.TITLE,
+    label: '标题',
+    component: 'Input',
+    colProps: { span: 12 },
+  },
+  {
+    field: PackageField.VERSION,
+    label: '版本',
+    component: 'Input',
+    colProps: { span: 12 },
+  },
+  {
+    field: PackageField.VERSION_TAG,
+    label: '版本标签',
+    component: 'Input',
+  },
+  {
+    field: PackageField.DEVICE_PROFILE_INFO,
+    label: '设备配置',
+    component: 'Input',
+  },
+  {
+    field: PackageField.PACKAGE_TYPE,
+    label: '包类型',
+    component: 'Select',
+    rules: [{ required: true, message: '包类型为必填项' }],
+    componentProps: () => {
+      return {
+        options: [
+          { label: '固件', value: PackageType.FIRMWARE },
+          { label: '软件', value: PackageType.SOFTWARE },
+        ],
+        placeholder: '请选择设备配置',
+      };
+    },
+  },
+  {
+    field: PackageField.URL,
+    label: '直接URL',
+    component: 'Input',
+    ifShow: ({ model }) => {
+      return model[PackageField.URL];
+    },
+  },
+  {
+    field: PackageField.CHECK_SUM_ALG,
+    label: '校验和算法',
+    component: 'Select',
+    colProps: { span: 12 },
+    ifShow: ({ model }) => {
+      return !model[PackageField.URL];
+    },
+    componentProps: {
+      placeholder: '请选择校验和算法',
+      options: Object.keys(ALG).map((key) => {
+        return {
+          label: String(ALG[key]).toUpperCase(),
+          value: ALG[key],
+        };
+      }),
+    },
+  },
+  {
+    field: PackageField.CHECK_SUM,
+    label: '校验和',
+    component: 'Input',
+    ifShow: ({ model }) => {
+      return !model[PackageField.URL];
+    },
+    colProps: { span: 12 },
+  },
+  {
+    field: PackageField.FILE_NAME,
+    label: '文件名',
+    component: 'Input',
+    ifShow: ({ model }) => {
+      return !model[PackageField.URL];
+    },
+    colProps: { span: 8 },
+  },
+  {
+    field: PackageField.FILE_SIZE,
+    label: '文件大小(以字节为单位)',
+    component: 'Input',
+    ifShow: ({ model }) => {
+      return !model[PackageField.URL];
+    },
+    colProps: { span: 8 },
+  },
+  {
+    field: PackageField.FILE_NAME,
+    label: '文件名',
+    component: 'Input',
+    ifShow: ({ model }) => {
+      return !model[PackageField.URL];
+    },
+    colProps: { span: 8 },
+  },
+  {
+    field: PackageField.FILE_TYPE,
+    label: '内容类型',
+    ifShow: ({ model }) => {
+      return !model[PackageField.URL];
+    },
+    component: 'Input',
+  },
+  {
+    field: PackageField.DESCRIPTION,
+    label: '描述',
+    component: 'Input',
+    dynamicDisabled: false,
+  },
+];

+import { downloadPackage } from '/@/api/ota';
+import { OtaRecordDatum } from '/@/api/ota/model';
+
+export async function useDownload(record: OtaRecordDatum) {
+  try {
+    if (record.url || !record.fileName) return;
+    const data = await downloadPackage(record.id.id);
+    const aEl = document.createElement('a');
+    const blob = new Blob([data], { type: record.contentType });
+    const objectUrl = URL.createObjectURL(blob);
+    aEl.href = objectUrl;
+    aEl.download = record.fileName;
+    aEl.click();
+    URL.revokeObjectURL(objectUrl);
+  } catch (error) {}
+}

 <script lang="ts" setup>
   import { Button } from 'ant-design-vue';
-  import { columns, searchFormSchema } from './config/config';
+  import { columns, ModalPassRecord, searchFormSchema } from './config/config';
   import { PageWrapper } from '/@/components/Page';
-  import { BasicTable, useTable } from '/@/components/Table';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import PackageDetailModal from './components/PackageDetailModal.vue';
   import { useModal } from '/@/components/Modal';
+  import { deleteOtaPackage, getOtaPackagesList } from '/@/api/ota';
+  import { GetOtaPackagesParams, OtaRecordDatum } from '/@/api/ota/model/index';
+  import PackagesDetailDrawer from './components/PackagesDetailDrawer.vue';
+  import { useDrawer } from '/@/components/Drawer';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useDownload } from './hook/useDownload';
 
-  const [register] = useTable({
+  const [register, { reload }] = useTable({
     columns,
     title: '包仓库',
+    api: async (params: GetOtaPackagesParams) => {
+      const data = await getOtaPackagesList({
+        ...params,
+        page: params.page - 1,
+        textSearch: params.title,
+      });
+      return { ...data, page: params.page };
+    },
+    pagination: {
+      showSizeChanger: true,
+      pageSizeOptions: ['1', '2', '3', '4'],
+    },
+    fetchSetting: {
+      totalField: 'totalElements',
+      listField: 'data',
+    },
     formConfig: {
       labelWidth: 120,
       schemas: searchFormSchema,
     },
+    showIndexColumn: false,
     useSearchForm: true,
     showTableSetting: true,
   });
 
+  const { createConfirm, createMessage } = useMessage();
+
   const [registerModal, { openModal }] = useModal();
 
+  const [registerDrawer, { openDrawer }] = useDrawer();
+
   const handleCreatePackage = () => {
-    openModal(true);
+    openModal(true, { isUpdate: false } as ModalPassRecord);
+  };
+
+  const handleOpenDetailDrawer = (record: OtaRecordDatum) => {
+    openDrawer(true, record.id.id);
+  };
+
+  const downloadFile = async (record: OtaRecordDatum) => {
+    await useDownload(record);
+  };
+
+  const deletePackage = (record: OtaRecordDatum) => {
+    createConfirm({
+      iconType: 'warning',
+      content: '是否确认删除操作？',
+      onOk: async () => {
+        try {
+          await deleteOtaPackage(record.id.id);
+          createMessage.success('删除成功');
+          reload();
+        } catch (error) {}
+      },
+    });
   };
 </script>
 
 <template>
   <PageWrapper dense contentFullHeight contentClass="flex flex-col">
-    <BasicTable @register="register">
+    <BasicTable @register="register" @row-click="handleOpenDetailDrawer" class="ota-list">
       <template #toolbar>
         <Button @click="handleCreatePackage" type="primary">新增包</Button>
       </template>
+      <template #action="{ record }">
+        <TableAction
+          @click.stop
+          :actions="[
+            {
+              label: '下载',
+              icon: 'ant-design:download-outlined',
+              onClick: downloadFile.bind(null, record),
+            },
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: deletePackage.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
     </BasicTable>
-    <PackageDetailModal @register="registerModal" />
+    <PackageDetailModal @register="registerModal" @update:list="reload" />
+    <PackagesDetailDrawer @register="registerDrawer" @update:list="reload" />
   </PageWrapper>
 </template>
+
+<style scoped lang="less">
+  .ota-list:deep(.ant-table-tbody > tr > td:last-of-type) {
+    width: 100%;
+    height: 100%;
+    padding: 0 !important;
+  }
+</style>