|
|
@@ -1,24 +1,70 @@
|
|
|
-import React, { useState } from 'react';
|
|
|
+import React, { useEffect, useState } from 'react';
|
|
|
import { PageContainer } from '@ant-design/pro-components';
|
|
|
-import { Button, Card, Form, Input, Space, Table } from 'antd';
|
|
|
+import { Button, Card, Form, Input, Modal, Space, Table } from 'antd';
|
|
|
import { PlusCircleOutlined, ReloadOutlined, SearchOutlined } from '@ant-design/icons';
|
|
|
import type { ColumnsType } from 'antd/es/table';
|
|
|
import moment from 'moment';
|
|
|
+import Edit from '@/pages/RoleManagement/edit';
|
|
|
|
|
|
interface DataType {
|
|
|
name: string;
|
|
|
+ sequence: number;
|
|
|
+ creator: string;
|
|
|
record_id: string;
|
|
|
}
|
|
|
|
|
|
const RoleManagement: React.FC = () => {
|
|
|
const [form] = Form.useForm();
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
- const [searchData] = useState({});
|
|
|
const pagination = useState({});
|
|
|
- const [dataList] = useState([]);
|
|
|
- const onFinish = () => {};
|
|
|
- const onReset = () => {};
|
|
|
- const onAdd = () => {};
|
|
|
+ const [dataList, setDataList] = useState([]);
|
|
|
+ const [editData, setEditData] = useState<object | null>({});
|
|
|
+ const [visible, setVisible] = useState(false);
|
|
|
+ const [searchData, setSearchData] = useState<object | null>({});
|
|
|
+
|
|
|
+ const getList = () => {
|
|
|
+ const data: any = [
|
|
|
+ {
|
|
|
+ name: '角色名称',
|
|
|
+ sequence: 1,
|
|
|
+ creator: '创建者',
|
|
|
+ created_at: '2023-01-04T14:31:23.664+08:00',
|
|
|
+ memo: '备注备注备注备注',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ setDataList(data);
|
|
|
+ };
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ getList();
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ const onFinish = () => {
|
|
|
+ form.validateFields().then((data) => {
|
|
|
+ setLoading(true);
|
|
|
+ setSearchData(data);
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ getList();
|
|
|
+ }, [searchData]);
|
|
|
+
|
|
|
+ // 重置
|
|
|
+ const onReset = () => {
|
|
|
+ form.resetFields();
|
|
|
+ setLoading(true);
|
|
|
+ setSearchData(null);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 新增
|
|
|
+ const onAdd = () => {
|
|
|
+ setEditData(null);
|
|
|
+ setVisible(true);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 分页切换
|
|
|
const tableChange = (page: any) => {
|
|
|
setLoading(true);
|
|
|
const params = {
|
|
|
@@ -30,6 +76,30 @@ const RoleManagement: React.FC = () => {
|
|
|
console.log(params);
|
|
|
// 请求接口
|
|
|
};
|
|
|
+
|
|
|
+ // 编辑回调
|
|
|
+ const handleEdit = () => {
|
|
|
+ setVisible(false);
|
|
|
+ getList();
|
|
|
+ };
|
|
|
+
|
|
|
+ // 编辑
|
|
|
+ const toEdit = (data: any) => {
|
|
|
+ setEditData(data);
|
|
|
+ setVisible(true);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 删除
|
|
|
+ const toDel = (record: any) => {
|
|
|
+ Modal.confirm({
|
|
|
+ title: '删除',
|
|
|
+ content: `确认删除角色：[${record.name}]`,
|
|
|
+ onOk: () => {
|
|
|
+ // 请求接口
|
|
|
+ },
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
const columns: ColumnsType<DataType> = [
|
|
|
{
|
|
|
title: '序号',
|
|
|
@@ -66,6 +136,29 @@ const RoleManagement: React.FC = () => {
|
|
|
key: 'memo',
|
|
|
width: 250,
|
|
|
},
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ key: 'action',
|
|
|
+ render: (_, record) => (
|
|
|
+ <Space size="middle">
|
|
|
+ <a
|
|
|
+ onClick={() => {
|
|
|
+ toEdit(record);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 编辑
|
|
|
+ </a>
|
|
|
+ <a
|
|
|
+ style={{ color: 'red' }}
|
|
|
+ onClick={() => {
|
|
|
+ toDel(record);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </a>
|
|
|
+ </Space>
|
|
|
+ ),
|
|
|
+ },
|
|
|
];
|
|
|
const paginationProps = {
|
|
|
showSizeChanger: true,
|
|
|
@@ -108,6 +201,7 @@ const RoleManagement: React.FC = () => {
|
|
|
loading={loading}
|
|
|
onChange={tableChange}
|
|
|
/>
|
|
|
+ {visible && <Edit visible={visible} editCallback={handleEdit} params={editData} />}
|
|
|
</Card>
|
|
|
</div>
|
|
|
</PageContainer>
|
shylock