admin-sjzx/src/views/system/ReportConfiguration/components/disposition.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">
                        <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="tableStore.table.params.type"
            v-if="showDictionary"
            @close="closeReportDictionary"
            />


         <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,getList,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,
})

// 表单验证规则
const rules = {
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入描述', trigger: 'blur' }
  ]
}

// 树形控件相关数据（假设）
const data = ref([]) // 树形数据源
const defaultProps = {
  children: 'children',
  label: 'label'
}
const treeCheckedData = ref([]) // 默认选中的节点
const treeExpandData = ref([]) // 默认展开的节点

const options = ([
    { value: '0', label: '监测点报告' },
    { value: '1', label: '区域报告' },
])

const openReportDictionary = () => {
  console.log('点击了报告字典管理按钮')
  showDictionary.value = true
  console.log('showDictionary 当前值:', showDictionary.value)
}

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
                        }
                    }
                },

                {
                    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 add = () => {
    isEdit.value = true
    title.value = '新增模板'
    dialogVisible.value = true
    // 初始化表单数据
    form.value = {
        id: '',
        name: '',
        code: '',
        type: tableStore.table.params.type
    }
  
}

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>