admin-sjzx/src/views/system/ReportConfiguration/components/Administration.vue

<template>

   <div class="dictiontary-list-detail child-router">
         <!-- 主体区域：左侧树 + 右侧表格 -->
    <el-row :gutter="20" class="main-content">
      <!-- 左侧树 -->
      <el-col :span="6">
        <div class="tree-container">
          <el-tree
            @node-click="clickNode"
            :expand-on-click-node="false"
            :highlight-current="true"
            :data="TreeData"
            node-key="id"
            :default-expanded-keys="treeExpandData"
            :props="defaultProps"
            ref="tree"
          ></el-tree>
        </div>
      </el-col>

      <!-- 右侧表格 -->
      <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" />
      </el-col>
    </el-row>


      <!-- 新增 -->
    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="30%"
      @close="closeDialog"
    >
      <el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="父节点:" prop="pid">
          <el-select v-model="form.pid" style="width: 100%" placeholder="请选择父节点" clearable>
            <el-option
              v-for="item in secondLevelNode"
              :key="item.id"
              :label="item.reportDescribe"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称:" prop="name" class="top">
          <el-input v-model.trim="form.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="描述:" prop="reportDescribe" class="top">
          <el-input type="textarea" placeholder="请输入描述" v-model.trim="form.reportDescribe"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="addFn">确 定</el-button>
      </template>
    </el-dialog>
  </div>
 
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
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('新增配置项')
const formRef = ref()
const props = defineProps({
  type: {
    type: Number,
    default: undefined
  }
})

const formData = reactive({
  searchValue: '',
  id: '0',
  type: props.type
})

const form = reactive({
  name: '',
  reportDescribe: '',
  pid: '',
  sort: 0,
  type: props.type
})

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: '/system-boot/reportDict/getReportDictList',
    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 addTemplate = () => {
  dialogTitle.value = '新增配置项'
  dialogVisible.value = true
  Object.assign(form, {
    name: '',
    reportDescribe: '',
    pid: '',
    sort: 0,
    type: props.type
  })
}

const addFn = () => {
  formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      try {
        await addDict(form)
        ElMessage.success('新增成功')
        dialogVisible.value = false
     
      } catch (error) {
        ElMessage.error('新增失败')
      }
    }
  })
}

const closeDialog = () => {
  dialogVisible.value = false
  formRef.value?.resetFields()
}

onMounted(() => {
    tableStore.index()
})

</script>

<style scoped>
.back {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 29px;
  color: #409eff;
  cursor: pointer;
}
</style>