feat: implement package manage batch delete

@@ -45,7 +45,7 @@ export const getOtaPackagesList = (params: GetOtaPackagesParams) => {
  * @param params
  * @returns
  */
-export const createOtaPackages = (params: CreateOtaPackageParams) => {
+export const createOtaPackage = (params: CreateOtaPackageParams) => {
   return defHttp.post<OtaRecordDatum>(
     {
       url: Api.CREATE_OTA_PACKAGES,
@@ -76,7 +76,7 @@ export const uploadOtaPackages = (params: UploadOtaPackagesParams) => {
  * @description 获取设备默认信息
  * @returns
  */
-export const getDevicePRofileInfo = () => {
+export const getDefaultDeviceProfile = () => {
   return defHttp.get<DefaultDeviceProfileInfo>(
     {
       url: Api.GET_DEVICE_PROFILE_INFO_DEFAULT,

+import { ModalOptionsEx, useMessage } from '../web/useMessage';
+
+export function useSyncConfirm() {
+  const { createConfirm } = useMessage();
+
+  const createSyncConfirm = (options: ModalOptionsEx): Promise<boolean> => {
+    return new Promise((resolve, reject) => {
+      createConfirm({
+        ...options,
+        onOk: () => {
+          resolve(true);
+        },
+        onCancel: () => {
+          reject(false);
+        },
+      });
+    });
+  };
+
+  return { createSyncConfirm };
+}

@@ -3,7 +3,7 @@
   import { BasicForm, useForm } from '/@/components/Form';
   import { ALG, formSchema, PackageField } from '../config/packageDetail.config';
   import { ref } from 'vue';
-  import { createOtaPackages, uploadOtaPackages, deleteOtaPackage } from '/@/api/ota';
+  import { createOtaPackage, uploadOtaPackages, deleteOtaPackage } from '/@/api/ota';
   import { CreateOtaPackageParams } from '/@/api/ota/model';
 
   interface FieldsValue extends CreateOtaPackageParams {
@@ -54,7 +54,7 @@
   const handleCreatePackages = async (value: FieldsValue) => {
     try {
       setLoading(true);
-      const { id } = await createOtaPackages(value);
+      const { id } = await createOtaPackage(value);
       const { isURL } = value;
       if (!isURL) {
         await handleUploadFile(value, id.id);
@@ -82,6 +82,14 @@
 
 <template>
   <BasicModal title="包管理" destroy-on-close @register="registerModal" @ok="handleSubmit">
-    <BasicForm @register="registerForm" />
+    <BasicForm @register="registerForm" class="package-manage-form" />
   </BasicModal>
 </template>
+
+<style scoped lang="less">
+  .package-manage-form {
+    :deep(.ant-form-item-control-input-content > div > div) {
+      width: 100% !important;
+    }
+  }
+</style>

 <script lang="ts" setup>
-  import { OtaRecordDatum } from '/@/api/ota/model';
+  import { DeviceProfileRecord, 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';
@@ -7,14 +7,23 @@
   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 {
+    createOtaPackage,
+    deleteOtaPackage,
+    getDeviceProfileInfoById,
+    getOtaPackageInfo,
+  } from '/@/api/ota';
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import { useDownload } from '../hook/useDownload';
 
   const emit = defineEmits(['register', 'update:list']);
 
+  const loading = ref(false);
+
   const otaRecord = ref<OtaRecordDatum>({} as unknown as OtaRecordDatum);
 
+  const deviceProfileInfo = ref<DeviceProfileRecord>({} as unknown as DeviceProfileRecord);
+
   const { createConfirm, createMessage } = useMessage();
 
   const [registerForm, { setFieldsValue, getFieldsValue }] = useForm({
@@ -23,7 +32,7 @@
     disabled: true,
   });
 
-  const [register, { closeDrawer }] = useDrawerInner(async (id: string) => {
+  const [register, { closeDrawer, changeLoading }] = useDrawerInner(async (id: string) => {
     try {
       const record = await getOtaPackageInfo(id);
       const deviceInfo = await getDeviceProfileInfoById(record.deviceProfileId.id);
@@ -32,11 +41,12 @@
         [PackageField.DESCRIPTION]: record.additionalInfo.description,
         [PackageField.DEVICE_PROFILE_INFO]: deviceInfo.name,
       });
+      deviceProfileInfo.value = deviceInfo;
       otaRecord.value = record;
     } catch (error) {}
   });
 
-  const openDetailPage = () => {};
+  // const openDetailPage = () => {};
 
   const downloadPackage = async () => {
     await useDownload(unref(otaRecord));
@@ -72,17 +82,40 @@
     if (unref(isSuccessRef)) createMessage.success('复制成功');
   };
 
+  const setLoading = (status: boolean) => {
+    changeLoading(status);
+    loading.value = status;
+  };
+
   const handleSubmit = async () => {
-    getFieldsValue();
+    const value = getFieldsValue();
+    try {
+      setLoading(true);
+      await createOtaPackage({
+        ...unref(otaRecord),
+        additionalInfo: { description: value[PackageField.DESCRIPTION] },
+      } as any);
+      createMessage.success('修改成功');
+    } catch (error) {
+    } finally {
+      setLoading(false);
+      closeDrawer();
+    }
   };
 </script>
 
 <template>
-  <BasicDrawer width="40%" class="relative" @register="register" @ok="handleSubmit">
+  <BasicDrawer
+    :title="otaRecord.title"
+    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="openDetailPage">打开详情页</Button> -->
           <Button type="primary" @click="downloadPackage" :disabled="!!otaRecord.url">
             下载包
           </Button>
@@ -97,11 +130,13 @@
         <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>
+    <template #footer>
+      <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" @click="closeDrawer">取消</Button>
+        <Button type="primary" :loading="loading" @click="handleSubmit">保存</Button>
+      </div>
+    </template>
   </BasicDrawer>
 </template>

-import { getDevicePRofileInfo, getDeviceProfileInfos } from '/@/api/ota';
+import { getDefaultDeviceProfile, getDeviceProfileInfos } from '/@/api/ota';
 import { Id } from '/@/api/ota/model';
 import { FormSchema } from '/@/components/Form';
 import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
@@ -97,7 +97,7 @@ export const formSchema: FormSchema[] = [
         labelField: 'name',
         valueField: 'id',
         api: async () => {
-          const data = await getDevicePRofileInfo();
+          const data = await getDefaultDeviceProfile();
           data.id = JSON.stringify(data.id) as unknown as Id;
           setFieldsValue({ [PackageField.DEVICE_PROFILE_INFO]: data.id });
           return { data: [data] };

@@ -11,8 +11,10 @@
   import { useDrawer } from '/@/components/Drawer';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useDownload } from './hook/useDownload';
+  import { computed } from 'vue';
+  import { useSyncConfirm } from '/@/hooks/component/useSyncConfirm';
 
-  const [register, { reload }] = useTable({
+  const [register, { reload, getSelectRowKeys, getRowSelection, setSelectedRowKeys }] = useTable({
     columns,
     title: '包仓库',
     api: async (params: GetOtaPackagesParams) => {
@@ -35,9 +37,13 @@
       labelWidth: 120,
       schemas: searchFormSchema,
     },
+    rowKey: (record: OtaRecordDatum) => record.id.id,
     showIndexColumn: false,
     useSearchForm: true,
     showTableSetting: true,
+    rowSelection: {
+      type: 'checkbox',
+    },
   });
 
   const { createConfirm, createMessage } = useMessage();
@@ -71,6 +77,25 @@
       },
     });
   };
+
+  const canDelete = computed(() => {
+    const rowSelection = getRowSelection();
+    return !rowSelection.selectedRowKeys?.length;
+  });
+
+  const { createSyncConfirm } = useSyncConfirm();
+  const handleBatchDelete = async () => {
+    const rowKeys = getSelectRowKeys();
+    try {
+      await createSyncConfirm({ iconType: 'warning', content: '确认后所有选中的OTA升级将被删除' });
+      for (const key of rowKeys) {
+        await deleteOtaPackage(key);
+      }
+      createMessage.success('批量删除成功');
+      setSelectedRowKeys([]);
+      reload();
+    } catch (error) {}
+  };
 </script>
 
 <template>
@@ -78,6 +103,9 @@
     <BasicTable @register="register" @row-click="handleOpenDetailDrawer" class="ota-list">
       <template #toolbar>
         <Button @click="handleCreatePackage" type="primary">新增包</Button>
+        <Button @click="handleBatchDelete" :disabled="canDelete" type="primary" danger>
+          批量删除
+        </Button>
       </template>
       <template #action="{ record }">
         <TableAction