合并

src/components/FileUpload/index.vue

@@ -1,28 +1,11 @@
 <template>
   <div class="upload-file">
-    <el-upload
-      ref="fileUploadRef"
-      multiple
-      :action="realUploadUrl"
-      :before-upload="handleBeforeUpload"
-      :file-list="fileList"
-      :limit="limit"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      :on-success="handleUploadSuccess"
-      :show-file-list="showFileList"
-      :headers="headers"
-      class="upload-file-uploader"
-      :list-type="isConstruction ? 'picture-card' : 'text'"
-      :accept="accept"
-      :drag="isDarg"
-      :data="data"
-      :auto-upload="autoUpload"
-      :on-change="handleChange"
-      :on-remove="handleRemove"
-      :method="method"
-      :http-request="customUpload"
-    >
+    <el-upload ref="fileUploadRef" multiple :action="realUploadUrl" :before-upload="handleBeforeUpload"
+      :file-list="fileList" :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed"
+      :on-success="handleUploadSuccess" :show-file-list="showFileList" :headers="headers" class="upload-file-uploader"
+      :list-type="isConstruction ? 'picture-card' : 'text'" :accept="accept" :drag="isDarg" :data="data"
+      :auto-upload="autoUpload" :on-change="handleChange" :on-remove="handleRemove" :method="method"
+      :http-request="customUpload">
       <slot>
         <div>
           <!-- 上传按钮 -->
@@ -41,14 +24,10 @@
             的文件
           </div>
           <!-- 文件列表 -->
-          <transition-group
-            v-if="!isConstruction && !isImportInfo"
-            class="upload-file-list el-upload-list el-upload-list--text"
-            name="el-fade-in-linear"
-            tag="ul"
-            @click.stop
-          >
-            <li style="margin-top: 10px" v-for="(file, index) in fileList" :key="file.uid" class="el-upload-list__item ele-upload-list__item-content">
+          <transition-group v-if="!isConstruction && !isImportInfo"
+            class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul" @click.stop>
+            <li style="margin-top: 10px" v-for="(file, index) in fileList" :key="file.uid"
+              class="el-upload-list__item ele-upload-list__item-content">
               <el-link :href="`${file.url}`" :underline="false" target="_blank">
                 <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
               </el-link>
@@ -60,7 +39,9 @@
         </div>
       </slot>
 
-      <el-icon v-if="isConstruction"><Plus /></el-icon>
+      <el-icon v-if="isConstruction">
+        <Plus />
+      </el-icon>
       <template #file="{ file }">
         <div class="pdf" v-if="isConstruction">
           <img src="@/assets/icons/svg/pdf.png" alt="" />
@@ -69,10 +50,14 @@
           </el-text>
           <div class="Shadow">
             <a :href="file.url" target="_blank">
-              <el-icon class="mr"><View /></el-icon>
+              <el-icon class="mr">
+                <View />
+              </el-icon>
             </a>
             <a href="#">
-              <el-icon @click="handleDelete((file as any).ossId, 'ossId')"><Delete /></el-icon>
+              <el-icon @click="handleDelete((file as any).ossId, 'ossId')">
+                <Delete />
+              </el-icon>
             </a>
           </div>
         </div>
@@ -112,6 +97,11 @@ const props = defineProps({
   autoUpload: propTypes.bool.def(true),
   // 是否显示文件列表
   showFileList: propTypes.bool.def(false),
+  // 默认显示的文件列表
+  defaultFileList: {
+    type: Array as any,
+    default: () => []
+  },
   // 其他参数
   data: propTypes.object.def({}),
   // 成功回调
@@ -155,7 +145,6 @@ const fileUploadRef = ref<ElUploadInstance>();
 const accept = computed(() => {
   return props.fileType.map((value) => `.${value}`).join(',');
 });
-
 watch(
   () => props.modelValue,
   async (val) => {
@@ -169,6 +158,8 @@ watch(
       } else {
         const res = await listByIds(val as any);
         list = res.data.map((oss) => {
+          console.log(oss);
+
           return {
             name: oss.originalName,
             url: oss.url,
@@ -189,7 +180,13 @@ watch(
   },
   { deep: true, immediate: true }
 );
+watch(() => props.defaultFileList, () => {
+  if (props.defaultFileList.length === 0) return;
+  props.defaultFileList.forEach((item: any) => {
+    fileList.value.push(item);
+  });
 
+}, { deep: true, immediate: true });
 // 上传前校检格式和大小
 const handleBeforeUpload = (file: any) => {
   // 校检文件类型
@@ -414,21 +411,25 @@ defineExpose({ submitUpload });
   border-radius: 6px;
   position: relative;
   width: 100%;
+
   img {
     width: 40%;
   }
+
   &:hover {
     .Shadow {
       opacity: 1;
     }
   }
-  > span {
+
+  >span {
     width: 100%;
   }
 }
 
 .upload-file-list {
   margin: 0;
+
   .el-upload-list__item {
     border: 1px solid #e4e7ed;
     line-height: 2;
@@ -443,6 +444,7 @@ defineExpose({ submitUpload });
   align-items: center;
   color: inherit;
 }
+
 .Shadow {
   align-items: center;
   background-color: rgba(0, 0, 0, 0.5);
@@ -464,6 +466,7 @@ defineExpose({ submitUpload });
 .ele-upload-list__item-content-action .el-link {
   margin-right: 10px;
 }
+
 .el-icon.avatar-uploader-icon {
   border: 1px dashed #cdd0d6;
   border-radius: 6px;