Merge branch 'ww' into 'main'

fix: ApiUpload component happen error on build See merge request huang/yun-teng-iot-front!363

Merge branch 'ww' into 'main'
fix: ApiUpload component happen error on build See merge request huang/yun-teng-iot-front!363
xp.Huang
2 parents 43ba5387 1c7d1fd7
Showing 7 changed files with 97 additions and 59 deletions
src/components/Form/index.ts
src/components/Form/src/componentMap.ts
src/components/Form/src/components/ApiUpload.vue
src/components/Form/src/types/index.ts
src/views/operation/ota/config/config.ts
src/views/operation/ota/config/packageDetail.config.ts
src/views/operation/ota/index.vue
--- a/src/components/Form/index.ts
View file @1b99eb5
+++ b/src/components/Form/index.ts
View file @1b99eb5
@@ -10,7 +10,7 @@ export { default as ApiSelect } from './src/components/ApiSelect.vue';
 export { default as RadioButtonGroup } from './src/components/RadioButtonGroup.vue';
 export { default as ApiTreeSelect } from './src/components/ApiTreeSelect.vue';
 export { default as ApiRadioGroup } from './src/components/ApiRadioGroup.vue';
-// export { default as ApiUpload } from './src/components/ApiUpload.vue';
+export { default as ApiUpload } from './src/components/ApiUpload.vue';
 //注册自定义组件
 export {
--- a/src/components/Form/src/componentMap.ts
View file @1b99eb5
+++ b/src/components/Form/src/componentMap.ts
View file @1b99eb5
@@ -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);
--- a/src/components/Form/src/components/ApiUpload.vue
View file @1b99eb5
+++ b/src/components/Form/src/components/ApiUpload.vue
View file @1b99eb5
@@ -4,21 +4,26 @@
   };
 </script>
 <script lang="ts" setup>
-  import { UploadDragger, Spin } from 'ant-design-vue';
+  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, isNumber, isObject } from '/@/utils/is';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  export interface FileItem {
     uid: string;
-    name?: string;
+    name: string;
     status?: string;
     response?: string;
     url?: string;
   }
-  const emit = defineEmits(['update:fileList']);
+  const { prefixCls } = useDesign('api-upload');
+  const emit = defineEmits(['update:fileList', 'preview', 'download']);
+
+  const attrs = useAttrs();
   const { createMessage } = useMessage();
@@ -26,8 +31,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(
@@ -38,6 +44,7 @@
       disabled?: boolean;
       listType?: string;
       multiple?: boolean;
+      maxFileLimit?: number;
       showUploadList?: boolean | { showPreviewIcon?: boolean; showRemoveIcon?: boolean };
       transformFile?: (file: File) => string | Blob | Promise<string | Blob | File>;
       api: (file: string | Blob | Promise<string | Blob | File>) => Promise<FileItem>;
@@ -60,28 +67,35 @@
   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')) {
+          const { fileList, maxFileLimit } = props;
+          let _fileList = cloneDeep(fileList);
+
+          if (isNumber(maxFileLimit) && _fileList.length === maxFileLimit) {
+            _fileList.splice(0, 1);
+          }
+
+          emit('update:fileList', cloneDeep([..._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 +106,35 @@
     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>
-  <UploadDragger
+  <Upload.Dragger
+    class="block"
+    :class="prefixCls"
     :file-list="props.fileList"
     :disabled="getDisabled"
     :before-upload="handleBeforeUpload"
@@ -111,11 +143,27 @@
     :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>
       </div>
     </Spin>
-  </UploadDragger>
+  </Upload.Dragger>
 </template>
+
+<style lang="less">
+  @basic-form: ~'@{namespace}-basic-form';
+  @prefix-cls: ~'@{namespace}-api-upload';
+
+  .@{basic-form} {
+    // .ant-form-item-control-input-content > div > div {
+    //   width: 100% !important;
+    // }
+
+    .@{prefix-cls} {
+      .ant-upload-list-item-name {
+        width: calc(100% - 22px);
+      }
+    }
+  }
+</style>
--- a/src/components/Form/src/types/index.ts
View file @1b99eb5
+++ b/src/components/Form/src/types/index.ts
View file @1b99eb5
@@ -114,4 +114,5 @@ export type ComponentType =
   | 'JAddInput'
   | 'Rate'
   | 'ColorPicker'
-  | 'IconDrawer';
+  | 'IconDrawer'
+  | 'ApiUpload';
--- a/src/views/operation/ota/config/config.ts
View file @1b99eb5
+++ b/src/views/operation/ota/config/config.ts
View file @1b99eb5
 import { BasicColumn, FormSchema } from '/@/components/Table';
-
+import { PackageField } from './packageDetail.config';
 export const columns: BasicColumn[] = [
   {
     title: '创建时间',
-    dataIndex: 'createTime',
+    dataIndex: PackageField.CREATE_TIME,
     width: 120,
   },
   {
     title: '标题',
-    dataIndex: 'title',
+    dataIndex: PackageField.TITLE,
     width: 120,
   },
   {
     title: '版本',
-    dataIndex: 'version',
+    dataIndex: PackageField.VERSION,
     width: 120,
   },
   {
     title: '版本标签',
-    dataIndex: 'versionLabel',
+    dataIndex: PackageField.VERSION_LABEL,
     width: 120,
   },
   {
     title: '包类型',
-    dataIndex: 'pkgType',
+    dataIndex: PackageField.PACKAGE_TYPE,
     width: 120,
   },
   {
     title: '直接URL',
-    dataIndex: 'url',
+    dataIndex: PackageField.PACKAGE_EXTERNAL_URL,
     width: 120,
   },
   {
     title: '文件大小',
-    dataIndex: 'fileSize',
+    dataIndex: PackageField.FILE_SIZE,
     width: 120,
   },
   {
     title: '校验和',
-    dataIndex: 'vaildateTotal',
+    dataIndex: PackageField.CHECK_SUM,
     width: 120,
   },
 ];
 export const searchFormSchema: FormSchema[] = [
   {
-    field: 'name',
+    field: PackageField.TITLE,
     label: '标题',
     component: 'Input',
     colProps: { span: 8 },
--- a/src/views/operation/ota/config/packageDetail.config.ts
View file @1b99eb5
+++ b/src/views/operation/ota/config/packageDetail.config.ts
View file @1b99eb5
@@ -7,12 +7,15 @@ 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',
   CHECK_SUM = 'checkSum',
   DESCRIPTION = 'description',
+
+  CREATE_TIME = 'createTIme',
+  FILE_SIZE = 'fileSize',
 }
 export enum PackageUpdateType {
@@ -119,10 +122,14 @@ 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: () => {
-        return {};
+      maxFileLimit: 1,
+      api: (_file: File) => {
+        console.log({ _file });
+        return { uid: _file.uid, name: _file.name };
       },
     },
   },
--- a/src/views/operation/ota/index.vue
View file @1b99eb5
+++ b/src/views/operation/ota/index.vue
View file @1b99eb5
@@ -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 { computed, ref, unref } 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>