102 lines
3.0 KiB
TypeScript
102 lines
3.0 KiB
TypeScript
import type { ColumnDef } from '@tanstack/react-table'
|
|
|
|
import { DictLabel } from '@/components/label'
|
|
import { MenuIcon } from '@/components/menu-icon'
|
|
import { menuTypeDict, statusLabel, type MenuTypeValues, type StatusValues } from '@/enum'
|
|
import { formatDate, hasPermission } from '@/lib'
|
|
import type { MenuTree } from '@/schemas'
|
|
|
|
import { RowActions } from './row-actions.tsx'
|
|
|
|
export const createColumns = (): ColumnDef<MenuTree>[] => {
|
|
const showAction = hasPermission(['menu:update', 'menu:delete'], 'any')
|
|
|
|
const columns: ColumnDef<MenuTree>[] = [
|
|
{
|
|
accessorKey: 'name',
|
|
header: '菜单名称',
|
|
meta: { className: 'min-w-36 max-w-36' },
|
|
cell: ({ row }) => (
|
|
<div className='overflow-hidden flex gap-2 items-center'>
|
|
{row.original.icon && (
|
|
<MenuIcon className='size-4 text-gray-500' menuIconKey={row.original.icon} />
|
|
)}
|
|
{row.getValue('name')}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'path',
|
|
header: '菜单路径',
|
|
meta: { className: 'max-w-36' },
|
|
cell: ({ row }) => <div className='overflow-hidden'>{row.getValue('path')}</div>,
|
|
},
|
|
{
|
|
accessorKey: 'type',
|
|
header: '菜单类型',
|
|
meta: { className: 'max-w-20' },
|
|
cell: ({ row }) => {
|
|
const menuType = menuTypeDict[row.getValue('type') as MenuTypeValues]
|
|
return <DictLabel text={menuType} />
|
|
},
|
|
},
|
|
{
|
|
accessorKey: 'permission_code',
|
|
header: '权限字符',
|
|
meta: { className: 'max-w-36' },
|
|
cell: ({ row }) => <div>{row.getValue('permission_code')}</div>,
|
|
},
|
|
{
|
|
accessorKey: 'status',
|
|
header: '菜单状态',
|
|
meta: { className: 'max-w-36' },
|
|
cell: ({ row }) => {
|
|
const status = row.getValue('status') as StatusValues
|
|
const { text, dotClass } = statusLabel[status]
|
|
return <DictLabel text={text} dotClass={dotClass} />
|
|
},
|
|
},
|
|
{
|
|
accessorKey: 'hidden',
|
|
header: '是否隐藏',
|
|
meta: { className: 'max-w-36' },
|
|
cell: ({ row }) => <div>{row.getValue('hidden') ? '是' : '否'}</div>,
|
|
},
|
|
{
|
|
accessorKey: 'sort',
|
|
header: '菜单排序',
|
|
meta: { className: 'max-w-36' },
|
|
cell: ({ row }) => <div>{row.getValue('sort')}</div>,
|
|
},
|
|
{
|
|
accessorKey: 'created_at',
|
|
header: '创建时间',
|
|
meta: { className: 'max-w-36' },
|
|
cell: ({ row }) => {
|
|
const rawDate = row.getValue('created_at') as string
|
|
return <div className='overflow-hidden'>{formatDate(rawDate)}</div>
|
|
},
|
|
},
|
|
{
|
|
accessorKey: 'updated_at',
|
|
header: '修改时间',
|
|
meta: { className: 'max-w-36' },
|
|
cell: ({ row }) => {
|
|
const rawDate = row.getValue('updated_at') as string
|
|
return <div className='overflow-hidden'>{formatDate(rawDate)}</div>
|
|
},
|
|
},
|
|
]
|
|
|
|
if (showAction) {
|
|
columns.push({
|
|
id: 'actions',
|
|
enableHiding: false,
|
|
meta: { className: 'max-w-36 sticky right-0' },
|
|
cell: RowActions,
|
|
})
|
|
}
|
|
|
|
return columns
|
|
}
|