add

src/components/uploadAnnex/index.vue

@@ -1,17 +1,16 @@
 <template>
     <el-upload
         accept="doc, docx, xls, xlsx, ppt, pptx, pdf, txt, zip, rar, tar, jpg, png, gif, jpeg, webp, wmv, avi, mpg, mpeg, 3gp, mov, mp4, flv, f4v, rmvb, mkv"
-        class="upload-demo" :show-file-list="false" aria-hidden="true" :headers="{ Token: userStore?.token }"
-        :action="base_url + '/upload/file'" :on-success="handleAvatarSuccess" ref="upload" :limit="5" multiple>
+        :show-file-list="true" aria-hidden="true" :headers="{ Token: userStore?.token }" :action="base_url + '/upload/file'"
+        :on-success="handleAvatarSuccess" ref="upload" :limit="100" multiple :on-preview="previewFile"
+        :on-remove="removeFile">
+        <template #tip>
+            <span class="text-primary" style="margin-left:5px;font-size:11px">提示:文件单个大小不能超过1个G</span>
+        </template>
         <el-button type="primary">
             上传
         </el-button>
     </el-upload>
-
-    <div v-for="(item, index) in formData[value]" class="ml-5 flex ">
-        <el-link :href="item.uri" type="primary" target="_blank"> {{ item.name }}</el-link>
-        <span class="ml-2 cursor-pointer" @click="delFile(index)">x</span>
-    </div>
 </template>
 <script setup lang="ts">
 import { ref, defineProps } from "vue"
@@ -32,13 +31,33 @@ const props = defineProps({
 })
 
 const handleAvatarSuccess = (response: any) => {
-
     props.formData[props.value] ||= []
     // @ts-ignore
     response.code != 0 ? props.formData[props.value].push({ uri: response.data.uri, name: response.data.name }) : ElMessage.error(response.msg);
 };
 
-// 删除上传的文件
-const delFile = (index: number) => { props.formData[props.value].splice(index, 1) }
 
-</script>
+const previewFile = (e: any) => {
+    if (!e.response) return
+    const a = document.createElement('a')
+    a.href = e.response?.data?.uri
+    a.target = '_blank'
+    a.click()
+}
+
+
+const removeFile = (e: any) => {
+    if (!e.response) return
+    let uri = e.response?.data?.uri
+    let index = props.formData[props.value].findIndex(item => item.uri == uri)
+    props.formData[props.value].splice(index, 1)
+
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-icon--close-tip) {
+    visibility: hidden;
+    opacity: 0;
+}
+</style>

src/views/oa_seal_cate/index.vue

@@ -16,6 +16,11 @@
                     <el-button @click="resetParams">重置</el-button>
                 </el-form-item>
             </el-form>
+            <div>
+                <el-form-item>
+                    <uploadAnnex :formData="formData"></uploadAnnex>
+                </el-form-item>
+            </div>
         </el-card>
         <el-card class="!border-none" v-loading="pager.loading" shadow="never">
             <el-button v-perms="['works/xzgl.oa_seal_cate/add']" type="primary" @click="handleAdd">
@@ -56,6 +61,7 @@
 </template>
 
 <script lang="ts" setup name="oaSealCateLists">
+import uploadAnnex from './../../components/uploadAnnex/index.vue'
 import { usePaging } from '@/hooks/usePaging'
 import { useDictData } from '@/hooks/useDictOptions'
 import { apiOaSealCateLists, apiOaSealCateDelete } from '@/api/oa_seal_cate'
@@ -68,6 +74,10 @@ const editRef = shallowRef<InstanceType<typeof EditPopup>>()
 const showEdit = ref(false)
 
 
+const formData = reactive({
+    annex: []
+})
+
 // 查询条件
 const queryParams = reactive({
     title: '',