Skip to content

N
nse-ui
Commit 030e93cb by wanglizhen
Options

加密规则模块上传

parent f2d097cd
正在显示 包含 478 行增加 和 143 行删除
src/api/ruleConfig/encryption.js 0 → 100644
import request from '@/utils/request'
/**
* 加密规则 - 查询加密规则列表
* @param {*} query
* @returns
*/
export function query(query) {
return request({
url: '/core/encryption/query',
method: 'get',
params: query
})
}
/**
* 加密规则 - 查询加密方式列表
* @param {*} query
* @returns
*/
export function initEncryptionTypeList(query) {
return request({
url: '/core/encryption/initEncryptionTypeList',
method: 'get',
params: query
})
}
/**
* 加密规则 - 获取字典分类
* @param {*} query
* @returns
*/
export function getDictinaryTypes(query) {
return request({
url: '/core/dictionary/getDictinaryTypes',
method: 'get',
params: query
})
}
/**
* 加密规则 - 新增加密分类
* @param {*} data
* @returns
*/
export function save(data) {
return request({
url: '/core/encryption/save',
method: 'post',
data: data
})
}
/**
* 加密规则 - 删除加密分类
* @param {*} data
* @returns
*/
export function deleteType(data) {
return request({
url: '/core/encryption/delete',
method: 'post',
data: data
})
}
/**
* 加密规则 - 密钥生成
* @param {*} query
* @returns
*/
export function getRandomValue(query) {
return request({
url: '/core/encryption/getRandomValue',
method: 'get',
params: query
})
}
/**
* 加密规则 - 测试
* @param {*} data
* @returns
*/
export function testEncryption(data) {
return request({
url: '/core/encryption/testEncryption',
method: 'post',
data: data
})
}
/**
* 加密规则 - 新增密钥
* @param {*} data
* @returns
*/
export function saveSecretKey(data) {
return request({
url: '/core/encryption/saveSecretKey',
method: 'post',
data: data
})
}
/**
* 加密规则 - 删除密钥
* @param {*} data
* @returns
*/
export function delSecretKey(data) {
return request({
url: '/core/encryption/delSecretKey',
method: 'post',
data: data
})
}
src/views/ruleConfig/Algorithm/index.vue
......@@ -36,6 +36,7 @@ const modalPopShow = ref(false)
// 获取数据
const getCollapse = (type) => {
query({ dataarea: searchValue.value }).then(res => {
rulenameList.value = []
const { data } = res
collapseList.value = data.map(item => {
const list = item.ruleList.map(itemTwo => {
......
src/views/ruleConfig/Algorithm/modules/formModule.vue
......@@ -101,7 +101,7 @@ const saveFunc = () => {
// 算法名称验证
const validateRulename = (rule, value, callback) => {
if (form.value.id) {
if (form.value.id && form.value.rulename === value) {
callback();
return false;
}
......
src/views/ruleConfig/Discover/modules/AddDomain.vue
......@@ -42,7 +42,8 @@ watch(
() => props.itemData,
(newVal) => {
if (props.type === 'edit' && props.itemData) {
form.value = JSON.parse(JSON.stringify(props.itemData))
const data = JSON.parse(JSON.stringify(props.itemData));
form.value = { ...form.value, ...data };
}
},
{ deep: true, immediate: true }
......@@ -51,8 +52,9 @@ watch(
// 取消
const cancel = () => {
if (props.type === 'edit') {
form.value = props.itemData
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 = {}
......
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 CollapseView from '@/components/CollapseView/index.vue'
import AddEncryption from './modules/AddEncryption.vue' // 加密表单
import AddKey from './modules/AddKey.vue' // 密钥表单
import ModalPop from "@/components/EditPop/ModalPop.vue"
import { query, initEncryptionTypeList, getDictinaryTypes, deleteType, delSecretKey } from '@/api/ruleConfig/encryption'
const splitNum = ref(0.31) // 左右分割比例
const collapseList = ref([])
const collapseList = ref([]) // 左侧列表数据
const encryptionTypeList = ref([]) // 加密类型列表
const dictinaryTypes = ref([]) // 字典类型列表
const typeNameList = ref([]) // 分类名称列表
const keyNameList = ref([]) // 分类名称列表
const data = reactive({
editEncryptionForm: {
name: "",
},
addEncryptionForm: {
name: "",
encryptionForm: {},
keyForm: {},
queryParams: {
encryption_name: ''
},
editKeyForm: {
name: "",
},
addKeyForm: {
name: "",
delData: {
id: ''
}
});
const { editEncryptionForm, addEncryptionForm, editKeyForm, addKeyForm } = toRefs(data);
const { encryptionForm, keyForm, queryParams, delData } = toRefs(data);
const rightType = ref('encryption') // 右侧展示类型
const modalData = reactive({
show: false,
......@@ -42,48 +44,40 @@ const modalPopData = reactive({
})
// 获取数据
const getCollapse = () => {
const data = [
{
name: '测试加密',
list: [
{
name: '按混合证件号字段查询'
}
]
},
{
name: '通用规则',
list: [
{
name: 'aaaaa'
},
{
name: 'bbbbb'
}
]
},
{
name: '解密数据',
list: []
}
]
const getCollapse = (type) => {
query(queryParams.value).then(res => {
const { data } = res
collapseList.value = data.map(item => {
const list = item.list.map(itemTwo => {
return {
...itemTwo,
name: itemTwo.secret_key_name,
isCheck: false,
isDelete: true,
}
})
return {
...item,
dataarea: item.encryption_name,
list: list,
isAdd: true,
isView: true,
isDelete: true,
}
})
if (type === 'edit') return
if (collapseList.value.length <= 0) return
modalData.type = 'encryption'
encryptionForm.value = collapseList.value[0]
})
}
// 获取加密类型列表
const getInitEncryptionTypeList = () => {
initEncryptionTypeList({}).then(res => {
const { data } = res
encryptionTypeList.value = data
})
}
// 新增关闭
......@@ -93,78 +87,119 @@ const modalPopCancel = () => {
// 新增加密
const addDomainClick = (item) => {
console.log('新增加密')
typeNameList.value = []
collapseList.value.forEach(item => {
typeNameList.value.push(item.encryption_name)
})
modalPopData.title = '新增加密'
modalPopData.type = 'encryption'
addEncryptionForm.value = {}
encryptionForm.value = {}
modalPopData.show = true
}
// 新增密钥
const collapseAdd = (item) => {
console.log('新增密钥', item)
keyNameList.value = []
item.list.forEach(item => {
keyNameList.value.push(item.secret_key_name)
})
const { encryption_name, encryption_type, id } = item
modalPopData.title = '新增密钥'
modalPopData.type = 'key'
addKeyForm.value = {}
keyForm.value = {
encryption_name: encryption_name,
encryption_type: encryption_type,
encryption_id: id
}
modalPopData.show = true
}
// 删除密钥
const collapseDelete = (item) => {
console.log('删除密钥', item)
modalData.type = 'key'
modalData.cancel = true
modalData.icon = 'error'
modalData.text = '删除后无法恢复，是否确认删除[' + item.name + ']?'
modalData.show = true
}
// 删除加密
const collapseMainDeletion = (item) => {
console.log('删除加密事件', item)
const { encryption_name } = item
delData.value = item
modalData.type = 'encryption'
modalData.cancel = false
modalData.icon = 'error'
modalData.text = '删除后无法恢复，是否确认删除[' + item.name + ']?'
modalData.text = '删除后无法恢复，是否确认删除[' + encryption_name + ']?'
modalData.show = true
}
// 删除密钥
const collapseDelete = (item) => {
const { secret_key_name } = item
delData.value = item
modalData.type = 'key'
modalData.cancel = true
modalData.icon = 'error'
modalData.text = '删除后无法恢复，是否确认删除[' + secret_key_name + ']?'
modalData.show = true
}
// 提示回调
const modalConfirm = () => {
if (modalData.type === 'encryption') {
console.log('删除加密确认')
const { id } = delData.value
deleteType({ encryptionId: id }).then(res => {
const { flag } = res
if (flag) {
ElMessage.success('删除成功')
getCollapse()
} else {
ElMessage.error('删除失败')
}
})
} else if (modalData.type === 'key') {
console.log('删除密钥确认')
} else if (modalData.type === 'default') {
console.log('设置默认项')
const { id } = delData.value
delSecretKey({ keyId: id }).then(res => {
const { flag } = res
if (flag) {
ElMessage.success('删除成功')
getCollapse()
} else {
ElMessage.error('删除失败')
}
})
}
modalData.show = false
}
// 加密查看
const collapseView = (item) => {
editEncryptionForm.value = item
typeNameList.value = []
collapseList.value.forEach(item => {
typeNameList.value.push(item.encryption_name)
})
encryptionForm.value = item
rightType.value = 'encryption'
}
// 规则点击监听
const collapseChange = (item) => {
editKeyForm.value = item
// 密钥点击监听
const collapseChange = (itemData) => {
const { parentItem, item } = itemData
const { encryption_name, encryption_type } = parentItem
keyNameList.value = []
parentItem.list.forEach(itemLi => {
keyNameList.value.push(itemLi.secret_key_name)
})
console.log('密钥点击监听', item)
keyForm.value = { ...item, ...{ encryption_name: encryption_name, encryption_type: encryption_type } }
rightType.value = 'key'
}
// 新增确认
const AddDomainConfirm = (item) => {
const AddFormConfirm = (item) => {
if (modalPopData.type === 'encryption') {
console.log('新增加密确认', item)
getCollapse(item)
} else if (modalPopData.type === 'key') {
console.log('新增密钥确认', item)
getCollapse(item)
}
modalPopData.show = false
}
onMounted(() => {
getCollapse()
getInitEncryptionTypeList()
})
</script>
......@@ -184,17 +219,17 @@ onMounted(() => {
<el-button class="mr10" icon="Download" type="primary">备份</el-button>
</div>
<div class="mb20" style="display: flex;align-items: center;justify-content: space-between;">
<el-input class="mr20" placeholder="加密方式搜索">
<el-input class="mr20" v-model="queryParams.encryption_name" placeholder="加密方式搜索">
<template #suffix>
<el-icon style="vertical-align: middle;">
<el-icon style="vertical-align: middle;cursor: pointer;" @click="getCollapse">
<search />
</el-icon>
</template>
</el-input>
<el-button type="primary" icon="Plus" @click="addDomainClick">新增加密</el-button>
</div>
<CollapseView :list="collapseList" @add="collapseAdd" @mainDeletion="collapseMainDeletion" @childDelete="collapseDelete"
@change="collapseChange" @view="collapseView" />
<CollapseView :list="collapseList" @add="collapseAdd" @mainDeletion="collapseMainDeletion"
@childDelete="collapseDelete" @change="collapseChange" @view="collapseView" />
</div>
</template>
<template #right>
......@@ -207,8 +242,11 @@ onMounted(() => {
<span style="margin-left: 5px;">{{ rightType === 'encryption' ? '加密定义' : '密钥定义' }}</span>
</div>
<div class="right-content">
<AddEncryption v-model="editEncryptionForm" type="edit" v-if="rightType === 'encryption'" />
<AddKey v-model="editKeyForm" type="edit" v-if="rightType === 'key'" />
<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>
</div>
</div>
......@@ -222,10 +260,10 @@ onMounted(() => {
<!-- 新增加密 / 密钥 -->
<ModalPop :width="'850'" v-model="modalPopData.show" :title="modalPopData.title" @cancel="modalPopCancel">
<template #content>
<AddEncryption v-model="addEncryptionForm" type="add" @cancel="modalPopCancel" @confirm="AddDomainConfirm"
v-if="modalPopData.type === 'encryption'" />
<AddKey v-model="addKeyForm" type="add" @cancel="modalPopCancel" @confirm="AddDomainConfirm"
v-if="modalPopData.type === 'key'" />
<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'" />
</template>
</ModalPop>
</div>
......
src/views/ruleConfig/Encryption/modules/AddEncryption.vue
<script setup lang="ts" name="AddDomain">
import { onMounted, reactive, ref, toRefs, watch } from "vue";
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'
const props = defineProps<{
modelValue: boolean;
itemData: Object;
type: string;
encryptionTypeDict: Array<any>;
typeNameDict: any;
}>();
const emit = defineEmits(["update:modelValue", 'cancel','confirm']);
const emit = defineEmits(['cancel','confirm']);
const data = reactive({
rules: {},
form: <any>{
},
rules: {
encryption_type: [
{
required: true,
message: "请选择加密方式",
trigger: ["change"],
},
],
},
});
const { rules } = toRefs(data);
const { form, rules } = toRefs(data);
const readOnly = ref(true);
watch(
() => props.type,
(newVal) => {
readOnly.value = props.type === 'edit' ? true : false;
},
{ deep: true, immediate: true }
);
const typeNameList = ref([])
const encryptionTypeOptions = computed(() => props.encryptionTypeDict)
const formRef = ref<FormInstance>();
// 取消
const cancel = () => {
if (props.type === 'edit') {
readOnly.value = true
}else if (props.type === 'add') {
const data = JSON.parse(JSON.stringify(props.itemData));
form.value = { ...form.value, ...data };
} else if (props.type === 'add') {
emit('cancel')
form.value = {}
}
}
const confirm = () => {
formRef.value?.validate((valid) => {
if (valid) {
addDataFun()
} else {
}
});
}
// 添加加密分类
const addDataFun = () => {
if (props.type === 'edit') {
form.value = {...form.value,...{id: form.value.id}}
}
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 = {}
}
emit('confirm', props.type)
}
emit('confirm')
})
}
// 分类称验证
const validateRulename = (rule, value, callback) => {
const state = typeNameList.value.includes(value);
if (state) {
callback(new Error('加密名称已存在'));
} else {
callback();
}
};
watch(
() => props.type,
(newVal) => {
readOnly.value = props.type === 'edit' ? true : false;
},
{ deep: true, immediate: true }
);
watch(
() => props.itemData,
(newVal) => {
if (props.type === 'edit' && props.itemData) {
const data = JSON.parse(JSON.stringify(props.itemData));
form.value = { ...form.value, ...data };
}
},
{ deep: true, immediate: true }
);
watch(
() => props.typeNameDict,
(newVal) => {
typeNameList.value = props.typeNameDict
if (props.type === 'edit' && props.itemData) {
typeNameList.value = typeNameList.value.filter(item => item !== props.itemData.encryption_name)
}
},
{ deep: true, immediate: true }
);
</script>
<template>
<div>
<el-form ref="formRef" :model="modelValue" label-width="100px" :disabled="readOnly">
<el-form-item label="加密名称" required>
<el-input v-model="modelValue.name"></el-input>
<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' }]">
<el-input v-model="form.encryption_name"></el-input>
</el-form-item>
<el-form-item label="加密方式" required>
<el-form-item label="加密方式" prop="encryption_type" required>
<div style="width: 100%;background: #F3F5FA;">
<el-input v-model="modelValue.name" v-if="readOnly"></el-input>
<el-select v-model="modelValue.name" v-if="!readOnly">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
<el-select v-model="form.encryption_type">
<el-option v-for="item in encryptionTypeOptions" :key="item.value" :label="item.text" :value="item.value">
</el-option>
</el-select>
</div>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" rows="4" v-model="modelValue.name"></el-input>
<el-input type="textarea" rows="4" v-model="form.note"></el-input>
</el-form-item>
</el-form>
<div class="btn">
......@@ -76,4 +148,9 @@ const confirm = () => {
display: flex;
justify-content: center;
}
:deep(.el-form-item__error) {
left: auto;
right: 30px;
top: 24%;
}
</style>
\ No newline at end of file
src/views/ruleConfig/Encryption/modules/AddKey.vue
<script setup lang="ts" name="AddRules">
import { onMounted, reactive, ref, toRefs, watch } from "vue";
import { Switch } from "view-ui-plus";
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'
const props = defineProps<{
modelValue: boolean;
itemData: Object;
type: string;
encryptionTypeDict: Array<any>;
keyNameDict: any;
}>();
const emit = defineEmits(["update:modelValue", "cancel", "confirm"]);
const emit = defineEmits(['cancel','confirm']);
const data = reactive({
rules: {},
});
const { rules } = toRefs(data);
form: <any>{
const readOnly = ref(true);
const radio = ref(1);
const radioOptions = ref([
{
label: "正则表达式",
value: 1,
},
rules: {
sectet_key_value: [
{
label: "自定义方法",
value: 2,
required: true,
message: "密钥值不能为空",
trigger: ["change"],
},
{
label: "字典发现",
value: 3,
],
},
]);
});
const { form, rules } = toRefs(data);
const readOnly = ref(true);
const testParam = ref(""); // 测试参数
const encryptedValue = ref(""); // 加密后的值
const formRef = ref<FormInstance>();
const keyNameList = ref([])
watch(
() => props.type,
(newVal) => {
readOnly.value = props.type === "edit" ? true : false;
},
{ deep: true, immediate: true }
);
// 取消
const cancel = () => {
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");
}
};
const confirm = () => {
if (props.type === "edit") {
readOnly.value = true;
formRef.value?.validate((valid) => {
if (valid) {
saveSecretKeyFun()
} else {
}
});
};
// 添加密钥
const saveSecretKeyFun = () => {
const { encryption_id, secret_key_name, sectet_key_value, id } = form.value;
let data = {
encryption_id: encryption_id,
secret_key_name: secret_key_name,
sectet_key_value: sectet_key_value,
}
if (props.type === 'edit') {
data = {...data,...{id: id}}
}
emit("confirm");
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 = {}
}
testParam.value = ""
encryptedValue.value = ""
emit('confirm', props.type)
}
})
}
// 密钥生成
const getKeyGeneration = () => {
const { encryption_type } = form.value;
getRandomValue({ type: encryption_type}).then((res) => {
const { flag, data } = res;
if (flag){
form.value.sectet_key_value = data;
}
});
};
// 测试
const getKeyText = () => {
const { encryption_type } = form.value;
if (!encryption_type) {
return ElMessage.error("密钥值不能为空！");
}
const data = {
param: testParam.value,
type: encryption_type,
secret_key: form.value.sectet_key_value,
}
testEncryption(data).then((res) => {
const { flag, data } = res;
if (flag){
encryptedValue.value = data;
}
});
}
// 分类称验证
const validateRulename = (rule, value, callback) => {
const state = keyNameList.value.includes(value);
if (state) {
callback(new Error('加密名称已存在'));
} else {
callback();
}
};
watch(
() => props.type,
(newVal) => {
readOnly.value = props.type === "edit" ? true : false;
},
{ deep: true, immediate: true }
);
watch(
() => props.itemData,
(newVal) => {
if (props.itemData) {
const data = JSON.parse(JSON.stringify(props.itemData));
form.value = { ...form.value, ...data };
}
},
{ deep: true, immediate: true }
);
watch(
() => props.keyNameDict,
(newVal) => {
keyNameList.value = props.keyNameDict
if (props.type === 'edit' && props.itemData) {
keyNameList.value = keyNameList.value.filter(item => item !== props.itemData.secret_key_name)
}
},
{ deep: true, immediate: true }
);
</script>
<template>
<div>
<el-form ref="formRef" :model="modelValue" label-width="100px" :disabled="readOnly">
<el-form-item label="密钥名称" required>
<el-input v-model="modelValue.name"></el-input>
<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' }]">
<el-input v-model="form.secret_key_name"></el-input>
</el-form-item>
<el-form-item label="加密算法">
<el-input v-model="modelValue.name" disabled></el-input>
<el-input v-model="form.encryption_name" disabled></el-input>
</el-form-item>
<el-form-item label="密钥值" required>
<el-form-item label="密钥值" prop="sectet_key_value" required>
<div style="width: 100%;display: flex;align-items: center;">
<el-input v-model="modelValue.name" style="flex: 1;"></el-input>
<el-button type="primary" style="margin-left: 8px;" v-if="!readOnly">密钥生成</el-button>
<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="!readOnly">密钥生成</el-button>
</div>
</el-form-item>
<el-form-item label="测试">
<div style="width: 100%;display: flex;align-items: center;">
<el-input v-model="modelValue.name" style="flex: 1;"></el-input>
<el-button type="primary" style="margin-left: 8px;" v-if="!readOnly">测试</el-button>
<el-input v-model="testParam" style="flex: 1;"></el-input>
<el-button type="primary" style="margin-left: 8px;" @click="getKeyText" v-if="!readOnly">测试</el-button>
</div>
</el-form-item>
<el-form-item label="加密后的值">
<el-input v-model="modelValue.name" disabled></el-input>
<el-input v-model="encryptedValue" disabled></el-input>
</el-form-item>
</el-form>
<div class="btn">
......@@ -91,7 +189,7 @@ const confirm = () => {
<style lang="scss" scoped>
.el-form-item {
margin-bottom: 8px;
margin-bottom: 15px;
}
.btn {
padding: 20px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论