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