111

src/pages/org/components/Form.jsx

 import { formItemLayout, tailFormItemLayout } from "@/utils/form";
 
 export default (props) => {
-  const { org, list, parentId, onChange } = props;
+  const { org, list, parentId, queryUserList, onChange } = props;
 
   const [submiting, startSubmit, cancelSubmit] = useBool();
   const [form] = Form.useForm();
 
   const onFinish = (values) => {
+    console.log(values);
     startSubmit();
     if (org?.orgId) {
       // 修改
       form.setFieldValue("orgPId", parentId);
       form.setFieldValue("isResponsible", true);
     }
-
-    console.log(org, parentId);
   }, [org, parentId]);
 
+  const ArrayToString = {
+    valuePropName: "value",
+    getValueProps: (val) => {
+      return { value: val ? val.split(",") : [] };
+    },
+    getValueFromEvent: (value) => {
+      if (value.length > 2) {
+        value.pop();
+      }
+      return value ? value.join(",") : "";
+    },
+  };
+
   return (
     <Form
       onFinish={onFinish}
       <Form.Item name="orgPId" label="上级单位">
         <Select>
           {(list || []).map((x) => (
-            console.log(x),
             <Select.Option key={x.orgId}>{x.name}</Select.Option>
           ))}
         </Select>
           <Radio value={false}>否</Radio>
         </Radio.Group>
       </Form.Item>
-
+      <Form.Item name="smsPson" label="短信接收者" {...ArrayToString}>
+        <Select
+          mode="multiple"
+          clearIcon
+          style={{ width: "100%" }}
+          placeholder="请选择接受者"
+        >
+          {(queryUserList || []).map((x) => (
+            <Select.Option key={x.userId} value={x.phone}>
+              {x.name}
+            </Select.Option>
+          ))}
+        </Select>
+      </Form.Item>
       <Form.Item name="sortNo" label="排序">
         <Input />
       </Form.Item>

src/pages/org/index.jsx

-import React from 'react';
-import {
-  PlusOutlined,
-  DeleteOutlined,
-} from '@ant-design/icons';
+import React, { useEffect, useMemo, useState } 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 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';
+import { arr2Tree } from "@/utils/array";
 
-export default (props) => {
+import { getSysUser } from "@/service/sysuser";
+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 [parentId, setParentId] = React.useState("-1");
+  const [queryUserList, setQueryUserList] = useState([]);
 
   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,
-    })));
+    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])
+  }, [list]);
+
+  useEffect(() => {
+    getSysUser({ current: 1, pageSize: 500, pageNum: 1 }).then((res) =>
+      setQueryUserList(res.records || [])
+    );
+  }, []);
 
   const changeCurrent = (org) => {
     setCurrernt(org);
-    setParentId(org?.orgPId || '-1');
-  }
+    setParentId(org?.orgPId || "-1");
+  };
 
   const onSelect = (selectedKeys, e) => {
-    changeCurrent(e.node.raw)
-  }
+    changeCurrent(e.node.raw);
+  };
 
   const onClick = (org) => {
     changeCurrent(org);
-  }
+  };
 
-  const onAdd = (parent = '-1') => {
+  const onAdd = (parent = "-1") => {
     setParentId(parent);
     setCurrernt();
-  }
+  };
 
   const onDelete = (org) => {
     deleteSysOrg(org.orgId).then(() => {
-      setList(list.filter(x => x.orgId !== org.orgId))
+      setList(list.filter((x) => x.orgId !== org.orgId));
     });
-  }
+  };
 
   const queryList = React.useCallback(() => {
-    getSysOrg({pageSize: 500}).then(res => {
+    getSysOrg({ pageSize: 500 }).then((res) => {
       setList(res.records || []);
       changeCurrent();
     });
   const onFormChange = () => {
     // 重新查一次数据
     queryList();
-  }
+  };
 
   React.useEffect(() => {
     queryList();
           <Card
             title="单位"
             onSelect={onSelect}
-            extra={<Button type='link' onClick={() => onAdd()}>新增</Button>}
+            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)}>
+                <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'}}>
+                  <div style={{ width: "80px", flex: "none" }}>
                     <Tooltip title="新增子节点">
-                      <Button type='link' icon={<PlusOutlined />} onClick={() => onAdd(node.raw.orgId)}></Button>
+                      <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>
+                        <Button
+                          type="link"
+                          danger
+                          icon={<DeleteOutlined />}
+                        ></Button>
                       </Popconfirm>
                     </Tooltip>
                   </div>
         </Col>
         <Col span={16}>
           <Card>
-            <Form org={current} parentId={parentId} list={parentList} onChange={onFormChange} />
+            <Form
+              org={current}
+              parentId={parentId}
+              list={parentList}
+              queryUserList={queryUserList}
+              onChange={onFormChange}
+            />
           </Card>
         </Col>
       </Row>
     </Page>
-  )
-}
+  );
+};

src/service/sysuser.js

-import request from '@/utils/request';
+import request from "@/utils/request";
 
 /*
  * 分页查询
  */
-export const getSysUser = (params) => request('/api/sysUser', { params });
+export const getSysUser = (params) => request("/api/sysUser", { params });
 
 /*
  * 新增数据
  */
-export const postSysUser = (data) => request('/api/sysUser', { data, method: 'post' });
+export const postSysUser = (data) =>
+  request("/api/sysUser", { data, method: "post" });
 
 /*
  * 通过ID查询单条数据
 /*
  * 更新数据
  */
-export const putSysUser = (id, data) => request(`/api/sysUser/${id}`, { data, method: 'put' });
+export const putSysUser = (id, data) =>
+  request(`/api/sysUser/${id}`, { data, method: "put" });
 
 /*
  * 通过主键删除数据
  */
-export const deleteSysUser = (id) => request(`/api/sysUser/${id}`, { method: 'delete' });
+export const deleteSysUser = (id) =>
+  request(`/api/sysUser/${id}`, { method: "delete" });
 
 /*
  * 更新状态
  */
-export const updateUserStatus = (id, status) => request(`/api/sysUser/${id}?status=${status}`, { method: 'put' });
+export const updateUserStatus = (id, status) =>
+  request(`/api/sysUser/${id}?status=${status}`, { method: "put" });