From 9125c529e8a833c91835250f3614c288c8e5e216 Mon Sep 17 00:00:00 2001
From: YCA001 <2915341988@qq.com>
Date: Thu, 21 Sep 2023 20:02:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=86=E9=A1=B5=E9=80=BB=E8=BE=91=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/pages/listShow/CreateX509.vue   |  14 +--
 app/src/pages/listShow/PrivateTable.vue |  35 ++++++--
 app/src/pages/listShow/PublicTable.vue  |  45 +++++++---
 app/src/store/data.ts                   | 110 +++++++++++++-----------
 4 files changed, 128 insertions(+), 76 deletions(-)

diff --git a/app/src/pages/listShow/CreateX509.vue b/app/src/pages/listShow/CreateX509.vue
index 5285708..3c64738 100644
--- a/app/src/pages/listShow/CreateX509.vue
+++ b/app/src/pages/listShow/CreateX509.vue
@@ -219,18 +219,20 @@ const getParentKey = () => {
   const param = {
     visibility: formLabelAlign.visibility,
     key_type: '',
+    page_size: 100,
+    page_number: 1,
   };
   if (formLabelAlign.type === 'x509ica') {
     param.key_type = 'x509ca';
-    queryAllData(param).then((res:any) => {
-      parentKey.value = res;
-      formLabelAlign.parentKey = res?.length?parentKey.value[0].id:''
+    queryAllData(param).then((res: any) => {
+      parentKey.value = res.data;
+      formLabelAlign.parentKey = res?.length ? parentKey.value[0].id : '';
     });
   } else if (formLabelAlign.type === 'x509ee') {
     param.key_type = 'x509ica';
-    queryAllData(param).then((res:any) => {
-      parentKey.value = res;
-      formLabelAlign.parentKey = res?.length?parentKey.value[0].id:'';
+    queryAllData(param).then((res: any) => {
+      parentKey.value = res.data;
+      formLabelAlign.parentKey = res?.length ? parentKey.value[0].id : '';
     });
   }
 };
diff --git a/app/src/pages/listShow/PrivateTable.vue b/app/src/pages/listShow/PrivateTable.vue
index 29eeece..da3e3e3 100644
--- a/app/src/pages/listShow/PrivateTable.vue
+++ b/app/src/pages/listShow/PrivateTable.vue
@@ -1,17 +1,26 @@
 <template>
   <div class="title">Personal Keys</div>
-  <div class="smalltitle">
-    ({{ useData.pgpPriData }} openPGP keys,{{ useData.x509PriData }} X509 keys)
-  </div>
+  <div class="smalltitle">({{ useData.pgpPriData }} keys)</div>
   <div class="search">
     <el-input
       v-model="searchInput"
-      placeholder="Search by Name"
+      placeholder="Search"
       :prefix-icon="Search"
       @input="querySearch"
       @clear="clearSearchInput"
       :clearable="true"
-    />
+    >
+      <template #prepend>
+        <el-select
+          v-model="useData.paginationPri.select"
+          placeholder="Select"
+          style="width: 115px"
+        >
+          <el-option label="Name" value="name" />
+          <el-option label="Description" value="description" />
+        </el-select>
+      </template>
+    </el-input>
   </div>
   <el-table
     ref="multipleTableRef"
@@ -42,7 +51,7 @@
     </el-table-column>
     <el-table-column
       prop="description"
-      label="Descirption"
+      label="Description"
       align="left"
       show-overflow-tooltip
     />
@@ -196,7 +205,10 @@
       </template>
     </el-table-column>
   </el-table>
-  <div class="demo-pagination-block">
+  <div
+    class="demo-pagination-block"
+    v-if="useData.paginationPri.totalCount > 10"
+  >
     <el-pagination
       class="o-pagination"
       :currentPage="useData.paginationPri.currentPage"
@@ -296,7 +308,7 @@
   </el-dialog>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted,watch } from 'vue';
 import { Search, ArrowDown } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 import Clipboard from 'clipboard';
@@ -469,11 +481,13 @@ const requestData = (val: any, value: any) => {
 onMounted(() => getAllData());
 //搜索
 const querySearch = () => {
+  useData.paginationPri.currentPage = 1;
   useData.paginationPri.searchInput = searchInput.value;
   getAllData();
 };
 //清空搜索
 const clearSearchInput = () => {
+  useData.paginationPri.currentPage = 1;
   getAllData();
 };
 //再次确认
@@ -542,6 +556,11 @@ const getKeyType = (val: any) => {
       return 'X509 End Entity';
   }
 };
+
+watch(() => useData.paginationPri.select,()=>{
+  useData.paginationPri.currentPage = 1;
+  getAllData();
+})
 </script>
 <style scoped lang="scss">
 .search {
diff --git a/app/src/pages/listShow/PublicTable.vue b/app/src/pages/listShow/PublicTable.vue
index 41dd140..79c835e 100644
--- a/app/src/pages/listShow/PublicTable.vue
+++ b/app/src/pages/listShow/PublicTable.vue
@@ -1,19 +1,33 @@
 <template>
   <div class="title">Public Keys</div>
-  <div class="smalltitle">
-    ({{ useData.pgpData }} openPGP keys,{{ useData.x509Data }} X509 keys)
-  </div>
+  <div class="smalltitle">({{ useData.pgpData }} keys)</div>
   <div class="search">
     <el-input
       v-model="searchInput"
-      placeholder="Search by Name"
+      placeholder="Search"
       :prefix-icon="Search"
       @input="querySearch"
       @clear="clearSearchInput"
       :clearable="true"
-    />
+    >
+      <template #prepend>
+        <el-select
+          v-model="useData.pagination.select"
+          placeholder="Select"
+          style="width: 115px"
+        >
+          <el-option label="Name" value="name" />
+          <el-option label="Description" value="description" />
+        </el-select>
+      </template>
+    </el-input>
   </div>
-  <el-table ref="multipleTableRef" :data="useData.tableData" border style="width: 100%">
+  <el-table
+    ref="multipleTableRef"
+    :data="useData.tableData"
+    border
+    style="width: 100%"
+  >
     <el-table-column label="Name" show-overflow-tooltip prop="name">
     </el-table-column>
     <el-table-column prop="key_state" label="State" align="left">
@@ -48,7 +62,7 @@
     />
     <el-table-column
       prop="description"
-      label="Descirption"
+      label="Description"
       align="left"
       width="200"
       show-overflow-tooltip
@@ -69,21 +83,18 @@
       label="Create Time"
       align="left"
       show-overflow-tooltip
-     
     />
     <el-table-column
       prop="expire_at"
       label="Expire Time"
       align="left"
       show-overflow-tooltip
-     
     >
     </el-table-column>
     <el-table-column
       prop="attributes.key_type"
       label="Key Algorithm"
       align="left"
-     
       show-overflow-tooltip
     >
       <template #default="scope">
@@ -200,7 +211,7 @@
       </template>
     </el-table-column>
   </el-table>
-  <div class="demo-pagination-block">
+  <div class="demo-pagination-block" v-if="useData.pagination.totalCount > 10">
     <el-pagination
       class="o-pagination"
       :currentPage="useData.pagination.currentPage"
@@ -277,7 +288,7 @@
     center
     show-close
   >
-    <el-input v-model="copyValue"  type="textarea" :disabled="false" autosize/>
+    <el-input v-model="copyValue" type="textarea" :disabled="false" autosize />
     <div
       :data-clipboard-text="copyValue"
       class="tag"
@@ -298,8 +309,8 @@
   </el-dialog>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { Search,ArrowDown } from '@element-plus/icons-vue';
+import { ref, onMounted,watch } from 'vue';
+import { Search, ArrowDown } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 import Clipboard from 'clipboard';
 import { useDataStore } from '@/store/data';
@@ -457,11 +468,13 @@ onMounted(() => getAllData());
 
 //搜索
 const querySearch = () => {
+  useData.pagination.currentPage = 1;
   useData.pagination.searchInput = searchInput.value;
   getAllData();
 };
 //清空搜索
 const clearSearchInput = () => {
+  useData.pagination.currentPage = 1;
   getAllData();
 };
 //再次确认
@@ -524,6 +537,10 @@ const getKeyType = (val: any) => {
       return 'X509 End Entity';
   }
 };
+watch(() => useData.pagination.select,()=>{
+  useData.pagination.currentPage = 1;
+  getAllData();
+})
 </script>
 <style scoped lang="scss">
 .comment {
diff --git a/app/src/store/data.ts b/app/src/store/data.ts
index d8b8e72..85bdea2 100644
--- a/app/src/store/data.ts
+++ b/app/src/store/data.ts
@@ -19,71 +19,85 @@ export const useDataStore = defineStore('data', {
       currentPage: 1,
       pageSize: 10,
       searchInput: '',
+      select: 'name',
     },
-    realPriData:[] as any,
+    realPriData: [] as any,
     paginationPri: {
       totalCount: 0,
       currentPage: 1,
       pageSize: 10,
       searchInput: '',
+      select: 'name',
     },
-    email:''
+    email: '',
+    param: {},
+    paramPri: {},
   }),
   actions: {
     async getTableData() {
-      const param = {
-        visibility: this.visibility,
-      };
-      const res = await queryAllData(param);
-      this.realData = res;
-      this.tableData = this.realData.slice(
-        (this.pagination.currentPage - 1) * this.pagination.pageSize,
-        this.pagination.currentPage * this.pagination.pageSize
-      );
-      if (this.pagination.searchInput) {
-        this.tableData = this.realData.filter((item: any) =>
-        item.name.toLowerCase().includes(this.pagination.searchInput)
-      );
-        this.pagination.totalCount = this.tableData.length;
+      if (this.pagination.searchInput && this.pagination.select === 'name') {
+        this.param = {
+          visibility: this.visibility,
+          page_size: this.pagination.pageSize,
+          page_number: this.pagination.currentPage,
+          name: this.pagination.searchInput,
+        };
+      } else if (
+        this.pagination.searchInput &&
+        this.pagination.select === 'description'
+      ) {
+        this.param = {
+          visibility: this.visibility,
+          page_size: this.pagination.pageSize,
+          page_number: this.pagination.currentPage,
+          description: this.pagination.searchInput,
+        };
       } else {
-        this.pagination.totalCount = this.realData.length;
+        this.param = {
+          visibility: this.visibility,
+          page_size: this.pagination.pageSize,
+          page_number: this.pagination.currentPage,
+        };
       }
-
-      this.pgpData = this.realData.filter(
-        (item: any) => item.key_type === 'pgp'
-      ).length;
-      this.x509Data = this.realData.filter(
-        (item: any) => item.key_type.includes('x509')
-      ).length;
+      const res = await queryAllData(this.param);
+      this.realData = res;
+      this.tableData = this.realData.data;
+      this.pagination.totalCount = this.realData.meta.total_count;
+      this.pgpData = this.realData.meta.total_count;
+    
     },
     async getPriTableData() {
-      const param = {
-        visibility: this.visib,
-      };
-      const res = await queryAllData(param);
-      this.realPriData = res;
-      this.tablePriData = this.realPriData.slice(
-        (this.paginationPri.currentPage - 1) * this.paginationPri.pageSize,
-        this.paginationPri.currentPage * this.paginationPri.pageSize
-      );
-      if (this.paginationPri.searchInput) {
-        this.tablePriData = this.realPriData.filter(
-          (item: any) => item.name.toLowerCase().includes(this.paginationPri.searchInput)
-        );
-        this.paginationPri.totalCount = this.tablePriData.length;
+      if (this.paginationPri.searchInput && this.paginationPri.select === 'name') {
+        this.paramPri = {
+          visibility: this.visib,
+          page_size: this.paginationPri.pageSize,
+          page_number: this.paginationPri.currentPage,
+          name: this.paginationPri.searchInput,
+        };
+      } else if (
+        this.paginationPri.searchInput &&
+        this.paginationPri.select === 'description'
+      ) {
+        this.paramPri = {
+          visibility: this.visib,
+          page_size: this.paginationPri.pageSize,
+          page_number: this.paginationPri.currentPage,
+          description: this.paginationPri.searchInput,
+        };
       } else {
-        this.paginationPri.totalCount = this.realPriData.length;
+        this.paramPri = {
+          visibility: this.visib,
+          page_size: this.paginationPri.pageSize,
+          page_number: this.paginationPri.currentPage,
+        };
       }
-
-      this.pgpPriData = this.realPriData.filter(
-        (item: any) => item.key_type === 'pgp'
-      ).length;
-      this.x509PriData = this.realPriData.filter(
-        (item: any) => item.key_type.includes('x509')
-      ).length;
+      const res = await queryAllData(this.paramPri);
+      this.realPriData = res;
+      this.tablePriData = this.realPriData.data
+      this.paginationPri.totalCount = this.realPriData.meta.total_count;
+      this.pgpPriData = this.realPriData.meta.total_count;
     },
   },
 
-  getters: {
-  },
+  getters: {},
 });
-- 
Gitee