310 lines
9.7 KiB
Vue
310 lines
9.7 KiB
Vue
<template>
|
|
<div class="default-main">
|
|
<TableHeader ref="TableHeaderRef">
|
|
<template v-slot:select>
|
|
<el-form-item label="模板类型">
|
|
<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>
|
|
</template>
|
|
<template #operation>
|
|
<el-button icon="el-icon-Memo" type="primary" @click="openReportDictionary">报告字典管理</el-button>
|
|
<el-button icon="el-icon-Plus" type="primary" @click="add">新增模版</el-button>
|
|
</template>
|
|
</TableHeader>
|
|
<Table ref="tableRef" />
|
|
|
|
<Administration
|
|
:type="Number(tableStore.table.params.type)"
|
|
:tree-data="treeDataForChild"
|
|
v-if="showDictionary"
|
|
@close="closeReportDictionary"
|
|
@refreshTree="handleRefreshTree"
|
|
/>
|
|
|
|
<el-dialog
|
|
:title="title"
|
|
v-model="dialogVisible"
|
|
v-if="dialogVisible"
|
|
width="40%"
|
|
>
|
|
<el-row :gutter="20">
|
|
<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"
|
|
>
|
|
</el-tree>
|
|
</div
|
|
>
|
|
</el-col>
|
|
<el-col :span="13">
|
|
<el-form ref="formRef" :rules="rules" :model="form" label-width="60px">
|
|
<el-form-item label="名称:" prop="name">
|
|
<el-input
|
|
v-model.trim="form.name"
|
|
placeholder="请输入名称"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="描述:" prop="code" class="top">
|
|
<el-input
|
|
type="textarea"
|
|
:rows="2"
|
|
placeholder="请输入描述"
|
|
v-model.trim="form.code"
|
|
>
|
|
</el-input>
|
|
</el-form-item> </el-form
|
|
>
|
|
</el-col>
|
|
</el-row>
|
|
<template #footer>
|
|
<el-button @click="closeDialog">取 消</el-button>
|
|
<el-button type="primary" @click="addDetermine">确定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
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,getDictTree } from '@/api/system-boot/MonitoringPoint'
|
|
import { ElMessage } from 'element-plus'
|
|
import Administration from '@/views/system/ReportConfiguration/components/Administration.vue'
|
|
|
|
defineOptions({
|
|
name: 'BusinessAdministrator/ReportTemplate/ReportConfiguration'
|
|
})
|
|
|
|
const showDictionary = ref(false)
|
|
const formRef = ref(null)
|
|
const tree = ref(null)
|
|
// 弹出框标题
|
|
const title = ref<string>('新增模板')
|
|
|
|
// 弹出框是否可见
|
|
const dialogVisible = ref<boolean>(false)
|
|
// 是否为编辑模式
|
|
const isEdit = ref<boolean>(false)
|
|
// 表单数据
|
|
const form = ref({
|
|
id: '',
|
|
name: '',
|
|
code: '',
|
|
type: 0,
|
|
ids: []
|
|
})
|
|
|
|
|
|
// 表单验证规则
|
|
const rules = {
|
|
name: [
|
|
{ required: true, message: '请输入名称', trigger: 'blur' }
|
|
],
|
|
code: [
|
|
{ required: true, message: '请输入描述', trigger: 'blur' }
|
|
]
|
|
}
|
|
|
|
// 树形控件相关数据（假设）
|
|
const data = ref([]) // 树形数据源
|
|
const defaultProps = {
|
|
children: 'children',
|
|
label: 'reportDescribe'
|
|
}
|
|
|
|
const treeCheckedData = ref([]) // 默认选中的节点
|
|
const treeExpandData = ref([]) // 默认展开的节点
|
|
|
|
const options = ([
|
|
{ value: '0', label: '监测点报告' },
|
|
{ value: '1', label: '区域报告' },
|
|
])
|
|
|
|
|
|
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 handleRefreshTree = async () => {
|
|
try {
|
|
const res = await getDictTree({ type: Number(tableStore.table.params.type) })
|
|
treeDataForChild.value = res.data // 更新树数据
|
|
} catch (error) {
|
|
ElMessage.error('刷新树数据失败')
|
|
}
|
|
}
|
|
const closeReportDictionary = () => {
|
|
showDictionary.value = false
|
|
}
|
|
|
|
const tableStore: any = new TableStore({
|
|
url: '/system-boot/EventTemplate/getList',
|
|
method: 'POST',
|
|
column: [
|
|
{ field: 'name', title: '模板名称' },
|
|
{ field: 'code', title: '模板描述' },
|
|
|
|
{
|
|
title: '操作',fixed: 'right',
|
|
width: '220',
|
|
render: 'buttons',
|
|
buttons: [
|
|
{
|
|
name: 'edit',
|
|
title: '编辑',
|
|
type: 'primary',
|
|
icon: 'el-icon-Plus',
|
|
render: 'basicButton',
|
|
click: row => {
|
|
isEdit.value = true
|
|
title.value = '编辑模板'
|
|
dialogVisible.value = true
|
|
// 回显表单数据
|
|
form.value = {
|
|
id: row.id,
|
|
name: row.name,
|
|
code: row.code,
|
|
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)
|
|
})
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'del',
|
|
text: '删除',
|
|
type: 'danger',
|
|
icon: 'el-icon-Delete',
|
|
render: 'confirmButton',
|
|
popconfirm: {
|
|
confirmButtonText: '确认',
|
|
cancelButtonText: '取消',
|
|
confirmButtonType: 'danger',
|
|
title: '确定删除？'
|
|
},
|
|
click: row => {
|
|
let data = [row.id];
|
|
deleteData(data).then(res => {
|
|
ElMessage.success('删除成功')
|
|
tableStore.index()
|
|
})
|
|
}
|
|
}
|
|
]
|
|
}
|
|
],
|
|
|
|
loadCallback: () => { }
|
|
})
|
|
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 = false
|
|
title.value = '新增模板'
|
|
dialogVisible.value = true
|
|
// 初始化表单数据
|
|
form.value = {
|
|
id: '',
|
|
name: '',
|
|
code: '',
|
|
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 = () => {
|
|
if (formRef.value) {
|
|
formRef.value.validate((valid: boolean) => {
|
|
if (valid) {
|
|
if (isEdit.value) {
|
|
// 编辑逻辑
|
|
updateData(form.value).then(res => {
|
|
ElMessage.success('编辑模板成功')
|
|
closeDialog()
|
|
tableStore.index()
|
|
})
|
|
} else {
|
|
// 新增逻辑
|
|
addData(form.value).then(res => {
|
|
ElMessage.success('新增模板成功')
|
|
closeDialog()
|
|
tableStore.index()
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
const closeDialog = () => {
|
|
dialogVisible.value = false
|
|
// 重置表单
|
|
if (formRef.value) {
|
|
formRef.value.resetFields()
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
tableStore.index()
|
|
})
|
|
</script>
|