Browse Source

fix:修改新增废除用户信息

zhaojing 1 year ago
parent
commit
cacf777a04

+ 5 - 0
src/assets/css/antd-reset.less

@@ -62,6 +62,11 @@
       color: #000;
     }
   }
+  .ant-select-single:not(.ant-select-customize-input)
+    .ant-select-selector
+    .ant-select-selection-search-input {
+    height: 50px;
+  }
   .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
     height: 50px;
   }

+ 134 - 85
src/pages/Member/components/areaTree/index.jsx

@@ -21,11 +21,113 @@ import { ExclamationCircleOutlined } from '@ant-design/icons';
 
 import moment from 'moment';
 
-const AreaTree = ({ checkSign }) => {
+const AreaTree = ({
+  checkSign,
+  spaceMap,
+  checkedValues,
+  radioValue,
+  setCheckedValues,
+  setRadioValue,
+}) => {
   const { initialState } = useModel('@@initialState');
-
-  const [radioValue, setRadioValue] = useState(); //'0-0-0-0'
-  const [checkedValues, setCheckedValues] = useState([]); //'0-0-0-0'
+  const [treeData, setTreeData] = useState([]);
+  const [allSpaces, setAllSpaces] = useState([]);
+  // const treeData = [
+  //   {
+  //     title: '',
+  //     key: '0',
+  //     children: [],
+  //     level: 0,
+  //   },
+  //   {
+  //     title: 'parent 1',
+  //     key: '0-0',
+  //     level: 0,
+  //     children: [
+  //       {
+  //         title: 'parent 1-0',
+  //         key: '0-0-0',
+  //         level: 1,
+  //         children: [
+  //           {
+  //             title: 'leaf',
+  //             key: '0-0-0-0',
+  //             level: 2,
+  //           },
+  //           {
+  //             title: 'leaf2',
+  //             key: '0-0-0-1',
+  //             level: 2,
+  //           },
+  //         ],
+  //       },
+  //       {
+  //         title: 'parent 1-1',
+  //         key: '0-0-1',
+  //         level: 1,
+  //         children: [
+  //           {
+  //             title: 'leaf3',
+  //             key: '0-0-1-0',
+  //             level: 2,
+  //           },
+  //           {
+  //             title: 'leaf4',
+  //             key: '0-0-1-1',
+  //             level: 2,
+  //           },
+  //         ],
+  //       },
+  //     ],
+  //   },
+  //   {
+  //     title: 'parent 2',
+  //     key: '0-1',
+  //     level: 0,
+  //     children: [
+  //       {
+  //         title: 'leaf5',
+  //         key: '0-1-1',
+  //         level: 1,
+  //       },
+  //       {
+  //         title: 'leaf6',
+  //         key: '0-1-2',
+  //         level: 1,
+  //       },
+  //     ],
+  //   },
+  // ];
+  //处理数据 转成tree显示数据
+  useEffect(() => {
+    let allSpacesTemp = ['special'];
+    let treeDataTemp = [
+      {
+        title: '',
+        key: 'special',
+        children: [],
+        level: 0,
+      },
+    ];
+    for (let skey in spaceMap) {
+      var sval = spaceMap[skey] || [];
+      var node = { title: skey, key: sval[0]?.floorId, level: 0 };
+      var children = sval.map((sitem) => {
+        var cnode = {
+          title: sitem.spaceName,
+          key: sitem.spaceId,
+          level: 1,
+          ...sitem,
+        };
+        allSpacesTemp.push(sitem.spaceId);
+        return cnode;
+      });
+      node.children = children;
+      treeDataTemp.push(node);
+    }
+    setAllSpaces(allSpacesTemp);
+    setTreeData(treeDataTemp);
+  }, [spaceMap]);
 
   const renderNode = (nodeData) => {
     return (
@@ -36,101 +138,48 @@ const AreaTree = ({ checkSign }) => {
             value={nodeData.key}
             disabled={checkSign == 'check'}
             // checked={nodeData.radioChecked}
-            // onChange={() => {
-            //   onChange3(nodeData);
-            // }}
           >
-            {nodeData.key == '0' ? '不选择' : ''}
+            {nodeData.key == 'special' ? '不选择' : ''}
           </Radio>
         </div>
         <div className={styles.controlSpan}>
-          <Checkbox disabled={checkSign == 'check'} value={nodeData.key}>
-            {nodeData.key == '0' ? '全选' : ''}
+          <Checkbox disabled={checkSign == 'check'} value={nodeData.key} onChange={onOneChange}>
+            {nodeData.key == 'special' ? '全选' : ''}
           </Checkbox>
         </div>
       </div>
     );
   };
 
-  // const onChange3 = (nodeData) => {
-  //   debugger;
-  //   nodeData.radioChecked = true;
-  // };
-  const onChange5 = (event) => {
-    //debugger;
+  const onOneChange = (event) => {
+    // debugger;
+    // event.target.value  event.target.checked
+  };
+  const onRadioChange = (event) => {
+    var value = event.target.value;
     setRadioValue(event.target.value);
+    var index = checkedValues.findIndex((ele) => ele === value);
+    if (index == -1) {
+      checkedValues.push(value);
+    }
+    setCheckedValues(checkedValues);
   };
-  const onChange6 = (values) => {
+  const onCheckboxChange = (values) => {
     debugger;
+    var lastValue = values[values.length - 1];
+    if (lastValue == 'special') {
+      //全选选中
+      setCheckedValues(allSpaces);
+      return;
+    }
+    if (checkedValues.includes('special') && !values.includes('special')) {
+      //全选取消
+      setCheckedValues([]);
+      return;
+    }
     setCheckedValues(values);
   };
 
-  const treeData = [
-    {
-      title: '',
-      key: '0',
-      children: [],
-      level: 0,
-    },
-    {
-      title: 'parent 1',
-      key: '0-0',
-      level: 0,
-      children: [
-        {
-          title: 'parent 1-0',
-          key: '0-0-0',
-          level: 1,
-          children: [
-            {
-              title: 'leaf',
-              key: '0-0-0-0',
-              level: 2,
-            },
-            {
-              title: 'leaf2',
-              key: '0-0-0-1',
-              level: 2,
-            },
-          ],
-        },
-        {
-          title: 'parent 1-1',
-          key: '0-0-1',
-          level: 1,
-          children: [
-            {
-              title: 'leaf3',
-              key: '0-0-1-0',
-              level: 2,
-            },
-            {
-              title: 'leaf4',
-              key: '0-0-1-1',
-              level: 2,
-            },
-          ],
-        },
-      ],
-    },
-    {
-      title: 'parent 2',
-      key: '0-1',
-      level: 0,
-      children: [
-        {
-          title: 'leaf5',
-          key: '0-1-1',
-          level: 1,
-        },
-        {
-          title: 'leaf6',
-          key: '0-1-2',
-          level: 1,
-        },
-      ],
-    },
-  ];
   const debounceHandle = (event) => {};
   return (
     <>
@@ -145,8 +194,8 @@ const AreaTree = ({ checkSign }) => {
           <div className={styles.residentSpan}>常驻工区选择</div>
           <div className={styles.controlSpan}>可控工区选择</div>
         </div>
-        <Checkbox.Group onChange={onChange6} value={checkedValues}>
-          <Radio.Group onChange={onChange5} value={radioValue}>
+        <Checkbox.Group onChange={onCheckboxChange} value={checkedValues}>
+          <Radio.Group onChange={onRadioChange} value={radioValue}>
             <Tree
               height={310}
               defaultExpandedKeys={['0-0-0']}

+ 182 - 52
src/pages/Member/components/personModal/index.jsx

@@ -11,6 +11,8 @@ import {
   Button,
   InputNumber,
   Tree,
+  Tooltip,
+  Dropdown,
 } from 'antd';
 import Icon from '@/tenants-ui/SgIcon';
 import styles from './index.less';
@@ -21,44 +23,88 @@ import { ExclamationCircleOutlined } from '@ant-design/icons';
 import AreaTree from '../areaTree';
 
 import moment from 'moment';
-import { queryUserInfo, saveUserInfo } from '@/services/sagacare_service/member';
+import { queryUserInfo, saveUserInfo, deleteUser } from '@/services/sagacare_service/member';
 
-const PersonModal = ({ checkUser, checkSign, setCheckSign, onClose }) => {
+const PersonModal = ({
+  spaceMap,
+  statusArr,
+  checkUser,
+  checkSign,
+  setCheckSign,
+  onClose,
+  temporary,
+  invalidSign,
+  setInvalidSign,
+  refreshList,
+}) => {
   const { initialState } = useModel('@@initialState');
   const [form] = Form.useForm();
-  const [invalidSign, setInvalidSign] = useState(false);
+  const [radioValue, setRadioValue] = useState(); //'0-0-0-0'
+  const [checkedValues, setCheckedValues] = useState([]); //'0-0-0-0'
+  //const [userControlSpaces, setUserControlSpaces] = useState([]);
+  const [nameVal, setNameVal] = useState('');
   useEffect(() => {
-    queryUserInfo()
-      .then((res) => {})
-      .catch((err) => {});
+    if (checkUser.userId) {
+      var paramObj = {
+        criteria: {
+          userId: checkUser.userId,
+          companyId: '30bd3cf2b9ed4742b607fd5ea2c00d96',
+        },
+      };
+      queryUserInfo(paramObj)
+        .then((res) => {
+          debugger;
+          var userControlSpaces = res?.data?.controlSpaceUserList || [];
+          var controlSpaces = [];
+          //处理可控工区
+          userControlSpaces.forEach((item) => {
+            controlSpaces.push(item.spaceId);
+            if (item.isPermanentSpace) {
+              setRadioValue(item.spaceId); //常驻
+            }
+          });
+          setCheckedValues(controlSpaces);
+        })
+        .catch((err) => {});
+    }
   }, [checkUser]);
 
-  const formItemLayout = {
-    labelCol: {
-      span: 6,
-    },
-    wrapperCol: {
-      span: 14,
-    },
-  };
   const onSelect = (selectedKeys, info) => {
     console.log('selected', selectedKeys, info);
   };
   const onCheck = (checkedKeys, info) => {
     console.log('onCheck', checkedKeys, info);
   };
-  // useEffect(() => {
-  //   console.log('checkUsercheckUsercheckUser', checkUser);
-  // }, [checkUser]);
 
   const saveUser = () => {
+    debugger;
     form
       .validateFields()
       .then((value) => {
-        debugger;
+        //处理可控工区
+        var slist = checkedValues.map((item) => {
+          if (item != 'special') {
+            return {
+              companyId: '30bd3cf2b9ed4742b607fd5ea2c00d96',
+              spaceId: item,
+              isPermanentSpace: radioValue == item ? true : false,
+            };
+          }
+        });
 
-        saveUserInfo()
-          .then((res) => {})
+        var param = {
+          companyId: '30bd3cf2b9ed4742b607fd5ea2c00d96',
+          controlSpaceUserList: slist,
+          ...value,
+        };
+        checkUser.userId && (param.userId = checkUser.userId);
+        saveUserInfo(param)
+          .then((res) => {
+            if (res.result == 'success') {
+              onClose();
+              refreshList();
+            }
+          })
           .catch((err) => {});
       })
       .catch((err) => {
@@ -68,6 +114,40 @@ const PersonModal = ({ checkUser, checkSign, setCheckSign, onClose }) => {
   const editUser = () => {
     setCheckSign('edit');
   };
+  const menuItems = [
+    {
+      key: '1',
+      label: (
+        <div
+          className={styles.operateLi}
+          onClick={() => {
+            setInvalidSign(true);
+          }}
+        >
+          作废
+        </div>
+      ),
+    },
+  ];
+  const UserTypeArr = {
+    1: '普通成员',
+    2: '管理员',
+    3: '临时成员',
+  };
+  const invalidPerson = () => {
+    debugger;
+    if (nameVal !== checkUser.name) return;
+    deleteUser({ userId: checkUser.userId })
+      .then((res) => {
+        onClose();
+        refreshList();
+      })
+      .catch((err) => {});
+  };
+  const nameValChange = (event) => {
+    var value = event.target.value;
+    setNameVal(value);
+  };
   return (
     <>
       <Modal open closable={false} footer={null} width={760}>
@@ -76,36 +156,49 @@ const PersonModal = ({ checkUser, checkSign, setCheckSign, onClose }) => {
             <div
               className={styles.close}
               onClick={() => {
-                form.resetFields();
                 onClose();
               }}
             >
               <Icon type="close" />
             </div>
+            {checkUser.userId && !invalidSign && (
+              <div className={styles.status}>
+                <span
+                  className={cx(styles.circle, {
+                    [styles.activated]: checkUser.status == '3',
+                    [styles.invalid]: checkUser.status == '5',
+                  })}
+                ></span>
+                <span className={styles.cont}>{statusArr[checkUser.status]}</span>
+                {!checkUser.oaId && checkUser.status != 5 && (
+                  <Dropdown menu={{ items: menuItems }}>
+                    <EllipsisOutlined style={{ color: '#C4C4C4', fontSize: '20px' }} />
+                  </Dropdown>
+                )}
+              </div>
+            )}
           </div>
           {!invalidSign && (
             <>
               <div className={styles.content}>
                 <Form
-                  {...formItemLayout}
+                  // {...formItemLayout}
                   form={form}
-                  // onFinish={onFinish}
                   layout="vertical"
                   initialValues={{
                     ...checkUser,
+                    manageUserType: checkUser.manageUserType.toString(),
                   }}
                 >
                   <Row gutter={[32, 8]}>
                     <Col span={12}>
                       <Form.Item
                         shouldUpdate={(pre, curr) => {
-                          console.log('pre,curr', pre, curr);
                           return true;
                         }}
                         name="name"
                         label="姓名"
                         labelAlign="left"
-                        hasFeedback
                         rules={[
                           {
                             required: true,
@@ -113,10 +206,19 @@ const PersonModal = ({ checkUser, checkSign, setCheckSign, onClose }) => {
                           },
                         ]}
                       >
-                        {checkSign != 'check' ? (
-                          <Input placeholder="输入姓名" style={{ width: 300, height: 50 }} />
+                        {checkSign == 'check' || checkUser.oaId ? (
+                          <Tooltip
+                            title={checkUser.oaId ? 'OA同步人员,姓名不可修改' : ''}
+                            placement="topRight"
+                          >
+                            <div className={styles.showName}>{checkUser.name}</div>
+                          </Tooltip>
                         ) : (
-                          <div className={styles.showName}>{checkUser.name}</div>
+                          <Input
+                            autoComplete="off"
+                            placeholder="输入姓名"
+                            style={{ width: 300, height: 50 }}
+                          />
                         )}
                       </Form.Item>
                     </Col>
@@ -124,7 +226,7 @@ const PersonModal = ({ checkUser, checkSign, setCheckSign, onClose }) => {
                       <Form.Item
                         name="manageUserType"
                         label="成员类型"
-                        // tooltip="xxx"
+                        tooltip="短期的保洁、外包、顾问、实习生等可归为临时成员"
                         rules={[
                           {
                             required: true,
@@ -132,14 +234,16 @@ const PersonModal = ({ checkUser, checkSign, setCheckSign, onClose }) => {
                           },
                         ]}
                       >
-                        {checkSign != 'check' ? (
+                        {checkSign == 'check' || temporary ? (
+                          <div className={styles.showName}>
+                            {UserTypeArr[checkUser.manageUserType] || '临时成员'}
+                          </div>
+                        ) : (
                           <Select placeholder="选择成员类型" style={{ width: 300, height: 50 }}>
                             <Select.Option value="1">普通成员</Select.Option>
                             <Select.Option value="2">管理员</Select.Option>
                             <Select.Option value="3">临时成员</Select.Option>
                           </Select>
-                        ) : (
-                          <div className={styles.showName}>{checkUser.manageUserType}</div>
                         )}
                       </Form.Item>
                     </Col>
@@ -148,7 +252,6 @@ const PersonModal = ({ checkUser, checkSign, setCheckSign, onClose }) => {
                         name="phone"
                         label="手机"
                         labelAlign="left"
-                        hasFeedback
                         rules={[
                           {
                             required: true,
@@ -156,32 +259,47 @@ const PersonModal = ({ checkUser, checkSign, setCheckSign, onClose }) => {
                           },
                         ]}
                       >
-                        {checkSign != 'check' ? (
+                        {checkSign == 'check' || checkUser.oaId ? (
+                          <Tooltip
+                            title={checkUser.oaId ? 'OA同步人员,手机号不可修改' : ''}
+                            placement="topRight"
+                          >
+                            <div className={styles.showName}>{checkUser.phone}</div>
+                          </Tooltip>
+                        ) : (
                           <Input
+                            autoComplete="off"
                             prefix={<span>+86</span>}
                             style={{ width: 300, height: 50 }}
                             suffix={<ExclamationCircleOutlined />}
                             placeholder="输入手机号"
                           />
-                        ) : (
-                          checkSign == 'check' && (
-                            <div className={styles.showName}>{checkUser.phone}</div>
-                          )
                         )}
                       </Form.Item>
                     </Col>
                     <Col span={12}>
                       <Form.Item name="job" label="职务" labelAlign="left" hasFeedback>
                         {checkSign != 'check' ? (
-                          <Input placeholder="输入职务" style={{ width: 300, height: 50 }} />
+                          <Input
+                            autoComplete="off"
+                            placeholder="输入职务"
+                            style={{ width: 300, height: 50 }}
+                          />
                         ) : (
                           <div className={styles.showName}>{checkUser.job}</div>
                         )}
                       </Form.Item>
                     </Col>
                     <Col span={24}>
-                      <Form.Item label="工区选择" labelAlign="left" hasFeedback name="radioValue">
-                        <AreaTree checkSign={checkSign}></AreaTree>
+                      <Form.Item label="工区选择" labelAlign="left" hasFeedback>
+                        <AreaTree
+                          checkSign={checkSign}
+                          spaceMap={spaceMap}
+                          radioValue={radioValue}
+                          setRadioValue={setRadioValue}
+                          checkedValues={checkedValues}
+                          setCheckedValues={setCheckedValues}
+                        ></AreaTree>
                       </Form.Item>
                     </Col>
                   </Row>
@@ -211,22 +329,34 @@ const PersonModal = ({ checkUser, checkSign, setCheckSign, onClose }) => {
             </>
           )}
           {invalidSign && (
-            <div className={styles.content}>
-              <div>作废13333333333的身份</div>
-              <div>该账号在贵公司的认证状态将失效,重新使用该软件需重新认证</div>
-              <div>
+            <div className={styles.invalidCont}>
+              <div className={styles.title}>作废13333333333的身份</div>
+              <div className={styles.article}>
+                该账号在贵公司的认证状态将失效,重新使用该软件需重新认证
+              </div>
+              <div className={styles.article}>
                 将释放该账号下的所有权益,包括但不限于该公司空间控制、通行,碳积分兑换及相关消费活动
               </div>
-              <div>
+              <div className={styles.article}>
                 将保留该账号下所有已预约的空间、服务订单、访客邀请记录、历史设备操作记录及碳积分
               </div>
-              <div>请在下方输入框内输入账号姓名</div>
-              <div>18611738701</div>
-              <div>
-                <input></input>
+              <div className={styles.phoneTitle}>请在下方输入框内输入账号姓名</div>
+              <div className={styles.phone}>18611738701</div>
+              <div className={styles.name}>
+                <Input
+                  autoComplete="off"
+                  style={{ width: 300, height: 50 }}
+                  value={nameVal}
+                  onChange={nameValChange}
+                ></Input>
               </div>
-              <div className={styles.btn}>
-                <span>作废</span>
+              <div
+                onClick={invalidPerson}
+                className={cx(styles.btnDiv, {
+                  [styles.disableBtnDiv]: nameVal !== checkUser.name,
+                })}
+              >
+                <span className={styles.btn}>作废</span>
               </div>
             </div>
           )}

+ 92 - 19
src/pages/Member/components/personModal/index.less

@@ -13,12 +13,27 @@
       font-weight: 400;
       font-size: 22px;
     }
-    .cont {
-      display: flex;
-      justify-content: space-between;
-      margin-left: 50px;
-      padding-top: 15px;
-      padding-right: 200px;
+    .status {
+      position: absolute;
+      right: 56px;
+      bottom: 20px;
+      .circle {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        margin-right: 8px;
+        background: rgba(0, 220, 35, 1);
+        border-radius: 100%;
+        &.activated {
+          background: #c1ea6c;
+        }
+        &.invalid {
+          background: #ef6666;
+        }
+      }
+      .cont {
+        margin-right: 18px;
+      }
     }
   }
 
@@ -63,20 +78,19 @@
     // width: 720px;
     height: 75px;
     border-top: 1px solid rgba(196, 196, 196, 0.4);
-    .btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 128px;
-      height: 50px;
-      margin-right: 60px;
-      background: rgba(255, 232, 35, 1);
-      border-radius: 30px;
-      box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.07);
-      cursor: pointer;
-    }
   }
-
+  .btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 128px;
+    height: 50px;
+    margin-right: 60px;
+    background: rgba(255, 232, 35, 1);
+    border-radius: 30px;
+    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.07);
+    cursor: pointer;
+  }
   .dsflex {
     display: flex;
     align-items: center;
@@ -84,4 +98,63 @@
   .mr22 {
     margin-right: 22px;
   }
+  :global {
+    .ant-form-vertical .ant-form-item-label > label {
+      display: block;
+      width: 100%;
+    }
+    .ant-form-item-label > label .ant-form-item-tooltip {
+      float: right;
+    }
+  }
+  .invalidCont {
+    padding: 80px 0 40px 0;
+    .title {
+      margin-bottom: 30px;
+      color: #000;
+      font-weight: 500;
+      font-size: 20px;
+      text-align: center;
+    }
+    .article {
+      width: 630px;
+      margin: 0 auto;
+      font-size: 16px;
+      line-height: 40px;
+    }
+    .phoneTitle {
+      margin-top: 44px;
+      color: #000;
+      text-align: center;
+    }
+    .phone {
+      margin-top: 10px;
+      margin-bottom: 10px;
+      color: #000;
+      font-weight: 500;
+      text-align: center;
+    }
+    .name {
+      text-align: center;
+    }
+    .btnDiv {
+      display: flex;
+      justify-content: center;
+      margin-top: 40px;
+    }
+    .disableBtnDiv {
+      .btn {
+        background: rgba(196, 196, 196, 0.2);
+        cursor: default;
+      }
+    }
+  }
+}
+.operateLi {
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-indent: 3px;
+  border-radius: 5px;
+  cursor: pointer;
 }

+ 8 - 3
src/pages/Member/index.less

@@ -6,10 +6,10 @@
     margin-right: 8px;
     background: rgba(0, 220, 35, 1);
     border-radius: 100%;
-    .activated {
+    &.activated {
       background: #c1ea6c;
     }
-    .invalid {
+    &.invalid {
       background: #ef6666;
     }
   }
@@ -44,7 +44,12 @@
     }
   }
 }
-
+:global {
+  .ant-dropdown-menu {
+    padding: 0;
+    border-radius: 5px;
+  }
+}
 .operateLi {
   width: 60px;
   margin-bottom: 20px;

+ 185 - 65
src/pages/Member/index.tsx

@@ -13,21 +13,36 @@ import { EllipsisOutlined } from '@ant-design/icons';
 import {
   queryUserList,
   queryCompanyOAById,
-  getControlSpaceCompany,
+  queryControlSpaceCompany,
+  deleteUser,
 } from '@/services/sagacare_service/member';
 
 const Member: React.FC = () => {
-  const [perVisible, setPerVisible] = useState(false);
-  const [isSyncOa, setIsSyncOa] = useState(false);
+  const [perVisible, setPerVisible] = useState(false); //人员对话框显示
+  const [temporary, setTemporary] = useState(false); //是否是临时成员添加
+  const [invalidSign, setInvalidSign] = useState(false); //显示作废
+  const [spaceMap, setSpaceMap] = useState<any>();
+
+  const [searchStr, setSearchStr] = useState();
+  const [isSyncOa, setIsSyncOa] = useState(true); //是否是OA同步
   const [userList, setUserList] = useState<any>([]);
-  const [total, setTotal] = useState(10);
+  const [total, setTotal] = useState();
   const [loading, setLoading] = useState(false);
   const [page, setPage] = useState({
     pageNum: 1,
     pageSize: 10,
   });
-  const [checkUser, setCheckUser] = useState({});
-  const [checkSign, setCheckSign] = useState('add');
+  const [checkUser, setCheckUser] = useState({}); //查看的人
+  const [checkSign, setCheckSign] = useState('add'); // 三种状态 查看 编辑 新增
+  const [refreshNum, setRefreshNum] = useState(0); //刷新列表
+  const statusArr = {
+    2: '正常',
+    3: '待激活',
+    5: '已作废',
+  };
+  const [sorter, setSorter] = useState<any>({
+    updateDate: 'DESC', //'ASC' : 'DESC'
+  });
 
   const getColumns = () => {
     return [
@@ -69,16 +84,22 @@ const Member: React.FC = () => {
         title: '更新时间',
         dataIndex: 'updateDate',
         sorter: true,
-        sortered: 'DESC',
+        sortered: sorter.updateDate,
       },
       {
         title: '状态',
         dataIndex: 'status',
         render: function (content, item, index) {
+          //debugger;
           return (
             <div>
-              <span className={styles.circle}></span>
-              <span>{content}</span>
+              <span
+                className={cx(styles.circle, {
+                  [styles.activated]: content == '3',
+                  [styles.invalid]: content == '5',
+                })}
+              ></span>
+              <span>{statusArr[content]}</span>
             </div>
           );
         },
@@ -130,7 +151,7 @@ const Member: React.FC = () => {
           ];
           return (
             <Dropdown menu={{ items: menuItems }}>
-              <EllipsisOutlined />
+              <EllipsisOutlined style={{ color: '#4D5262', fontSize: '20px' }} />
             </Dropdown>
           );
         },
@@ -140,91 +161,186 @@ const Member: React.FC = () => {
   const goToInvalid = () => {
     history.push(`/member/invalid`);
   };
-  const onClose = () => {
+  const refreshList = () => {
+    setRefreshNum(refreshNum + 1);
+  };
+  const onClose = (param) => {
     setPerVisible(false);
   };
+
   useEffect(() => {
     var paramObj = {
       criteria: {
-        // param: 'string',
-        // status: 0,
-        companyId: '',
+        param: searchStr,
+        status: 1,
+        companyId: '30bd3cf2b9ed4742b607fd5ea2c00d96',
       },
-      page: 0,
-      size: 10,
+      page: page.pageNum,
+      size: page.pageSize,
       orders: [
         {
-          column: '',
-          asc: true,
+          column: 'updateDate',
+          asc: sorter.updateDate == 'DESC' ? true : false,
         },
       ],
     };
-    setUserList([
-      {
-        userId: '222',
-        companyId: '222',
-        companyName: '博锐',
-        name: '赵女士',
-        phone: '13822222222',
-        manageUserType: 1,
-        manageUserTypeName: '普通员工',
-        job: '部门总监',
-        isAllControl: true,
-        updateDate: '2022/08/11',
-        status: '待激活',
-        permanentSpaceName: '上格云',
-        oaId: 'sdfsdf',
-      },
-      {
-        userId: '222',
-        companyId: '222',
-        companyName: '博锐',
-        name: '赵男士',
-        phone: '1382266622',
-        manageUserType: 2,
-        manageUserTypeName: '普通员工',
-        job: '部门总监',
-        isAllControl: false,
-        updateDate: '2022/08/11',
-        status: '待激活',
-        permanentSpaceName: '上格云',
-      },
-    ]);
-    // setIsSyncOa(true);
+    setLoading(true);
+
     queryUserList(paramObj)
-      .then((res) => {})
-      .catch((err) => {});
-    queryCompanyOAById({ companyId: 'xxxx' })
-      .then((res) => {})
-      .catch((err) => {});
+      .then((res) => {
+        debugger;
+        setLoading(false);
+        var uarr = res.content || [];
+        var count = res.count || 0;
+        setUserList(uarr);
+        setTotal(count);
+      })
+      .catch((err) => {
+        setLoading(false);
+      });
+  }, [searchStr, page, sorter, refreshNum]);
+  useEffect(() => {
+    // const spaceMap3 = {
+    //   '北京中海金融街|2层': [
+    //     {
+    //       id: '22',
+    //       companyId: '30bd3cf2b9ed4742b607fd5ea2c00d96',
+    //       spaceId: 'Sp110102000292ab218dd67011e88bee87db7e0ad2b711',
+    //       spaceName: 'D-303',
+    //       floorId: 'Fl1101020002bf10b9cad5c811e88bee1113190f5c6a11',
+    //       floorName: '2层',
+    //       buildingId: 'Bd110102000223fbec0accfb11e8a471b5d1be3b6dfe',
+    //       buildingName: '北京中海金融街',
+    //       isPermanentSpace: true,
+    //       createTime: 1692761562000,
+    //       updateTime: 1692760902000,
+    //     },
+    //     {
+    //       id: '33',
+    //       companyId: '30bd3cf2b9ed4742b607fd5ea2c00d96',
+    //       spaceId: 'Sp110102000292ab218dd67011e88bee87db7e0ad2b722',
+    //       spaceName: 'D-304',
+    //       floorId: 'Fl1101020002bf10b9cad5c811e88bee1113190f5c6a22',
+    //       floorName: '2层',
+    //       buildingId: 'Bd110102000223fbec0accfb11e8a471b5d1be3b6dfe',
+    //       buildingName: '北京中海金融街',
+    //       isPermanentSpace: true,
+    //       createTime: 1692761562000,
+    //       updateTime: 1692760902000,
+    //     },
+    //     {
+    //       id: '55',
+    //       companyId: '30bd3cf2b9ed4742b607fd5ea2c00d96',
+    //       spaceId: 'Sp110102000292ab218dd67011e88bee87db7e0ad2b733',
+    //       spaceName: 'D-306',
+    //       floorId: 'Fl1101020002bf10b9cad5c811e88bee1113190f5c6a',
+    //       floorName: '2层',
+    //       buildingId: 'Bd110102000223fbec0accfb11e8a471b5d1be3b6dfe',
+    //       buildingName: '北京中海金融街',
+    //       isPermanentSpace: true,
+    //       createTime: 1692761562000,
+    //       updateTime: 1692760902000,
+    //     },
+    //   ],
+    //   '北京中海金融街|3层': [
+    //     {
+    //       id: '22',
+    //       companyId: '30bd3cf2b9ed4742b607fd5ea2c00d96',
+    //       spaceId: 'Sp110102000292ab218dd67011e88bee87db7e0ad2b744',
+    //       spaceName: 'C-303',
+    //       floorId: 'Fl1101020002bf10b9cad5c811e88bee1113190f5c6a',
+    //       floorName: '3层',
+    //       buildingId: 'Bd110102000223fbec0accfb11e8a471b5d1be3b6dfe',
+    //       buildingName: '北京中海金融街',
+    //       isPermanentSpace: true,
+    //       createTime: 1692761562000,
+    //       updateTime: 1692760902000,
+    //     },
+    //     {
+    //       id: '33',
+    //       companyId: '30bd3cf2b9ed4742b607fd5ea2c00d96',
+    //       spaceId: 'Sp110102000292ab218dd67011e88bee87db7e0ad2b755',
+    //       spaceName: 'C-304',
+    //       floorId: 'Fl1101020002bf10b9cad5c811e88bee1113190f5c6a',
+    //       floorName: '3层',
+    //       buildingId: 'Bd110102000223fbec0accfb11e8a471b5d1be3b6dfe',
+    //       buildingName: '北京中海金融街',
+    //       isPermanentSpace: true,
+    //       createTime: 1692761562000,
+    //       updateTime: 1692760902000,
+    //     },
+    //     {
+    //       id: '55',
+    //       companyId: '30bd3cf2b9ed4742b607fd5ea2c00d96',
+    //       spaceId: 'Sp110102000292ab218dd67011e88bee87db7e0ad2b766',
+    //       spaceName: 'C-306',
+    //       floorId: 'Fl1101020002bf10b9cad5c811e88bee1113190f5c6a',
+    //       floorName: '3层',
+    //       buildingId: 'Bd110102000223fbec0accfb11e8a471b5d1be3b6dfe',
+    //       buildingName: '北京中海金融街',
+    //       isPermanentSpace: true,
+    //       createTime: 1692761562000,
+    //       updateTime: 1692760902000,
+    //     },
+    //   ],
+    // };
+
     //查询受控列表
-    getControlSpaceCompany()
-      .then((res) => {})
+    var paramObj = {
+      criteria: {
+        //spaceName: '',
+        companyId: '30bd3cf2b9ed4742b607fd5ea2c00d96',
+      },
+    };
+    queryControlSpaceCompany(paramObj)
+      .then((res) => {
+        var data = res.data || {};
+        setSpaceMap(data);
+      })
+      .catch((err) => {});
+    queryCompanyOAById({ companyId: '30bd3cf2b9ed4742b607fd5ea2c00d96' })
+      .then((res) => {
+        var isSyncOa = res?.isSyncOa;
+        setIsSyncOa(isSyncOa == 1 ? true : false);
+      })
       .catch((err) => {});
   }, []);
+
   const checkPerson = (item) => {
     setPerVisible(true);
+    setInvalidSign(false);
     setCheckSign('check'); //设置为查看状态
-    debugger;
     setCheckUser(item);
+    setTemporary(false);
   };
   const editPerson = (item) => {
     setPerVisible(true);
+    setInvalidSign(false);
     setCheckSign('edit');
     setCheckUser(item);
+    setTemporary(false);
   };
   //作废用户
-  const invalidPerson = (item) => {};
+  const invalidPerson = (item) => {
+    setInvalidSign(true);
+    setPerVisible(true);
+    setCheckUser(item);
+    setTemporary(false);
+  };
   //添加临时用户
   const addTemporaryPerson = () => {
     setPerVisible(true);
+    setInvalidSign(false);
     setCheckSign('add');
     setCheckUser({});
+    setTemporary(true);
   };
   const addNewPerson = () => {
     setPerVisible(true);
+    setInvalidSign(false);
     setCheckSign('add');
     setCheckUser({});
+    setTemporary(false);
   };
 
   return (
@@ -233,7 +349,7 @@ const Member: React.FC = () => {
         title={<FormattedMessage id="menu.member" />}
         action={
           <div className={styles.headerRight}>
-            <Search />
+            <Search setSearchStr={setSearchStr} />
             {isSyncOa ? (
               <>
                 <div className={styles.allIn}>已开启OA同步</div>
@@ -271,7 +387,7 @@ const Member: React.FC = () => {
       <div className={styles.bottomTable}>
         <Table
           columns={getColumns()}
-          rowKey="phone"
+          rowKey="userId"
           dataSource={userList}
           loading={loading}
           page={page}
@@ -284,12 +400,10 @@ const Member: React.FC = () => {
             // }
           }}
           onRowClick={(record) => {}}
-          onSortChange={(col, direction) => {
-            debugger;
-            // setSorter({ [col['sortIndex']]: direction });
+          onSortChange={(col: any, direction: string) => {
+            setSorter({ [col['dataIndex']]: direction });
           }}
           onPageChange={(p) => {
-            debugger;
             setPage(p);
           }}
         />
@@ -297,10 +411,16 @@ const Member: React.FC = () => {
       </div>
       {perVisible && (
         <PersonModal
+          invalidSign={invalidSign}
+          temporary={temporary}
           checkUser={checkUser}
           checkSign={checkSign}
           onClose={onClose}
           setCheckSign={setCheckSign}
+          statusArr={statusArr}
+          setInvalidSign={setInvalidSign}
+          spaceMap={spaceMap}
+          refreshList={refreshList}
         ></PersonModal>
       )}
     </div>

+ 12 - 26
src/sagacare_components/Search/index.tsx

@@ -17,11 +17,9 @@ type SearchInputProps = {
   // callbackSearch: (s: any) => void;
   //mapList: API.MapInfo[];
 };
-const SearchInput: React.FC<SearchInputProps> = () => {
+const SearchInput: React.FC<SearchInputProps> = ({ setSearchStr }) => {
   const [matchData, setMatchData] = useState<mapResType[]>([]);
   const [value, setValue] = useState<any>();
-  const { changeSearchBuildId, changeSearchFloorId, changeSearchText } =
-    useModel('sagacare_searchInfo');
   const [loading, setLoading] = useState<boolean>(false);
   const ref = useRef<any>(0);
   const searchQuery = (value: string) => {
@@ -47,49 +45,37 @@ const SearchInput: React.FC<SearchInputProps> = () => {
         setLoading(false);
       });
     }
-    // debugger;
+    function fake2() {
+      debugger;
+      setSearchStr(value);
+    }
     if (value) {
       //防抖
-      ref.current = setTimeout(fake, 600);
+      ref.current = setTimeout(fake2, 600);
     } else {
       setMatchData([]);
     }
   };
-  //这是搜索 的下拉列表的显示
+  //这是搜索 的下拉列表的搜索
   const handleSearch = (value: string) => {
-    //if (value) {
     searchQuery(value);
-    // } else {
-    //   setMatchData([]);
-    // }
   };
 
   //这是搜索的下拉列表的点击
   const handleChange = (sel: string) => {
     setValue(null); //清空输入的值
     setMatchData([]); //清空搜索匹配列表
-    var filterItem = matchData.filter((item) => {
-      return item.id == sel;
-    });
-    var resItem = filterItem[0] || {};
-    //callbackSearch(resItem);
-    // //搜索内容改变
-    // changeSearchText({ text: resItem.localName });
-    // //改变存储的搜索得到的buildingId floorId
-    // changeSearchBuildId(resItem.buildingId);
-    // changeSearchFloorId(resItem.floorId);
+    // var filterItem = matchData.filter((item) => {
+    //   return item.id == sel;
+    // });
+    // var resItem = filterItem[0] || {};
   };
   const handelInputKeyDown = (e) => {
     // 如果点击回车的操作
     //console.log('keydown', matchData);
     if (e.code == 'Enter') {
-      //if (matchData.length == 1) {
       var resItem = matchData[0] || {};
-      //callbackSearch(resItem);
-      // changeSearchText({ text: resItem.localName });
-      // changeSearchBuildId(resItem.buildingId);
-      // changeSearchFloorId(resItem.floorId);
-      //}
+      debugger;
     }
   };
 

+ 15 - 25
src/services/sagacare_service/member.js

@@ -19,85 +19,75 @@ function commonParams() {
 
 //新增/修改用户
 export async function saveUserInfo(params, options) {
-  return request(`/sgadmin/controlSpaceUser/saveUser?${commonParams()}`, {
-    method: 'GET',
+  return request(`/xiaojing/controlSpaceUser/saveUser?${commonParams()}`, {
+    method: 'POST',
     from: 'sagacare',
     headers: {
       'Content-Type': 'application/json',
     },
     ...(options || {}),
-    params: {
-      ...params,
-    },
+    data: params,
   });
 }
 //查询用户信息
 export async function queryUserInfo(params, options) {
-  return request(`/sgadmin/controlSpaceUser/queryUser?${commonParams()}`, {
-    method: 'GET',
+  return request(`/xiaojing/controlSpaceUser/queryUser?${commonParams()}`, {
+    method: 'POST',
     from: 'sagacare',
     headers: {
       'Content-Type': 'application/json',
     },
     ...(options || {}),
-    params: {
+    data: {
       ...params,
     },
   });
 }
 //用户作废
 export async function deleteUser(params, options) {
-  return request(`/sgadmin/controlSpaceUser/deleteUser?${commonParams()}`, {
+  return request(`/xiaojing/controlSpaceUser/deleteUser?userId=${params.userId}`, {
     method: 'GET',
     from: 'sagacare',
     headers: {
       'Content-Type': 'application/json',
     },
     ...(options || {}),
-    params: {
-      ...params,
-    },
   });
 }
 //用户查询列表
 export async function queryUserList(params, options) {
-  return request(`/sgadmin/controlSpaceUser/query?${commonParams()}`, {
-    method: 'GET',
+  return request(`/xiaojing/controlSpaceUser/query`, {
+    method: 'POST',
     from: 'sagacare',
     headers: {
       'Content-Type': 'application/json',
     },
     ...(options || {}),
-    params: {
-      ...params,
-    },
+    data: params,
   });
 }
 //查询受控列表
-export async function getControlSpaceCompany(params, options) {
-  return request(`/sgadmin/controlSpaceUser/getControlSpaceCompany?${commonParams()}`, {
-    method: 'GET',
+export async function queryControlSpaceCompany(params, options) {
+  return request(`/xiaojing/controlSpaceUser/getControlSpaceCompany?${commonParams()}`, {
+    method: 'POST',
     from: 'sagacare',
     headers: {
       'Content-Type': 'application/json',
     },
     ...(options || {}),
-    params: {
+    data: {
       ...params,
     },
   });
 }
 //是否oa同步
 export async function queryCompanyOAById(params, options) {
-  return request(`/sgadmin/texCompany/queryCompanyById?${commonParams()}`, {
+  return request(`/xiaojing/texCompany/queryCompanyById?companyId=${params.companyId}`, {
     method: 'GET',
     from: 'sagacare',
     headers: {
       'Content-Type': 'application/json',
     },
     ...(options || {}),
-    params: {
-      ...params,
-    },
   });
 }