添加清空回收站进度

src/assets/less/Suless.less

@@ -967,7 +967,7 @@ textarea,
 }
 
 .result-wrapper {
-  background: rgb(15, 41, 61) !important;
+  background: #fff !important;
   border: none !important;
   height: 360px;
 

src/views/fileManage/index.vue

@@ -461,7 +461,7 @@ export default {
 }
 
 .quarter-div {
-  min-width: 200px;
+  min-width: 196px;
   height: 130px;
   float: left;
   margin-right: 12px;

src/views/fileManage/modules/deleteFileModal.vue

@@ -0,0 +1,92 @@
+<template>
+    <a-modal
+      v-model:visible="visible"
+      title="任务进度"
+      :footer="null"
+      :closable="false"
+      :mask="false"
+      :maskClosable="false"
+      class="progress-modal"
+      :dialog-style="{ top: '800px' ,left :'620px'}"
+    >
+      <!-- 自定义关闭按钮 -->
+      <div 
+        class="close-btn" 
+        type="text" 
+        @click="handleClose"
+      >
+        ×
+      </div>
+      
+      <a-progress 
+        :percent="percent" 
+        status="active" 
+        :stroke-color="'#0D9C54'"
+      />
+    </a-modal>
+</template>
+
+<script>
+
+  export default {
+    name: "deleteFileModal",
+    components: {
+    },
+    data () {
+      return {
+        visible: false,
+        percent:0
+      }
+    },
+    created () {
+    },
+    methods: {
+      open () {
+        this.rangeTime=[];
+        this.visible =true;
+        setInterval(() => {
+          if (this.percent < 100) {
+            this.percent += 10;
+          } else {
+            clearInterval(intervalId);
+          }
+        }, 500);
+      },
+      handleClose(){
+        this.visible =false;
+      }
+    }
+  }
+</script>
+
+<style scoped>
+/* 隐藏默认模态框头部 */
+.progress-modal :deep(.ant-modal-header) {
+  display: none;
+}
+
+/* 调整内容区域 */
+.progress-modal :deep(.ant-modal-body) {
+  padding: 40px 16px 16px;
+  min-height: 60px;
+  position: relative;
+}
+
+/* 自定义关闭按钮 */
+.close-btn {
+  width: 22px;
+  height: 22px;
+  background: rgba(4,60,89,0.43);
+  border: 1px solid #D6DAE3;
+  position: absolute;
+  top: 16px;
+  right: 18px;
+  text-align: center;
+  color: #ffffff;
+  z-index: 1;
+}
+
+.close-btn:hover {
+  color: #666;
+}
+</style>

src/views/fileManage/recycling.vue

@@ -11,14 +11,17 @@
             </a-form-item>
           </a-col>
           <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-            <a-col :md="6" :sm="24" >
+            <a-col :md="6" :sm="8" >
                 <a-button type="primary"  style="left: 10px" @click="loadData" icon="search">查询</a-button>
                 <a-button type="primary"  @click="searchReset" icon="reload" style="margin-left: 8px;left: 10px">重置</a-button>
             </a-col>
           </span>
-
+          <a-col :md="15" :sm="24" style="text-align: right;">
+            <a-button type="primary"  @click="alldelete" icon="delete" style="background-color: brown;">清空回收站</a-button>
+          </a-col> 
         </a-row>
       </a-form>
+      
     </div>
     <!-- table区域-begin -->
     <div style="height:900px;overflow-y:auto;">
@@ -50,12 +53,13 @@
     <!-- table区域-end -->
 
     <!-- 表单区域 -->
-    <uploadModal ref="modalForm" @ok="loadData"></uploadModal>
+    <deleteFileModal ref="modalForm"></deleteFileModal>
+
   </a-card>
 </template>
 
 <script>
-  import uploadModal from './modules/uploadModal'
+  import deleteFileModal from './modules/deleteFileModal'
   import { getlist,
     deleteFile,
     recoverFile } from '@/api/recycleBin'
@@ -66,7 +70,7 @@
     name: "recycling",
     mixins:[JeecgListMixin],
     components: {
-      uploadModal,
+      deleteFileModal,
       JEllipsis,
       VNodes: {
         functional: true,
@@ -174,11 +178,9 @@
             }
         });
       },
-      handleAdd() {
-        this.$refs.modalForm.add();
-        this.$refs.modalForm.title = "文件上传";
-        this.$refs.modalForm.dataLinkType=this.queryParam.dataLinkType;
-      },
+      alldelete(){
+        this.$refs.modalForm.open();
+      }
     }
   }
 </script>