feat:1.密钥管理完成

src/api/sys/key.js

@@ -1,8 +1,31 @@
 import service from '@/utils/request'
 
-export const keyList = () => {
+export const keyList = data => {
   return service({
     url: '/v1/keys/list',
-    method: 'post'
+    method: 'post',
+    data
+  })
+}
+export const keyCreate = data => {
+  return service({
+    url: '/v1/keys/create',
+    method: 'post',
+    data
+  })
+}
+export const keyUpdate = data => {
+  return service({
+    url: '/v1/keys/update',
+    method: 'post',
+    data
+  })
+}
+
+export const keyDelete = data => {
+  return service({
+    url: '/v1/keys/delete',
+    method: 'post',
+    data
   })
 }

src/view/ude/key/key.vue

@@ -2,17 +2,12 @@
   <div>
     <div class="gva-search-box">
       <el-form :inline="true" :model="searchInfo">
-        <el-form-item label="密钥标识">
-          <el-input v-model="searchInfo.iden" placeholder="密钥标识" />
-        </el-form-item>
         <el-form-item label="密钥别名">
-          <el-input v-model="searchInfo.name" placeholder="密钥别名" />
-        </el-form-item>
-        <el-form-item label="状态">
-          <el-select v-model="searchInfo.status" clearable placeholder="请选择">
-            <el-option label="启用" value="1" />
-            <el-option label="禁用" value="2" />
-          </el-select>
+          <el-input
+            v-model="searchInfo.name"
+            placeholder="密钥别名"
+            maxlength="20"
+          />
         </el-form-item>
         <el-form-item>
           <el-button v-preReClick icon="search" type="primary" @click="onSubmit"
@@ -25,6 +20,11 @@
       </el-form>
     </div>
     <div class="gva-table-box">
+      <div class="gva-btn-list">
+        <el-button v-preReClick icon="plus" type="primary" @click="openDialog"
+          >新增
+        </el-button>
+      </div>
       <el-table :data="tableData" style="width: 100%" tooltip-effect="dark">
         <el-table-column
           align="left"
@@ -42,15 +42,16 @@
           align="left"
           label="状态"
           prop="status"
-          min-width="100"
+          min-width="110"
         >
           <template #default="scope">
-            <el-tag
-              :type="String(scope.row.status) === '1' ? 'success' : 'info'"
-              disable-transitions
-            >
-              {{ statusFilter(scope.row.status) }}
-            </el-tag>
+            <el-switch
+              v-model="scope.row.status"
+              active-value="1"
+              inactive-value="2"
+              inline-prompt
+              @change="changeStatus(scope.row)"
+            />
           </template>
         </el-table-column>
         <el-table-column
@@ -63,6 +64,18 @@
             <span>{{ formatDate(scope.row.createAt) }}</span>
           </template>
         </el-table-column>
+        <el-table-column align="left" fixed="right" label="操作" width="120">
+          <template #default="scope">
+            <el-button
+              v-preReClick
+              icon="delete"
+              link
+              type="primary"
+              @click="deleteKey(scope.row)"
+              >删除
+            </el-button>
+          </template>
+        </el-table-column>
       </el-table>
       <div class="gva-pagination">
         <el-pagination
@@ -76,12 +89,38 @@
         />
       </div>
     </div>
+    <el-dialog
+      v-model="dialogFormVisible"
+      :before-close="closeDialog"
+      title="新增密钥"
+    >
+      <el-form ref="keyForm" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="密钥别名" prop="name">
+          <el-input
+            v-model="form.name"
+            autocomplete="off"
+            placeholder="请输入密钥别名"
+            maxlength="20"
+            show-word-limit
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button v-preReClick @click="closeDialog">取 消</el-button>
+          <el-button v-preReClick type="primary" @click="enterDialog"
+            >确 定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { keyList } from '@/api/sys/key'
+import { keyCreate, keyDelete, keyList, keyUpdate } from '@/api/sys/key'
 import { ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { formatDate } from '@/utils/format'
 
 defineOptions({
@@ -93,24 +132,14 @@ const total = ref(0)
 const pageSize = ref(10)
 const tableData = ref([])
 const searchInfo = ref({
-  iden: '',
-  name: '',
-  status: ''
+  name: ''
 })
 
-// 状态展示（1 启用 / 2 禁用）
-const statusFilter = status => {
-  if (String(status) === '1') return '启用'
-  if (String(status) === '2') return '禁用'
-  return status ?? ''
-}
-
 const onReset = () => {
   searchInfo.value = {
-    iden: '',
-    name: '',
-    status: ''
+    name: ''
   }
+  getTableData()
 }
 
 // 搜索
@@ -131,15 +160,19 @@ const handleCurrentChange = val => {
   getTableData()
 }
 
-// 查询
+// 查询：筛选（密钥别名）与分页作为参数由后端处理
 const getTableData = async () => {
   const table = await keyList({
     page: page.value,
     pageSize: pageSize.value,
-    ...searchInfo.value
+    name: searchInfo.value.name
   })
   if (table.code === 100000) {
-    tableData.value = table.data.list || []
+    // status 统一转字符串，保证开关判断一致
+    tableData.value = (table.data.list || []).map(item => ({
+      ...item,
+      status: String(item.status)
+    }))
     total.value = Number(table.data.total) || tableData.value.length
     if (table.data.page) {
       page.value = table.data.page
@@ -151,4 +184,88 @@ const getTableData = async () => {
 }
 
 getTableData()
+
+// ---------- 状态启停 ----------
+const changeStatus = async row => {
+  // update 传整行（与 access 页保持一致），status 已被开关 v-model 切换
+  const res = await keyUpdate({
+    id: row.id,
+    iden: row.iden,
+    name: row.name,
+    content: row.content,
+    status: row.status
+  })
+  if (res.code === 100000) {
+    ElMessage({
+      type: 'success',
+      message: '状态更新成功'
+    })
+    getTableData()
+  } else {
+    // 失败回滚开关
+    row.status = row.status === '1' ? '2' : '1'
+  }
+}
+
+// ---------- 删除 ----------
+const deleteKey = row => {
+  ElMessageBox.confirm('确定要删除该密钥吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(async () => {
+      const res = await keyDelete({
+        id: row.id
+      })
+      if (res.code === 100000) {
+        ElMessage({
+          type: 'success',
+          message: '删除成功'
+        })
+        if (tableData.value.length === 1 && page.value > 1) {
+          page.value--
+        }
+        getTableData()
+      }
+    })
+    .catch(() => {})
+}
+
+// 新增
+const dialogFormVisible = ref(false)
+const keyForm = ref(null)
+const form = ref({
+  name: ''
+})
+const rules = ref({
+  name: [{ required: true, message: '请输入密钥别名', trigger: 'blur' }]
+})
+
+const openDialog = () => {
+  dialogFormVisible.value = true
+}
+
+const closeDialog = () => {
+  dialogFormVisible.value = false
+  form.value = {
+    name: ''
+  }
+}
+
+const enterDialog = async () => {
+  const valid = await keyForm.value.validate()
+  if (!valid) return
+  const res = await keyCreate({
+    name: form.value.name
+  })
+  if (res.code === 100000) {
+    ElMessage({
+      type: 'success',
+      message: '新增成功'
+    })
+    closeDialog()
+    getTableData()
+  }
+}
 </script>