加密规则

src/views/ruleConfig/Discover/index.vue

@@ -209,7 +209,7 @@ onMounted(() => {
                 <el-icon>
                   <info-filled />
                 </el-icon>
-                <span style="margin-left: 5px;">发现规则</span>
+                <span style="margin-left: 5px;">{{ rightType === 'domain' ? '数据域' : '发现规则' }}</span>
               </div>
               <div class="right-content">
                 <AddDomain v-model="editDomainForm" type="edit" v-if="rightType === 'domain'" />

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

@@ -7,7 +7,7 @@ const props = defineProps<{
   type: string;
 }>();
 
-const emit = defineEmits(["update:modelValue", 'cancel','confirm']);
+const emit = defineEmits(["update:modelValue", "cancel", "confirm"]);
 
 const data = reactive({
   rules: {},
@@ -19,43 +19,41 @@ const readOnly = ref(true);
 const radio = ref(1);
 const radioOptions = ref([
   {
-    label: '正则表达式',
+    label: "正则表达式",
     value: 1,
   },
   {
-    label: '自定义方法',
+    label: "自定义方法",
     value: 2,
   },
   {
-    label: '字典发现',
+    label: "字典发现",
     value: 3,
-  }
+  },
 ]);
 
 watch(
   () => props.type,
   (newVal) => {
-    readOnly.value = props.type  === 'edit' ? true : false;
+    readOnly.value = props.type === "edit" ? true : false;
   },
   { deep: true, immediate: true }
 );
 // 取消
 const cancel = () => {
-  if (props.type === 'edit') { 
-    readOnly.value = true
-  }else if (props.type === 'add') { 
-    emit('cancel')
+  if (props.type === "edit") {
+    readOnly.value = true;
+  } else if (props.type === "add") {
+    emit("cancel");
   }
-}
+};
 
 const confirm = () => {
-  if (props.type === 'edit') { 
-    readOnly.value = true
+  if (props.type === "edit") {
+    readOnly.value = true;
   }
-  emit('confirm')
-}
-
-
+  emit("confirm");
+};
 </script>
 
 <template>
@@ -71,12 +69,7 @@ const confirm = () => {
         <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-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
           </el-select>
         </div>
@@ -96,12 +89,7 @@ const confirm = () => {
         <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-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
           </el-select>
         </div>
@@ -110,12 +98,7 @@ const confirm = () => {
         <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-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
             </el-option>
           </el-select>
         </div>
@@ -124,7 +107,10 @@ const confirm = () => {
         <el-input v-model="modelValue.name"></el-input>
       </el-form-item>
       <el-form-item label="测试">
-        <el-input v-model="modelValue.name"></el-input>
+        <div style="width: 100%;display: flex;align-items: center;">
+          <el-input v-model="modelValue.name" style="flex: 1;"></el-input>
+          <el-button type="primary">测试</el-button>
+        </div>
       </el-form-item>
       <el-form-item label="备注">
         <el-input v-model="modelValue.name"></el-input>

src/views/ruleConfig/Encryption/index.vue

+<script setup name="Discover">
+import { onMounted, ref, toRefs } from 'vue'
+import { Split } from 'view-ui-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"
+
+const splitNum = ref(0.31) // 左右分割比例
+const collapseList = ref([])
+
+const data = reactive({
+  editEncryptionForm: {
+    name: "",
+  },
+  addEncryptionForm: {
+    name: "",
+  },
+  editKeyForm: {
+    name: "",
+  },
+  addKeyForm: {
+    name: "",
+  }
+});
+
+const { editEncryptionForm, addEncryptionForm, editKeyForm, addKeyForm } = toRefs(data);
+const rightType = ref('encryption') // 右侧展示类型
+const modalData = reactive({
+  show: false,
+  text: '',
+  icon: 'error',
+  cancel: true,
+  type: ''
+})
+
+const modalPopData = reactive({
+  show: false,
+  title: '',
+  type: 'encryption'
+})
+
+// 获取数据
+const getCollapse = () => {
+  const data = [
+    {
+      name: '测试加密',
+      list: [
+        {
+          name: '按混合证件号字段查询'
+        }
+      ]
+    },
+    {
+      name: '通用规则',
+      list: [
+        {
+          name: 'aaaaa'
+        },
+        {
+          name: 'bbbbb'
+        }
+      ]
+    },
+    {
+      name: '解密数据',
+      list: []
+    }
+  ]
+  collapseList.value = data.map(item => {
+    const list = item.list.map(itemTwo => {
+      return {
+        ...itemTwo,
+        isCheck: false,
+        isDelete: true,
+      }
+    })
+    return {
+      ...item,
+      list: list,
+      isAdd: true,
+      isView: true,
+      isDelete: true,
+    }
+  })
+}
+
+// 新增关闭
+const modalPopCancel = () => {
+  modalPopData.show = false
+}
+
+// 新增加密
+const addDomainClick = (item) => {
+  console.log('新增加密')
+  modalPopData.title = '新增加密'
+  modalPopData.type = 'encryption'
+  addEncryptionForm.value = {}
+  modalPopData.show = true
+}
+
+// 新增密钥
+const collapseAdd = (item) => {
+  console.log('新增密钥', item)
+  modalPopData.title = '新增密钥'
+  modalPopData.type = 'key'
+  addKeyForm.value = {}
+  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)
+  modalData.type = 'encryption'
+  modalData.cancel = false
+  modalData.icon = 'error'
+  modalData.text = '删除后无法恢复，是否确认删除[' + item.name + ']?'
+  modalData.show = true
+}
+
+// 提示回调
+const modalConfirm = () => {
+  if (modalData.type === 'encryption') {
+    console.log('删除加密确认')
+  } else if (modalData.type === 'key') {
+    console.log('删除密钥确认')
+  } else if (modalData.type === 'default') {
+    console.log('设置默认项')
+  }
+  modalData.show = false
+}
+
+// 加密查看
+const collapseView = (item) => {
+  editEncryptionForm.value = item
+  rightType.value = 'encryption'
+}
+
+// 规则点击监听
+const collapseChange = (item) => {
+  editKeyForm.value = item
+  rightType.value = 'key'
+}
+
+// 新增确认
+const AddDomainConfirm = (item) => {
+  if (modalPopData.type === 'encryption') {
+    console.log('新增加密确认', item)
+  } else if (modalPopData.type === 'key') {
+    console.log('新增密钥确认', item)
+  }
+  modalPopData.show = false
+}
+
+onMounted(() => {
+  getCollapse()
+})
+
+</script>
+<template>
+  <div class="app-container scroller">
+    <PageTitle>
+      <template #title>
+        加密规则
+      </template>
+    </PageTitle>
+    <div class="app-container__body">
+      <Split v-model="splitNum">
+        <template #left>
+          <div class="demo-split-pane" style="padding: 0 38px 10px 0;width: 100%;overflow: auto;height: 100%;">
+            <div class="mb20" style="display: flex;align-items: center;justify-content: space-between;">
+              <el-input class="mr20" placeholder="加密方式搜索">
+                <template #suffix>
+                  <el-icon style="vertical-align: middle;">
+                    <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" />
+          </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 class="right-content">
+                <AddEncryption v-model="editEncryptionForm" type="edit" v-if="rightType === 'encryption'" />
+                <AddKey v-model="editKeyForm" type="edit" v-if="rightType === 'key'" />
+              </div>
+            </div>
+          </div>
+        </template>
+      </Split>
+    </div>
+    <!-- 提示框 -->
+    <Modal v-model="modalData.show" :icon="modalData.icon" :cancel="modalData.cancel" :text="modalData.text"
+      @confirm="modalConfirm"></Modal>
+
+    <!-- 新增加密 / 密钥 -->
+    <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'" />
+      </template>
+    </ModalPop>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.app-container__body {
+  height: calc(
+    100vh - var(--navbar-height) - var(--container-pd) - var(--container-pd)
+  ) !important;
+  .right {
+    padding: 6px 10px 10px;
+    height: 100%;
+    &-title {
+      padding: 0px 0px 10px 10px;
+      display: flex;
+      align-items: center;
+      font-weight: 700;
+      color: #515a6e;
+    }
+    &-content {
+      padding: 10px 0px;
+      width: 80%;
+      margin: 20px auto;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/ruleConfig/Encryption/modules/AddEncryption.vue

+<script setup lang="ts" name="AddDomain">
+import { onMounted, reactive, ref, toRefs, watch } from "vue";
+
+const props = defineProps<{
+  modelValue: boolean;
+  type: string;
+}>();
+
+const emit = defineEmits(["update:modelValue", 'cancel','confirm']);
+
+const data = reactive({
+  rules: {},
+});
+
+const { rules } = toRefs(data);
+
+const readOnly = ref(true);
+
+watch(
+  () => props.type,
+  (newVal) => {
+    readOnly.value = props.type  === 'edit' ? true : false;
+  },
+  { deep: true, immediate: true }
+);
+
+// 取消
+const cancel = () => { 
+  if (props.type === 'edit') { 
+    readOnly.value = true
+  }else if (props.type === 'add') { 
+    emit('cancel')
+  }
+}
+
+const confirm = () => {
+  if (props.type === 'edit') { 
+    readOnly.value = true
+  }
+  emit('confirm')
+}
+
+
+</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-item>
+      <el-form-item label="加密方式" 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-option>
+          </el-select>
+        </div>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input type="textarea" rows="4" v-model="modelValue.name"></el-input>
+      </el-form-item>
+    </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>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.btn {
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+}
+</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";
+
+const props = defineProps<{
+  modelValue: boolean;
+  type: string;
+}>();
+
+const emit = defineEmits(["update:modelValue", "cancel", "confirm"]);
+
+const data = reactive({
+  rules: {},
+});
+
+const { rules } = toRefs(data);
+
+const readOnly = ref(true);
+const radio = ref(1);
+const radioOptions = ref([
+  {
+    label: "正则表达式",
+    value: 1,
+  },
+  {
+    label: "自定义方法",
+    value: 2,
+  },
+  {
+    label: "字典发现",
+    value: 3,
+  },
+]);
+
+watch(
+  () => props.type,
+  (newVal) => {
+    readOnly.value = props.type === "edit" ? true : false;
+  },
+  { deep: true, immediate: true }
+);
+// 取消
+const cancel = () => {
+  if (props.type === "edit") {
+    readOnly.value = true;
+  } else if (props.type === "add") {
+    emit("cancel");
+  }
+};
+
+const confirm = () => {
+  if (props.type === "edit") {
+    readOnly.value = true;
+  }
+  emit("confirm");
+};
+</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-item>
+      <el-form-item label="加密算法">
+        <el-input v-model="modelValue.name" disabled></el-input>
+      </el-form-item>
+      <el-form-item label="密钥值" 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>
+        </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>
+        </div>
+      </el-form-item>
+      <el-form-item label="加密后的值">
+        <el-input v-model="modelValue.name" disabled></el-input>
+      </el-form-item>
+    </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>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-form-item {
+  margin-bottom: 8px;
+}
+.btn {
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+}
+</style>
\ No newline at end of file

src/views/ruleConfig/Encryption/加密规则.md

+++ "b/src/views/ruleConfig/Encryption/\345\212\240\345\257\206\350\247\204\345\210\231.md"