Commit d1d8c7f0 by wanglizhen

加密规则

parent b929416d
......@@ -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">
......
<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>
......
......@@ -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>
......
......@@ -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 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论