报告模版配置

This commit is contained in:
sjl
2026-02-27 14:46:19 +08:00
parent b25515b5db
commit f5c76c1b7a
5 changed files with 222 additions and 181 deletions

View File

@@ -77,6 +77,7 @@ export default class TableStore {
} }
index() { index() {
this.table.beforeSearchFun && this.table.beforeSearchFun() this.table.beforeSearchFun && this.table.beforeSearchFun()
this.table.data = [] this.table.data = []
this.table.loading = true this.table.loading = true
@@ -97,10 +98,12 @@ export default class TableStore {
url: this.url, url: this.url,
method: this.method method: this.method
}, },
requestPayload(this.method, this.table.params, this.paramsPOST) requestPayload(this.method, this.table.params, this.paramsPOST)
) )
) )
.then((res: any) => { .then((res: any) => {
if (res.data) { if (res.data) {
this.table.data = res.data.records || res.data this.table.data = res.data.records || res.data
this.table.total = res.data?.total || res.data.length || 0 this.table.total = res.data?.total || res.data.length || 0
@@ -137,7 +140,7 @@ export default class TableStore {
this.table.params.pageNum = 1 this.table.params.pageNum = 1
this.index() this.index()
console.log('search')
} }
], ],
[ [

View File

@@ -1,8 +1,37 @@
<template> <template>
<div class="dictiontary-list-detail child-router">
<!-- 上方一整块筛选和操作按钮 -->
<el-row class="main-content">
<el-col :span="24">
<TableHeader>
<template #select>
<el-form-item label="">
<el-page-header @back="$emit('close')">
<template #content>
<span class="text-large font-600 mr-3">报告字典管理</span>
</template>
</el-page-header>
</el-form-item>
<el-form-item label="过滤筛选">
<el-input
style="width: 240px"
v-model="tableStore.table.params.searchValue"
clearable
placeholder="请输入筛选数据"
maxlength="32"
show-word-limit
/>
</el-form-item>
</template>
<template #operation>
<el-button :icon="Plus" type="primary" @click="addTemplate">新增配置项</el-button>
</template>
</TableHeader>
</el-col>
</el-row>
<div class="dictiontary-list-detail child-router"> <!-- 下方左右两块左侧树 + 右侧表格 -->
<!-- 主体区域左侧树 + 右侧表格 --> <el-row :gutter="20" class="main-content mt20">
<el-row :gutter="20" class="main-content">
<!-- 左侧树 --> <!-- 左侧树 -->
<el-col :span="6"> <el-col :span="6">
<div class="tree-container"> <div class="tree-container">
@@ -21,36 +50,11 @@
<!-- 右侧表格 --> <!-- 右侧表格 -->
<el-col :span="18"> <el-col :span="18">
<TableHeader>
<template #select>
<el-form-item label="">
<el-page-header @back="$emit('close')">
<template #content>
<span class="text-large font-600 mr-3">报告字典管理</span>
</template>
</el-page-header>
</el-form-item>
<el-form-item label="过滤筛选">
<el-input
style="width: 240px"
v-model="tableStore.table.params.searchValue"
clearable
placeholder="请输入筛选数据"
maxlength="32"
show-word-limit
/>
</el-form-item>
</template>
<template #operation>
<el-button :icon="Plus" type="primary" @click="addTemplate">新增配置项</el-button>
</template>
</TableHeader>
<Table ref="tableRef" /> <Table ref="tableRef" />
</el-col> </el-col>
</el-row> </el-row>
<!-- 新增弹窗 -->
<!-- 新增 -->
<el-dialog <el-dialog
:title="dialogTitle" :title="dialogTitle"
v-model="dialogVisible" v-model="dialogVisible"
@@ -59,20 +63,27 @@
> >
<el-form ref="formRef" :rules="rules" :model="form" label-width="80px"> <el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
<el-form-item label="父节点:" prop="pid"> <el-form-item label="父节点:" prop="pid">
<el-select v-model="form.pid" style="width: 100%" placeholder="请选择父节点" clearable> <el-tree-select
<el-option v-model="form.pid"
v-for="item in secondLevelNode" style="width: 100%"
:key="item.id" placeholder="请选择父节点"
:label="item.reportDescribe" :data="TreeData"
:value="item.id" node-key="id"
></el-option> :props="defaultProps"
</el-select> clearable
:disabled="isEditMode"
check-strictly
/>
</el-form-item> </el-form-item>
<el-form-item label="名称:" prop="name" class="top"> <el-form-item label="名称:" prop="name" class="top">
<el-input v-model.trim="form.name" placeholder="请输入名称"></el-input> <el-input v-model.trim="form.name" placeholder="请输入名称"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="描述:" prop="reportDescribe" class="top"> <el-form-item label="描述:" prop="reportDescribe" class="top">
<el-input type="textarea" placeholder="请输入描述" v-model.trim="form.reportDescribe"></el-input> <el-input
type="textarea"
placeholder="请输入描述"
v-model.trim="form.reportDescribe"
></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
@@ -81,7 +92,6 @@
</template> </template>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -92,12 +102,12 @@ import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { import {
getReportDictList, updateDict,
addDict, addDict,
deleteDict deleteDict,
getDictTree
} from '@/api/system-boot/ReportTemplate' } from '@/api/system-boot/ReportTemplate'
// 弹出框是否可见 // 弹出框是否可见
const dialogVisible = ref<boolean>(false) const dialogVisible = ref<boolean>(false)
const dialogTitle = ref('新增配置项') const dialogTitle = ref('新增配置项')
@@ -113,21 +123,127 @@ const props = defineProps({
} }
}) })
const TreeData = computed(() => props.treeData) const TreeData = computed(() => props.treeData)
const secondLevelNode = ref<any[]>([]);
const treeExpandData = ref([]) const treeExpandData = ref([])
const tree = ref(null)
// Administration.vue
const emit = defineEmits(['refreshTree'])
// 刷新左侧树数据
const refreshTreeData = () => {
emit('refreshTree') // 触发父组件刷新树数据
}
const formData = reactive({
searchValue: '',
id: 0,
type: props.type
})
const form = reactive({
id: 0,
name: '',
reportDescribe: '',
pid: '',
sort: 0,
type: props.type
})
const defaultProps = {
children: 'children',
label: 'reportDescribe',
value: 'id' // 指定节点的值字段
}
const rules = {
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
reportDescribe: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
pid: [{ required: true, message: '请选择父节点', trigger: 'change' }]
}
// 判断是否为编辑模式
const isEditMode = computed(() => dialogTitle.value === '编辑配置项')
const tableStore = new TableStore({
url: '/system-boot/reportDict/getReportDictList',
method: 'POST',
showPage: false,
column: [
{ title: '配置项名称', field: 'name' },
{ title: '配置项描述', field: 'reportDescribe' },
{ title: '上级节点', field: 'pidName' },
{
title: '操作',
fixed: 'right',
width: '180',
render: 'buttons',
buttons: [
{
title: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
dialogTitle.value = '编辑配置项'
dialogVisible.value = true
Object.assign(form, {
id: row.id,
name: row.name,
reportDescribe: row.reportDescribe,
pid: row.pid,
sort: row.sort,
type: props.type
})
}
},
{
title: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'confirmButton',
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定删除该字典类型吗?'
},
click: row => {
let data = {
id: row.id
}
deleteDict(data).then(() => {
ElMessage.success('删除成功')
tableStore.index()
refreshTreeData()
})
}
}
]
}
],
resetCallback: () => {
tableStore.table.params.id = formData.id
}
})
tableStore.table.params.id = 0
tableStore.table.params.searchValue = ''
tableStore.table.params.type = props.type
provide('tableStore', tableStore)
const setDefaultExpandedKeys = (treeData: any[]) => { const setDefaultExpandedKeys = (treeData: any[]) => {
const firstLevelIds = treeData.map(item => item.id) const firstLevelIds = treeData.map(item => item.id)
treeExpandData.value = firstLevelIds treeExpandData.value = firstLevelIds
} }
// 默认选中第一个节点并触发事件
// 默认选中第一个节点
const selectFirstNode = () => { const selectFirstNode = () => {
if (props.treeData.length > 0 && tree.value) { if (props.treeData.length > 0 && tree.value) {
const firstNodeId = props.treeData[0].id const firstNodeId = props.treeData[0].id
tree.value.setCurrentKey(firstNodeId) tree.value.setCurrentKey(firstNodeId)
formData.id = firstNodeId formData.id = firstNodeId
const firstNode = props.treeData[0]
handleNodeClick(firstNode)
} }
} }
@@ -145,131 +261,19 @@ watch(
{ immediate: true } { immediate: true }
) )
const tree = ref(null)
const formData = reactive({
searchValue: '',
id: 0,
type: props.type
})
const form = reactive({
name: '',
reportDescribe: '',
pid: '',
sort: 0,
type: props.type
})
const defaultProps = {
children: 'children',
label: 'reportDescribe'
}
const rules = {
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
reportDescribe: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
pid: [{ required: true, message: '请选择父节点', trigger: 'change' }]
}
const tableStore = new TableStore({
url: getReportDictList(formData),
method: 'POST',
column: [
{ title: '配置项名称', field: 'name' },
{ title: '配置项描述', field: 'reportDescribe' },
{ title: '上级节点', field: 'pidName' },
{
title: '操作',fixed: 'right',
width: '180',
render: 'buttons',
buttons: [
{
title: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
popupEditRef.value.open('编辑', {
...row,
openDescribe: props.detail.openDescribe,
openLevel: props.detail.openLevel,
typeName: props.detail.name + row.name,
typeId: props.detail.id
})
}
},
{
title: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'confirmButton',
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定删除该字典类型吗?'
},
click: row => {
deleteDict([row.id]).then(() => {
ElMessage.success('删除成功')
tableStore.index()
})
}
}
]
}
],
loadCallback: () => {
}
})
provide('tableStore', tableStore)
// 存储当前选中节点的路径(包括自身)
const selectedNodePath = ref<any[]>([]);
// 处理节点点击事件 // 处理节点点击事件
const handleNodeClick = (node: any) => { const handleNodeClick = (node: any) => {
// 获取当前节点的完整路径 formData.id = node.id
const nodePath = tree.value?.getNodePath(node); tableStore.table.params.id = node.id
tableStore.table.params.type = props.type
// 更新当前选中节点的路径 tableStore.index()
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 = () => { const addTemplate = () => {
dialogTitle.value = '新增配置项' dialogTitle.value = '新增配置项'
dialogVisible.value = true dialogVisible.value = true
Object.assign(form, { Object.assign(form, {
id: 0,
name: '', name: '',
reportDescribe: '', reportDescribe: '',
pid: '', pid: '',
@@ -282,12 +286,18 @@ const addFn = () => {
formRef.value.validate(async (valid: boolean) => { formRef.value.validate(async (valid: boolean) => {
if (valid) { if (valid) {
try { try {
await addDict(form) if (dialogTitle.value === '编辑配置项') {
ElMessage.success('新增成功') await updateDict(form)
ElMessage.success('编辑成功')
} else {
await addDict(form)
ElMessage.success('新增成功')
}
dialogVisible.value = false dialogVisible.value = false
tableStore.index()
refreshTreeData()
} catch (error) { } catch (error) {
ElMessage.error('新增失败') ElMessage.error(dialogTitle.value === '编辑配置项' ? '编辑失败' : '新增失败')
} }
} }
}) })
@@ -299,18 +309,36 @@ const closeDialog = () => {
} }
onMounted(() => { onMounted(() => {
//tableStore.index() selectFirstNode()
}) })
</script> </script>
<style scoped> <style scoped>
.back { .dictiontary-list-detail {
position: absolute; padding: 10px;
top: 15px; background-color: #ffffff;
right: 15px; overflow: hidden;
font-size: 29px; }
color: #409eff;
cursor: pointer; .main-content {
margin-bottom: 20px;
}
.mt20 {
margin-top: 20px;
}
.tree-container {
border: 1px solid #ebeef5;
border-radius: 4px;
padding: 10px;
height: 100%;
}
:deep(.el-tree) {
height: 100%;
overflow-y: auto;
} }
</style> </style>

View File

@@ -20,6 +20,7 @@
:tree-data="treeDataForChild" :tree-data="treeDataForChild"
v-if="showDictionary" v-if="showDictionary"
@close="closeReportDictionary" @close="closeReportDictionary"
@refreshTree="handleRefreshTree"
/> />
<el-dialog <el-dialog
@@ -143,6 +144,15 @@ const openReportDictionary = async () => {
} }
} }
// 监听子组件触发的刷新事件
const handleRefreshTree = async () => {
try {
const res = await getDictTree({ type: Number(tableStore.table.params.type) })
treeDataForChild.value = res.data // 更新树数据
} catch (error) {
ElMessage.error('刷新树数据失败')
}
}
const closeReportDictionary = () => { const closeReportDictionary = () => {
showDictionary.value = false showDictionary.value = false
} }

View File

@@ -92,7 +92,7 @@ const submit = () => {
}) })
} else { } else {
updateTimer(form).then(res => { updateTimer(form).then(res => {
ElMessage.success('新增成功') ElMessage.success('修改成功')
dialogVisible.value = false dialogVisible.value = false
emit('submit') emit('submit')
}) })

View File

@@ -3,7 +3,7 @@
<!-- 折叠面板 --> <!-- 折叠面板 -->
<el-collapse v-model="activeNames" > <el-collapse v-model="activeNames" >
<!-- 客户端配置 --> <!-- 客户端配置 -->
<el-collapse-item title="客户端配置" name="1"> <el-collapse-item title="客户端配置" name="1">
<div style="width: 500px"> <div style="width: 500px">
<el-form ref="formRef" :model="form" label-width="auto" :rules="rules"> <el-form ref="formRef" :model="form" label-width="auto" :rules="rules">
@@ -37,7 +37,7 @@
> >
新增类型</el-button> 新增类型</el-button>
</div> </div>
<div style="height: 250px"> <div style="height: 200px">
<vxe-table <vxe-table
height="auto" height="auto"
:data="configForm[item.key]" :data="configForm[item.key]"