feats

src/pages/org/components/Form.jsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Button, Card, Form, Input, Select } from 'antd';
+import useBool from '@/utils/hooks/useBool';
+import { postSysOrg, putSysOrg, getSysOrgById } from "@/service/sysorg";
+import { formItemLayout, tailFormItemLayout } from '@/utils/form';
+
+export default (props) => {
+  const { org, list, parentId, onChange } = props;
+
+  const [submiting, startSubmit, cancelSubmit] = useBool();
+  const [form] = Form.useForm();
+  
+  const onFinish = (values) => {
+    startSubmit();
+    if (org?.orgId) {
+      // 修改
+      putSysOrg(org.orgId, values).then((res) => {
+        cancelSubmit();
+        onChange(res);
+      }).catch(() => {
+        cancelSubmit();
+      });
+    } else {
+      // 新增
+      postSysOrg(values).then((res) => {
+        cancelSubmit();
+        onChange(res);
+      }).catch(() => {
+        cancelSubmit();
+      });
+    }
+  }
+
+  React.useEffect(() => {
+    if (org) {
+      form.setFieldsValue(org);
+    } else {
+      form.resetFields();
+      form.setFieldValue('orgPId', parentId);
+    }
+
+    console.log(org, parentId);
+  }, [org, parentId]);
+
+  return (
+    <Form onFinish={onFinish} form={form} {...formItemLayout} style={{width: '800px'}}>
+      <Form.Item
+        name="name"
+        label="机构名称"
+        rules={[
+          {required: true, message: '请填写机构名称'}
+        ]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        name="orgPId"
+        label="上级单位"
+      >
+        <Select>
+          {
+            (list || []).map(x => (
+              <Select.Option key={x.orgId}>
+                {x.name}
+              </Select.Option>
+            ))
+          }
+        </Select>
+      </Form.Item>
+
+      <Form.Item
+        name="sortNo"
+        label="排序"
+      >
+        <Input />
+      </Form.Item>
+
+
+      <Form.Item
+        name="status"
+        label="状态"
+      >
+        <Select
+          style={{ width: '100%' }}
+          placeholder="请选择状态"
+        >
+          <Option value={0}>不正常</Option>
+          <Option value={1}>正常</Option>
+        </Select>
+      </Form.Item>
+      <Form.Item {...tailFormItemLayout}>
+        <Button loading={submiting} type="primary" htmlType="submit">
+          保存
+        </Button>
+      </Form.Item>
+    </Form>
+  )
+}

src/pages/org/edit/index.jsx

@@ -1,131 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Button, Card, Form, Input, Select } from 'antd';
-import useBool from '@/utils/hooks/useBool';
-import { postSysOrg, putSysOrg, getSysOrgById } from "@/service/sysorg";
-import { useSearchParams, useNavigate } from 'react-router-dom';
-
-const formItemLayout = {
-  labelCol: {
-    xs: { span: 24 },
-    sm: { span: 8 },
-  },
-  wrapperCol: {
-    xs: { span: 24 },
-    sm: { span: 16 },
-  },
-};
-const tailFormItemLayout = {
-  wrapperCol: {
-    xs: {
-      span: 24,
-      offset: 0,
-    },
-    sm: {
-      span: 16,
-      offset: 8,
-    },
-  },
-};
-
-const { Option } = Select;
-
-export default (props) => {
-
-  const [loading, startLoading, cancelLoading] = useBool();
-  const [submiting, startSubmit, cancelSubmit] = useBool();
-  const [form] = Form.useForm();
-  const navigate = useNavigate();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const id = searchParams.get("id");
-
-  useEffect(() => {
-    if (id) {
-      getSysOrgById(id).then((res) => {
-        form.setFieldsValue(res);
-        // setDate(res);
-      });
-    }
-  }, [id]);
-
-  const onFinish = (values) => {
-    startSubmit();
-    if (id) {
-      // 修改
-      putSysOrg(id, values).then((res) => {
-        navigate(-1);
-      }).catch(() => {
-        cancelSubmit();
-      });
-    } else {
-      // 新增
-      postSysOrg(values).then((res) => {
-        navigate(-1);
-      }).catch(() => {
-        cancelSubmit();
-      });
-    }
-  }
-
-
-  return (
-    <Card loading={loading}>
-      <Form onFinish={onFinish} form={form} {...formItemLayout} scrollToFirstError style={{ maxWidth: '1000px' }}>
-        <Form.Item
-          name="orgCode"
-          label="机构编码"
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          name="name"
-          label="机构名称"
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          name="orgPId"
-          label="上级单位"
-        >
-          <Input />
-        </Form.Item>
-
-        <Form.Item
-          name="sortNo"
-          label="排序"
-        >
-          <Input />
-        </Form.Item>
-
-
-        <Form.Item
-          name="status"
-          label="状态"
-        >
-          <Select
-            style={{ width: '100%' }}
-            placeholder="请选择状态"
-          >
-            <Option key={0}>不正常</Option>
-            <Option key={1}>正常</Option>
-          </Select>
-        </Form.Item>
-        <Form.Item
-          name="createUser"
-          label="创建人"
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item {...tailFormItemLayout}>
-          <Button loading={submiting} type="primary" htmlType="submit">
-            保存
-          </Button>
-          <Button style={{ marginLeft: '2em' }} onClick={() => navigate(-1)}>
-            返回
-          </Button>
-        </Form.Item>
-      </Form>
-    </Card>
-  )
-}
-
-

