feat: 增加批量操作

src/components/_base/navbar/components/download-center-modal/constants.ts

@@ -20,12 +20,12 @@ export const TABLE_COLUMNS = [
   {
     title: '所属模块',
     dataIndex: 'module',
-    width: 180,
+    width: 120,
   },
   {
     title: '下载时间',
     dataIndex: 'time',
-    width: 180,
+    width: 120,
     sortable: {
       sortDirections: ['ascend', 'descend'],
     },
@@ -33,6 +33,6 @@ export const TABLE_COLUMNS = [
   {
     title: '操作人员',
     dataIndex: 'name',
-    width: 180,
+    width: 120,
   },
 ];

src/components/_base/navbar/components/download-center-modal/index.vue

@@ -3,7 +3,7 @@
     v-model:visible="visible"
     title="下载中心"
     modal-class="download-center-modal"
-    width="780px"
+    width="860px"
     :mask-closable="false"
     :footer="false"
     @close="onClose"
@@ -33,6 +33,34 @@
         </a-select>
       </div>
     </div>
+
+    <div
+      v-if="dataSource.length > 0 && selectedItems.length > 0"
+      class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
+      :class="selectedItems.length > 0 ? 'selected' : ''"
+    >
+      <div class="flex items-center">
+        <div class="flex items-center">
+          <a-checkbox
+            :model-value="checkedAll"
+            :indeterminate="indeterminate"
+            class="mr-8px"
+            @change="handleSelectAll"
+          />
+          <span class="label mr-24px">
+            已选
+            <span class="color-#6D4CFE">{{ selectedItems.length }}</span>
+            个文件
+          </span>
+
+          <span class="operation-btn" @click="handleBatchDownload">批量下载</span>
+          <span class="operation-btn red" @click="handleBatchDelete"> 批量删除 </span>
+        </div>
+      </div>
+
+      <icon-close size="16" class="cursor-pointer color-#737478" @click="handleCloseTip" />
+    </div>
+
     <a-table
       ref="tableRef"
       :data="dataSource"
@@ -46,7 +74,7 @@
       :selected-keys="selectedItems"
       :pagination="false"
       :scroll="{ x: '100%' }"
-      class="file-table w-100% h-400px"
+      class="file-table w-100% flex-1"
       bordered
       @sorter-change="handleSorterChange"
       @select="handleSelect"
@@ -89,11 +117,11 @@
             {{ formatTableField(column, record, true) }}
           </template>
         </a-table-column>
-        <a-table-column data-index="operation" fixed="right" width="100" title="操作">
+        <a-table-column data-index="operation" width="100" title="操作">
           <template #cell="{ record }">
             <div class="flex items-center">
-              <img :src="icon1" width="14" height="14" class="mr-8px cursor-pointer" @click="openDelete(record)" />
+              <img :src="icon1" width="14" height="14" class="mr-8px cursor-pointer" @click="handleDelete(record)" />
-              <a-button type="outline" size="small" class="search-btn" @click="handleDownload(record)">下载</a-button>
+              <a-button type="outline" size="mini" class="search-btn" @click="handleDownload(record)">下载</a-button>
             </div>
           </template>
         </a-table-column>
@@ -181,15 +209,20 @@ const handleSorterChange = (column, order) => {
 };
 
 const handleSearch = () => {
-  console.log('handleSearch');
+  reload();
 };
-const openDelete = (record) => {
+const handleDelete = (record) => {
   const { id, file_name } = record;
   deleteTaskModalRef.value.open({
     id,
     name: `“${file_name || '-'}”`,
   });
 };
+const handleBatchDelete = () => {
+  const ids = selectedItems.value.map((item) => item.id);
+  const names = selectedItems.value.map((item) => `"${item.name || '-'}"`).join('，');
+  deleteTaskModalRef.value?.open({ id: ids, name: names });
+};
 const getGroups = async () => {
   const { code, data } = await fetchAccountGroups();
   if (code === 200) {
@@ -208,9 +241,16 @@ const handleSelectAll = (checked) => {
   }
 };
 
+const handleCloseTip = () => {
+  selectedItems.value = [];
+};
+
 const handleDownload = () => {
   console.log('handleDownload');
 };
+const handleBatchDownload = () => {
+  console.log('handleBatchDownload');
+};
 
 const onPageChange = (current) => {
   pageInfo.value.page = current;

src/components/_base/navbar/components/download-center-modal/style.scss

@@ -13,7 +13,18 @@
       box-shadow: 0 0 0 0 var(--color-primary-light-2);
     }
   }
+  .arco-modal-header {
+    .arco-modal-title {
+      color: var(--Text-1, #211f24);
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 24px;
+      font-family: $font-family-medium;
+    }
+  }
   .arco-modal-body {
+    height: 536px;
     padding: 24px 20px 40px;
     .filter-row {
       .filter-row-item {
@@ -35,10 +46,58 @@
         }
       }
     }
+    .tip-row {
+      border-radius: 2px;
+      background: #f0edff;
+      .label {
+        font-family: $font-family-medium;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px;
+      }
+      &.normal {
+        background: #ebf7f2;
+        .label {
+          color: #211f24;
+        }
+      }
+      &.abnormal {
+        background: #ffe7e4;
+        .label {
+          color: #211f24;
+        }
+      }
+      .err-btn {
+        background-color: #f64b31 !important;
+        color: var(--BG-white, #fff);
+        font-family: 'PingFang SC';
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; /* 166.667% */
+      }
+      .operation-btn {
+        padding: 0;
+        cursor: pointer;
+        color: var(--Brand-Brand-6, #6d4cfe);
+        font-family: $font-family-regular;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px; /* 157.143% */
+        &:not(:last-child) {
+          margin-right: 16px;
+        }
+        &.red {
+          color: #F64B31;
+        }
+      }
+    }
     .file-table {
       .cts {
         color: var(--Text-1, #211f24);
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;

src/components/_base/navbar/components/navbar-menu/style.scss

@@ -4,7 +4,7 @@
   margin-left: 40px;
   .menu-item-text {
     color: var(--Text-2, #3c4043);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;