feat: 更新pcap页面dev-1.0

7 files changed, 191 insertions, 109 deletions

diff --git a/src/views/applications/detail.vue b/src/views/applications/detail.vue
index 82c0478..4816ff9 100644
--- a/src/views/applications/detail.vue
+++ b/src/views/applications/detail.vue
@@ -306,7 +306,7 @@
             >
             </i>
             <i
-              class="asw-icon icon-shutu"
+              class="asw-icon icon-Graph"
               :class="{ 'primary-color': signatureType == 'mind' }"
               @click="changeType('mind')"
             >
diff --git a/src/views/applications/index.vue b/src/views/applications/index.vue
index c9446bd..f73691b 100644
--- a/src/views/applications/index.vue
+++ b/src/views/applications/index.vue
@@ -252,11 +252,19 @@ const tableEdit = (row) => {
 
 // 删除
 const tableDelete = (row) => {
-  ElMessageBox.confirm(t('overall.confirm_delete'), t('overall.hint'), {
-    confirmButtonText: t('overall.confirm'),
-    cancelButtonText: t('overall.cancel'),
-    type: 'warning',
-  }).then(async () => {
+  ElMessageBox.confirm(
+    t('overall.delete_hint_message', {
+      name: row.name,
+    }),
+    t('overall.delete_hint_title', {
+      name: t('application.application'),
+    }),
+    {
+      confirmButtonText: t('overall.delete'),
+      cancelButtonText: t('overall.cancel'),
+      customClass: 'delete-box',
+    }
+  ).then(async () => {
     const params = {
       ids: row.id,
     };
@@ -351,7 +359,7 @@ const fetchList = async (reset = true) => {
       // 合并请求的数据
       tableData.value = [...tableData.value, ...records];
     }
-    paginat.total = res.data.total
+    paginat.total = res.data.total;
     // 判断是否有无更多的数据
     paginat.noMore = tableData.value.length >= res.data.total;
   } else {
diff --git a/src/views/envMgts/index.vue b/src/views/envMgts/index.vue
index 93ddb98..2f05349 100644
--- a/src/views/envMgts/index.vue
+++ b/src/views/envMgts/index.vue
@@ -274,7 +274,6 @@ const tableDelete = (row) => {
     {
       confirmButtonText: t('overall.delete'),
       cancelButtonText: t('overall.cancel'),
-      iconClass: 'width:0px;height:0px;',
       customClass: 'delete-box',
     }
   )
diff --git a/src/views/environments/start.vue b/src/views/environments/start.vue
index 3c09efc..fd79386 100644
--- a/src/views/environments/start.vue
+++ b/src/views/environments/start.vue
@@ -936,16 +936,15 @@ const cancelAcl = () => {
 // 删除acl
 const aclDelete = async (row) => {
   ElMessageBox.confirm(
-    t('env_mgt.delete_hint_message', {
-      environment: t('environment.acl'),
+    t('overall.delete_hint_message', {
+      name: t('environment.acl'),
     }),
-    t('overall.delete_hint', {
+    t('overall.delete_hint_title', {
       name: t('environment.acl'),
     }),
     {
       confirmButtonText: t('overall.delete'),
       cancelButtonText: t('overall.cancel'),
-      iconClass: 'width:0px;height:0px;',
       customClass: 'delete-box',
     }
   )
diff --git a/src/views/packages/index.vue b/src/views/packages/index.vue
index b6067ee..8081f3f 100644
--- a/src/views/packages/index.vue
+++ b/src/views/packages/index.vue
@@ -209,7 +209,6 @@
     }), t('package.delete_hint_title'), {
       confirmButtonText: t('overall.delete'),
       cancelButtonText: t('overall.cancel'),
-      iconClass: 'width:0px;height:0px;',
       customClass: 'delete-box',
     }).then(async () => {
       const params = {
diff --git a/src/views/pcaps/index.vue b/src/views/pcaps/index.vue
index 7cd4bb6..6ec5fb9 100644
--- a/src/views/pcaps/index.vue
+++ b/src/views/pcaps/index.vue
@@ -13,7 +13,7 @@
           v-model="keyword"
           size="large"
           :placeholder="t('overall.search')"
-          style="width: 450px; margin-right: 20px"
+          style="width: 450px"
           clearable
           @keydown.enter="fetchList()"
           @clear="fetchList()"
@@ -22,52 +22,64 @@
             <el-icon><Search /></el-icon>
           </template>
         </el-input>
-        <el-button
-          v-has="'pacp_analyze'"
-          size="large"
-          plain
-          @click="webshark"
-          :disabled="websharkDisabled"
-        >
-          {{ t('overall.webshark') }}
-        </el-button>
-        <el-button
-          v-has="'pacp_analyze'"
-          size="large"
-          plain
-          @click="explore"
-          :disabled="exploreDisabled"
-        >
-          {{ t('overall.explore') }}
-        </el-button>
-
-        <el-dropdown v-has="['pacp_parse']">
-          <el-button
-            v-has="'pacp_parse'"
-            size="large"
-            plain
-            style="margin-left: 20px"
-          >
-            {{ t('overall.actions') }}
+        <el-dropdown v-has="['pacp_view', 'pacp_parse', 'pacp_analyze']">
+          <el-button size="large" plain style="margin-left: 20px">
+            {{ t('overall.batch') }}
             <el-icon class="el-icon--right"><arrow-down /></el-icon>
           </el-button>
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item :disabled="!tableSelect.length" @click="parse">
-                <span>{{ t('overall.parse') }}</span>
-              </el-dropdown-item>
-              <el-dropdown-item
-                :disabled="!tableSelect.length"
-                @click="deleteParse"
-              >
-                <span>{{ t('overall.delete_parsed_session') }}</span>
-              </el-dropdown-item>
-              <el-dropdown-item
-                :disabled="!tableSelect.length"
-                @click="download"
-              >
-                <span>{{ t('overall.download') }}</span>
-              </el-dropdown-item>
+              <div v-has="'pacp_parse'">
+                <el-dropdown-item
+                  :disabled="!tableSelect.length"
+                  @click="parse(tableSelect)"
+                >
+                  <i class="asw-icon icon-fenxi" style="width: 18px"></i>
+                  <span>{{ t('pcap.parse_into_sessions') }}</span>
+                </el-dropdown-item>
+              </div>
+              <div v-has="'pacp_parse'">
+                <el-dropdown-item
+                  :disabled="!tableSelect.length"
+                  @click="deleteParse(tableSelect)"
+                >
+                  <i class="asw-icon icon-qingchu" style="width: 18px"></i>
+                  <span>{{ t('pcap.clear_parsed_sessions') }}</span>
+                </el-dropdown-item>
+              </div>
+              <div v-has="'pacp_view'">
+                <el-dropdown-item
+                  :disabled="!tableSelect.length"
+                  @click="download(tableSelect)"
+                >
+                  <i class="asw-icon icon-Download" style="width: 18px"></i>
+                  <span>
+                    {{ t('overall.download') }}
+                    {{ t('pcap.pcap_file') }}
+                  </span>
+                </el-dropdown-item>
+              </div>
+              <div v-has="'pacp_analyze'">
+                <el-dropdown-item
+                  :disabled="exploreDisabled"
+                  @click="explore(tableSelect)"
+                >
+                  <i class="asw-icon icon-shujutansuo" style="width: 18px"></i>
+                  <span>{{ t('overall.explore') }}</span>
+                </el-dropdown-item>
+              </div>
+              <div v-has="'pacp_delete'">
+                <el-dropdown-item
+                  :disabled="!tableSelect.length"
+                  @click="tableDelete(tableSelect)"
+                >
+                  <i class="asw-icon icon-Delete" style="width: 18px"></i>
+                  <span>
+                    {{ t('overall.delete') }}
+                    {{ t('pcap.pcap_file') }}
+                  </span>
+                </el-dropdown-item>
+              </div>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
@@ -161,18 +173,69 @@
           :label="t('overall.actions')"
         >
           <template #default="scope">
-            <el-tooltip
-              effect="dark"
-              :content="t('overall.delete')"
-              placement="top"
+            <el-dropdown
+              key="actions"
+              placement="bottom"
+              popper-class="list-action_more"
+              v-has="['pacp_view', 'pacp_parse', 'pacp_analyze']"
             >
-              <i
-                v-has="'pacp_delete'"
-                class="asw-icon icon-Delete cp"
-                style="font-size: 18px"
-                @click="tableDelete(scope.row)"
-              ></i>
-            </el-tooltip>
+              <div class="more-icon"><i class="asw-icon icon-more cp"></i></div>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <div v-has="'pacp_parse'">
+                    <el-dropdown-item @click="parse([scope.row])">
+                      <i class="asw-icon icon-fenxi" style="width: 18px"></i>
+                      <span>{{ t('pcap.parse_into_sessions') }}</span>
+                    </el-dropdown-item>
+                  </div>
+                  <div v-has="'pacp_parse'">
+                    <el-dropdown-item @click="deleteParse([scope.row])">
+                      <i class="asw-icon icon-qingchu" style="width: 18px"></i>
+                      <span>{{ t('pcap.clear_parsed_sessions') }}</span>
+                    </el-dropdown-item>
+                  </div>
+                  <div v-has="'pacp_view'">
+                    <el-dropdown-item @click="download([scope.row])">
+                      <i class="asw-icon icon-Download" style="width: 18px"></i>
+                      <span>
+                        {{ t('overall.download') }}
+                        {{ t('pcap.pcap_file') }}
+                      </span>
+                    </el-dropdown-item>
+                  </div>
+                  <div v-has="'pacp_view'">
+                    <el-dropdown-item
+                      @click="webshark([scope.row])"
+                      :disabled="scope.row.status != 'Indexed'"
+                    >
+                      <i class="asw-icon icon-Vector" style="width: 18px"></i>
+                      <span>{{ t('pcap.view_in_webshark') }}</span>
+                    </el-dropdown-item>
+                  </div>
+                  <div v-has="'pacp_analyze'">
+                    <el-dropdown-item
+                      :disabled="scope.row.status != 'Indexed'"
+                      @click="explore([scope.row])"
+                    >
+                      <i
+                        class="asw-icon icon-shujutansuo"
+                        style="width: 18px"
+                      ></i>
+                      <span>{{ t('overall.explore') }}</span>
+                    </el-dropdown-item>
+                  </div>
+                  <div v-has="'pacp_delete'">
+                    <el-dropdown-item @click="tableDelete([scope.row])">
+                      <i class="asw-icon icon-Delete" style="width: 18px"></i>
+                      <span>
+                        {{ t('overall.delete') }}
+                        {{ t('pcap.pcap_file') }}
+                      </span>
+                    </el-dropdown-item>
+                  </div>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
           </template>
         </el-table-column>
       </el-table>
@@ -226,11 +289,11 @@ const exploreDisabled = computed(() => {
 });
 
 // webshark
-const webshark = async () => {
-  if (!tableSelect.value.length) {
+const webshark = async (arr) => {
+  if (!arr.length) {
     return;
   }
-  const id = tableSelect.value[0].id;
+  const id = arr[0].id;
   const res = await pcapWebsharkApi(id);
   if (res.code == 200) {
     const url = get(res, 'data.url', '');
@@ -243,11 +306,11 @@ const webshark = async () => {
 };
 
 // explore
-const explore = async () => {
-  if (!tableSelect.value.length) {
+const explore = async (arr) => {
+  if (!arr.length) {
     return;
   }
-  const pcapIds = tableSelect.value.map((item) => item.id).join(',');
+  const pcapIds = arr.map((item) => item.id).join(',');
   const params = {
     workspaceId: workspace.value.id,
     pcapIds,
@@ -262,18 +325,18 @@ const explore = async () => {
 };
 
 // 解析
-const parse = async () => {
-  if (!tableSelect.value.length) {
+const parse = async (arr) => {
+  if (!arr.length) {
     return;
   }
   // 解析中
   tableData.value.forEach((item) => {
-    if (tableSelect.value.some((subItem) => item.id == subItem.id)) {
+    if (arr.some((subItem) => item.id == subItem.id)) {
       item.status = 'Parsing';
     }
   });
   loading.value = true;
-  const ids = tableSelect.value
+  const ids = arr
     .map((item) => {
       return item.id;
     })
@@ -300,12 +363,12 @@ const parse = async () => {
 };
 
 // 删除解析
-const deleteParse = async () => {
-  if (!tableSelect.value.length) {
+const deleteParse = async (arr) => {
+  if (!arr.length) {
     return;
   }
   loading.value = true;
-  const ids = tableSelect.value
+  const ids = arr
     .map((item) => {
       return item.id;
     })
@@ -317,7 +380,7 @@ const deleteParse = async () => {
   const res = await pcapUnparseApi(params);
   if (res.code == 200) {
     tableData.value.forEach((item) => {
-      if (tableSelect.value.some((subItem) => item.id == subItem.id)) {
+      if (arr.some((subItem) => item.id == subItem.id)) {
         item.status = 'Uploaded';
       }
     });
@@ -330,11 +393,11 @@ const deleteParse = async () => {
 };
 
 // 下载
-const download = async () => {
-  if (!tableSelect.value.length) {
+const download = async (arr) => {
+  if (!arr.length) {
     return;
   }
-  const ids = tableSelect.value
+  const ids = arr
     .map((item) => {
       return item.id;
     })
@@ -349,6 +412,44 @@ const download = async () => {
   downloadFile(res);
 };
 
+// 删除
+const tableDelete = (arr) => {
+  if (!arr.length) {
+    return;
+  }
+  ElMessageBox.confirm(
+    t('overall.delete_hint_message', {
+      name: t('pcap.pcap_file'),
+    }),
+    t('overall.delete_hint_title', {
+      name: t('pcap.pcap_file'),
+    }),
+    {
+      confirmButtonText: t('overall.delete'),
+      cancelButtonText: t('overall.cancel'),
+      customClass: 'delete-box',
+    }
+  )
+    .then(async () => {
+      const ids = arr
+        .map((item) => {
+          return item.id;
+        })
+        .join(',');
+      const params = {
+        ids,
+      };
+      const res = await pcapDeleteApi(params);
+      if (res.code == 200) {
+        fetchList();
+        ElMessage.success(t('message.delete_success'));
+      } else {
+        ElMessage.error(res.msg || res.error);
+      }
+    })
+    .catch((e) => {});
+};
+
 // 上传数据
 const uploadFileList = ref([]);
 // 上传
@@ -396,7 +497,7 @@ const tableTitle = ref([
   {
     minWidth: 150,
     prop: 'createUserId',
-    label: t('overall.upload_user'),
+    label: t('overall.upload_by'),
     sortable: 'custom',
   },
   {
@@ -470,29 +571,6 @@ const defaultSort = { prop: 'createTimestamp', order: 'descending' };
 // 排序
 const { orderBy, sortChange } = useTable('-create_timestamp', fetchList);
 
-// 查看详情
-const tableView = (row) => {};
-
-// 删除
-const tableDelete = (row) => {
-  ElMessageBox.confirm(t('overall.confirm_delete'), t('overall.hint'), {
-    confirmButtonText: t('overall.confirm'),
-    cancelButtonText: t('overall.cancel'),
-    type: 'warning',
-  }).then(async () => {
-    const params = {
-      ids: row.id,
-    };
-    const res = await pcapDeleteApi(params);
-    if (res.code == 200) {
-      fetchList();
-      ElMessage.success(t('message.delete_success'));
-    } else {
-      ElMessage.error(res.msg || res.error);
-    }
-  });
-};
-
 onBeforeMount(() => {
   fetchList();
 });
diff --git a/src/views/workspaces/members/index.vue b/src/views/workspaces/members/index.vue
index 4ad6a02..7ff0e5d 100644
--- a/src/views/workspaces/members/index.vue
+++ b/src/views/workspaces/members/index.vue
@@ -324,7 +324,6 @@ const tableDelete = (row) => {
       confirmButtonText: t('overall.delete'),
       cancelButtonText: t('overall.cancel'),
       dangerouslyUseHTMLString: true,
-      iconClass: 'width:0px;height:0px;',
       customClass: 'delete-box',
     }
   )