Merge branch 'master' of lizhiqi/yongxu-web into master

src/pages/MenuManagement/check.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Col, Form, Modal, Row } from 'antd';
+import IconMap from '@/components/Icon/IconMap';
+import Icon from '@ant-design/icons';
+import moment from 'moment';
+
+interface checkPros {
+  visible: boolean;
+  checkCallback: () => void;
+  params: any;
+}
+
+/**
+ * 菜单管理 - 查看
+ * @param props
+ * @constructor
+ */
+const Check: React.FC<checkPros> = (props) => {
+  const { params, visible, checkCallback } = props;
+  const [form] = Form.useForm();
+
+  // 取消
+  const onCancel = () => {
+    checkCallback();
+  };
+
+  const onOk = () => {
+    checkCallback();
+  };
+
+  const formItemLayout = {
+    labelCol: {
+      span: 6,
+    },
+    wrapperCol: {
+      span: 18,
+    },
+  };
+
+  const typeList = ['系统', '通用', '企业', '项目'];
+  const hiddenList = ['隐藏', '显示'];
+
+  return (
+    <Modal title="查看" open={visible} onOk={onOk} onCancel={onCancel} width={800}>
+      <Form form={form}>
+        <Row>
+          <Col span={12}>
+            <Form.Item {...formItemLayout} label="菜单名称">
+              <span>{params ? params.name : ''}</span>
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item {...formItemLayout} label="类型">
+              <span>{params ? typeList[params.menu_type - 1] : '无'}</span>
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item {...formItemLayout} label="排序值">
+              <span>{params ? params.sequence : ''}</span>
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item {...formItemLayout} label="状态">
+              <span>{params ? hiddenList[params.hidden - 1] : ''}</span>
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item {...formItemLayout} label="图标">
+              <Icon component={IconMap[params.icon] as React.ForwardRefExoticComponent<any>} />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item {...formItemLayout} label="菜单标签">
+              <span>{params ? params.tag : ''}</span>
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item {...formItemLayout} label="访问路由">
+              <span>{params ? params.router : ''}</span>
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item {...formItemLayout} label="创建者">
+              <span>{params ? params.creator : ''}</span>
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item {...formItemLayout} label="创建时间">
+              <span>{params ? moment(params.created_at).format('YYYY-MM-DD HH:mm') : ''}</span>
+            </Form.Item>
+          </Col>
+        </Row>
+      </Form>
+    </Modal>
+  );
+};
+export default Check;

src/pages/MenuManagement/index.tsx

@@ -6,6 +6,7 @@ import type { ColumnsType } from 'antd/es/table';
 import moment from 'moment/moment';
 import Edit from '@/pages/MenuManagement/edit';
 import IconMap from '@/components/Icon/IconMap';
+import Check from '@/pages/MenuManagement/check';
 
 interface DataType {
   name: string;
@@ -29,6 +30,8 @@ const MenuManagement: React.FC = () => {
   const [pagination, setPagination] = useState({ total: 0, current: 1, pageSize: 10 });
   const [dataList, setDataList] = useState([]);
   const [tag] = useState('web');
+  const [checkVisible, setCheckVisible] = useState(false);
+  const [checkData, setCheckData] = useState<object | null>({});
 
   const getList = () => {
     const data: any = [
@@ -74,6 +77,9 @@ const MenuManagement: React.FC = () => {
       setSearchData(data);
     });
   };
+  useEffect(() => {
+    getList();
+  }, [searchData]);
   // 重置
   const onReset = () => {
     form.resetFields();
@@ -104,8 +110,20 @@ const MenuManagement: React.FC = () => {
   // 编辑弹框回调
   const handleEdit = () => {
     setVisible(false);
-    // 请求接口
+    getList();
+  };
+
+  // 查看
+  const toCheck = (record: any) => {
+    setCheckVisible(true);
+    setCheckData(record);
   };
+
+  // 查看弹框回调
+  const checkCallback = () => {
+    setCheckVisible(false);
+  };
+
   const columns: ColumnsType<DataType> = [
     {
       title: '序号',
@@ -138,12 +156,6 @@ const MenuManagement: React.FC = () => {
         }
       },
     },
-    {
-      title: '排序值',
-      dataIndex: 'sequence',
-      align: 'center',
-      width: 100,
-    },
     {
       title: '状态',
       dataIndex: 'hidden',
@@ -183,11 +195,6 @@ const MenuManagement: React.FC = () => {
     //       <span style={{ color: '#d07c63' }}>无动作</span>
     //     ),
     // },
-    {
-      title: '菜单标签',
-      dataIndex: 'tag',
-      key: 'tag',
-    },
     {
       title: '访问路由',
       dataIndex: 'router',
@@ -209,6 +216,13 @@ const MenuManagement: React.FC = () => {
       key: 'action',
       render: (_, record) => (
         <Space size="middle">
+          <a
+            onClick={() => {
+              toCheck(record);
+            }}
+          >
+            查看
+          </a>
           <a
             onClick={() => {
               toEdit(record);
@@ -277,6 +291,9 @@ const MenuManagement: React.FC = () => {
               params={editData}
             />
           )}
+          {checkVisible && (
+            <Check visible={checkVisible} checkCallback={checkCallback} params={checkData} />
+          )}
         </Card>
       </div>
     </PageContainer>

src/pages/RoleManagement/edit.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import { Modal } from 'antd';
+import { Col, Form, Input, Modal, Row } from 'antd';
+
+const { TextArea } = Input;
 
 interface editPros {
   visible: boolean;
@@ -7,10 +9,35 @@ interface editPros {
   params: any;
 }
 
+/**
+ * 角色管理 - 编辑
+ * @param props
+ * @constructor
+ */
 const Edit: React.FC<editPros> = (props) => {
-  const { params, visible } = props;
+  const { params, visible, editCallback } = props;
+  const [form] = Form.useForm();
+
   const onOk = () => {};
-  const onCancel = () => {};
+
+  // 取消
+  const onCancel = () => {
+    editCallback();
+  };
+
+  const formItemLayout = {
+    labelCol: {
+      span: 6,
+    },
+    wrapperCol: {
+      span: 18,
+    },
+  };
+  const formItemLayout24 = {
+    labelCol: { span: 3 },
+    wrapperCol: { span: 21 },
+  };
+
   return (
     <Modal
       title={`${params ? '编辑' : '新增'}`}
@@ -18,7 +45,45 @@ const Edit: React.FC<editPros> = (props) => {
       onOk={onOk}
       onCancel={onCancel}
       width={800}
-    />
+    >
+      <Form form={form}>
+        <Row>
+          <Col span={12}>
+            <Form.Item
+              {...formItemLayout}
+              name="name"
+              label="角色名称"
+              rules={[{ required: true, message: '请输入角色名称' }]}
+              initialValue={params?.name}
+            >
+              <Input placeholder="请输入角色名称" />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item
+              {...formItemLayout}
+              name="sequence"
+              label="排序值"
+              rules={[{ required: true, message: '请输入排序值' }]}
+              initialValue={params?.sequence}
+            >
+              <Input placeholder="请输入排序值" />
+            </Form.Item>
+          </Col>
+          <Col span={24}>
+            <Form.Item
+              {...formItemLayout24}
+              name="memo"
+              label="备注"
+              rules={[{ required: true, message: '请输入备注' }]}
+              initialValue={params?.memo}
+            >
+              <TextArea rows={4} placeholder="请输入备注" />
+            </Form.Item>
+          </Col>
+        </Row>
+      </Form>
+    </Modal>
   );
 };
 export default Edit;

src/pages/RoleManagement/index.tsx

@@ -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>