fix: v1版本

src/pages/authConfig/memberSystem/memberDetail.tsx

-import React, { useContext, useState, useEffect, useRef, useLayoutEffect, useCallback } from 'react';
-import { Row, Col, Button, Form, Input, Space, Tabs, message, Badge, Card } from 'antd';
-import { IntegrateTree } from 'god'
+import React, {
+  useContext,
+  useState,
+  useEffect,
+  useRef,
+  useLayoutEffect,
+  useCallback,
+  useMemo,
+} from 'react';
+import {
+  Row,
+  Col,
+  Button,
+  Form,
+  Input,
+  Space,
+  Tabs,
+  Checkbox,
+  Badge,
+  Card,
+  Tag,
+} from 'antd';
+import { IntegrateTree } from 'god';
 import { history } from 'umi';
 import { historyContainer } from '@/hooks/useHistoryContainer';
 import NiceForm from '@/components/NiceForm';
-import TabTree, { useTreeActions, createTreeActions } from '@/components/TabTree';
+import TabTree, {
+  useTreeActions,
+  createTreeActions,
+} from '@/components/TabTree';
 import { PublicApi } from '@/services/api';
-import styled from './index.less'
+import styled from './index.less';
 import CheckboxTree from '@/components/CheckBoxTree';
-import { useTreeTabs } from '@/hooks/useTreeTabs';
+import { useTreeData } from '@/hooks/useTreeData';
 import { createFormActions } from '@formily/antd';
 import { usePageStatus, PageStatus } from '@/hooks/usePageStatus';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import ReutrnEle from '@/components/ReturnEle';
+import { useLeavePage } from '@/hooks/useLeavePage';
+import { useMap } from '@umijs/hooks';
+import FieldHeader from '@/components/FieldHeader';
+import OrgModal from './orgModal';
+import { PlusOutlined } from '@ant-design/icons';
+import { useTreeTabs } from '@/hooks/useTreeTabs';
 
-const pageTitles = [
-  '新增',
-  '编辑',
-  '预览'
-]
+const pageTitles = ['新增', '编辑', '预览'];
 
-const TabFormErrors = (props) => {
+const TabFormErrors = props => {
   return (
     <Badge dot={props.dot} offset={[5, -5]}>
       {props.children}
     </Badge>
-  )
-}
+  );
+};
 
 const fetchMenuData = async () => {
-  const res = await PublicApi.getMemberRoleAuthTree()
-  return res
-}
+  const res = await PublicApi.getMemberRoleAuthTree();
+  return { data: res.data.menus };
+};
+
+const TabsItem = Tabs.TabPane;
+
+const menuActions = createFormActions();
 
-const TabsItem = Tabs.TabPane
+const treeActions = createTreeActions();
 
-const menuActions = createFormActions()
+const fetchOrgsTreeData = async () => {
+  const res = await PublicApi.getMemberOrgTree();
+  return res;
+};
 
