fix(compiler): 菜单管理和角色管理模块对接口

config/config.ts

@@ -16,7 +16,7 @@ export default defineConfig({
   },
   layout: {
     // https://umijs.org/zh-CN/plugins/plugin-layout
-    locale: true,
+    locale: false,
     siderWidth: 208,
     ...defaultSettings,
   },

src/pages/MenuManagement/check.tsx

@@ -37,7 +37,6 @@ const Check: React.FC<checkPros> = (props) => {
     },
   };
 
-  const typeList = ['系统', '通用', '企业', '项目'];
   const hiddenList = ['隐藏', '显示'];
 
   return (
@@ -50,8 +49,8 @@ const Check: React.FC<checkPros> = (props) => {
             </Form.Item>
           </Col>
           <Col span={12}>
-            <Form.Item {...formItemLayout} label="类型">
-              <span>{params ? typeList[params.menu_type - 1] : '无'}</span>
+            <Form.Item {...formItemLayout} label="上级菜单名称">
+              <span>{params ? params.parent_path : ''}</span>
             </Form.Item>
           </Col>
           <Col span={12}>
@@ -61,7 +60,7 @@ const Check: React.FC<checkPros> = (props) => {
           </Col>
           <Col span={12}>
             <Form.Item {...formItemLayout} label="状态">
-              <span>{params ? hiddenList[params.hidden - 1] : ''}</span>
+              <span>{params ? hiddenList[params.hidden] : ''}</span>
             </Form.Item>
           </Col>
           <Col span={12}>

src/pages/MenuManagement/edit.tsx

@@ -1,11 +1,22 @@
 import Icon from '@ant-design/icons';
-import { Col, Form, Input, Modal, Radio, Row, Select, TreeSelect } from 'antd';
-import React, { useState } from 'react';
+import {
+  Col,
+  Form,
+  Input,
+  InputNumber,
+  message,
+  Modal,
+  Radio,
+  Row,
+  Select,
+  TreeSelect,
+} from 'antd';
+import React, { useEffect, useState } from 'react';
 import IconSelector from '@/components/IconSelecter';
+import { createMenu, editMenu, queryMenu } from '@/services/menu';
 
 interface editPros {
   visible: boolean;
-  treeData: any[];
   editCallback: () => void;
   params: any;
 }
@@ -16,28 +27,63 @@ interface editPros {
  * @constructor
  */
 const Edit: React.FC<editPros> = (props) => {
-  const { params, visible, editCallback, treeData } = props;
+  const { params, visible, editCallback } = props;
   const [iconSelectorVisible, setIconSelectorVisible] = useState(false);
   const [form] = Form.useForm();
   const { getFieldValue, setFieldsValue } = form;
   const iconType = getFieldValue('icon') || (params ? params.icon : '');
+  // 菜单树列表数据
+  const [treeData, setTreeData] = useState([]);
 
-  const menuTypeLabel = (value: any) => {
-    switch (value) {
-      case 1:
-        return ' [系统]';
-      case 2:
-        return ' [通用]';
-      case 3:
-        return ' [企业]';
-      case 4:
-        return ' [项目]';
-      default:
-        return ' [无]';
-    }
-  };
+  useEffect(() => {
+    // 获取树结构的菜单列表数据
+    queryMenu({ q: 'tree', query_all: 1 }).then((res) => {
+      if (res && res.code === 0) {
+        setTreeData(res.data.list);
+      }
+    });
+  }, []);
 
-  const onOk = () => {};
+  // 确认弹框
+  const onOk = () => {
+    form.validateFields().then((values) => {
+      if (values) {
+        const data = { ...values };
+        if (params) {
+          data.record_id = params.record_id;
+          editMenu(data)
+            .then((res) => {
+              if (res.code === 0) {
+                message.success('编辑成功');
+                editCallback();
+              } else {
+                message.error(res?.message);
+                editCallback();
+              }
+            })
+            .catch((e) => {
+              message.error(e?.message);
+              editCallback();
+            });
+        } else {
+          createMenu(data)
+            .then((res) => {
+              if (res.code === 0) {
+                message.success('新增成功');
+                editCallback();
+              } else {
+                message.error(res?.message);
+                editCallback();
+              }
+            })
+            .catch((e) => {
+              message.error(e?.message);
+              editCallback();
+            });
+        }
+      }
+    });
+  };
 
   // 取消
   const onCancel = () => {
@@ -58,7 +104,7 @@ const Edit: React.FC<editPros> = (props) => {
     for (let i = 0; i < data.length; i += 1) {
       const item = {
         ...data[i],
-        title: data[i].name + menuTypeLabel(data[i].menu_type),
+        title: data[i].name,
         value: data[i].record_id,
       };
       if (item.children && item.children.length > 0) {
@@ -117,7 +163,7 @@ const Edit: React.FC<editPros> = (props) => {
               {...formItemLayout}
               name="parent_id"
               label="上级菜单"
-              rules={[{ required: true, message: '请选择上级菜单' }]}
+              rules={[{ required: false, message: '请选择上级菜单' }]}
               initialValue={params?.parent_id}
             >
               <TreeSelect
@@ -134,23 +180,17 @@ const Edit: React.FC<editPros> = (props) => {
           <Col span={12}>
             <Form.Item
               {...formItemLayout}
-              name="menu_type"
-              label="菜单类型"
-              rules={[{ required: true, message: '请选择菜单类型' }]}
-              initialValue={params?.menu_type}
+              name="tag"
+              label="菜单标签"
+              rules={[{ required: true, message: '请选择菜单标签' }]}
+              initialValue={params?.tag}
             >
-              <Select placeholder="请选择菜单类型">
-                <Select.Option key={1} value={1}>
-                  系统
-                </Select.Option>
-                <Select.Option key={2} value={2}>
-                  通用
-                </Select.Option>
-                <Select.Option key={3} value={3}>
-                  企业
+              <Select placeholder="请选择菜单标签">
+                <Select.Option key="api" value="api">
+                  api
                 </Select.Option>
-                <Select.Option key={4} value={4}>
-                  项目
+                <Select.Option key="web" value="web">
+                  web
                 </Select.Option>
               </Select>
             </Form.Item>
@@ -163,7 +203,7 @@ const Edit: React.FC<editPros> = (props) => {
               rules={[{ required: true, message: '请输入排序值' }]}
               initialValue={params?.sequence}
             >
-              <Input placeholder="请输入排序值" />
+              <InputNumber placeholder="请输入排序值" style={{ width: '280px' }} />
             </Form.Item>
           </Col>
           <Col span={12}>

src/pages/MenuManagement/index.tsx

@@ -1,20 +1,23 @@
 import { PageContainer } from '@ant-design/pro-components';
 import React, { useEffect, useState } from 'react';
-import { Button, Card, Form, Input, Modal, Space, Table } from 'antd';
+import { Button, Card, Form, Input, message, Modal, Space, Table } from 'antd';
 import Icon, { PlusCircleOutlined, ReloadOutlined, SearchOutlined } from '@ant-design/icons';
 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';
+import { delMenu, queryMenu } from '@/services/menu';
 
 interface DataType {
+  key: React.ReactNode;
   name: string;
   menu_type: number;
   sequence: number;
   hidden: number;
   icon: string;
   record_id: string;
+  children?: DataType[];
 }
 
 /**
@@ -33,27 +36,28 @@ const MenuManagement: React.FC = () => {
   const [checkVisible, setCheckVisible] = useState(false);
   const [checkData, setCheckData] = useState<object | null>({});
 
+  // 获取列表数据
   const getList = () => {
-    const data: any = [
-      {
-        name: '菜单名称',
-        menu_type: 2,
-        sequence: 20,
-        hidden: 1,
-        icon: 'security-scan',
-        tag: 'web',
-        router: '/editionManagement',
-        creator: 'root',
-        created_at: '2023-01-04T14:31:23.664+08:00',
-        record_id: '1111',
-        parent_id: '1111',
-      },
-    ];
-    setDataList(data);
-    setPagination({ total: 0, current: 1, pageSize: 10 });
+    const params = {
+      q: 'page',
+      current: pagination.current,
+      pageSize: pagination.pageSize,
+      ...searchData,
+    };
+    queryMenu(params).then((res) => {
+      if (res.code === 0) {
+        res.data.list.forEach((el: { children: any[] }) => {
+          el.children = [];
+        });
+        setDataList(res.data.list);
+        setPagination(res.data.pagination);
+        setLoading(false);
+      }
+    });
   };
 
   useEffect(() => {
+    setLoading(true);
     getList();
   }, []);
 
@@ -66,8 +70,13 @@ const MenuManagement: React.FC = () => {
       pageSize: page.pageSize,
       ...searchData,
     };
-    console.log(params);
-    //   请求接口
+    queryMenu(params).then((res) => {
+      if (res.code === 0) {
+        setDataList(res.data.list);
+        setPagination(res.data.pagination);
+        setLoading(false);
+      }
+    });
   };
 
   //  搜索
@@ -102,7 +111,18 @@ const MenuManagement: React.FC = () => {
       title: '删除',
       content: `确认删除菜单：[${record.name}]`,
       onOk: () => {
-        //   请求接口
+        delMenu(record.record_id)
+          .then((res) => {
+            if (res.data && res.data.status === 'OK') {
+              message.success('删除成功');
+              getList();
+            } else {
+              message.error('删除失败');
+            }
+          })
+          .catch((e) => {
+            message.error(e?.message);
+          });
       },
     });
   };
@@ -124,6 +144,27 @@ const MenuManagement: React.FC = () => {
     setCheckVisible(false);
   };
 
+  // const getChildrenList = () =>{
+  //   const params = {
+  //     q:'page',
+  //
+  //   };
+  //   queryMenu(params).then(res =>{
+  //     if(res.code === 0){
+  //       setDataList(res.data.list);
+  //       setPagination(res.data.pagination);
+  //       setLoading(false);
+  //     }
+  //   })
+  // }
+
+  // 异步展开树table
+  const areaExpandedRowsChange = (expanded: any, record: any) => {
+    // 做一下限制,如果已经有数据,不再重复请求数据
+    if (expanded && record.children && record.children.length >= 0) {
+    }
+  };
+
   const columns: ColumnsType<DataType> = [
     {
       title: '序号',
@@ -135,32 +176,16 @@ const MenuManagement: React.FC = () => {
       title: '菜单名称',
       dataIndex: 'name',
       key: 'name',
-      width: 250,
     },
     {
-      title: '类型',
-      dataIndex: 'menu_type',
-      width: 100,
-      render: (val) => {
-        switch (val) {
-          case 1:
-            return <span style={{ color: '#f50' }}>系统</span>;
-          case 2:
-            return <span style={{ color: '#87d068' }}>通用</span>;
-          case 3:
-            return <span style={{ color: '#3c6bbc' }}>企业</span>;
-          case 4:
-            return <span style={{ color: '#b28317' }}>项目</span>;
-          default:
-            return <span style={{ color: '#590858' }}>无</span>;
-        }
-      },
+      title: '排序值',
+      dataIndex: 'sequence',
+      key: 'sequence',
     },
     {
       title: '状态',
       dataIndex: 'hidden',
       align: 'center',
-      width: 100,
       render: (val) =>
         val === 1 ? (
           <span style={{ color: '#f50' }}>隐藏</span>
@@ -172,7 +197,6 @@ const MenuManagement: React.FC = () => {
       title: '图标',
       dataIndex: 'icon',
       align: 'center',
-      width: 100,
       render: (val) => {
         return tag === 'api' ? (
           <img src={val} alt="val" style={{ width: 32 }} />
@@ -181,30 +205,11 @@ const MenuManagement: React.FC = () => {
         );
       },
     },
-    // {
-    //   title: '动作',
-    //   dataIndex: 'actions',
-    //   align: 'center',
-    //   width: 80,
-    //   render: val =>
-    //     val ? (
-    //       <Tooltip title={val.map((item: { name: any; }) => item.name).join(' ')}>
-    //         <span style={{ color: '#87d068' }}>{val.length} 动作</span>
-    //       </Tooltip>
-    //     ) : (
-    //       <span style={{ color: '#d07c63' }}>无动作</span>
-    //     ),
-    // },
     {
       title: '访问路由',
       dataIndex: 'router',
       key: 'router',
     },
-    {
-      title: '创建者',
-      dataIndex: 'creator',
-      key: 'creator',
-    },
     {
       title: '创建时间',
       dataIndex: 'created_at',
@@ -282,15 +287,11 @@ const MenuManagement: React.FC = () => {
             pagination={paginationProps}
             loading={loading}
             onChange={tableChange}
+            expandable={{
+              onExpand: areaExpandedRowsChange,
+            }}
           />
-          {visible && (
-            <Edit
-              visible={visible}
-              treeData={dataList}
-              editCallback={handleEdit}
-              params={editData}
-            />
-          )}
+          {visible && <Edit visible={visible} editCallback={handleEdit} params={editData} />}
           {checkVisible && (
             <Check visible={checkVisible} checkCallback={checkCallback} params={checkData} />
           )}

src/pages/RoleManagement/edit.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Col, Form, Input, Modal, Row } from 'antd';
+import { Col, Form, Input, message, Modal, Row } from 'antd';
+import { createRole, editRole } from '@/services/role';
 
 const { TextArea } = Input;
 
@@ -18,7 +19,41 @@ const Edit: React.FC<editPros> = (props) => {
   const { params, visible, editCallback } = props;
   const [form] = Form.useForm();
 
-  const onOk = () => {};
+  const onOk = () => {
+    form.validateFields().then((values) => {
+      if (values) {
+        const data = { ...values };
+        if (params) {
+          data.record_id = params.record_id;
+          editRole(data)
+            .then((res) => {
+              if (res && res.code === 0) {
+                message.success('编辑成功');
+                editCallback();
+              } else {
+                message.error('编辑失败');
+              }
+            })
+            .catch((e) => {
+              message.error(e?.message);
+            });
+        } else {
+          createRole(data)
+            .then((res) => {
+              if (res && res.code === 0) {
+                message.success('新增成功');
+                editCallback();
+              } else {
+                message.error('新增失败');
+              }
+            })
+            .catch((e) => {
+              message.error(e?.message);
+            });
+        }
+      }
+    });
+  };
 
   // 取消
   const onCancel = () => {
@@ -75,7 +110,7 @@ const Edit: React.FC<editPros> = (props) => {
               {...formItemLayout24}
               name="memo"
               label="备注"
-              rules={[{ required: true, message: '请输入备注' }]}
+              rules={[{ required: false, message: '请输入备注' }]}
               initialValue={params?.memo}
             >
               <TextArea rows={4} placeholder="请输入备注" />

src/pages/RoleManagement/index.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { PageContainer } from '@ant-design/pro-components';
-import { Button, Card, Form, Input, Modal, Space, Table } from 'antd';
+import { Button, Card, Form, Input, message, 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';
+import { delRole, queryRole } from '@/services/role';
 
 interface DataType {
   name: string;
@@ -16,26 +17,30 @@ interface DataType {
 const RoleManagement: React.FC = () => {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
-  const pagination = useState({});
+  const [pagination, setPagination] = useState({ total: 0, current: 1, pageSize: 10 });
   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);
+    const params = {
+      q: 'page',
+      current: pagination.current,
+      pageSize: pagination.pageSize,
+    };
+    queryRole(params).then((res) => {
+      if (res && res.code === 0) {
+        setDataList(res.data.list);
+        setPagination(res.data.pagination);
+        setLoading(false);
+      }
+    });
   };
 
   useEffect(() => {
+    setLoading(true);
     getList();
   }, []);
 
@@ -73,8 +78,13 @@ const RoleManagement: React.FC = () => {
       pageSize: page.pageSize,
       ...searchData,
     };
-    console.log(params);
-    //   请求接口
+    queryRole(params).then((res) => {
+      if (res && res.code === 0) {
+        setDataList(res.data.list);
+        setPagination(res.data.pagination);
+        setLoading(false);
+      }
+    });
   };
 
   // 编辑回调
@@ -95,7 +105,14 @@ const RoleManagement: React.FC = () => {
       title: '删除',
       content: `确认删除角色：[${record.name}]`,
       onOk: () => {
-        //   请求接口
+        delRole(record.record_id).then((res) => {
+          if (res && res.code === 0) {
+            message.success('删除成功');
+            getList();
+          } else {
+            message.error('删除失败');
+          }
+        });
       },
     });
   };
@@ -119,11 +136,6 @@ const RoleManagement: React.FC = () => {
       key: 'sequence',
       width: 250,
     },
-    {
-      title: '创建者',
-      dataIndex: 'creator',
-      key: 'creator',
-    },
     {
       title: '创建时间',
       dataIndex: 'created_at',

src/services/api.ts

@@ -0,0 +1,9 @@
+import { request } from '@@/plugin-request/request';
+import { stringify } from 'qs';
+
+/**
+ * 获取左侧菜单 树结构
+ */
+export async function getMenuList(param: object) {
+  return request(`/web/v1/menus?${stringify(param)}`);
+}

src/services/menu.ts

@@ -0,0 +1,42 @@
+import { request } from '@@/plugin-request/request';
+import { stringify } from 'qs';
+
+/**
+ * 查询菜单数据
+ * @param param
+ */
+export async function queryMenu(param: object) {
+  return request(`/web/v1/menus?${stringify(param)}`);
+}
+
+/**
+ * 删除菜单
+ * @param record_id
+ */
+export async function delMenu(record_id: any) {
+  return request(`/web/v1/menus/${record_id}`, {
+    method: 'DELETE',
+  });
+}
+
+/**
+ * 新增菜单
+ * @param params
+ */
+export async function createMenu(params: object) {
+  return request(`/web/v1/menus`, {
+    method: 'POST',
+    data: params,
+  });
+}
+
+/**
+ * 编辑菜单
+ * @param params
+ */
+export async function editMenu(params: any) {
+  return request(`/web/v1/menus/${params.record_id}`, {
+    method: 'PUT',
+    data: params,
+  });
+}

src/services/role.ts

@@ -0,0 +1,42 @@
+import { request } from '@@/plugin-request/request';
+import { stringify } from 'qs';
+
+/**
+ * 查询角色列表
+ * @param param
+ */
+export async function queryRole(param: object) {
+  return request(`/web/v1/roles?${stringify(param)}`);
+}
+
+/**
+ * 删除角色
+ * @param record_id
+ */
+export async function delRole(record_id: any) {
+  return request(`/web/v1/roles/${record_id}`, {
+    method: 'DELETE',
+  });
+}
+
+/**
+ * 新增角色
+ * @param params
+ */
+export async function createRole(params: object) {
+  return request(`/web/v1/roles`, {
+    method: 'POST',
+    data: params,
+  });
+}
+
+/**
+ * 编辑角色
+ * @param params
+ */
+export async function editRole(params: any) {
+  return request(`/web/v1/roles/${params.record_id}`, {
+    method: 'PUT',
+    data: params,
+  });
+}