src/pages/org/index.jsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import {
+  PlusOutlined,
+  DeleteOutlined,
+} from '@ant-design/icons';
+import { Button, Card, Row, Col, Tree, Tooltip, Popconfirm } from "antd";
+import Page from '@/components/Page';
+import { getSysOrg, deleteSysOrg } from "@/service/sysorg";
+import { arr2Tree } from '@/utils/array';
+import useBool from '@/utils/hooks/useBool';
+import Form from './components/Form';
+
+export default (props) => {
+
+  const [loading, startLoading, stopLoading] = useBool();
+  const [list, setList] = React.useState([]);
+  const [current, setCurrernt] = React.useState();
+  const [parentId, setParentId] = React.useState('-1');
+
+  const [parentList, treeData] = React.useMemo(() => {
+    const plist = [{orgId: '-1', name: '根节点'}].concat(list);
+    const [tree] = arr2Tree((list || []).map(x => ({
+      title: x.name,
+      key: x.orgId,
+      parentId: x.orgPId,
+      raw: x,
+    })));
+
+    return [plist, tree];
+  }, [list])
+
+  const changeCurrent = (org) => {
+    setCurrernt(org);
+    setParentId(org?.orgPId || '-1');
+  }
+
+  const onSelect = (selectedKeys, e) => {
+    changeCurrent(e.node.raw)
+  }
+
+  const onClick = (org) => {
+    changeCurrent(org);
+  }
+
+  const onAdd = (parent = '-1') => {
+    setParentId(parent);
+    setCurrernt();
+  }
+
+  const onDelete = (org) => {
+    deleteSysOrg(org.orgId).then(() => {
+      setList(list.filter(x => x.orgId !== org.orgId))
+    });
+  }
+
+  const queryList = React.useCallback(() => {
+    getSysOrg({pageSize: 500}).then(res => {
+      setList(res.records || []);
+      changeCurrent();
+    });
+  }, []);
+
+  const onFormChange = () => {
+    // 重新查一次数据
+    queryList();
+  }
+
+  React.useEffect(() => {
+    queryList();
+  }, []);
+
+  return (
+    <Page>
+      <Row gutter={24}>
+        <Col span={8}>
+          <Card
+            title="单位"
+            onSelect={onSelect}
+            extra={<Button type='link' onClick={() => onAdd()}>新增</Button>}
+          >
+            <Tree
+              blockNode
+              treeData={treeData}
+              // onSelect={onSelect}
+              titleRender={(node) => (
+                <div style={{display: 'flex'}} onClick={e => e.stopPropagation()}>
+                  <div style={{lineHeight: '32px', flex: 1}} onClick={() => onClick(node.raw)}>
+                    {node.title}
+                  </div>
+                  <div style={{width: '80px', flex: 'none'}}>
+                    <Tooltip title="新增子节点">
+                      <Button type='link' icon={<PlusOutlined />} onClick={() => onAdd(node.raw.orgId)}></Button>
+                    </Tooltip>
+                    <Tooltip title="删除节点">
+                      <Popconfirm
+                        title="确认进行删除操作?"
+                        onConfirm={() => onDelete(node.raw)}
+                      >
+                        <Button type='link' danger icon={<DeleteOutlined />}></Button>
+                      </Popconfirm>
+                    </Tooltip>
+                  </div>
+                </div>
+              )}
+            />
+          </Card>
+        </Col>
+        <Col span={16}>
+          <Card>
+            <Form org={current} parentId={parentId} list={parentList} onChange={onFormChange} />
+          </Card>
+        </Col>
+      </Row>
+    </Page>
+  )
+}

src/pages/org/list/index.jsx

