first commit

src/components/b_table.tsx

@@ -1,5 +1,7 @@
 import {
   Button,
+  FormInstance,
+  Modal,
   Pagination,
   PaginationProps,
   Popconfirm,
@@ -8,6 +10,8 @@ import {
   Table,
 } from "antd";
 import { useState } from "react";
+import SimpleForm from "./form/simple_form";
+import React from "react";
 const BTable = (props: any) => {
   const {
     store,
@@ -19,8 +23,13 @@ const BTable = (props: any) => {
     actionCloumn,
     onSizeChange,
     onPageChange,
+    config,
+    btnText,
   } = props;
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+  const formRef = React.useRef<FormInstance>(null);
+  const [record, setRecord] = useState<any>(null);
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
     setSelectedRowKeys(newSelectedRowKeys);
     selectCallback(newSelectedRowKeys);
@@ -62,6 +71,8 @@ const BTable = (props: any) => {
           type="dashed"
           size="small"
           onClick={() => {
+            setRecord(record);
+            setIsModalOpen(true);
             editCallback(record);
           }}
         >
@@ -85,8 +96,15 @@ const BTable = (props: any) => {
       </Space>
     ),
   };
+  const addHandler = () => {
+    setRecord(null);
+    setIsModalOpen(true);
+  };
   return (
-    <>
+    <Space direction="vertical" size="middle" style={{ display: "flex" }}>
+      <Button type="default" onClick={() => addHandler()}>
+        {btnText ?? "添加部门"}
+      </Button>
       <Table
         style={{ height: "100%", overflow: "auto" }}
         pagination={false}
@@ -107,7 +125,32 @@ const BTable = (props: any) => {
           onChange={onChange}
         />
       </div>
-    </>
+      <Modal
+        title={!record?.id ? "添加" : "编辑"}
+        width={800}
+        open={isModalOpen}
+        afterClose={() => formRef.current?.resetFields()}
+        onOk={() => formRef.current?.submit()}
+        okText="确定"
+        cancelText="取消"
+        onCancel={() => {
+          setIsModalOpen(false);
+        }}
+      >
+        <SimpleForm
+          formName={"user_form"}
+          formRef={formRef}
+          colProps={25}
+          onFinish={() => {
+            store.add(formRef.current?.getFieldsValue());
+          }}
+          createCallback={() => {
+            formRef.current?.setFieldsValue(record);
+          }}
+          formDatas={config}
+        ></SimpleForm>
+      </Modal>
+    </Space>
   );
 };
 

src/pages/dep/index.tsx

@@ -1,66 +1,26 @@
-import { Button, Space, Modal, FormInstance } from "antd";
 import { inject, observer } from "mobx-react";
 import BTable from "@/components/b_table";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { Store } from "antd/lib/form/interface";
-import React from "react";
 import { columns, defaultConfig } from "./dep_config";
 import "./dep.less";
-import SimpleForm from "@/components/form/simple_form";
 
 const Dep = (props: Store) => {
   const { depStore } = props;
-  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-  const formRef = React.useRef<FormInstance>(null);
-  const [userId, setId] = useState<Number | null>(null);
-  const [record, setRecord] = useState<any>(null);
+
   useEffect(() => {
     depStore.getlist();
-  }, []);
+  }, [depStore]);
 
-  const addHandler = () => {
-    setIsModalOpen(true);
-  };
   return (
     <div className="contentBox">
-      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
-        <Button type="default" onClick={() => addHandler()}>
-          添加部门
-        </Button>
       <BTable
         store={depStore}
         scroll={{ x: "max-content" }}
         columns={columns}
+        config={defaultConfig}
         dataSource={depStore.list}
       />
-
-        <Modal
-          title={!userId ? "添加" : "编辑"}
-          width={800}
-          open={isModalOpen}
-          afterClose={() => formRef.current?.resetFields()}
-          onOk={() => formRef.current?.submit()}
-          okText="确定"
-          cancelText="取消"
-          onCancel={() => {
-            setId(null);
-            setIsModalOpen(false);
-          }}
-        >
-          <SimpleForm
-            formName={"user_form"}
-            formRef={formRef}
-            colProps={25}
-            onFinish={() => {
-              depStore.add(formRef.current?.getFieldsValue());
-            }}
-            createCallback={() => {
-              formRef.current?.setFieldsValue(record);
-            }}
-            formDatas={defaultConfig}
-          ></SimpleForm>
-        </Modal>
-      </Space>
     </div>
   );
 };

src/pages/menu/index.tsx

@@ -1,48 +1,27 @@
-import { Button, Space, Modal, FormInstance } from "antd";
 import { inject, observer } from "mobx-react";
 import BTable from "@/components/b_table";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { Store } from "antd/lib/form/interface";
-import React from "react";
-import { columns } from "./menu_config";
+import { columns, defaultConfig } from "./menu_config";
 import "./menu.less";
 
 const Menu = (props: Store) => {
   const { menuStore } = props;
-  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-  const formRef = React.useRef<FormInstance>(null);
-  const [userId, setId] = useState<Number | null>(null);
 
-  useEffect(() => {}, []);
+  useEffect(() => {
+    menuStore.getlist();
+  }, [menuStore]);
 
-  const addHandler = () => {};
   return (
     <div className="contentBox">
-      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
-        <Button type="default" onClick={() => addHandler()}>
-          添加菜单
-        </Button>
       <BTable
+        btnText="添加菜单"
         store={menuStore}
         scroll={{ x: "max-content" }}
         columns={columns}
         dataSource={menuStore.list}
+        config={defaultConfig}
       />
-
-        <Modal
-          title={!userId ? "添加菜单" : "编辑菜单"}
-          width={800}
-          open={isModalOpen}
-          afterClose={() => formRef.current?.resetFields()}
-          onOk={() => formRef.current?.submit()}
-          okText="确定"
-          cancelText="取消"
-          onCancel={() => {
-            setId(null);
-            setIsModalOpen(false);
-          }}
-        ></Modal>
-      </Space>
     </div>
   );
 };

src/pages/menu/menu_config.tsx

@@ -1,9 +1,9 @@
 import { FormType } from "@/components/form/interface";
 import { UserDataType } from "@/model/userModel";
 import { ColumnsType } from "antd/lib/table";
-import { Image } from "antd";
 import { getBirthDateAndGender } from "@/util/util";
-export const defaultConfig = (team, per) => [
+
+export const defaultConfig =  [
   {
     type: FormType.input,
     label: "菜单名称",
@@ -11,20 +11,50 @@ export const defaultConfig = (team, per) => [
     value: "",
     rules: [{ required: true, message: "请输入名称!" }],
   },
-
   {
-    type: FormType.inputNumber,
-    label: "icon",
+    type: FormType.upload,
+    label: "图标",
     name: "icon",
     value: "",
-    rules: [{ required: true, message: "请输入年龄" }],
   },
   {
     type: FormType.input,
-    label: "路径",
-    name: "id_card",
+    label: "路由",
+    name: "router_path",
     value: "",
-    rules: [{ required: true, message: "请输入身份证" }],
+    rules: [{ required: true, message: "请输入路由" }],
+  },
+  {
+    type: FormType.input,
+    label: "路由标题",
+    name: "title",
+    value: "",
+    rules: [{ required: true, message: "请输入路由" }],
+  },
+  {
+    type: FormType.input,
+    label: "路由外部链接",
+    name: "href",
+    value: "",
+  },
+  {
+    type: FormType.input,
+    label: "上级菜单",
+    name: "pid",
+    value: "",
+  },
+  {
+    type: FormType.input,
+    label: "激活子菜单",
+    name: "active_menu",
+    value: "",
+  },
+  {
+    type: FormType.input,
+    label: "本地图标",
+    name: "local_icon",
+    value: "",
+    rules: [{ required: true, message: "请输入路由" }],
   },
 ];
 
@@ -40,12 +70,24 @@ export const columns: ColumnsType<UserDataType> = [
       <span>{getBirthDateAndGender(render.id_card)?.gender}</span>
     ),
   },
-
   {
-    title: "路径",
-    dataIndex: "head_img",
-    render: (head_img) => {
-      return <Image src={head_img}></Image>;
+    title: "路由",
+    dataIndex: "router_path",
   },
+  {
+    title: "路由标题",
+    dataIndex: "title",
+  },
+  {
+    title: "路由外部链接",
+    dataIndex: "href",
+  },
+  {
+    title: "指定激活子菜单",
+    dataIndex: "active_menu",
+  },
+  {
+    title: "本地图标",
+    dataIndex: "local_icon",
   },
 ];

src/pages/user/user.tsx

@@ -1,20 +1,12 @@
-import { Button, Space, Modal, FormInstance } from "antd";
 import { inject, observer } from "mobx-react";
 import BTable from "@/components/b_table";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { Store } from "antd/lib/form/interface";
-import React from "react";
 import { columns, defaultConfig } from "./user_config";
 import "./user.less";
-import SimpleForm from "@/components/form/simple_form";
 
 const User = (props: Store) => {
   const { usrStore } = props;
-  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-  const formRef = React.useRef<FormInstance>(null);
-  const [userId, setId] = useState<Number | null>(null);
-  const [record, setRecord] = useState<any>(null);
-
   // 获取列表数据
   useEffect(() => {
     usrStore.getlist();
@@ -22,54 +14,18 @@ const User = (props: Store) => {
 
   return (
     <div className="contentBox">
-      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
-        <Button type="default" onClick={() => setIsModalOpen(true)}>
-          添加用户
-        </Button>
       <BTable
         store={usrStore}
         scroll={{ x: "max-content" }}
         columns={columns}
+        btnText="添加人员"
         dataSource={usrStore.list}
         deleteCallback={(record) => {
           usrStore.deleteItem(record);
         }}
-          editCallback={(record) => {
-            setIsModalOpen(true);
-            formRef.current?.setFieldsValue(record);
-            setRecord(record);
-            setId(record.id);
-          }}
+        config={defaultConfig}
+        editCallback={(record) => {}}
       />
-
-        <Modal
-          title={!userId ? "添加用户" : "编辑用户"}
-          width={800}
-          open={isModalOpen}
-          afterClose={() => formRef.current?.resetFields()}
-          onOk={() => formRef.current?.submit()}
-          okText="确定"
-          cancelText="取消"
-          onCancel={() => {
-            setId(null);
-            setRecord(null);
-            setIsModalOpen(false);
-          }}
-        >
-          <SimpleForm
-            formName={"user_form"}
-            formRef={formRef}
-            colProps={25}
-            onFinish={() => {
-              usrStore.add(formRef.current?.getFieldsValue())
-            }}
-            createCallback={() => {
-              formRef.current?.setFieldsValue(record);
-            }}
-            formDatas={defaultConfig as any}
-          ></SimpleForm>
-        </Modal>
-      </Space>
     </div>
   );
 };

src/service/user_config.ts

@@ -14,10 +14,10 @@ class RoleConfig {
 }
 
 class MenuConfig {
-    static ADD: string = "/role";
-    static EDIT: string = "/role";
-    static LIST: string = "/role/list";
-    static DELETE: string = "/role";
+    static ADD: string = "/menu";
+    static EDIT: string = "/menu";
+    static LIST: string = "/menu/list";
+    static DELETE: string = "/menu";
 }
 
 

src/store/menu.ts

@@ -1,12 +1,12 @@
 import { makeObservable } from "mobx";
 import BaseStore from "./baseStore";
 import { UserDataType } from "@/model/userModel";
-import { RoleConfig } from "@/service/user_config";
+import { MenuConfig } from "@/service/user_config";
 
 class MenuStore extends BaseStore<UserDataType> {
 
     constructor() {
-        super(RoleConfig)
+        super(MenuConfig)
         makeObservable(this, {
         })
     }