feat: first commit

admin/src/pages/role/index.tsx

@@ -0,0 +1,194 @@
+import React, { useState } from 'react';
+import {
+  Card,
+  Table,
+  Typography,
+  TableColumnProps,
+  PaginationProps,
+  Button,
+  Popconfirm,
+  Divider,
+  Space,
+  Message, Badge
+} from '@arco-design/web-react';
+import { useQuery } from 'react-query';
+import Form from './form';
+import { deleteRole, getRole } from '@/api/role';
+import GrantPerm from './grantPerm';
+
+const { Title, Text } = Typography;
+
+function ConfigManage() {
+  const [visible, setVisible] = useState(false);
+  const [record, setRecord] = useState(null);
+  const [visibleGrantPerm, setVisibleGrantPerm] = useState(null);
+
+  const columns: TableColumnProps[] = [
+    {
+      title: '角色id',
+      dataIndex: 'id',
+      render: (value) => <Text copyable>{value}</Text>,
+      align: 'center',
+      width: '20%',
+    },
+    {
+      title: '角色名称',
+      dataIndex: 'name',
+      align: 'center',
+      width: '20%',
+    },
+    {
+      title: '唯一编码',
+      dataIndex: 'code',
+      render: (value) => <Text copyable>{value}</Text>,
+      align: 'center',
+      width: '20%',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      align: 'center',
+      width: '20%',
+      render: (x) => {
+        if (x === 0) {
+          return <Badge status="error" text="禁用中"></Badge>;
+        }
+        return <Badge status="success" text="启用中"></Badge>;
+      }
+    },
+    {
+      title: '操作',
+      dataIndex: 'operations',
+      width: '20%',
+      render: (_, record) => (
+        <>
+          <Button onClick={() => showModal(record)} type="text" status="default">更新</Button>
+          <Divider type="vertical" />
+          <Button onClick={() => showGrantPerm(record)} type="text" status="default">分配权限</Button>
+          <Divider type="vertical" />
+          <Popconfirm
+            focusLock
+            title="删除数据"
+            content="确认删除该条数据吗?"
+            onOk={() => onDelete(record)}
+          >
+            <Button type="text" status="danger">删除</Button>
+          </Popconfirm>
+
+        </>
+      ),
+      align: 'center'
+    }
+  ];
+
+  const [pagination, setPagination] = useState<PaginationProps>({
+    sizeCanChange: true,
+    showTotal: true,
+    pageSize: 10,
+    current: 1,
+    pageSizeChangeResetCurrent: true,
+    total: 0
+  });
+
+  const onDelete = async ({ id }) => {
+    await deleteRole(id);
+    Message.success('删除成功！');
+    await refetch();
+  };
+
+  const onChangeTable = async ({ current, pageSize }) => {
+    setPagination({
+      ...pagination,
+      current,
+      pageSize
+    });
+  };
+
+  const fetchData = async ({ queryKey }) => {
+    const [, { page, pageSize }] = queryKey;
+    const { data } = await getRole({ page, pageSize });
+    setPagination(prevState => {
+      prevState.total = data.count;
+      return prevState;
+    });
+    if (page > 1 && data.list.length === 0) {
+      setPagination({
+        ...pagination,
+        current: page - 1
+      });
+    }
+    return data;
+  };
+
+  const {
+    data,
+    isLoading,
+    isFetching,
+    refetch
+  } = useQuery(
+    ['role', { page: pagination.current, pageSize: pagination.pageSize }],
+    fetchData,
+    {
+      refetchOnWindowFocus: false,
+      keepPreviousData: true
+    });
+
+  const showModal = (payload?) => {
+    payload && setRecord(payload);
+    setVisible(true);
+  };
+
+  const showGrantPerm = (payload) => {
+    setRecord(payload);
+    setVisibleGrantPerm(true);
+  };
+
+  const handleConfirm = async () => {
+    handleCancel()
+    await refetch();
+  };
+
+  const handleCancel = () => {
+    setRecord(null);
+    setVisible(false);
+    setVisibleGrantPerm(false)
+  };
+
+  return (
+    <>
+      <Card>
+        <Form
+          handleConfirm={handleConfirm}
+          handleCancel={handleCancel}
+          visible={visible}
+          record={record}
+        />
+
+        <GrantPerm
+          handleConfirm={handleConfirm}
+          handleCancel={handleCancel}
+          visible={visibleGrantPerm}
+          record={record}
+        />
+
+        <Title heading={6}>角色管理</Title>
+
+        <Space style={{ marginBottom: 12 }}>
+          <Button type="primary" onClick={() => showModal()}>创建角色</Button>
+        </Space>
+
+        <Table
+          rowKey="id"
+          loading={isLoading || isFetching}
+          columns={columns}
+          onChange={onChangeTable}
+          pagination={pagination}
+          data={data?.list}
+        />
+      </Card>
+    </>
+  );
+}
+
+
+export default ConfigManage;