@@ -1,120 +0,0 @@
-import React from "react";
-import { useNavigate } from "react-router-dom";
-import { queryTable } from "@/utils/request";
-import { ProTable } from "@ant-design/pro-components";
-import { Button, message, Popconfirm } from "antd";
-import { getSysOrg, deleteSysOrg } from "@/service/sysorg";
-
-const querySysOrgList = queryTable(getSysOrg);
-
-export default (props) => {
-  const actionRef = React.useRef();
-  const navigate = useNavigate();
-
-  // const updateStatus = (user) => {
-  //   const status = user.status === 1 ? 0 : 1;
-  //   const hide = message.loading("请稍候...", 0);
-  //   updateUserStatus(user.id, status)
-  //     .then((res) => {
-  //       hide();
-  //       actionRef.current.reload();
-  //     })
-  //     .catch(() => {
-  //       hide();
-  //     });
-  // };
-  const handleDelete = (id) => {
-    if (id) {
-      deleteSysOrg(id).then((res) => {
-        actionRef.current.reload();
-      });
-    }
-  };
-
-  const columns = [
-    {
-      title: "机构名称",
-      dataIndex: "name",
-    },
-    {
-      title: "上级单位",
-      dataIndex: "orgPId",
-    },
-
-    {
-      title: "状态",
-      dataIndex: "status",
-      valueEnum: {
-        1: {
-          text: "正常",
-          status: "Processing",
-        },
-        0: {
-          text: "禁用",
-          status: "Error",
-        },
-      },
-    },
-    {
-      title: "操作",
-      valueType: "option",
-      width: 200,
-      render: (_, record) => [
-        // <Button
-        //   key={1}
-        //   style={{ padding: 0 }}
-        //   type="link"
-        //   onClick={() => {
-        //     updateStatus(record);
-        //   }}
-        // >
-        //   {record.status === 1 ? "禁用" : "启用"}
-        // </Button>,
-        <Button
-          key={2}
-          style={{ padding: 0 }}
-          type="link"
-          onClick={() => {
-            console.log(record, "]]");
-            navigate(`/system/org/edit?id=${record.orgId}`);
-          }}
-        >
-          编辑
-        </Button>,
-        <Popconfirm
-          key={3}
-          title="您是否确认删除 ?"
-          onConfirm={() => handleDelete(record.orgId)}
-          okText="确定"
-          cancelText="取消"
-        >
-          {/* manualPush */}
-          <Button style={{ padding: 0 }} type="link">
-            删除
-          </Button>
-        </Popconfirm>,
-      ],
-    },
-  ];
-
-  return (
-    <ProTable
-      actionRef={actionRef}
-      rowKey="orgId"
-      search={false}
-      toolBarRender={() => [
-        <Button
-          key="1"
-          type="primary"
-          onClick={() => {
-            navigate("/system/org/edit");
-          }}
-        >
-          新增
-        </Button>,
-      ]}
-      request={querySysOrgList}
-      columns={columns}
-    />
-  );
-};

src/pages/position/edit/index.jsx

@@ -120,16 +120,10 @@ export default (props) => {
             style={{ width: '100%' }}
             placeholder="请选择状态"
           >
-            <Option key={0}>不正常</Option>
-            <Option key={1}>正常</Option>
+            <Option value={0}>不正常</Option>
+            <Option value={1}>正常</Option>
           </Select>
         </Form.Item>
-        <Form.Item
-          name="createUser"
-          label="创建人"
-        >
-          <Input />
-        </Form.Item>
         <Form.Item {...tailFormItemLayout}>
           <Button loading={submiting} type="primary" htmlType="submit">
             保存

src/pages/position/list/index.jsx

@@ -32,18 +32,10 @@ export default (props) => {
   };
 
   const columns = [
-    {
-      title: "岗位ID",
-      dataIndex: "positionId",
-    },
     {
       title: "岗位名称",
       dataIndex: "name",
     },
-    {
-      title: "上级岗位",
-      dataIndex: "positionPId",
-    },
     {
       title: "所属单位",
       dataIndex: "orgId",
@@ -67,10 +59,6 @@ export default (props) => {
         },
       },
     },
-    {
-      title: "创建人",
-      dataIndex: "createUser",
-    },
     {
       title: "操作",
       valueType: "option",

src/routes/routes.jsx

@@ -17,13 +17,13 @@ import User from '@/pages/user/index';
 import UserEdit from '@/pages/user/Edit';
 import CheckList from '@/pages/check';
 import CheckEdit from '@/pages/check/Edit';
+import OrgList from "@/pages/org/index";
 
 import Index from '@/pages/index';
 import Home from "@/pages/sample/home";
 import BasicForm from '@/pages/sample/form';
 import BasicTable from '@/pages/sample/table';
-import OrgList from "@/pages/org/list";
-import OrgEdit from "@/pages/org/edit";
+
 import PositionList from "@/pages/position/list";
 import PositionEdit from "@/pages/position/edit";
 import LocTypeList from "@/pages/locType/list";
@@ -87,7 +87,7 @@ export const authRoutes = [
         },
       },
       {
-        path: "org/list",
+        path: "org",
         element: <OrgList />,
         meta: {
           title: '机构管理',
@@ -95,16 +95,6 @@ export const authRoutes = [
           // permission: 'form',
         },
       },
-      {
-        path: "org/edit",
-        element: <OrgEdit />,
-        meta: {
-          hideInMenu: true,
-          title: '机构管理编辑',
-          // icon: <AppstoreOutlined />,
-          // permission: 'form',
-        },
-      },
       {
         path: "position/list",
         element: <PositionList />,

src/utils/hooks/useBool.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-export default function useLoading(initial = false) {
+export default function useBool(initial = false) {
   const [loading, setLoading] = React.useState(initial);
   const loadingRef = React.useRef();
   loadingRef.current = loading;