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

<template>
    <div class="default-main" style="position: relative">
        <TableHeader>
            <template #select>
                <el-form-item label="过滤筛选">
                    <el-input maxlength="32" show-word-limit style="width: 240px"
                        v-model.trim="tableStore.table.params.searchValue" clearable placeholder="请输入名称或编码筛选" />
                </el-form-item>
            </template>
            <template #operation>
                <el-button :icon="Plus" type="primary" @click="add">新增字典类型</el-button>
            </template>
        </TableHeader>
        <Table ref="tableRef" />
        <PopupEdit ref="popupEditRef"></PopupEdit>
        <Detail ref="detailRef" :detail="detail" @close="detail = null" v-if="detail"></Detail>
    </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 PopupEdit from './popupEdit.vue'
import { dictTypeDelete } from '@/api/system-boot/dictType'
import Detail from './detail.vue'

defineOptions({
    name: 'system-boot/dictType/list'
})
const popupEditRef = ref()
const detail = ref<anyObj | null>(null)
const tableStore = new TableStore({
    url: '/system-boot/dictType/list',
    method: 'POST',
    column: [
        {
            title: '序号', width: 80, formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        { title: '名称', field: 'name' },
        { title: '编码', field: 'code' },
        { title: '开启等级', field: 'openLevelName' },
        { title: '开启算法', field: 'openDescribeName' },
        { title: '字典描述', field: 'remark' },
        { title: '创建时间', field: 'createTime' },
        { title: '更新时间', field: 'updateTime' },
        {
            title: '状态',
            field: 'stateName',
            width: '80',
            render: 'tag',
            custom: {
                '正常': 'success',
                '删除': 'danger'
            },
        },
        {
            title: '操作',
            width: '180',
            render: 'buttons',
            fixed: 'right',
            buttons: [
                {
                    title: '查看',
                    type: 'primary',
                    icon: 'el-icon-ZoomIn',
                    render: 'basicButton',
                    click: row => {
                        detail.value = row
                    }
                },
                {
                    title: '编辑',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    render: 'basicButton',
                    click: row => {
                        popupEditRef.value.open('编辑字典类型', row)
                    }
                },
                {
                    title: '删除',
                    type: 'danger',
                    icon: 'el-icon-Delete',
                    render: 'confirmButton',
                    popconfirm: {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        confirmButtonType: 'danger',
                        title: '确定删除该字典类型吗？'
                    },
                    click: row => {
                        dictTypeDelete([row.id]).then(() => {
                            ElMessage.success('删除成功')
                            tableStore.index()
                        })
                    }
                }
            ]
        }
    ],
    loadCallback: () => {
        tableStore.table.data.forEach((item: any) => {
            item.stateName = item.state === 1 ? '正常' : '删除'
            item.openLevelName = item.openLevel === 1 ? '开启' : '不开启'
            item.openDescribeName = item.openDescribe === 1 ? '开启' : '不开启'
        })
    }
})

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