Merge branch 'feng-jinfa-20221102' into 'jinfa-20221102'

src/components/CheckBoxTree/index.tsx

@@ -46,6 +46,7 @@ const CheckboxTree: React.FC<CheckboxTreeProps> = props => {
     actions.current.setSelected = setSelected;
     actions.current.getSelected = () => selected;
   }
+  
   const toggleSelectAll = () => {
     checkChange();
     if (allSelected) {

src/hooks/useTreeTabs.ts

@@ -14,7 +14,7 @@ export enum FormState {
 export interface useTreeTabOptions {
   selectCallback?(selectKey?, node?),
   fetchMenuData?(),
-  fetchItemDetailData?(id),
+  fetchItemDetailData?(id,source),
   // 重置右侧详情
   resetDetail?(),
   // 对树形工具栏做render扩展
@@ -25,30 +25,34 @@ export interface useTreeTabOptions {
   formActions?: ISchemaFormActions
   // 删除菜单时调用的API
   deleteMenu?: any,
-
+  /**客户端类型 */
+  source?:string
   menuDataKey?: string,
   // 组件key
   customKey?: string,
 }
 
 export const useTreeTabs = (options: useTreeTabOptions = {}) => {
-  const { selectCallback, fetchMenuData, fetchItemDetailData, resetDetail, treeActions, formActions, extendsToolsRender, deleteMenu, menuDataKey, customKey } = options
+  const { selectCallback, fetchMenuData, fetchItemDetailData, resetDetail, source,treeActions, formActions, extendsToolsRender, deleteMenu, menuDataKey, customKey } = options
   const [ treeExtraMaps, { set, get } ] = useMap<any, any>()
   const [ treeData, setTreeData ] = useState<any[]>([])
   const [ treeStatus, setTreeStatus ] = useState<FormState>(FormState.FREE)
     // @补充一个状态 处理测试提出的 需要区分新增状态下是否新增子集 目前仅新增品类那使用
     const [isAddChild, setIsAddChild] = useState<boolean>(false)
   const [ nodeRecord, setNodeRecord ] = useState<any>(null)
+  const [loading, setLoading] = useState(false);
 
   const [isEditForm, setIsEditForm] = useState<boolean>(false)
 
   useEffect(() => {
     resetMenu()
-  }, [])
+  }, [source])
   const resetMenu = async () => {
     if (fetchMenuData) {
+      setLoading(true)
       const res = await fetchMenuData()
       setTreeData(menuDataKey ? res.data[menuDataKey] : res.data || [])
+      setLoading(false)
     }
   }
 
@@ -102,7 +106,7 @@ export const useTreeTabs = (options: useTreeTabOptions = {}) => {
   }
 
   const handleFindDetail = (id) => {
-    fetchItemDetailData && fetchItemDetailData({id}).then(res => {
+    fetchItemDetailData && fetchItemDetailData({id,source}).then(res => {
       const { data } = res
       set(id, data)
     })
@@ -166,6 +170,7 @@ export const useTreeTabs = (options: useTreeTabOptions = {}) => {
     getTreeMaps: get,
     resetMenu,
     toolsRender,
-    handleDeleteMenu
+    handleDeleteMenu,
+    loading
   }
 }

src/pages/systemManage/ruleSettingManage/memberAuthManage/detail.tsx

 import React, { useState, useEffect, useRef } from 'react';
-import { Row, Col, Button, Space } from 'antd';
+import { Row, Col, Button, Space,Tabs,Spin,Card } from 'antd';
 import TabTree, { createTreeActions } from '@/components/TabTree';
 import selfStyle from './index.less'
 import CheckboxTree from '@/components/CheckBoxTree';
@@ -38,44 +38,46 @@ const SetMemberAuth: React.FC<{}> = () => {
   // 编辑和预览模式下需回显数据
   const fetchRoleDetail = async () => {
     // 10秒缓存
-    const res = await getMemberPlatformRoleAuthTree({roleId: id}, { useCache: true, ttl: 10 * 1000 })
+    const res = await getMemberPlatformRoleAuthTree({roleId: id,source}, { useCache: true, ttl: 10 * 1000 })
     setCheckedIds(() => [...res['data']['checkIds']])
     return res
   }
 
-  const fetchItemDetailData = async ({ id: menuId }) => {
-    return await getMemberPlatformRoleAuthButton({ roleId: id, menuId })
+  const fetchItemDetailData = async ({ id: menuId,source }) => {
+    return await getMemberPlatformRoleAuthButton({ roleId: id, menuId,source })
   }
 
-  const {
-    treeData,
-    handleSelect,
-    nodeRecord,
-    getTreeMaps,
-  } = useTreeTabs({
-    fetchMenuData: fetchRoleDetail,
-    menuDataKey: 'menus',
-    fetchItemDetailData,
-  })
+  
 
   const allTreeDataRef = useRef<any>()
   const actionRef = useRef<any>({})
   // 改变按钮权限的menuId集合
   const lastNodeRef = useRef<any>([])
   // 初始右侧按钮信息
-  const formInitValue = nodeRecord ? getTreeMaps(nodeRecord.key) : null
   const [formValue, setFormValue] = useState<any>(null)
   const [checkedIds, setCheckedIds] = useState<number[]>([])
-  const [loading, setLoading] = useState<boolean>(false)
   const [isDisabledBtnAuth, setIsDisabledBtnAuth] = useState<boolean>(true)
   // 储存菜单展开数据
   const [dataExpand, setDataExpand] = useState<any>([])
   // 储存菜单勾选变动数据
   const [dataSource, setDataSource] = useState<any>([])
+  const [loading, setLoading] = useState(false);
 
   // 储存的按钮数据
   const [buttonInfos, setButtonInfos] = useState<any>([])
-
+  const [source, setSource] = useState('1');
+  const {
+    treeData,
+    handleSelect,
+    nodeRecord,
+    getTreeMaps,
+    loading:pageLoading
+  } = useTreeTabs({
+    fetchMenuData: fetchRoleDetail,
+    menuDataKey: 'menus',
+    source,
+    fetchItemDetailData,
+  })
   useEffect(() => {
     if (!id) return ;
     fetchRoleDetail().then(res => {
@@ -83,10 +85,11 @@ const SetMemberAuth: React.FC<{}> = () => {
       setFormValue(data)
     })
   }, [])
+  //fix: 按钮权限不显示问题
+  const formInitValue = nodeRecord ? getTreeMaps(nodeRecord.key) : null
 
   // 左边点击菜单 显示右边权限按钮映射
-  useEffect(() => {
-    console.log('getTreeMaps')
+  useEffect(() => { 
     if (formInitValue) {
       const { buttons = [], checkIds = [] } = formInitValue
       setButtonInfos([...buttons])
@@ -241,6 +244,7 @@ const SetMemberAuth: React.FC<{}> = () => {
       roleId: id,
       // 整合 记录了之前选择的按钮权限 一并提交
       menus: params,
+      source
       // 只单独提交当前操作的菜单
       // menus: params.filter(item => item['menuId'] === nodeRecord?.menuId)
     }
@@ -293,46 +297,52 @@ const SetMemberAuth: React.FC<{}> = () => {
   </div>
 
   return (
-    <div>
-      <Row className={selfStyle.memberHeader} align='middle' justify='space-between'>
-        <Col flex={1}>
-          {renderHeader}
-        </Col>
-        <Col>{extraButtons}</Col>
-      </Row>
-      <div className="common-wrapper-gray">
-        <div className="wrapper-white">
-          <Row justify='space-between'>
-            <Col span={17} className={selfStyle['menu-role-tree']}>
-              <TabTree
-                title='菜单列表'
-                fetchData={() => fetchRoleDetail()}
-                customKey='menuId'
-                checkable
-                actions={treeActions}
-                treeData={treeData}
-                handleSelect={_handleSelect}
-                handleCheck={handleCheck}
-                disabled={pageStatus === PageStatus.PREVIEW}
-                checkStrictly
-              />
-            </Col>
-
-            <Col span={6} className={selfStyle['menu-role-tree']}>
-              <CheckboxTree
-                actions={actionRef}
-                disabled={pageStatus === PageStatus.PREVIEW || isDisabledBtnAuth}
-                checkedNodes={buttonInfos}
-                title='菜单按钮访问权限'
-                customKey='buttonId'
-                customName='name'
-                handleChange={handleButtonChange}
-              />
+    <Card>
+      <Tabs activeKey={source} onChange={(value)=>setSource(value)}>
+          <Tabs.TabPane tab="商城能力中心" key="1"></Tabs.TabPane>
+          <Tabs.TabPane tab="移动版SRM采购商端" key="2"></Tabs.TabPane>
+        </Tabs>
+        <Spin spinning={pageLoading}>
+          <Row className={selfStyle.memberHeader} align='middle' justify='space-between'>
+            <Col flex={1}>
+              {renderHeader}
             </Col>
+            <Col>{extraButtons}</Col>
           </Row>
-        </div>
-      </div>
-    </div>
+          <div className="common-wrapper-gray">
+            <div className="wrapper-white">
+              <Row justify='space-between'>
+                <Col span={17} className={selfStyle['menu-role-tree']}>
+                  <TabTree
+                    title='菜单列表'
+                    fetchData={() => fetchRoleDetail()}
+                    customKey='menuId'
+                    checkable
+                    actions={treeActions}
+                    treeData={treeData}
+                    handleSelect={_handleSelect}
+                    handleCheck={handleCheck}
+                    disabled={pageStatus === PageStatus.PREVIEW}
+                    checkStrictly
+                  />
+                </Col>
+
+                <Col span={6} className={selfStyle['menu-role-tree']}>
+                  <CheckboxTree
+                    actions={actionRef}
+                    disabled={pageStatus === PageStatus.PREVIEW || isDisabledBtnAuth}
+                    checkedNodes={buttonInfos}
+                    title='菜单按钮访问权限'
+                    customKey='buttonId'
+                    customName='name'
+                    handleChange={handleButtonChange}
+                  />
+                </Col>
+              </Row>
+            </div>
+          </div>
+        </Spin>
+    </Card>
   )
 }