Skip to content

N
nse-ui
Commit b929416d by wanglizhen
Options

发现规则

parent 13481218
正在显示 包含 212 行增加 和 89 行删除
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">
<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>
<search />
</el-icon>
</template>
<template #append>
<el-button icon="search" class="searchBut" @click="getCollapse">搜索</el-button>
</template>
</el-input>
<el-button type="primary" icon="Plus" @click="addDomainClick">新增数据域</el-button>
<el-button type="primary" icon="Plus" class="addBut" @click="addDomainClick">新增数据域</el-button>
</div>
<el-scrollbar style="width: 100%;flex: 1;padding-right: 38px;">
<CollapseView :list="collapseList" @add="collapseAdd" @mainDeletion="collapseMainDeletion"
<div class="collapseView">
<CollapseView :list="collapseList" :fatherIndex="fatherIndex" :currentId="currentId" @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">
<el-icon>
<info-filled />
</el-icon>
<span style="margin-left: 5px;">{{ rightType === 'domain' ? '数据域' : '发现规则' }}</span>
</div>
<div class="right-content">
<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>
</div>
</div>
</template>
</Split>
</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-weight: 700;
color: #515a6e;
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;
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;
}
}
.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 {
padding: 10px 0px;
width: 80%;
margin: 20px auto;
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 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>
</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,32 +236,43 @@ onMounted(() => {
<template>
<div>
<el-form ref="formRef" :model="form" :rules="rules" label-width="110px" :disabled="readOnly">
<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="数据域">
<div>{{ form.type }}</div>
<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;">
<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 v-model="form.discoverway" v-if="!readOnly">
<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>
<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>
<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'">
......@@ -294,27 +304,28 @@ onMounted(() => {
<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>
<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>
<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>
</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;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论