Skip to content

N
nse-ui
Commit b8ac88fb by 周海峰
Options

密钥管理

parent 8e7087c8
正在显示 包含 571 行增加 和 432 行删除
src/assets/logo/logo.png
src/assets/logo/logo.png

11.8 KB | W: | H:

src/assets/logo/logo.png

14 KB | W: | H:

src/assets/logo/logo.png
src/assets/logo/logo.png
src/assets/logo/logo.png
src/assets/logo/logo.png
  • 2-up
  • Swipe
  • Onion skin
src/constants/keyConfigDefaultData.js 0 → 100644
export const testData = {
local: {},
machine: {
sdkkeyid: '110',
sdkpassword: 'pass',
hsmfiledir: '/Users/zhouhaifeng/Desktop'
},
cloud: {
sdkkeyid: '63254',
sdkpassword: '',
hsmfiledir: '',
keystoredir: '',
truststoredir: ''
},
card: {
cphpwd: '',
ecccipherbits: '',
eccipherx: '',
ecciphery: '',
eccipherm: '',
eccipherc: '',
eccipherl: ''
},
kms: {
credtid: '',
credaccesskey: '',
credsecretkey: '',
crediv: '',
credprotocol: '',
credhost: '',
credport: '',
keyid: '',
keyspec: '',
keyusage: '',
origin: '',
protectionlevel: ''
},
thkms: {
protocol: '',
thhost: '',
thport: '',
appid: '',
keyid: '',
keystoredir: '',
truststoredir: ''
},
dean: {
ip: '',
port: '',
password: '',
salg: '',
keynum: ''
},
star: {
zdxlzjcedir: '',
certspem: '',
sigkeypem: '',
cacrtpem: ''
},
threeTerm: {}
};
src/layout/components/Sidebar/Logo.vue
......@@ -7,7 +7,7 @@
</router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" />
<!-- <h1 class="sidebar-title">{{ title }}</h1> -->
<h1 class="sidebar-title">{{ title }}</h1>
</router-link>
</transition>
</div>
......
src/views/ruleConfig/keyManagement/components/ParamsConfig.vue
......@@ -9,21 +9,21 @@
<el-form label-width="120px" label-position="left">
<el-form-item label="密钥索引" required>
<div class="input-group">
<el-input v-model="params.sdkkeyid" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.sdkkeyid" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* sdkkeyid: SM2加密的密钥索引</div>
</div>
</el-form-item>
<el-form-item label="私钥授权码" required>
<div class="input-group">
<el-input v-model="params.sdkpassword" type="password" placeholder="" show-password style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.sdkpassword" type="password" placeholder="" show-password style="width: 300px" :disabled="!editable" />
<div class="tip-text">* SDKPassword: SM2加密私钥授权码</div>
</div>
</el-form-item>
<el-form-item label="配置文件" required>
<div class="input-group">
<el-input v-model="params.hsmfiledir" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.hsmfiledir" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="button-group">
<el-button type="primary" @click="downloadTemplate">下载配置模板</el-button>
<el-button type="primary" @click="uploadConfig">上传配置文件</el-button>
......@@ -35,25 +35,25 @@
</div>
<!-- 云加密机配置 -->
<div v-if="type === 'cloud'" class="params-form">
<div v-else-if="type === 'cloud'" class="params-form">
<el-form label-width="120px" label-position="left">
<el-form-item label="密钥索引" required>
<div class="input-group">
<el-input v-model="params.sdkkeyid" placeholder="" style="width: 500px;" :disabled="!editable" />
<el-input v-model="modelValue.sdkkeyid" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">SDKKeyid: SM2加密的密钥索引</div>
</div>
</el-form-item>
<el-form-item label="私钥授权码" required>
<div class="input-group">
<el-input v-model="params.sdkpassword" type="password" placeholder="" show-password style="width: 500px;" :disabled="!editable" />
<el-input v-model="modelValue.sdkpassword" type="password" placeholder="" show-password style="width: 300px" :disabled="!editable" />
<div class="tip-text">SDKPassword: SM2加密私钥授权码</div>
</div>
</el-form-item>
<el-form-item label="配置文件" required>
<div class="input-group">
<el-input v-model="params.hsmfiledir" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.hsmfiledir" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="button-group">
<el-button type="primary" @click="downloadTemplate">下载配置模板</el-button>
<el-button type="primary" @click="uploadConfig">上传配置文件</el-button>
......@@ -64,7 +64,7 @@
<el-form-item label="客户端证书" required>
<div class="input-group">
<el-input v-model="params.keystoredir" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.keystoredir" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="button-group">
<el-button type="primary" @click="uploadCert('client')">上传证书</el-button>
</div>
......@@ -74,7 +74,7 @@
<el-form-item label="CA证书" required>
<div class="input-group">
<el-input v-model="params.truststoredir" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.truststoredir" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="button-group">
<el-button type="primary" @click="uploadCert('ca')">上传证书</el-button>
</div>
......@@ -89,49 +89,49 @@
<el-form label-width="120px" label-position="left">
<el-form-item label="权限密码" required>
<div class="input-group">
<el-input v-model="params.cphpwd" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.cphpwd" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* Ccore.PhKeyHandle.password</div>
</div>
</el-form-item>
<el-form-item label="比特值" required>
<div class="input-group">
<el-input v-model="params.ecccipherbits" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.ecccipherbits" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* ECCCipher.bits</div>
</div>
</el-form-item>
<el-form-item label="X向量" required>
<div class="input-group">
<el-input v-model="params.ecccipherx" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.ecccipherx" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* ECCCipher.X</div>
</div>
</el-form-item>
<el-form-item label="Y向量" required>
<div class="input-group">
<el-input v-model="params.eccciphery" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.eccciphery" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* ECCCipher.Y</div>
</div>
</el-form-item>
<el-form-item label="哈希值" required>
<div class="input-group">
<el-input v-model="params.ecccipherm" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.ecccipherm" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* ECCCipher.M</div>
</div>
</el-form-item>
<el-form-item label="密钥密文" required>
<div class="input-group">
<el-input v-model="params.ecccipherc" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.ecccipherc" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* ECCCipher.C</div>
</div>
</el-form-item>
<el-form-item label="向量长度" required>
<div class="input-group">
<el-input v-model="params.ecccipherl" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.ecccipherl" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* ECCCipher.L</div>
</div>
</el-form-item>
......@@ -148,84 +148,84 @@
<el-form label-width="120px" label-position="left">
<el-form-item label="主键" required>
<div class="input-group">
<el-input v-model="params.credtid" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.credtid" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* kms.credential.tid: 加密机设备ID</div>
</div>
</el-form-item>
<el-form-item label="访问密钥" required>
<div class="input-group">
<el-input v-model="params.credaccesskey" type="password" placeholder="" show-password style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.credaccesskey" type="password" placeholder="" show-password style="width: 300px" :disabled="!editable" />
<div class="tip-text">* kms.credential.credaccesskey: 加密机设备密码</div>
</div>
</el-form-item>
<el-form-item label="私钥" required>
<div class="input-group">
<el-input v-model="params.credsecretkey" type="password" placeholder="" show-password style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.credsecretkey" type="password" placeholder="" show-password style="width: 300px" :disabled="!editable" />
<div class="tip-text">* kms.credential.secretkey: 私钥</div>
</div>
</el-form-item>
<el-form-item label="序列" required>
<div class="input-group">
<el-input v-model="params.crediv" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.crediv" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* kms.credential.iv: 序列</div>
</div>
</el-form-item>
<el-form-item label="协议" required>
<div class="input-group">
<el-input v-model="params.credprotocol" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.credprotocol" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* kms.credential.protocol: 协议</div>
</div>
</el-form-item>
<el-form-item label="地址" required>
<div class="input-group">
<el-input v-model="params.credhost" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.credhost" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* kms.credential.host: 地址</div>
</div>
</el-form-item>
<el-form-item label="端口" required>
<div class="input-group">
<el-input v-model="params.credport" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.credport" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* kms.credential.credport: 端口</div>
</div>
</el-form-item>
<el-form-item label="主密钥" required>
<div class="input-group">
<el-input v-model="params.keyid" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.keyid" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* kms.keyid.keyid</div>
</div>
</el-form-item>
<el-form-item label="密钥的类型" required>
<div class="input-group">
<el-input v-model="params.keyspec" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.keyspec" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* kms.keyid.keyspec</div>
</div>
</el-form-item>
<el-form-item label="密钥用途" required>
<div class="input-group">
<el-input v-model="params.keyusage" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.keyusage" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* kms.keyid.keyusage</div>
</div>
</el-form-item>
<el-form-item label="密钥来源" required>
<div class="input-group">
<el-input v-model="params.origin" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.origin" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* kms.keyid.origin</div>
</div>
</el-form-item>
<el-form-item label="保护级别" required>
<div class="input-group">
<el-input v-model="params.protectionlevel" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.protectionlevel" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* kms.keyid.protectionlevel</div>
</div>
</el-form-item>
......@@ -237,42 +237,42 @@
<el-form label-width="120px" label-position="left">
<el-form-item label="协议" required>
<div class="input-group">
<el-input v-model="params.protocol" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.protocol" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* thkms.protocol</div>
</div>
</el-form-item>
<el-form-item label="主机" required>
<div class="input-group">
<el-input v-model="params.thhost" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.thhost" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* thkms.host</div>
</div>
</el-form-item>
<el-form-item label="端口" required>
<div class="input-group">
<el-input v-model="params.thport" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.thport" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* thkms.credport</div>
</div>
</el-form-item>
<el-form-item label="应用ID" required>
<div class="input-group">
<el-input v-model="params.appid" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.appid" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* thkms.appId</div>
</div>
</el-form-item>
<el-form-item label="主密钥" required>
<div class="input-group">
<el-input v-model="params.keyid" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.keyid" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* thkms.keyid</div>
</div>
</el-form-item>
<el-form-item label="私钥证书" required>
<div class="input-group">
<el-input v-model="params.keystoredir" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.keystoredir" placeholder="" style="width: 300px" :disabled="!editable" />
<el-button type="primary" @click="uploadCert('sm2')">上传证书</el-button>
<div class="tip-text">* 类似sm2pri.pkcs8.der 证书上传</div>
</div>
......@@ -280,7 +280,7 @@
<el-form-item label="公钥证书" required>
<div class="input-group">
<el-input v-model="params.truststoredir" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.truststoredir" placeholder="" style="width: 300px" :disabled="!editable" />
<el-button type="primary" @click="uploadCert('sm2pub')">上传证书</el-button>
<div class="tip-text">* 类似sm2pub.cer 证书上传</div>
</div>
......@@ -293,35 +293,35 @@
<el-form label-width="120px" label-position="left">
<el-form-item label="IP" required>
<div class="input-group">
<el-input v-model="params.ip" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.ip" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* IP</div>
</div>
</el-form-item>
<el-form-item label="端口" required>
<div class="input-group">
<el-input v-model="params.port" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.port" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* 端口</div>
</div>
</el-form-item>
<el-form-item label="密码" required>
<div class="input-group">
<el-input v-model="params.password" type="password" placeholder="" show-password style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.password" type="password" placeholder="" show-password style="width: 300px" :disabled="!editable" />
<div class="tip-text">* 密码</div>
</div>
</el-form-item>
<el-form-item label="算法类型" required>
<div class="input-group">
<el-input v-model="params.salg" placeholder="SM4" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.salg" placeholder="SM4" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* 算法类型</div>
</div>
</el-form-item>
<el-form-item label="密钥号" required>
<div class="input-group">
<el-input v-model="params.keynum" placeholder="" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.keynum" placeholder="" style="width: 300px" :disabled="!editable" />
<div class="tip-text">* 密钥号</div>
</div>
</el-form-item>
......@@ -333,7 +333,7 @@
<el-form label-width="120px" label-position="left">
<el-form-item label="配置文件" required>
<div class="input-group">
<el-input v-model="params.zdxlzjcedir" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.zdxlzjcedir" style="width: 300px" :disabled="!editable" />
<el-button type="primary" @click="downloadTemplate">下载配置模板</el-button>
<el-button type="primary" @click="uploadConfig">上传配置文件</el-button>
</div>
......@@ -341,7 +341,7 @@
<el-form-item label="用户证书路径">
<div class="input-group">
<el-input v-model="params.certspem" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.certspem" style="width: 300px" :disabled="!editable" />
<el-button type="primary" @click="uploadCert('certs')">上传证书</el-button>
<div class="tip-text">* certs.pem</div>
</div>
......@@ -349,7 +349,7 @@
<el-form-item label="用户密钥路径">
<div class="input-group">
<el-input v-model="params.sigkeypem" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.sigkeypem" style="width: 300px" :disabled="!editable" />
<el-button type="primary" @click="uploadCert('sigkey')">上传证书</el-button>
<div class="tip-text">* sig.key.pem</div>
</div>
......@@ -357,7 +357,7 @@
<el-form-item label="服务端CA证书路径">
<div class="input-group">
<el-input v-model="params.cacrtpem" style="width: 500px" :disabled="!editable" />
<el-input v-model="modelValue.cacrtpem" style="width: 300px" :disabled="!editable" />
<el-button type="primary" @click="uploadCert('ca')">上传证书</el-button>
<div class="tip-text">* ca.crt.pem</div>
</div>
......@@ -377,67 +377,50 @@
</div>
</template>
<script>
export default {
name: 'ParamsConfig',
props: {
// 密管类型
type: {
type: String,
required: true
},
// 参数值
modelValue: {
type: Object,
default: () => ({})
},
// 是否可编辑
editable: {
type: Boolean,
default: false
}
},
data() {
return {
params: this.modelValue
}
<script setup>
import { reactive, watch, toRefs } from 'vue';
import { ElMessageBox } from 'element-plus';
const props = defineProps({
type: {
type: String,
required: true
},
watch: {
params: {
deep: true,
handler(val) {
this.$emit('update:modelValue', val)
}
},
modelValue: {
deep: true,
handler(val) {
this.params = val
}
}
modelValue: {
type: Object,
default: () => ({})
},
methods: {
// 生成国芯加密卡参数
generateParams() {
this.$emit('generate-params')
},
// 下载配置模板
downloadTemplate() {
this.$emit('download-template')
},
// 上传配置文件
uploadConfig() {
this.$emit('upload-config')
},
// 上传证书
uploadCert(type) {
this.$emit('upload-cert', type)
},
handleMaskClick() {
this.$modal && this.$modal.msgWarning ? this.$modal.msgWarning('不可编辑，请点击“编辑”按钮') : alert('不可编辑，请点击“编辑”按钮')
},
editable: {
type: Boolean,
default: false
}
}
});
const emit = defineEmits(['update:modelValue', 'generate-params', 'download-template', 'upload-config', 'upload-cert']);
const generateParams = () => {
emit('generate-params');
};
const downloadTemplate = () => {
emit('download-template');
};
const uploadConfig = () => {
emit('upload-config');
};
const uploadCert = (type) => {
emit('upload-cert', type);
};
const handleMaskClick = () => {
ElMessageBox.alert('不可编辑，请点击“编辑”按钮', '提示', {
confirmButtonText: '确定',
type: 'info'
});
};
</script>
<style lang="scss" scoped>
......@@ -469,9 +452,14 @@ export default {
}
.tip-text {
color: #F56C6C;
font-size: 14px;
white-space: nowrap;
color: #F56C6C;
white-space: normal; // 自动换行
word-break: break-all; // 长单词也能换行
line-height: 1.5;
max-width: 320px; // 可根据实际布局调整宽度
margin-top: 4px;
margin-left: 0; // 保证与输入框对齐
display: block;
}
}
......
src/views/ruleConfig/keyManagement/index.vue
<template>
<div class="key-management">
<!-- 标题 -->
<div class="title">
<i class="el-icon-lock"></i>
密钥管理
</div>
<div class="key-management-wrapper">
<div class="key-management">
<!-- 标题 -->
<div class="title">
<i class="el-icon-lock"></i>
密钥管理
</div>
<!-- 密管选择区域 -->
<div class="section-card">
<div class="section-title">密管选择区域:</div>
<div class="section-content">
<div class="form-item">
<span class="label">密管方式</span>
<el-select
v-model="keyManageType"
placeholder="请选择"
style="width: 200px;padding-right: 10px;"
@change="handleKeyManageChange">
<el-option
v-for="item in keyManageData"
:key="item.typeid"
:label="item.typename"
:value="item.typeid">
</el-option>
</el-select>
<el-checkbox v-model="isEnabled" @change="handleEnableChange">是否启用</el-checkbox>
<span class="tip">
* 平台只能选择一种密管方式，切换加密规则，平台可切换密管方式。
</span>
<!-- 密管选择区域 -->
<div class="section-card">
<div class="section-title">密管选择区域:</div>
<div class="section-content">
<div class="form-item">
<span class="label">密管方式</span>
<el-select
v-model="keyManageType"
placeholder="请选择"
style="width: 200px;padding-right: 10px;"
@change="handleKeyManageChange">
<el-option
v-for="item in keyManageData"
:key="item.typeid"
:label="item.typename"
:value="item.typeid">
</el-option>
</el-select>
<el-checkbox v-model="isEnabled" @change="handleEnableChange">是否启用</el-checkbox>
<span class="tip">
* 平台只能选择一种密管方式，切换加密规则，平台可切换密管方式。
</span>
</div>
</div>
</div>
</div>
<!-- 参数配置区域 -->
<div class="section-card">
<div class="section-title">参数配置区域:</div>
<div class="section-content">
<params-config
v-model="configParams"
:type="getConfigType"
:editable="isEditing"
@download-template="handleDownloadTemplate"
@upload-config="handleUploadConfig"
@upload-cert="handleUploadCert"
@generate-params="generateParams"
/>
<!-- 参数配置区域 -->
<div class="section-card">
<div class="section-title">参数配置区域:</div>
<div class="section-content">
<params-config
v-model="configParams"
:type="getConfigType"
:editable="isEditing"
@download-template="handleDownloadTemplate"
@upload-config="handleUploadConfig"
@upload-cert="handleUploadCert"
@generate-params="generateParams"
/>
</div>
</div>
</div>
<!-- 底部按钮 -->
<div class="footer">
<template v-if="isEditing">
<el-button @click="handleCancel">取消</el-button>
<el-button @click="handleTest">测试</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</template>
<template v-else>
<el-button type="primary" @click="isEditing = true">编辑</el-button>
</template>
<!-- 底部按钮 -->
<div class="footer">
<template v-if="isEditing">
<el-button @click="handleCancel">取消</el-button>
<el-button @click="handleTest">测试</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</template>
<template v-else>
<el-button type="primary" @click="isEditing = true">编辑</el-button>
</template>
</div>
</div>
</div>
<!-- 上传配置文件弹层 -->
<el-dialog
title="上传配置文件"
......@@ -88,313 +89,401 @@
<el-button type="primary" :loading="uploadLoading" @click="handleUploadConfirm">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { queryKeys, showKeyParams, editIsUse, testCallKey, saveKeyParams, uploadHsmConfig, createParam} from "@/api/ruleConfig/keyManagement.js"
import ParamsConfig from './components/ParamsConfig.vue'
<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { queryKeys, showKeyParams, editIsUse, testCallKey, saveKeyParams, uploadHsmConfig, createParam,
downloadHsmConfig, downloadCloudHsmConfig, downloadSanWeiConfig, downloadZdxlzjceConfig } from '@/api/ruleConfig/keyManagement.js';
import ParamsConfig from './components/ParamsConfig.vue';
import { testData } from '@/constants/keyConfigDefaultData.js';
import { ElMessageBox } from 'element-plus';
const keyManageType = ref('');
const isEnabled = ref(false);
const keyManageData = ref([]);
const configParams = ref({});
const isEditing = ref(false);
const uploadDialogVisible = ref(false);
const uploadFile = ref(null);
const uploadFileList = ref([]);
const uploadLoading = ref(false);
/**
* 规则管理-密钥管理
*/
export default {
components: {
ParamsConfig
},
name: 'KeyManagement',
data() {
return {
keyManageType: '',
isEnabled: false,
keyManageData: [], // 存储完整的数据
configParams: {}, // 参数配置数据
isEditing: false, // 是否处于编辑状态
uploadDialogVisible: false, // 上传配置文件弹层可见性
uploadFile: null,
uploadFileList: [],
uploadLoading: false // 上传按钮加载状态
}
},
created() {
this.getKeyManageOptions()
},
computed: {
// 获取配置类型
getConfigType() {
const typeMap = {
'本地管理': 'local',
'加密机': 'machine',
'云加密机': 'cloud',
'国芯加密卡': 'card',
'KMS': 'kms',
'THKMS': 'thkms',
'得安加密机': 'dean',
'量子加密机': 'star',
'三未加密机': 'threeTerm'
const getConfigType = computed(() => {
const typeMap = {
'本地管理': 'local',
'加密机': 'machine',
'云加密机': 'cloud',
'国芯加密卡': 'card',
'KMS': 'kms',
'THKMS': 'thkms',
'得安加密机': 'dean',
'量子加密机': 'star',
'三未加密机': 'threeTerm'
};
const selectedOption = keyManageData.value.find(item => item.typeid === keyManageType.value);
return selectedOption ? typeMap[selectedOption.typename] : '';
});
const getKeyManageOptions = async () => {
try {
const res = await queryKeys();
if (res.code === 'POP_00014') {
keyManageData.value = res.data;
const activeOption = res.data.find(item => item.isuse === '1');
if (activeOption) {
keyManageType.value = activeOption.typeid;
isEnabled.value = true;
}
const selectedOption = this.keyManageData.find(item => item.typeid === this.keyManageType)
return selectedOption ? typeMap[selectedOption.typename] : ''
}
},
watch: {},
methods: {
// 获取密管方式选项
async getKeyManageOptions() {
try {
const res = await queryKeys()
console.log('获取密管方式选项:', res)
if (res.code === "POP_00014") {
// 存储完整数据
this.keyManageData = res.data
// 设置选项数据
// 找到 isuse 为 1 的选项并设置为默认值
const activeOption = res.data.find(item => item.isuse === "1")
if (activeOption) {
this.keyManageType = activeOption.typeid
// 设置启用状态
this.isEnabled = true
}
} catch (error) {
console.error('获取密管方式选项失败:', error);
}
};
const handleKeyManageChange = async (newVal) => {
const selectedOption = keyManageData.value.find(item => item.typeid === newVal);
isEnabled.value = selectedOption ? selectedOption.isuse === '1' : false;
isEditing.value = false;
configParams.value = {};
try {
const res = await showKeyParams({ typeid: newVal });
if (res.code === 'POP_00014') {
if (!res.data.id) {
const configType = getConfigType.value;
if (configType && testData[configType]) {
configParams.value = { ...testData[configType] };
}
} catch (error) {
console.error('获取密管方式选项失败:', error)
} else {
configParams.value = { ...res.data };
}
},
} else {
ElMessageBox.alert('获取参数失败，使用默认配置', '提示', {
confirmButtonText: '确定',
type: 'warning'
});
}
} catch (error) {
ElMessageBox.alert('获取参数失败，使用默认配置', '提示', {
confirmButtonText: '确定',
type: 'warning'
});
}
};
// 处理密管方式变更
async handleKeyManageChange(newVal) {
// 设置启用状态
const selectedOption = this.keyManageData.find(item => item.typeid === newVal)
this.isEnabled = selectedOption ? selectedOption.isuse === "1" : false
const handleEnableChange = async (newVal) => {
if (!keyManageType.value) {
ElMessageBox.alert('请先选择密管方式', '提示', {
confirmButtonText: '确定',
type: 'warning'
});
return;
}
// 退出编辑状态
this.isEditing = false
const oldVal = !newVal;
try {
const res = await editIsUse({
typeid: keyManageType.value,
isuse: newVal ? '1' : '0'
});
if (res.code === 'POP_00014') {
ElMessageBox.alert(newVal ? '启用成功' : '禁用成功', '提示', {
confirmButtonText: '确定',
type: 'success'
});
await getKeyManageOptions();
} else {
isEnabled.value = oldVal;
}
} catch (error) {
isEnabled.value = oldVal;
}
};
// 清空之前的参数
this.configParams = {}
const handleCancel = () => {
isEditing.value = false;
};
// 调用showKeyParams获取参数
try {
const res = await showKeyParams({ typeid: newVal })
if (res.code === "POP_00014") {
this.configParams = res.data
} else {
this.$modal.msgError('获取参数失败')
}
} catch (error) {
console.error('获取密管参数失败:', error)
this.$modal.msgError('获取参数失败')
}
},
const handleTest = async () => {
try {
const res = await testCallKey({ typeid: keyManageType.value });
if (res.code === 'POP_00014') {
ElMessageBox.alert('测试成功', '提示', {
confirmButtonText: '确定',
type: 'success'
});
} else {
ElMessageBox.alert(res.msg || '测试失败', '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
} catch (error) {
ElMessageBox.alert('测试异常', '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
};
// 处理启用状态变更
// 处理下载配置模板
handleDownloadTemplate() {
// TODO: 实现下载配置模板的逻辑
this.$modal.msgSuccess('开始下载配置模板')
},
const handleConfirm = async () => {
try {
const res = await saveKeyParams({ ...configParams.value, typeid: keyManageType.value });
if (res.code === 'POP_00014') {
ElMessageBox.alert('保存成功', '提示', {
confirmButtonText: '确定',
type: 'success'
});
isEditing.value = false;
} else {
ElMessageBox.alert(res.msg || '保存失败', '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
} catch (error) {
ElMessageBox.alert('保存异常', '提示', {
confirmButtonText: '确定',
type: 'error'
});
} finally {
handleCancel();
await getKeyManageOptions();
}
};
// 处理上传配置文件
handleUploadConfig() {
console.log('上传配置文件')
this.uploadDialogVisible = true;
this.uploadFile = null;
this.uploadFileList = [];
},
const handleFileChange = (file, fileList) => {
uploadFile.value = file.raw;
uploadFileList.value = fileList;
};
// 处理证书上传
handleUploadCert(type) {
// TODO: 实现证书上传的逻辑
this.$modal.msgSuccess(`开始上传${type}证书`)
},
const handleUploadCancel = () => {
uploadDialogVisible.value = false;
uploadFile.value = null;
uploadFileList.value = [];
};
async handleEnableChange(newVal) {
if (!this.keyManageType) {
// this.isEnabled = false
this.$modal.msgError('请先选择密管方式')
return
}
const handleUploadConfirm = async () => {
if (!uploadFile.value) {
ElMessageBox.alert('请先选择文件', '提示', {
confirmButtonText: '确定',
type: 'warning'
});
return;
}
uploadLoading.value = true;
try {
const formData = new FormData();
formData.append('file', uploadFile.value);
const res = await uploadHsmConfig(formData);
if (res.code === 'POP_00014') {
ElMessageBox.alert('上传成功', '提示', {
confirmButtonText: '确定',
type: 'success'
});
uploadDialogVisible.value = false;
} else {
ElMessageBox.alert(res.msg || '上传失败', '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
} catch (error) {
ElMessageBox.alert('上传异常', '提示', {
confirmButtonText: '确定',
type: 'error'
});
} finally {
uploadLoading.value = false;
}
};
const oldVal = !newVal
try {
const res = await editIsUse({
typeid: this.keyManageType,
isuse: newVal ? "1" : "0"
})
if (res.code === "POP_00014") {
this.$modal.msgSuccess(newVal ? '启用成功' : '禁用成功')
// 重新获取列表以更新状态
await this.getKeyManageOptions()
} else {
// 如果失败，恢复之前的状态
this.isEnabled = oldVal
this.$modal.msgError('操作失败')
}
} catch (error) {
// 发生错误时恢复之前的状态
this.isEnabled = oldVal
console.error('修改启用状态失败:', error)
this.$modal.msgError('操作失败')
}
},
// 取消编辑
handleCancel() {
// 可选：重置参数
this.isEditing = false
},
// 测试
async handleTest() {
try {
const res = await testCallKey({typeid: this.keyManageType})
if (res.code === 'POP_00014') {
this.$modal.msgSuccess('测试成功')
} else {
this.$modal.msgError(res.msg || '测试失败')
}
} catch (error) {
this.$modal.msgError('测试异常')
}
},
// 确认
async handleConfirm() {
try {
const res = await saveKeyParams({ ...this.configParams, typeid: this.keyManageType })
if (res.code === 'POP_00014') {
this.$modal.msgSuccess('保存成功')
this.isEditing = false
} else {
this.$modal.msgError(res.msg || '保存失败')
}
} catch (error) {
this.$modal.msgError('保存异常')
} finally {
await this.handleCancel()
// 重新获取密管方式选项
await this.getKeyManageOptions()
}
},
// 处理文件变更
handleFileChange(file, fileList) {
this.uploadFile = file.raw;
this.uploadFileList = fileList;
},
// 处理上传取消
handleUploadCancel() {
this.uploadDialogVisible = false;
this.uploadFile = null;
this.uploadFileList = [];
},
// 处理上传确认
async handleUploadConfirm() {
console.log('上传文件:', this.uploadFile);
if (!this.uploadFile) {
this.$modal.msgWarning('请先选择文件');
return;
}
this.uploadLoading = true;
try {
const filePath = this.configParams.sdkPath || '';
const formData = new FormData();
formData.append('file', this.uploadFile);
formData.append('filePath', filePath);
const res = await uploadHsmConfig(formData);
if (res.code === 'POP_00014') {
this.$modal.msgSuccess('上传成功');
this.uploadDialogVisible = false;
} else {
this.$modal.msgError(res.msg || '上传失败');
}
} catch (error) {
this.$modal.msgError('上传异常');
} finally {
this.uploadLoading = false;
}
},
generateParams() {
// TODO: 实现生成国芯加密卡参数的逻辑
this.$modal.msgSuccess('开始生成国芯加密卡参数')
createParam({ cphpwd: this.configParams.cphpwd }).then(res => {
if (res.code === 'POP_00014') {
this.$modal.msgSuccess('生成成功')
} else {
this.$modal.msgError(res.msg || '生成失败')
}
}).catch(() => {
this.$modal.msgError('生成异常')
})
const handleUploadConfig = async () => {
if (!uploadFile.value) {
ElMessageBox.alert('请先选择文件', '提示', {
confirmButtonText: '确定',
type: 'warning'
});
return;
}
uploadLoading.value = true;
try {
const formData = new FormData();
formData.append('file', uploadFile.value);
const res = await uploadHsmConfig(formData);
if (res.code === 'POP_00014') {
ElMessageBox.alert('上传成功', '提示', {
confirmButtonText: '确定',
type: 'success'
});
uploadDialogVisible.value = false;
} else {
ElMessageBox.alert(res.msg || '上传失败', '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
} catch (error) {
console.error('上传配置文件失败:', error);
ElMessageBox.alert('上传异常', '提示', {
confirmButtonText: '确定',
type: 'error'
});
} finally {
uploadLoading.value = false;
}
}
</script>
};
<style lang="scss" scoped>
.key-management {
padding: 20px;
.title {
font-size: 18px;
color: #333;
margin-bottom: 20px;
i {
color: #409EFF;
margin-right: 8px;
const handleUploadCert = async (type) => {
if (!uploadFile.value) {
ElMessageBox.alert('请先选择证书文件', '提示', {
confirmButtonText: '确定',
type: 'warning'
});
return;
}
uploadLoading.value = true;
try {
const formData = new FormData();
formData.append('file', uploadFile.value);
formData.append('type', type);
const res = await uploadHsmConfig(formData);
if (res.code === 'POP_00014') {
ElMessageBox.alert('证书上传成功', '提示', {
confirmButtonText: '确定',
type: 'success'
});
uploadDialogVisible.value = false;
} else {
ElMessageBox.alert(res.msg || '证书上传失败', '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
} catch (error) {
ElMessageBox.alert('证书上传异常', '提示', {
confirmButtonText: '确定',
type: 'error'
});
} finally {
uploadLoading.value = false;
}
};
.section-card {
background: #fff;
border-radius: 4px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
const generateParams = () => {
ElMessageBox.alert('开始生成国芯加密卡参数', '提示', {
confirmButtonText: '确定',
type: 'info'
});
createParam({ cphpwd: configParams.cphpwd }).then(res => {
if (res.code === 'POP_00014') {
ElMessageBox.alert('生成成功', '提示', {
confirmButtonText: '确定',
type: 'success'
});
} else {
ElMessageBox.alert(res.msg || '生成失败', '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
}).catch(() => {
ElMessageBox.alert('生成异常', '提示', {
confirmButtonText: '确定',
type: 'error'
});
});
};
.section-title {
color: #409EFF;
font-size: 14px;
margin-bottom: 20px;
position: relative;
padding-left: 12px;
const handleDownloadTemplate = async () => {
try {
// 前端直接到指定路径获取模板
const link = document.createElement('a');
link.href = configParams.hsmfiledir || '';
link.download = 'template';
link.click();
} catch (error) {
console.error('下载模板失败:', error);
alert('模板下载异常');
}
};
&:before {
content: '';
width: 4px;
height: 14px;
background: #409EFF;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
onMounted(() => {
getKeyManageOptions();
});
</script>
<style lang="scss" scoped>
.key-management-wrapper {
.key-management {
padding: 20px;
.title {
font-size: 18px;
color: #333;
margin-bottom: 20px;
i {
color: #409EFF;
margin-right: 8px;
}
}
.section-content {
.form-item {
display: flex;
align-items: center;
.label {
width: 100px;
margin-right: 10px;
}
.section-card {
background: #fff;
border-radius: 4px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
.section-title {
color: #409EFF;
font-size: 14px;
margin-bottom: 20px;
position: relative;
padding-left: 12px;
.tip {
color: #f56c6c;
margin-left: 10px;
font-size: 12px;
&:before {
content: '';
width: 4px;
height: 14px;
background: #409EFF;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
}
.button-group {
button {
margin-right: 10px;
.section-content {
.form-item {
display: flex;
align-items: center;
.label {
width: 100px;
margin-right: 10px;
}
.tip {
color: #f56c6c;
margin-left: 10px;
font-size: 12px;
}
}
.button-group {
button {
margin-right: 10px;
}
}
}
}
}
.footer {
text-align: center;
margin-top: 20px;
.footer {
text-align: center;
margin-top: 20px;
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论