perf(upload): improve upload component

CHANGELOG.zh_CN.md

@@ -3,6 +3,11 @@
 ### ✨ Features
 
 - 新增 base64 文件流下载
+- 优化上传组件及示例
+
+### 🎫 Chores
+
+- 更新 antdv 到`2.0.0-rc.1`
 
 ## 2.0.0-rc.10 (2020-11-13)
 

README.en-US.md

@@ -226,10 +226,10 @@ yarn clean:lib # Delete node_modules, supported window
 - [x] Data import and export
 - [x] Global error handling
 - [x] Rich text component
+- [x] Upload component
 
 ## Developing features
 
-- [ ] Upload component
 - [ ] Theme configuration
 - [ ] Dark theme
 - [ ] Build CDN

README.md

@@ -228,10 +228,10 @@ yarn clean:lib # 删除node_modules，兼容window系统
 - [x] 系统性能优化
 - [x] 全局错误处理
 - [x] 富文本组件
+- [x] 上传组件
 
 ## 正在开发的功能
 
-- [ ] 上传组件
 - [ ] 主题配置
 - [ ] 黑暗主题
 - [ ] 打包 CDN

package.json

@@ -22,8 +22,8 @@
   },
   "dependencies": {
     "@iconify/iconify": "^2.0.0-rc.2",
-    "@vueuse/core": "^4.0.0-beta.40",
-    "ant-design-vue": "^2.0.0-beta.15",
+    "@vueuse/core": "^4.0.0-beta.41",
+    "ant-design-vue": "^2.0.0-rc.1",
     "apexcharts": "3.22.0",
     "axios": "^0.21.0",
     "echarts": "^4.9.0",
@@ -33,10 +33,10 @@
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.0",
     "qrcode": "^1.4.4",
-    "vditor": "^3.6.0",
+    "vditor": "^3.6.2",
     "vue": "^3.0.2",
     "vue-i18n": "^9.0.0-beta.6",
-    "vue-router": "^4.0.0-rc.2",
+    "vue-router": "^4.0.0-rc.3",
     "vuex": "^4.0.0-rc.1",
     "vuex-module-decorators": "^1.0.1",
     "xlsx": "^0.16.8",
@@ -45,11 +45,11 @@
   "devDependencies": {
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
-    "@iconify/json": "^1.1.254",
+    "@iconify/json": "^1.1.258",
     "@ls-lint/ls-lint": "^1.9.2",
     "@purge-icons/generated": "^0.4.1",
     "@types/echarts": "^4.9.0",
-    "@types/fs-extra": "^9.0.2",
+    "@types/fs-extra": "^9.0.4",
     "@types/koa-static": "^4.0.1",
     "@types/lodash-es": "^4.17.3",
     "@types/mockjs": "^1.0.3",

src/components/Drawer/src/props.ts

@@ -24,7 +24,7 @@ export const footerProps = {
   okButtonProps: Object as PropType<any>,
   okText: {
     type: String as PropType<string>,
-    default: '保存',
+    default: '确认',
   },
   okType: {
     type: String as PropType<string>,

src/components/Form/src/BasicForm.vue

@@ -44,7 +44,6 @@
   import { useFormValues } from './hooks/useFormValues';
   import useAdvanced from './hooks/useAdvanced';
   import { useFormAction } from './hooks/useFormAction';
-
   export default defineComponent({
     name: 'BasicForm',
     components: { FormItem, Form, Row, FormAction },

src/components/Icon/index.tsx

@@ -18,7 +18,7 @@ export default defineComponent({
     // icon size
     size: {
       type: [String, Number] as PropType<string | number>,
-      default: 14,
+      default: 16,
     },
     prefix: {
       type: String as PropType<string>,

src/components/Modal/src/props.ts

@@ -1,4 +1,5 @@
 import type { PropType } from 'vue';
+import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
 export const modalProps = {
   visible: Boolean as PropType<boolean>,
   // open drag
@@ -16,7 +17,7 @@ export const modalProps = {
   },
   okText: {
     type: String as PropType<string>,
-    default: '保存',
+    default: '确认',
   },
   closeFunc: Function as PropType<() => Promise<boolean>>,
 };
@@ -100,9 +101,9 @@ export const basicProps = Object.assign({}, modalProps, {
     default: 'primary',
   },
 
-  okButtonProps: Object as PropType<any>,
+  okButtonProps: Object as PropType<ButtonProps>,
 
-  cancelButtonProps: Object as PropType<any>,
+  cancelButtonProps: Object as PropType<ButtonProps>,
 
   title: {
     type: String as PropType<string>,

src/components/Qrcode/src/index.vue

@@ -7,7 +7,7 @@
   import { defineComponent, watchEffect, PropType, ref, unref } from 'vue';
   import { toCanvas, QRCodeRenderersOptions, LogoType } from './qrcodePlus';
   import { toDataURL } from 'qrcode';
-  import { downloadByUrl } from '/@/utils/file/FileDownload';
+  import { downloadByUrl } from '/@/utils/file/download';
 
   export default defineComponent({
     name: 'QrCode',

src/components/Table/src/BasicTable.vue

@@ -4,6 +4,7 @@
     class="basic-table"
     :class="{
       'table-form-container': getBindValues.useSearchForm,
+      inset: getBindValues.inset,
     }"
   >
     <BasicForm

src/components/Table/src/hooks/useDataSource.ts

@@ -84,7 +84,7 @@ export function useDataSource(
     const { api, searchInfo, fetchSetting, beforeFetch, afterFetch, useSearchForm } = unref(
       propsRef
     );
-    if (!api && !isFunction(api)) return;
+    if (!api || !isFunction(api)) return;
     try {
       loadingRef.value = true;
       const { pageField, sizeField, listField, totalField } = fetchSetting || FETCH_SETTING;

src/components/Table/src/props.ts

@@ -16,7 +16,10 @@ export const basicProps = {
   tableSetting: {
     type: Object as PropType<TableSetting>,
   },
-
+  inset: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
   sortFn: {
     type: Function as PropType<(sortInfo: SorterResult) => any>,
     default: DEFAULT_SORT_FN,

src/components/Table/src/style/index.less

@@ -49,6 +49,12 @@
     }
   }
 
+  &.inset {
+    .ant-table-wrapper {
+      padding: 0;
+    }
+  }
+
   //
   .ant-table {
     border: none;

src/components/Table/src/types/table.ts

@@ -126,6 +126,8 @@ export interface TableSetting {
 export interface BasicTableProps<T = any> {
   // 自定义排序方法
   sortFn?: (sortInfo: SorterResult) => any;
+  // 取消表格的默认padding
+  inset?: boolean;
   // 显示表格设置
   showTableSetting?: boolean;
   tableSetting?: TableSetting;

src/components/Upload/index.ts

@@ -1,2 +1,2 @@
-export { default as UploadContainer } from './src/UploadContainer.vue';
+export { default as BasicUpload } from './src/BasicUpload.vue';
 // export * from './src/types';

src/components/Upload/src/BasicUpload.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <a-button-group>
+      <a-button type="primary" @click="openUploadModal" preIcon="ant-design:cloud-upload-outlined">
+        上传
+      </a-button>
+      <Tooltip placement="bottom" v-if="showPreview">
+        <template #title>
+          已上传
+          <template v-if="fileListRef.length">{{ fileListRef.length }}</template>
+        </template>
+        <a-button @click="openPreviewModal">
+          <Icon icon="ant-design:eye-outlined" />
+          <template v-if="fileListRef.length && showPreviewNumber">
+            {{ fileListRef.length }}
+          </template>
+        </a-button>
+      </Tooltip>
+    </a-button-group>
+
+    <UploadModal v-bind="bindValue" @register="registerUploadModal" @change="handleChange" />
+
+    <UploadPreviewModal
+      :value="fileListRef"
+      @register="registerPreviewModal"
+      @list-change="handlePreviewChange"
+    />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, watch, unref, computed } from 'vue';
+
+  import UploadModal from './UploadModal.vue';
+  import UploadPreviewModal from './UploadPreviewModal.vue';
+  import Icon from '/@/components/Icon';
+  import { Tooltip } from 'ant-design-vue';
+
+  import { useModal } from '/@/components/Modal';
+
+  import { uploadContainerProps } from './props';
+  import { omit } from 'lodash-es';
+
+  export default defineComponent({
+    components: { UploadModal, UploadPreviewModal, Icon, Tooltip },
+    props: uploadContainerProps,
+    setup(props, { emit, attrs }) {
+      // 上传modal
+      const [registerUploadModal, { openModal: openUploadModal }] = useModal();
+
+      //   预览modal
+      const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();
+
+      const fileListRef = ref<string[]>([]);
+
+      const showPreview = computed(() => {
+        const { emptyHidePreview } = props;
+        if (!emptyHidePreview) return true;
+        return emptyHidePreview ? fileListRef.value.length > 0 : true;
+      });
+
+      const bindValue = computed(() => {
+        const value = { ...attrs, ...props };
+        return omit(value, 'onChange');
+      });
+
+      watch(
+        () => props.value,
+        (value = []) => {
+          fileListRef.value = value;
+        },
+        { immediate: true }
+      );
+
+      // 上传modal保存操作
+      function handleChange(urls: string[]) {
+        fileListRef.value = [...unref(fileListRef), ...(urls || [])];
+        emit('change', fileListRef.value);
+      }
+
+      // 预览modal保存操作
+      function handlePreviewChange(urls: string[]) {
+        fileListRef.value = [...(urls || [])];
+        emit('change', fileListRef.value);
+      }
+
+      return {
+        registerUploadModal,
+        openUploadModal,
+        handleChange,
+        handlePreviewChange,
+        registerPreviewModal,
+        openPreviewModal,
+        fileListRef,
+        showPreview,
+        bindValue,
+      };
+    },
+  });
+</script>

src/components/Upload/src/ThumnUrl.vue

@@ -5,25 +5,22 @@
   </span>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, PropType } from 'vue';
 
   export default defineComponent({
     props: {
       fileUrl: {
-        type: String,
+        type: String as PropType<string>,
         default: '',
       },
       fileType: {
-        type: String,
+        type: String as PropType<string>,
         default: '',
       },
       fileName: {
-        type: String,
+        type: String as PropType<string>,
         default: '',
       },
     },
-    setup() {
-      return {};
-    },
   });
 </script>