From 3ec5bf9510b0acb9c14ad44ade57b98a6719fb76 Mon Sep 17 00:00:00 2001
From: YCA001 <2915341988@qq.com>
Date: Fri, 30 Jun 2023 11:44:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/api/show.ts                    | 197 +++++++-----
 app/src/pages/listShow/ChangeCheck.vue |   4 +-
 app/src/pages/listShow/CreatePgp.vue   |   8 +-
 app/src/pages/listShow/CreateX509.vue  | 321 ++++++++++++-------
 app/src/pages/listShow/PublicTable.vue | 409 +++++++++++++++++--------
 app/src/store/data.ts                  |   5 +-
 6 files changed, 626 insertions(+), 318 deletions(-)

diff --git a/app/src/api/show.ts b/app/src/api/show.ts
index 1790d9f..6ce0683 100644
--- a/app/src/api/show.ts
+++ b/app/src/api/show.ts
@@ -2,116 +2,149 @@
 import http from './request';
 
 // 换取token
-export const getToken = () => http({
-    method:'get',
-    url:'/api/v1/users/info',
-
-});
+export const getToken = () =>
+  http({
+    method: 'get',
+    url: '/api/v1/users/info',
+  });
 
 // 退出登录
 
-export const queryIDToken = () => http({
-    method:'post',
-    url:'/api/v1/users/logout',
-
-
-});
+export const queryIDToken = () =>
+  http({
+    method: 'post',
+    url: '/api/v1/users/logout',
+  });
 
 // 跳转
-export const queryCourse = () => http({
-    method:'get',
-    url:'/api/v1/users/login',
-});
+export const queryCourse = () =>
+  http({
+    method: 'get',
+    url: '/api/v1/users/login',
+  });
 // 详细信息
-export const queryPermissions = (param:any) => http({
-    method:'get',
-    url:'/api/v1/users/',
-    params:param
-
-});
+export const queryPermissions = (param: any) =>
+  http({
+    method: 'get',
+    url: '/api/v1/users/',
+    params: param,
+  });
 // 获取表格数据
-export const queryAllData = (param:any) => http({
-    method:'get',
-    url:'/api/v1/keys/',
-    params:param
-
-});
+export const queryAllData = (param: any) =>
+  http({
+    method: 'get',
+    url: '/api/v1/keys/',
+    params: param,
+  });
 
 //创建新的key
-export const queryNewKey = (param:any) => http({
-    method:'post',
-    url:'/api/v1/keys/',
+export const queryNewKey = (param: any) =>
+  http({
+    method: 'post',
+    url: '/api/v1/keys/',
     data: param,
-
-});
+  });
 //注入key
-export const queryImportKey = (param:any) => http({
-    method:'post',
-    url:'/api/v1/keys/import',
+export const queryImportKey = (param: any) =>
+  http({
+    method: 'post',
+    url: '/api/v1/keys/import',
     data: param,
-
-});
+  });
 //删除key
-export const queryDeleteKey = (param:any) => http({
-    method:'post',
-    url:`/api/v1/keys/${param}/cancel_delete`,
-
-
-});
+export const queryDeleteKey = (param: any) =>
+  http({
+    method: 'post',
+    url: `/api/v1/keys/${param}/actions/cancel_delete`,
+  });
 //无效化key
-export const queryDisableKey = (param:any) => http({
-    method:'post',
-    url:`/api/v1/keys/${param}/disable`,
-
-});
+export const queryDisableKey = (param: any) =>
+  http({
+    method: 'post',
+    url: `/api/v1/keys/${param}/actions/disable`,
+  });
 //激活key
