Skip to content

N
nse-ui
Commit 12c46105 by wanglizhen
Options

脱敏算法

parent 3d9b7d36
正在显示 包含 479 行增加 和 62 行删除
src/components/EditPop/ExpressionEditor.vue 0 → 100644
<script setup lang="ts" name="ExpressionEditor">
import { ref, onMounted, toRefs } from "vue";
import ModalPop from "./ModalPop.vue"
const props = defineProps<{
modelValue: boolean;
data?: Object;
}>();
const emit = defineEmits(["update:modelValue", "confirm", "cancel"]);
const editorValue = ref("");
const infoText = ref('')
const listData = ref([
{
name: 'convert_base1()'
},
{
name: 'convert_base2()'
}
])
// 确认
const confirm = () => {
emit("confirm", editorValue.value);
};
// 测试
const test = () => {
console.log("test");
};
const cancel = () => {
emit("cancel");
}
// 划过事件
const hoverFunc = (item) => {
infoText.value = item;
}
const change = (val) => {
if(!val) return;
console.log(props.data)
editorValue.value = props.data.name;
}
</script>
<template>
<ModalPop v-model="props.modelValue" title="编辑器" @cancel="cancel" @change="change">
<template #content>
<div class="title">算法名称 :</div>
<div class="content">
<div class="content_left">
<div class="content_left_tap">函数</div>
<div class="content_left_list">
<el-scrollbar height="362px">
<div class="function__item" @mouseover="hoverFunc(item)" v-for="(item,index) in listData" :key="index">{{ item.name }}</div>
</el-scrollbar>
</div>
</div>
<div class="content_right">
<div class="content_right_info">
<div class="content_right_info_title">说明</div>
<div class="content_right_info_content">定义：{{ infoText }}</div>
</div>
<div class="content_right_editor">
<el-input
type="textarea"
placeholder="请输入内容"
v-model="editorValue"
/>
</div>
</div>
</div>
</template>
<template #footer>
<el-button type="primary" style="width: 150px;" @click="test">测试</el-button>
<el-button type="info" style="width: 150px;" @click="cancel">取消</el-button>
<el-button type="primary" style="width: 150px;" @click="confirm">确认</el-button>
</template>
</ModalPop>
</template>
<style lang="scss" scoped>
.title{
height: 32px; line-height: 32px;
}
.content{
display: flex;
height: 400px;
width: 100%;
&_left{
height: 100%;
width: 322px;
border-width: 1px;
border-style: solid;
border-color: rgb(220, 229, 235);
border-image: initial;
&_tap{
height: 36px;
line-height: 36px;
font-size: 14px;
font-weight: 700;
border-bottom: 1px solid rgb(220, 229, 235);
padding-left: 20px;
color: rgb(44, 158, 247);
}
&_list{
height: 100%;
.function__item{
padding-left: 20px;
cursor: pointer;
color: #7A8596;
}
.function__item:hover{
background: rgb(243, 245, 250);
}
}
}
&_right{
margin-left: 10px;
height: 100%;
flex: 1;
&_info{
height: 146px;
border-style: solid;
border-color: rgb(220, 229, 235);
border-image: initial;
border-width: 1px 1px 0px;
padding: 0px 20px;
&_title{
height: 42px;
line-height: 42px;
color: rgb(122, 132, 149);
font-size: 14px;
font-weight: 700;
}
&_content{
margin-top: -4px;
color: rgb(122, 132, 149);
font-size: 12px;
word-break: break-all;
}
}
&_editor{
width: 100%;
:deep(.el-textarea__inner){
box-sizing: border-box !important;
height: 254px !important;
min-height: 254px !important;
max-height: 254px !important;
border-radius: 0px !important;
padding: 12px 20px !important;
background: rgb(243, 245, 250) !important;
}
}
}
}
</style>
\ No newline at end of file
src/components/EditPop/ModalPop.vue 0 → 100644
<script setup lang="ts" name="ModalPop">
import { ref, toRefs } from "vue";
import { Modal } from "view-ui-plus";
const props = defineProps<{
modelValue: boolean;
title: string;
}>();
const emit = defineEmits(["update:modelValue", "cancel", "change"]);
// 关闭
const cancel = () => {
emit("cancel");
};
const change = (visible: boolean) => {
emit("change", visible);
};
</script>
<template>
<Modal class="ModalPop" v-model="props.modelValue" width="1000" draggable scrollable sticky @on-cancel="cancel" @on-visible-change="change">
<template #header>
<span style="font-size: 16px; font-weight: bold;color: #7A8495;">{{ props.title }}</span>
</template>
<div class="slot-warpper">
<slot name="content"></slot>
</div>
<template #footer>
<div style="display: flex; justify-content: center; padding-top: 20px;">
<slot name="footer"></slot>
</div>
</template>
</Modal>
</template>
<style lang="scss">
.ModalPop {
.ivu-modal-header,
.ivu-modal-footer {
border: none;
}
.ivu-modal-content {
background: #f3f5fa;
}
.ivu-modal-body {
background: rgb(243, 245, 250);
border-radius: 4px;
padding: 0px 8px 8px !important;
}
.slot-warpper {
border-width: 1px;
border-style: solid;
border-color: rgb(220, 229, 235);
border-image: initial;
background: rgb(255, 255, 255);
padding: 30px;
border-radius: 4px;
max-height: 500px;
}
}
</style>
\ No newline at end of file
src/components/collapseView/index.vue
<script setup lang="ts" name="collapseView">
import { ref, computed } from 'vue'
import { Collapse, Panel } from 'view-ui-plus';
const emit = defineEmits(["add", "view", "mainDeletion", "default", "childDelete", "change"]);
const props = defineProps<{
modelValue: boolean;
text?: string;
icon?: string; // 图标 '' 'success' 'error'
width?: string;
cancel?: string;
list: Array<any>;
}>();
const listData = computed(() => props.list)
// 新增
const addClick = () => {
console.log("add");
const addClick = (item) => {
emit("add",item);
}
// 查看
const viewClick = () => {
console.log("view");
const viewClick = (item) => {
emit("view",item);
}
// 主删除
const mainDeletion = () => {
console.log("mainDeletion");
const mainDeletion = (item) => {
emit("mainDeletion",item);
}
// 子级监听
const itemClick = () => {
console.log("change");
const itemClick = (item) => {
emit("change",item);
}
// 默认项
const defaultClick = () => {
console.log("default");
const defaultClick = (item) => {
emit("default",item);
}
// 子删除
const childDelete = () => {
console.log("childDelete");
const childDelete = (item) => {
emit("childDelete",item);
}
</script>
<template>
<Collapse simple>
<Panel name="1">
测试数据域
<Panel :name="item.name" v-for="(item, index) in listData" :key="index">
{{ item.name }}
<span class="collapse-item__btns--box">
<el-icon color="rgb(253, 84, 81)" :size="16" @click.stop="addClick()">
<el-icon color="rgb(253, 84, 81)" :size="16" v-if="item.isAdd" @click.stop="addClick(item)">
<circle-plus-filled />
</el-icon>
<el-icon color="#2c9ef7" :size="16" style="margin-left: 8px;" @click.stop="viewClick()">
<el-icon color="#2c9ef7" :size="16" v-if="item.isView" @click.stop="viewClick(item)" style="margin-left: 8px;">
<View />
</el-icon>
<el-icon color="rgb(13, 215, 141)" :size="16" style="margin-left: 8px;" @click.stop="mainDeletion()">
<el-icon color="rgb(13, 215, 141)" :size="16" v-if="item.isDelete" @click.stop="mainDeletion(item)" style="margin-left: 8px;">
<delete />
</el-icon>
</span>
<template #content>
<div>
<div class="rule__item" @click="itemClick()">
<span>aaaa</span>
<div class="rule__item" v-for="(itemTwo, i) in item.list" :key="i" @click="itemClick(itemTwo)">
<span>{{ itemTwo.name }}</span>
<div class="default"></div>
<div class="rule__item__btns">
<el-icon color="#2c9ef7" :size="15" style="margin-right: 8px;" @click.stop="defaultClick()">
<el-icon color="#2c9ef7" :size="15" v-if="itemTwo.isCheck" @click.stop="defaultClick(itemTwo)" style="margin-right: 8px;" >
<circle-check />
</el-icon>
<el-icon color="rgb(13, 215, 141)" :size="15" @click.stop="childDelete()">
<el-icon color="rgb(13, 215, 141)" :size="15" v-if="itemTwo.isDelete" @click.stop="childDelete(itemTwo)">
<delete />
</el-icon>
</div>
......
src/views/ruleConfig/Algorithm/index.vue
<script setup name="Algorithm">
import { ref, toRefs } from 'vue'
import { Split, Switch } from 'view-ui-plus';
import { onMounted, ref, toRefs } from 'vue'
import { Split } from 'view-ui-plus';
import CollapseView from '@/components/CollapseView/index.vue'
const splitNum = ref(0.31)
import formModule from './modules/formModule.vue'
import ModalPop from "@/components/EditPop/ModalPop.vue"
const splitNum = ref(0.31) // 左右分割比例
const collapseList = ref([])
const data = reactive({
form: {
formEdit: {
name: "",
},
rules: {},
formAdd: {
name: "",
}
});
const { form, rules } = toRefs(data);
const readOnly = ref(true);
const { formEdit, formAdd } = toRefs(data);
const modalData = reactive({
show: false,
text: '',
icon: 'error',
cancel: true
})
const modalPopShow = ref(false)
// 获取数据
const getCollapse = () => {
const data = [
{
name: '测试数据域',
list: [
{
name: 'aaaaa'
},
{
name: 'bbbbb'
}
]
},
{
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: false,
isDelete: false,
}
})
}
// 新增算法关闭
const modalPopCancel = () => {
modalPopShow.value = false
}
// 新增算法
const collapseAdd = (item) => {
console.log('添加事件', item)
formAdd.value = {}
modalPopShow.value = true
}
// 删除事件
const collapseDelete = (item) => {
console.log('删除事件', item)
modalData.show = true
modalData.icon = 'error'
modalData.text = '删除后无法恢复，是否确认删除[' + item.name + ']?'
}
// 删除回调
const modalConfirm = () => {
modalData.show = false
}
// 点击监听
const collapseChange = (item) => {
formEdit.value = item
}
// 算法确认
const formModuleConfirm = (item) => {
console.log('新增算法', item)
modalPopShow.value = false
}
onMounted(() => {
getCollapse()
})
</script>
<template>
......@@ -36,7 +138,7 @@ const readOnly = ref(true);
</el-icon>
</template>
</el-input>
<CollapseView />
<CollapseView :list="collapseList" @add="collapseAdd" @childDelete="collapseDelete" @change="collapseChange" />
</div>
</template>
<template #right>
......@@ -49,36 +151,23 @@ const readOnly = ref(true);
<span style="margin-left: 5px;">脱敏规则</span>
</div>
<div class="right-content">
<el-form ref="formRef" :model="form" label-width="100px" :disabled="readOnly">
<el-form-item label="算法名称" required>
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="表达式" required>
<el-input type="textarea" rows="8" v-model="form.desc"></el-input>
<el-button class="openEditor" type="primary">打开编辑器</el-button>
</el-form-item>
<el-form-item label="默认规则">
<Switch :disabled="readOnly">
<template #open>
<span>是</span>
</template>
<template #close>
<span>否</span>
</template>
</Switch>
</el-form-item>
</el-form>
</div>
<div class="right-btn">
<el-button type="primary" style="width: 150px;" @click="readOnly = false" v-if="readOnly">编辑</el-button>
<el-button type="info" style="width: 150px;" @click="readOnly = true" v-if="!readOnly">取消</el-button>
<el-button type="primary" style="width: 150px;" v-if="!readOnly">确认</el-button>
<formModule v-model="formEdit" type="edit" />
</div>
</div>
</div>
</template>
</Split>
</div>
<!-- 提示框 -->
<Modal v-model="modalData.show" :icon="modalData.icon" :cancel="modalData.cancel" :text="modalData.text"
@confirm="modalConfirm"></Modal>
<!-- 新增算法 -->
<ModalPop v-model="modalPopShow" title="编辑器" @cancel="modalPopCancel">
<template #content>
<formModule v-model="formAdd" type="add" @cancel="modalPopCancel" @confirm="formModuleConfirm" />
</template>
</ModalPop>
</div>
</template>
......@@ -101,15 +190,15 @@ const readOnly = ref(true);
padding: 10px 0px;
width: 80%;
margin: 20px auto;
.openEditor{
.openEditor {
position: absolute;
bottom: 0;
right: 0;
}
}
&-btn{
padding: 20px 20px 20px 100px;
display: flex;
&-btn {
padding: 20px 20px 20px 100px;
display: flex;
justify-content: center;
}
}
......
src/views/ruleConfig/Algorithm/modules/formModule.vue 0 → 100644
<script setup lang="ts" name="Form">
import { onMounted, reactive, ref, toRefs, watch } from "vue";
import { Switch } from "view-ui-plus";
import ExpressionEditor from '@/components/EditPop/ExpressionEditor.vue'
const props = defineProps<{
modelValue: boolean;
type: string;
}>();
const emit = defineEmits(["update:modelValue", 'cancel','confirm']);
const data = reactive({
rules: {},
});
const { rules } = toRefs(data);
const editorShow = ref(false);
const readOnly = ref(true);
const editor = ref({});
watch(
() => props.type,
(newVal) => {
readOnly.value = props.type === 'edit' ? true : false;
},
{ deep: true, immediate: true }
);
// 打开编辑器
const openEditor = () => {
editorShow.value = true
editor.value = props.modelValue
}
// 取消
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')
}
// 编辑器确认
const formConfirm = (val) => {
editorShow.value = false
props.modelValue.name = val
}
</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>
<el-input type="textarea" rows="8" v-model="modelValue.name"></el-input>
<el-button class="openEditor" type="primary" @click="openEditor">打开编辑器</el-button>
</el-form-item>
<el-form-item label="默认规则">
<Switch :disabled="readOnly">
<template #open>
<span>是</span>
</template>
<template #close>
<span>否</span>
</template>
</Switch>
</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>
<ExpressionEditor v-model="editorShow" :data="editor" @cancel=" editorShow = false" @confirm="formConfirm" />
</div>
</template>
<style lang="scss" scoped>
.openEditor {
position: absolute;
bottom: 0;
right: 0;
}
.btn {
padding: 20px 20px 20px 100px;
display: flex;
justify-content: center;
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论