admin-sjzx/src/template/table.vue

<template>
    <div class='default-main'>
        <!-- 表头 -->
        <TableHeader date-picker>
            <template v-slot:select>
                <el-form-item label='关键词:'>
                    <el-input
                        style='width: 240px'
                        v-model='tableStore.table.params.searchValue'
                        clearable
                        placeholder='仅根据用户名/登录名'
                    />
                </el-form-item>
            </template>
            <template v-slot:operation>
                <el-button :icon='Plus' type='primary' @click='addUser'>添加</el-button>
            </template>
        </TableHeader>
        <!-- 表格 -->
        <Table ref='tableRef' />
        <!-- 弹框 -->
        <PopupEdit ref='popupEdit' />
    </div>
</template>
<script setup lang='ts'>
import { Plus } from '@element-plus/icons-vue'
import { ref, onMounted, provide, defineOptions } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import PopupEdit from './dialog.vue'
import { mainHeight } from '@/utils/layout'

// 注意名字不要重复，若要保持页面存活，名字需要和路由admin后面的字符保持一致
defineOptions({
    name: 'auth/userlist'
})
const popupEdit = ref()
const tableStore = new TableStore({
    // 若页面表格高度需要调整，请修改publicHeight(内容区域除表格外其他内容的高度)
    // publicHeight: 60,
    url: '/user-boot/user/list',
    method: 'POST',
    column: [
        { title: '用户名称', field: 'name', minWidth: '130' },
        { title: '登录名', field: 'loginName', minWidth: '130' },
        { title: '角色', field: 'roleName', minWidth: '130' },
        { title: '部门', field: 'deptName', minWidth: '200' },
        { title: '电话', field: 'phoneShow', minWidth: '100' },
        { title: '注册时间', field: 'registerTime', minWidth: '130' },
        { title: '登录时间', field: 'loginTime', minWidth: '130' },
        { title: '类型', field: 'casualUserName', minWidth: '80' },
        {
            title: '状态',
            field: 'state',
            width: '100',
            render: 'tag',
            custom: {
                0: 'danger',
                1: 'success',
                2: 'warning',
                3: 'warning',
                4: 'info',
                5: 'danger'
            },
            replaceValue: {
                0: '注销',
                1: '正常',
                2: '锁定',
                3: '待审核',
                4: '休眠',
                5: '密码过期'
            }
        },
        {
            title: '操作',
            width: '180',
            render: 'buttons',
            fixed: 'right',
            buttons: [
                {
                    name: 'edit',
                    title: '编辑',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    render: 'basicButton',
                    disabled: row => {
                        return row.state !== 1
                    },
                    click: row => {
                    }
                },
                {
                    name: 'edit',
                    title: '修改密码',
                    type: 'primary',
                    icon: 'el-icon-Lock',
                    render: 'basicButton',
                    disabled: row => {
                        return row.state !== 1
                    },
                    click: row => {
                        ElMessageBox.prompt('二次校验密码确认', '注销用户', {
                            confirmButtonText: '确认',
                            cancelButtonText: '取消',
                            inputType: 'password'
                        }).then(({ value }) => {
                        })
                    }
                },
                {
                    name: 'edit',
                    title: '激活',
                    type: 'primary',
                    icon: 'el-icon-Open',
                    render: 'basicButton',
                    disabled: row => {
                        return row.state !== 2 && row.state !== 5 && row.state !== 0 && row.state !== 4
                    },
                    click: row => {
                    }
                },
                {
                    name: 'edit',
                    title: '注销',
                    type: 'danger',
                    icon: 'el-icon-SwitchButton',
                    render: 'basicButton',
                    disabled: row => {
                        return row.state !== 1 && row.state !== 3
                    },
                    click: row => {
                    }
                }
            ]
        }
    ],

    loadCallback: () => {
        tableStore.table.data.forEach((item: any) => {
            item.deptName = item.deptName || '/'
            item.phoneShow = item.phone || '/'
            item.roleName = item.role.length ? item.role : '/'
            switch (item.casualUser) {
                case 0:
                    item.casualUserName = '临时用户'
                    break
                case 1:
                    item.casualUserName = '长期用户'
                    break
                default:
                    item.casualUserName = '/'
                    break
            }
        })
    }
})
// 注入到子组件
provide('tableStore', tableStore)
// 默认参数 参数多的话可以使用Object.assign方法
tableStore.table.params.searchState = 1
tableStore.table.params.searchValue = ''
tableStore.table.params.casualUser = -1
tableStore.table.params.orderBy = ''
onMounted(() => {
    // 加载数据
    tableStore.index()
})

// 弹框
const addUser = () => {
    popupEdit.value.open('新增用户')
}
</script>