dark
2 years ago
12 changed files with 337 additions and 124 deletions
-
13src/locales/lang/en-US.ts
-
3src/locales/lang/pages/system/menus/en-US.ts
-
24src/locales/lang/pages/system/menus/zh-CN.ts
-
12src/locales/lang/zh-CN.ts
-
45src/pages/system/menus/index.tsx
-
13src/pages/system/menus/store.ts
-
100src/pages/system/roles/index.tsx
-
25src/pages/system/roles/store.ts
-
22src/pages/system/roles/style.ts
-
4src/service/base.ts
-
4src/service/system.ts
-
2vite.config.ts
@ -0,0 +1,3 @@ |
|||||
|
export default { |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,24 @@ |
|||||
|
export default { |
||||
|
title: '菜单', |
||||
|
setting: '配置', |
||||
|
saveSuccess: '保存成功', |
||||
|
form:{ |
||||
|
title: '菜单名称', |
||||
|
parent: '上级菜单', |
||||
|
type:'类型', |
||||
|
typeOptions: { |
||||
|
menu: '菜单', |
||||
|
iframe: 'iframe', |
||||
|
link: '外链', |
||||
|
button: '按钮', |
||||
|
}, |
||||
|
name: '别名', |
||||
|
icon: '图标', |
||||
|
sort: '排序', |
||||
|
path: '路由', |
||||
|
component: '视图', |
||||
|
componentHelp: '视图路径，相对于src/pages，菜单组可以不填', |
||||
|
save: '保存', |
||||
|
}, |
||||
|
button: '按钮' |
||||
|
} |
||||
@ -1,15 +1,109 @@ |
|||||
import { PageContainer } from '@ant-design/pro-components' |
|
||||
|
import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components' |
||||
import { createLazyFileRoute } from '@tanstack/react-router' |
import { createLazyFileRoute } from '@tanstack/react-router' |
||||
|
import { useStyle } from './style.ts' |
||||
|
import { useMemo, useRef } from 'react' |
||||
|
import { useAtomValue } from 'jotai' |
||||
|
import { rolesAtom } from './store.ts' |
||||
|
import { useTranslation } from '@/i18n.ts' |
||||
|
import { Button, Space, Table } from 'antd' |
||||
|
import { PlusOutlined } from '@ant-design/icons' |
||||
|
|
||||
const Roles = () => { |
const Roles = () => { |
||||
|
|
||||
|
const { t } = useTranslation() |
||||
|
const { styles } = useStyle() |
||||
|
const actionRef = useRef<ActionType>() |
||||
|
const { data, isLoading } = useAtomValue(rolesAtom) |
||||
|
|
||||
|
const columns = useMemo(() => { |
||||
|
|
||||
|
return [ |
||||
|
{ title: 'id', dataIndex: 'id', hideInTable: true, hideInSearch: true, }, |
||||
|
{ title: '名称', dataIndex: 'name' }, |
||||
|
{ title: '别名', dataIndex: 'code' }, |
||||
|
{ title: '状态', dataIndex: 'status' }, |
||||
|
{ title: '排序', dataIndex: 'sort', valueType: 'indexBorder', }, |
||||
|
{ title: '备注', dataIndex: 'remark' }, |
||||
|
{ |
||||
|
title: '操作', valueType: 'option', |
||||
|
key: 'option', |
||||
|
render: (text, record, _, action) => [ |
||||
|
<a |
||||
|
key="editable" |
||||
|
onClick={() => { |
||||
|
action?.startEditable?.(record.id) |
||||
|
}} |
||||
|
> |
||||
|
编辑 |
||||
|
</a>, |
||||
|
<a href={record.url} target="_blank" rel="noopener noreferrer" key="view"> |
||||
|
查看 |
||||
|
</a>, |
||||
|
<a href={record.url} target="_blank" rel="noopener noreferrer" key="del"> |
||||
|
删除 |
||||
|
</a>, |
||||
|
], |
||||
|
}, |
||||
|
] as ProColumns[] |
||||
|
}, []) |
||||
|
|
||||
|
return ( |
||||
|
<PageContainer breadcrumbRender={false} title={false} className={styles.container}> |
||||
|
<ProTable |
||||
|
rowKey={'id'} |
||||
|
actionRef={actionRef} |
||||
|
headerTitle={t('system.roles.title', '角色管理')} |
||||
|
columns={columns} |
||||
|
loading={isLoading} |
||||
|
dataSource={data?.rows} |
||||
|
search={false} |
||||
|
rowSelection={{ |
||||
|
selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT], |
||||
|
}} |
||||
|
tableAlertOptionRender={() => { |
||||
return ( |
return ( |
||||
<PageContainer breadcrumbRender={false}> |
|
||||
|
<Space size={16}> |
||||
|
<a>批量删除</a> |
||||
|
</Space> |
||||
|
); |
||||
|
}} |
||||
|
toolbar={{ |
||||
|
search: { |
||||
|
onSearch: (value: string) => { |
||||
|
alert(value) |
||||
|
}, |
||||
|
}, |
||||
|
onSearch: (value) => { |
||||
|
console.log('value', value) |
||||
|
}, |
||||
|
actions: [ |
||||
|
|
||||
|
<Button |
||||
|
key="button" |
||||
|
icon={<PlusOutlined/>} |
||||
|
onClick={() => { |
||||
|
actionRef.current?.reload() |
||||
|
}} |
||||
|
type="primary" |
||||
|
> |
||||
|
新建 |
||||
|
</Button>, |
||||
|
] |
||||
|
}} |
||||
|
pagination={{ |
||||
|
total: data?.total, |
||||
|
current: data?.page, |
||||
|
pageSize: data?.pageSize, |
||||
|
onChange: (page) => { |
||||
|
console.log('page', page) |
||||
|
} |
||||
|
}} |
||||
|
/> |
||||
</PageContainer> |
</PageContainer> |
||||
) |
) |
||||
} |
} |
||||
|
|
||||
export const Route = createLazyFileRoute("/system/roles")({ |
|
||||
|
export const Route = createLazyFileRoute('/system/roles')({ |
||||
component: Roles |
component: Roles |
||||
}) |
}) |
||||
|
|
||||
@ -0,0 +1,25 @@ |
|||||
|
import { atom } from 'jotai/index' |
||||
|
import { IRole } from '@/types/roles' |
||||
|
import { atomWithQuery } from 'jotai-tanstack-query' |
||||
|
import { IPage, IPageResult } from '@/types' |
||||
|
import systemServ from '@/service/system.ts' |
||||
|
|
||||
|
type SearchParams = IPage & IRole |
||||
|
|
||||
|
export const idAtom = atom(0) |
||||
|
|
||||
|
export const IdsAtom = atom([]) |
||||
|
|
||||
|
export const roleAtom = atom<IRole>(undefined as unknown as IRole) |
||||
|
|
||||
|
export const searchAtom = atom<SearchParams>({} as SearchParams) |
||||
|
|
||||
|
|
||||
|
export const rolesAtom = atomWithQuery<any, IPageResult<IRole>>((get) => { |
||||
|
return { |
||||
|
queryKey: [ 'roles', get(searchAtom) ], |
||||
|
queryFn: async ({ queryKey: [ , params ] }) => { |
||||
|
return await systemServ.role.list(params as SearchParams) |
||||
|
}, |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,22 @@ |
|||||
|
import { createStyles } from '@/theme' |
||||
|
|
||||
|
export const useStyle = createStyles(({ token, css, cx, prefixCls }) => { |
||||
|
const prefix = `${prefixCls}-${token?.proPrefix}-role-page`; |
||||
|
|
||||
|
|
||||
|
const box = css`
|
||||
|
flex: 1; |
||||
|
background: ${token.colorBgContainer}; |
||||
|
`
|
||||
|
const form = css`
|
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
min-width: 500px; |
||||
|
`
|
||||
|
|
||||
|
return { |
||||
|
container: cx(prefix), |
||||
|
box, |
||||
|
form, |
||||
|
} |
||||
|
}) |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue