Skip to content

Commit

Permalink
add: permission config page
Browse files Browse the repository at this point in the history
  • Loading branch information
Winme committed Feb 2, 2020
1 parent 2af833b commit f2a5ac9
Show file tree
Hide file tree
Showing 24 changed files with 490 additions and 106 deletions.
2 changes: 1 addition & 1 deletion config-overrides.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ module.exports = override(
addWebpackAlias({
'~': resolve('src')
}),
// addWebpackPlugin(new BundleAnalyzerPlugin()),
addWebpackPlugin(new BundleAnalyzerPlugin()),
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
Expand Down
3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,15 @@
"antd": "^4.0.0-rc.0",
"axios": "^0.19.0",
"mockjs": "^1.1.0",
"moment": "^2.24.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-hook-form": "^4.8.0",
"react-intl": "^3.11.0",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"source-map-explorer": "^2.2.2",
"styled-components": "^4.4.1",
"typescript": "~3.7.2"
},
Expand Down
35 changes: 29 additions & 6 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react'
import React, { useEffect } from 'react'
import { BrowserRouter } from 'react-router-dom'
import LoginPage from './pages/login'
import LayoutPage from './pages/layout'
Expand All @@ -7,6 +7,11 @@ import { useSelector } from 'react-redux'
import { AppState } from './stores'
import { lacaleConfig } from './locales'
import RenderRoutes, { RouteProps } from './routes/config'
import { ConfigProvider } from 'antd'
import enUS from 'antd/es/locale/en_US'
import zhCN from 'antd/es/locale/zh_CN'
import moment from 'moment'
import 'moment/locale/zh-cn'

