admin-govern/src/views/setting/dictionary/tree/index.vue

<template>
    <div class='default-main'>
        <div class='custom-table-header'>
            <div style='flex: 1; font-weight: 700'>字典树列表</div>
            <el-button :icon='Plus' type='primary' @click='addMenu'>新增字典类型</el-button>
        </div>
        <Table ref='tableRef' />
        <PopupForm ref='popupFormRef'></PopupForm>
    </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 { ElMessage } from 'element-plus'
import PopupForm from './popupForm.vue'
import { dicDelete } from '@/api/system-boot/dic'

defineOptions({
    name: 'setting/dictionary/tree'
})

const popupFormRef = ref()
const tableStore = new TableStore({
    url: '/system-boot/dic/dicTree',
    method: 'GET',
    column: [
        { title: '字典名称', field: 'name', treeNode: true, align: 'left' },
        // { title: '排序', field: 'sort',width:'80'  },
        { title: '编码', field: 'code' },
        { title: '描述', field: 'remark' },
        {
            title: '状态',
            field: 'status',
            width: '80',
            render: 'tag',
            custom: {
                0: 'success',
                1: 'warning',
                2: 'danger'
            },
            replaceValue: {
                0: '正常',
                1: '禁用',
                2: '删除'
            }
        },
        {
            title: '操作',
            width: '180',
            render: 'buttons',
            fixed: 'right',
            buttons: [
                {
                    title: '新增',
                    type: 'primary',
                    icon: 'el-icon-Plus',
                    render: 'tipButton',
                    click: row => {
                        popupFormRef.value.open('新增字典类型', {
                            name: '',
                            code: '',
                            remark: '',
                            sort: 0,
                            type: 0,
                            pid: row.id,
                            id: ''
                        })
                    }
                },
                {
                    title: '编辑',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    render: 'tipButton',
                    click: row => {
                        popupFormRef.value.open('编辑字典类型', row)
                    }
                },
                {
                    title: '删除',
                    type: 'danger',
                    icon: 'el-icon-Delete',
                    render: 'confirmButton',
                    popconfirm: {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        confirmButtonType: 'danger',
                        title: '确定删除该字典类型吗？'
                    },
                    click: row => {
                        dicDelete(row.id).then(() => {
                            ElMessage.success('删除成功')
                            tableStore.index()
                        })
                    }
                }
            ]
        }
    ]
})

provide('tableStore', tableStore)
tableStore.table.params.searchState = 0
onMounted(() => {
    tableStore.index()
})
const addMenu = () => {
    popupFormRef.value.open('新增字典类型')
}
</script>