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