系统相关配置

This commit is contained in:
sjl
2026-02-27 08:49:57 +08:00
parent bfa061fb03
commit b25515b5db
21 changed files with 1403 additions and 142 deletions

View File

@@ -7,7 +7,7 @@
<el-col :span="6">
<div class="tree-container">
<el-tree
@node-click="clickNode"
@node-click="(node, data, event) => handleNodeClick(node, data)"
:expand-on-click-node="false"
:highlight-current="true"
:data="TreeData"
@@ -92,13 +92,12 @@ import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { ElMessage } from 'element-plus'
import {
getDictTree,
getReportDictList,
addDict,
updateDict,
deleteDict
} from '@/api/system-boot/ReportTemplate'
// 弹出框是否可见
const dialogVisible = ref<boolean>(false)
const dialogTitle = ref('新增配置项')
@@ -107,12 +106,50 @@ const props = defineProps({
type: {
type: Number,
default: undefined
},
treeData: {
type: Array,
default: () => []
}
})
const TreeData = computed(() => props.treeData)
const secondLevelNode = ref<any[]>([]);
const treeExpandData = ref([])
const setDefaultExpandedKeys = (treeData: any[]) => {
const firstLevelIds = treeData.map(item => item.id)
treeExpandData.value = firstLevelIds
}
// 默认选中第一个节点
const selectFirstNode = () => {
if (props.treeData.length > 0 && tree.value) {
const firstNodeId = props.treeData[0].id
tree.value.setCurrentKey(firstNodeId)
formData.id = firstNodeId
}
}
// 监听 treeData 变化,自动设置默认展开
watch(
() => props.treeData,
(newVal) => {
if (newVal.length > 0) {
setDefaultExpandedKeys(newVal)
nextTick(() => {
selectFirstNode()
})
}
},
{ immediate: true }
)
const tree = ref(null)
const formData = reactive({
searchValue: '',
id: '0',
id: 0,
type: props.type
})
@@ -124,6 +161,11 @@ const form = reactive({
type: props.type
})
const defaultProps = {
children: 'children',
label: 'reportDescribe'
}
const rules = {
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
reportDescribe: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
@@ -131,7 +173,7 @@ const rules = {
}
const tableStore = new TableStore({
url: '/system-boot/reportDict/getReportDictList',
url: getReportDictList(formData),
method: 'POST',
column: [
{ title: '配置项名称', field: 'name' },
@@ -185,6 +227,45 @@ const tableStore = new TableStore({
})
provide('tableStore', tableStore)
// 存储当前选中节点的路径(包括自身)
const selectedNodePath = ref<any[]>([]);
// 处理节点点击事件
const handleNodeClick = (node: any) => {
// 获取当前节点的完整路径
const nodePath = tree.value?.getNodePath(node);
// 更新当前选中节点的路径
selectedNodePath.value = nodePath || [];
// 设置当前节点 ID 到 formData
formData.id = node.id;
// 动态生成父节点选项(排除当前节点本身)
secondLevelNode.value = (nodePath || []).slice(0, -1).map((item: any) => ({
id: item.id,
reportDescribe: item.reportDescribe
}));
// 调用 tableStore.index()
tableStore.index();
};
// 监听 selectedNodePath 变化
watch(selectedNodePath, (newPath) => {
if (Array.isArray(newPath)) {
secondLevelNode.value = newPath.slice(0, -1).map((item: any) => ({
id: item.id,
reportDescribe: item.reportDescribe
}));
} else {
console.warn('selectedNodePath is not an array:', newPath);
secondLevelNode.value = []; // 清空选项
}
});
const addTemplate = () => {
dialogTitle.value = '新增配置项'
dialogVisible.value = true
@@ -218,7 +299,7 @@ const closeDialog = () => {
}
onMounted(() => {
tableStore.index()
//tableStore.index()
})
</script>

View File

@@ -3,7 +3,7 @@
<TableHeader ref="TableHeaderRef">
<template v-slot:select>
<el-form-item label="模板类型">
<el-select v-model="tableStore.table.params.type" placeholder="Select" size="large">
<el-select v-model="tableStore.table.params.type" placeholder="Select" size="large" @change="handleTypeChange">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
@@ -16,12 +16,12 @@
<Table ref="tableRef" />
<Administration
:type="tableStore.table.params.type"
:type="Number(tableStore.table.params.type)"
:tree-data="treeDataForChild"
v-if="showDictionary"
@close="closeReportDictionary"
/>
<el-dialog
:title="title"
v-model="dialogVisible"
@@ -32,14 +32,14 @@
<el-col :span="11">
<div class="grid-content">
<el-tree
:data="data"
show-checkbox
node-key="id"
:props="defaultProps"
:default-checked-keys="treeCheckedData"
:default-expanded-keys="treeExpandData"
@check-change="handleCheckChange"
ref="tree"
:data="data"
show-checkbox
node-key="id"
:props="defaultProps"
:default-checked-keys="treeCheckedData"
:default-expanded-keys="treeExpandData"
@check-change="handleCheckChange"
ref="tree"
>
</el-tree>
</div
@@ -78,7 +78,7 @@ import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { addData,updateData,deleteData,getList,getDictTree } from '@/api/system-boot/MonitoringPoint'
import { addData,updateData,deleteData,getDictTree } from '@/api/system-boot/MonitoringPoint'
import { ElMessage } from 'element-plus'
import Administration from '@/views/system/ReportConfiguration/components/Administration.vue'
@@ -102,8 +102,10 @@ const form = ref({
name: '',
code: '',
type: 0,
ids: []
})
// 表单验证规则
const rules = {
name: [
@@ -118,8 +120,9 @@ const rules = {
const data = ref([]) // 树形数据源
const defaultProps = {
children: 'children',
label: 'label'
label: 'reportDescribe'
}
const treeCheckedData = ref([]) // 默认选中的节点
const treeExpandData = ref([]) // 默认展开的节点
@@ -128,10 +131,16 @@ const options = ([
{ value: '1', label: '区域报告' },
])
const openReportDictionary = () => {
console.log('点击了报告字典管理按钮')
showDictionary.value = true
console.log('showDictionary 当前值:', showDictionary.value)
const treeDataForChild = ref([]) // 用于存储传递给子组件的树数据
const openReportDictionary = async () => {
try {
const res = await getDictTree({ type: Number(tableStore.table.params.type) })
treeDataForChild.value = res.data // 将数据存储到响应式变量中
showDictionary.value = true // 打开子组件
} catch (error) {
ElMessage.error('获取字典数据失败')
}
}
const closeReportDictionary = () => {
@@ -150,7 +159,6 @@ const tableStore: any = new TableStore({
width: '220',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '编辑',
@@ -166,8 +174,16 @@ const tableStore: any = new TableStore({
id: row.id,
name: row.name,
code: row.code,
type: row.type
type: row.type,
ids: row.rdIds
}
// 获取树数据
formData.type = row.type
getDictTree(formData).then(res => {
data.value = res.data
treeCheckedData.value= row.rdIds
setDefaultExpandedKeys(res.data)
})
}
},
@@ -201,9 +217,21 @@ tableStore.table.params = {}
tableStore.table.params.type = '0'
provide('tableStore', tableStore)
// 模板类型变更
const handleTypeChange = (value: string) => {
tableStore.table.params.type = value
tableStore.index()
}
const formData= reactive({
pageNum: 1,
pageSize: 20,
type: 0,
})
const add = () => {
isEdit.value = true
isEdit.value = false
title.value = '新增模板'
dialogVisible.value = true
// 初始化表单数据
@@ -211,9 +239,26 @@ const add = () => {
id: '',
name: '',
code: '',
type: tableStore.table.params.type
type: tableStore.table.params.type,
ids: []
}
formData.type = tableStore.table.params.type
treeCheckedData.value = []
getDictTree(formData).then(res => {
data.value = res.data
setDefaultExpandedKeys(res.data)
})
}
const setDefaultExpandedKeys = (treeData: any[]) => {
const firstLevelIds = treeData.map(item => item.id)
treeExpandData.value = firstLevelIds
}
const handleCheckChange = (data: any, checked: boolean, indeterminate: boolean) => {
// 获取当前选中的节点 key 值
const checkedKeys = tree.value?.getCheckedKeys() || []
form.value.ids = checkedKeys // 将选中的节点 ID 更新到表单数据中
}
const addDetermine = () => {