fix(upload): fix maxNumber not work #240

CHANGELOG.zh_CN.md

@@ -3,6 +3,7 @@
 ### 🐛 Bug Fixes
 
 - 修复菜单在 hmr 时数据被置空
+- 修复 Upload 组件 maxNumber 失效问题
 
 ## 2.0.0-rc.18 (2021-02-05)
 

build/config/themeConfig.ts

@@ -1,4 +1,5 @@
 import { generate } from '@ant-design/colors';
+
 export const primaryColor = '#0084f4';
 
 export const themeMode = 'light';

src/components/Upload/src/BasicUpload.vue

@@ -20,7 +20,12 @@
       </Tooltip>
     </a-button-group>
 
-    <UploadModal v-bind="bindValue" @register="registerUploadModal" @change="handleChange" />
+    <UploadModal
+      v-bind="bindValue"
+      :previewFileList="fileListRef"
+      @register="registerUploadModal"
+      @change="handleChange"
+    />
 
     <UploadPreviewModal
       :value="fileListRef"

src/components/Upload/src/UploadModal.vue

@@ -42,7 +42,7 @@
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, ref, toRefs, unref, computed } from 'vue';
+  import { defineComponent, reactive, ref, toRefs, unref, computed, PropType } from 'vue';
   import { Upload, Alert } from 'ant-design-vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   //   import { BasicTable, useTable } from '/@/components/Table';
@@ -63,7 +63,13 @@
   import { useI18n } from '/@/hooks/web/useI18n';
   export default defineComponent({
     components: { BasicModal, Upload, Alert, FileList },
-    props: basicProps,
+    props: {
+      ...basicProps,
+      previewFileList: {
+        type: Array as PropType<string[]>,
+        default: () => [],
+      },
+    },
     emits: ['change', 'register'],
     setup(props, { emit }) {
       const { t } = useI18n();
@@ -206,7 +212,7 @@
       // 点击开始上传
       async function handleStartUpload() {
         const { maxNumber } = props;
-        if (fileListRef.value.length > maxNumber) {
+        if ((fileListRef.value.length + props.previewFileList?.length ?? 0) > maxNumber) {
           return createMessage.warning(t('component.upload.maxNumber', [maxNumber]));
         }
         try {

src/components/Upload/src/data.tsx

@@ -156,7 +156,7 @@ export function createPreviewActionColumn({
       //     onClick: handlePreview.bind(null, record),
       //   });
       // }
-      return <TableAction actions={actions} />;
+      return <TableAction actions={actions} outside={true} />;
     },
   };
 }