发现规则模块

src/api/ruleConfig/discover.js

+import request from '@/utils/request'
+
+/**
+ * 发现规则 - 查询数据域
+ * @param {*} data 
+ * @returns 
+ */
+export function query(data) {
+  return request({
+    url: '/core/searchregex/query',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 发现规则 - 数据域名称是否存在
+ * @param {*} query 
+ * @returns 
+ */
+export function checkNameExitDataArea(query) {
+  return request({
+    url: '/core/searchregex/checkNameExitDataArea',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 发现规则 - 增加数据域
+ * @param {*} data 
+ * @returns 
+ */
+export function addDataArea(data) {
+  return request({
+    url: '/core/searchregex/addDataArea',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 发现规则 - 删除数据域
+ * @param {*} data 
+ * @returns 
+ */
+export function delDataArea(data) {
+  return request({
+    url: '/core/searchregex/delDataArea',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 发现规则 - 获取字典分类
+ * @param {*} query 
+ * @returns 
+ */
+export function getDictinaryTypes(query) {
+  return request({
+    url: '/core/dictionary/getDictinaryTypes',
+    method: 'get',
+    params: query
+  })
+}
\ No newline at end of file

src/components/collapseView/index.vue

@@ -44,7 +44,7 @@ const childDelete = (item) => {
 <template>
   <Collapse simple>
     <Panel :name="item.name" v-for="(item, index) in listData" :key="index">
-      {{ item.name }}
+      {{ item.dataarea }}
       <span class="collapse-item__btns--box">
         <el-icon color="rgb(253, 84, 81)" :size="16"  v-if="item.isAdd" @click.stop="addClick(item)">
           <circle-plus-filled />

src/views/ruleConfig/Discover/index.vue

 <script setup name="Discover">
 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 AddDomain from './modules/AddDomain.vue' // 数据域表单
 import AddRules from './modules/AddRules.vue' // 发现规则表单
 import ModalPop from "@/components/EditPop/ModalPop.vue"
 
+import { query, getDictinaryTypes, delDataArea } from '@/api/ruleConfig/discover'
+
 const splitNum = ref(0.31) // 左右分割比例
-const collapseList = ref([])
+const collapseList = ref([]) // 数据域数据
+const dictinaryTypeList = ref([]) // 字典分类数据
 
 const data = reactive({
-  editDomainForm: {
-    name: "",
+  domainForm: {
+    
   },
-  addDomainForm: {
-    name: "",
+  rulesForm: {
+    
   },
-  editRulesForm: {
-    name: "",
+  queryParams: {
+    areaType: "0",
+    rulename: ""
   },
-  addRulesForm: {
-    name: "",
+  delData: {
+    id: '',
+    dataarea: ''
   }
 });
 
-const { editDomainForm, addDomainForm, editRulesForm, addRulesForm } = toRefs(data);
+const { domainForm, rulesForm, queryParams, delData } = toRefs(data);
 const rightType = ref('domain') // 右侧展示类型
 const modalData = reactive({
   show: false,
@@ -43,33 +48,10 @@ const modalPopData = reactive({
 
 // 获取数据
 const getCollapse = () => {
-  const data = [
-    {
-      name: '测试数据域',
-      list: [
-        {
-          name: '按混合证件号字段查询'
-        }
-      ]
-    },
-    {
-      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.data.map(itemTwo => {
         return {
           ...itemTwo,
           isCheck: true,
@@ -77,13 +59,16 @@ const getCollapse = () => {
         }
       })
       return {
-      ...item,
+        ...item.dataarea,
         list: list,
         isAdd: true,
         isView: true,
         isDelete: true,
       }
     })
+    if(collapseList.value.length < 0) return
+    domainForm.value = collapseList.value[0]
+  })
 }
 
 // 新增关闭
@@ -92,20 +77,18 @@ const modalPopCancel = () => {
 }
 
 // 新增数据域
-const addDomainClick = (item) => {
+const addDomainClick = () => {
   console.log('新增数据域')
   modalPopData.title = '新增数据域'
   modalPopData.type = 'domain'
-  addDomainForm.value = {}
   modalPopData.show = true
 }
 
 // 新增发现规则
-const collapseAdd = (item) => {
-  console.log('新增发现规则', item)
+const collapseAdd = () => {
+  console.log('新增发现规则')
   modalPopData.title = '新增发现规则'
   modalPopData.type = 'rules'
-  addRulesForm.value = {}
   modalPopData.show = true
 }
 
@@ -122,10 +105,11 @@ const collapseDelete = (item) => {
 // 删除数据域
 const collapseMainDeletion = (item) => {
   console.log('删除数据域事件', item)
+  delData.value = item
   modalData.type = 'domain'
   modalData.cancel = false
   modalData.icon = 'error'
-  modalData.text = '删除后无法恢复，是否确认删除[' + item.name + ']?'
+  modalData.text = '删除后无法恢复，是否确认删除[' + item.dataarea + ']?'
   modalData.show = true
 }
 
@@ -133,6 +117,19 @@ const collapseMainDeletion = (item) => {
 const modalConfirm = () => {
   if (modalData.type === 'domain') {
     console.log('删除数据域确认')
+    const data = {
+      areaid: delData.value.id,
+      areaname: delData.value.dataarea
+    }
+    delDataArea(data).then(res => {
+      const { flag } = res
+      if (flag) {
+        ElMessage.success('删除成功')
+        getCollapse()
+      } else {
+        ElMessage.error('删除失败')
+      }
+    })
   } else if (modalData.type === 'rules') {
     console.log('删除发现规则确认')
   } else if (modalData.type === 'default') {
@@ -142,14 +139,14 @@ const modalConfirm = () => {
 }
 
 // 数据域查看
-const collapseView = (item) => {
-  editDomainForm.value = item
+const viewClick = (item) => {
+  domainForm.value = item
   rightType.value = 'domain'
 }
 
 // 规则点击监听
 const collapseChange = (item) => {
-  editRulesForm.value = item
+  rulesForm.value = item
   rightType.value = 'rules'
 }
 
@@ -163,17 +160,26 @@ const collapseDefault = (item) => {
 }
 
 // 新增确认
-const AddDomainConfirm = (item) => {
+const AddFormConfirm = (item) => {
   if (modalPopData.type === 'domain') {
     console.log('新增数据域确认', item)
+    getCollapse()
   } else if (modalPopData.type === 'rules') {
     console.log('新增发现规则确认', item)
   }
   modalPopData.show = false
 }
 
+const getDictionaryTypesFunc = () => { 
+  getDictinaryTypes({}).then(res => {
+    const { data } = res
+    dictinaryTypeList.value = data
+  })
+}
+
 onMounted(() => {
   getCollapse()
+  getDictionaryTypesFunc()
 })
 
 </script>
@@ -187,19 +193,21 @@ onMounted(() => {
     <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="数据域名称搜索">
+          <div class="demo-split-pane" style="padding: 0 0 10px 0;width: 100%;overflow: auto;height: 100%;display: flex;flex-direction: column;">
+            <div class="mb20" style="padding-right: 38px;display: flex;align-items: center;justify-content: space-between;">
+              <el-input class="mr20" v-model="queryParams.rulename" 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>
               <el-button type="primary" icon="Plus" @click="addDomainClick">新增数据域</el-button>
             </div>
-            <CollapseView :list="collapseList" @add="collapseAdd" @mainDeletion="collapseMainDeletion" @childDelete="collapseDelete"
-              @change="collapseChange" @view="collapseView" @default="collapseDefault" />
+            <el-scrollbar style="width: 100%;flex: 1;padding-right: 38px;">
+              <CollapseView :list="collapseList" @add="collapseAdd" @mainDeletion="collapseMainDeletion"
+                @childDelete="collapseDelete" @change="collapseChange" @view="viewClick" @default="collapseDefault" />
+            </el-scrollbar>
           </div>
         </template>
         <template #right>
@@ -212,8 +220,8 @@ onMounted(() => {
                 <span style="margin-left: 5px;">{{ rightType === 'domain' ? '数据域' : '发现规则' }}</span>
               </div>
               <div class="right-content">
-                <AddDomain v-model="editDomainForm" type="edit" v-if="rightType === 'domain'" />
-                <AddRules v-model="editRulesForm" type="edit" v-if="rightType === 'rules'" />
+                <AddDomain :itemData="domainForm" type="edit" @confirm="AddFormConfirm" v-if="rightType === 'domain'" />
+                <AddRules :itemData="rulesForm" type="edit" @confirm="AddFormConfirm" v-if="rightType === 'rules'" />
               </div>
             </div>
           </div>
@@ -227,9 +235,9 @@ onMounted(() => {
     <!-- 新增数据域 / 发现规则 -->
     <ModalPop :width="'740'" v-model="modalPopData.show" :title="modalPopData.title" @cancel="modalPopCancel">
       <template #content>
-        <AddDomain v-model="addDomainForm" type="add" @cancel="modalPopCancel" @confirm="AddDomainConfirm"
+        <AddDomain type="add" @cancel="modalPopCancel" @confirm="AddFormConfirm"
           v-if="modalPopData.type === 'domain'" />
-        <AddRules v-model="addRulesForm" type="add" @cancel="modalPopCancel" @confirm="AddDomainConfirm"
+        <AddRules type="add" @cancel="modalPopCancel" @confirm="AddFormConfirm"
           v-if="modalPopData.type === 'rules'" />
       </template>
     </ModalPop>

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

 <script setup lang="ts" name="AddDomain">
 import { onMounted, reactive, ref, toRefs, watch } from "vue";
+import type { FormInstance } from "element-plus";
+import { ElMessage } from 'element-plus'
+import { checkNameExitDataArea, addDataArea } from '@/api/ruleConfig/discover'
 
 const props = defineProps<{
-  modelValue: boolean;
+  itemData?: Object;
   type: string;
 }>();
 
-const emit = defineEmits(["update:modelValue", 'cancel','confirm']);
+const emit = defineEmits(['cancel','confirm']);
 
 const data = reactive({
-  rules: {},
+  form: <any>{
+    
+  },
+  rules: {
+    dataarea: [
+      {
+        required: true,
+        message: "请输入数据域名称",
+        trigger: ["blur"],
+      },
+    ],
+  },
 });
 
-const { rules } = toRefs(data);
+const { form, rules } = toRefs(data);
 
 const readOnly = ref(true);
+const formRef = ref<FormInstance>();
 
 watch(
-  () => props.type,
+  () => [props.type, props.itemData],
   (newVal) => {
     readOnly.value = props.type === 'edit' ? true : false;
+    if (props.type === 'edit' && props.itemData) {
+      form.value = JSON.parse(JSON.stringify(props.itemData))
+    }
   },
   { deep: true, immediate: true }
 );
@@ -27,17 +45,63 @@ watch(
 // 取消
 const cancel = () => { 
   if (props.type === 'edit') { 
+    form.value = props.itemData
     readOnly.value = true
-  }else if (props.type === 'add') { 
+  } else if (props.type === 'add') { 
     emit('cancel')
+    form.value = {}
   }
 }
 
 const confirm = () => {
+  formRef.value?.validate((valid) => {
+    if (valid) {
+      getCheckNameExitDataArea()
+    } else {
+    }
+  });
+}
+
+//  检验数据域名称
+const getCheckNameExitDataArea = () => {
+  let data = {
+    areaname: form.value.dataarea
+  }
+  if (props.type === 'edit') { 
+    data = {...data,...{id: form.value.id}}
+  }
+  checkNameExitDataArea(data).then(res => {
+    console.log(res);
+    const { flag, data } = res
+    if (flag) {
+      addDataAreaFun()
+    }
+  })
+}
+
+// 添加数据域
+const addDataAreaFun = () => { 
+  let tCoreDataArea = {
+    dataarea: form.value.dataarea,
+    remark: form.value.remark
+  }
+  if (props.type === 'edit') { 
+    tCoreDataArea = {...tCoreDataArea,...{id: form.value.id}}
+  }
+  addDataArea({tCoreDataArea: tCoreDataArea}).then(res => {
+    const { flag } = res
+    if (flag) {
+      ElMessage.success({
+        message: props.type ===  'add' ? '新增成功' : '修改成功',
+        type: 'success',
+      })
       if (props.type === 'edit') { 
         readOnly.value = true
       }
       emit('confirm')
+      form.value = {}
+    }
+  })
 }
 
 
@@ -45,12 +109,12 @@ const confirm = () => {
 
 <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="!readOnly ? '请输入数据域名称' : ''"></el-input>
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" :disabled="readOnly">
+      <el-form-item label="数据域名称" prop="dataarea" required>
+        <el-input v-model="form.dataarea" :placeholder="!readOnly ? '请输入数据域名称' : ''"></el-input>
       </el-form-item>
       <el-form-item label="备注">
-        <el-input type="textarea" rows="4" v-model="modelValue.name" :placeholder="!readOnly ? '请输入备注' : ''"></el-input>
+        <el-input type="textarea" rows="4" v-model="form.remark" :placeholder="!readOnly ? '请输入备注' : ''"></el-input>
       </el-form-item>
     </el-form>
     <div class="btn">