加密算法模块

src/api/ruleConfig/calculationMethod.js

+import request from '@/utils/request'
+
+/**
+ * 加密算法 - 查询列表
+ * @param {*} data 
+ * @returns 
+ */
+export function query(data) {
+  return request({
+    url: '/core/dataareasecretkey/query',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 加密算法 - 查询加密规则
+ * @param {*} data 
+ * @returns 
+ */
+export function queryenc(data) {
+  return request({
+    url: '/core/dataareasecretkey/queryenc',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 加密算法 - 查询密钥
+ * @param {*} data 
+ * @returns 
+ */
+export function querysec(data) {
+  return request({
+    url: '/core/dataareasecretkey/querysec',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 加密算法 - 新增算法
+ * @param {*} data 
+ * @returns 
+ */
+export function save(data) {
+  return request({
+    url: '/core/dataareasecretkey/save',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 加密算法 - 删除算法
+ * @param {*} data 
+ * @returns 
+ */
+export function del(data) {
+  return request({
+    url: '/core/dataareasecretkey/delete',
+    method: 'post',
+    data: data
+  })
+}
\ No newline at end of file

src/views/ruleConfig/CalculationMethod/index.vue

 <script setup name="CalculationMethod">
 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 formModule from './modules/formModule.vue'
 import ModalPop from "@/components/EditPop/ModalPop.vue"
 
+import { query, queryenc, del } from '@/api/ruleConfig/calculationMethod'
+
 const splitNum = ref(0.31) // 左右分割比例
 const collapseList = ref([])
+const encryptionList = ref([]) // 加密规则列表
 
 const data = reactive({
-  formEdit: {
+  formData: {
     name: "",
   },
-  formAdd: {
-    name: "",
+  queryParams: {
+    dataarea: ''
+  },
+  delData: {
+    id: ''
   }
 });
 
-const { formEdit, formAdd } = toRefs(data);
+const { formData, queryParams, delData } = toRefs(data);
 
 const modalData = reactive({
   show: false,
@@ -31,38 +38,13 @@ const modalPopShow = ref(false)
 
 // 获取数据
 const getCollapse = () => {
-  const data = [
-    {
-      name: '测试数据域',
-      list: [
-        {
-          name: 'aaaaa'
-        },
-        {
-          name: 'bbbbb'
-        }
-      ]
-    },
-    {
-      name: '通用规则',
-      list: [
-        {
-          name: 'aaaaa'
-        },
-        {
-          name: 'bbbbb'
-        }
-      ]
-    },
-    {
-      name: '解密数据',
-      list: []
-    }
-  ]
+  query(queryParams.value).then(res => {
+    const { data } = res
     collapseList.value = data.map(item => {
-    const list = item.list.map(itemTwo => {
+      const list = item.secretkeyList.map(itemTwo => {
         return {
           ...itemTwo,
+          name: itemTwo.enc_name,
           isCheck: false,
           isDelete: true,
         }
@@ -75,6 +57,18 @@ const getCollapse = () => {
         isDelete: false,
       }
     })
+    if (collapseList.value.length <= 0) return
+    if (collapseList.value[0].secretkeyList.length > 0) {
+      formData.value = {
+        dataarea_id: collapseList.value[0].id,
+        ...collapseList.value[0].secretkeyList[0]
+      }
+    } else {
+      formData.value = {
+        dataarea_id: collapseList.value[0].id
+      }
+    }
+  })
 }
 
 // 新增加密算法关闭
@@ -84,14 +78,18 @@ const modalPopCancel = () => {
 
 // 新增加密算法
 const collapseAdd = (item) => {
-  console.log('添加事件', item)
-  formAdd.value = {}
+  // console.log('添加事件', item)
+  const { id } = item
+  formData.value = {
+    dataarea_id: id
+  }
   modalPopShow.value = true
 }
 
 // 删除事件
 const collapseDelete = (item) => {
   console.log('删除事件', item)
+  delData.value = item
   modalData.show = true
   modalData.icon = 'error'
   modalData.text = '确认删除[' + item.name + ']?'
@@ -99,21 +97,53 @@ const collapseDelete = (item) => {
 
 // 删除回调
 const modalConfirm = () => {
+  const data = {
+    relationid: delData.value.id
+  }
+  del(data).then(res => {
+    const { flag } = res
+    if (flag) {
+      ElMessage.success('删除成功')
+      getCollapse()
       modalData.show = false
+    } else {
+      ElMessage.error('删除失败')
+    }
+  })
+
 }
 
 // 点击监听
 const collapseChange = (item) => {
-  formEdit.value = item
+  console.log('修改事件', item)
+  formData.value = {
+    ...item.item
+  }
 }
 
 // 算法确认
 const formModuleConfirm = (item) => {
   console.log('新增算法', item)
+  getCollapse()
   modalPopShow.value = false
 }
 
+// 查询加密规则
+const getQueryenc = () => {
+  queryenc({}).then((res) => {
+    const { data } = res;
+    encryptionList.value = data.map((item) => {
+      return {
+        value: item.id,
+        label: item.encryption_name,
+      };
+    });
+  });
+};
+
+
 onMounted(() => {
+  getQueryenc()
   getCollapse()
 })
 
@@ -129,14 +159,15 @@ onMounted(() => {
       <Split v-model="splitNum">
         <template #left>
           <div class="demo-split-pane" style="padding: 0 38px 10px 0;width: 100%;overflow: auto;height: 100%;">
-            <el-input class="mb20" placeholder="加密算法搜索">
+            <el-input class="mb20" v-model="queryParams.dataarea" 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>
-            <CollapseView :list="collapseList" @add="collapseAdd" @childDelete="collapseDelete" @change="collapseChange" />
+            <CollapseView :list="collapseList" @add="collapseAdd" @childDelete="collapseDelete"
+              @change="collapseChange" />
           </div>
         </template>
         <template #right>
@@ -149,7 +180,8 @@ onMounted(() => {
                 <span style="margin-left: 5px;">加密算法</span>
               </div>
               <div class="right-content">
-                <formModule v-model="formEdit" type="edit" />
+                <formModule :itemData="formData" :encryptionDict="encryptionList" type="edit" @cancel="modalPopCancel"
+                  @confirm="formModuleConfirm" />
               </div>
             </div>
           </div>
@@ -163,7 +195,8 @@ onMounted(() => {
     <!-- 新增加密算法 -->
     <ModalPop v-model="modalPopShow" title="编辑器" @cancel="modalPopCancel">
       <template #content>
-        <formModule v-model="formAdd" type="add" @cancel="modalPopCancel" @confirm="formModuleConfirm" />
+        <formModule :itemData="formData" :encryptionDict="encryptionList" type="add" @cancel="modalPopCancel"
+          @confirm="formModuleConfirm" />
       </template>
     </ModalPop>
   </div>

src/views/ruleConfig/CalculationMethod/modules/formModule.vue

 <script setup lang="ts" name="Form">
 import { onMounted, reactive, ref, toRefs, watch } from "vue";
 import { Switch } from "view-ui-plus";
+import type { FormInstance } from "element-plus";
+import { ElMessage } from "element-plus";
+import { querysec, save } from "@/api/ruleConfig/calculationMethod";
 
 const props = defineProps<{
-  modelValue: boolean;
+  itemData: boolean;
   type: string;
+  encryptionDict: Array<any>;
 }>();
 
-const emit = defineEmits(["update:modelValue", 'cancel','confirm']);
+const emit = defineEmits(["cancel", "confirm"]);
 
 const data = reactive({
-  rules: {},
+  form: <any>{
+    dataarea_id: "",
+    defaulttype: "0",
+    enc_name: "",
+    encryption_id: "",
+    secretkey_id: "",
+  },
+  rules: {
+    enc_name: [
+      {
+        required: true,
+        message: "请输入数据域名称",
+        trigger: ["blur"],
+      },
+    ],
+    encryption_id: [
+      {
+        required: true,
+        message: "请选择加密规则",
+        trigger: ["change"],
+      },
+    ],
+    secretkey_id: [
+      {
+        required: true,
+        message: "请选择密钥",
+        trigger: ["change"],
+      },
+    ],
+  },
 });
 
-const { rules } = toRefs(data);
-
+const { form, rules } = toRefs(data);
+const encryptionList = ref<any[]>([]); // 加密规则选项列表
+const secretkeyList = ref<any[]>([]); // 密钥选项列表
 const readOnly = ref(true);
+const formRef = ref<FormInstance>();
 
-watch(
-  () => props.type,
-  (newVal) => {
-    readOnly.value = props.type  === 'edit' ? true : false;
-  },
-  { deep: true, immediate: true }
-);
+// 重置
+const reset = () => { 
+  form.value = {
+    dataarea_id: "",
+    defaulttype: "0",
+    enc_name: "",
+    encryption_id: "",
+    secretkey_id: "",
+  };
+}
 
 // 取消
 const cancel = () => {
-  if (props.type === 'edit') { 
-    readOnly.value = true
-  }else if (props.type === 'add') { 
-    emit('cancel')
+  if (props.type === "edit") {
+    readOnly.value = true;
+    const data = JSON.parse(JSON.stringify(props.itemData));
+    form.value = { ...form.value, ...data };
+    getQuerysec()
+  } else if (props.type === "add") {
+    emit("cancel");
   }
-}
+};
 
 const confirm = () => {
-  if (props.type === 'edit') { 
-    readOnly.value = true
+  formRef.value?.validate((valid) => {
+    if (valid) {
+      saveFunc();
+    } else {
+    }
+  });
+};
+
+const saveFunc = () => {
+  console.log(form.value)
+  if (props.type === "edit") {
+    form.value = { ...form.value, ...{ id: form.value.id } }
   }
-  emit('confirm')
+  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") {
+        reset()
+      }
+      emit("confirm");
+    }
+  });
 }
 
+// 查询密钥
+const getQuerysec = () => {
+  querysec({ encryption_id: form.value.encryption_id }).then((res) => {
+    const { data } = res;
+    secretkeyList.value = data.map((item) => {
+      return {
+        value: item.id,
+        label: item.secret_key_name,
+      };
+    });
+  });
+};
 
+// 加密规则变化
+const encryptionChange = () => {
+  form.value.secretkey_id = ''
+  getQuerysec()
+}
+
+watch(
+  () => props.type,
+  (newVal) => {
+    readOnly.value = props.type === "edit" ? true : false;
+  },
+  { deep: true, immediate: true }
+);
+
+watch(
+  () => props.itemData,
+  (newVal) => {
+    if (props.itemData) {
+      if (!props.itemData.enc_name) {
+        reset()
+      }
+      const data = JSON.parse(JSON.stringify(props.itemData));
+      form.value = { ...form.value, ...data };
+      if (props.type === "edit" && form.value.secretkey_id) {
+        getQuerysec()
+      }
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+watch(
+  () => props.encryptionDict,
+  (newVal) => {
+    encryptionList.value = props.encryptionDict;
+  },
+  { 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" placeholder="请输入算法名称"></el-input>
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" :disabled="readOnly">
+      <el-form-item label="算法名称" prop="enc_name" required>
+        <el-input v-model="form.enc_name" placeholder="请输入算法名称"></el-input>
       </el-form-item>
-      <el-form-item label="加密规则" required>
+      <el-form-item label="加密规则" prop="encryption_id" required>
         <div style="width: 100%;background: #F3F5FA;">
-          <el-select v-model="modelValue.name">
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
+          <el-select v-model="form.encryption_id" @change="encryptionChange">
+            <el-option v-for="item in encryptionList" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
           </el-select>
         </div>
       </el-form-item>
-      <el-form-item label="密钥" required>
+      <el-form-item label="密钥" prop="secretkey_id" required>
         <div style="width: 100%;background: #F3F5FA;">
-          <el-select v-model="modelValue.name">
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
+          <el-select v-model="form.secretkey_id">
+            <el-option v-for="item in secretkeyList" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
           </el-select>
         </div>
       </el-form-item>
       <el-form-item label="默认规则">
-        <Switch :disabled="readOnly">
+        <Switch true-value="1" false-value="0" v-model="form.defaulttype" :disabled="readOnly">
           <template #open>
             <span>是</span>
           </template>

src/views/ruleConfig/Discover/index.vue

@@ -65,7 +65,7 @@ const getCollapse = () => {
         isDelete: true,
       }
     })
-    if (collapseList.value.length < 0) return
+    if (collapseList.value.length <= 0) return
     domainForm.value = collapseList.value[0]
     rightType.value = 'domain'
   })

src/views/ruleConfig/Discover/modules/AddRules.vue

@@ -18,7 +18,7 @@ const props = defineProps<{
 
 const emit = defineEmits(["cancel", "confirm"]);
 
-const subRuleidList = ref([])
+const subRuleidList = ref([]);
 const data = reactive({
   form: <any>{
     dataarea_id: "",
@@ -36,7 +36,7 @@ const data = reactive({
     matchingway: "",
     defaulttype: "0",
     remark: "",
-    testString: ""
+    testString: "",
   },
   rules: {
     name: [
@@ -89,22 +89,34 @@ const modalData = reactive({
   type: "",
 });
 
-watch(
-  () => [props.type, props.itemData],
-  (newVal) => {
-    readOnly.value = props.type === "edit" ? true : false;
-    if (props.itemData) {
-      const data = JSON.parse(JSON.stringify(props.itemData));
-      form.value = { ...form.value, ...data };
-    }
-  },
-  { deep: true, immediate: true }
-);
+// 重置
+const reset = () => {
+  form.value = {
+    dataarea_id: "",
+    id: "",
+    name: "",
+    type: "",
+    flag: "",
+    discoverway: "01",
+    regex: "",
+    icon: "",
+    ruleexample: "",
+    ruleargument: "",
+    rulegroupname: "",
+    dictionaryClass: "",
+    matchingway: "",
+    defaulttype: "0",
+    remark: "",
+    testString: "",
+  };
+};
 
 // 取消
 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");
   }
@@ -138,24 +150,7 @@ const addDataFun = () => {
       if (props.type === "edit") {
         readOnly.value = true;
       } else if (props.type === "add") {
-        form.value = {
-          dataarea_id: "",
-          id: "",
-          name: "",
-          type: "",
-          flag: "",
-          discoverway: "01",
-          regex: "",
-          icon: "",
-          ruleexample: "",
-          ruleargument: "",
-          rulegroupname: "",
-          dictionaryClass: "",
-          matchingway: "",
-          defaulttype: "0",
-          remark: "",
-          testString: ""
-        };
+        reset();
       }
       emit("confirm");
     }
@@ -172,7 +167,8 @@ const getDictionaryTypesFunc = () => {
 
 // 规则测试
 const testRegexFun = () => {
-  const { dictionaryClass, discoverway, matchingway, regex, testString } = form.value;
+  const { dictionaryClass, discoverway, matchingway, regex, testString } =
+    form.value;
   const data = {
     dictionaryClass: dictionaryClass,
     discoverway: discoverway,
@@ -194,7 +190,7 @@ const testRegexFun = () => {
           modalData.text = msg;
           modalData.show = true;
         }
-      })
+      });
     } else {
     }
   });
@@ -212,6 +208,25 @@ const modalCancel = () => {
   modalData.show = false;
 };
 
+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 }
+);
+
 onMounted(() => {
   getDictionaryTypesFunc();
 });