添加附件的组件

src/components/Annex/src/Annex.vue

@@ -3,10 +3,7 @@
   <div class="annex">
     <div class="title flex items-center">
       <div class="title-txt">附件</div>
-      <el-button type="primary" @click="handleImport">
+      <UploadFile :isShowFile="false" :isShowTip="false" title="添加附件"/>
-        <Icon icon="ep:upload" />
-        添加附件
-      </el-button>
     </div>
     <div class="list">
       <div class="item flex items-start" v-for="(item, index) in data.annexList" :key="index">
@@ -28,6 +25,7 @@
 </template>
 
 <script lang="ts" setup>
+import UploadFile from '@/components/UploadFile/src/UploadFile.vue'
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 defineComponent({

src/components/UploadFile/src/UploadFile.vue

@@ -20,15 +20,19 @@
       :on-preview="handlePreview"
       class="upload-file-uploader"
     >
-      <el-button type="primary"><Icon icon="ep:upload-filled" />选取文件</el-button>
+      <el-button type="primary"><Icon icon="ep:upload-filled" />{{ title }}</el-button>
       <template v-if="isShowTip" #tip>
-        <div style="font-size: 8px">
+        <div style="font-size: 8px;margin-top: 10px;">
           大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
         </div>
         <div style="font-size: 8px">
           格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b> 的文件
         </div>
       </template>
+      <template  v-if="!isShowFile" #file >
+          <div>
+          </div>
+        </template>
     </el-upload>
   </div>
 </template>
@@ -56,13 +60,15 @@ const props = defineProps({
   limit: propTypes.number.def(5), // 数量限制
   autoUpload: propTypes.bool.def(true), // 自动上传
   drag: propTypes.bool.def(false), // 拖拽上传
-  isShowTip: propTypes.bool.def(true) // 是否显示提示
+  isShowTip: propTypes.bool.def(true), // 是否显示提示
+  isShowFile: propTypes.bool.def(true), // 是否显示上传的文件
+  
 })
 // ========== 上传相关 ==========
 const valueRef = ref(props.modelValue)
 const uploadRef = ref<UploadInstance>()
 const uploadList = ref<UploadUserFile[]>([])
-const fileList = ref<UploadUserFile[]>(props.modelValue)
+const fileList = props.modelValue && props.modelValue.length > 0 ? ref<UploadUserFile[]>(props.modelValue) : ref<UploadUserFile[]>([])
 const uploadNumber = ref<number>(0)
 const uploadHeaders = ref({
   Authorization: 'Bearer ' + getAccessToken(),
@@ -148,7 +154,7 @@ const listToString = (list: UploadUserFile[], separator?: string) => {
 
 :deep(.upload-file-list .el-upload-list__item) {
   position: relative;
-  margin-bottom: 10px;
+  // margin-bottom: 10px;
   line-height: 2;
   border: 1px solid #e4e7ed;
 }