-const treeActions = createTreeActions()
+const getTreeNode = (treeData: any, targetNodeId: any) => {
+  if (!Array.isArray(treeData)) {
+    return null;
+  }
+  let result = {
+    id: '',
+    title: '',
+  }
+  for (let i = 0; i < treeData.length; i++) {
+    const item = treeData[i];
+    if (item.id === targetNodeId) {
+      return item
+    }
+
+    if (item.children) {
+      result = getTreeNode(item.children, targetNodeId);
+    }
+  }
+  return result;
+};
 
 const MemberDetail: React.FC<{}> = () => {
   const [form] = Form.useForm();
-  const value = useContext(historyContainer)
+  const value = useContext(historyContainer);
+  const [nodeRecord, setNodeRecord] = useState<any>(null);
+  const [orgModalVisible, setOrgModalVisible] = useState(false);
+  const [treeExtraMaps, { set: setButtonAuth, get: getButtonAuth }] = useMap<
+    any,
+    any
+  >();
 
   const {
-    treeData,
-    handleSelect,
-    nodeRecord,
-    isEditForm,
-    setIsEditForm,
-    getTreeMaps,
+    treeData: plateformTreeData,
+    handleSelect: handleSyncSelect,
   } = useTreeTabs({
+    fetchMenuData: fetchOrgsTreeData,
+  });
+  const { treeData, handleSelect } = useTreeData({
     fetchMenuData,
-    fetchItemDetailData: ({ id }) => PublicApi.getMemberRoleAuthButton({
-      menuId: id
-    })
-  })
-
-  const actionRef = useRef<any>({})
-  const formInitValue = nodeRecord ? getTreeMaps(nodeRecord.key) : {}
-  const [errors, setErrors] = useState<boolean>(false)
-  const [formValue, setFormValue] = useState<any>(null)
-  const {
-    pageStatus,
-    id
-  } = usePageStatus()
+    fetchItemDetailData: ({ id }) =>
+      PublicApi.getMemberRoleAuthButton({
+        menuId: id,
+      }),
+  });
+
+  const actionRef = useRef<any>({});
+  const formInitValue = nodeRecord ? getButtonAuth(nodeRecord.key) : {};
+  const [errors, setErrors] = useState<boolean>(false);
+  const [formValue, setFormValue] = useState<any>(null);
+
+  // 储存的按钮数据
+  const [buttonInfos, setButtonInfos] = useState<any>([]);
+  // 储存的数据权限选项
+  const [authInfos, setAuthInfos] = useState<any>({});
+  const modalRef = useRef<any>({})
+
+  const disabledCheckAuthConfig = useMemo(() => {
+    if (nodeRecord && authInfos[nodeRecord.id]) {
+      return authInfos[nodeRecord.id] as {
+        hasDataAuth: number;
+        dataAuthConfig: number;
+        orgIds: any[];
+      };
+    } else {
+      return { hasDataAuth: 0, dataAuthConfig: 0, orgIds: [] };
+    }
+  }, [authInfos, nodeRecord]);
+  const { pageStatus, id } = usePageStatus();
+
+  const fetchItemDetailData = useCallback(
+    async node => {
+      const isAdd = pageStatus === PageStatus.ADD;
+      const fn = isAdd
+        ? PublicApi.getMemberRoleAuthButton
+        : PublicApi.getMemberRoleAuthButtonCheck;
+      const params = isAdd ? {} : { memberRoleId: id };
+      const { data } = await fn({
+        menuId: node ? node.id : nodeRecord.id,
+        ...params,
+      });
+      setButtonAuth(node.id, data);
+
+      // 该配置由pass平台控制, 如果为1 则表示该角色可以配置数据权限
+      if (authInfos[node.id]) {
+        // 已经存在了配置权限， 则不做更新, 防止修改后被重置
+      } else {
+        setAuthInfos({
+          ...authInfos,
+          [node.id]: {
+            hasDataAuth: isAdd ? 0 : data.hasDataAuth,
+            dataAuthConfig: data.dataAuthConfig,
+            orgIds: isAdd ? [] : data.orgIds,
+          },
+        });
+      }
+    },
+    [nodeRecord, authInfos],
+  );
 
+  const [setEditForm, validateEditForm] = useLeavePage({
+    onSave: () => {},
+    onModalOk: () => {},
+    onModalCancel: () => {},
+  });
+
+  const handleNodeSelected = async (selectKey, selectNode) => {
+    try {
+      const { node } = await handleSelect(selectKey, selectNode);
+      if (nodeRecord) {
+        return new Promise((resolve, reject) => {
+          if (selectKey !== nodeRecord.key) {
+            validateEditForm()
+              .then(() => {
+                setNodeRecord(node);
+                fetchItemDetailData(node);
+                resolve(true);
+              })
+              .catch(() => {
+                reject();
+              });
+          } else {
+            resolve(null);
+          }
+        });
+      } else {
+        setNodeRecord(node);
+        fetchItemDetailData(node);
+      }
+    } catch (error) {}
+  };
 
   // 编辑和预览模式下需回显数据
