.

src/pages/Machinery/Person/components/OrgTree.jsx

@@ -0,0 +1,58 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Card,
+  Tree,
+} from 'antd';
+import { getCooperativeList } from '@/services/cooperative';
+
+export default (props) => {
+  const { setOrgId, setCooperativeList } = props
+  const [data, setData] = useState([]);
+
+  // 动态生成树
+  const handelNode = (item) => {
+    let node = (
+      <div
+        key={item.orgId}
+        style={{
+          justifyContent: 'space-between',
+          display: 'flex',
+          padding: '8px 0',
+        }}
+      >
+        <span>{item.title}</span>
+      </div>
+    );
+    return node;
+  };
+  const onSelect = (checkedKeys, info) => {
+    if (info.selected) {
+      setOrgId(info.node.key);
+    } else {
+      setOrgId();
+    }
+  };
+  useEffect(() => {
+    getCooperativeList({ pageSize: 500 })
+      .then((res) => {
+        setCooperativeList(res.records);
+        const list = res.records?.map((item) => {
+          return { title: item.name, key: item.orgId };
+        });
+        setData(list);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  }, [])
+  return (
+    <Card title="合作社列表">
+      <Tree
+        onSelect={onSelect}
+        className="treeClass"
+        titleRender={(data) => handelNode(data)}
+        treeData={data}
+      />
+    </Card>
+  )
+}

src/pages/Machinery/Person/components/RoleModel.jsx

@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Modal,
+  message,
+  List,
+  Checkbox,
+} from 'antd';
+import { getRoleList } from '@/services/role';
+import { addUserUserRole, deleteUserRole } from '@/services/userRole';
+export default (props) => {
+
+  const { rUserId, setRUserId, currentCheckbox, setCurrentCheckbox, editRoleModal, setEditRoleModal } = props
+  const [roleList, setRoleList] = useState([]);
+  const [rLoading, setRLoading] = useState(false);
+
+  //授权弹窗点击取消按钮
+  const onRoleCancel = () => {
+    setRUserId();
+    setCurrentCheckbox();
+    setEditRoleModal(false);
+  };
+  //授权角色弹窗点击保存按钮
+  const handelOk = () => {
+    if (!currentCheckbox) {
+      message.info('请选择角色');
+      return;
+    }
+    setRLoading(true);
+    if (currentCheckbox.length === 0) {
+      deleteUserRole(rUserId)
+        .then(() => {
+          message.success('取消授权角色成功');
+          setRLoading(false);
+          onRoleCancel();
+        })
+        .catch((err) => {
+          console.log(err.message);
+          setRLoading(false);
+        });
+    } else {
+      addUserUserRole(
+        rUserId,
+        currentCheckbox.map((item) => {
+          return { userId: rUserId, roleId: item };
+        }),
+      )
+        .then(() => {
+          message.success('授权角色成功');
+          setRLoading(false);
+          onRoleCancel();
+        })
+        .catch((err) => {
+          console.log(err.message);
+          setRLoading(false);
+        });
+    }
+  };
+  const handleCheckboxChange = (list) => {
+    setCurrentCheckbox(list);
+  };
+  useEffect(() => {
+    //获取角色列表数据
+    getRoleList({ pageSize: 999 })
+      .then((res) => {
+        setRoleList(res.records);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  }, []);
+  return (
+    <Modal
+      forceRender
+      title="授权角色"
+      visible={editRoleModal}
+      onCancel={onRoleCancel}
+      keyboard={false}
+      maskClosable={false}
+      destroyOnClose={true}
+      onOk={handelOk}
+      confirmLoading={rLoading}
+    >
+      <Checkbox.Group
+        style={{ width: '100%' }}
+        value={currentCheckbox}
+        onChange={handleCheckboxChange}
+      >
+        <List
+          dataSource={roleList}
+          renderItem={(item) => (
+            <List.Item>
+              <Checkbox value={item.roleId}>{item.name}</Checkbox>
+            </List.Item>
+          )}
+        />
+      </Checkbox.Group>
+    </Modal>
+
+  )
+}

src/pages/Machinery/Person/components/UserModal.jsx

@@ -0,0 +1,161 @@
+import {
+  Button,
+  Modal,
+  Form,
+  Input,
+  message,
+  Radio,
+  Select,
+} from 'antd';
+import { useEffect, useState } from 'react';
+import Search from '@/components/CooperativeSearch';
+import {
+  addUser,
+  updateUser,
+  getDefaultPassword
+} from '@/services/user';
+
+const FormItem = Form.Item;
+const { Option } = Select;
+const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
+export default (props) => {
+  const { editModal, onCancel, actionRef, form, orgId, userId } = props
+  const [loading, setLoading] = useState(false);
+  const [password, setPassWord] = useState('');
+
+  // 编辑弹窗的表单提交
+  const Submit = (values) => {
+    const newData = { ...values };
+    if (!newData.sex && newData.sex !== 0) {
+      newData.sex = 1;
+    }
+    setLoading(true);
+    if (!/^1[0-9]{10}$/.test(newData.phone)) {
+      message.warning('请输入正确的十一位手机号');
+      setLoading(false);
+      return false;
+    }
+    if (
+      !/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
+        newData.idCard,
+      )
+    ) {
+      message.warning('请输入正确的身份证号');
+      setLoading(false);
+      return false;
+    }
+
+    if (userId) {
+      updateUser(userId, newData)
+        .then(() => {
+          setLoading(false);
+          message.success(`修改成功`);
+          onCancel();
+          actionRef.current.reload();
+        })
+        .catch((err) => {
+          setLoading(false);
+          console.log(err.message);
+        });
+    } else {
+      addUser(newData)
+        .then(() => {
+          setLoading(false);
+          message.success(`保存成功`);
+          onCancel();
+          actionRef.current.reload();
+        })
+        .catch((err) => {
+          setLoading(false);
+          message.error(err.message || err);
+        });
+    }
+  };
+  // 弹窗表单中合作社搜索框改变事件目前没用
+  const handelChange = () => { };
+  useEffect(() => {
+    //获取账号默认密码
+    getDefaultPassword()
+      .then((res) => {
+        setPassWord(res);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  }, [])
+  return (
+    <Modal
+      forceRender
+      title={userId ? '人员编辑' : '人员新增'}
+      visible={editModal}
+      onCancel={onCancel}
+      keyboard={false}
+      maskClosable={false}
+      destroyOnClose={true}
+      footer={null}
+    >
+      <Form {...formItemLayout} onFinish={Submit} form={form}>
+        <FormItem label="用户名" name="userName" rules={[{ required: true, message: '请输入' }]}>
+          <Input placeholder="请输入" />
+        </FormItem>
+        <FormItem label="性别" name="sex" rules={[{ required: true, message: '请选择' }]}>
+          <Radio.Group>
+            <Radio value={1}>男</Radio>
+            <Radio value={0}>女</Radio>
+          </Radio.Group>
+        </FormItem>
+        <FormItem label="手机号" name="phone" rules={[{ required: true, message: '请输入' }]}>
+          <Input maxLength="11" placeholder="请输入" />
+        </FormItem>
+        <FormItem label="身份证" name="idCard" rules={[{ required: true, message: '请输入' }]}>
+          <Input placeholder="请输入" />
+        </FormItem>
+        <FormItem
+          label="登录账号"
+          name="loginName"
+          rules={[{ required: true, message: '请输入登录账号' }]}
+        >
+          <Input placeholder="请输入" />
+        </FormItem>
+        <FormItem label=" " colon={false} style={{ height: '4px', marginTop: '-28px' }}>
+          <span style={{ opacity: '0.7' }}>默认密码{password}</span>
+        </FormItem>
+        <FormItem label="所属合作社" name="orgId" rules={[{ required: true, message: '请输入' }]}>
+          <Search placeholder="请输入合作社" disabled={orgId && !userId ? true : false} onChange={handelChange} />
+        </FormItem>
+        {userId && (
+          <FormItem
+            label="合作社管理员"
+            name="isOrgManager"
+            rules={[{ required: true, message: '请选择' }]}
+          >
+            <Select placeholder="请选择是否启用">
+              <Option value={false}>否</Option>
+              <Option value={true}>是</Option>
+            </Select>
+          </FormItem>
+        )}
+        <FormItem label="状态" name="status" rules={[{ required: true, message: '请选择' }]}>
+          <Select placeholder="请选择是否启用">
+            <Option value={1}>启用</Option>
+            <Option value={0}>禁用</Option>
+          </Select>
+        </FormItem>
+        <FormItem label=" " colon={false}>
+          <Button type="default" onClick={onCancel}>
+            取消
+          </Button>
+          <Button
+            type="primary"
+            loading={loading}
+            htmlType="Submit"
+            style={{ marginLeft: '4em' }}
+          >
+            确认
+          </Button>
+        </FormItem>
+      </Form>
+    </Modal>
+
+  )
+}

src/pages/Machinery/Person/index.jsx

@@ -4,139 +4,49 @@ import {
   Popconfirm,
   Modal,
   Form,
-  Input,
   message,
-  Radio,
-  Select,
-  List,
   Row,
   Col,
-  Card,
-  Tree,
-  Checkbox,
 } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
-import { getCooperativeList } from '@/services/cooperative';
 import {
   getUserList,
-  addUser,
   deleteUser,
   updateUser,
-  getDefaultPassword,
   getUserDetail,
 } from '@/services/user';
-import { getRoleList } from '@/services/role';
-import { getUserRoleList, addUserUserRole, deleteUserRole } from '@/services/userRole';
+import { getUserRoleList } from '@/services/userRole';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import PageTable from '@/components/PageTable';
 import moment from 'moment';
-import Search from '@/components/CooperativeSearch';
 import './index.less';
+import OrgTree from './components/OrgTree';
+import UserModal from './components/UserModal';
+import RoleModel from './components/RoleModel';
 
-const FormItem = Form.Item;
-const { Option } = Select;
 const formatterTime = (val) => {
   return val && val !== '-' ? moment(val).format('YYYY-MM-DD') : '-';
 };
 export default (props) => {
   //编辑弹窗
-  const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
   const [form] = Form.useForm();
   const [editModal, setEditModal] = useState(false);
-  const [loading, setLoading] = useState(false);
   const [userId, setuserId] = useState();
-  const [password, setPassWord] = useState('');
   const [cooperativeList, setCooperativeList] = useState([]);
 
   const [editRoleModal, setEditRoleModal] = useState(false);
-  const [rLoading, setRLoading] = useState(false);
   const [rUserId, setRUserId] = useState();
-  const [roleList, setRoleList] = useState([]);
   const [currentCheckbox, setCurrentCheckbox] = useState();
   //列表数据
   const actionRef = useRef();
-  const [data, setData] = useState([]);
   const [orgId, setOrgId] = useState();
 
-  // 动态生成树
-  const handelNode = (item) => {
-    let node = (
-      <div
-        key={item.orgId}
-        style={{
-          justifyContent: 'space-between',
-          display: 'flex',
-          padding: '8px 0',
-        }}
-      >
-        <span>{item.title}</span>
-      </div>
-    );
-    return node;
-  };
-  const onSelect = (checkedKeys, info) => {
-    if (info.selected) {
-      setOrgId(info.node.key);
-    } else {
-      setOrgId();
-    }
-  };
-  // 编辑弹窗的表单提交
-  const Submit = (values) => {
-    const newData = { ...values };
-    if (!newData.sex && newData.sex !== 0) {
-      newData.sex = 1;
-    }
-    setLoading(true);
-    if (!/^1[0-9]{10}$/.test(newData.phone)) {
-      message.warning('请输入正确的十一位手机号');
-      setLoading(false);
-      return false;
-    }
-    if (
-      !/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
-        newData.idCard,
-      )
-    ) {
-      message.warning('请输入正确的身份证号');
-      setLoading(false);
-      return false;
-    }
-
-    if (userId) {
-      updateUser(userId, newData)
-        .then(() => {
-          setLoading(false);
-          message.success(`修改成功`);
-          onCancel();
-          actionRef.current.reload();
-        })
-        .catch((err) => {
-          setLoading(false);
-          console.log(err.message);
-        });
-    } else {
-      addUser(newData)
-        .then(() => {
-          setLoading(false);
-          message.success(`保存成功`);
-          onCancel();
-          actionRef.current.reload();
-        })
-        .catch((err) => {
-          setLoading(false);
-          message.error(err.message || err);
-        });
-    }
-  };
   //表单点击取消按钮
   const onCancel = () => {
     setuserId();
     form.resetFields();
     setEditModal(false);
   };
-  // 弹窗表单中合作社搜索框改变事件目前没用
-  const handelChange = () => { };
 
   // 列表点击编辑按钮
   const handleEdit = (val) => {
@@ -189,82 +99,7 @@ export default (props) => {
       });
     setEditRoleModal(true);
   };
-  //授权弹窗点击取消按钮
-  const onRoleCancel = () => {
-    setRUserId();
-    setCurrentCheckbox();
-    form.resetFields();
-    setEditRoleModal(false);
-  };
-  //授权角色弹窗点击保存按钮
-  const handelOk = () => {
-    if (!currentCheckbox) {
-      message.info('请选择角色');
-      return;
-    }
-    setRLoading(true);
-    if (currentCheckbox.length === 0) {
-      deleteUserRole(rUserId)
-        .then(() => {
-          message.success('取消授权角色成功');
-          setRLoading(false);
-          onRoleCancel();
-        })
-        .catch((err) => {
-          console.log(err.message);
-          setRLoading(false);
-        });
-    } else {
-      addUserUserRole(
-        rUserId,
-        currentCheckbox.map((item) => {
-          return { userId: rUserId, roleId: item };
-        }),
-      )
-        .then(() => {
-          message.success('授权角色成功');
-          setRLoading(false);
-          onRoleCancel();
-        })
-        .catch((err) => {
-          console.log(err.message);
-          setRLoading(false);
-        });
-    }
-  };
-  const handleCheckboxChange = (list) => {
-    setCurrentCheckbox(list);
-  };
-  useEffect(() => {
-    //获取账号默认密码
-    getDefaultPassword()
-      .then((res) => {
-        setPassWord(res);
-      })
-      .catch((err) => {
-        console.log(err.message);
-      });
-    //获取合作社列表数据
-    getCooperativeList({ pageSize: 999 })
-      .then((res) => {
-        setCooperativeList(res.records);
-        const list = res.records?.map((item) => {
-          return { title: item.name, key: item.orgId };
-        });
-        setData(list);
-      })
-      .catch((err) => {
-        console.log(err.message);
-      });
-    //获取角色列表数据
-    getRoleList({ pageSize: 999 })
-      .then((res) => {
-        setRoleList(res.records);
-      })
-      .catch((err) => {
-        console.log(err.message);
-      });
-  }, []);
+
   //监控
   useEffect(() => {
     if (userId) {
@@ -382,14 +217,7 @@ export default (props) => {
     <PageHeaderWrapper>
       <Row gutter={16}>
         <Col span={6}>
-          <Card title="合作社列表">
-            <Tree
-              onSelect={onSelect}
-              className="treeClass"
-              titleRender={(data) => handelNode(data)}
-              treeData={data}
-            />
-          </Card>
+          <OrgTree setOrgId={setOrgId} setCooperativeList={setCooperativeList} />
         </Col>
         <Col span={18}>
           <PageTable
@@ -405,104 +233,8 @@ export default (props) => {
           />
         </Col>
       </Row>
-      <Modal
-        forceRender
-        title={userId ? '人员编辑' : '人员新增'}
-        visible={editModal}
-        onCancel={onCancel}
-        keyboard={false}
-        maskClosable={false}
-        destroyOnClose={true}
-        footer={null}
-      >
-        <Form {...formItemLayout} onFinish={Submit} form={form}>
-          <FormItem label="用户名" name="userName" rules={[{ required: true, message: '请输入' }]}>
-            <Input placeholder="请输入" />
-          </FormItem>
-          <FormItem label="性别" name="sex" rules={[{ required: true, message: '请选择' }]}>
-            <Radio.Group>
-              <Radio value={1}>男</Radio>
-              <Radio value={0}>女</Radio>
-            </Radio.Group>
-          </FormItem>
-          <FormItem label="手机号" name="phone" rules={[{ required: true, message: '请输入' }]}>
-            <Input maxLength="11" placeholder="请输入" />
-          </FormItem>
-          <FormItem label="身份证" name="idCard" rules={[{ required: true, message: '请输入' }]}>
-            <Input placeholder="请输入" />
-          </FormItem>
-          <FormItem
-            label="登录账号"
-            name="loginName"
-            rules={[{ required: true, message: '请输入登录账号' }]}
-          >
-            <Input placeholder="请输入" />
-          </FormItem>
-          <FormItem label=" " colon={false} style={{ height: '4px', marginTop: '-28px' }}>
-            <span style={{ opacity: '0.7' }}>默认密码{password}</span>
-          </FormItem>
-          <FormItem label="所属合作社" name="orgId" rules={[{ required: true, message: '请输入' }]}>
-            <Search placeholder="请输入合作社" disabled={orgId && !userId ? true : false} onChange={handelChange} />
-          </FormItem>
-          {userId && (
-            <FormItem
-              label="合作社管理员"
-              name="isOrgManager"
-              rules={[{ required: true, message: '请选择' }]}
-            >
-              <Select placeholder="请选择是否启用">
-                <Option value={false}>否</Option>
-                <Option value={true}>是</Option>
-              </Select>
-            </FormItem>
-          )}
-          <FormItem label="状态" name="status" rules={[{ required: true, message: '请选择' }]}>
-            <Select placeholder="请选择是否启用">
-              <Option value={1}>启用</Option>
-              <Option value={0}>禁用</Option>
-            </Select>
-          </FormItem>
-          <FormItem label=" " colon={false}>
-            <Button type="default" onClick={onCancel}>
-              取消
-            </Button>
-            <Button
-              type="primary"
-              loading={loading}
-              htmlType="Submit"
-              style={{ marginLeft: '4em' }}
-            >
-              确认
-            </Button>
-          </FormItem>
-        </Form>
-      </Modal>
-      <Modal
-        forceRender
-        title="授权角色"
-        visible={editRoleModal}
-        onCancel={onRoleCancel}
-        keyboard={false}
-        maskClosable={false}
-        destroyOnClose={true}
-        onOk={handelOk}
-        confirmLoading={rLoading}
-      >
-        <Checkbox.Group
-          style={{ width: '100%' }}
-          value={currentCheckbox}
-          onChange={handleCheckboxChange}
-        >
-          <List
-            dataSource={roleList}
-            renderItem={(item) => (
-              <List.Item>
-                <Checkbox value={item.roleId}>{item.name}</Checkbox>
-              </List.Item>
-            )}
-          />
-        </Checkbox.Group>
-      </Modal>
+      <UserModal editModal={editModal} onCancel={onCancel} actionRef={actionRef} form={form} orgId={orgId} userId={userId} />
+      <RoleModel rUserId={rUserId} setRUserId={setRUserId} currentCheckbox={currentCheckbox} setCurrentCheckbox={setCurrentCheckbox} editRoleModal={editRoleModal} setEditRoleModal={setEditRoleModal} />
     </PageHeaderWrapper>
   );
 };