Skip to content

N
nse-ui
Commit 719e3ef7 by 周海峰
Options

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

parents f22f1112 7289be62
正在显示 包含 1646 行增加 和 962 行删除
src/api/home.js 0 → 100644
import request from '@/utils/request'
/**
* 获取数据信息
* @param {*} data
* @returns
*/
export function getHomePage(data) {
return request({
url: '/core/datasystem/getHomePage',
method: 'post',
data: data
})
}
\ No newline at end of file
src/api/ruleConfig/calculationMethod.js 0 → 100644
import request from '@/utils/request'
/**
* 加密算法 - 查询列表
* @param {*} data
* @returns
*/
export function query(data) {
return request({
url: '/core/dataareasecretkey/query',
method: 'post',
data: data
})
}
/**
* 加密算法 - 查询加密规则
* @param {*} data
* @returns
*/
export function queryenc(data) {
return request({
url: '/core/dataareasecretkey/queryenc',
method: 'post',
data: data
})
}
/**
* 加密算法 - 查询密钥
* @param {*} data
* @returns
*/
export function querysec(data) {
return request({
url: '/core/dataareasecretkey/querysec',
method: 'post',
data: data
})
}
/**
* 加密算法 - 新增算法
* @param {*} data
* @returns
*/
export function save(data) {
return request({
url: '/core/dataareasecretkey/save',
method: 'post',
data: data
})
}
/**
* 加密算法 - 删除算法
* @param {*} data
* @returns
*/
export function del(data) {
return request({
url: '/core/dataareasecretkey/delete',
method: 'post',
data: data
})
}
\ No newline at end of file
src/components/HomeCharts/index.vue
...@@ -4,15 +4,6 @@ import * as echarts from "echarts"; ...@@ -4,15 +4,6 @@ import * as echarts from "echarts";
const homeChartData: any = inject("homeChartData"); const homeChartData: any = inject("homeChartData");
const barChart = ref(); const barChart = ref();
const colorList =[
"#9c27b0",
"#00bcd4",
"#ff7800",
"#2598f3",
"#53b257",
"#2598f3",
"#9c27b0",
]
let myChart; let myChart;
watch( watch(
...@@ -77,7 +68,7 @@ watch( ...@@ -77,7 +68,7 @@ watch(
itemStyle: { itemStyle: {
normal: { normal: {
color: (params) => { color: (params) => {
return colorList[params.dataIndex] return generateRandomColors();
}, },
}, },
}, },
...@@ -103,6 +94,14 @@ watch( ...@@ -103,6 +94,14 @@ watch(
{ deep: true, immediate: true } { deep: true, immediate: true }
); );
const generateRandomColors = () => {
const hue = Math.floor(Math.random() * 360);
const saturation = Math.floor(Math.random() * 30) + 70;
const lightness = Math.floor(Math.random() * 20) + 40;
const color = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
return color;
}
onMounted(() => { onMounted(() => {
myChart = echarts.init(barChart.value); myChart = echarts.init(barChart.value);
}); });
......
src/views/desensitizationStrategy/DesensitizationStrategy/list.vue
...@@ -146,6 +146,7 @@ const toggleStatus = (row) => { ...@@ -146,6 +146,7 @@ const toggleStatus = (row) => {
</template> </template>
<template #buttons> <template #buttons>
<el-button <el-button
icon="Plus"
type="primary" type="primary"
@click="handleAdd" @click="handleAdd"
> >
......
src/views/projectManage/QueryForm.vue → src/views/discover/Discover/QueryForm.vue
...@@ -34,8 +34,7 @@ function onSearch() { ...@@ -34,8 +34,7 @@ function onSearch() {
// 重置 // 重置
function onReset(formRef: FormInstance) { function onReset(formRef: FormInstance) {
queryForm.value.projectName = '' queryForm.value.title = ''
queryForm.value.remark = ''
emit('reset', formRef) emit('reset', formRef)
} }
...@@ -49,20 +48,18 @@ function onReset(formRef: FormInstance) { ...@@ -49,20 +48,18 @@ function onReset(formRef: FormInstance) {
:model="queryForm" :model="queryForm"
@search="onSearch" @search="onSearch"
@reset="onReset"> @reset="onReset">
<el-form-item label="项目名称" prop="projectName"> <el-form-item label="发现任务名称" prop="title">
<el-input <el-input
v-model="queryForm.projectName" v-model="queryForm.title"
placeholder="请输入项目名称" placeholder="请输入发现任务名称"
clearable clearable
/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
v-model="queryForm.remark"
placeholder="请输入备注"
clearable
/> />
</el-form-item> </el-form-item>
</page-wrapper-search> </page-wrapper-search>
</template> </template>
......
src/views/discover/Discover/discoverProcess.vue 0 → 100644
<script setup name="DiscoverProcess">
import { getCurrentInstance, reactive, ref, toRefs } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import useAppStore from '@/store/modules/app'
import usePermissionStore from '@/store/modules/permission'
import { changeRoute } from '@/utils/switchRoute'
import WaterWaveChart from './modules/WaterWaveChart.vue'
// import AddDiscoveryDialog from './modules/AddDiscoveryDialog.vue' // 引入新增发现任务弹窗
const appStore = useAppStore()
const permissionStore = usePermissionStore()
const router = useRouter()
const emit = defineEmits(['page'])
const { proxy } = getCurrentInstance()
const props = defineProps({
discoverProcessData: {
type: Object,
default: () => ({})
}
})
function pageProjectManage() {
changeRoute()
router.push({
path: '/project/Project'
})
}
// 进度数据
const progress = ref(100) // 100% 进度
const completedCount = ref(20) // 已完成表数量
const totalCount = ref(20) // 总表数量
// 执行失败数据
const failureData = ref([
{
category: '数据连接',
severity: '高',
executeTime: '2025-08-23 10:30'
},
{
category: '权限验证',
severity: '中',
executeTime: '2025-08-23 10:25'
},
{
category: '资源限制',
severity: '低',
executeTime: '2025-08-23 10:20'
}
])
// 已完成数据
const completedData = ref([
{ discoveryNo: 1, tableName: 'gen_table', schema: 'ry', discoveryTime: '2025-08-23 04:15:23' },
{ discoveryNo: 2, tableName: 'gen_table_column', schema: 'ry', discoveryTime: '2025-08-23 04:15:24' },
{ discoveryNo: 3, tableName: 'sys_config', schema: 'ry', discoveryTime: '2025-08-23 04:15:25' },
{ discoveryNo: 4, tableName: 'sys_dept', schema: 'ry', discoveryTime: '2025-08-23 04:15:26' },
{ discoveryNo: 5, tableName: 'sys_dict_data', schema: 'ry', discoveryTime: '2025-08-23 04:15:27' },
{ discoveryNo: 6, tableName: 'sys_dict_type', schema: 'ry', discoveryTime: '2025-08-23 04:15:28' },
{ discoveryNo: 7, tableName: 'sys_job', schema: 'ry', discoveryTime: '2025-08-23 04:15:29' },
{ discoveryNo: 8, tableName: 'sys_job_log', schema: 'ry', discoveryTime: '2025-08-23 04:15:30' },
{ discoveryNo: 9, tableName: 'sys_logininfor', schema: 'ry', discoveryTime: '2025-08-23 04:15:31' },
{ discoveryNo: 10, tableName: 'sys_menu', schema: 'ry', discoveryTime: '2025-08-23 04:15:32' },
{ discoveryNo: 11, tableName: 'sys_notice', schema: 'ry', discoveryTime: '2025-08-23 04:15:33' },
{ discoveryNo: 12, tableName: 'sys_oper_log', schema: 'ry', discoveryTime: '2025-08-23 04:15:34' },
{ discoveryNo: 13, tableName: 'sys_post', schema: 'ry', discoveryTime: '2025-08-23 04:15:35' },
{ discoveryNo: 14, tableName: 'sys_role', schema: 'ry', discoveryTime: '2025-08-23 04:15:36' }
])
// 严重性标签类型
const getSeverityType = (severity) => {
const types = {
'高': 'danger',
'中': 'warning',
'低': 'info'
}
return types[severity] || 'info'
}
// 查看结果处理
const handleCatResult = () => {
console.log('查看详细结果')
emit('page','discoverResult')
}
</script>
<template>
<div class="app-container scroller">
<PageTitle :back="true" @back="pageProjectManage">
<template #title>
返回项目管理
</template>
</PageTitle>
<div class="app-container__body">
<div class="discovery-progress-container">
<div class="layout-container">
<!-- 左侧区域 -->
<div class="left-panel">
<!-- 水波纹进度图表 -->
<div class="chart-section">
<div class="chart-container">
<WaterWaveChart :usage="progress" color="#1890ff" />
</div>
<div>完成表数:{{ completedCount }}</div>
</div>
<!-- 执行失败表格 -->
<div class="failure-table-section">
<div class="section-header">
<span class="title">执行失败</span>
</div>
<el-table
:data="failureData"
style="width: 100%"
height="300px"
empty-text="暂无数据"
:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
>
<el-table-column prop="category" label="类别" min-width="120" />
<el-table-column prop="severity" label="严重性" min-width="100">
<template #default="{ row }">
<el-tag :type="getSeverityType(row.severity)" size="small">
{{ row.severity }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="executeTime" label="执行时间" min-width="140" />
</el-table>
</div>
</div>
<!-- 右侧区域 -->
<div class="right-panel">
<div class="completed-table-section">
<div class="section-header">
<span class="title">已完成</span>
<el-button
type="primary"
@click="handleCatResult"
>查看结果</el-button>
</div>
<el-table
:data="completedData"
height="600px"
style="width: 100%"
:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
empty-text="暂无数据"
>
<el-table-column prop="discoveryNo" label="发现序号" width="100" align="center" />
<el-table-column prop="tableName" label="发现表名" min-width="150" />
<el-table-column prop="schema" label="SCHEMA" width="100" />
<el-table-column prop="discoveryTime" label="发现时间" width="160" />
</el-table>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.flex-container {
display: flex;
}
.align-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.flex1 {
flex: 1;
}
.flex-wrap {
flex-direction: wrap;
}
.discovery-progress-container {
padding: 20px;
background: #f5f7fa;
// min-height: 100vh;
}
.layout-container {
display: flex;
gap: 20px;
// height: calc(100vh - 100px);
}
.left-panel {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
}
.right-panel {
flex: 1;
min-width: 0;
}
.chart-section {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
height: 300px;
display: flex;
align-items: center;
padding-right: 40px;
.chart-container {
height: 100%;
flex: 1;
}
}
.failure-table-section,
.completed-table-section {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
flex: 1;
display: flex;
flex-direction: column;
}
.section-header {
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: space-between;
.title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
}
// // 表格样式调整
// :deep(.el-table) {
// border-radius: 4px;
// overflow: hidden;
// // .el-table__header-wrapper {
// // th {
// // background: #f0f7ff;
// // font-weight: 600;
// // }
// // }
// .el-table__body-wrapper {
// .el-table__row {
// &:nth-child(even) {
// background-color: #fafafa;
// }
// &:hover {
// background-color: #f5f7fa;
// }
// }
// }
// }
// // 右侧表格特殊样式
// .completed-table-section {
// :deep(.el-table) {
// .el-table__header-wrapper {
// th {
// background: #1890ff;
// // color: white;
// }
// }
// }
// }
// // 响应式设计
// @media (max-width: 1200px) {
// .layout-container {
// flex-direction: column;
// height: auto;
// }
// .left-panel,
// .right-panel {
// flex: none;
// }
// }
</style>
\ No newline at end of file
src/views/projectManage/index.vue → src/views/discover/Discover/index.vue
<script setup lang="ts" name="projectManageIndex"> <script setup lang="ts" name="projectManageIndex">
import { ref } from 'vue' import { ref } from 'vue'
import list from './list.vue' import list from './list.vue'
import discoverProcess from './discoverProcess.vue'
import discoverResult from './discoverResult.vue'
const widget = { const widget = {
list: list list: list,
discoverProcess: discoverProcess,
discoverResult: discoverResult
} }
const page = ref('list') const page = ref('list')
......
src/views/discover/Discover/modules/DomainRuleDialog.vue 0 → 100644
<template>
<el-dialog
v-model="dialogVisible"
title="设置数据域与字段发现规则"
width="700px"
:before-close="handleClose"
>
<div class="domain-rule-dialog">
<!-- 搜索区域 -->
<div class="search-section">
<el-input
v-model="domainSearch"
placeholder="请输入数据域名称"
size="small"
prefix-icon="Search"
clearable
/>
</div>
<div class="content-section">
<!-- 左侧数据域列表 -->
<div class="domain-list">
<div class="section-title">选择数据域</div>
<div class="list-container">
<el-radio-group v-model="selectedDomain" @change="handleDomainChange">
<div
v-for="domain in filteredDomains"
:key="domain.value"
class="domain-item"
>
<el-radio :label="domain.value">
{{ domain.label }}
</el-radio>
</div>
</el-radio-group>
</div>
</div>
<!-- 右侧字段发现规则 -->
<div class="rule-list">
<div class="section-title">选择字段发现规则</div>
<div class="list-container">
<el-radio-group v-model="selectedRule">
<div
v-for="rule in currentRules"
:key="rule.value"
class="rule-item"
>
<el-radio :label="rule.value">
{{ rule.label }}
</el-radio>
</div>
</el-radio-group>
</div>
</div>
</div>
<!-- 底部按钮 -->
<div class="dialog-footer">
<el-button @click="handleReset">重置规则</el-button>
<el-button type="primary" @click="handleConfirm">确定规则</el-button>
</div>
</div>
</el-dialog>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
const props = defineProps({
// 已选择的规则数据 { domain: '', rule: '' }
selectedData: {
type: Object,
default: () => ({})
}
})
const emit = defineEmits(['update:modelValue', 'confirm'])
const dialogVisible = computed({
get: () => props.modelValue,
set: (value) => emit('update:modelValue', value)
})
const domainSearch = ref('')
const selectedDomain = ref('')
const selectedRule = ref('')
// 数据域选项（根据图片内容）
const domains = ref([
{ value: 'general', label: '通用规则' },
{ value: 'decrypt', label: '解密数据' },
{ value: 'mixed_id', label: '混合证件号' },
{ value: 'email', label: '电子邮件' },
{ value: 'social_security', label: '社保卡号' },
{ value: 'business_license', label: '营业执照' },
{ value: 'postal_code', label: '邮政编码' },
{ value: 'chinese_address', label: '中文地址' },
{ value: 'mixed_phone', label: '混合电话号码' },
{ value: 'name', label: '姓名' },
{ value: 'bank_card', label: '银行卡号' },
{ value: 'ip_address', label: 'IP地址' }
])
// 字段发现规则映射
const rulesMapping = {
general: [
{ value: 'general_rule_1', label: '通用规则查询' },
{ value: 'general_rule_2', label: '通用数据发现' }
],
decrypt: [
{ value: 'decrypt_rule_1', label: '解密数据查询' },
{ value: 'decrypt_rule_2', label: '数据解密规则' }
],
mixed_id: [
{ value: 'mixed_id_rule_1', label: '按混合证件号字段查询' }
],
email: [
{ value: 'email_rule_1', label: '邮箱字段查询' },
{ value: 'email_rule_2', label: '电子邮件规则' }
],
social_security: [
{ value: 'ss_rule_1', label: '社保卡号查询' }
],
business_license: [
{ value: 'bl_rule_1', label: '营业执照查询' }
],
postal_code: [
{ value: 'pc_rule_1', label: '邮政编码查询' }
],
chinese_address: [
{ value: 'address_rule_1', label: '中文地址查询' }
],
mixed_phone: [
{ value: 'phone_rule_1', label: '混合电话查询' }
],
name: [
{ value: 'name_rule_1', label: '姓名字段查询' }
],
bank_card: [
{ value: 'bank_rule_1', label: '银行卡号查询' }
],
ip_address: [
{ value: 'ip_rule_1', label: 'IP地址查询' }
]
}
// 过滤后的数据域列表
const filteredDomains = computed(() => {
if (!domainSearch.value) return domains.value
return domains.value.filter(domain =>
domain.label.toLowerCase().includes(domainSearch.value.toLowerCase())
)
})
// 当前选中的数据域对应的规则
const currentRules = computed(() => {
return rulesMapping[selectedDomain.value] || []
})
// 打开弹窗时初始化
const initDialog = () => {
if (props.selectedData.domain) {
selectedDomain.value = props.selectedData.domain
selectedRule.value = props.selectedData.rule || ''
} else {
// 默认选择第一个数据域和第一个规则
selectedDomain.value = domains.value[0]?.value || ''
if (selectedDomain.value && currentRules.value.length > 0) {
selectedRule.value = currentRules.value[0].value
}
}
}
// 处理数据域变化
const handleDomainChange = (domainValue) => {
if (rulesMapping[domainValue] && rulesMapping[domainValue].length > 0) {
selectedRule.value = rulesMapping[domainValue][0].value
} else {
selectedRule.value = ''
}
}
// 重置规则
const handleReset = () => {
selectedDomain.value = domains.value[0]?.value || ''
if (selectedDomain.value && currentRules.value.length > 0) {
selectedRule.value = currentRules.value[0].value
}
domainSearch.value = ''
}
// 确定规则
const handleConfirm = () => {
if (!selectedDomain.value) {
ElMessage.warning('请选择数据域')
return
}
if (!selectedRule.value) {
ElMessage.warning('请选择字段发现规则')
return
}
const selectedDomainObj = domains.value.find(d => d.value === selectedDomain.value)
const selectedRuleObj = currentRules.value.find(r => r.value === selectedRule.value)
emit('confirm', {
domain: selectedDomain.value,
domainLabel: selectedDomainObj?.label || '',
rule: selectedRule.value,
ruleLabel: selectedRuleObj?.label || ''
})
dialogVisible.value = false
}
// 关闭弹窗
const handleClose = () => {
dialogVisible.value = false
}
// 监听弹窗显示状态
watch(dialogVisible, (newVal) => {
if (newVal) {
initDialog()
}
})
const openDialog = () => {
initDialog()
dialogVisible.value = true
}
// 暴露方法
defineExpose({
openDialog
})
</script>
<style scoped lang="scss">
.domain-rule-dialog {
.search-section {
margin-bottom: 16px;
:deep(.el-input__inner) {
height: 32px;
}
}
.content-section {
display: flex;
gap: 20px;
height: 400px;
}
.domain-list,
.rule-list {
flex: 1;
display: flex;
flex-direction: column;
}
.section-title {
font-size: 14px;
font-weight: 600;
color: #303133;
margin-bottom: 12px;
padding-left: 4px;
}
.list-container {
flex: 1;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 12px;
overflow-y: auto;
}
.domain-item,
.rule-item {
padding: 8px 0;
:deep(.el-radio) {
width: 100%;
.el-radio__label {
font-size: 13px;
}
}
}
.domain-item {
&:hover {
background-color: #f5f7fa;
border-radius: 4px;
}
}
.rule-item {
&:hover {
background-color: #f5f7fa;
border-radius: 4px;
}
}
.dialog-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #e0e0e0;
}
}
:deep(.el-radio-group) {
display: block;
}
</style>
\ No newline at end of file
src/views/discover/Discover/modules/MatchPreviewDialog.vue 0 → 100644
<template>
<el-dialog
v-model="dialogVisible"
title="查看匹配"
width="900px"
:before-close="handleClose"
>
<div class="match-preview-dialog">
<div class="match-content">
<!-- 左侧：匹配的数据 -->
<div class="match-section">
<div class="section-header">
<span class="section-title">匹配的数据</span>
</div>
<el-table
:data="matchedData"
style="width: 100%"
height="400"
:header-cell-style="{ background: '#f0f7ff', color: '#606266', fontWeight: 'bold' }"
empty-text="暂无匹配数据"
>
<el-table-column prop="value" label="匹配的数据" align="center">
<template #default="{ row }">
<span class="match-value">{{ row.value }}</span>
</template>
</el-table-column>
</el-table>
</div>
<!-- 右侧：不匹配的数据 -->
<div class="match-section">
<div class="section-header">
<span class="section-title">不匹配的数据</span>
</div>
<el-table
:data="unmatchedData"
style="width: 100%"
height="400"
:header-cell-style="{ background: '#f0f7ff', color: '#606266', fontWeight: 'bold' }"
empty-text="暂无数据"
>
<el-table-column prop="value" label="不匹配的数据" align="center">
<template #default="{ row }">
<span class="unmatch-value">{{ row.value }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 底部按钮 -->
<div class="dialog-footer">
<el-button type="primary" @click="handleClose">关闭</el-button>
</div>
</div>
</el-dialog>
</template>
<script setup>
import { ref, computed } from 'vue'
const props = defineProps({
modelValue: {
type: Boolean,
default: false
},
// 匹配的数据
matchedData: {
type: Array,
default: () => []
},
// 不匹配的数据
unmatchedData: {
type: Array,
default: () => []
}
})
const emit = defineEmits(['update:modelValue'])
const dialogVisible = computed({
get: () => props.modelValue,
set: (value) => emit('update:modelValue', value)
})
// 关闭弹窗
const handleClose = () => {
dialogVisible.value = false
}
// 暴露方法
defineExpose({
openDialog: () => {
dialogVisible.value = true
}
})
</script>
<style scoped lang="scss">
.match-preview-dialog {
.match-content {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.match-section {
flex: 1;
background: #fafafa;
border-radius: 6px;
overflow: hidden;
}
.section-header {
background: #f0f7ff;
padding: 12px 16px;
border-bottom: 1px solid #dcdfe6;
.section-title {
font-size: 14px;
font-weight: 600;
color: #303133;
}
}
:deep(.el-table) {
border-radius: 0;
.el-table__header-wrapper {
th {
background: #f0f7ff !important;
}
}
.el-table__body-wrapper {
.el-table__row {
&:nth-child(even) {
background-color: #fafafa;
}
&:hover {
background-color: #f5f7fa;
}
}
}
}
.match-value {
color: #52c41a;
font-weight: 500;
}
.unmatch-value {
color: #ff4d4f;
font-weight: 500;
}
.dialog-footer {
display: flex;
justify-content: center;
padding-top: 16px;
border-top: 1px solid #e0e0e0;
}
}
// 响应式设计
@media (max-width: 768px) {
.match-preview-dialog {
.match-content {
flex-direction: column;
}
.match-section {
min-height: 200px;
}
}
}
</style>
\ No newline at end of file
src/views/discover/Discover/modules/SmartDiscoveryDialog.vue 0 → 100644
<template>
<el-dialog
v-model="dialogVisible"
title="智能发现"
width="500px"
:before-close="handleClose"
>
<div class="smart-discovery-dialog">
<!-- 表格内容 -->
<div class="discovery-table">
<el-table
height="400"
:data="tableData"
style="width: 100%"
:header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 'bold' }"
empty-text="暂无发现版本"
>
<!-- 发现版本列 -->
<el-table-column prop="version" label="发现版本" >
<template #default="{ row }">
<div class="version-info">
<span class="version-label">任务版本：</span>
<span class="version-value">{{ row.version }}</span>
</div>
</template>
</el-table-column>
<!-- 操作列 -->
<el-table-column prop="action" label="操作" width="120" align="center">
<template #default="{ row }">
<el-button
type="primary"
link
size="small"
@click="handleSmartDiscover(row)"
class="discover-btn"
>
智能发现
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 底部按钮 -->
<div class="dialog-footer">
<el-button @click="handleClose">关闭</el-button>
</div>
</div>
</el-dialog>
</template>
<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
const props = defineProps({
modelValue: {
type: Boolean,
default: false
},
// 发现版本数据
discoveryData: {
type: Array,
default: () => []
}
})
const emit = defineEmits(['update:modelValue', 'discover'])
const dialogVisible = computed({
get: () => props.modelValue,
set: (value) => emit('update:modelValue', value)
})
// 表格数据
const tableData = ref([
{ version: '12123' }
])
// 处理智能发现
const handleSmartDiscover = (row) => {
console.log('开始智能发现:', row.version)
emit('discover', row)
ElMessage.success(`开始对版本 ${row.version} 进行智能发现`)
dialogVisible.value = false
}
// 关闭弹窗
const handleClose = () => {
dialogVisible.value = false
}
// 监听外部传入的数据
watch(() => props.discoveryData, (newData) => {
if (newData && newData.length > 0) {
tableData.value = newData
}
}, { immediate: true })
// 暴露方法
defineExpose({
openDialog: (data = []) => {
if (data && data.length > 0) {
tableData.value = data
}
dialogVisible.value = true
}
})
</script>
<style scoped lang="scss">
.smart-discovery-dialog {
.discovery-table {
margin-bottom: 20px;
border: 1px solid #e0e0e0;
border-radius: 4px;
overflow: hidden;
}
.version-info {
padding: 8px 0;
.version-label {
color: #606266;
font-size: 13px;
}
.version-value {
color: #303133;
font-weight: 500;
font-size: 13px;
}
}
.discover-btn {
font-weight: 500;
&:hover {
color: #1890ff;
}
}
.dialog-footer {
display: flex;
justify-content: flex-end;
padding-top: 16px;
border-top: 1px solid #e0e0e0;
}
}
// 表格样式调整
:deep(.el-table) {
border-radius: 4px;
.el-table__header-wrapper {
th {
background: #f5f7fa !important;
}
}
.el-table__body-wrapper {
.el-table__row {
&:hover {
background-color: #f5f7fa;
}
}
}
}
// 响应式设计
@media (max-width: 768px) {
.smart-discovery-dialog {
.discovery-table {
overflow-x: auto;
}
:deep(.el-table) {
min-width: 300px;
}
}
}
</style>
\ No newline at end of file
src/views/discover/Discover/modules/WaterWaveChart.vue 0 → 100644
<template>
<div class="cpu-usage-chart" ref="chartRef"></div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import * as echarts from 'echarts'
const props = defineProps({
usage: {
type: Number,
default: 0
},
color: {
type: String,
default: '#1890ff'
}
})
const chartRef = ref(null)
let chartInstance = null
const initChart = () => {
if (!chartRef.value) return
chartInstance = echarts.init(chartRef.value)
const option = {
series: [{
type: 'gauge',
startAngle: 90,
endAngle: -270,
pointer: { show: false },
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
color: props.color // 进度条颜色 - 蓝色
}
},
axisLine: {
lineStyle: {
width: 10,
color: [[1, '#f0f0f0']] // 背景环颜色 - 浅灰色
}
},
axisTick: { show: false },
splitLine: { show: false },
axisLabel: { show: false },
detail: {
valueAnimation: true,
offsetCenter: [0, '0%'],
formatter: '{value}%',
color: props.color, // 百分比数字颜色 - 蓝色
fontSize: 24,
fontWeight: 'bold'
},
title: {
offsetCenter: [0, '30%'],
color: '#666', // "发现进度"文字颜色 - 灰色
fontSize: 14
},
data: [{
value: props.usage,
name: '发现进度'
}]
}],
// title: {
// text: 'cpu',
// left: 'center',
// top: '10%',
// textStyle: {
// color: '#666', // "cpu"文字颜色 - 灰色
// fontSize: 14
// }
// }
}
chartInstance.setOption(option)
}
// 监听窗口变化自动调整图表大小
const resizeHandler = () => {
chartInstance?.resize()
}
// 监听props变化更新图表
watch(() => props.usage, (newVal) => {
if (chartInstance) {
chartInstance.setOption({
series: [{
data: [{
value: newVal,
name: '发现进度'
}]
}]
})
}
})
onMounted(() => {
initChart()
window.addEventListener('resize', resizeHandler)
})
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeHandler)
chartInstance?.dispose()
})
</script>
<style scoped>
.cpu-usage-chart {
width: 100%;
height: 100%;
background-color: white; /* 白色背景 */
}
</style>
\ No newline at end of file
src/views/index.vue
...@@ -3,51 +3,80 @@ import { onMounted, ref, reactive } from 'vue' ...@@ -3,51 +3,80 @@ import { onMounted, ref, reactive } from 'vue'
import { CountUp } from 'view-ui-plus'; import { CountUp } from 'view-ui-plus';
import img from '@/assets/images/index/index.js' import img from '@/assets/images/index/index.js'
import HomeCharts from '@/components/HomeCharts/index.vue' import HomeCharts from '@/components/HomeCharts/index.vue'
import { getHomePage } from '@/api/home'
const topList = ref([ const topList = ref([
{ {
name: '应用', name: '应用',
icon: img.icon1, icon: img.icon1,
num: 1, num: 0,
unit: '个' unit: '个'
}, },
{ {
name: '数据源', name: '数据源',
icon: img.icon2, icon: img.icon2,
num: 4, num: 0,
unit: '个' unit: '个'
}, },
{ {
name: '表', name: '表',
icon: img.icon3, icon: img.icon3,
num: 680, num: 0,
unit: '个' unit: '个'
}, },
{ {
name: '字段', name: '字段',
icon: img.icon4, icon: img.icon4,
num: 8090, num: 0,
unit: '个' unit: '个'
}, },
{ {
name: '加密表数量', name: '加密表数量',
icon: img.icon5, icon: img.icon5,
num: 1, num: 0,
unit: '个' unit: '个'
}, },
{ {
name: '加密字段数量', name: '加密字段数量',
icon: img.icon6, icon: img.icon6,
num: 1, num: 0,
unit: '个' unit: '个'
} }
]) ])
const dataObj = ref({
cpuCount: 0,
percentCpuLoad: 0,
totalvirtualMemory: 0,
percentMemoryLoad: 0,
})
const homeChartData = reactive({ const homeChartData = reactive({
xList: ['/run/user/0','/boot/efi','/boot','/run/lock','/dev/shm','/','/run'], xList: [],
yList1: [4,0.01,0.25,0.00,0.00,14.00,0.00], yList1: [],
yList2: [1.6,1.10,1.5,0.00,,7.9,97.00,1.60], yList2: [],
}) })
provide('homeChartData', homeChartData) provide('homeChartData', homeChartData)
const getHomePageFunc = () => {
getHomePage({}).then(res => {
const { data } = res
dataObj.value = data
topList.value[0].num = data.projectNum
topList.value[1].num = data.dataBaseNum
topList.value[2].num = data.tableNum
topList.value[3].num = data.fieldNum
topList.value[4].num = data.encryptTableCount
topList.value[5].num = data.encryptColumnCount
console.log(dataObj.value)
homeChartData.xList = data.space.map(item => item.path)
homeChartData.yList1 = data.space.map(item => item.usedpace)
homeChartData.yList2 = data.space.map(item => item.freespace)
})
}
onMounted(() => {
getHomePageFunc()
})
</script> </script>
<template> <template>
...@@ -59,7 +88,9 @@ provide('homeChartData', homeChartData) ...@@ -59,7 +88,9 @@ provide('homeChartData', homeChartData)
<img class="icon" :src="item.icon" alt=""> <img class="icon" :src="item.icon" alt="">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
<div class="num"> <div class="num">
<div><CountUp :end="item.num" :duration="3" /></div> <div>
<CountUp :end="item.num" :duration="3" />
</div>
<div class="unit">{{ item.unit }}</div> <div class="unit">{{ item.unit }}</div>
</div> </div>
</div> </div>
...@@ -67,17 +98,21 @@ provide('homeChartData', homeChartData) ...@@ -67,17 +98,21 @@ provide('homeChartData', homeChartData)
</el-card> </el-card>
<el-card class="box-card mt20" :body-style="{ padding: '0' }"> <el-card class="box-card mt20" :body-style="{ padding: '0' }">
<div class="title">系统资源</div> <div class="title">系统资源</div>
<div class="bottom"> <div class="bottom" v-if="dataObj">
<div class="bottomItem"> <div class="bottomItem">
<img class="icon" :src="img.img1" alt=""> <img class="icon" :src="img.img1" alt="">
<div class="name name1"> <div class="name name1">
<div><CountUp :end="8" :duration="2" /></div> <div>
<CountUp :end="dataObj.cpuCount" :duration="2" />
</div>
<div class="unit">核</div> <div class="unit">核</div>
</div> </div>
<div class="type">CPU</div> <div class="type">CPU</div>
<el-progress type="circle" width="140" :indeterminate="true" :percentage="25"> <el-progress type="circle" width="140" :indeterminate="true" :percentage="dataObj.percentCpuLoad">
<div class="circle"> <div class="circle">
<span class="name1"><CountUp :end="1" :duration="3" />%</span> <span class="name1">
<CountUp :end="dataObj.percentCpuLoad" :duration="3" />%
</span>
<div>使用率</div> <div>使用率</div>
</div> </div>
</el-progress> </el-progress>
...@@ -86,13 +121,17 @@ provide('homeChartData', homeChartData) ...@@ -86,13 +121,17 @@ provide('homeChartData', homeChartData)
<div class="bottomItem"> <div class="bottomItem">
<img class="icon" :src="img.img2" alt=""> <img class="icon" :src="img.img2" alt="">
<div class="name name2"> <div class="name name2">
<div><CountUp :end="16" :duration="2" /></div> <div>
<CountUp :end="dataObj.totalvirtualMemory" :duration="2" />
</div>
<div class="unit">G</div> <div class="unit">G</div>
</div> </div>
<div class="type">内存</div> <div class="type">内存</div>
<el-progress type="circle" width="140" color="rgb(250, 114, 86)" :indeterminate="true" :percentage="25"> <el-progress type="circle" width="140" color="rgb(250, 114, 86)" :indeterminate="true" :percentage="dataObj.percentMemoryLoad">
<div class="circle"> <div class="circle">
<span class="name2"><CountUp :end="95" :duration="3" />%</span> <span class="name2">
<CountUp :end="dataObj.percentMemoryLoad" :duration="3" />%
</span>
<div>使用率</div> <div>使用率</div>
</div> </div>
</el-progress> </el-progress>
...@@ -117,89 +156,89 @@ provide('homeChartData', homeChartData) ...@@ -117,89 +156,89 @@ provide('homeChartData', homeChartData)
color: #333; color: #333;
font-weight: 700; font-weight: 700;
} }
.top{ .top {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
padding: 40px 20px; padding: 40px 20px;
align-items: center; align-items: center;
height: calc(400px - 120px - 25px); height: calc(400px - 120px - 25px);
.topItem{ .topItem {
width: calc(100% / 6); width: calc(100% / 6);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.icon{ .icon {
width: 90px; width: 90px;
height: 90px; height: 90px;
} }
.name{ .name {
margin-top: -10px; margin-top: -10px;
margin-bottom: 5px; margin-bottom: 5px;
font-size: 12px; font-size: 12px;
color: #7a8495; color: #7a8495;
text-align: center; text-align: center;
} }
.num{ .num {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 18px; font-size: 18px;
color: #666; color: #666;
.unit{ .unit {
margin-left: 5px; margin-left: 5px;
font-size: calc(0.46875vw); font-size: calc(0.46875vw);
} }
} }
} }
} }
.bottom{ .bottom {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 20px; padding: 20px;
height: 304px; height: 304px;
.bottomItem{ .bottomItem {
width: calc(((100% - 2px) / 3) - 50px); width: calc(((100% - 2px) / 3) - 50px);
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.name{ .name {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 30px; font-size: 30px;
.unit{ .unit {
margin-top: 5px; margin-top: 5px;
margin-left: 3px; margin-left: 3px;
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 18px;
} }
} }
.name1{ .name1 {
color: rgb(31, 133, 223); color: rgb(31, 133, 223);
} }
.name2{ .name2 {
color: rgb(250, 114, 86); color: rgb(250, 114, 86);
} }
.type{ .type {
font-size: 16px; font-size: 16px;
padding-bottom: 15px; padding-bottom: 15px;
color: #7a8495; color: #7a8495;
} }
.circle{ .circle {
span{ span {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
div{ div {
line-height: 20px; line-height: 20px;
font-size: 14px; font-size: 14px;
} }
} }
} }
.bottomItem:last-child{ .bottomItem:last-child {
padding: 0 50px; padding: 0 50px;
width: calc(((100% - 2px) / 3) + 100px); width: calc(((100% - 2px) / 3) + 100px);
} }
.line{ .line {
background: #dfe1e3; background: #dfe1e3;
height: 150px; height: 150px;
width: 1px; width: 1px;
......
src/views/projectManage/DownloadPluginDialog.vue deleted 100644 → 0
<template>
<el-dialog
v-model="dialogVisible"
title="下载插件"
width="1000px"
>
<div class="download-plugin-dialog">
<!-- 加密网关配置 -->
<div class="section">
<div class="section-title">加密网关配置(规则拉取插件下载区域)</div>
<div class="section-content">
<div class="readonly-input-group">
<span class="input-label">加密网关平台:</span>
<el-input v-model="gatewayConfig.url" disabled class="input-field" />
<el-input v-model="gatewayConfig.port" disabled class="input-field port-input" />
<el-button type="primary" icon="Download" @click="downloadGatewayPlugin">下载</el-button>
</div>
</div>
</div>
<!-- 服务端加解密 -->
<div class="section">
<div class="section-title">服务端加解密(参数展示区域)</div>
<div class="section-content">
<div class="readonly-input-group">
<span class="input-label">项目ID:</span>
<el-input :value="projectId" disabled class="input-field" />
</div>
</div>
</div>
<!-- 应用项目配置 -->
<div class="section">
<div class="section-title">应用项目配置(规则推送插件下载区域)</div>
<div class="section-content">
<div class="add-project-btn">
<el-button type="primary" plain @click="addProjectConfig">
<el-icon><Plus /></el-icon>
点击添加应用项目
</el-button>
</div>
<div class="project-config-list">
<el-table :data="projectConfigs" border style="width: 100%">
<el-table-column prop="name" label="项目名称" width="180">
<template #default="{ row, $index }">
<el-input v-model="row.name" placeholder="请输入项目名称" />
</template>
</el-table-column>
<el-table-column prop="url" label="地址">
<template #default="{ row, $index }">
<el-input v-model="row.url" placeholder="请输入地址 https://xxx.xxx.x.xxx" />
</template>
</el-table-column>
<el-table-column prop="port" label="端口" width="120">
<template #default="{ row, $index }">
<el-input v-model="row.port" placeholder="请输入端口 5544" />
</template>
</el-table-column>
<el-table-column label="操作" width="300" align="center">
<template #default="{ row, $index }">
<el-button type="danger" icon="Delete" @click="removeProjectConfig($index)">删除</el-button>
<el-button type="primary" icon="Download" @click="downloadProjectPlugin($index)">下载</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import { ref, watch, computed } from 'vue'
import { Download, Plus, Delete } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
const props = defineProps({
visible: {
type: Boolean,
default: false
},
projectId: {
type: String,
required: true
}
})
const emit = defineEmits(['update:visible', 'confirm'])
// 控制弹窗显示
const dialogVisible = computed({
get: () => props.visible,
set: (value) => emit('update:visible', value)
})
// 加密网关配置
const gatewayConfig = ref({
url: '',
port: ''
})
// 应用项目配置列表
const projectConfigs = ref([])
// 根据项目ID获取网关配置
const fetchGatewayConfig = async () => {
// 模拟API调用，实际项目中替换为真实API
return new Promise(resolve => {
setTimeout(() => {
resolve({
url: 'https://172.19.1.166',
port: '9005'
})
}, 300)
})
}
// 添加项目配置
const addProjectConfig = () => {
projectConfigs.value.push({
name: '',
url: '',
port: ''
})
}
// 移除项目配置
const removeProjectConfig = (index) => {
projectConfigs.value.splice(index, 1)
}
// 下载网关插件
const downloadGatewayPlugin = () => {
ElMessage.success('开始下载加密网关插件')
// 实际项目中实现下载逻辑
}
// 下载项目插件
const downloadProjectPlugin = (index) => {
const project = projectConfigs.value[index]
if (!project.name || !project.url || !project.port) {
ElMessage.warning('请先填写完整的项目配置')
return
}
ElMessage.success(`开始下载项目 ${project.name} 的插件`)
// 实际项目中实现下载逻辑
}
// 确认操作
const handleConfirm = () => {
// 验证项目配置
for (const project of projectConfigs.value) {
if (!project.name || !project.url || !project.port) {
ElMessage.warning('请填写完整的项目配置')
return
}
}
emit('confirm', {
projectId: props.projectId,
projectConfigs: projectConfigs.value
})
dialogVisible.value = false
}
// 监听项目ID变化，获取网关配置
watch(() => props.projectId, async (newVal) => {
if (newVal) {
const config = await fetchGatewayConfig()
gatewayConfig.value = config
}
}, { immediate: true })
</script>
<style scoped>
.download-plugin-dialog {
padding: 10px;
}
.section {
margin-bottom: 20px;
}
.section-title {
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
.section-content {
padding: 10px;
background-color: #f9f9f9;
border-radius: 4px;
}
.readonly-input-group {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.input-label {
width: 120px;
text-align: right;
padding-right: 10px;
font-size: 14px;
}
.input-field {
flex: 1;
margin-right: 10px;
}
.port-input {
width: 100px;
}
.add-project-btn {
margin-bottom: 15px;
}
.project-config-list {
border-top: 1px solid #eee;
padding-top: 10px;
}
.project-config-item {
padding: 15px;
margin-bottom: 15px;
background-color: #fff;
border-radius: 4px;
border: 1px solid #eee;
position: relative;
}
.action-buttons {
display: flex;
justify-content: flex-end;
margin-top: 10px;
gap: 10px;
}
:deep(.el-form-item) {
margin-bottom: 10px;
}
</style>
\ No newline at end of file
src/views/projectManage/ExportDialog.vue deleted 100644 → 0
<template>
<el-dialog
v-model="dialogVisible"
title="导出"
width="500px"
:before-close="handleClose"
>
<div class="export-dialog">
<!-- 树形选择器 -->
<el-tree
ref="treeRef"
:data="treeData"
node-key="id"
show-checkbox
:props="defaultProps"
:default-expand-all="true"
@check="handleNodeCheck"
/>
</div>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="handleBackup">加密规则备份</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import { ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const props = defineProps({
visible: {
type: Boolean,
default: false
},
projectId: {
type: String,
required: true
}
})
const emit = defineEmits(['update:visible', 'confirm', 'backup'])
// 控制弹窗显示
const dialogVisible = computed({
get: () => props.visible,
set: (value) => emit('update:visible', value)
})
// 树形数据
const treeData = ref([])
const treeRef = ref(null)
// 树形配置
const defaultProps = {
children: 'children',
label: 'name'
}
// 加密规则备份
const handleBackup = () => {
emit('backup', props.projectId)
ElMessage.info('加密规则备份功能待实现')
}
// 确认导出
const handleConfirm = () => {
const checkedNodes = treeRef.value.getCheckedNodes()
const checkedKeys = treeRef.value.getCheckedKeys()
if (checkedKeys.length === 0) {
ElMessage.warning('请至少选择一个导出项')
return
}
emit('confirm', {
projectId: props.projectId,
checkedNodes,
checkedKeys
})
dialogVisible.value = false
}
// 节点选中处理
const handleNodeCheck = (nodeData, checkStatus) => {
// 如果选中父节点，自动选中所有子节点
// if (checkStatus.checkedKeys.includes(nodeData.id) && nodeData.children) {
// treeRef.value.setCheckedNodes(nodeData.children, true)
// }
}
// 关闭前处理
const handleClose = (done) => {
done()
}
// 根据项目ID获取树形数据
const fetchTreeData = async (projectId) => {
// 模拟API调用，实际项目中替换为真实API
return new Promise(resolve => {
setTimeout(() => {
resolve({
id: 'root',
name: '若依配测系统',
children: [
{
id: 'ry',
name: 'ry',
children: [
{
id: 'tables',
name: '表',
children: [
{ id: 'gen_table', name: 'gen_table' },
{ id: 'gen_table_column', name: 'gen_table_column' },
{ id: 'sys_config', name: 'sys_config' },
{ id: 'sys_dept', name: 'sys_dept' },
{ id: 'sys_dict_data', name: 'sys_dict_data' },
{ id: 'sys_dict_type', name: 'sys_dict_type' },
{ id: 'sys_job', name: 'sys_job' },
{ id: 'sys_job_log', name: 'sys_job_log' },
{ id: 'sys_logininfor', name: 'sys_logininfor' },
{ id: 'sys_menu', name: 'sys_menu' },
{ id: 'sys_notice', name: 'sys_notice' },
{ id: 'sys_oper_log', name: 'sys_oper_log' },
{ id: 'sys_post', name: 'sys_post' },
{ id: 'sys_role', name: 'sys_role' },
{ id: 'sys_role_dept', name: 'sys_role_dept' },
{ id: 'sys_role_menu', name: 'sys_role_menu' },
{ id: 'sys_user', name: 'sys_user' },
{ id: 'sys_user_online', name: 'sys_user_online' },
{ id: 'sys_user_post', name: 'sys_user_post' },
{ id: 'sys_user_role', name: 'sys_user_role' }
]
}
]
}
]
})
}, 300)
})
}
// 监听项目ID变化，获取树形数据
watch(() => props.projectId, async (newVal) => {
if (newVal) {
const data = await fetchTreeData(newVal)
treeData.value = [data]
}
}, { immediate: true })
</script>
<style scoped>
.export-dialog {
padding: 10px;
}
.dialog-footer {
display: flex;
justify-content: space-between;
}
:deep(.el-tree) {
max-height: 400px;
overflow-y: auto;
}
:deep(.el-tree-node__content) {
height: 36px;
}
</style>
\ No newline at end of file
src/views/projectManage/list.vue deleted 100644 → 0
<script setup name="ProjectManageList">
import { getCurrentInstance, reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import QueryForm from './QueryForm.vue'
import ProjectEditDialog from './ProjectEditDialog.vue'
import DownloadPluginDialog from './DownloadPluginDialog.vue'
import ExportDialog from './ExportDialog.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const emit = defineEmits(['page'])
const { proxy } = getCurrentInstance()
function onReset(formQuery) {
console.log('onReset')
formQuery.resetFields()
handleQuery()
}
function onQuery() {
handleQuery()
}
// 搜索按钮操作
function handleQuery() {
queryParams.value.pageNum = 1
getList()
}
const data = reactive({
queryParams: {
pageNum: 1,
pageSize: 8,
projectName: '',
remark: ''
}
})
// 表格数据
const { queryParams } = toRefs(data)
const tableList = ref([
{
id: '1',
projectName: '若依配测系统1',
datasource: 'MySQL',
domain: '电商',
findRule: '自动发现'
},
{
id: '2',
projectName: '若依配测系统2',
datasource: 'Oracle',
domain: '金融',
findRule: '手动配置'
},
{
id: '3',
projectName: '若依配测系统3',
datasource: 'SQL Server',
domain: '医疗',
findRule: '规则匹配'
}
])
const total = ref(3)
const loading = ref(false)
// 查询列表
function getList() {
loading.value = true
setTimeout(() => {
loading.value = false
}, 3000);
}
// 弹窗相关
const dialogVisible = ref(false)
const dialogMode = ref('add')
const currentProject = ref(null)
// 显示新增对话框
const showAddDialog = () => {
dialogMode.value = 'add'
currentProject.value = null
dialogVisible.value = true
}
// 处理项目操作
const handleCommandProject = (command, project) => {
switch(command) {
case '1': // 进入
handleEnterProject(project)
break
case '2': // 编辑
handleEditProject(project)
break
case '3': // 删除
handleDeleteProject(project)
break
case '4': // 导入
handleImportProject(project)
break
case '5': // 导出
handleExportProject(project)
break
case '6': // 下载插件
handleDownloadPlugin(project)
break
default:
console.warn('未知命令:', command)
}
}
// 具体操作方法
const handleEnterProject = (project) => {
console.log('进入项目:', project)
// // ElMessage.success(`进入项目 ${project.projectName}`)
// emit('page', 'detail', { projectId: project.id})
router.push({ path:'/projectHome',query: { projectId: project.id } })
}
const handleEditProject = (project) => {
dialogMode.value = 'edit'
currentProject.value = { ...project }
dialogVisible.value = true
}
// 删除项目
const handleDeleteProject = (project) => {
}
// 导入项目
const handleImportProject = (project) => {
ElMessage.info('导入功能待实现')
}
// 导出项目
const handleExportProject = (project) => {
// ElMessage.success(`开始导出项目 "${project.projectName}"`)
openExportDialog(project)
}
// 下载插件
const handleDownloadPlugin = (project) => {
// ElMessage.success(`开始下载 "${project.projectName}" 的插件`)
currentProjectId.value = project.id // 假设项目对象中有id字段
downloadDialogVisible.value = true
console.log(123)
}
// 处理确认操作
const handleDownloadConfirm = (data) => {
console.log('确认下载插件:', data)
// 这里可以处理保存操作或调用API
}
// 提交表单
const handleSubmit = (formData) => {
if (dialogMode.value === 'add') {
// 模拟新增
const newProject = {
id: tableList.value.length + 1,
projectName: formData.projectName,
datasource: '待配置',
domain: '待配置',
findRule: '待配置'
}
tableList.value.push(newProject)
total.value++
ElMessage.success('新增项目成功')
} else {
// 模拟编辑
const index = tableList.value.findIndex(p => p.id === currentProject.value.id)
if (index !== -1) {
tableList.value[index].projectName = formData.projectName
ElMessage.success('编辑项目成功')
}
}
}
const downloadDialogVisible = ref(false)
const currentProjectId = ref('')
const exportDialogVisible = ref(false)
const currentExportProjectId = ref('')
// 打开导出弹窗
const openExportDialog = (project) => {
currentExportProjectId.value = project.id
exportDialogVisible.value = true
}
// 处理导出确认
const handleExportConfirm = (data) => {
console.log('导出数据:', data)
}
// 处理加密规则备份
const handleBackup = (projectId) => {
console.log('备份项目:', projectId)
}
</script>
<template>
<div class="app-container scroller">
<PageTitle @back="$emit('page', 'list')">
<template #title>
项目管理
</template>
<template #buttons>
<el-button
type="primary"
icon="Plus"
@click="showAddDialog"
>
新增
</el-button>
</template>
</PageTitle>
<div class="app-container__body">
<div>
<query-form
ref="QueryFormRef"
v-model="queryParams"
@query="onQuery"
@reset="onReset"/>
<el-row :gutter="20">
<el-col class="table-item" :span="6" v-for="(item, index) in tableList" :key="index">
<el-card shadow="always">
<template #header>
<div class="flex-container justify-between align-center">
{{ item.projectName }}
<el-dropdown placement="bottom-end" @command="(command) => handleCommandProject(command, item)">
<el-button type="primary" icon="Operation">
操作
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="1">进入</el-dropdown-item>
<el-dropdown-item command="2">编辑</el-dropdown-item>
<el-dropdown-item command="3">删除</el-dropdown-item>
<el-dropdown-item command="4">导入</el-dropdown-item>
<el-dropdown-item command="5">导出</el-dropdown-item>
<el-dropdown-item command="6">下载插件</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
<div class="item-content flex-container align-center">
<div class="label">数据源：</div>
<div class="value flex1">{{ item.datasource }}</div>
</div>
<div class="item-content flex-container align-center">
<div class="label">数据域：</div>
<div class="value flex1">{{ item.domain }}</div>
</div>
<div class="item-content flex-container align-center">
<div class="label">发现规则：</div>
<div class="value flex1">{{ item.findRule }}</div>
</div>
</el-card>
</el-col>
</el-row>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div>
</div>
<ProjectEditDialog
v-model:visible="dialogVisible"
:mode="dialogMode"
:project-data="currentProject"
@submit="handleSubmit"
/>
<DownloadPluginDialog
v-model:visible="downloadDialogVisible"
:project-id="currentProjectId"
@confirm="handleDownloadConfirm"
/>
<ExportDialog
v-model:visible="exportDialogVisible"
:project-id="currentExportProjectId"
@confirm="handleExportConfirm"
@backup="handleBackup"
/>
</div>
</template>
<style lang="scss" scoped>
.table-item {
margin-top: var(--container-pd);
margin-bottom: 20px;
}
.item-content {
margin: 8px 0;
.label {
width: 80px;
color: #888;
}
}
.flex-container {
display: flex;
}
.align-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.flex1 {
flex: 1;
}
</style>
\ No newline at end of file
src/views/ruleConfig/CalculationMethod/index.vue
<script setup name="CalculationMethod"> <script setup name="CalculationMethod">
import { onMounted, ref, toRefs } from 'vue' import { onMounted, ref, toRefs } from 'vue'
import { Split } from 'view-ui-plus'; import { Split } from 'view-ui-plus';
import { ElMessage } from "element-plus";
import CollapseView from '@/components/CollapseView/index.vue' import CollapseView from '@/components/CollapseView/index.vue'
import formModule from './modules/formModule.vue' import formModule from './modules/formModule.vue'
import ModalPop from "@/components/EditPop/ModalPop.vue" import ModalPop from "@/components/EditPop/ModalPop.vue"
import { query, queryenc, del } from '@/api/ruleConfig/calculationMethod'
const splitNum = ref(0.31) // 左右分割比例 const splitNum = ref(0.31) // 左右分割比例
const collapseList = ref([]) const collapseList = ref([])
const encryptionList = ref([]) // 加密规则列表
const data = reactive({ const data = reactive({
formEdit: { formData: {
name: "", name: "",
}, },
formAdd: { queryParams: {
name: "", dataarea: ''
},
delData: {
id: ''
} }
}); });
const { formEdit, formAdd } = toRefs(data); const { formData, queryParams, delData } = toRefs(data);
const modalData = reactive({ const modalData = reactive({
show: false, show: false,
...@@ -31,48 +38,35 @@ const modalPopShow = ref(false) ...@@ -31,48 +38,35 @@ const modalPopShow = ref(false)
// 获取数据 // 获取数据
const getCollapse = () => { const getCollapse = () => {
const data = [ query(queryParams.value).then(res => {
{ const { data } = res
name: '测试数据域', collapseList.value = data.map(item => {
list: [ const list = item.secretkeyList.map(itemTwo => {
{ return {
name: 'aaaaa' ...itemTwo,
}, name: itemTwo.enc_name,
{ isCheck: false,
name: 'bbbbb' isDelete: true,
} }
] })
},
{
name: '通用规则',
list: [
{
name: 'aaaaa'
},
{
name: 'bbbbb'
}
]
},
{
name: '解密数据',
list: []
}
]
collapseList.value = data.map(item => {
const list = item.list.map(itemTwo => {
return { return {
...itemTwo, ...item,
isCheck: false, list: list,
isDelete: true, isAdd: true,
isView: false,
isDelete: false,
} }
}) })
return { if (collapseList.value.length <= 0) return
...item, if (collapseList.value[0].secretkeyList.length > 0) {
list: list, formData.value = {
isAdd: true, dataarea_id: collapseList.value[0].id,
isView: false, ...collapseList.value[0].secretkeyList[0]
isDelete: false, }
} else {
formData.value = {
dataarea_id: collapseList.value[0].id
}
} }
}) })
} }
...@@ -84,14 +78,18 @@ const modalPopCancel = () => { ...@@ -84,14 +78,18 @@ const modalPopCancel = () => {
// 新增加密算法 // 新增加密算法
const collapseAdd = (item) => { const collapseAdd = (item) => {
console.log('添加事件', item) // console.log('添加事件', item)
formAdd.value = {} const { id } = item
formData.value = {
dataarea_id: id
}
modalPopShow.value = true modalPopShow.value = true
} }
// 删除事件 // 删除事件
const collapseDelete = (item) => { const collapseDelete = (item) => {
console.log('删除事件', item) console.log('删除事件', item)
delData.value = item
modalData.show = true modalData.show = true
modalData.icon = 'error' modalData.icon = 'error'
modalData.text = '确认删除[' + item.name + ']?' modalData.text = '确认删除[' + item.name + ']?'
...@@ -99,21 +97,53 @@ const collapseDelete = (item) => { ...@@ -99,21 +97,53 @@ const collapseDelete = (item) => {
// 删除回调 // 删除回调
const modalConfirm = () => { const modalConfirm = () => {
modalData.show = false const data = {
relationid: delData.value.id
}
del(data).then(res => {
const { flag } = res
if (flag) {
ElMessage.success('删除成功')
getCollapse()
modalData.show = false
} else {
ElMessage.error('删除失败')
}
})
} }
// 点击监听 // 点击监听
const collapseChange = (item) => { const collapseChange = (item) => {
formEdit.value = item console.log('修改事件', item)
formData.value = {
...item.item
}
} }
// 算法确认 // 算法确认
const formModuleConfirm = (item) => { const formModuleConfirm = (item) => {
console.log('新增算法', item) console.log('新增算法', item)
getCollapse()
modalPopShow.value = false modalPopShow.value = false
} }
// 查询加密规则
const getQueryenc = () => {
queryenc({}).then((res) => {
const { data } = res;
encryptionList.value = data.map((item) => {
return {
value: item.id,
label: item.encryption_name,
};
});
});
};
onMounted(() => { onMounted(() => {
getQueryenc()
getCollapse() getCollapse()
}) })
...@@ -129,14 +159,15 @@ onMounted(() => { ...@@ -129,14 +159,15 @@ onMounted(() => {
<Split v-model="splitNum"> <Split v-model="splitNum">
<template #left> <template #left>
<div class="demo-split-pane" style="padding: 0 38px 10px 0;width: 100%;overflow: auto;height: 100%;"> <div class="demo-split-pane" style="padding: 0 38px 10px 0;width: 100%;overflow: auto;height: 100%;">
<el-input class="mb20" placeholder="加密算法搜索"> <el-input class="mb20" v-model="queryParams.dataarea" placeholder="加密算法搜索">
<template #suffix> <template #suffix>
<el-icon style="vertical-align: middle;"> <el-icon style="vertical-align: middle;cursor: pointer;" @click="getCollapse">
<search /> <search />
</el-icon> </el-icon>
</template> </template>
</el-input> </el-input>
<CollapseView :list="collapseList" @add="collapseAdd" @childDelete="collapseDelete" @change="collapseChange" /> <CollapseView :list="collapseList" @add="collapseAdd" @childDelete="collapseDelete"
@change="collapseChange" />
</div> </div>
</template> </template>
<template #right> <template #right>
...@@ -149,7 +180,8 @@ onMounted(() => { ...@@ -149,7 +180,8 @@ onMounted(() => {
<span style="margin-left: 5px;">加密算法</span> <span style="margin-left: 5px;">加密算法</span>
</div> </div>
<div class="right-content"> <div class="right-content">
<formModule v-model="formEdit" type="edit" /> <formModule :itemData="formData" :encryptionDict="encryptionList" type="edit" @cancel="modalPopCancel"
@confirm="formModuleConfirm" />
</div> </div>
</div> </div>
</div> </div>
...@@ -163,7 +195,8 @@ onMounted(() => { ...@@ -163,7 +195,8 @@ onMounted(() => {
<!-- 新增加密算法 --> <!-- 新增加密算法 -->
<ModalPop v-model="modalPopShow" title="编辑器" @cancel="modalPopCancel"> <ModalPop v-model="modalPopShow" title="编辑器" @cancel="modalPopCancel">
<template #content> <template #content>
<formModule v-model="formAdd" type="add" @cancel="modalPopCancel" @confirm="formModuleConfirm" /> <formModule :itemData="formData" :encryptionDict="encryptionList" type="add" @cancel="modalPopCancel"
@confirm="formModuleConfirm" />
</template> </template>
</ModalPop> </ModalPop>
</div> </div>
......
src/views/ruleConfig/CalculationMethod/modules/formModule.vue
<script setup lang="ts" name="Form"> <script setup lang="ts" name="Form">
import { onMounted, reactive, ref, toRefs, watch } from "vue"; import { onMounted, reactive, ref, toRefs, watch } from "vue";
import { Switch } from "view-ui-plus"; import { Switch } from "view-ui-plus";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import { querysec, save } from "@/api/ruleConfig/calculationMethod";
const props = defineProps<{ const props = defineProps<{
modelValue: boolean; itemData: boolean;
type: string; type: string;
encryptionDict: Array<any>;
}>(); }>();
const emit = defineEmits(["update:modelValue", 'cancel','confirm']); const emit = defineEmits(["cancel", "confirm"]);
const data = reactive({ const data = reactive({
rules: {}, form: <any>{
dataarea_id: "",
defaulttype: "0",
enc_name: "",
encryption_id: "",
secretkey_id: "",
},
rules: {
enc_name: [
{
required: true,
message: "请输入数据域名称",
trigger: ["blur"],
},
],
encryption_id: [
{
required: true,
message: "请选择加密规则",
trigger: ["change"],
},
],
secretkey_id: [
{
required: true,
message: "请选择密钥",
trigger: ["change"],
},
],
},
}); });
const { rules } = toRefs(data); const { form, rules } = toRefs(data);
const encryptionList = ref<any[]>([]); // 加密规则选项列表
const secretkeyList = ref<any[]>([]); // 密钥选项列表
const readOnly = ref(true); const readOnly = ref(true);
const formRef = ref<FormInstance>();
watch( // 重置
() => props.type, const reset = () => {
(newVal) => { form.value = {
readOnly.value = props.type === 'edit' ? true : false; dataarea_id: "",
}, defaulttype: "0",
{ deep: true, immediate: true } enc_name: "",
); encryption_id: "",
secretkey_id: "",
};
}
// 取消 // 取消
const cancel = () => { const cancel = () => {
if (props.type === 'edit') { if (props.type === "edit") {
readOnly.value = true readOnly.value = true;
}else if (props.type === 'add') { const data = JSON.parse(JSON.stringify(props.itemData));
emit('cancel') form.value = { ...form.value, ...data };
getQuerysec()
} else if (props.type === "add") {
emit("cancel");
} }
} };
const confirm = () => { const confirm = () => {
if (props.type === 'edit') { formRef.value?.validate((valid) => {
readOnly.value = true if (valid) {
saveFunc();
} else {
}
});
};
const saveFunc = () => {
console.log(form.value)
if (props.type === "edit") {
form.value = { ...form.value, ...{ id: form.value.id } }
} }
emit('confirm') save(form.value).then((res) => {
const { flag } = res;
if (flag) {
ElMessage.success((props.type === "add" || !form.value.id) ? "新增成功" : "修改成功");
if (props.type === "edit") {
readOnly.value = true;
} else if (props.type === "add") {
reset()
}
emit("confirm");
}
});
} }
// 查询密钥
const getQuerysec = () => {
querysec({ encryption_id: form.value.encryption_id }).then((res) => {
const { data } = res;
secretkeyList.value = data.map((item) => {
return {
value: item.id,
label: item.secret_key_name,
};
});
});
};
// 加密规则变化
const encryptionChange = () => {
form.value.secretkey_id = ''
getQuerysec()
}
watch(
() => props.type,
(newVal) => {
readOnly.value = props.type === "edit" ? true : false;
},
{ deep: true, immediate: true }
);
watch(
() => props.itemData,
(newVal) => {
if (props.itemData) {
if (!props.itemData.enc_name) {
reset()
}
const data = JSON.parse(JSON.stringify(props.itemData));
form.value = { ...form.value, ...data };
if (props.type === "edit" && form.value.secretkey_id) {
getQuerysec()
}
}
},
{ deep: true, immediate: true }
);
watch(
() => props.encryptionDict,
(newVal) => {
encryptionList.value = props.encryptionDict;
},
{ deep: true, immediate: true }
);
</script> </script>
<template> <template>
<div> <div>
<el-form ref="formRef" :model="modelValue" label-width="100px" :disabled="readOnly"> <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" :disabled="readOnly">
<el-form-item label="算法名称" required> <el-form-item label="算法名称" prop="enc_name" required>
<el-input v-model="modelValue.name" placeholder="请输入算法名称"></el-input> <el-input v-model="form.enc_name" placeholder="请输入算法名称"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="加密规则" required> <el-form-item label="加密规则" prop="encryption_id" required>
<div style="width: 100%;background: #F3F5FA;"> <div style="width: 100%;background: #F3F5FA;">
<el-select v-model="modelValue.name"> <el-select v-model="form.encryption_id" @change="encryptionChange">
<el-option <el-option v-for="item in encryptionList" :key="item.value" :label="item.label" :value="item.value">
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="密钥" required> <el-form-item label="密钥" prop="secretkey_id" required>
<div style="width: 100%;background: #F3F5FA;"> <div style="width: 100%;background: #F3F5FA;">
<el-select v-model="modelValue.name"> <el-select v-model="form.secretkey_id">
<el-option <el-option v-for="item in secretkeyList" :key="item.value" :label="item.label" :value="item.value">
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="默认规则"> <el-form-item label="默认规则">
<Switch :disabled="readOnly"> <Switch true-value="1" false-value="0" v-model="form.defaulttype" :disabled="readOnly">
<template #open> <template #open>
<span>是</span> <span>是</span>
</template> </template>
......
src/views/ruleConfig/Discover/index.vue
...@@ -65,7 +65,7 @@ const getCollapse = () => { ...@@ -65,7 +65,7 @@ const getCollapse = () => {
isDelete: true, isDelete: true,
} }
}) })
if (collapseList.value.length < 0) return if (collapseList.value.length <= 0) return
domainForm.value = collapseList.value[0] domainForm.value = collapseList.value[0]
rightType.value = 'domain' rightType.value = 'domain'
}) })
......
src/views/ruleConfig/Discover/modules/AddRules.vue
...@@ -18,7 +18,7 @@ const props = defineProps<{ ...@@ -18,7 +18,7 @@ const props = defineProps<{
const emit = defineEmits(["cancel", "confirm"]); const emit = defineEmits(["cancel", "confirm"]);
const subRuleidList = ref([]) const subRuleidList = ref([]);
const data = reactive({ const data = reactive({
form: <any>{ form: <any>{
dataarea_id: "", dataarea_id: "",
...@@ -36,7 +36,7 @@ const data = reactive({ ...@@ -36,7 +36,7 @@ const data = reactive({
matchingway: "", matchingway: "",
defaulttype: "0", defaulttype: "0",
remark: "", remark: "",
testString: "" testString: "",
}, },
rules: { rules: {
name: [ name: [
...@@ -89,22 +89,34 @@ const modalData = reactive({ ...@@ -89,22 +89,34 @@ const modalData = reactive({
type: "", type: "",
}); });
watch( // 重置
() => [props.type, props.itemData], const reset = () => {
(newVal) => { form.value = {
readOnly.value = props.type === "edit" ? true : false; dataarea_id: "",
if (props.itemData) { id: "",
const data = JSON.parse(JSON.stringify(props.itemData)); name: "",
form.value = { ...form.value, ...data }; type: "",
} flag: "",
}, discoverway: "01",
{ deep: true, immediate: true } regex: "",
); icon: "",
ruleexample: "",
ruleargument: "",
rulegroupname: "",
dictionaryClass: "",
matchingway: "",
defaulttype: "0",
remark: "",
testString: "",
};
};
// 取消 // 取消
const cancel = () => { const cancel = () => {
if (props.type === "edit") { if (props.type === "edit") {
readOnly.value = true; readOnly.value = true;
const data = JSON.parse(JSON.stringify(props.itemData));
form.value = { ...form.value, ...data };
} else if (props.type === "add") { } else if (props.type === "add") {
emit("cancel"); emit("cancel");
} }
...@@ -138,24 +150,7 @@ const addDataFun = () => { ...@@ -138,24 +150,7 @@ const addDataFun = () => {
if (props.type === "edit") { if (props.type === "edit") {
readOnly.value = true; readOnly.value = true;
} else if (props.type === "add") { } else if (props.type === "add") {
form.value = { reset();
dataarea_id: "",
id: "",
name: "",
type: "",
flag: "",
discoverway: "01",
regex: "",
icon: "",
ruleexample: "",
ruleargument: "",
rulegroupname: "",
dictionaryClass: "",
matchingway: "",
defaulttype: "0",
remark: "",
testString: ""
};
} }
emit("confirm"); emit("confirm");
} }
...@@ -172,7 +167,8 @@ const getDictionaryTypesFunc = () => { ...@@ -172,7 +167,8 @@ const getDictionaryTypesFunc = () => {
// 规则测试 // 规则测试
const testRegexFun = () => { const testRegexFun = () => {
const { dictionaryClass, discoverway, matchingway, regex, testString } = form.value; const { dictionaryClass, discoverway, matchingway, regex, testString } =
form.value;
const data = { const data = {
dictionaryClass: dictionaryClass, dictionaryClass: dictionaryClass,
discoverway: discoverway, discoverway: discoverway,
...@@ -183,7 +179,7 @@ const testRegexFun = () => { ...@@ -183,7 +179,7 @@ const testRegexFun = () => {
}; };
formRef.value?.validate((valid) => { formRef.value?.validate((valid) => {
if (valid) { if (valid) {
testRegex(data).then((res) => { testRegex(data).then((res) => {
const { flag, msg } = res; const { flag, msg } = res;
if (flag) { if (flag) {
modalData.icon = "success"; modalData.icon = "success";
...@@ -194,7 +190,7 @@ const testRegexFun = () => { ...@@ -194,7 +190,7 @@ const testRegexFun = () => {
modalData.text = msg; modalData.text = msg;
modalData.show = true; modalData.show = true;
} }
}) });
} else { } else {
} }
}); });
...@@ -212,6 +208,25 @@ const modalCancel = () => { ...@@ -212,6 +208,25 @@ const modalCancel = () => {
modalData.show = false; modalData.show = false;
}; };
watch(
() => props.type,
(newVal) => {
readOnly.value = props.type === "edit" ? true : false;
},
{ deep: true, immediate: true }
);
watch(
() => props.itemData,
(newVal) => {
if (props.itemData) {
const data = JSON.parse(JSON.stringify(props.itemData));
form.value = { ...form.value, ...data };
}
},
{ deep: true, immediate: true }
);
onMounted(() => { onMounted(() => {
getDictionaryTypesFunc(); getDictionaryTypesFunc();
}); });
......
src/views/user/discoverProcess/index.vue 0 → 100644
<script setup name="ProjectManageList">
import { getCurrentInstance, reactive, ref, toRefs } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import useAppStore from '@/store/modules/app'
import usePermissionStore from '@/store/modules/permission'
import { changeRoute } from '@/utils/switchRoute'
// import QueryForm from './QueryForm.vue'
// import AddDiscoveryDialog from './modules/AddDiscoveryDialog.vue' // 引入新增发现任务弹窗
const appStore = useAppStore()
const permissionStore = usePermissionStore()
const router = useRouter()
const emit = defineEmits(['page'])
const { proxy } = getCurrentInstance()
function pageProjectManage() {
changeRoute()
router.push({
path: '/project/Project'
})
}
</script>
<template>
<div class="app-container scroller">
<PageTitle :back="true" @back="pageProjectManage">
<template #title>
返回项目管理
</template>
</PageTitle>
<div class="app-container__body">
<div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.flex-container {
display: flex;
}
.align-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.flex1 {
flex: 1;
}
.flex-wrap {
flex-direction: wrap;
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论