-  const fetchRoleMenuDetail = async (id) => {
+  const fetchRoleMenuDetail = async id => {
     // 10秒缓存
-    const res = await PublicApi.getMemberRoleGet({
-      memberRoleId: id
-    }, { useCache: true, ttl: 10 * 1000 })
-    return res
-  }
-
-  // 储存的按钮数据
-  const [buttonInfos, setButtonInfos] = useState<any>([])
+    const res = await PublicApi.getMemberRoleGet(
+      {
+        memberRoleId: id,
+      },
+      { useCache: true, ttl: 10 * 1000 },
+    );
+    return res;
+  };
 
   useEffect(() => {
     if (!id) return;
     fetchRoleMenuDetail(id).then(res => {
-      const { data } = res
-      setFormValue({...data, imFlag: data['imFlag'] ? true : false})
-    })
-  }, [])
+      const { data } = res;
+      setFormValue(data);
+    });
+  }, []);
 
   useEffect(() => {
     if (formInitValue) {
       // 显示右侧checkbox
-      setButtonInfos(formInitValue.buttons || [])
+      setButtonInfos(formInitValue.buttons || []);
       // 回显右侧checkbox的值
       if (actionRef.current.setSelected) {
-        actionRef.current.setSelected()
+        actionRef.current.setSelected();
       }
     }
-  }, [getTreeMaps])
+  }, [getButtonAuth, nodeRecord]);
 
   const handleSubmit = () => {
-    menuActions.submit().then(async ({ values }) => {
-      values['imFlag'] = values['imFlag'] ? 1 : 0
-      setErrors(false)
-      // 如果未点击过操作权限tab, 则无法获取到actionRef实例, 需补充手动补充回显的ids, 新增的时候如果未设置按钮，则返回空数组
-      const buttonCheckIds = actionRef.current.selected || (formValue && formValue.ids) || []
-      const treeCheckIds = treeActions.getSelectKeys()
-      const menuIds = [...buttonCheckIds, ...treeCheckIds]
-      if (pageStatus === PageStatus.EDIT) {
-        await PublicApi.postMemberRoleUpdate({
-          ...values,
-          memberRoleId: id,
-          menuIds
-        })
-      } else {
-        await PublicApi.postMemberRoleAdd({
+    menuActions
+      .submit()
+      .then(async ({ values }) => {
+        setErrors(false);
+        // 如果未点击过操作权限tab, 则无法获取到actionRef实例, 需补充手动补充回显的ids, 新增的时候如果未设置按钮，则返回空数组
+        const buttonCheckIds =
+          actionRef.current.selected || (formValue && formValue.ids) || [];
+        const treeCheckIds = treeActions.getSelectKeys();
+
+        const publicParams = {
           ...values,
-          menuIds
-        })
-      }
-      history.goBack(-1)
-    }).catch(err => {
-      console.log(err)
-      if (Array.isArray(err)) {
-        setErrors(true)
-      }
-    })
-  }
+          hasImAuth: values.hasImAuth ? 1 : 0,
+          auth: treeCheckIds.map(v => ({
+            menuId: v,
+            // @todo 暂时写死为空
+            buttonIds: [],
+            hasDataAuth: authInfos[v]?.hasDataAuth,
+            orgIds: authInfos[v]?.orgIds
+          })),
+        };
+        if (pageStatus === PageStatus.EDIT) {
+          await PublicApi.postMemberRoleUpdate({
+            memberRoleId: id,
+            ...publicParams,
+          });
+        } else {
+          await PublicApi.postMemberRoleAdd({
+            ...publicParams,
+          });
+        }
+        history.goBack(-1);
+      })
+      .catch(err => {
+        console.log(err);
+        if (Array.isArray(err)) {
+          setErrors(true);
+        }
+      });
+  };
 
