fix: 下载组件

packages/upload-table/index.vue

@@ -1,54 +1,71 @@
 <template>
-  <el-table border :data="fileList">
-    <el-table-column align="center" :label="label1">
-      <template #default="{ row }">
-        <template v-if="row.createdBy">
-          {{ row.name }}
+  <div w-full>
+    <el-table border :data="fileList" w-full>
+      <el-table-column align="center" :label="label1">
+        <template #default="{ row }">
+          <template v-if="row.createdBy">
+            {{ row.name }}
+          </template>
+          <el-input
+            v-else v-model.trim="allName[`${row.id}`]" clearable :loading="allLoading[`${row.id}`]"
+            placeholder="不填则为默认文件名称"
+          />
         </template>
-        <el-input
-          v-else v-model.trim="allName[`${row.id}`]" clearable :loading="allLoading[`${row.id}`]"
-          placeholder="不填则为默认文件名称"
-        />
-      </template>
-    </el-table-column>
-    <el-table-column align="center" :label="label2">
-      <template #default="{ row, $index }">
-        <upload-file-link v-if="row.createdBy" :file-id="row.id" :file-name="row.name">
-          {{ row.name }}
-        </upload-file-link>
-        <upload-file-single
-          v-else :accept="accept" :auto-upload="false" :index-key="`${row.id}`" :max-size="20"
-          :file-name="allName[`${row.id}`]" :loading="allLoading[`${row.id}`]"
-          @on-change="$event => onChange($event, row.id)" @on-success="$event => onSuccess($event, row, $index)"
-          @on-error="onError(row.id)"
-        />
-      </template>
-    </el-table-column>
-    <el-table-column align="center" :label="label3" width="200px">
-      <template #default="{ row, $index }">
-        <el-popconfirm v-if="row.createdBy" :title="popconfirm" :disabled="disabled" @confirm="remove($index)">
-          <template #reference>
-            <el-button type="danger" :disabled="disabled" link>
-              删除
+      </el-table-column>
+      <el-table-column align="center" :label="label2">
+        <template #default="{ row, $index }">
+          <download-link v-if="row.createdBy" :src="row" :file-name="row.name">
+            {{ row.name }}
+          </download-link>
+          <upload-single-file
+            v-else
+            :accept="accept"
+            :auto-upload="allLoading[`${row.id}`]"
+            :max-size="20"
+            :file-name="allName[`${row.id}`]"
+            :request="request"
+            @on-change="$event => onChange($event, row.id)"
+            @on-success="$event => onSuccess($event, row, $index)"
+            @on-error="onError(row.id)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" :label="label3" width="200px">
+        <template #default="{ row, $index }">
+          <el-popconfirm v-if="allowReplace" :title="replacePopconfirm" :disabled="disabled" @confirm="remove($index)">
+            <template #reference>
+              <el-button type="danger" :disabled="disabled" link>
+                重新上传
+              </el-button>
+            </template>
+          </el-popconfirm>
+          <el-popconfirm v-if="allowDelete && row.createdBy" :title="deletePopconfirm" :disabled="disabled" @confirm="remove($index)">
+            <template #reference>
+              <el-button type="danger" :disabled="disabled" link>
+                删除
+              </el-button>
+            </template>
+          </el-popconfirm>
+          <template v-else>
+            <el-button type="primary" :loading="allLoading[`${row.id}`]" link @click="save(row.id)">
+              保存
+            </el-button>
+            <el-button type="danger" :loading="allLoading[`${row.id}`]" link @click="remove($index)">
+              取消
             </el-button>
           </template>
-        </el-popconfirm>
-        <template v-else>
-          <el-button type="primary" :loading="allLoading[`${row.id}`]" link @click="save(row.id)">
-            保存
-          </el-button>
-          <el-button type="danger" :loading="allLoading[`${row.id}`]" link @click="remove($index)">
-            取消
-          </el-button>
         </template>
-      </template>
-    </el-table-column>
-  </el-table>
+      </el-table-column>
+    </el-table>
+    <div v-if="!hideAdd" w-full text-center>
+      <el-button :disabled="disabled" type="primary" plain @click="add">
+        {{ addText }}
+      </el-button>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup name="ThUploadTable">
-import type { UploadFile } from 'element-plus'
-
 const props = withDefaults(defineProps<{
   /** 上传格式 */
   accept?: string
@@ -58,21 +75,41 @@ const props = withDefaults(defineProps<{
   label2?: string
   /** 列3的文字 */
   label3?: string
-  disabled?: boolean
   /** 文件列表，支持v-model */
   fileList?: FileVO[]
-  /** 删除按钮提示文字 */
-  popconfirm?: string
+  /** 再次上传确认的提示文字 */
+  replacePopconfirm?: string
+  /** 删除确认的提示文字 */
+  deletePopconfirm?: string
+  /** 新增按钮的提示文字 */
+  addText?: string
+  /** 允许替换，用再次上传覆盖之前已上传的文件 */
+  allowReplace?: boolean
+  /** 允许删除已上传的文件 */
+  allowDelete?: boolean
+  /** 表格禁用，支持v-model */
+  disabled?: boolean
+  /** 隐藏新增按钮 */
+  hideAdd?: boolean
+  /** 文件上传的请求函数 */
+  request?: (formData: FormData) => Promise<FileVO>
 }>(), {
   accept: '.jpeg,.jpg,.png,.bmp',
+  addText: '新增一行',
+  allowDelete: true,
+  allowReplace: false,
+  disabled: false,
+  hideAdd: false,
   label1: '文件名称',
   label2: '图片上传',
   label3: '操作',
   fileList: () => [],
-  popconfirm: '是否删除本行？',
+  replacePopconfirm: '是否重新本行文件？',
+  deletePopconfirm: '是否删除本行？',
 })
 
 const emit = defineEmits<{
+  (event: 'update:disabled', disabled: boolean): void
   (event: 'update:fileList', fileList?: FileVO[]): void
 }>()
 
@@ -84,6 +121,7 @@ function onSuccess(file: FileVO, row: FileVO, index: number) {
   const indexKey = `${row.id}`
   const newList = [...props.fileList.slice(0, index), file, ...props.fileList.slice(index + 1)]
   emit('update:fileList', newList)
+  ElMessage.success('上传成功')
   allLoading[indexKey] = false
 }
 
@@ -92,13 +130,10 @@ function onError(id: number) {
   allLoading[indexKey] = false
 }
 
-function onChange(uploadFile: UploadFile, id: number) {
+// 自动设置文件名
+function onChange(uploadFile: File, id: number) {
   const indexKey = `${id}`
 
-  if (uploadFile.status !== 'ready') {
-    allLoading[indexKey] = false
-    return
-  }
   if (allName[indexKey])
     return
 
@@ -115,6 +150,13 @@ function save(id: number) {
   allLoading[indexKey] = true
 }
 
+function add() {
+  const id = Date.now() // 生成一个id
+  allName[id] = ''
+  allLoading[id] = false
+  emit('update:fileList', [...props.fileList, { id }])
+}
+
 function remove(index: number) {
   const newList = [...props.fileList.slice(0, index), ...props.fileList.slice(index + 1)]
   emit('update:fileList', newList)