feat: implement ApiUpload component

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

@@ -7,18 +7,21 @@
   import { Upload, Spin } from 'ant-design-vue';
   import { InboxOutlined } from '@ant-design/icons-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { isBoolean, isFunction } from '/@/utils/is';
-  import { computed, ref, unref } from 'vue';
+  import { computed, ref, unref, useAttrs } from 'vue';
   import { cloneDeep } from 'lodash-es';
-  interface FileItem {
+  import { isFunction, isObject } from '/@/utils/is';
+
+  export interface FileItem {
     uid: string;
-    name?: string;
+    name: string;
     status?: string;
     response?: string;
     url?: string;
   }
 
-  const emit = defineEmits(['update:fileList']);
+  const emit = defineEmits(['update:fileList', 'preview', 'download']);
+
+  const attrs = useAttrs();
 
   const { createMessage } = useMessage();
 
@@ -26,8 +29,9 @@
 
   const componentDisabled = ref(false);
 
-  const setLoading = (spin: boolean) => {
-    loading.value = spin;
+  const setUploadStatus = (status: boolean) => {
+    loading.value = status;
+    componentDisabled.value = status;
   };
 
   const props = withDefaults(
@@ -60,28 +64,28 @@
 
   const getDisabled = computed(() => {
     const { disabled } = props;
-    if (isBoolean(disabled)) {
-      return disabled ? componentDisabled.value : disabled;
-    }
-    return componentDisabled.value;
+    return disabled ? disabled : unref(componentDisabled);
   });
 
   const handleUpload = async (file: File | string | Blob | Promise<string | Blob | File>) => {
     try {
-      setLoading(true);
-      componentDisabled.value = true;
-      console.log({ componentDisabled: unref(componentDisabled), getDisabled: unref(getDisabled) });
+      setUploadStatus(true);
       const { transformFile, api } = props;
       if (transformFile && isFunction(transformFile)) file = await transformFile(file as File);
       if (api && isFunction(api)) {
         const data = await api(file);
-        emit('update:fileList', cloneDeep([...props.fileList, data]));
+        if (isObject(data) && Reflect.has(data, 'uid') && Reflect.has(data, 'name')) {
+          emit('update:fileList', cloneDeep([...props.fileList, data]));
+          return;
+        }
+        window.console.error(
+          `The ApiUpload component's api properties need to return an object, that object requires a uid field and a name field`
+        );
       }
     } catch (error) {
       window.console.error(error);
     } finally {
-      setLoading(false);
-      componentDisabled.value = false;
+      setUploadStatus(false);
     }
   };
 
@@ -92,17 +96,34 @@
     emit('update:fileList', _fileList);
   };
 
+  const defaultPreview = (file: FileItem) => {
+    console.log('default preview', file);
+  };
+
+  const defaultDownload = (file: FileItem) => {
+    console.log('default download', file);
+  };
+
   const handlePreview = (file: FileItem) => {
-    console.log('preview', file);
+    if (Reflect.has(attrs, 'preview')) {
+      emit('preview', file);
+      return;
+    }
+    defaultPreview(file);
   };
 
   const handleDownload = (file: FileItem) => {
-    console.log('download', file);
+    if (Reflect.has(attrs, 'download')) {
+      emit('download', file);
+      return;
+    }
+    defaultDownload(file);
   };
 </script>
 
 <template>
   <Upload.Dragger
+    class="block"
     :file-list="props.fileList"
     :disabled="getDisabled"
     :before-upload="handleBeforeUpload"
@@ -111,7 +132,6 @@
     :remove="handleRemove"
   >
     <Spin :spinning="loading">
-      {{ getDisabled }}
       <div class="w-full h-full flex flex-col justify-center content-center">
         <InboxOutlined class="text-[3rem] !text-blue-500" />
         <div class="m-2 text-gray-400">点击上传或拖拽上传</div>
@@ -119,3 +139,5 @@
     </Spin>
   </Upload.Dragger>
 </template>
+
+<style></style>

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

@@ -7,7 +7,7 @@ export enum PackageField {
   DEVICE_CONFIGURATION = 'deviceConfiguration',
   PACKAGE_TYPE = 'packageType',
   PACKAGE_UPDATE_TYPE = 'PackageUpdateType',
-  PACKAGE_BINARY_FILE = 'packageBinaryFile',
+  PACKAGE_BINARY_FILE = 'fileList',
   PACKAGE_EXTERNAL_URL = 'packageEexternalUrl',
   CHECK_SUM_WAY = 'checkSumWay',
   ALG = 'alg',
@@ -119,9 +119,11 @@ export const formSchema: FormSchema[] = [
     ifShow: ({ model }) => {
       return model[PackageField.PACKAGE_UPDATE_TYPE] === PackageUpdateType.BINARY_FILE;
     },
-    component: 'Upload',
+    component: 'ApiUpload',
+    valueField: PackageField.PACKAGE_BINARY_FILE,
+    changeEvent: `update:${PackageField.PACKAGE_BINARY_FILE}`,
     componentProps: {
-      api: () => {
+      api: (_file: File) => {
         return {};
       },
     },

@@ -5,8 +5,6 @@
   import { BasicTable, useTable } from '/@/components/Table';
   import PackageDetailModal from './components/PackageDetailModal.vue';
   import { useModal } from '/@/components/Modal';
-  // import { ApiUpload } from '/@/components/Form';
-  // import { ref } from 'vue';
 
   const [register] = useTable({
     columns,
@@ -24,28 +22,10 @@
   const handleCreatePackage = () => {
     openModal(true);
   };
-
-  // const fileList = ref([]);
-  // const handleUpload = async (file: File) => {
-  //   console.log(file);
-  //   return new Promise((resolve) => {
-  //     setTimeout(() => {
-  //       resolve({
-  //         uid: file.uid,
-  //         type: file.type,
-  //         name: file.name,
-  //         linkProps: { download: 'http://www.baidu.cn' },
-  //       });
-  //     }, 3000);
-  //   });
-  // };
 </script>
 
 <template>
   <PageWrapper dense contentFullHeight contentClass="flex flex-col">
-    <!-- <div class="w-40 h-40">
-      <ApiUpload v-model:file-list="fileList" :api="handleUpload" />
-    </div> -->
     <BasicTable @register="register">
       <template #toolbar>
         <Button @click="handleCreatePackage" type="primary">新增包</Button>