const rootRoutes: RouteProps[] = [
{
Expand All @@ -30,12 +35,30 @@ const rootRoutes: RouteProps[] = [
const App: React.FC = () => {
const { locale } = useSelector((state: AppState) => state.globalReducer)

useEffect(() => {
if (locale === 'en_US') {
moment.locale('en')
} else if (locale === 'zh_CN') {
moment.locale('zh-cn')
}
}, [locale])

const getAntdLocale = () => {
if (locale === 'en_US') {
return enUS
} else if (locale === 'zh_CN') {
return zhCN
}
}

return (
<IntlProvider locale={locale.split('_')[0]} messages={lacaleConfig[locale]}>
<BrowserRouter>
<RenderRoutes routes={rootRoutes} />
</BrowserRouter>
</IntlProvider>
<ConfigProvider locale={getAntdLocale()} componentSize="middle">
<IntlProvider locale={locale.split('_')[0]} messages={lacaleConfig[locale]}>
<BrowserRouter>
<RenderRoutes routes={rootRoutes} />
</BrowserRouter>
</IntlProvider>
</ConfigProvider>
)
}

Expand Down
2 changes: 1 addition & 1 deletion src/actions/tagsView.action.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ interface SetActiveTag extends Action<SETACTIVETAG> {
payload: TagItem['id']
}
interface AddTag extends Action<ADDTAG> {
payload: Omit<TagItem, 'closable'>
payload: TagItem
}
interface RemoveTag extends Action<REMOVETAG> {
payload: TagItem['id']
Expand Down
3 changes: 1 addition & 2 deletions src/interface/permission/role.interface.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
export type RoleStatus = 'enabled' | 'disabled' | 'all'

export type RoleStatus = 'enabled' | 'disabled'
export interface Role {
name: {
zh_CN: string
Expand Down
4 changes: 3 additions & 1 deletion src/locales/en-US/global/tips.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,7 @@ export const enUS_globalTips = {
'gloabal.tips.authorize': 'Authorize',
'gloabal.tips.delete': 'Delete',
'gloabal.tips.create': 'Create',
'gloabal.tips.modify': 'Modify'
'gloabal.tips.modify': 'Modify',
'gloabal.tips.search': 'Search',
'gloabal.tips.reset': 'Reset'
}
5 changes: 4 additions & 1 deletion src/locales/en-US/permission/role.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,8 @@ export const enUS_permissionRole = {
'app.permission.role.status': 'Status',
'app.permission.role.status.all': 'All',
'app.permission.role.status.enabled': 'Enabled',
'app.permission.role.status.disabled': 'Disabled'
'app.permission.role.status.disabled': 'Disabled',
'app.permission.role.nameRequired': 'Please input the role name',
'app.permission.role.codeRequired': 'Please input the role code',
'app.permission.role.statusRequired': 'Please select the enabled status'
}
4 changes: 3 additions & 1 deletion src/locales/zh-CN/global/tips.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,7 @@ export const zhCN_globalTips = {
'gloabal.tips.authorize': '授权',
'gloabal.tips.delete': '删除',
'gloabal.tips.create': '新建',
'gloabal.tips.modify': '修改'
'gloabal.tips.modify': '修改',
'gloabal.tips.search': '搜索',
'gloabal.tips.reset': '重置'
}
5 changes: 4 additions & 1 deletion src/locales/zh-CN/permission/role.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,8 @@ export const zhCN_permissionRole = {
'app.permission.role.status': '状态',
'app.permission.role.status.all': '全部',
'app.permission.role.status.enabled': '启用',
'app.permission.role.status.disabled': '禁用'
'app.permission.role.status.disabled': '禁用',
'app.permission.role.nameRequired': '请输入角色名称',
'app.permission.role.codeRequired': '请输入角色编码',
'app.permission.role.statusRequired': '请选择角色启用状态'
}
4 changes: 2 additions & 2 deletions src/locales/zh-CN/user/title.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ export const zhCN_title = {
'title.login': '登录',
'title.dashboard': '控制台',
'title.guide': '引导页',
'title.permission.page': '页面权限',
'title.permission.route': '路由权限',
'title.permission.button': '按钮权限',
'title.permission.config': '数据权限',
'title.permission.config': '权限配置',
'title.account': '个人设置',
'title.notFount': '404'
}
3 changes: 2 additions & 1 deletion src/pages/layout/menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@ const MenuComponent: FC<Props> = ({ menuList }) => {
addTag({
id: key,
label,
path
path,
closable: true
})
)
history.push(path)
Expand Down
6 changes: 4 additions & 2 deletions src/pages/layout/tagView/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@ const TagsView: FC = () => {
addTag({
path: dashboard.path,
label: dashboard.label,
id: dashboard.key
id: dashboard.key,
closable: false
})
),
// Initializes the tag generated for the current page
Expand All @@ -46,7 +47,8 @@ const TagsView: FC = () => {
addTag({
path: menu.path,
label: menu.label,
id: menu.key
id: menu.key,
closable: true
})
)
}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/login/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const initialValues: LoginParams = {

const LoginForm: FC = () => {
const history = useHistory()
const location = useLocation()
const location = useLocation<{ from: string }>()
const dispatch = useDispatch()

const onFinished = async (form: any) => {
Expand Down
101 changes: 22 additions & 79 deletions src/pages/permission/config/index.tsx
Original file line number Diff line number Diff line change
@@ -1,85 +1,28 @@
import React, { FC } from 'react'
import { Button } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import ProTable, { IntlProvider, createIntl } from '@ant-design/pro-table'
import { useLocale } from '~/locales'
import { apiGetRoleList } from '~/api/permission/role.api'
import { Role } from '~/interface/permission/role.interface'
import { useSelector } from 'react-redux'
import { AppState } from '~/stores'
import useProTableLocale from '~/hooks/useProTableLocale'

const ComplexPage: FC = () => {
const { formatMessage } = useLocale()
const { locale } = useSelector((state: AppState) => state.globalReducer)
const lang = useProTableLocale(locale)
import React, { FC, useState } from 'react'
import RoleCreateDialog from './roleCreateDialog'
import RoleTable from './roleTable'
import RoleSearch from './roleSearch'
import RoleModifyDialog from './roleModifyDialog'

const RolePage: FC = () => {
const [createvisible, setCreateVisible] = useState(false)
const [modifyvisible, setModifyVisible] = useState(false)
return (
<IntlProvider value={createIntl(locale, lang)}>
<ProTable<Role>
rowKey="id"
columns={[
{
title: formatMessage({ id: 'app.permission.role.name' }),
dataIndex: 'name',
width: 100,
render: (_, { name }) => name[locale]
},
{
title: formatMessage({ id: 'app.permission.role.code' }),
dataIndex: 'code',
width: 100
},
{
title: formatMessage({ id: 'app.permission.role.status' }),
dataIndex: 'status',
width: 100,
valueEnum: {
all: { text: formatMessage({ id: 'app.permission.role.status.all' }), status: 'Default' },
enabled: { text: formatMessage({ id: 'app.permission.role.status.enabled' }), status: 'Success' },
disabled: { text: formatMessage({ id: 'app.permission.role.status.disabled' }), status: 'Error' }
}
},
{
title: formatMessage({ id: 'gloabal.tips.operation' }),
key: 'option',
valueType: 'option',
align: 'center',
width: 140,
render: () => [
<Button type="link" key="1">
{formatMessage({ id: 'gloabal.tips.authorize' })}
</Button>,
<Button type="link" key="2">
{formatMessage({ id: 'gloabal.tips.delete' })}
</Button>
]
}
]}
request={async () => {
const { result: data, status: success } = await apiGetRoleList()
return {
data,
success
}
}}
pagination={{
showSizeChanger: true
}}
scroll={{
x: 440
}}
dateFormatter="string"
params={{ state: 'all' }}
toolBarRender={() => [
<Button key="3" type="primary">
<PlusOutlined />
{formatMessage({ id: 'gloabal.tips.create' })}
</Button>
]}
<div>
<RoleSearch />
<RoleCreateDialog
visible={createvisible}
onCancel={() => setCreateVisible(false)}
onCreate={() => setCreateVisible(false)}
/>
<RoleModifyDialog
visible={modifyvisible}
onCancel={() => setModifyVisible(false)}
onModify={() => setModifyVisible(false)}
/>
</IntlProvider>
<RoleTable onCreate={() => setCreateVisible(true)} onModify={() => setModifyVisible(true)} />
</div>
)
}

export default ComplexPage
export default RolePage
35 changes: 35 additions & 0 deletions src/pages/permission/config/roleCreateDialog.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React, { FC } from 'react'
import { Modal } from 'antd'
import { Role } from '~/interface/permission/role.interface'
import useGetRoleFormItem from './useGetRoleForm'
import { useLocale } from '~/locales'

interface Values extends Role {}

interface RoleCreateDialogProps {
visible: boolean
onCreate: (values: Values) => void
onCancel: () => void
}

const RoleCreateDialog: FC<RoleCreateDialogProps> = ({ onCreate, onCancel, visible }) => {
const { Form, form, Name, Code, Status } = useGetRoleFormItem({ name: 'createForm', required: true })
const { formatMessage } = useLocale()

return (
<Modal
title={formatMessage({ id: 'gloabal.tips.create' })}
visible={visible}
onOk={async () => onCreate((await form.validateFields()) as any)}
onCancel={onCancel}
>
<Form>
<Name />
<Code />
<Status />
</Form>
</Modal>
)
}

export default RoleCreateDialog
35 changes: 35 additions & 0 deletions src/pages/permission/config/roleModifyDialog.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React, { FC } from 'react'
import { Modal } from 'antd'
import { Role } from '~/interface/permission/role.interface'
import useGetRoleFormItem from './useGetRoleForm'
import { useLocale } from '~/locales'

interface Values extends Role {}

interface RoleModifyDialogProps {
visible: boolean
onModify: (values: Values) => void
onCancel: () => void
}

const RoleModifyDialog: FC<RoleModifyDialogProps> = ({ onModify, onCancel, visible }) => {
const { Form, form, Name, Code, Status } = useGetRoleFormItem({ name: 'modifyForm', required: true })
const { formatMessage } = useLocale()

return (
<Modal
title={formatMessage({ id: 'gloabal.tips.modify' })}
visible={visible}
onOk={async () => onModify((await form.validateFields()) as any)}
onCancel={onCancel}
>
<Form>
<Name />
<Code />
<Status />
</Form>
</Modal>
)
}

export default RoleModifyDialog
32 changes: 32 additions & 0 deletions src/pages/permission/config/roleSearch.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React, { FC } from 'react'
import { Role } from '~/interface/permission/role.interface'
import useGetRoleFormItem from './useGetRoleForm'
import { Button } from 'antd'
import { useLocale } from '~/locales'

interface Values extends Role {}

const RoleSearch: FC = () => {
const { Form, form, Name, Code, Status } = useGetRoleFormItem({ name: 'searchForm', responsive: true })
const { formatMessage } = useLocale()

const onSearch = () => {
//
}

return (
<Form>
<Name />
<Code />
<Status />
<Form.Item>
<Button type="primary" onClick={onSearch}>
{formatMessage({ id: 'gloabal.tips.search' })}
</Button>
<Button onClick={() => form.resetFields()}>{formatMessage({ id: 'gloabal.tips.reset' })}</Button>
</Form.Item>
</Form>
)
}

export default RoleSearch
Loading

0 comments on commit f2a5ac9

Please sign in to comment.