加密规则

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/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
-     const data = JSON.parse(JSON.stringify(props.itemData));
+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')
-    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,25 +130,29 @@ 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' }]">
-        <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-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="form.note"></el-input>
-      </el-form-item>
+      <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-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>
+          </div>
+        </el-form-item>
+        <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,32 +172,36 @@ 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' }]">
-        <el-input v-model="form.secret_key_name"></el-input>
-      </el-form-item>
-      <el-form-item label="加密算法">
-        <el-input v-model="form.encryption_name" disabled></el-input>
-      </el-form-item>
-      <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>
-        </div>
-      </el-form-item>
-      <el-form-item label="测试">
-        <div style="width: 100%;display: flex;align-items: center;">
-          <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="encryptedValue" disabled></el-input>
-      </el-form-item>
+      <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="加密算法">
+          <el-input v-model="form.encryption_name" disabled></el-input>
+        </el-form-item>
+        <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>
+          </div>
+        </el-form-item>
+        <el-form-item label="测试">
+          <div style="width: 100%;display: flex;align-items: center;">
+            <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="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>