-export const queryEnableKey = (param:any) => http({
-    method:'post',
-    url:`/api/v1/keys/${param}/enable`,
-
+export const queryEnableKey = (param: any) =>
+  http({
+    method: 'post',
+    url: `/api/v1/keys/${param}/actions/enable`,
+  });
+//吊销key
+export const queryRevokeKey = (param: any, val: any) =>
+  http({
+    method: 'post',
+    url: `/api/v1/keys/${param}/actions/request_revoke`,
+    data: val,
+  });
+//取消吊销key
+export const queryCancelRevoke = (param: any) =>
+http({
+  method: 'post',
+  url: `/api/v1/keys/${param}/actions/cancel_revoke`,
 });
 //导出key
-export const queryExportKey = (param:any) => http({
-    method:'post',
-    url:`/api/v1/keys/${param}/export`,
-
-
-});
+export const queryExportKey = (param: any) =>
+  http({
+    method: 'post',
+    url: `/api/v1/keys/${param}/actions/export`,
+  });
 //请求删除key
-export const queryRequestKey = (param:any) => http({
-    method:'post',
-    url:`/api/v1/keys/${param}/request_delete`,
-
-
-});
+export const queryRequestKey = (param: any) =>
+  http({
+    method: 'post',
+    url: `/api/v1/keys/${param}/actions/request_delete`,
+  });
 
 //获取api_keys列表
 
-export const queryApiKeys = () => http({
-    method:'get',
-    url:'/api/v1/users/api_keys',
-
-});
+export const queryApiKeys = () =>
+  http({
+    method: 'get',
+    url: '/api/v1/users/api_keys',
+  });
 
 // 删除api_keys
 
-export const deleteApiKeys = (param:any) => http({
-    method:'delete',
-    url:`/api/v1/users/api_keys/${param}`,
-
-});
+export const deleteApiKeys = (param: any) =>
+  http({
+    method: 'delete',
+    url: `/api/v1/users/api_keys/${param}`,
+  });
 //注册api_keys
 
-export const getApiKeys = (param:any) => http({
-    method:'post',
-    url:'/api/v1/users/api_keys',
+export const getApiKeys = (param: any) =>
+  http({
+    method: 'post',
+    url: '/api/v1/users/api_keys',
     data: param,
-});
+  });
 
 //姓名查重
 
-export const headName = (param:any) => http({
-    method:'head',
-    url:'/api/v1/keys/name_identical',
+export const headName = (param: any) =>
+  http({
+    method: 'head',
+    url: '/api/v1/keys/name_identical',
     params: param,
-});
\ No newline at end of file
+  });
+
+//certificate
+export const queryCertificate = (param: any) =>
+  http({
+    method: 'get',
+    url: `/api/v1/keys/${param}/certificate`,
+  });
+
+//crl
+export const queryCrl = (param: any) =>
+  http({
+    method: 'get',
+    url: `/api/v1/keys/${param}/crl`,
+  });
+
+//public_key
+export const queryPublicKey = (param: any) =>
+  http({
+    method: 'get',
+    url: `/api/v1/keys/${param}/public_key`,
+  });
diff --git a/app/src/pages/listShow/ChangeCheck.vue b/app/src/pages/listShow/ChangeCheck.vue
index 87cc132..d403a64 100644
--- a/app/src/pages/listShow/ChangeCheck.vue
+++ b/app/src/pages/listShow/ChangeCheck.vue
@@ -28,8 +28,8 @@ import { useBaseStore } from "@/store/base";
 const useBase = useBaseStore();
 const title = ref();
 const check = [
-  "Import X509 Keys",
-  "Import PGP Keys",
+  // "Import X509 Keys",
+  // "Import PGP Keys",
   "Create X509 Keys",
   "Create PGP Keys",
 ];
diff --git a/app/src/pages/listShow/CreatePgp.vue b/app/src/pages/listShow/CreatePgp.vue
index d52c2ca..cafe9b6 100644
--- a/app/src/pages/listShow/CreatePgp.vue
+++ b/app/src/pages/listShow/CreatePgp.vue
@@ -25,7 +25,7 @@
       <el-form-item label="Expire"  prop="expire_at">
         <el-date-picker
           v-model="formLabelAlign.expire_at"
-          type="date"
+          type="month"
           placeholder="Choose expire date time"
           :disabled-date="pickerOptions"
         />
@@ -36,7 +36,7 @@
           class="ml-4"
           @change="getChange()"
         >
-          <el-radio label="private" title="The private key pairs are managed by yourself, no one else can seen/use your private key pairs.">Private</el-radio>
+          <!-- <el-radio label="private" title="The private key pairs are managed by yourself, no one else can seen/use your private key pairs.">Private</el-radio> -->
           <el-radio label="public" title="The public key pairs can be created/used by any administrator, but in order to delete it, it require triple confirms from different administrators.">Public</el-radio>
         </el-radio-group>
       </el-form-item>
@@ -115,7 +115,7 @@ const formLabelAlign = reactive<any>({
   name: "",
   expire_at: "",
   description: "",
-  visibility: "private",
+  visibility: "public",
   paw2: "",
   digest_algorithm: "none",
   key_type: "rsa",
@@ -210,7 +210,7 @@ const cleanForm = () => {
   formLabelAlign.digest_algorithm = "none";
   formLabelAlign.key_length = "2048";
   formLabelAlign.key_type = "rsa";
-  formLabelAlign.visibility = "private";
+  formLabelAlign.visibility = "public";
 };
 // 表单校验规则
 /* 姓名 */
diff --git a/app/src/pages/listShow/CreateX509.vue b/app/src/pages/listShow/CreateX509.vue
index 713878c..3dfd67d 100644
--- a/app/src/pages/listShow/CreateX509.vue
+++ b/app/src/pages/listShow/CreateX509.vue
@@ -20,20 +20,50 @@
         />
       </el-form-item>
       <el-form-item label="Type">
-        <el-input placeholder="X509" disabled />
+        <el-select
+          v-model="formLabelAlign.type"
+          class="m-2"
+          size="small"
+          @change="getParentKey()"
+        >
+          <el-option
+            v-for="item in typeKey"
+            :key="item.value"
+            :label="item.value.toUpperCase()"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="Parent Key" v-if="formLabelAlign.type !== 'x509ca'">
+        <el-select v-model="formLabelAlign.parentKey" class="m-2" size="small">
+          <el-option
+            v-for="item in parentKey"
+            :key="item.id"
+            :label="item.id"
+            :value="item.id"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="Expire" prop="expire_at">
         <el-date-picker
           v-model="formLabelAlign.expire_at"
-          type="date"
+          type="month"
           placeholder="Choose expire date time"
           :disabled-date="pickerOptions"
         />
       </el-form-item>
       <el-form-item label="Visibility">
-        <el-radio-group v-model="formLabelAlign.visibility" class="ml-4"  @change="getChange()">
-          <el-radio label="private" title="The private key pairs are managed by yourself, no one else can seen/use your private key pairs.">Private</el-radio>
-          <el-radio label="public" title="The public key pairs can be created/used by any administrator, but in order to delete it, it require triple confirms from different administrators.">Public</el-radio>
+        <el-radio-group
+          v-model="formLabelAlign.visibility"
+          class="ml-4"
+          @change="getChange()"
+        >
+          <!-- <el-radio label="private" title="The private key pairs are managed by yourself, no one else can seen/use your private key pairs.">Private</el-radio> -->
+          <el-radio
+            label="public"
+            title="The public key pairs can be created/used by any administrator, but in order to delete it, it require triple confirms from different administrators."
+            >Public</el-radio
+          >
         </el-radio-group>
       </el-form-item>
     </div>
@@ -42,7 +72,11 @@
       <div class="table">
         <div class="sel">
           <el-form-item label="Key Type">
-            <el-select v-model="formLabelAlign.key_type" class="m-2" size="small">
+            <el-select
+              v-model="formLabelAlign.key_type"
+              class="m-2"
+              size="small"
+            >
               <el-option
                 v-for="item in optionsType"
                 :key="item.value"
@@ -52,7 +86,11 @@
             </el-select>
           </el-form-item>
           <el-form-item label="Key Size">
-            <el-select v-model="formLabelAlign.key_length" class="m-2" size="small">
+            <el-select
+              v-model="formLabelAlign.key_length"
+              class="m-2"
+              size="small"
+            >
               <el-option
                 v-for="item in optionsSize"
                 :key="item.value"
@@ -62,7 +100,11 @@
             </el-select>
           </el-form-item>
           <el-form-item label="Digest Algorithm">
-            <el-select v-model="formLabelAlign.digest_algorithm" class="m-2" size="small">
+            <el-select
+              v-model="formLabelAlign.digest_algorithm"
+              class="m-2"
+              size="small"
+            >
               <el-option
                 v-for="item in optionsDigest"
                 :key="item.value"
@@ -73,139 +115,193 @@
           </el-form-item>
         </div>
         <el-form-item label="Common Name(CN)" prop="common_name">
-          <el-input v-model="formLabelAlign.common_name" placeholder="Common Name" />
+          <el-input
+            v-model="formLabelAlign.common_name"
+            placeholder="Common Name"
+          />
         </el-form-item>
         <el-form-item label="Locality(L)" prop="locality">
           <el-input v-model="formLabelAlign.locality" placeholder="Locality" />
         </el-form-item>
-        <el-form-item label="Organizational Unit(OU)" prop="organizational_unit">
+        <el-form-item
+          label="Organizational Unit(OU)"
+          prop="organizational_unit"
+        >
           <el-input
             v-model="formLabelAlign.organizational_unit"
             placeholder="Organizational Unit"
           />
         </el-form-item>
         <el-form-item label="State or ProvinceName(ST)" prop="province_name">
-          <el-input v-model="formLabelAlign.province_name" placeholder="State or ProvinceName" />
+          <el-input
+            v-model="formLabelAlign.province_name"
+            placeholder="State or ProvinceName"
+          />
         </el-form-item>
         <el-form-item label="Organization(O)" prop="organization">
-          <el-input v-model="formLabelAlign.organization" placeholder="Organization" />
+          <el-input
+            v-model="formLabelAlign.organization"
+            placeholder="Organization"
+          />
         </el-form-item>
         <el-form-item label="Country Name(C)" prop="country_name">
-          <el-input v-model="formLabelAlign.country_name" placeholder="Country Name" />
+          <el-input
+            v-model="formLabelAlign.country_name"
+            placeholder="Country Name"
+          />
         </el-form-item>
       </div>
     </div>
     <div class="dialog-footer">
       <el-button @click="resetForm(ruleFormRef)">Cancel</el-button>
-      <el-button type="primary" @click="submitForm(ruleFormRef)"> Confirm </el-button>
+      <el-button type="primary" @click="submitForm(ruleFormRef)">
+        Confirm
+      </el-button>
     </div>
   </el-form>
 </template>
 <script setup lang="ts">
-import { reactive, ref, watch, computed } from "vue";
-import { useBaseStore } from "@/store/base";
-import { queryNewKey, headName  } from "@/api/show";
-import type { FormInstance, FormRules } from "element-plus";
-import { originalDate } from "@/shared/utils/helper";
-import { useDataStore } from "@/store/data";
+import { reactive, ref, watch, computed } from 'vue';
+import { useBaseStore } from '@/store/base';
+import { queryNewKey, headName, queryAllData } from '@/api/show';
+import type { FormInstance, FormRules } from 'element-plus';
+import { originalDate } from '@/shared/utils/helper';
+import { useDataStore } from '@/store/data';
 const useData = useDataStore();
 const ruleFormRef = ref<FormInstance>();
 const useBase = useBaseStore();
+const parentKey = ref();
+
 const formLabelAlign = reactive<any>({
-  name: "",
-  expire_at: "",
-  description: "",
-  visibility: "private",
-  digest_algorithm: "md5",
-  key_type: "rsa",
-  key_length: "2048",
-  common_name: "",
-  locality: "",
-  organizational_unit: "",
-  organization: "",
-  province_name: "",
-  country_name: "",
+  name: '',
+  expire_at: '',
+  description: '',
+  visibility: 'public',
+  digest_algorithm: 'md5',
+  key_type: 'rsa',
+  type: 'x509ca',
+  key_length: '2048',
+  common_name: '',
+  locality: '',
+  organizational_unit: '',
+  organization: '',
+  province_name: '',
+  country_name: '',
+  parentKey: '',
 });
 const param = ref({
-  name: "test-x509",
-  description: "hello world",
-  key_type: "x509",
-  visibility: "public",
+  name: 'test-x509',
+  description: 'hello world',
+  key_type: 'x509',
+  visibility: 'public',
+  parent_id:'',
   attributes: {
-    digest_algorithm: "sha2_256",
-    key_type: "rsa",
-    key_length: "2048",
-    common_name: "common name",
-    organizational_unit: "organizational_unit",
-    organization: "organization",
-    locality: "locality",
-    province_name: "province_name",
-    country_name: "country_name",
+    digest_algorithm: 'sha2_256',
+    key_type: 'rsa',
+    key_length: '2048',
+    common_name: 'common name',
+    organizational_unit: 'organizational_unit',
+    organization: 'organization',
+    locality: 'locality',
+    province_name: 'province_name',
+    country_name: 'country_name',
   },
   create_at: originalDate(new Date()),
-  expire_at: "2024-05-12 22:10:57+08:00",
+  expire_at: '2024-05-12 22:10:57+08:00',
 });
+//获取parentKey
+const getParentKey = () => {
+  const param = {
+    key_type: '',
+  };
+  if (formLabelAlign.type === 'x509ica') {
+    param.key_type = 'x509ca';
+    queryAllData(param).then(res => {
+      parentKey.value = res;
+      formLabelAlign.parentKey = parentKey.value[0].id;
+    });
+  } else if (formLabelAlign.type === 'x509ee') {
+    param.key_type = 'x509ica';
+    queryAllData(param).then(res => {
+      parentKey.value = res;
+      formLabelAlign.parentKey = parentKey.value[0].id
+    });
+  }
+};
+getParentKey();
 const optionsType = [
   {
-    value: "rsa",
-    label: "RSA",
+    value: 'rsa',
+    label: 'RSA',
   },
   {
-    value: "dsa",
-    label: "DSA",
+    value: 'dsa',
+    label: 'DSA',
+  },
+];
+const typeKey = [
+  {
+    value: 'x509ca',
+  },
+  {
+    value: 'x509ica',
+  },
+  {
+    value: 'x509ee',
   },
 ];
 const optionsSize = [
   {
-    value: "2048",
-    label: "2048",
+    value: '2048',
+    label: '2048',
   },
   {
-    value: "3072",
-    label: "3072",
+    value: '3072',
+    label: '3072',
   },
   {
-    value: "4096",
-    label: "4096",
+    value: '4096',
+    label: '4096',
   },
 ];
 const optionsDigest = [
   {
-    value: "md5",
-    label: "md5",
+    value: 'md5',
+    label: 'md5',
   },
   {
-    value: "sha1",
-    label: "sha1",
+    value: 'sha1',
+    label: 'sha1',
   },
   {
-    value: "sha2_224",
-    label: "sha2_224",
+    value: 'sha2_224',
+    label: 'sha2_224',
   },
   {
-    value: "sha2_256",
-    label: "sha2_256",
+    value: 'sha2_256',
+    label: 'sha2_256',
   },
   {
-    value: "sha2_384",
-    label: "sha2_384",
+    value: 'sha2_384',
+    label: 'sha2_384',
   },
   {
-    value: "sha2_512",
-    label: "sha2_512",
-  }
+    value: 'sha2_512',
+    label: 'sha2_512',
+  },
 ];
 
 //删除掉
 const cleanForm = () => {
   const keys = Object.keys(formLabelAlign);
-  keys.forEach((key) => {
-    formLabelAlign[key] = "";
+  keys.forEach(key => {
+    formLabelAlign[key] = '';
   });
-  formLabelAlign.digest_algorithm = "md5";
-  formLabelAlign.key_length = "2048";
-  formLabelAlign.key_type = "rsa";
-  formLabelAlign.visibility = "private";
+  formLabelAlign.digest_algorithm = 'md5';
+  formLabelAlign.key_length = '2048';
+  formLabelAlign.key_type = 'rsa';
+  formLabelAlign.visibility = 'public';
+  formLabelAlign.type = 'x509ca';
 };
 // 表单校验规则
 /* 姓名 */
@@ -216,7 +312,7 @@ const isName = (rule: any, value: any, callback: any) => {
     const reg = /^[a-zA-Z0-9-]{4,20}$/;
     const name = reg.test(value);
     if (!name) {
-      callback(new Error("The value contains 4 to 20 English characters"));
+      callback(new Error('The value contains 4 to 20 English characters'));
     } else {
       const param = ref({
         name: value,
@@ -224,19 +320,21 @@ const isName = (rule: any, value: any, callback: any) => {
       });
       headName(param.value)
         .then(() => callback())
-        .catch(() => callback(new Error("Duplicate name")));
+        .catch(() => callback(new Error('Duplicate name')));
     }
   }
 };
 /* 描述 */
 const isDesc = (rule: any, value: any, callback: any) => {
   if (!value) {
-    callback(console.log("avc"));
+    callback(console.log('avc'));
   } else {
     const reg = /^[a-zA-Z0-9-]{1,100}$/;
     const desc = reg.test(value);
     if (!desc) {
-      callback(new Error("The value contains a maximum of 100 English characters"));
+      callback(
+        new Error('The value contains a maximum of 100 English characters')
+      );
     } else {
       callback();
     }
@@ -250,7 +348,7 @@ const isCommon = (rule: any, value: any, callback: any) => {
     const reg = /^[a-zA-Z]{1,30}$/;
     const desc = reg.test(value);
     if (!desc) {
-      callback(new Error("The value contains 1 to 30 English characters"));
+      callback(new Error('The value contains 1 to 30 English characters'));
     } else {
       callback();
     }
@@ -263,7 +361,7 @@ const isCountry = (rule: any, value: any, callback: any) => {
     const reg = /^[a-zA-Z]{2,2}$/;
     const desc = reg.test(value);
     if (!desc) {
-      callback(new Error("The value contains 2 English characters only"));
+      callback(new Error('The value contains 2 English characters only'));
     } else {
       callback();
     }
@@ -272,44 +370,48 @@ const isCountry = (rule: any, value: any, callback: any) => {
 
 const rules = reactive<FormRules>({
   name: [
-    { required: true, message: "please enter", trigger: "blur" },
-    { validator: isName, trigger: ["blur","change"] },
+    { required: true, message: 'please enter', trigger: 'blur' },
+    { validator: isName, trigger: ['blur', 'change'] },
   ],
   description: [
-    { required: true, message: "please enter", trigger: "blur" },
-    { validator: isDesc, trigger: ["blur","change"]  },
+    { required: true, message: 'please enter', trigger: 'blur' },
+    { validator: isDesc, trigger: ['blur', 'change'] },
   ],
   common_name: [
-    { required: true, message: "please enter", trigger: "blur" },
-    { validator: isCommon, trigger: "blur" },
+    { required: true, message: 'please enter', trigger: 'blur' },
+    { validator: isCommon, trigger: 'blur' },
   ],
   country_name: [
-    { required: true, message: "please enter", trigger: "blur" },
-    { validator: isCountry, trigger: ["blur", "change"], },
+    { required: true, message: 'please enter', trigger: 'blur' },
+    { validator: isCountry, trigger: ['blur', 'change'] },
   ],
-  locality:[
-    { required: true, message: "please enter", trigger: "blur" },
-    { validator: isCommon, trigger: "blur" },
+  locality: [
+    { required: true, message: 'please enter', trigger: 'blur' },
+    { validator: isCommon, trigger: 'blur' },
   ],
-  organizational_unit:[
-    { required: true, message: "please enter", trigger: "blur" },
-    { validator: isCommon, trigger: "blur" },
+  organizational_unit: [
+    { required: true, message: 'please enter', trigger: 'blur' },
+    { validator: isCommon, trigger: 'blur' },
   ],
-  organization:[
-    { required: true, message: "please enter", trigger: "blur" },
-    { validator: isCommon, trigger: "blur" },
+  organization: [
+    { required: true, message: 'please enter', trigger: 'blur' },
+    { validator: isCommon, trigger: 'blur' },
   ],
-  province_name:[
-    { required: true, message: "please enter", trigger: "blur" },
-    { validator: isCommon, trigger: "blur" },
+  province_name: [
+    { required: true, message: 'please enter', trigger: 'blur' },
+    { validator: isCommon, trigger: 'blur' },
   ],
   expire_at: [
-    { required: true, message: "Please enter expire", trigger: ["blur", "change"] },
+    {
+      required: true,
+      message: 'Please enter expire',
+      trigger: ['blur', 'change'],
+    },
   ],
 });
 //表单请求
 const newKey = () => {
-  queryNewKey(param.value).then((res) => {
+  queryNewKey(param.value).then(res => {
     useBase.dialogVisible = false;
     useData.getTableData();
     useData.getPriTableData();
@@ -321,16 +423,19 @@ const getData = () => {
   param.value.name = formLabelAlign.name;
   param.value.description = formLabelAlign.description;
   param.value.visibility = formLabelAlign.visibility;
+  param.value.key_type = formLabelAlign.type;
   param.value.expire_at = originalDate(formLabelAlign.expire_at);
   param.value.attributes.digest_algorithm = formLabelAlign.digest_algorithm;
   param.value.attributes.key_length = formLabelAlign.key_length;
   param.value.attributes.key_type = formLabelAlign.key_type;
   param.value.attributes.common_name = formLabelAlign.common_name;
-  param.value.attributes.organizational_unit = formLabelAlign.organizational_unit;
+  param.value.attributes.organizational_unit =
+    formLabelAlign.organizational_unit;
   param.value.attributes.organization = formLabelAlign.organization;
   param.value.attributes.locality = formLabelAlign.locality;
   param.value.attributes.province_name = formLabelAlign.province_name;
   param.value.attributes.country_name = formLabelAlign.country_name;
+  param.value.parent_id = formLabelAlign.parentKey;
 };
 //提交表单
 const submitForm = async (formEl: FormInstance | undefined) => {
@@ -338,7 +443,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
   await formEl.validate((valid, fields) => {
     if (valid) {
       getData();
-      newKey(); 
+      newKey();
     } else {
       return false;
     }
@@ -348,7 +453,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
 const resetForm = (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   useBase.dialogVisible = false;
-  cleanForm()
+  cleanForm();
   formEl.resetFields();
 };
 const pickerOptions = (time: any) => {
@@ -357,7 +462,7 @@ const pickerOptions = (time: any) => {
 
 //改变radio
 const getChange = () => {
-  formLabelAlign.name = "";
+  formLabelAlign.name = '';
 };
 </script>
 <style scoped lang="scss">
diff --git a/app/src/pages/listShow/PublicTable.vue b/app/src/pages/listShow/PublicTable.vue
index e78e5cf..f415bd3 100644
--- a/app/src/pages/listShow/PublicTable.vue
+++ b/app/src/pages/listShow/PublicTable.vue
@@ -16,9 +16,11 @@
   <el-table ref="multipleTableRef" :data="useData.tableData">
     <el-table-column label="Name" show-overflow-tooltip prop="name" width="150">
     </el-table-column>
-    <el-table-column prop="key_state" label="State" align="left" width="80">
+    <el-table-column prop="key_state" label="State" align="left" width="150">
       <template #default="scope">
-        <span :title="scope.row.request_delete_users">{{ scope.row.key_state }}</span>
+        <span :title="scope.row.request_delete_users">{{
+          scope.row.key_state
+        }}</span>
       </template>
     </el-table-column>
     <el-table-column label="Fingerprint" align="left" show-overflow-tooltip>
@@ -103,71 +105,94 @@
       show-overflow-tooltip
       width="90"
     />
-    <!-- <el-table-column
-      prop="user"
-      label="Author"
-      align="left"
-      show-overflow-tooltip
-      width="80"
-    /> -->
     <el-table-column fixed="right" label="Operations" width="400">
       <template #default="scope">
-        <el-button
-          link
-          type="primary"
-          size="small"
-          @click="exportData(scope.row.id, scope.row.name)"
-          >Export</el-button
-        >
-        <span v-if="scope.row.key_state === 'pending'"
-          >|
-          <el-button
-            link
-            type="primary"
-            size="small"
-            @click="deleteData(scope.row.id, 'cancel delete')"
-            >Cancel Delete</el-button
-          > </span
-        ><span v-else
-          >| <el-button link type="" size="small" disabled>Cancel Delete</el-button></span
-        ><span v-if="scope.row.key_state === 'disabled'"
-          >|
-          <el-button
-            link
-            type="primary"
-            size="small"
-            @click="enableData(scope.row.id, 'enable')"
-            >Enable</el-button
-          ></span
-        ><span v-else
-          >| <el-button link type="" size="small" disabled>Enable</el-button></span
-        >
-        <span v-if="scope.row.key_state === 'enabled'"
-          >|
-          <el-button
-            link
-            type="primary"
-            size="small"
-            @click="disableData(scope.row.id, 'disable')"
-            >Disable</el-button
-          ></span
-        ><span v-else
-          >| <el-button link type="" size="small" disabled>Disable</el-button></span
-        >
-        <span v-if="scope.row.key_state !== 'enabled'"
-          >|
-          <el-button
-            link
-            type="primary"
-            size="small"
-            @click="requestData(scope.row.id, 'request delete')"
-            >Request Delete</el-button
-          ></span
-        >
-        <span v-else
-          >|
-          <el-button link type="" size="small" disabled>Request Delete</el-button></span
-        >
+        <el-dropdown trigger="click">
+          <span
+            class="el-dropdown-link"
+            style="margin-right: 30px; cursor: pointer ;color:#002fa7"
+          >
+            View<el-icon class="el-icon--right"><arrow-down /></el-icon>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item
+                @click="exportData(scope.row.id, scope.row.name, 'certificate')"
+                :disabled="
+                  scope.row.key_type === 'x509ca' ||
+                  scope.row.key_type === 'x509ica' ||
+                  scope.row.key_type === 'x509ee'
+                    ? false
+                    : true
+                "
+                >Certificate</el-dropdown-item
+              >
+              <el-dropdown-item
+                @click="exportData(scope.row.id, scope.row.name, 'publicKey')"
+                :disabled="scope.row.key_type === 'pgp' ? false : true"
+                >Pubilc Key</el-dropdown-item
+              >
+              <el-dropdown-item
+                @click="exportData(scope.row.id, scope.row.name, 'crl')"
+                :disabled="
+                  scope.row.key_type === 'x509ca' ||
+                  scope.row.key_type === 'x509ica'
+                    ? false
+                    : true
+                "
+                >CRL</el-dropdown-item
+              >
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <el-dropdown trigger="click">
+          <span class="el-dropdown-link" style="cursor: pointer;color:#002fa7">
+            Actions<el-icon class="el-icon--right"><arrow-down /></el-icon>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item
+                :disabled="
+                  scope.row.key_state === 'pending_delete' ? false : true
+                "
+                @click="getData(scope.row.id, 'cancel delete')"
+                >Cancel Delete</el-dropdown-item
+              >
+              <el-dropdown-item
+                :disabled="scope.row.key_state === 'disabled' ? false : true"
+                @click="getData(scope.row.id, 'enable')"
+                >Enable</el-dropdown-item
+              >
+              <el-dropdown-item
+                :disabled="scope.row.key_state === 'enabled' ? false : true"
+                @click="getData(scope.row.id, 'disable')"
+                >Disable</el-dropdown-item
+              >
+              <el-dropdown-item
+                :disabled="scope.row.key_state !== 'enabled' ? false : true"
+                @click="getData(scope.row.id, 'request delete')"
+                >Request Delete</el-dropdown-item
+              >
+              <el-dropdown-item
+                :disabled="
+                  scope.row.key_type === 'x509ica' ||
+                  scope.row.key_type === 'x509ee'
+                    ? false
+                    : true
+                "
+                @click="getData(scope.row.id, 'revoke')"
+                >Revoke</el-dropdown-item
+              >
+              <el-dropdown-item
+                :disabled="
+                  scope.row.key_state === 'pending_revoke' ? false : true
+                "
+                @click="getData(scope.row.id, 'pending_revoke')"
+                >Cancel Revoke</el-dropdown-item
+              >
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
       </template>
     </el-table-column>
   </el-table>
@@ -189,31 +214,137 @@
       ></el-pagination
     >
   </div>
-  <el-dialog v-model="dialogVisible" title="Confirmation" width="30%" center>
-    <span class="textCenter"> Confirm to {{ witchChange }}</span>
+  <el-dialog
+    v-model="dialogVisible"
+    title="Confirmation"
+    width="30%"
+    center
+    :show-close="false"
+    :before-close="close"
+  >
+    <span class="textCenter">
+      Enter
+      <span style="color: red">{{
+        witchChange !== 'pending_revoke'
+          ? witchChange.toUpperCase()
+          : 'Cancel Revoke'
+      }}</span>
+      in the text box below to confirm the revoction</span
+    >
+    <div style="margin-top: 20px">
+      <el-input
+        v-model="textValue"
+        :placeholder="`Enter ${
+          witchChange !== 'pending_revoke'
+            ? witchChange.toUpperCase()
+            : 'Cancel Revoke'
+        } to confirm the revocation`"
+        @change="getText()"
+        onpaste="return false;"
+      />
+    </div>
+    <div style="margin-top: 20px" v-if="witchChange === 'revoke'">
+      <span style="margin-right: 20px; color: red">Reason</span>
+      <el-select
+        v-model="selectValue"
+        class="m-2"
+        :placeholder="selectValue.toUpperCase()"
+      >
+        <el-option
+          v-for="item in selectOptions"
+          :key="item.value"
+          :label="item.value.toUpperCase()"
+          :value="item.value"
+        />
+      </el-select>
+    </div>
 
     <div class="dialog-footer">
-      <el-button @click="dialogVisible = false">Cancel</el-button>
-      <el-button type="primary" @click="confirm()"> Confirm </el-button>
+      <el-button @click="cleanText()">Cancel</el-button>
+      <el-button type="primary" @click="confirm()" :disabled="trueText">
+        Confirm
+      </el-button>
     </div>
   </el-dialog>
+  <el-dialog v-model="dialogTwoVisible" title="Copy" width="30%" center>
+    <span :data-clipboard-text="copyValue" class="tag" @click="copy()">{{
+      copyValue
+    }}</span>
+  </el-dialog>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { Search } from "@element-plus/icons-vue";
-import { ElMessage } from "element-plus";
-import Clipboard from "clipboard";
-import { useDataStore } from "@/store/data";
+import { ref, onMounted } from 'vue';
+import { Search } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+import Clipboard from 'clipboard';
+import { useDataStore } from '@/store/data';
 import {
   queryDeleteKey,
   queryDisableKey,
   queryEnableKey,
-  queryExportKey,
+  queryRevokeKey,
   queryRequestKey,
-} from "@/api/show";
+  queryCertificate,
+  queryCancelRevoke,
+  queryCrl,
+  queryPublicKey,
+} from '@/api/show';
+import { ArrowDown } from '@element-plus/icons-vue';
 const dialogVisible = ref(false);
+const dialogTwoVisible = ref(false);
 const useData = useDataStore();
 const searchInput = ref();
+const textValue = ref();
+const trueText = ref(true);
+const copyValue = ref();
+//验证输入
+const close = () => {};
+const getText = () => {
+  if (textValue.value === witchChange.value.toUpperCase()) {
+    trueText.value = false;
+  } else {
+    trueText.value = true;
+  }
+};
+const cleanText = () => {
+  dialogVisible.value = false;
+  dialogTwoVisible.value = false;
+  textValue.value = '';
+  trueText.value = true;
+  selectValue.value = 'unspecified';
+};
+//选择框
+const selectValue = ref('unspecified');
+
+const selectOptions = [
+  {
+    value: 'unspecified',
+  },
+  {
+    value: 'key_compromise',
+  },
+  {
+    value: 'ca_compromise',
+  },
+  {
+    value: 'affiliation_changed',
+  },
+  {
+    value: 'superseded',
+  },
+  {
+    value: 'cessation_of_operation',
+  },
+  {
+    value: 'certificate_hold',
+  },
+  {
+    value: 'privilege_withdrawn',
+  },
+  {
+    value: 'aa_compromise',
+  },
+];
 // 显示第几页
 const handleCurrentChange = (val: any) => {
   // 改变默认的页数
@@ -233,16 +364,16 @@ const getAllData = () => {
   useData.getTableData();
 };
 const copy = () => {
-  let clipboard = new Clipboard(".tag");
-  clipboard.on("success", (e) => {
+  let clipboard = new Clipboard('.tag');
+  clipboard.on('success', e => {
     ElMessage({
-      message: "Successfully copied",
-      type: "success",
+      message: 'Successfully copied',
+      type: 'success',
     });
     clipboard.destroy();
   });
-  clipboard.on("error", (e) => {
-    ElMessage.error("Failed to copy");
+  clipboard.on('error', e => {
+    ElMessage.error('Failed to copy');
     clipboard.destroy();
   });
 };
@@ -250,42 +381,52 @@ const copy = () => {
 //导出txt
 const exportText = (dataStr: any) => {
   const name = exportName.value;
-  const element = document.createElement("a");
+  const element = document.createElement('a');
   element.setAttribute(
-    "href",
-    "data:pgp/plain;charset=utf-8," + encodeURIComponent(dataStr)
+    'href',
+    'data:pgp/plain;charset=utf-8,' + encodeURIComponent(dataStr)
   );
-  element.setAttribute("download", name);
-  element.style.display = "none";
+  element.setAttribute('download', name);
+  element.style.display = 'none';
   element.click();
 };
 
-const deleteData = (val: any, value: any) => {
-  dialogVisible.value = true;
-  witchChange.value = value;
-  witchOne.value = val;
-};
-const enableData = (val: any, value: any) => {
-  dialogVisible.value = true;
-  witchChange.value = value;
-  witchOne.value = val;
-};
-const disableData = (val: any, value: any) => {
+const getData = (val: any, value: any) => {
   dialogVisible.value = true;
   witchChange.value = value;
   witchOne.value = val;
 };
 const exportName = ref();
-const exportData = (val: any, value: any) => {
-  queryExportKey(val).then(
-    (res: any) => exportText(res.public_key),
-    (exportName.value = value)
-  );
-};
-const requestData = (val: any, value: any) => {
-  dialogVisible.value = true;
-  witchChange.value = value;
-  witchOne.value = val;
+const exportData = (val: any, value: any, name: any) => {
+  if (name === 'certificate') {
+    queryCertificate(val)
+      .then(
+        (res: any) => {
+          (dialogTwoVisible.value = true), (copyValue.value = res);
+        }
+        // exportText(res.public_key),
+        //   (exportName.value = value),
+      )
+      .catch((res: any) => {
+        ElMessage.error(res.response.data.detail);
+      });
+  } else if (name === 'crl') {
+    queryCrl(val)
+      .then((res: any) => {
+        (dialogTwoVisible.value = true), (copyValue.value = res);
+      })
+      .catch((res: any) => {
+        ElMessage.error(res.response.data.detail);
+      });
+  } else if (name === 'publicKey') {
+    queryPublicKey(val)
+      .then((res: any) => {
+        (dialogTwoVisible.value = true), (copyValue.value = res);
+      })
+      .catch((res: any) => {
+        ElMessage.error(res.response.data.detail);
+      });
+  }
 };
 onMounted(() => getAllData());
 
@@ -302,19 +443,47 @@ const clearSearchInput = () => {
 const witchChange = ref();
 const witchOne = ref();
 const confirm = () => {
-  if (witchChange.value === "cancel delete") {
-    queryDeleteKey(witchOne.value).then((res) => getAllData());
-    dialogVisible.value = false;
-  } else if (witchChange.value === "enable") {
-    queryEnableKey(witchOne.value).then((res) => getAllData());
-    dialogVisible.value = false;
-  } else if (witchChange.value === "disable") {
-    queryDisableKey(witchOne.value).then((res) => getAllData());
-    dialogVisible.value = false;
-  } else if (witchChange.value === "request delete") {
-    queryRequestKey(witchOne.value).then((res) => getAllData());
-    dialogVisible.value = false;
+  if (witchChange.value === 'cancel delete') {
+    queryDeleteKey(witchOne.value)
+      .then(res => getAllData())
+      .catch((res: any) => {
+        ElMessage.error(res.response.data.detail);
+      });
+  } else if (witchChange.value === 'enable') {
+    queryEnableKey(witchOne.value)
+      .then(res => getAllData())
+      .catch((res: any) => {
+        ElMessage.error(res.response.data.detail);
+      });
+  } else if (witchChange.value === 'disable') {
+    queryDisableKey(witchOne.value)
+      .then(res => getAllData())
+      .catch((res: any) => {
+        ElMessage.error(res.response.data.detail);
+      });
+  } else if (witchChange.value === 'request delete') {
+    queryRequestKey(witchOne.value)
+      .then(res => getAllData())
+      .catch((res: any) => {
+        ElMessage.error(res.response.data.detail);
+      });
+  } else if (witchChange.value === 'revoke') {
+    const val = {
+      reason: selectValue.value,
+    };
+    queryRevokeKey(witchOne.value, val)
+      .then(res => getAllData())
+      .catch((res: any) => {
+        ElMessage.error(res.response.data.detail);
+      });
+  } else if (witchChange.value === 'pending_revoke') {
+    queryCancelRevoke(witchOne.value)
+      .then((res: any) => getAllData())
+      .catch((res: any) => {
+        ElMessage.error(res.response.data.detail);
+      });
   }
+  cleanText();
 };
 </script>
 <style scoped lang="scss">
diff --git a/app/src/store/data.ts b/app/src/store/data.ts
index 3aa79c7..fb36621 100644
--- a/app/src/store/data.ts
+++ b/app/src/store/data.ts
@@ -32,7 +32,8 @@ export const useDataStore = defineStore('data', {
   actions: {
     async getTableData() {
       const param = {
-        visibility: this.visibility,
+        // visibility: this.visibility,
+        // key_type:'x509ica'
       };
       const res = await queryAllData(param);
       this.realData = res;
@@ -58,7 +59,7 @@ export const useDataStore = defineStore('data', {
     },
     async getPriTableData() {
       const param = {
-        visibility: this.visib,
+        // visibility: this.visib,
       };
       const res = await queryAllData(param);
       this.realPriData = res;
-- 
Gitee