Skip to content

N
nse-ui
Commit a888d459 by wanglizhen
Options

发现规则模块

parent df79cc93
正在显示 包含 220 行增加 和 81 行删除
src/api/ruleConfig/discover.js 0 → 100644
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,46 +48,26 @@ const modalPopData = reactive({
// 获取数据
const getCollapse = () => {
const data = [
{
name: '测试数据域',
list: [
{
name: '按混合证件号字段查询'
}
]
},
{
name: '通用规则',
list: [
{
name: 'aaaaa'
},
{
name: 'bbbbb'
query(queryParams.value).then(res => {
const { data } = res
collapseList.value = data.map(item => {
const list = item.data.map(itemTwo => {
return {
...itemTwo,
isCheck: true,
isDelete: true,
}
]
},
{
name: '解密数据',
list: []
}
]
collapseList.value = data.map(item => {
const list = item.list.map(itemTwo => {
})
return {
...itemTwo,
isCheck: true,
...item.dataarea,
list: list,
isAdd: true,
isView: true,
isDelete: true,
}
})
return {
...item,
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,19 +139,19 @@ 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'
}
// 发现规则设置默认项
const collapseDefault = (item) => {
const collapseDefault = (item) => {
modalData.type = 'default'
modalData.cancel = false
modalData.icon = 'error'
......@@ -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;
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') {
readOnly.value = true
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}}
}
emit('confirm')
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">
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论