-  const changeTabs = (key) => {
+  const changeTabs = key => {
     if (key === '2' && id) {
       fetchRoleMenuDetail(id).then(res => {
-        const { data } = res
+        const { data } = res;
         // 获取菜单id选中的集合
-        const {
-          checkIds,
-          ...reset
-        } = data
-        treeActions.setSelectKeys(checkIds)
-      })
+        const { checkIds, ...reset } = data;
+        treeActions.setSelectKeys(checkIds);
+      });
     }
-  }
+  };
+
+  const onDataAuthChange = e => {
+    setAuthInfos({
+      ...authInfos,
+      [nodeRecord.id]: Object.assign(
+        { ...authInfos[nodeRecord.id] },
+        { hasDataAuth: e.target.checked ? 1 : 0 },
+      ),
+    });
+  };
 
   const extraButtons = (
     <Space>
-      <Button type='primary' disabled={pageStatus === PageStatus.PREVIEW} onClick={handleSubmit}>保存</Button>
+      <Button
+        type="primary"
+        disabled={pageStatus === PageStatus.PREVIEW}
+        onClick={handleSubmit}
+      >
+        保存
+      </Button>
     </Space>
-  )
+  );
+
+  const handleOrgSuccess = selectKeys => {
+    setAuthInfos({
+      ...authInfos,
+      [nodeRecord.id]: Object.assign(
+        { ...authInfos[nodeRecord.id] },
+        { orgIds: selectKeys },
+      ),
+    });
+    setOrgModalVisible(false);
+  };
+  const handleOrgCancel = () => {
+    setOrgModalVisible(false);
+  };
+
+  const handleOpenOrg = () => {
+    setOrgModalVisible(true);
+  };
 
   return (
     <PageHeaderWrapper
       onBack={() => history.goBack()}
       backIcon={<ReutrnEle description="返回" />}
-      className='addRepository'
+      className="addRepository"
       title={pageTitles[pageStatus]}
-      extra={[
-        extraButtons
-      ]}
+      extra={extraButtons}
     >
       <Card>
-        <Tabs type='card' className='black-tabs' onChange={changeTabs}>
-          <TabsItem tab={<TabFormErrors dot={errors}>基本信息</TabFormErrors>} key='1'>
+        <Tabs type="card" className="black-tabs" onChange={changeTabs}>
+          <TabsItem
+            tab={<TabFormErrors dot={errors}>基本信息</TabFormErrors>}
+            key="1"
+          >
             <NiceForm
               labelCol={4}
               wrapperCol={12}
               initialValues={formValue}
-              labelAlign='left'
+              labelAlign="left"
               actions={menuActions}
               editable={pageStatus !== PageStatus.PREVIEW}
-              previewPlaceholder=' '
+              previewPlaceholder=" "
               schema={{
                 type: 'object',
                 properties: {
                   roleName: {
                     type: 'string',
                     title: '角色名称',
-                    required: true
+                    required: true,
                   },
                   remark: {
                     type: 'textarea',
                     title: '备注',
-                    "x-rules": [
+                    'x-rules': [
                       {
                         limitByte: true,
-                        maxByte: 120
-                      }
+                        maxByte: 120,
+                      },
                     ],
-                    "x-component-props": {
-                      rows: 4
-                    }
+                    'x-component-props': {
+                      rows: 4,
+                    },
+                  },
+                  hasImAuth: {
+                    type: 'number',
+                    title: '是否具有IM通讯权限',
+                    'x-component': 'CheckboxSingle',
                   },
                   state: {
                     type: 'number',
                     title: '状态',
-                    "x-component": 'CustomStatus',
-                    default: 1
-                  },
-                  imFlag: {
-                    type: 'boolean',
-                    title: '客服权限',
-                    required: true,
-                    "x-component": 'CheckboxSingle',
-                    "x-component-props": {
-                      children: '客服IM即时通讯权限',
-                      style: {
-                        marginTop: 4,
-                      }
-                    },
-                    default: 0
+                    'x-component': 'CustomStatus',
+                    default: 1,
                   },
-                }
+                },
               }}
