|
|
@@ -1,65 +1,176 @@
|
|
|
-import * as React from 'react'
|
|
|
+import React, { useState } from 'react'
|
|
|
import type { ActionType } from '@ant-design/pro-table'
|
|
|
import ProTable from '@ant-design/pro-table'
|
|
|
-import { Button } from 'antd'
|
|
|
-import { PlusOutlined } from '@ant-design/icons'
|
|
|
-import { GetRoleList } from '../../services/api'
|
|
|
+import { Button, Modal, Form, Input, Switch, message } from 'antd'
|
|
|
+import { PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
|
|
|
+import { GetRoleList, RoleApi } from '../../services/api'
|
|
|
|
|
|
-// @ts-ignore
|
|
|
-const columns: any = [
|
|
|
- {
|
|
|
- title: '权限名称',
|
|
|
- dataIndex: 'name',
|
|
|
- key: 'name'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '所属上级code',
|
|
|
- dataIndex: 'pcode'
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- title: '路由',
|
|
|
- dataIndex: 'router',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '方法',
|
|
|
- dataIndex: 'method',
|
|
|
- search: false,
|
|
|
- },
|
|
|
- {
|
|
|
- title: '操作',
|
|
|
- dataIndex: 'option',
|
|
|
- valueType: 'option',
|
|
|
- render: (_, record: any) => [
|
|
|
- <Button type='link'>修改</Button>,
|
|
|
- <Button type='link'>删除</Button>
|
|
|
- ]
|
|
|
- }
|
|
|
-]
|
|
|
const RoleList: React.FC = () => {
|
|
|
- const actionRef = React.useRef<ActionType>();
|
|
|
- return (
|
|
|
- <ProTable
|
|
|
- headerTitle="权限列表"
|
|
|
- actionRef={actionRef}
|
|
|
- rowKey="key"
|
|
|
- search={{
|
|
|
- labelWidth: 120,
|
|
|
- }}
|
|
|
- request={GetRoleList}
|
|
|
- toolBarRender={() => [
|
|
|
+ const actionRef = React.useRef<ActionType>() as any;
|
|
|
+ const [state, setState]: any = useState({
|
|
|
+ visible: false,
|
|
|
+ pcode: '',
|
|
|
+ mt: 'post'
|
|
|
+ })
|
|
|
+ const columns: any = [
|
|
|
+ {
|
|
|
+ title: '权限名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ key: 'name'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '所属上级code',
|
|
|
+ dataIndex: 'pcode'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '是否前段控制',
|
|
|
+ dataIndex: 'front',
|
|
|
+ render: (_, record: any) => record.front ? '是' : '否',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '路由',
|
|
|
+ dataIndex: 'router',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '方法',
|
|
|
+ dataIndex: 'method',
|
|
|
+ search: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'option',
|
|
|
+ valueType: 'option',
|
|
|
+ width: 200,
|
|
|
+ render: (_, record: any) => [
|
|
|
<Button
|
|
|
- type="primary"
|
|
|
- key="primary"
|
|
|
+ type='link'
|
|
|
onClick={() => {
|
|
|
-
|
|
|
+ setState({
|
|
|
+ visible: true,
|
|
|
+ pcode: record.code,
|
|
|
+ mt: 'post'
|
|
|
+ })
|
|
|
}}
|
|
|
- >
|
|
|
- <PlusOutlined /> 新建
|
|
|
- </Button>,
|
|
|
- ]}
|
|
|
- columns={columns}
|
|
|
- />
|
|
|
+ >添加子权限</Button>,
|
|
|
+ <Button
|
|
|
+ type='link'
|
|
|
+ onClick={() => {
|
|
|
+ setState({
|
|
|
+ visible: true,
|
|
|
+ pcode: record.pcode,
|
|
|
+ mt: 'put',
|
|
|
+ code: record.code
|
|
|
+ })
|
|
|
+ form.setFieldsValue(record)
|
|
|
+ }}
|
|
|
+ >修改</Button>,
|
|
|
+ <Button
|
|
|
+ type='link'
|
|
|
+ onClick={() => {
|
|
|
+ Modal.confirm({
|
|
|
+ title: '确认删除吗？',
|
|
|
+ icon: <ExclamationCircleOutlined />,
|
|
|
+ content: '点击确认后会删除该权限',
|
|
|
+ okText: '确认',
|
|
|
+ okType: 'danger',
|
|
|
+ cancelText: '取消',
|
|
|
+ onOk() {
|
|
|
+ RoleController({
|
|
|
+ mt: 'delete',
|
|
|
+ pcode: record.pcode,
|
|
|
+ code: record.code
|
|
|
+ })
|
|
|
+ },
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ >删除</Button>
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ const [form] = Form.useForm()
|
|
|
+
|
|
|
+ const RoleController = (params = {}) => {
|
|
|
+ form.validateFields()
|
|
|
+ .then(async values => {
|
|
|
+ values.method = +values.method
|
|
|
+ await RoleApi({
|
|
|
+ ...state,
|
|
|
+ ...values,
|
|
|
+ ...params,
|
|
|
+ })
|
|
|
+ message.success('操作成功！')
|
|
|
+ setState({ visible: false, pcode: '', mt: 'post' })
|
|
|
+ form.resetFields()
|
|
|
+ actionRef.current.reload()
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const roleFormItems = [
|
|
|
+ {
|
|
|
+ label: '权限名称',
|
|
|
+ name: 'name'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '路由',
|
|
|
+ name: 'router'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '方法',
|
|
|
+ name: 'method'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
+ return (
|
|
|
+ <React.Fragment>
|
|
|
+ <ProTable
|
|
|
+ headerTitle="权限列表"
|
|
|
+ actionRef={actionRef}
|
|
|
+ rowKey="key"
|
|
|
+ search={false}
|
|
|
+ request={GetRoleList}
|
|
|
+ toolBarRender={() => [
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ key="primary"
|
|
|
+ onClick={() => {
|
|
|
+ setState(pre => ({ ...pre, visible: true }))
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <PlusOutlined /> 新建
|
|
|
+ </Button>,
|
|
|
+ ]}
|
|
|
+ columns={columns}
|
|
|
+ />
|
|
|
+ <Modal
|
|
|
+ title={ state.mt === 'post' ? '添加权限' : '修改权限' }
|
|
|
+ width={400}
|
|
|
+ visible={state.visible}
|
|
|
+ onOk={() => RoleController()}
|
|
|
+ onCancel={() => setState(pre => ({ ...pre, visible: false }))}
|
|
|
+ >
|
|
|
+ <Form form={form}>
|
|
|
+ <Form.Item
|
|
|
+ label='是否前端控制'
|
|
|
+ valuePropName="checked"
|
|
|
+ name='front'
|
|
|
+ >
|
|
|
+ <Switch/>
|
|
|
+ </Form.Item>
|
|
|
+ {
|
|
|
+ roleFormItems.map(item => (
|
|
|
+ <Form.Item
|
|
|
+ label={item.label}
|
|
|
+ name={item.name}
|
|
|
+ required
|
|
|
+ rules={[{ required: true, message: `请输入${item.label}` }]}
|
|
|
+ >
|
|
|
+ <Input placeholder='单行输入' />
|
|
|
+ </Form.Item>
|
|
|
+ ))
|
|
|
+ }
|
|
|
+ </Form>
|
|
|
+ </Modal>
|
|
|
+ </React.Fragment>
|
|
|
)
|
|
|
}
|
|
|
|
