Skip to content

N
nse-ui
Commit 3cb3c08a by wanglizhen
Options

密钥管理

parent 1a184233
正在显示 包含 154 行增加 和 160 行删除
src/views/ruleConfig/keyManagement/components/ParamsConfig.vue
...@@ -6,132 +6,135 @@ ...@@ -6,132 +6,135 @@
</div> </div>
<!-- 加密机配置 --> <!-- 加密机配置 -->
<div v-if="type === 'machine'" class="params-form"> <div v-if="type === 'machine'" class="params-form">
<el-form label-width="120px" label-position="left"> <el-form label-width="140px" label-position="right">
<el-form-item label="密钥索引" required> <el-form-item label="密钥索引" required>
<div class="input-group"> <div class="input-group">
<el-input v-model="modelValue.sdkkeyid" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.sdkkeyid" placeholder="" style="width: 432px" :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="modelValue.sdkpassword" type="password" placeholder="" show-password style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.sdkpassword" type="password" placeholder="" show-password style="width: 432px"
: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="modelValue.hsmfiledir" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.hsmfiledir" placeholder="" style="width: 432px" :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>
</div> </div>
<div class="tip-text">* SDKPath: 点击下载HsmConfig模板，修改配置信息，然后上传HsmConfig文件</div>
</div> </div>
<div class="tip-text" style="line-height: 45px;">* SDKPath: 点击下载HsmConfig模板，修改配置信息，然后上传HsmConfig文件</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<!-- 云加密机配置 --> <!-- 云加密机配置 -->
<div v-else-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="140px" label-position="right">
<el-form-item label="密钥索引" required> <el-form-item label="密钥索引" required>
<div class="input-group"> <div class="input-group">
<el-input v-model="modelValue.sdkkeyid" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.sdkkeyid" placeholder="" style="width: 432px" :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="modelValue.sdkpassword" type="password" placeholder="" show-password style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.sdkpassword" type="password" placeholder="" show-password style="width: 432px"
: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="modelValue.hsmfiledir" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.hsmfiledir" placeholder="" style="width: 432px" :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>
</div> </div>
<div class="tip-text">* SDKPath: 点击下载HsmConfig模板，修改配置信息，然后上传HsmConfig文件</div>
</div> </div>
<div class="tip-text" style="line-height: 45px;">* SDKPath: 点击下载HsmConfig模板，修改配置信息，然后上传HsmConfig文件</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="modelValue.keystoredir" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.keystoredir" placeholder="" style="width: 432px" :disabled="!editable" />
<div class="button-group"> <div class="button-group">
<el-button type="primary" @click="uploadCert('cloud-client')">上传证书</el-button> <el-button type="primary" @click="uploadCert('cloud-client')">上传证书</el-button>
</div> </div>
<div class="tip-text">* KeyStore: 类似client.p12客户端证书上传，此处上传路径应和配置文件中客户端证书路径保持一致</div> </div>
<div class="tip-text" style="line-height: 45px;">* KeyStore: 类似client.p12客户端证书上传，此处上传路径应和配置文件中客户端证书路径保持一致
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="CA证书" required> <el-form-item label="CA证书" required>
<div class="input-group"> <div class="input-group">
<el-input v-model="modelValue.truststoredir" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.truststoredir" placeholder="" style="width: 432px" :disabled="!editable" />
<div class="button-group"> <div class="button-group">
<el-button type="primary" @click="uploadCert('cloud-ca')">上传证书</el-button> <el-button type="primary" @click="uploadCert('cloud-ca')">上传证书</el-button>
</div> </div>
<div class="tip-text">* TrustStore: 类似ca.cer CA证书上传，此处上传路径应和配置文件里的证书路径保持一致</div>
</div> </div>
<div class="tip-text" style="line-height: 45px;">* TrustStore: 类似ca.cer CA证书上传，此处上传路径应和配置文件里的证书路径保持一致</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<!-- 国芯加密卡配置 --> <!-- 国芯加密卡配置 -->
<div v-else-if="type === 'card'" class="params-form"> <div v-else-if="type === 'card'" class="params-form">
<el-form label-width="120px" label-position="left"> <el-form label-width="140px" label-position="right">
<el-form-item label="权限密码" required> <el-form-item label="权限密码" required>
<div class="input-group"> <div class="input-group">
<el-input v-model="modelValue.cphpwd" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.cphpwd" placeholder="" style="width: 432px" :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="modelValue.ecccipherbits" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.ecccipherbits" placeholder="" style="width: 432px" :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="modelValue.ecccipherx" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.ecccipherx" placeholder="" style="width: 432px" :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="modelValue.eccciphery" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.eccciphery" placeholder="" style="width: 432px" :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="modelValue.ecccipherm" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.ecccipherm" placeholder="" style="width: 432px" :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="modelValue.ecccipherc" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.ecccipherc" placeholder="" style="width: 432px" :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="modelValue.ecccipherl" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.ecccipherl" placeholder="" style="width: 432px" :disabled="!editable" />
<div class="tip-text">* ECCCipher.L</div> <div class="tip-text">* ECCCipher.L</div>
</div> </div>
</el-form-item> </el-form-item>
...@@ -145,87 +148,89 @@ ...@@ -145,87 +148,89 @@
<!-- KMS配置 --> <!-- KMS配置 -->
<div v-else-if="type === 'kms'" class="params-form"> <div v-else-if="type === 'kms'" class="params-form">
<el-form label-width="120px" label-position="left"> <el-form label-width="140px" label-position="right">
<el-form-item label="主键" required> <el-form-item label="主键" required>
<div class="input-group"> <div class="input-group">
<el-input v-model="modelValue.credtid" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.credtid" placeholder="" style="width: 432px" :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="modelValue.credaccesskey" type="password" placeholder="" show-password style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.credaccesskey" type="password" placeholder="" show-password
style="width: 432px" :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="modelValue.credsecretkey" type="password" placeholder="" show-password style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.credsecretkey" type="password" placeholder="" show-password
style="width: 432px" :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="modelValue.crediv" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.crediv" placeholder="" style="width: 432px" :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="modelValue.credprotocol" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.credprotocol" placeholder="" style="width: 432px" :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="modelValue.credhost" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.credhost" placeholder="" style="width: 432px" :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="modelValue.credport" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.credport" placeholder="" style="width: 432px" :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="modelValue.keyid" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.keyid" placeholder="" style="width: 432px" :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="modelValue.keyspec" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.keyspec" placeholder="" style="width: 432px" :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="modelValue.keyusage" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.keyusage" placeholder="" style="width: 432px" :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="modelValue.origin" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.origin" placeholder="" style="width: 432px" :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="modelValue.protectionlevel" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.protectionlevel" placeholder="" style="width: 432px" :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>
...@@ -234,45 +239,45 @@ ...@@ -234,45 +239,45 @@
<!-- THKMS配置 --> <!-- THKMS配置 -->
<div v-else-if="type === 'thkms'" class="params-form"> <div v-else-if="type === 'thkms'" class="params-form">
<el-form label-width="120px" label-position="left"> <el-form label-width="140px" label-position="right">
<el-form-item label="协议" required> <el-form-item label="协议" required>
<div class="input-group"> <div class="input-group">
<el-input v-model="modelValue.protocol" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.protocol" placeholder="" style="width: 432px" :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="modelValue.thhost" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.thhost" placeholder="" style="width: 432px" :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="modelValue.thport" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.thport" placeholder="" style="width: 432px" :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="modelValue.appid" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.appid" placeholder="" style="width: 432px" :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="modelValue.keyid" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.keyid" placeholder="" style="width: 432px" :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="modelValue.keystoredir" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.keystoredir" placeholder="" style="width: 432px" :disabled="!editable" />
<el-button type="primary" @click="uploadCert('thkms-sm2')">上传证书</el-button> <el-button type="primary" @click="uploadCert('thkms-sm2')">上传证书</el-button>
<div class="tip-text">* 类似sm2pri.pkcs8.der 证书上传</div> <div class="tip-text">* 类似sm2pri.pkcs8.der 证书上传</div>
</div> </div>
...@@ -280,7 +285,7 @@ ...@@ -280,7 +285,7 @@
<el-form-item label="公钥证书" required> <el-form-item label="公钥证书" required>
<div class="input-group"> <div class="input-group">
<el-input v-model="modelValue.truststoredir" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.truststoredir" placeholder="" style="width: 432px" :disabled="!editable" />
<el-button type="primary" @click="uploadCert('thkms-sm2pub')">上传证书</el-button> <el-button type="primary" @click="uploadCert('thkms-sm2pub')">上传证书</el-button>
<div class="tip-text">* 类似sm2pub.cer 证书上传</div> <div class="tip-text">* 类似sm2pub.cer 证书上传</div>
</div> </div>
...@@ -290,38 +295,39 @@ ...@@ -290,38 +295,39 @@
<!-- 得安加密机配置 --> <!-- 得安加密机配置 -->
<div v-else-if="type === 'dean'" class="params-form"> <div v-else-if="type === 'dean'" class="params-form">
<el-form label-width="120px" label-position="left"> <el-form label-width="140px" label-position="right">
<el-form-item label="IP" required> <el-form-item label="IP" required>
<div class="input-group"> <div class="input-group">
<el-input v-model="modelValue.ip" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.ip" placeholder="" style="width: 432px" :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="modelValue.port" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.port" placeholder="" style="width: 432px" :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="modelValue.password" type="password" placeholder="" show-password style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.password" type="password" placeholder="" show-password style="width: 432px"
: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="modelValue.salg" placeholder="SM4" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.salg" placeholder="SM4" style="width: 432px" :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="modelValue.keynum" placeholder="" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.keynum" placeholder="" style="width: 432px" :disabled="!editable" />
<div class="tip-text">* 密钥号</div> <div class="tip-text">* 密钥号</div>
</div> </div>
</el-form-item> </el-form-item>
...@@ -330,10 +336,10 @@ ...@@ -330,10 +336,10 @@
<!-- 量子加密机配置 --> <!-- 量子加密机配置 -->
<div v-else-if="type === 'star'" class="params-form"> <div v-else-if="type === 'star'" class="params-form">
<el-form label-width="120px" label-position="left"> <el-form label-width="140px" label-position="right">
<el-form-item label="配置文件" required> <el-form-item label="配置文件" required>
<div class="input-group"> <div class="input-group">
<el-input v-model="modelValue.zdxlzjcedir" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.zdxlzjcedir" style="width: 432px" :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 +347,7 @@ ...@@ -341,7 +347,7 @@
<el-form-item label="用户证书路径"> <el-form-item label="用户证书路径">
<div class="input-group"> <div class="input-group">
<el-input v-model="modelValue.certspem" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.certspem" style="width: 432px" :disabled="!editable" />
<el-button type="primary" @click="uploadCert('star-certs')">上传证书</el-button> <el-button type="primary" @click="uploadCert('star-certs')">上传证书</el-button>
<div class="tip-text">* certs.pem</div> <div class="tip-text">* certs.pem</div>
</div> </div>
...@@ -349,7 +355,7 @@ ...@@ -349,7 +355,7 @@
<el-form-item label="用户密钥路径"> <el-form-item label="用户密钥路径">
<div class="input-group"> <div class="input-group">
<el-input v-model="modelValue.sigkeypem" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.sigkeypem" style="width: 432px" :disabled="!editable" />
<el-button type="primary" @click="uploadCert('star-sigkey')">上传证书</el-button> <el-button type="primary" @click="uploadCert('star-sigkey')">上传证书</el-button>
<div class="tip-text">* sig.key.pem</div> <div class="tip-text">* sig.key.pem</div>
</div> </div>
...@@ -357,7 +363,7 @@ ...@@ -357,7 +363,7 @@
<el-form-item label="服务端CA证书路径"> <el-form-item label="服务端CA证书路径">
<div class="input-group"> <div class="input-group">
<el-input v-model="modelValue.cacrtpem" style="width: 300px" :disabled="!editable" /> <el-input v-model="modelValue.cacrtpem" style="width: 432px" :disabled="!editable" />
<el-button type="primary" @click="uploadCert('star-ca')">上传证书</el-button> <el-button type="primary" @click="uploadCert('star-ca')">上传证书</el-button>
<div class="tip-text">* ca.crt.pem</div> <div class="tip-text">* ca.crt.pem</div>
</div> </div>
...@@ -367,6 +373,7 @@ ...@@ -367,6 +373,7 @@
<!-- 三末加密机配置 --> <!-- 三末加密机配置 -->
<div v-else-if="type === 'threeTerm'" class="params-form"> <div v-else-if="type === 'threeTerm'" class="params-form">
<div style="padding: 30px;">
<el-form label-width="100px"> <el-form label-width="100px">
<div class="config-buttons" style="text-align: left;"> <div class="config-buttons" style="text-align: left;">
<el-button type="primary" @click="downloadTemplate">下载配置模板</el-button> <el-button type="primary" @click="downloadTemplate">下载配置模板</el-button>
...@@ -375,6 +382,7 @@ ...@@ -375,6 +382,7 @@
</el-form> </el-form>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
...@@ -428,10 +436,18 @@ const handleMaskClick = () => { ...@@ -428,10 +436,18 @@ const handleMaskClick = () => {
position: relative; position: relative;
.params-form { .params-form {
padding: 20px; // padding: 20px;
border: 1px solid #dcdfe6; border-radius: 5px;
border-radius: 4px; border: 1px solid rgba(29, 178, 245, 1);
margin: 10px 0; margin: 10px 0;
background: rgba(235, 235, 235, 1);
:deep(.el-form-item) {
margin-bottom: 1px;
background: rgba(245, 252, 255, 1);
}
:deep(.el-form-item__content) {
border-left: 1px solid rgba(235, 235, 235, 1);
}
.tip { .tip {
font-size: 12px; font-size: 12px;
...@@ -450,18 +466,18 @@ const handleMaskClick = () => { ...@@ -450,18 +466,18 @@ const handleMaskClick = () => {
display: flex; display: flex;
gap: 8px; gap: 8px;
} }
}
.tip-text { .tip-text {
color: #F56C6C; color: #f56c6c;
white-space: normal; // 自动换行 white-space: normal; // 自动换行
word-break: break-all; // 长单词也能换行 word-break: break-all; // 长单词也能换行
line-height: 1.5; line-height: 1.5;
max-width: 320px; // 可根据实际布局调整宽度 max-width: 100%; // 可根据实际布局调整宽度
margin-top: 4px; margin-top: 4px;
margin-left: 0; // 保证与输入框对齐 margin-left: 0; // 保证与输入框对齐
display: block; display: block;
} }
}
.input-with-buttons { .input-with-buttons {
display: flex; display: flex;
...@@ -515,7 +531,7 @@ const handleMaskClick = () => { ...@@ -515,7 +531,7 @@ const handleMaskClick = () => {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(255,255,255,0.6); background: rgba(255, 255, 255, 0.6);
z-index: 10; z-index: 10;
cursor: not-allowed; cursor: not-allowed;
} }
......
src/views/ruleConfig/keyManagement/index.vue
<template> <template>
<div class="key-management-wrapper"> <div class="app-container scroller">
<div class="key-management"> <div class="app-container__body">
<!-- 标题 --> <!-- 标题 -->
<div class="title"> <div class="pageTitle">
<i class="el-icon-lock"></i> <img class="icon" src="@/assets/images/ruleConfig/keyManagementPage.png" alt="">
密钥管理 <span>密钥管理</span>
</div> </div>
<!-- 密管选择区域 --> <!-- 密管选择区域 -->
<div class="section-card">
<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" placeholder="请选择" style="width: 300px;height: 40px;margin-right: 27px;"
v-model="keyManageType"
placeholder="请选择"
style="width: 200px;padding-right: 10px;"
@change="handleKeyManageChange"> @change="handleKeyManageChange">
<el-option <el-option v-for="item in keyManageData" :key="item.typeid" :label="item.typename" :value="item.typeid">
v-for="item in keyManageData"
:key="item.typeid"
:label="item.typename"
: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>
...@@ -31,64 +22,46 @@ ...@@ -31,64 +22,46 @@
</span> </span>
</div> </div>
</div> </div>
</div>
<!-- 参数配置区域 --> <!-- 参数配置区域 -->
<div class="section-card"> <div class="section-card">
<div class="section-title">参数配置区域:</div> <div class="line"></div>
<div class="section-content"> <div class="section-content">
<params-config <params-config v-model="configParams" :type="getConfigType" :editable="isEditing"
v-model="configParams" @download-template="handleDownloadTemplate" @upload-config="handleUploadConfig"
:type="getConfigType" @upload-cert="handleUploadCert" @generate-params="generateParams" />
:editable="isEditing"
@download-template="handleDownloadTemplate"
@upload-config="handleUploadConfig"
@upload-cert="handleUploadCert"
@generate-params="generateParams"
/>
</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 style="width: 80px;" @click="handleCancel">取消</el-button>
<el-button @click="handleTest">测试</el-button> <el-button style="width: 80px;" type="primary" @click="handleConfirm">确定</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button> <el-button style="width: 80px;background: rgba(255, 141, 26, 1);border: 1px solid rgba(255, 141, 26, 1);" type="primary" @click="handleTest">测试</el-button>
</template> </template>
<template v-else> <template v-else>
<el-button type="primary" @click="isEditing = true">编辑</el-button> <el-button type="primary" style="width: 80px;" @click="isEditing = true">编辑</el-button>
</template> </template>
</div> </div>
</div> </div>
</div>
<!-- 上传配置文件弹层组件 --> <!-- 上传配置文件弹层组件 -->
<UploadDialog <UploadDialog v-model:visible="uploadDialogVisible" :title="'上传配置文件'" :loading="uploadLoading"
v-model:visible="uploadDialogVisible" :fileList="uploadFileList" @file-change="handleFileChange" @confirm="handleUploadConfirm"
:title="'上传配置文件'" @cancel="handleUploadCancel" />
:loading="uploadLoading"
:fileList="uploadFileList"
@file-change="handleFileChange"
@confirm="handleUploadConfirm"
@cancel="handleUploadCancel"
/>
<!-- 上传证书弹层组件 --> <!-- 上传证书弹层组件 -->
<UploadDialog <UploadDialog v-model:visible="uploadCertDialogVisible" :title="'上传证书'" :loading="uploadCertLoading"
v-model:visible="uploadCertDialogVisible" :fileList="uploadCertFileList" @file-change="handleCertFileChange" @confirm="handleCertUploadConfirm"
:title="'上传证书'" @cancel="handleCertUploadCancel" />
:loading="uploadCertLoading"
:fileList="uploadCertFileList"
@file-change="handleCertFileChange"
@confirm="handleCertUploadConfirm"
@cancel="handleCertUploadCancel"
/>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, reactive, computed, onMounted } from 'vue'; import { ref, reactive, computed, onMounted } from 'vue';
import { queryKeys, showKeyParams, editIsUse, testCallKey, saveKeyParams, uploadHsmConfig, createParam, import {
downloadHsmConfig, downloadCloudHsmConfig, downloadSanWeiConfig, downloadZdxlzjceConfig, uploadSanWeiConfig } from '@/api/ruleConfig/keyManagement.js'; queryKeys, showKeyParams, editIsUse, testCallKey, saveKeyParams, uploadHsmConfig, createParam,
downloadHsmConfig, downloadCloudHsmConfig, downloadSanWeiConfig, downloadZdxlzjceConfig, uploadSanWeiConfig
} from '@/api/ruleConfig/keyManagement.js';
import ParamsConfig from './components/ParamsConfig.vue'; import ParamsConfig from './components/ParamsConfig.vue';
import UploadDialog from './components/UploadDialog.vue'; import UploadDialog from './components/UploadDialog.vue';
import { testData } from '@/constants/keyConfigDefaultData.js'; import { testData } from '@/constants/keyConfigDefaultData.js';
...@@ -311,9 +284,9 @@ const handleUploadConfirm = async () => { ...@@ -311,9 +284,9 @@ const handleUploadConfirm = async () => {
} }
//如果量子加密机配置 //如果量子加密机配置
if (keyManageType.value === '9'){ if (keyManageType.value === '9') {
formData.append('filePath', configParams.value.zdxlzjcedir); formData.append('filePath', configParams.value.zdxlzjcedir);
}else{ } else {
// 如果是其他类型的密管配置 // 如果是其他类型的密管配置
formData.append('filePath', configParams.value.hsmfiledir); formData.append('filePath', configParams.value.hsmfiledir);
} }
...@@ -386,7 +359,7 @@ const handleDownloadTemplate = async () => { ...@@ -386,7 +359,7 @@ const handleDownloadTemplate = async () => {
}); });
return; return;
} }
if(keyManageType.value === '2'){ if (keyManageType.value === '2') {
// 加密机的模版 // 加密机的模版
const res = await downloadHsmConfig(); const res = await downloadHsmConfig();
const blob = new Blob([res], { type: 'application/octet-stream' }); const blob = new Blob([res], { type: 'application/octet-stream' });
...@@ -400,7 +373,7 @@ const handleDownloadTemplate = async () => { ...@@ -400,7 +373,7 @@ const handleDownloadTemplate = async () => {
} }
// 云加密机的模版 // 云加密机的模版
if(keyManageType.value === '3'){ if (keyManageType.value === '3') {
const res = await downloadCloudHsmConfig(); const res = await downloadCloudHsmConfig();
const blob = new Blob([res], { type: 'application/octet-stream' }); const blob = new Blob([res], { type: 'application/octet-stream' });
const link = document.createElement('a'); const link = document.createElement('a');
...@@ -414,7 +387,7 @@ const handleDownloadTemplate = async () => { ...@@ -414,7 +387,7 @@ const handleDownloadTemplate = async () => {
// 三未加密机的模版 // 三未加密机的模版
if(keyManageType.value === '8'){ if (keyManageType.value === '8') {
const res = await downloadSanWeiConfig(); const res = await downloadSanWeiConfig();
const blob = new Blob([res], { type: 'application/octet-stream' }); const blob = new Blob([res], { type: 'application/octet-stream' });
const link = document.createElement('a'); const link = document.createElement('a');
...@@ -427,7 +400,7 @@ const handleDownloadTemplate = async () => { ...@@ -427,7 +400,7 @@ const handleDownloadTemplate = async () => {
} }
// 中电信密管的模版 // 中电信密管的模版
if(keyManageType.value === '9'){ if (keyManageType.value === '9') {
const res = await downloadZdxlzjceConfig(); const res = await downloadZdxlzjceConfig();
const blob = new Blob([res], { type: 'application/octet-stream' }); const blob = new Blob([res], { type: 'application/octet-stream' });
const link = document.createElement('a'); const link = document.createElement('a');
...@@ -533,60 +506,48 @@ onMounted(() => { ...@@ -533,60 +506,48 @@ onMounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.key-management-wrapper { .app-container__body {
.key-management { padding: 20px 0 0 0;
padding: 20px; .pageTitle {
.title {
font-size: 18px;
color: #333;
margin-bottom: 20px;
i {
color: #409EFF;
margin-right: 8px;
}
}
.section-card {
background: #fff;
border-radius: 4px;
padding: 20px;
margin-bottom: 20px; margin-bottom: 20px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1); display: flex;
align-items: center;
.section-title { font-size: 16px;
color: #409EFF; font-weight: 500;
font-size: 14px; letter-spacing: 0px;
margin-bottom: 20px; line-height: 22px;
position: relative; color: rgba(53, 64, 79, 1);
padding-left: 12px;
&:before { .icon {
content: ''; margin-right: 6px;
width: 4px; width: 16px;
height: 14px; height: 16px;
background: #409EFF;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
} }
} }
.section-content { .section-content {
margin-bottom: 20px;
.form-item { .form-item {
display: flex; display: flex;
align-items: center; align-items: center;
:deep(.el-select__wrapper){
height: 40px;
}
.label { .label {
width: 100px; width: 100px;
margin-right: 10px; margin-right: 10px;
font-size: 14px;
color: rgba(53, 64, 79, 1);
} }
.tip { .tip {
color: #f56c6c; margin-left: 34px;
margin-left: 10px; font-size: 14px;
font-size: 12px; font-weight: 400;
letter-spacing: 0px;
line-height: 22px;
color: rgba(253, 84, 81, 1);
} }
} }
...@@ -596,12 +557,30 @@ onMounted(() => { ...@@ -596,12 +557,30 @@ onMounted(() => {
} }
} }
} }
.section-card{
flex: 1;
border-radius: 3px;
background: rgba(255, 255, 255, 1);
.line {
width: 100%;
height: 2px;
border-radius: 5px 5px 0px 0px;
background: linear-gradient(
90deg,
rgba(33, 103, 217, 1) 0%,
rgba(17, 200, 250, 1) 34.03%,
rgba(33, 103, 217, 1) 64.58%,
rgba(48, 128, 255, 1) 100%
);
}
.section-content{
padding: 48px 96px 0 96px;
}
} }
.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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论