chat-admin/src/views/UserView.vue

<template>
    <PagingTable url="/admin/users" :where="where" ref="table">
        <template #filter>
            <EnumSelect :enum="UserRole" v-model="where.roles"></EnumSelect>
            <ElButton :icon="Plus" @click="onEdit()">添加</ElButton>
        </template>
        <ElTableColumn prop="id" label="#" width="80" />
        <ElTableColumn prop="username" label="用户名" min-width="120" />
        <ElTableColumn prop="name" label="昵称" min-width="120" />
        <ElTableColumn prop="phone" label="手机" min-width="120" />
        <ElTableColumn prop="createdAt" label="注册时间" :formatter="timeFormatter" width="150" />
        <ElTableColumn prop="invitor" label="上级" />
        <ElTableColumn label="操作" align="center" width="160">
            <template #default="{ row }">
                <ElButton @click="getToken(row)">Token</ElButton>
                <ElButton @click="onEdit(row)">编辑</ElButton>
            </template>
        </ElTableColumn>
    </PagingTable>
    <EditDialog v-model="showEditDialog" :model="model" :rules="rules" :on-submit="submit" @success="table.refresh()">
        <ElFormItem prop="username" label="用户名">
            <ElInput v-model="model.username" placeholder="请输入用户名" />
        </ElFormItem>
        <ElFormItem prop="name" label="昵称">
            <ElInput v-model="model.name" placeholder="请输入昵称" />
        </ElFormItem>
        <ElFormItem prop="phone" label="手机">
            <ElInput v-model="model.phone" placeholder="请输入手机" />
        </ElFormItem>
        <ElFormItem prop="password" label="密码" v-if="!model.id">
            <ElInput v-model="model.password" placeholder="请输入密码" />
        </ElFormItem>
        <ElFormItem prop="roles" label="角色">
            <EnumSelect v-model="model.roles" :enum="UserRole" multiple />
        </ElFormItem>
        <ElFormItem prop="orgId" label="企业ID" v-if="model.roles && model.roles[0] === 'org'">
            <ElInputNumber :controls="false" v-model="model.orgId" placeholder="请输入企业ID" />
        </ElFormItem>
    </EditDialog>
</template>
<script setup>
import { ref } from 'vue'
import PagingTable from '@/components/PagingTable.vue'
import { useTimeFormatter } from '@/utils/formatter'
import { Plus } from '@vicons/tabler'
import EditDialog from '@/components/EditDialog.vue'
import { setupEditDialog } from '@/utils/editDialog'
import EnumSelect from '@/components/EnumSelect.vue'
import { UserRole } from '@/enums'
import { http } from '@/plugins/http'
import { ElMessage } from 'element-plus'
import { useClipboard } from '@vueuse/core'

const where = ref({ roles: 'user' })
const timeFormatter = useTimeFormatter()
const table = ref(null)
const model = ref({})
const rules = {
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
    phone: [{ required: true, message: '请输入手机', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    roles: [{ required: true, message: '请选择角色', trigger: 'blur' }],
    orgId: [{ required: true, message: '请输入企业ID', trigger: 'blur' }]
}
const { showEditDialog, onEdit } = setupEditDialog(model)
async function submit() {
    if (model.value.roles[0] !== 'org') {
        model.value.orgId = null
    }
    await http.put(model.value.id ? `/admin/users/${model.value.id}` : '/admin/users', model.value)
    ElMessage.success('保存成功')
}
function getToken(row) {
    http.get(`/auth/admin/user/${row.id}/token`).then((res) => {
        const { copy } = useClipboard({ legacy: true })
        copy(res.access_token)
        ElMessage.success('复制成功')
    })
}
</script>