Skip to content

N
nse-ui
Commit 3cb3c08a by wanglizhen
Options

密钥管理

parent 1a184233
正在显示 包含 77 行增加 和 99 行删除
src/views/ruleConfig/keyManagement/index.vue
<template>
<div class="key-management-wrapper">
<div class="key-management">
<div class="app-container scroller">
<div class="app-container__body">
<!-- 标题 -->
<div class="title">
<i class="el-icon-lock"></i>
密钥管理
<div class="pageTitle">
<img class="icon" src="@/assets/images/ruleConfig/keyManagementPage.png" alt="">
<span>密钥管理</span>
</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;"
<el-select v-model="keyManageType" placeholder="请选择" style="width: 300px;height: 40px;margin-right: 27px;"
@change="handleKeyManageChange">
<el-option
v-for="item in keyManageData"
:key="item.typeid"
:label="item.typename"
:value="item.typeid">
<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>
......@@ -31,64 +22,46 @@
</span>
</div>
</div>
</div>
<!-- 参数配置区域 -->
<div class="section-card">
<div class="section-title">参数配置区域:</div>
<div class="line"></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>
<params-config v-model="configParams" :type="getConfigType" :editable="isEditing"
@download-template="handleDownloadTemplate" @upload-config="handleUploadConfig"
@upload-cert="handleUploadCert" @generate-params="generateParams" />
</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>
<el-button style="width: 80px;" @click="handleCancel">取消</el-button>
<el-button style="width: 80px;" 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 v-else>
<el-button type="primary" @click="isEditing = true">编辑</el-button>
<el-button type="primary" style="width: 80px;" @click="isEditing = true">编辑</el-button>
</template>
</div>
</div>
</div>
<!-- 上传配置文件弹层组件 -->
<UploadDialog
v-model:visible="uploadDialogVisible"
:title="'上传配置文件'"
:loading="uploadLoading"
:fileList="uploadFileList"
@file-change="handleFileChange"
@confirm="handleUploadConfirm"
@cancel="handleUploadCancel"
/>
<UploadDialog v-model:visible="uploadDialogVisible" :title="'上传配置文件'" :loading="uploadLoading"
:fileList="uploadFileList" @file-change="handleFileChange" @confirm="handleUploadConfirm"
@cancel="handleUploadCancel" />
<!-- 上传证书弹层组件 -->
<UploadDialog
v-model:visible="uploadCertDialogVisible"
:title="'上传证书'"
:loading="uploadCertLoading"
:fileList="uploadCertFileList"
@file-change="handleCertFileChange"
@confirm="handleCertUploadConfirm"
@cancel="handleCertUploadCancel"
/>
<UploadDialog v-model:visible="uploadCertDialogVisible" :title="'上传证书'" :loading="uploadCertLoading"
:fileList="uploadCertFileList" @file-change="handleCertFileChange" @confirm="handleCertUploadConfirm"
@cancel="handleCertUploadCancel" />
</div>
</template>
<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { queryKeys, showKeyParams, editIsUse, testCallKey, saveKeyParams, uploadHsmConfig, createParam,
downloadHsmConfig, downloadCloudHsmConfig, downloadSanWeiConfig, downloadZdxlzjceConfig, uploadSanWeiConfig } from '@/api/ruleConfig/keyManagement.js';
import {
queryKeys, showKeyParams, editIsUse, testCallKey, saveKeyParams, uploadHsmConfig, createParam,
downloadHsmConfig, downloadCloudHsmConfig, downloadSanWeiConfig, downloadZdxlzjceConfig, uploadSanWeiConfig
} from '@/api/ruleConfig/keyManagement.js';
import ParamsConfig from './components/ParamsConfig.vue';
import UploadDialog from './components/UploadDialog.vue';
import { testData } from '@/constants/keyConfigDefaultData.js';
......@@ -311,9 +284,9 @@ const handleUploadConfirm = async () => {
}
//如果量子加密机配置
if (keyManageType.value === '9'){
if (keyManageType.value === '9') {
formData.append('filePath', configParams.value.zdxlzjcedir);
}else{
} else {
// 如果是其他类型的密管配置
formData.append('filePath', configParams.value.hsmfiledir);
}
......@@ -386,7 +359,7 @@ const handleDownloadTemplate = async () => {
});
return;
}
if(keyManageType.value === '2'){
if (keyManageType.value === '2') {
// 加密机的模版
const res = await downloadHsmConfig();
const blob = new Blob([res], { type: 'application/octet-stream' });
......@@ -400,7 +373,7 @@ const handleDownloadTemplate = async () => {
}
// 云加密机的模版
if(keyManageType.value === '3'){
if (keyManageType.value === '3') {
const res = await downloadCloudHsmConfig();
const blob = new Blob([res], { type: 'application/octet-stream' });
const link = document.createElement('a');
......@@ -414,7 +387,7 @@ const handleDownloadTemplate = async () => {
// 三未加密机的模版
if(keyManageType.value === '8'){
if (keyManageType.value === '8') {
const res = await downloadSanWeiConfig();
const blob = new Blob([res], { type: 'application/octet-stream' });
const link = document.createElement('a');
......@@ -427,7 +400,7 @@ const handleDownloadTemplate = async () => {
}
// 中电信密管的模版
if(keyManageType.value === '9'){
if (keyManageType.value === '9') {
const res = await downloadZdxlzjceConfig();
const blob = new Blob([res], { type: 'application/octet-stream' });
const link = document.createElement('a');
......@@ -533,60 +506,48 @@ onMounted(() => {
</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-card {
background: #fff;
border-radius: 4px;
padding: 20px;
.app-container__body {
padding: 20px 0 0 0;
.pageTitle {
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;
display: flex;
align-items: center;
font-size: 16px;
font-weight: 500;
letter-spacing: 0px;
line-height: 22px;
color: rgba(53, 64, 79, 1);
&:before {
content: '';
width: 4px;
height: 14px;
background: #409EFF;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
.icon {
margin-right: 6px;
width: 16px;
height: 16px;
}
}
.section-content {
margin-bottom: 20px;
.form-item {
display: flex;
align-items: center;
:deep(.el-select__wrapper){
height: 40px;
}
.label {
width: 100px;
margin-right: 10px;
font-size: 14px;
color: rgba(53, 64, 79, 1);
}
.tip {
color: #f56c6c;
margin-left: 10px;
font-size: 12px;
margin-left: 34px;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 22px;
color: rgba(253, 84, 81, 1);
}
}
......@@ -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 {
text-align: center;
margin-top: 20px;
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论