-            >
-
-            </NiceForm>
+            ></NiceForm>
           </TabsItem>
-          <TabsItem tab='操作权限' key='2'>
-            <Row justify='space-between'>
-              <Col span={17} className={styled['menu-role-tree']}>
+          <TabsItem tab="操作权限" key="2">
+            <Row justify="space-between">
+              <Col span={8} className={styled['menu-role-tree']}>
                 <TabTree
-                  title='菜单访问权限'
+                  title="菜单访问权限"
                   fetchData={params => fetchMenuData()}
                   checkable
                   actions={treeActions}
                   treeData={treeData}
-                  handleSelect={handleSelect}
+                  handleSelect={handleNodeSelected}
                   checkStrictly={true}
-                  customKey='id'
+                  customKey="id"
                   disabled={pageStatus === PageStatus.PREVIEW}
                 />
               </Col>
 
-              <Col span={6} className={styled['menu-role-tree']}>
+              <Col span={7} className={styled['menu-role-tree']}>
                 <CheckboxTree
                   actions={actionRef}
                   disabled={pageStatus === PageStatus.PREVIEW}
                   checkedNodes={buttonInfos}
-                  title='菜单接口访问权限'
+                  title="菜单接口访问权限"
                 />
               </Col>
+              <Col span={7} className={styled['menu-role-tree']}>
+                <FieldHeader renderTitle="数据权限" />
+                {nodeRecord && (
+                  <>
+                    <Checkbox
+                      checked={!!disabledCheckAuthConfig.hasDataAuth}
+                      onChange={e => onDataAuthChange(e)}
+                      disabled={
+                        pageStatus === PageStatus.PREVIEW ||
+                        !disabledCheckAuthConfig.dataAuthConfig
+                      }
+                    >
+                      是否需要数据权限
+                    </Checkbox>
+                    <div style={{marginTop: 16}}>
+                      <p style={{color: '#909399'}}>组织机构授权</p>
+                      {disabledCheckAuthConfig.orgIds.map(v => {
+                        const node = getTreeNode(plateformTreeData, v);
+                        if (!node || !node.id) return null;
+                        return (
+                          <div className="org-tag-container" key={node.id}>
+                            <Tag color={'#F4F5F7'} className="org-tag">
+                              {node.title}
+                            </Tag>
+                          </div>
+                        );
+                      })}
+                      <Button block type="dashed" onClick={handleOpenOrg}>
+                        <PlusOutlined /> 关联
+                      </Button>
+                    </div>
+                  </>
+                )}
+              </Col>
             </Row>
-
           </TabsItem>
         </Tabs>
+        <OrgModal
+          handleSyncSelect={handleSyncSelect}
+          plateformTreeData={plateformTreeData}
+          fetchOrgsTreeData={fetchOrgsTreeData}
+          selectKeys={disabledCheckAuthConfig.orgIds}
+          visible={orgModalVisible}
+          onSuccess={handleOrgSuccess}
+          onCancel={handleOrgCancel}
+          modalRef={modalRef}
+        />
       </Card>
     </PageHeaderWrapper>
-  )
-}
+  );
+};
 
-export default MemberDetail
+export default MemberDetail;

src/pages/authConfig/memberSystem/orgModal.tsx

@@ -13,6 +13,7 @@ export interface OrgModalProps {
   selectKeys: any[],
   onSuccess(selectKeys: any[]),
   onCancel(),
+  modalRef: any,
 }
 
 
@@ -30,13 +31,14 @@ const OrgModal:React.FC<OrgModalProps> = (props) => {
 
   useEffect(() => {
     syncTreeActions.setSelectKeys(selectKeys)
-  }, [selectKeys])
+  }, [selectKeys, syncTreeActions])
   return (
     <Drawer
       visible={visible}
       closable={false}
       placement='right'
       width={600}
+      forceRender
     >
       <TabTree
         fetchData = {params => fetchOrgsTreeData()}