Skip to content

N
nse-ui
Commit 8990fa66 by 周海峰
Options

Merge branch 'master' of https://code.palacesun.com/wuchao/nse-ui

parents 8564e2f5 478d0376
正在显示 包含 1905 行增加 和 106 行删除
src/components/EditPop/ExpressionEditor.vue
......@@ -73,11 +73,11 @@ const change = (val) => {
</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>
<div style="display: flex; justify-content: center; padding-top: 20px;">
<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>
</div>
</template>
</ModalPop>
</template>
......
src/components/EditPop/ModalPop.vue
<script setup lang="ts" name="ModalPop">
import { ref, toRefs } from "vue";
import { Modal } from "view-ui-plus";
const props = defineProps<{
const props = withDefaults(defineProps<{
modelValue: boolean;
title: string;
}>();
width?: string;
}>(), {
width: '1000'
})
const emit = defineEmits(["update:modelValue", "cancel", "change"]);
......@@ -19,18 +22,13 @@ const change = (visible: boolean) => {
</script>
<template>
<Modal class="ModalPop" v-model="props.modelValue" width="1000" draggable scrollable sticky @on-cancel="cancel" @on-visible-change="change">
<Modal class="ModalPop" footer-hide :mask-closable="false" v-model="props.modelValue" :width="width" 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>
......@@ -56,7 +54,7 @@ const change = (visible: boolean) => {
background: rgb(255, 255, 255);
padding: 30px;
border-radius: 4px;
max-height: 500px;
max-height: 550px;
}
}
</style>
\ No newline at end of file
src/layout/components/Sidebar/SidebarItem.vue
<template>
<div v-if="!item.hidden">
{{ item }}
<template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
<svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>
<template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template>
<!-- <svg-icon v-if="onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"/> -->
<template #title>
<span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">
{{ onlyOneChild.meta.title }}
</span>
</template>
<!-- <span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">
{{ onlyOneChild.meta.title }}
</span> -->
</el-menu-item>
</app-link>
</template>
<el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
<template v-if="item.meta" #title>
<svg-icon :icon-class="item.meta && item.meta.icon" />
<span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span>
<el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
<template #title>
<!-- <svg-icon v-if="item.meta && item.meta.icon" :icon-class="item.meta.icon" /> -->
<span class="menu-title" :title="hasTitle(item.meta.title)">
{{ item.meta.title }}
</span>
</template>
<sidebar-item
v-for="(child, index) in item.children"
:key="child.path + index"
v-for="child in item.children"
:key="child.path"
:is-nest="true"
:item="child"
:base-path="resolvePath(child.path)"
......@@ -31,9 +40,9 @@
import { isExternal } from '@/utils/validate'
import AppLink from './Link'
import { getNormalPath } from '@/utils/ruoyi'
import { ref } from 'vue'
const props = defineProps({
// route object
item: {
type: Object,
required: true
......@@ -62,12 +71,10 @@ function hasOneShowingChild(children = [], parent) {
return true
})
// When there is only one child router, the child router is displayed by default
if (showingChildren.length === 1) {
return true
}
// Show parent if there are no child router to display
if (showingChildren.length === 0) {
onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
return true
......@@ -76,25 +83,17 @@ function hasOneShowingChild(children = [], parent) {
return false
}
function resolvePath(routePath, routeQuery) {
function resolvePath(routePath) {
if (isExternal(routePath)) {
return routePath
}
if (isExternal(props.basePath)) {
return props.basePath
}
if (routeQuery) {
let query = JSON.parse(routeQuery)
return { path: getNormalPath(props.basePath + '/' + routePath), query: query }
}
return getNormalPath(props.basePath + '/' + routePath)
}
function hasTitle(title){
if (title.length > 5) {
return title
} else {
return ""
}
function hasTitle(title) {
return title && title.length > 5 ? title : ""
}
</script>
</script>
\ No newline at end of file
src/layout/components/Sidebar/index.vue
......@@ -14,8 +14,8 @@
:class="sideTheme"
>
<sidebar-item
v-for="(route, index) in sidebarRouters"
:key="route.path + index"
v-for="(route, index) in processedRouters"
:key="route.id || route.path + index"
:item="route"
:base-path="route.path"
/>
......@@ -30,14 +30,33 @@ import SidebarItem from './SidebarItem'
import variables from '@/assets/styles/variables.module.scss'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
import { computed } from 'vue'
const route = useRoute()
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()
console.log('appStore.navList',appStore.navList)
// 转换接口数据为组件需要的格式
const processedRouters = computed(() => {
return appStore.navList.map(item => ({
path: item.path,
meta: {
title: item.name,
icon: item.iconCls,
id: item.id
},
children: item.children?.map(child => ({
path: child.path,
name: child.name,
meta: {
title: child.name,
icon: child.iconCls,
id: child.id
}
})) || []
}))
})
const sidebarRouters = computed(() => permissionStore.sidebarRouters)
const showLogo = computed(() => settingsStore.sidebarLogo)
const sideTheme = computed(() => settingsStore.sideTheme)
const theme = computed(() => settingsStore.theme)
......@@ -69,36 +88,5 @@ const activeMenu = computed(() => {
</script>
<style lang="scss" scoped>
.sidebar-container {
background-color: v-bind(getMenuBackground);
.scrollbar-wrapper {
background-color: v-bind(getMenuBackground);
}
.el-menu {
border: none;
height: 100%;
width: 100% !important;
.el-menu-item, .el-sub-menu__title {
&:hover {
background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
}
}
.el-menu-item {
color: v-bind(getMenuTextColor);
&.is-active {
color: var(--menu-active-text, #409eff);
background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
}
}
.el-sub-menu__title {
color: v-bind(getMenuTextColor);
}
}
}
</style>
/* 保持原有样式不变 */
</style>
\ No newline at end of file
src/store/modules/app.js
......@@ -17,6 +17,7 @@ const router = useRouter()
localUserName: sessionStorage.getItem('localUserName') ? JSON.parse(sessionStorage.getItem('localUserName')) : '',
bindDataSourceInfo: sessionStorage.getItem('bindDataSourceInfo') ? JSON.parse(sessionStorage.getItem('bindDataSourceInfo')) : {},
navList: sessionStorage.getItem('navList') ? JSON.parse(sessionStorage.getItem('navList')) : [],
allnavList: sessionStorage.getItem('allnavList') ? JSON.parse(sessionStorage.getItem('allnavList')) : [],
navStatus: sessionStorage.getItem('navStatus') ? JSON.parse(sessionStorage.getItem('navStatus')) : { type: 'manage' },
leftNavActiveId: '',
queryData: sessionStorage.getItem('queryData') ? JSON.parse(sessionStorage.getItem('queryData')) : {},
......@@ -332,6 +333,10 @@ const router = useRouter()
this.navList = data
sessionStorage.setItem('navList', JSON.stringify(data))
},
setallNav(data) {
this.allnavList = data
sessionStorage.setItem('allnavList', JSON.stringify(data))
},
setNavOpen(data) {
this.navOpen = data
......
src/store/modules/permission.js
......@@ -16,7 +16,8 @@ const usePermissionStore = defineStore(
addRoutes: [],
defaultRoutes: [],
topbarRouters: [],
sidebarRouters: []
sidebarRouters: [],
allsidebarRouters: []
}),
actions: {
setRoutes(routes) {
......@@ -32,6 +33,10 @@ const usePermissionStore = defineStore(
setSidebarRouters(routes) {
this.sidebarRouters = routes
},
allsidebarRouters(routes){
this.sidebarRoutersall = routes
console.log(routes)
},
generateRoutes(roles) {
return new Promise(resolve => {
// 向后端请求路由数据
......
src/views/Classification/index.vue
......@@ -13,6 +13,12 @@ import { useDict } from '@/utils/dict'
import { useRouter } from 'vue-router'
import useAppStore from '@/store/modules/app'
import usePermissionStore from '@/store/modules/permission'
const appStore = useAppStore()
const permissionStore = usePermissionStore()
const router = useRouter()
const { proxy } = getCurrentInstance()
......@@ -129,7 +135,19 @@ const handleEditField = (field) => {
console.log('编辑字段', field)
}
const openDecrypt = ref(false)
function pageProjectManage() {
let filterMenus = appStore.navStatus.type === 'manage' ? appStore.allnavList.filter(item => item.type === '1') : appStore.allnavList.filter(item => item.type === '2')
// 设置导航菜单
appStore.setNav(filterMenus)
permissionStore.setSidebarRouters(filterMenus)
let type = appStore.navStatus.type === 'manage' ? 'project' : 'manage'
appStore.setNavStatus({type: type})
router.push({
path: '/projectManage'
})
......
src/views/EncryptionManagement/list.vue
......@@ -6,6 +6,11 @@ import QueryForm from './QueryForm.vue'
// import DownloadPluginDialog from './DownloadPluginDialog.vue'
// import ExportDialog from './ExportDialog.vue'
import { useRouter } from 'vue-router'
import useAppStore from '@/store/modules/app'
import usePermissionStore from '@/store/modules/permission'
const appStore = useAppStore()
const permissionStore = usePermissionStore()
const router = useRouter()
const emit = defineEmits(['page'])
const { proxy } = getCurrentInstance()
......@@ -48,8 +53,18 @@ function getList() {
}
function pageProjectManage() {
let filterMenus = appStore.navStatus.type === 'manage' ? appStore.allnavList.filter(item => item.type === '1') : appStore.allnavList.filter(item => item.type === '2')
// 设置导航菜单
appStore.setNav(filterMenus)
permissionStore.setSidebarRouters(filterMenus)
let type = appStore.navStatus.type === 'manage' ? 'project' : 'manage'
appStore.setNavStatus({type: type})
router.push({
path: '/projectManage'
})
......
src/views/index.vue
......@@ -26,6 +26,13 @@
@click="goTarget('http://ruoyi.vip')"
>访问主页</el-button
>
<el-button
icon="HomeFilled"
plain
@click="checkMenuType"
>区分路由</el-button
>
</p>
</el-col>
......@@ -1058,11 +1065,35 @@
</template>
<script setup name="Index">
import useAppStore from '@/store/modules/app'
import usePermissionStore from '@/store/modules/permission'
const appStore = useAppStore()
const permissionStore = usePermissionStore()
const version = ref('3.9.0')
function goTarget(url) {
window.open(url, '__blank')
}
function checkMenuType() {
console.log('appStore.navStatus',appStore.navStatus.type)
let filterMenus = appStore.navStatus.type === 'manage' ? appStore.allnavList.filter(item => item.type === '1') : appStore.allnavList.filter(item => item.type === '2')
// 设置导航菜单
appStore.setNav(filterMenus)
permissionStore.setSidebarRouters(filterMenus)
let type = appStore.navStatus.type === 'manage' ? 'project' : 'manage'
appStore.setNavStatus({type: type})
}
</script>
<style scoped lang="scss">
......
src/views/login.vue
......@@ -71,9 +71,14 @@ import { sm4 as SM4 } from 'gm-crypt'
import { encrypt, decrypt } from "@/utils/jsencrypt"
import useUserStore from '@/store/modules/user'
import useAppStore from '@/store/modules/app'
import usePermissionStore from '@/store/modules/permission'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const permissionStore = usePermissionStore()
const title = import.meta.env.VITE_APP_TITLE
const userStore = useUserStore()
const appStore = useAppStore()
......@@ -155,9 +160,17 @@ function handleLogin() {
}
try {
await appStore.signOut('login')
let filterMenus = appStore.navStatus.type === 'manage' ? menus.filter(item => item.type === '1') : menus.filter(item => item.type === '2')
// 设置导航菜单
appStore.setNav({ menus: data.menus })
appStore.setNav(filterMenus)
appStore.setallNav(menus)
console.log('menus',filterMenus)
permissionStore.allsidebarRouters(menus)
permissionStore.setSidebarRouters(filterMenus)
// 设置用户信息
appStore.setUserInfo({user, licenseRst: data.licenseRst, loginBlankMenus})
......@@ -177,7 +190,6 @@ function handleLogin() {
return acc
}, {})
console.log('路由配置:', router.getRoutes())
router.push({ path:"/index", query: otherQueryParams })
// router.push({ path: redirect.value || "/index", query: otherQueryParams })
......
src/views/projectHome/index.vue
......@@ -14,6 +14,15 @@ import neicun from '@/assets/images/project/neicun.png'
import rateChart from './modules/rateChart.vue'
import DiskUsageChart from './modules/DiskUsageChart.vue'
import { useRouter } from 'vue-router'
import useAppStore from '@/store/modules/app'
import usePermissionStore from '@/store/modules/permission'
const appStore = useAppStore()
const permissionStore = usePermissionStore()
const router = useRouter()
const { proxy } = getCurrentInstance()
......@@ -73,6 +82,17 @@ getInfo()
function pageProjectManage() {
let filterMenus = appStore.navStatus.type === 'manage' ? appStore.allnavList.filter(item => item.type === '1') : appStore.allnavList.filter(item => item.type === '2')
// 设置导航菜单
appStore.setNav(filterMenus)
permissionStore.setSidebarRouters(filterMenus)
let type = appStore.navStatus.type === 'manage' ? 'project' : 'manage'
appStore.setNavStatus({type: type})
router.push({
path: '/projectManage'
})
......
src/views/ruleConfig/Algorithm/modules/formModule.vue
......@@ -97,7 +97,7 @@ const formConfirm = (val) => {
right: 0;
}
.btn {
padding: 20px 20px 20px 100px;
padding: 20px;
display: flex;
justify-content: center;
}
......
src/views/ruleConfig/CalculationMethod/index.vue 0 → 100644
<script setup name="CalculationMethod">
import { onMounted, ref, toRefs } from 'vue'
import { Split } from 'view-ui-plus';
import CollapseView from '@/components/CollapseView/index.vue'
import formModule from './modules/formModule.vue'
import ModalPop from "@/components/EditPop/ModalPop.vue"
const splitNum = ref(0.31) // 左右分割比例
const collapseList = ref([])
const data = reactive({
formEdit: {
name: "",
},
formAdd: {
name: "",
}
});
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>
<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 38px 10px 0;width: 100%;overflow: auto;height: 100%;">
<el-input class="mb20" placeholder="加密算法搜索">
<template #suffix>
<el-icon style="vertical-align: middle;">
<search />
</el-icon>
</template>
</el-input>
<CollapseView :list="collapseList" @add="collapseAdd" @childDelete="collapseDelete" @change="collapseChange" />
</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;">加密算法</span>
</div>
<div class="right-content">
<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>
<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;
display: flex;
align-items: center;
font-weight: 700;
color: #515a6e;
}
&-content {
padding: 10px 0px;
width: 80%;
margin: 20px auto;
.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
src/views/ruleConfig/CalculationMethod/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";
const props = defineProps<{
modelValue: boolean;
type: string;
}>();
const emit = defineEmits(["update:modelValue", 'cancel','confirm']);
const data = reactive({
rules: {},
});
const { rules } = toRefs(data);
const readOnly = ref(true);
watch(
() => props.type,
(newVal) => {
readOnly.value = props.type === 'edit' ? true : false;
},
{ deep: true, immediate: true }
);
// 取消
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')
}
</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" placeholder="请输入算法名称"></el-input>
</el-form-item>
<el-form-item label="加密规则" required>
<div style="width: 100%;background: #F3F5FA;">
<el-select v-model="modelValue.name">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</el-form-item>
<el-form-item label="密钥" required>
<div style="width: 100%;background: #F3F5FA;">
<el-select v-model="modelValue.name">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</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>
</div>
</template>
<style lang="scss" scoped>
.openEditor {
position: absolute;
bottom: 0;
right: 0;
}
.btn {
padding: 20px;
display: flex;
justify-content: center;
}
</style>
\ No newline at end of file
src/views/ruleConfig/Dictionary/index.vue 0 → 100644
<script setup name="Dictionary">
import { onMounted, ref, toRefs } from 'vue'
import { Split } from 'view-ui-plus';
import ModalPop from "@/components/EditPop/ModalPop.vue"
import AddClass from './modules/AddClass.vue' // 分类
import AddValue from './modules/AddValue.vue' // 值
import uploadModule from './modules/uploadModule.vue' // 上传模块
const splitNum = ref(0.31) // 左右分割比例
const data = reactive({
queryParams: {
pageNum: 1,
pageSize: 10,
},
addClassForm: {
name: "",
},
addValueForm: {
name: "",
}
});
const { addClassForm, addValueForm, queryParams } = toRefs(data);
const total = ref(4)
const modalData = reactive({
show: false,
text: '',
icon: 'error',
cancel: false,
type: ''
})
const modalPopData = reactive({
show: false,
title: '',
type: '',
operation: ''
})
const tableData = ref([
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
},
])
// 新增关闭
const modalPopCancel = () => {
modalPopData.show = false
}
// 新增/编辑 分类
const addClassClick = (type, item) => {
modalPopData.operation = type
if (modalPopData.operation === 'add') {
addClassForm.value = {}
} else if (modalPopData.operation === 'edit') {
}
modalPopData.title = '字典分类'
modalPopData.type = 'class'
modalPopData.show = true
}
// 新增/编辑 值
const addValueClick = (type, item) => {
modalPopData.operation = type
if (modalPopData.operation === 'add') {
addValueForm.value = {}
} else if (modalPopData.operation === 'edit') {
}
modalPopData.title = '字典数据'
modalPopData.type = 'value'
modalPopData.show = true
}
// 删除值
const valueDelete = (item) => {
console.log('删除值', item)
modalData.type = 'value'
modalData.icon = 'error'
modalData.text = '删除后无法恢复，是否确认删除[' + item.name + ']?'
modalData.show = true
}
// 删除分类
const classDelete = (item) => {
console.log('删除分类事件', item)
modalData.type = 'class'
modalData.icon = 'error'
modalData.text = '删除后无法恢复，是否确认删除[' + item.name + ']?'
modalData.show = true
}
// 提示回调
const modalConfirm = () => {
if (modalData.type === 'class') {
console.log('删除分类确认')
} else if (modalData.type === 'value') {
console.log('删除值确认')
}
modalData.show = false
}
// 分类查看
const classView = (item) => {
// editDomainForm.value = item
}
// 新增确认
const AddDomainConfirm = (item) => {
if (modalPopData.type === 'class') {
console.log('新增分类确认', item)
} else if (modalPopData.type === 'value') {
console.log('新增值确认', item)
} else if (modalPopData.type === 'upload') {
console.log('导入', item)
}
modalPopData.show = false
}
// 导入功能
const importClick = () => {
modalPopData.title = '上传文件'
modalPopData.type = 'upload'
modalPopData.show = true
}
// 获取列表数据
const getList = () => {
}
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="left">
<div class="mb20" style="display: flex;flex-direction: row-reverse;">
<el-button icon="Plus" type="primary" @click="addClassClick('add')">新增分类</el-button>
</div>
<div style="width: 100%;flex: 1;overflow: auto;">
<el-scrollbar>
<div class="left_item" @click="classView">
<span>单姓1(1)</span>
<div class="left_item_btn">
<el-icon :size="16" @click.stop="addClassClick('edit')">
<edit />
</el-icon>
<el-icon :size="16" style="margin-left: 10px;" @click.stop="classDelete">
<delete />
</el-icon>
</div>
</div>
</el-scrollbar>
</div>
</div>
</template>
<template #right>
<div class="right">
<div style="display: flex;justify-content: space-between;">
<el-form-item label="值：">
<el-input placeholder="" v-model="input3" class="input-with-select">
<template #append>
<el-button icon="Search"></el-button>
</template>
</el-input>
</el-form-item>
<div style="display: flex;">
<el-button icon="Upload" type="primary" @click="importClick">导入</el-button>
<el-button icon="Download" type="success">导出</el-button>
<el-button icon="Plus" type="primary" @click="addValueClick('add')">新增值</el-button>
</div>
</div>
<el-table :data="tableData" stripe style="width: 100%;flex:1;">
<el-table-column prop="date" label="分类" align="center"></el-table-column>
<el-table-column prop="name" label="分类编码" align="center"></el-table-column>
<el-table-column prop="address" label="值" align="center"></el-table-column>
<el-table-column prop="address" label="名称" align="center"></el-table-column>
<el-table-column prop="address" label="父值" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button type="primary" link @click="addValueClick('edit')">编辑</el-button>
<el-divider direction="vertical"></el-divider>
<el-button type="danger" link @click="valueDelete">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:isTextShow="true"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
</Split>
</div>
<!-- 提示框 -->
<Modal v-model="modalData.show" :icon="modalData.icon" :cancel="modalData.cancel" :text="modalData.text"
@confirm="modalConfirm"></Modal>
<!-- 新增分类 / 新增值 -->
<ModalPop :width="'600'" v-model="modalPopData.show" :title="modalPopData.title" @cancel="modalPopCancel">
<template #content>
<AddClass v-model="addClassForm" :type="modalPopData.operation" @cancel="modalPopCancel" @confirm="AddDomainConfirm"
v-if="modalPopData.type === 'class'" />
<AddValue v-model="addValueForm" :type="modalPopData.operation" @cancel="modalPopCancel" @confirm="AddDomainConfirm"
v-if="modalPopData.type === 'value'" />
<uploadModule @cancel="modalPopCancel" @confirm="AddDomainConfirm" v-if="modalPopData.type === 'upload'" />
</template>
</ModalPop>
</div>
</template>
<style lang="scss" scoped>
.app-container__body {
height: calc(
100vh - var(--navbar-height) - var(--container-pd) - var(--container-pd)
) !important;
.left {
display: flex;
flex-direction: column;
padding: 0 38px 10px 0;
width: 100%;
overflow: auto;
height: 100%;
.left_item {
position: relative;
height: 38px;
line-height: 38px;
border-bottom: 1px solid #dce5eb;
padding: 0 10px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
cursor: pointer;
font-size: 14px;
color: #7a8495;
.left_item_btn {
position: absolute;
right: 8px;
top: 2px;
z-index: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}
}
.left_item:hover {
.left_item_btn {
z-index: 10;
opacity: 1;
}
}
.active {
background: #f4faff;
}
}
.right {
padding-left: 36px;
height: 100%;
display: flex;
flex-direction: column;
:deep(.el-table .el-table__header-wrapper th){
background-color: #e9f5fe !important;
color: #2c9ef7;
}
}
}
</style>
\ No newline at end of file
src/views/ruleConfig/Dictionary/modules/AddClass.vue 0 → 100644
<script setup lang="ts" name="AddClass">
import { onMounted, reactive, ref, toRefs, watch } from "vue";
const props = defineProps<{
modelValue: boolean;
type: string;
}>();
const emit = defineEmits(["update:modelValue", 'cancel','confirm']);
const data = reactive({
rules: {},
});
const { rules } = toRefs(data);
// 取消
const cancel = () => {
if (props.type === 'edit') {
}else if (props.type === 'add') {
}
emit('cancel')
}
const confirm = () => {
if (props.type === 'edit') {
}
emit('confirm')
}
</script>
<template>
<div>
<el-form ref="formRef" :model="modelValue" label-width="100px">
<el-form-item label="字典分类" required>
<el-input v-model="modelValue.name" placeholder="请输入字典分类"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="modelValue.name" placeholder="请输入备注" rows="2" maxlength="200" show-word-limit></el-input>
</el-form-item>
</el-form>
<div class="btn">
<el-button type="info" style="width: 150px;" @click="cancel">取消</el-button>
<el-button type="primary" style="width: 150px;" @click="confirm">确认</el-button>
</div>
</div>
</template>
<style lang="scss" scoped>
.btn {
padding: 20px;
display: flex;
justify-content: center;
}
</style>
\ No newline at end of file
src/views/ruleConfig/Dictionary/modules/AddValue.vue 0 → 100644
<script setup lang="ts" name="AddValue">
import { onMounted, reactive, ref, toRefs, watch } from "vue";
const props = defineProps<{
modelValue: boolean;
type: string;
}>();
const emit = defineEmits(["update:modelValue", 'cancel', 'confirm']);
const data = reactive({
rules: {},
});
const { rules } = toRefs(data);
// 取消
const cancel = () => {
if (props.type === 'edit') {
} else if (props.type === 'add') {
}
emit('cancel')
}
const confirm = () => {
if (props.type === 'edit') {
} else if (props.type === 'add') {
}
emit('confirm')
}
</script>
<template>
<div>
<el-form ref="formRef" :model="modelValue" label-width="70px" :disabled="readOnly">
<el-form-item label="字典分类">
<el-select v-model="modelValue.name" v-if="!readOnly" placeholder="请选择字典分类">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="值" required>
<el-input v-model="modelValue.name" placeholder="请输入值"></el-input>
</el-form-item>
<el-form-item label="名称" required>
<el-input v-model="modelValue.name" placeholder="请输入名称"></el-input>
</el-form-item>
<el-form-item label="父值" required>
<el-input v-model="modelValue.name" placeholder="请输入父值"></el-input>
</el-form-item>
</el-form>
<div class="btn">
<el-button type="info" style="width: 150px;" @click="cancel">取消</el-button>
<el-button type="primary" style="width: 150px;" @click="confirm">确认</el-button>
</div>
</div>
</template>
<style lang="scss" scoped>
.btn {
padding: 20px;
display: flex;
justify-content: center;
}
</style>
\ No newline at end of file
src/views/ruleConfig/Dictionary/modules/UploadModule.vue 0 → 100644
<script setup lang="ts" name="AddClass">
import { ref } from "vue";
import CustomUpload from "@/components/CustomUpload/index.vue"
const emit = defineEmits(["update:modelValue", "cancel", "confirm"]);
const radioValue = ref(1);
const fileList = ref<File[]>([]);
// 取消
const cancel = () => {
emit("cancel");
};
// 确认
const confirm = () => {
console.log(fileList.value);
// emit("confirm");
};
const handleUpload = (file: File) => {
console.log(file);
// 上传文件
// 处理上传结果
// 更新modelValue
};
</script>
<template>
<div>
<div class="mb20">
<CustomUpload v-model:file-list="fileList" :limit="1" :needType="false" :needSize="false" :listShow="false" prompt='点击或拖拽文件到此处上传' />
</div>
<el-form-item label="上传方式" label-width="200px">
<el-radio-group v-model="radioValue">
<el-radio :label="1">覆盖原数据</el-radio>
<el-radio :label="2">追加数据</el-radio>
</el-radio-group>
</el-form-item>
<div class="btn">
<el-button type="info" style="width: 150px;" @click="cancel">取消</el-button>
<el-button type="primary" style="width: 150px;" @click="confirm">确认</el-button>
</div>
</div>
</template>
<style lang="scss" scoped>
.btn {
padding: 20px;
display: flex;
justify-content: center;
}
</style>
\ No newline at end of file
src/views/ruleConfig/Dictionary/知识库.md 0 → 100644
++ "b/src/views/ruleConfig/Dictionary/\347\237\245\350\257\206\345\272\223.md"
src/views/ruleConfig/Discover/index.vue 0 → 100644
<script setup name="Discover">
import { onMounted, ref, toRefs } from 'vue'
import { Split } from 'view-ui-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"
const splitNum = ref(0.31) // 左右分割比例
const collapseList = ref([])
const data = reactive({
editDomainForm: {
name: "",
},
addDomainForm: {
name: "",
},
editRulesForm: {
name: "",
},
addRulesForm: {
name: "",
}
});
const { editDomainForm, addDomainForm, editRulesForm, addRulesForm } = toRefs(data);
const rightType = ref('domain') // 右侧展示类型
const modalData = reactive({
show: false,
text: '',
icon: 'error',
cancel: true,
type: ''
})
const modalPopData = reactive({
show: false,
title: '',
type: 'domain'
})
// 获取数据
const getCollapse = () => {
const data = [
{
name: '测试数据域',
list: [
{
name: '按混合证件号字段查询'
}
]
},
{
name: '通用规则',
list: [
{
name: 'aaaaa'
},
{
name: 'bbbbb'
}
]
},
{
name: '解密数据',
list: []
}
]
collapseList.value = data.map(item => {
const list = item.list.map(itemTwo => {
return {
...itemTwo,
isCheck: true,
isDelete: true,
}
})
return {
...item,
list: list,
isAdd: true,
isView: true,
isDelete: true,
}
})
}
// 新增关闭
const modalPopCancel = () => {
modalPopData.show = false
}
// 新增数据域
const addDomainClick = (item) => {
console.log('新增数据域')
modalPopData.title = '新增数据域'
modalPopData.type = 'domain'
addDomainForm.value = {}
modalPopData.show = true
}
// 新增发现规则
const collapseAdd = (item) => {
console.log('新增发现规则', item)
modalPopData.title = '新增发现规则'
modalPopData.type = 'rules'
addRulesForm.value = {}
modalPopData.show = true
}
// 删除发现规则
const collapseDelete = (item) => {
console.log('删除发现规则', item)
modalData.type = 'rules'
modalData.cancel = true
modalData.icon = 'error'
modalData.text = '删除后无法恢复，是否确认删除[' + item.name + ']?'
modalData.show = true
}
// 删除数据域
const collapseMainDeletion = (item) => {
console.log('删除数据域事件', item)
modalData.type = 'domain'
modalData.cancel = false
modalData.icon = 'error'
modalData.text = '删除后无法恢复，是否确认删除[' + item.name + ']?'
modalData.show = true
}
// 提示回调
const modalConfirm = () => {
if (modalData.type === 'domain') {
console.log('删除数据域确认')
} else if (modalData.type === 'rules') {
console.log('删除发现规则确认')
} else if (modalData.type === 'default') {
console.log('设置默认项')
}
modalData.show = false
}
// 数据域查看
const collapseView = (item) => {
editDomainForm.value = item
rightType.value = 'domain'
}
// 规则点击监听
const collapseChange = (item) => {
editRulesForm.value = item
rightType.value = 'rules'
}
// 发现规则设置默认项
const collapseDefault = (item) => {
modalData.type = 'default'
modalData.cancel = false
modalData.icon = 'error'
modalData.text = '确定设置[' + item.name + ']为默认规则?'
modalData.show = true
}
// 新增确认
const AddDomainConfirm = (item) => {
if (modalPopData.type === 'domain') {
console.log('新增数据域确认', item)
} else if (modalPopData.type === 'rules') {
console.log('新增发现规则确认', item)
}
modalPopData.show = false
}
onMounted(() => {
getCollapse()
})
</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 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="数据域名称搜索">
<template #suffix>
<el-icon style="vertical-align: middle;">
<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" />
</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">
<AddDomain v-model="editDomainForm" type="edit" v-if="rightType === 'domain'" />
<AddRules v-model="editRulesForm" type="edit" v-if="rightType === 'rules'" />
</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 v-model="addDomainForm" type="add" @cancel="modalPopCancel" @confirm="AddDomainConfirm"
v-if="modalPopData.type === 'domain'" />
<AddRules v-model="addRulesForm" type="add" @cancel="modalPopCancel" @confirm="AddDomainConfirm"
v-if="modalPopData.type === 'rules'" />
</template>
</ModalPop>
</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;
display: flex;
align-items: center;
font-weight: 700;
color: #515a6e;
}
&-content {
padding: 10px 0px;
width: 80%;
margin: 20px auto;
}
}
}
</style>
\ No newline at end of file
src/views/ruleConfig/Discover/modules/AddDomain.vue 0 → 100644
<script setup lang="ts" name="AddDomain">
import { onMounted, reactive, ref, toRefs, watch } from "vue";
const props = defineProps<{
modelValue: boolean;
type: string;
}>();
const emit = defineEmits(["update:modelValue", 'cancel','confirm']);
const data = reactive({
rules: {},
});
const { rules } = toRefs(data);
const readOnly = ref(true);
watch(
() => props.type,
(newVal) => {
readOnly.value = props.type === 'edit' ? true : false;
},
{ deep: true, immediate: true }
);
// 取消
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')
}
</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" :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-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>
</div>
</template>
<style lang="scss" scoped>
.btn {
padding: 20px;
display: flex;
justify-content: center;
}
</style>
\ No newline at end of file
src/views/ruleConfig/Discover/modules/AddRules.vue 0 → 100644
<script setup lang="ts" name="AddRules">
import { onMounted, reactive, ref, toRefs, watch } from "vue";
import { Switch } from "view-ui-plus";
const props = defineProps<{
modelValue: boolean;
type: string;
}>();
const emit = defineEmits(["update:modelValue", "cancel", "confirm"]);
const data = reactive({
rules: {},
});
const { rules } = toRefs(data);
const readOnly = ref(true);
const radio = ref(1);
const radioOptions = ref([
{
label: "正则表达式",
value: 1,
},
{
label: "自定义方法",
value: 2,
},
{
label: "字典发现",
value: 3,
},
]);
watch(
() => props.type,
(newVal) => {
readOnly.value = props.type === "edit" ? true : false;
},
{ deep: true, immediate: true }
);
// 取消
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");
};
</script>
<template>
<div>
<el-form ref="formRef" :model="modelValue" label-width="110px" :disabled="readOnly">
<el-form-item label="发现规则名" required>
<el-input v-model="modelValue.name" :placeholder="!readOnly ? '请输入发现规则名' : ''"></el-input>
</el-form-item>
<el-form-item label="数据域">
<div>{{ modelValue.name }}</div>
</el-form-item>
<el-form-item label="发现方式" required>
<div style="width: 100%;background: #F3F5FA;">
<el-input v-model="modelValue.name" v-if="readOnly"></el-input>
<el-select v-model="modelValue.name" v-if="!readOnly">
<el-option v-for="item in options" :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="radio">
<el-radio :label="item.value" v-for="(item,index) in radioOptions" :key="index">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="正则表达式" required v-if="radio === 1">
<el-input v-model="modelValue.name" :placeholder="!readOnly ? '请输入正则表达式' : ''"></el-input>
</el-form-item>
<el-form-item label="JAVA方法" required v-if="radio === 2">
<el-input v-model="modelValue.name" :placeholder="!readOnly ? '请输入JAVA方法' : ''"></el-input>
</el-form-item>
<el-form-item label="字典分类" required v-if="radio === 3">
<div style="width: 100%;background: #F3F5FA;">
<el-input v-model="modelValue.name" v-if="readOnly"></el-input>
<el-select v-model="modelValue.name" v-if="!readOnly">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</el-form-item>
<el-form-item label="匹配方式" required v-if="radio === 3">
<div style="width: 100%;background: #F3F5FA;">
<el-input v-model="modelValue.name" v-if="readOnly"></el-input>
<el-select v-model="modelValue.name" v-if="!readOnly">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</el-form-item>
<el-form-item label="样例" required>
<el-input v-model="modelValue.name" :placeholder="!readOnly ? '请输入样例' : ''"></el-input>
</el-form-item>
<el-form-item label="测试">
<div style="width: 100%;display: flex;align-items: center;">
<el-input v-model="modelValue.name" style="flex: 1;" :placeholder="!readOnly ? '请输入测试' : ''"></el-input>
<el-button type="primary">测试</el-button>
</div>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="modelValue.name" :placeholder="!readOnly ? '请输入备注' : ''"></el-input>
</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>
</div>
</template>
<style lang="scss" scoped>
.el-form-item {
margin-bottom: 8px;
}
.btn {
padding: 20px;
display: flex;
justify-content: center;
}
</style>
\ No newline at end of file
src/views/ruleConfig/Discover/发现规则.md 0 → 100644
++ "b/src/views/ruleConfig/Discover/\345\217\221\347\216\260\350\247\204\345\210\231.md"
src/views/ruleConfig/Encryption/index.vue 0 → 100644
<script setup name="Discover">
import { onMounted, ref, toRefs } from 'vue'
import { Split } from 'view-ui-plus';
import CollapseView from '@/components/CollapseView/index.vue'
import AddEncryption from './modules/AddEncryption.vue' // 加密表单
import AddKey from './modules/AddKey.vue' // 密钥表单
import ModalPop from "@/components/EditPop/ModalPop.vue"
const splitNum = ref(0.31) // 左右分割比例
const collapseList = ref([])
const data = reactive({
editEncryptionForm: {
name: "",
},
addEncryptionForm: {
name: "",
},
editKeyForm: {
name: "",
},
addKeyForm: {
name: "",
}
});
const { editEncryptionForm, addEncryptionForm, editKeyForm, addKeyForm } = toRefs(data);
const rightType = ref('encryption') // 右侧展示类型
const modalData = reactive({
show: false,
text: '',
icon: 'error',
cancel: true,
type: ''
})
const modalPopData = reactive({
show: false,
title: '',
type: 'encryption'
})
// 获取数据
const getCollapse = () => {
const data = [
{
name: '测试加密',
list: [
{
name: '按混合证件号字段查询'
}
]
},
{
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: true,
isDelete: true,
}
})
}
// 新增关闭
const modalPopCancel = () => {
modalPopData.show = false
}
// 新增加密
const addDomainClick = (item) => {
console.log('新增加密')
modalPopData.title = '新增加密'
modalPopData.type = 'encryption'
addEncryptionForm.value = {}
modalPopData.show = true
}
// 新增密钥
const collapseAdd = (item) => {
console.log('新增密钥', item)
modalPopData.title = '新增密钥'
modalPopData.type = 'key'
addKeyForm.value = {}
modalPopData.show = true
}
// 删除密钥
const collapseDelete = (item) => {
console.log('删除密钥', item)
modalData.type = 'key'
modalData.cancel = true
modalData.icon = 'error'
modalData.text = '删除后无法恢复，是否确认删除[' + item.name + ']?'
modalData.show = true
}
// 删除加密
const collapseMainDeletion = (item) => {
console.log('删除加密事件', item)
modalData.type = 'encryption'
modalData.cancel = false
modalData.icon = 'error'
modalData.text = '删除后无法恢复，是否确认删除[' + item.name + ']?'
modalData.show = true
}
// 提示回调
const modalConfirm = () => {
if (modalData.type === 'encryption') {
console.log('删除加密确认')
} else if (modalData.type === 'key') {
console.log('删除密钥确认')
} else if (modalData.type === 'default') {
console.log('设置默认项')
}
modalData.show = false
}
// 加密查看
const collapseView = (item) => {
editEncryptionForm.value = item
rightType.value = 'encryption'
}
// 规则点击监听
const collapseChange = (item) => {
editKeyForm.value = item
rightType.value = 'key'
}
// 新增确认
const AddDomainConfirm = (item) => {
if (modalPopData.type === 'encryption') {
console.log('新增加密确认', item)
} else if (modalPopData.type === 'key') {
console.log('新增密钥确认', item)
}
modalPopData.show = false
}
onMounted(() => {
getCollapse()
})
</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 38px 10px 0;width: 100%;overflow: auto;height: 100%;">
<div class="mb20" style="display: flex;flex-direction: row-reverse;">
<el-button icon="Upload" type="success">恢复</el-button>
<el-button class="mr10" icon="Download" type="primary">备份</el-button>
</div>
<div class="mb20" style="display: flex;align-items: center;justify-content: space-between;">
<el-input class="mr20" placeholder="加密方式搜索">
<template #suffix>
<el-icon style="vertical-align: middle;">
<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" />
</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 === 'encryption' ? '加密定义' : '密钥定义' }}</span>
</div>
<div class="right-content">
<AddEncryption v-model="editEncryptionForm" type="edit" v-if="rightType === 'encryption'" />
<AddKey v-model="editKeyForm" type="edit" v-if="rightType === 'key'" />
</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="'850'" v-model="modalPopData.show" :title="modalPopData.title" @cancel="modalPopCancel">
<template #content>
<AddEncryption v-model="addEncryptionForm" type="add" @cancel="modalPopCancel" @confirm="AddDomainConfirm"
v-if="modalPopData.type === 'encryption'" />
<AddKey v-model="addKeyForm" type="add" @cancel="modalPopCancel" @confirm="AddDomainConfirm"
v-if="modalPopData.type === 'key'" />
</template>
</ModalPop>
</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;
display: flex;
align-items: center;
font-weight: 700;
color: #515a6e;
}
&-content {
padding: 10px 0px;
width: 80%;
margin: 20px auto;
}
}
}
</style>
\ No newline at end of file
src/views/ruleConfig/Encryption/modules/AddEncryption.vue 0 → 100644
<script setup lang="ts" name="AddDomain">
import { onMounted, reactive, ref, toRefs, watch } from "vue";
const props = defineProps<{
modelValue: boolean;
type: string;
}>();
const emit = defineEmits(["update:modelValue", 'cancel','confirm']);
const data = reactive({
rules: {},
});
const { rules } = toRefs(data);
const readOnly = ref(true);
watch(
() => props.type,
(newVal) => {
readOnly.value = props.type === 'edit' ? true : false;
},
{ deep: true, immediate: true }
);
// 取消
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')
}
</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>
<div style="width: 100%;background: #F3F5FA;">
<el-input v-model="modelValue.name" v-if="readOnly"></el-input>
<el-select v-model="modelValue.name" v-if="!readOnly">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" rows="4" v-model="modelValue.name"></el-input>
</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>
</div>
</template>
<style lang="scss" scoped>
.btn {
padding: 20px;
display: flex;
justify-content: center;
}
</style>
\ No newline at end of file
src/views/ruleConfig/Encryption/modules/AddKey.vue 0 → 100644
<script setup lang="ts" name="AddRules">
import { onMounted, reactive, ref, toRefs, watch } from "vue";
import { Switch } from "view-ui-plus";
const props = defineProps<{
modelValue: boolean;
type: string;
}>();
const emit = defineEmits(["update:modelValue", "cancel", "confirm"]);
const data = reactive({
rules: {},
});
const { rules } = toRefs(data);
const readOnly = ref(true);
const radio = ref(1);
const radioOptions = ref([
{
label: "正则表达式",
value: 1,
},
{
label: "自定义方法",
value: 2,
},
{
label: "字典发现",
value: 3,
},
]);
watch(
() => props.type,
(newVal) => {
readOnly.value = props.type === "edit" ? true : false;
},
{ deep: true, immediate: true }
);
// 取消
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");
};
</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="加密算法">
<el-input v-model="modelValue.name" disabled></el-input>
</el-form-item>
<el-form-item label="密钥值" required>
<div style="width: 100%;display: flex;align-items: center;">
<el-input v-model="modelValue.name" style="flex: 1;"></el-input>
<el-button type="primary" style="margin-left: 8px;" v-if="!readOnly">密钥生成</el-button>
</div>
</el-form-item>
<el-form-item label="测试">
<div style="width: 100%;display: flex;align-items: center;">
<el-input v-model="modelValue.name" style="flex: 1;"></el-input>
<el-button type="primary" style="margin-left: 8px;" v-if="!readOnly">测试</el-button>
</div>
</el-form-item>
<el-form-item label="加密后的值">
<el-input v-model="modelValue.name" disabled></el-input>
</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>
</div>
</template>
<style lang="scss" scoped>
.el-form-item {
margin-bottom: 8px;
}
.btn {
padding: 20px;
display: flex;
justify-content: center;
}
</style>
\ No newline at end of file
src/views/ruleConfig/Encryption/加密规则.md 0 → 100644
++ "b/src/views/ruleConfig/Encryption/\345\212\240\345\257\206\350\247\204\345\210\231.md"
src/views/ruleConfig/discoveryRule/index.vue deleted 100644 → 0
<script setup name="DiscoveryRule">
import { onMounted, ref, toRefs } from 'vue'
</script>
<template>
<div class="app-container scroller">
<PageTitle>
<template #title>
发现规则
</template>
</PageTitle>
<div class="app-container__body"></div>
</div>
</template>
<style lang="scss" scoped>
.app-container__body {
height: calc(
100vh - var(--navbar-height) - var(--container-pd) - var(--container-pd)
) !important;
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论