Skip to content

N
nse-ui
Commit d1d8c7f0 by wanglizhen
Options

加密规则

parent b929416d
正在显示 包含 266 行增加 和 137 行删除
src/views/ruleConfig/Discover/index.vue
......@@ -233,7 +233,7 @@ onMounted(() => {
<div class="app-container scroller">
<div class="app-container__body">
<div class="pageTitle">
<img class="icon" src="@/assets/images/ruleConfig/discoverPage.png" alt="">
<img class="icon" src="@/assets/images/ruleConfig/DiscoverPage.png" alt="">
<span>发现规则</span>
</div>
<div class="box">
......
src/views/ruleConfig/Encryption/index.vue
<script setup name="Discover">
import { onMounted, ref, toRefs } from 'vue'
import { Split } from 'view-ui-plus';
import { ElMessage } from 'element-plus'
import { parseTime } from '@/utils/ruoyi'
import CollapseView from '@/components/CollapseView/index.vue'
......@@ -11,7 +10,8 @@ import UploadModule from './modules/UploadModule.vue' // 上传模块
import { query, initEncryptionTypeList, getDictinaryTypes, deleteType, delSecretKey, exportExcel, importfile } from '@/api/ruleConfig/encryption'
const splitNum = ref(0.31) // 左右分割比例
const fatherIndex = ref(0) // 父级索引
const currentId = ref('')
const collapseList = ref([]) // 左侧列表数据
const encryptionTypeList = ref([]) // 加密类型列表
const dictinaryTypes = ref([]) // 字典类型列表
......@@ -68,9 +68,16 @@ const getCollapse = (type) => {
}
})
if (type === 'edit') return
if (collapseList.value.length <= 0) return
if (collapseList.value.length <= 0) {
modalData.type = 'encryption'
encryptionForm.value = {}
fatherIndex.value = null
return
}
modalData.type = 'encryption'
encryptionForm.value = collapseList.value[0]
currentId.value = encryptionForm.value.id
fatherIndex.value = 0
})
}
......@@ -167,13 +174,16 @@ const modalConfirm = () => {
}
// 加密查看
const collapseView = (item) => {
const collapseView = (val) => {
const { index, item } = val
typeNameList.value = []
collapseList.value.forEach(item => {
typeNameList.value.push(item.encryption_name)
})
fatherIndex.value = index
encryptionForm.value = item
rightType.value = 'encryption'
currentId.value = encryptionForm.value.id
}
// 密钥点击监听
......@@ -184,9 +194,10 @@ const collapseChange = (itemData) => {
parentItem.list.forEach(itemLi => {
keyNameList.value.push(itemLi.secret_key_name)
})
console.log('密钥点击监听', item)
// console.log('密钥点击监听', item)
keyForm.value = { ...item, ...{ encryption_name: encryption_name, encryption_type: encryption_type } }
rightType.value = 'key'
currentId.value = keyForm.value.id
}
// 新增确认
......@@ -230,92 +241,190 @@ onMounted(() => {
</script>
<template>
<div class="app-container scroller">
<PageTitle>
<template #title>
加密规则
</template>
</PageTitle>
<div class="app-container__body">
<Split v-model="splitNum">
<template #left>
<div class="demo-split-pane" style="padding: 0 38px 10px 0;width: 100%;overflow: auto;height: 100%;display: flex;flex-direction: column;">
<div class="mb20" style="display: flex;flex-direction: row-reverse;">
<el-button icon="Upload" type="success" @click="importClick">恢复</el-button>
<el-button class="mr10" icon="Download" type="primary" @click="exportExcelFunc">备份</el-button>
<div class="pageTitle">
<img class="icon" src="@/assets/images/ruleConfig/encryptionPage.png" alt="">
<span>加密规则</span>
</div>
<div class="mb20" style="display: flex;align-items: center;justify-content: space-between;">
<el-input class="mr20" v-model="queryParams.encryption_name" placeholder="加密方式搜索">
<template #suffix>
<el-icon style="vertical-align: middle;cursor: pointer;" @click="getCollapse">
<div class="box">
<div class="left">
<div class="searchBox">
<el-input v-model="queryParams.encryption_name" placeholder="加密方式搜索" style="width: 325px;margin-bottom: 15px;">
<template #prefix>
<el-icon>
<search />
</el-icon>
</template>
<template #append>
<el-button icon="search" class="searchBut" @click="getCollapse">搜索</el-button>
</template>
</el-input>
<el-button type="primary" icon="Plus" @click="addDomainClick">新增加密</el-button>
<el-button type="primary" icon="Plus" class="addBut" @click="addDomainClick">新增加密</el-button>
<div style="height: 40px;display: flex;align-items: center;margin-left: 14px;" >
<el-button class="mr8" icon="Download" type="primary" plain @click="exportExcelFunc">备份</el-button>
<el-button icon="Upload" type="primary" plain @click="importClick">恢复</el-button>
</div>
<el-scrollbar style="width: 100%;flex: 1;padding-right: 38px;">
<CollapseView :list="collapseList" @add="collapseAdd" @mainDeletion="collapseMainDeletion"
</div>
<div class="collapseView">
<CollapseView :list="collapseList" :fatherIndex="fatherIndex" :currentId="currentId" @add="collapseAdd" @mainDeletion="collapseMainDeletion"
@childDelete="collapseDelete" @change="collapseChange" @view="collapseView" />
</el-scrollbar>
</div>
</template>
<template #right>
<div class="demo-split-pane">
<div class="right">
<div class="right-title">
<el-icon>
<info-filled />
</el-icon>
<span style="margin-left: 5px;">{{ rightType === 'encryption' ? '加密定义' : '密钥定义' }}</span>
</div>
<div class="right-content">
<div class="right">
<div class="line"></div>
<div style="padding: 26px 28px 0 28px;position: relative;flex: 1;">
<DividerTitle :title-name="rightType === 'encryption' ? '加密定义' : '密钥定义'" />
<div class="right-content" v-if="collapseList.length > 0">
<AddEncryption :itemData="encryptionForm" :encryptionTypeDict="encryptionTypeList"
:typeNameDict="typeNameList" type="edit" v-if="rightType === 'encryption'" @cancel="modalPopCancel"
@confirm="AddFormConfirm" />
<AddKey :itemData="keyForm" :encryptionTypeDict="encryptionTypeList" :keyNameDict="keyNameList"
type="edit" v-if="rightType === 'key'" @cancel="modalPopCancel" @confirm="AddFormConfirm" />
</div>
<el-empty description="暂无数据" v-if="collapseList.length <= 0"
style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"></el-empty>
</div>
</div>
</div>
</template>
</Split>
</div>
<!-- 提示框 -->
<Modal v-model="modalData.show" :icon="modalData.icon" :cancel="modalData.cancel" :text="modalData.text"
@confirm="modalConfirm"></Modal>
<!-- 新增加密 / 密钥 -->
<ModalPop :width="modalPopData.type === 'upload' ? '600' : '850'" v-model="modalPopData.show" :title="modalPopData.title" @cancel="modalPopCancel">
<template #content>
<el-dialog :title="modalPopData.title" v-model="modalPopData.show" :before-close="modalPopCancel" :width="modalPopData.type === 'upload' ? '600' : '850'">
<AddEncryption :itemData="encryptionForm" :encryptionTypeDict="encryptionTypeList" :typeNameDict="typeNameList"
type="add" @cancel="modalPopCancel" @confirm="AddFormConfirm" v-if="modalPopData.type === 'encryption'" />
<AddKey :itemData="keyForm" :encryptionTypeDict="encryptionTypeList" :keyNameDict="keyNameList" type="add"
@cancel="modalPopCancel" @confirm="AddFormConfirm" v-if="modalPopData.type === 'key'" />
<UploadModule @cancel="modalPopCancel" @confirm="AddFormConfirm" v-if="modalPopData.type === 'upload'" />
</template>
</ModalPop>
</el-dialog>
</div>
</template>
<style lang="scss" scoped>
.app-container__body {
// height: calc(
// 100vh - var(--navbar-height) - var(--container-pd) - var(--container-pd)
// ) !important;
.right {
padding: 6px 10px 10px;
height: 100%;
&-title {
padding: 0px 0px 10px 10px;
padding: 20px 0 0 0;
.pageTitle {
margin-bottom: 20px;
display: flex;
align-items: center;
font-weight: 700;
color: #515a6e;
font-size: 16px;
font-weight: 500;
letter-spacing: 0px;
line-height: 22px;
color: rgba(53, 64, 79, 1);
.icon {
margin-right: 6px;
width: 16px;
height: 16px;
}
}
.box {
display: flex;
flex: 1;
overflow: hidden;
.left {
margin-right: 30px;
width: 565px;
overflow: auto;
height: 100%;
display: flex;
flex-direction: column;
.searchBox{
display: flex;
width: 100%;
.searchBut {
height: 40px;
background: var(--el-color-primary);
color: var(--el-color-white);
border-radius: 0px 5px 5px 0px;
}
.addBut{
height: 40px;
margin-left: 10px;
background: rgba(0, 189, 207, 1);
border-color: rgba(0, 189, 207, 1);
}
}
.collapseView {
width: 100%;
flex: 1;
overflow: hidden;
}
}
.right {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
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%
);
}
&-content {
padding: 10px 0px;
width: 80%;
margin: 20px auto;
width: 100%;
.openEditor {
position: absolute;
bottom: 0;
right: 0;
}
:deep(.formBox) {
border-radius: 5px;
background: #ebebeb;
border: 1px solid rgba(29, 178, 245, 1);
overflow: hidden;
.el-form-item__content {
border-left: 1px solid #ebebeb;
background: #f5fcff;
}
.el-form-item__label {
height: 40px;
line-height: 40px;
background: #f5fcff;
color: rgba(148, 148, 148, 1);
}
.el-form-item {
margin-bottom: 1px;
background: #f5fcff;
}
.el-input {
height: 40px;
line-height: 40px;
}
.is-disabled {
background: #f5fcff;
.el-input__wrapper,.el-textarea__inner {
background: #f5fcff;
box-shadow: none;
border-radius: 0;
}
.el-input__inner,.el-textarea__inner {
-webkit-text-fill-color: rgba(53, 64, 79, 1);
}
}
.el-form-item__error {
top: 30% !important;
left: auto !important;
right: 89px !important;
}
}
}
&-btn {
padding: 20px 20px 20px 100px;
display: flex;
justify-content: center;
}
}
}
}
......
src/views/ruleConfig/Encryption/modules/AddEncryption.vue
<script setup lang="ts" name="AddDomain">
import { onMounted, reactive, ref, toRefs, watch, computed } from "vue";
import type { FormInstance } from "element-plus";
import { ElMessage } from 'element-plus'
import { save } from '@/api/ruleConfig/encryption'
import { ElMessage } from "element-plus";
import { save } from "@/api/ruleConfig/encryption";
const props = defineProps<{
itemData: Object;
......@@ -11,12 +11,10 @@ const props = defineProps<{
typeNameDict: any;
}>();
const emit = defineEmits(['cancel','confirm']);
const emit = defineEmits(["cancel", "confirm"]);
const data = reactive({
form: <any>{
},
form: <any>{},
rules: {
encryption_type: [
{
......@@ -31,55 +29,57 @@ const data = reactive({
const { form, rules } = toRefs(data);
const readOnly = ref(true);
const typeNameList = ref([])
const encryptionTypeOptions = computed(() => props.encryptionTypeDict)
const typeNameList = ref([]);
const encryptionTypeOptions = computed(() => props.encryptionTypeDict);
const formRef = ref<FormInstance>();
// 取消
const cancel = () => {
if (props.type === 'edit') {
readOnly.value = true
if (props.type === "edit") {
readOnly.value = true;
const data = JSON.parse(JSON.stringify(props.itemData));
form.value = { ...form.value, ...data };
} else if (props.type === 'add') {
emit('cancel')
form.value = {}
} else if (props.type === "add") {
emit("cancel");
form.value = {};
}
}
};
const confirm = () => {
formRef.value?.validate((valid) => {
if (valid) {
addDataFun()
addDataFun();
} else {
}
});
}
};
// 添加加密分类
const addDataFun = () => {
if (props.type === 'edit') {
form.value = {...form.value,...{id: form.value.id}}
if (props.type === "edit") {
form.value = { ...form.value, ...{ id: form.value.id } };
}
save(form.value).then(res => {
const { flag } = res
save(form.value).then((res) => {
const { flag } = res;
if (flag) {
ElMessage.success((props.type === "add" || !form.value.id) ? "新增成功" : "修改成功");
if (props.type === 'edit') {
readOnly.value = true
} else if (props.type === 'add') {
form.value = {}
ElMessage.success(
props.type === "add" || !form.value.id ? "新增成功" : "修改成功"
);
if (props.type === "edit") {
readOnly.value = true;
} else if (props.type === "add") {
form.value = {};
}
emit('confirm', props.type)
emit("confirm", props.type);
}
})
}
});
};
// 分类称验证
const validateRulename = (rule, value, callback) => {
const state = typeNameList.value.includes(value);
if (state) {
callback(new Error('加密名称已存在'));
callback(new Error("加密名称已存在"));
} else {
callback();
}
......@@ -88,7 +88,7 @@ const validateRulename = (rule, value, callback) => {
watch(
() => props.type,
(newVal) => {
readOnly.value = props.type === 'edit' ? true : false;
readOnly.value = props.type === "edit" ? true : false;
},
{ deep: true, immediate: true }
);
......@@ -97,13 +97,15 @@ watch(
() => props.itemData,
(newVal) => {
if (props.type === "add") {
form.value = {}
form.value = {};
}
if (props.type === 'edit' && props.itemData) {
if (props.type === "edit" && props.itemData) {
const data = JSON.parse(JSON.stringify(props.itemData));
form.value = { ...form.value, ...data };
if (props.type === 'edit') {
typeNameList.value = typeNameList.value.filter(item => item !== data.encryption_name)
if (props.type === "edit") {
typeNameList.value = typeNameList.value.filter(
(item) => item !== data.encryption_name
);
}
}
},
......@@ -113,10 +115,12 @@ watch(
watch(
() => props.typeNameDict,
(newVal) => {
typeNameList.value = props.typeNameDict
typeNameList.value = props.typeNameDict;
const data = JSON.parse(JSON.stringify(props.itemData));
if (props.type === 'edit' && data) {
typeNameList.value = typeNameList.value.filter(item => item !== data.encryption_name)
if (props.type === "edit" && data) {
typeNameList.value = typeNameList.value.filter(
(item) => item !== data.encryption_name
);
}
},
{ deep: true, immediate: true }
......@@ -126,12 +130,15 @@ watch(
<template>
<div>
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px" :disabled="readOnly">
<el-form-item label="加密名称" prop="encryption_name" required :rules="[{ required: true, message: '请输入加密名称', trigger:'blur' },{ required: true, validator: validateRulename, trigger:'blur' }]">
<div class="formBox">
<el-form-item label="加密名称" prop="encryption_name" required
:rules="[{ required: true, message: '请输入加密名称', trigger:'blur' },{ required: true, validator: validateRulename, trigger:'blur' }]">
<el-input v-model="form.encryption_name"></el-input>
</el-form-item>
<el-form-item label="加密方式" prop="encryption_type" required>
<div style="width: 100%;background: #F3F5FA;">
<el-select v-model="form.encryption_type">
<el-input v-model="form.encryption_type" v-if="readOnly"></el-input>
<el-select v-model="form.encryption_type" v-if="!readOnly">
<el-option v-for="item in encryptionTypeOptions" :key="item.value" :label="item.text" :value="item.value">
</el-option>
</el-select>
......@@ -140,11 +147,12 @@ watch(
<el-form-item label="备注">
<el-input type="textarea" rows="4" v-model="form.note"></el-input>
</el-form-item>
</div>
</el-form>
<div class="btn">
<el-button type="primary" style="width: 150px;" @click="readOnly = false" v-if="readOnly">编辑</el-button>
<el-button type="info" style="width: 150px;" @click="cancel" v-if="!readOnly">取消</el-button>
<el-button type="primary" style="width: 150px;" @click="confirm" v-if="!readOnly">确认</el-button>
<el-button type="primary" style="width: 80px;" @click="readOnly = false" v-if="readOnly">编辑</el-button>
<el-button type="primary" style="width: 80px;" @click="confirm" v-if="!readOnly">确认</el-button>
<el-button style="width: 80px;" @click="cancel" v-if="!readOnly">取消</el-button>
</div>
</div>
</template>
......
src/views/ruleConfig/Encryption/modules/AddKey.vue
......@@ -2,7 +2,11 @@
import { onMounted, reactive, ref, toRefs, watch, computed } from "vue";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import { getRandomValue, testEncryption, saveSecretKey } from '@/api/ruleConfig/encryption'
import {
getRandomValue,
testEncryption,
saveSecretKey,
} from "@/api/ruleConfig/encryption";
const props = defineProps<{
itemData: Object;
......@@ -11,12 +15,10 @@ const props = defineProps<{
keyNameDict: any;
}>();
const emit = defineEmits(['cancel','confirm']);
const emit = defineEmits(["cancel", "confirm"]);
const data = reactive({
form: <any>{
},
form: <any>{},
rules: {
sectet_key_value: [
{
......@@ -34,7 +36,7 @@ const readOnly = ref(true);
const testParam = ref(""); // 测试参数
const encryptedValue = ref(""); // 加密后的值
const formRef = ref<FormInstance>();
const keyNameList = ref([])
const keyNameList = ref([]);
// 取消
const cancel = () => {
......@@ -50,7 +52,7 @@ const cancel = () => {
const confirm = () => {
formRef.value?.validate((valid) => {
if (valid) {
saveSecretKeyFun()
saveSecretKeyFun();
} else {
}
});
......@@ -63,32 +65,34 @@ const saveSecretKeyFun = () => {
encryption_id: encryption_id,
secret_key_name: secret_key_name,
sectet_key_value: sectet_key_value,
};
if (props.type === "edit") {
data = { ...data, ...{ id: id } };
}
if (props.type === 'edit') {
data = {...data,...{id: id}}
}
saveSecretKey(data).then(res => {
const { flag } = res
saveSecretKey(data).then((res) => {
const { flag } = res;
if (flag) {
ElMessage.success((props.type === "add" || !form.value.id) ? "新增成功" : "修改成功");
if (props.type === 'edit') {
readOnly.value = true
} else if (props.type === 'add') {
form.value = {}
ElMessage.success(
props.type === "add" || !form.value.id ? "新增成功" : "修改成功"
);
if (props.type === "edit") {
readOnly.value = true;
} else if (props.type === "add") {
form.value = {};
}
testParam.value = ""
encryptedValue.value = ""
emit('confirm', props.type)
testParam.value = "";
encryptedValue.value = "";
emit("confirm", props.type);
}
})
}
});
};
// 密钥生成
const getKeyGeneration = () => {
const { encryption_type } = form.value;
getRandomValue({ type: encryption_type}).then((res) => {
getRandomValue({ type: encryption_type }).then((res) => {
const { flag, data } = res;
if (flag){
if (flag) {
form.value.sectet_key_value = data;
}
});
......@@ -104,20 +108,20 @@ const getKeyText = () => {
param: testParam.value,
type: encryption_type,
secret_key: form.value.sectet_key_value,
}
};
testEncryption(data).then((res) => {
const { flag, data } = res;
if (flag){
if (flag) {
encryptedValue.value = data;
}
});
}
};
// 分类称验证
const validateRulename = (rule, value, callback) => {
const state = keyNameList.value.includes(value);
if (state) {
callback(new Error('加密名称已存在'));
callback(new Error("加密名称已存在"));
} else {
callback();
}
......@@ -135,13 +139,15 @@ watch(
() => props.itemData,
(newVal) => {
if (props.type === "add") {
form.value = {}
form.value = {};
}
if (props.itemData) {
const data = JSON.parse(JSON.stringify(props.itemData));
form.value = { ...form.value, ...data };
if (props.type === 'edit' && data) {
keyNameList.value = keyNameList.value.filter(item => item !== data.secret_key_name)
if (props.type === "edit" && data) {
keyNameList.value = keyNameList.value.filter(
(item) => item !== data.secret_key_name
);
}
}
},
......@@ -151,10 +157,12 @@ watch(
watch(
() => props.keyNameDict,
(newVal) => {
keyNameList.value = props.keyNameDict
keyNameList.value = props.keyNameDict;
const data = JSON.parse(JSON.stringify(props.itemData));
if (props.type === 'edit' && data) {
keyNameList.value = keyNameList.value.filter(item => item !== data.secret_key_name)
if (props.type === "edit" && data) {
keyNameList.value = keyNameList.value.filter(
(item) => item !== data.secret_key_name
);
}
},
{ deep: true, immediate: true }
......@@ -164,7 +172,9 @@ watch(
<template>
<div>
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px" :disabled="readOnly">
<el-form-item label="密钥名称" prop="secret_key_name" required :rules="[{ required: true, message: '请输入加密名称', trigger:'blur' },{ required: true, validator: validateRulename, trigger:'blur' }]">
<div class="formBox">
<el-form-item label="密钥名称" prop="secret_key_name" required
:rules="[{ required: true, message: '请输入加密名称', trigger:'blur' },{ required: true, validator: validateRulename, trigger:'blur' }]">
<el-input v-model="form.secret_key_name"></el-input>
</el-form-item>
<el-form-item label="加密算法">
......@@ -173,7 +183,8 @@ watch(
<el-form-item label="密钥值" prop="sectet_key_value" required>
<div style="width: 100%;display: flex;align-items: center;">
<el-input v-model="form.sectet_key_value" disabled style="flex: 1;"></el-input>
<el-button type="primary" style="margin-left: 8px;" @click="getKeyGeneration" v-if="(!form.sectet_key_value) && !readOnly">密钥生成</el-button>
<el-button type="primary" style="margin-left: 8px;" @click="getKeyGeneration"
v-if="(!form.sectet_key_value) && !readOnly">密钥生成</el-button>
</div>
</el-form-item>
<el-form-item label="测试">
......@@ -185,11 +196,12 @@ watch(
<el-form-item label="加密后的值">
<el-input v-model="encryptedValue" disabled></el-input>
</el-form-item>
</div>
</el-form>
<div class="btn">
<el-button type="primary" style="width: 150px;" @click="readOnly = false" v-if="readOnly">编辑</el-button>
<el-button type="info" style="width: 150px;" @click="cancel" v-if="!readOnly">取消</el-button>
<el-button type="primary" style="width: 150px;" @click="confirm" v-if="!readOnly">确认</el-button>
<el-button type="primary" style="width: 80px;" @click="readOnly = false" v-if="readOnly">编辑</el-button>
<el-button type="primary" style="width: 80px;" @click="confirm" v-if="!readOnly">确认</el-button>
<el-button style="width: 80px;" @click="cancel" v-if="!readOnly">取消</el-button>
</div>
</div>
</template>
......
src/views/ruleConfig/Encryption/modules/UploadModule.vue
......@@ -48,8 +48,8 @@ const handleFileChange = (file) => {
@file-change="handleFileChange" />
</div>
<div class="btn">
<el-button type="info" style="width: 150px;" @click="cancel">取消</el-button>
<el-button type="primary" :loading="uploadLoading" style="width: 150px;" @click="confirm">确认</el-button>
<el-button type="primary" :loading="uploadLoading" style="width: 80px;" @click="confirm">确认</el-button>
<el-button style="width: 80px;" @click="cancel">取消</el-button>
</div>
</div>
</template>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论