admin-govern/src/views/auth/userlist/index.vue

<template>
    <div class="default-main">
        <TableHeader>
            <template v-slot:select>
                <el-form-item label="用户状态">
                    <el-select v-model="tableStore.table.params.searchState" placeholder="选择用户状态">
                        <el-option
                            v-for="(item, index) in userState"
                            :label="item.label"
                            :key="index"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户类型:">
                    <el-select v-model="tableStore.table.params.casualUser" placeholder="选择用户类型">
                        <el-option
                            v-for="(item, index) in casualUser"
                            :label="item.label"
                            :key="index"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <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" />
    </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'

defineOptions({
    name: 'auth/userlist'
})
const tableStore = new TableStore({
    url: '/user-boot/user/list',
    method: 'POST',
    column: [
        { title: '用户名称', field: 'name', minWidth: '130' },
        { title: '登录名', field: 'loginName', minWidth: '130' },
        { title: '角色', field: 'role', minWidth: '130' },
        { title: '部门', field: 'deptName', minWidth: '200' },
        { title: '电话', field: 'phone', minWidth: '100' },
        { title: '注册时间', field: 'registerTime', minWidth: '130' },
        { title: '登录时间', field: 'loginTime', minWidth: '130' },
        { title: '类型', field: 'casualUserName', minWidth: '80' },
        { title: '状态', field: 'stateName', minWidth: '80' },
        {
            title: '操作',
            width: '180',
            render: 'buttons',
            fixed: 'right',
            buttons: [
                {
                    name: 'edit',
                    title: '编辑',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    render: 'tipButton',
                    disabled: row => {
                        return row.state !== 1
                    },
                    click: row => {}
                },
                {
                    name: 'edit',
                    title: '修改密码',
                    type: 'primary',
                    icon: 'el-icon-Lock',
                    render: 'tipButton',
                    disabled: row => {
                        return row.state !== 1
                    },
                    click: row => {}
                },
                {
                    name: 'edit',
                    title: '激活',
                    type: 'success',
                    icon: 'el-icon-Open',
                    render: 'tipButton',
                    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: 'tipButton',
                    disabled: row => {
                        return row.state !== 1 && row.state !== 3
                    },
                    click: row => {}
                }
            ]
        }
    ],

    loadCallback: () => {
        tableStore.table.data.forEach((item: any) => {
            item.deptName = item.deptName || '/'
            switch (item.casualUser) {
                case 0:
                    item.casualUserName = '临时用户'
                    break
                case 1:
                    item.casualUserName = '长期用户'
                    break
                default:
                    item.casualUserName = '/'
                    break
            }
            switch (item.state) {
                case 0:
                    item.stateName = '注销'
                    break
                case 1:
                    item.stateName = '正常'
                    break
                case 2:
                    item.stateName = '锁定'
                    break
                case 3:
                    item.stateName = '待审核'
                    break
                case 4:
                    item.stateName = '休眠'
                    break
                case 5:
                    item.stateName = '密码过期'
                    break
                default:
                    item.stateName = '/'
                    break
            }
        })
    }
})

provide('tableStore', tableStore)
tableStore.table.params.searchState = 1
tableStore.table.params.casualUser = -1
tableStore.table.params.orderBy = ''
const userState = [
    { label: '全部', value: -1 },
    { label: '注销', value: 0 },
    { label: '正常', value: 1 },
    { label: '锁定', value: 2 },
    { label: '待审核', value: 3 },
    { label: '休眠', value: 4 },
    { label: '密码过期', value: 5 }
]
const casualUser = [
    { label: '全部', value: -1 },
    { label: '临时用户', value: 0 },
    { label: '长期用户', value: 1 }
]
onMounted(() => {
    tableStore.index()
})

const addUser = () => {}
</script>