发现规则

src/components/collapseView/index.vue

@@ -31,7 +31,7 @@ const addClick = (item) => {
 const viewClick = (item, index) => {
   const { isView, list } = item
   if (isView) {
-    emit("view", item);
+    emit("view", {item: item, index: index});
   } else {
     if(list.length <= 0) return
     emit("view", index);
@@ -79,7 +79,7 @@ const childDelete = (item) => {
             </el-icon>
           </div>
           <div class="name">{{ item.dataarea }}</div>
-          <el-icon color="rgba(212, 48, 48, 1)" :size="16" v-if="item.isDelete" @click.stop="mainDeletion(item)"
+          <el-icon color="rgba(212, 48, 48, 1)" :size="16" v-if="item.isDelete && fatherIndex === index" @click.stop="mainDeletion(item)"
             style="margin-right: 17px;">
             <circle-close-filled />
           </el-icon>

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' // 数据域表单
@@ -9,7 +8,8 @@ import ModalPop from "@/components/EditPop/ModalPop.vue"
 
 import { query, delDataArea, delRule, setdefault } from '@/api/ruleConfig/discover'
 
-const splitNum = ref(0.31) // 左右分割比例
+const fatherIndex = ref(0) // 父级索引
+const currentId = ref('') // 当前选择项id
 const collapseList = ref([]) // 数据域数据
 
 const data = reactive({
@@ -53,6 +53,7 @@ const getCollapse = () => {
       const list = item.data.map(itemTwo => {
         return {
           ...itemTwo,
+          id: itemTwo.ruleid,
           isCheck: true,
           isDelete: true,
         }
@@ -65,8 +66,15 @@ const getCollapse = () => {
         isDelete: true,
       }
     })
-    if (collapseList.value.length <= 0) return
+    if (collapseList.value.length <= 0) {
+      fatherIndex.value = null
+      domainForm.value = {}
+      rightType.value = 'domain'
+      return
+    }
+    fatherIndex.value = 0
     domainForm.value = collapseList.value[0]
+    currentId.value = domainForm.value.id
     rightType.value = 'domain'
   })
 }
@@ -173,8 +181,11 @@ const modalConfirm = () => {
 }
 
 // 数据域查看
-const viewClick = (item) => {
+const viewClick = (val) => {
+  const { index, item } = val
+  fatherIndex.value = index
   domainForm.value = item
+  currentId.value = domainForm.value.id
   rightType.value = 'domain'
 }
 
@@ -188,6 +199,7 @@ const collapseChange = (item) => {
       type: dataarea
     }
   }
+  currentId.value = rulesForm.value.ruleid
   rightType.value = 'rules'
 }
 
@@ -219,86 +231,184 @@ onMounted(() => {
 </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 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;cursor: pointer;" @click="getCollapse">
-                    <search />
-                  </el-icon>
-                </template>
-              </el-input>
-              <el-button type="primary" icon="Plus" @click="addDomainClick">新增数据域</el-button>
-            </div>
-            <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>
-          <div class="demo-split-pane">
-            <div class="right">
-              <div class="right-title">
+      <div class="pageTitle">
+        <img class="icon" src="@/assets/images/ruleConfig/discoverPage.png" alt="">
+        <span>发现规则</span>
+      </div>
+      <div class="box">
+        <div class="left">
+          <div class="searchBox">
+            <el-input v-model="queryParams.rulename" placeholder="数据域名称搜索" style="width: 369px;margin-bottom: 15px;">
+              <template #prefix>
                 <el-icon>
-                  <info-filled />
+                  <search />
                 </el-icon>
-                <span style="margin-left: 5px;">{{ rightType === 'domain' ? '数据域' : '发现规则' }}</span>
-              </div>
-              <div class="right-content">
-                <AddDomain :itemData="domainForm" type="edit" @confirm="AddFormConfirm" v-if="rightType === 'domain'" />
-                <AddRules :itemData="rulesForm" type="edit" @confirm="AddFormConfirm" v-if="rightType === 'rules'" />
-              </div>
+              </template>
+              <template #append>
+                <el-button icon="search" class="searchBut" @click="getCollapse">搜索</el-button>
+              </template>
+            </el-input>
+            <el-button type="primary" icon="Plus" class="addBut" @click="addDomainClick">新增数据域</el-button>
+          </div>
+          <div class="collapseView">
+            <CollapseView :list="collapseList" :fatherIndex="fatherIndex" :currentId="currentId" @add="collapseAdd" @mainDeletion="collapseMainDeletion"
+                @childDelete="collapseDelete" @change="collapseChange" @view="viewClick" @default="collapseDefault" />
+          </div>
+        </div>
+        <div class="right">
+          <div class="line"></div>
+          <div style="padding: 26px 28px 0 28px;position: relative;flex: 1;">
+            <DividerTitle :title-name="rightType === 'domain' ? '数据域' : '发现规则'" />
+            <div class="right-content" v-if="collapseList.length > 0">
+              <AddDomain :itemData="domainForm" type="edit" @confirm="AddFormConfirm" v-if="rightType === 'domain'" />
+              <AddRules :itemData="rulesForm" type="edit" @confirm="AddFormConfirm" v-if="rightType === 'rules'" />
             </div>
+            <el-empty description="暂无数据" v-if="collapseList.length <= 0"
+            style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"></el-empty>
           </div>
-        </template>
-      </Split>
+        </div>
+      </div>
     </div>
     <!-- 提示框 -->
     <Modal v-model="modalData.show" :icon="modalData.icon" :cancel="modalData.cancel" :text="modalData.text"
       @confirm="modalConfirm"></Modal>
 
     <!-- 新增数据域 / 发现规则 -->
-    <ModalPop :width="'740'" v-model="modalPopData.show" :title="modalPopData.title" @cancel="modalPopCancel">
-      <template #content>
-        <AddDomain type="add" @cancel="modalPopCancel" @confirm="AddFormConfirm"
-          v-if="modalPopData.type === 'domain'" />
-        <AddRules type="add" :itemData="rulesForm" @cancel="modalPopCancel" @confirm="AddFormConfirm"
-          v-if="modalPopData.type === 'rules'" />
-      </template>
-    </ModalPop>
+    <el-dialog :title="modalPopData.title" v-model="modalPopData.show" :before-close="modalPopCancel" :width="modalPopData.type === 'domain'? '900' : '750'">
+      <div v-if="modalPopData.type === 'domain'" style="padding: 30px 120px;">
+        <AddDomain type="add" @cancel="modalPopCancel" @confirm="AddFormConfirm" />
+      </div>
+      <div v-if="modalPopData.type === 'rules'" style="padding: 30px;">
+        <AddRules type="add" :itemData="rulesForm" @cancel="modalPopCancel" @confirm="AddFormConfirm" />
+      </div>
+    </el-dialog>
   </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;
+  padding: 20px 0 0 0;
+  .pageTitle {
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 500;
+    letter-spacing: 0px;
+    line-height: 22px;
+    color: rgba(53, 64, 79, 1);
+
+    .icon {
+      margin-right: 6px;
+      width: 16px;
+      height: 16px;
+    }
+  }
+  .box {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+    .left {
+      margin-right: 30px;
+      width: 565px;
+      overflow: auto;
+      height: 100%;
       display: flex;
-      align-items: center;
-      font-weight: 700;
-      color: #515a6e;
+      flex-direction: column;
+      .searchBox{
+        display: flex;
+        width: 100%;
+        .searchBut {
+          height: 40px;
+          background: var(--el-color-primary);
+          color: var(--el-color-white);
+          border-radius: 0px 5px 5px 0px;
+        }
+        .addBut{
+          height: 40px;
+          margin-left: 10px;
+          background: rgba(0, 189, 207, 1);
+          border-color: rgba(0, 189, 207, 1);
+        }
+      }
+      .collapseView {
+        width: 100%;
+        flex: 1;
+        overflow: hidden;
+      }
     }
-    &-content {
-      padding: 10px 0px;
-      width: 80%;
-      margin: 20px auto;
+    .right {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      height: 100%;
+      background: rgba(255, 255, 255, 1);
+      .line {
+        width: 100%;
+        height: 2px;
+        border-radius: 5px 5px 0px 0px;
+        background: linear-gradient(
+          90deg,
+          rgba(33, 103, 217, 1) 0%,
+          rgba(17, 200, 250, 1) 34.03%,
+          rgba(33, 103, 217, 1) 64.58%,
+          rgba(48, 128, 255, 1) 100%
+        );
+      }
+      &-content {
+        width: 100%;
+        .openEditor {
+          position: absolute;
+          bottom: 0;
+          right: 0;
+        }
+        :deep(.formBox) {
+          border-radius: 5px;
+          background: #ebebeb;
+          border: 1px solid rgba(29, 178, 245, 1);
+          overflow: hidden;
+          .el-form-item__content {
+            border-left: 1px solid #ebebeb;
+            background: #f5fcff;
+          }
+          .el-form-item__label {
+            height: 40px;
+            line-height: 40px;
+            background: #f5fcff;
+            color: rgba(148, 148, 148, 1);
+          }
+          .el-form-item {
+            margin-bottom: 1px;
+            background: #f5fcff;
+          }
+          .el-input {
+            height: 40px;
+            line-height: 40px;
+          }
+          .is-disabled {
+            background: #f5fcff;
+            .el-input__wrapper,.el-textarea__inner {
+              background: #f5fcff;
+              box-shadow: none;
+              border-radius: 0;
+            }
+            .el-input__inner,.el-textarea__inner {
+              -webkit-text-fill-color: rgba(53, 64, 79, 1);
+            }
+          }
+          .el-form-item__error {
+            top: 30% !important;
+            left: auto !important;
+            right: 89px !important;
+          }
+        }
+      }
+      &-btn {
+        padding: 20px 20px 20px 100px;
+        display: flex;
+        justify-content: center;
+      }
     }
   }
 }

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

@@ -116,18 +116,20 @@ watch(
 
 <template>
   <div>
-    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" :disabled="readOnly">
-      <el-form-item label="数据域名称" prop="dataarea" required>
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="110px" :disabled="readOnly">
+      <div class="formBox">
+        <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="form.remark" :placeholder="!readOnly ? '请输入备注' : ''"></el-input>
-      </el-form-item>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input type="textarea" rows="4" v-model="form.remark" :placeholder="!readOnly ? '请输入备注' : ''"></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/Discover/modules/AddRules.vue

 <script setup lang="ts" name="AddRules">
 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 { getDictinaryTypes } from "@/api/ruleConfig/discover";
@@ -107,7 +106,7 @@ const reset = () => {
     matchingway: "",
     defaulttype: "0",
     remark: "",
-    testString: ""
+    testString: "",
   };
 };
 
@@ -174,7 +173,7 @@ const testRegexFun = () => {
     discoverway: discoverway,
     matchingway: matchingway,
     regex: regex,
-    subRuleidList: subRuleidList.value
+    subRuleidList: subRuleidList.value,
     testString: ruleexample,
   };
   formRef.value?.validate((valid) => {
@@ -237,84 +236,96 @@ onMounted(() => {
 
 <template>
   <div>
-    <el-form ref="formRef" :model="form" :rules="rules" label-width="110px" :disabled="readOnly">
-      <el-form-item label="发现规则名" prop="name" required>
-        <el-input v-model="form.name" :placeholder="!readOnly ? '请输入发现规则名' : ''"></el-input>
-      </el-form-item>
-      <el-form-item label="数据域">
-        <div>{{ form.type }}</div>
-      </el-form-item>
-      <el-form-item label="发现方式" prop="flag" required>
-        <div style="width: 100%;background: #F3F5FA;">
-          <el-select v-model="form.flag">
-            <el-option v-for="item in discoverTypeList" :key="item.value" :label="item.label" :value="item.value">
-            </el-option>
-          </el-select>
-        </div>
-      </el-form-item>
-      <el-form-item label="发现规则类型">
-        <el-radio-group v-model="form.discoverway" v-if="!readOnly">
-          <el-radio :label="item.value"
-            v-for="(item,index) in form.flag !== '1' ? singleDiscoverRuleType : singleDiscoverRuleType.slice(0,1)"
-            :key="index">{{ item.label }}</el-radio>
-        </el-radio-group>
-        <el-radio-group v-model="form.discoverway" v-if="readOnly">
-          <el-radio :label="item.value"
-            v-for="(item,index) in singleDiscoverRuleType.filter(f => f.value=== form.discoverway)"
-            :key="index">{{ item.label }}</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="正则表达式" prop="regex" required
-        :rules="[{ required: true, message: '请输入正则表达式', trigger:'blur' }]" v-if="form.discoverway === '01'">
-        <el-input v-model="form.regex" :placeholder="!readOnly ? '请输入正则表达式' : ''"></el-input>
-      </el-form-item>
-      <el-form-item label="JAVA方法" prop="regex" required
-        :rules="[{ required: true, message: '请输入JAVA方法', trigger:'blur' }]" v-if="form.discoverway === '04'">
-        <el-input v-model="form.regex" :placeholder="!readOnly ? '请输入JAVA方法' : ''"></el-input>
-      </el-form-item>
-      <el-form-item label="字典分类" prop="dictionaryClass" required v-if="form.discoverway === '03'">
-        <div style="width: 100%;background: #F3F5FA;">
-          <el-select v-model="form.dictionaryClass">
-            <el-option v-for="item in dictinaryTypeList" :key="item.value" :label="item.text" :value="item.value">
-            </el-option>
-          </el-select>
-        </div>
-      </el-form-item>
-      <el-form-item label="匹配方式" prop="matchingway" required v-if="form.discoverway === '03'">
-        <div style="width: 100%;background: #F3F5FA;">
-          <el-select v-model="form.matchingway">
-            <el-option v-for="item in matchingList" :key="item.value" :label="item.label" :value="item.value">
-            </el-option>
-          </el-select>
-        </div>
-      </el-form-item>
-      <el-form-item label="样例" prop="ruleexample" required>
-        <el-input v-model="form.ruleexample" :placeholder="!readOnly ? '请输入样例' : ''"></el-input>
-      </el-form-item>
-      <el-form-item label="测试">
-        <div style="width: 100%;display: flex;align-items: center;">
-          <el-input v-model="form.testString" style="flex: 1;" :placeholder="!readOnly ? '请输入测试' : ''"></el-input>
-          <el-button type="primary" @click="testRegexFun">测试</el-button>
-        </div>
-      </el-form-item>
-      <el-form-item label="备注">
-        <el-input v-model="form.remark" :placeholder="!readOnly ? '请输入备注' : ''"></el-input>
-      </el-form-item>
-      <el-form-item label="默认规则">
-        <Switch true-value="1" false-value="0" v-model="form.defaulttype" :disabled="readOnly">
-          <template #open>
-            <span>是</span>
-          </template>
-          <template #close>
-            <span>否</span>
-          </template>
-        </Switch>
-      </el-form-item>
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="110px" :disabled="readOnly" :label-position="props.type === 'add'?'left':''">
+      <div class="formBox">
+        <el-form-item label="数据域" v-if="props.type === 'add'">
+          <div style="color: rgba(33, 103, 217, 1);" v-if="!readOnly">{{ form.type }}</div>
+        </el-form-item>
+        <el-form-item label="发现规则名" prop="name" required>
+          <el-input v-model="form.name" :placeholder="!readOnly ? '请输入发现规则名' : ''"></el-input>
+        </el-form-item>
+        <el-form-item label="数据域" v-if="props.type === 'edit'">
+          <div style="margin-left: 10px;" v-if="!readOnly">{{ form.type }}</div>
+          <div class="is-disabled" v-if="readOnly" style="width: 100%;height: 100%;">
+            <div class="el-input__wrapper" style="height: 100%;color: rgb(53, 64, 79);">{{ form.type }}</div>
+          </div>
+        </el-form-item>
+        <el-form-item label="发现方式" prop="flag" required>
+          <div style="width: 100%;background: #F3F5FA;" v-if="!readOnly">
+            <el-select v-model="form.flag">
+              <el-option v-for="item in discoverTypeList" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+          <div class="is-disabled" v-if="readOnly" style="width: 100%;height: 100%;">
+            <div class="el-input__wrapper" v-for="(item,index) in discoverTypeList.filter(f => f.value === form.flag)"
+              :key="index" style="height: 100%;color: rgb(53, 64, 79);">{{ item.label }}</div>
+          </div>
+        </el-form-item>
+        <el-form-item label="发现规则类型">
+          <el-radio-group style="margin-left: 10px;" v-model="form.discoverway" v-if="!readOnly">
+            <el-radio :label="item.value"
+              v-for="(item,index) in form.flag !== '1' ? singleDiscoverRuleType : singleDiscoverRuleType.slice(0,1)"
+              :key="index">{{ item.label }}</el-radio>
+          </el-radio-group>
+          <div class="is-disabled" v-if="readOnly" style="width: 100%;height: 100%;">
+            <div class="el-input__wrapper"
+              v-for="(item,index) in singleDiscoverRuleType.filter(f => f.value === form.discoverway)" :key="index"
+              style="height: 100%;color: rgb(53, 64, 79);">{{ item.label }}</div>
+          </div>
+        </el-form-item>
+        <el-form-item label="正则表达式" prop="regex" required
+          :rules="[{ required: true, message: '请输入正则表达式', trigger:'blur' }]" v-if="form.discoverway === '01'">
+          <el-input v-model="form.regex" :placeholder="!readOnly ? '请输入正则表达式' : ''"></el-input>
+        </el-form-item>
+        <el-form-item label="JAVA方法" prop="regex" required
+          :rules="[{ required: true, message: '请输入JAVA方法', trigger:'blur' }]" v-if="form.discoverway === '04'">
+          <el-input v-model="form.regex" :placeholder="!readOnly ? '请输入JAVA方法' : ''"></el-input>
+        </el-form-item>
+        <el-form-item label="字典分类" prop="dictionaryClass" required v-if="form.discoverway === '03'">
+          <div style="width: 100%;background: #F3F5FA;">
+            <el-select v-model="form.dictionaryClass">
+              <el-option v-for="item in dictinaryTypeList" :key="item.value" :label="item.text" :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+        </el-form-item>
+        <el-form-item label="匹配方式" prop="matchingway" required v-if="form.discoverway === '03'">
+          <div style="width: 100%;background: #F3F5FA;">
+            <el-select v-model="form.matchingway">
+              <el-option v-for="item in matchingList" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+        </el-form-item>
+        <el-form-item label="样例" prop="ruleexample" required>
+          <el-input v-model="form.ruleexample" :placeholder="!readOnly ? '请输入样例' : ''"></el-input>
+        </el-form-item>
+        <el-form-item label="测试">
+          <div style="width: 100%;display: flex;align-items: center;">
+            <el-input v-model="form.testString" style="flex: 1;" :placeholder="!readOnly ? '请输入测试' : ''"></el-input>
+            <el-button type="primary" v-if="!readOnly" @click="testRegexFun">测试</el-button>
+          </div>
+        </el-form-item>
+        <el-form-item label="默认规则">
+          <div class="is-disabled" v-if="readOnly" style="width: 100%;height: 100%;">
+            <div class="el-input__wrapper" style="height: 100%;color: rgb(53, 64, 79);">
+              {{ form.defaulttype === '1' ? '是':'否' }}</div>
+          </div>
+          <el-radio-group v-model="form.defaulttype" v-if="!readOnly" style="margin-left: 10px;">
+            <el-radio label="0">否</el-radio>
+            <el-radio label="1">是</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="form.remark" :placeholder="!readOnly ? '请输入备注' : ''"></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>
 
     <Modal v-model="modalData.show" :icon="modalData.icon" :cancel="false" :text="modalData.text"
@@ -324,7 +335,7 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .el-form-item {
-  margin-bottom: 8px;
+  margin-bottom: 20px;
 }
 .btn {
   padding: 20px;