从 PHP 到 AI + Golang，程序员自救转型手记（四十四）：管理员账号管理

管理员账号管理
管理员账号管理接口之前已经创建好了，同时受益于基类的极大通用性，准备好的现成的接口有：

/admin/auth/admin/list
/admin/auth/admin/create
/admin/auth/admin/delete
/admin/auth/admin/get/pk
/admin/auth/admin/update/pk
回到前端，我们可以利用 src\api\table.ts 中的 TableManagerAPI 表格API请求函数生成类，一次性生成好请求以上接口的 请求函数，如下：

const api = new TableManagerAPI(‘/admin/auth/admin/’)，对应：

api.get(pk)
api.list(filter)
// …
但是生成好的 api 实例，不是我们自己使用的，而是直接传递给 表格管家 即可，而初始化表格管家时，最核心的是写好 table.column（列定义数据），代码如下：

import PopupForm from ‘./popupForm.vue’
import { TableManagerAPI } from ‘/@/api/table’
import { useTableManager } from ‘/@/hooks/useTableManager’

const api = new TableManagerAPI(‘/admin/auth/admin/’)

const tableManager = useTableManager({
api,
table: {
column: [
{ type: ‘selection’, align: ‘center’, operator: false },
{ label: ‘ID’, prop: ‘id’, align: ‘center’, operator: ‘eq’, width: 70 },
{ label: t(‘auth.admin.username’), prop: ‘username’, align: ‘center’, operator: ‘eq’, quickSearch: true },
{ label: t(‘auth.admin.nickname’), prop: ‘nickname’, align: ‘center’, operator: ‘LIKE’, quickSearch: true },
{ label: t(‘auth.admin.avatar’), prop: ‘avatar’, align: ‘center’, render: ‘image’, operator: false },
{ label: t(‘common.email’), prop: ‘email’, width: 180, align: ‘center’, operator: ‘LIKE’ },
{ label: t(‘common.mobile’), prop: ‘mobile’, align: ‘center’, operator: ‘LIKE’ },
{
label: t(‘common.operate’),
align: ‘center’,
width: ‘100’,
render: ‘buttons’,
buttons: optButtons,
operator: false,
},
],
filter: {
sort: ‘created_at’,
order: ‘desc’,
},
dblClickNotEditColumn: [‘status’],
}
})

tableManager.getData()
为保证可阅读性，以上代码略有简化，接下来，将 表格管家 实例，传递给 table 组件即可，如下：

<PopupForm :manager="tableManager" v-model:form-items="tableManager.form.items!" /> </div>