jude-user-recharge/web/src/views/backend/userCenter/user/index.vue

<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info"
            show-icon />

        <!-- 表格顶部菜单 -->
        <TableHeader :buttons="['refresh', 'columnDisplay']">
            <el-input class="form-input" v-model="baTable.table.filter!.name" @input="onSearchInput"
                placeholder="用户名称" clearable />
            <el-select class="form-input" v-model="baTable.table.filter!.status" @change="onSearchInput"
                placeholder="状态" clearable>
                <el-option label="启用" value="1" />
                <el-option label="禁用" value="0" />
            </el-select>
            <template #quickSearchPrepend>
                <el-button type="primary" @click="onAdd">添加</el-button>
            </template>
        </TableHeader>

        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table>
            <template #operate>
                <el-table-column prop="operate" align="center" label="操作" min-width="210">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="onEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                        <el-button type="primary" plain size="small" @click="detail(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </template>
        </Table>

        <!-- 表单 -->
        <PopupForm @success="baTable.getIndex()" />

        <!-- 详情弹框 -->
        <DetailDialog ref="detailDialogRef" />
    </div>
</template>

<script setup lang="ts">
import { provide, useTemplateRef } from 'vue'
import { cloneDeep } from 'lodash-es'
import baTableClass from '/@/utils/baTable'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import PopupForm from './popupForm.vue'
import DetailDialog from './detailDialog.vue'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import { del } from '/@/api/backend/userCenter/user'
import { ElMessageBox } from 'element-plus'

defineOptions({
    name: 'userCenter/user',
})

const { t } = useI18n()

const baTable = new baTableClass(
    new baTableApi('/admin/userCenter.user/'),
    {
        column: [
            { label: '编号', prop: 'id', align: 'center', width: 70 },
            {
                label: '用户名',
                prop: 'name',
                align: 'center',
                minWidth: 120
            },
            {
                label: '邮箱',
                prop: 'email',
                align: 'center',
                minWidth: 170
            },
            {
                label: '企业',
                prop: 'company',
                align: 'center',
                minWidth: 160
            },
            {
                label: '状态',
                prop: 'status',
                align: 'center',
                render: 'tag',
                custom: { '1': 'success', '0': 'danger' },
                replaceValue: { '1': '启用', '0': '禁用' },
                minWidth: 150
            },
            {
                label: '邀请人',
                prop: 'inviter',
                align: 'center',
                minWidth: 120
            },
            {
                label: '创建时间',
                prop: 'create_time',
                align: 'center',
                minWidth: 160
            },
            {
                label: '最后登录时间',
                prop: 'last_login_time',
                align: 'center',
                minWidth: 160
            },
            {
                label: '操作',
                align: 'center',
                render: 'slot',
                slotName: 'operate',
                operator: false,
            },
        ],
        dblClickNotEditColumn: [undefined,],
    },
    {
        defaultItems: {
            status: '1',
        },
    }
)

baTable.mount()
baTable.getData()
provide('baTable', baTable)

// 搜索
const onSearchInput = () => {
    baTable.table.filter!.page = 1
    baTable.getData()
}

// 删除
const handleDelete = (row: TableRow) => {
    ElMessageBox.confirm(`确定删除用户"${row.name}"吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        del({ id: row.id }).then(() => {
            baTable.getIndex()
        })
    })
}

const openForm = (type: 'Add' | 'Edit', row?: TableRow) => {
    if (type === 'Edit' && !row) return
    baTable.form.items = row ? cloneDeep(row) : cloneDeep(baTable.form.defaultItems)
    baTable.form.operate = type
    baTable.form.operateIds = row && baTable.table.pk ? [row[baTable.table.pk]] : []
}

const onAdd = () => openForm('Add')
const onEdit = (row: TableRow) => openForm('Edit', row)

// 详情弹框引用
const detailDialogRef = useTemplateRef('detailDialogRef')

// 详情
const detail = (row: TableRow) => {
    if (detailDialogRef.value) {
        detailDialogRef.value.open(row)
    }
}
</script>

<style scoped lang="scss">
.form-input {
    width: 160px;
    margin:0 5px;
}
</style>