cfel-base-components 2.5.2 → 2.5.4

package/src/components/universal-pages/cpcAccountInfo/index.tsx

@@ -1,17 +1,27 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react'
+
 import PageContainer from '../../base-component/PageContainer';
 import QueryFilter from '../../base-component/QueryFilter';
 import ProTable from '../../base-component/ProTable';
 import Pagination from '../../base-component/Pagination';
-import { get } from 'lodash';
-import { Modal, Button, Divider, Descriptions, Space, message, Avatar,
+import useTableHooks from "../../../hooks/useTableHooks"
+import { timeFormatter, getUrlParams } from '../../../utils';
+
+import { get } from 'lodash'
+import {
+  Modal,
+  Button,
+  Divider,
+  Descriptions,
+  Space,
+  message,
+  Avatar,
   Spin,
   Tabs,
-  Table, } from 'antd';
-import { UserOutlined } from '@ant-design/icons';
+  Table
+} from 'antd'
+import { UserOutlined } from '@ant-design/icons'
 import EditAccountDrawer from './EditAccountDrawer/index'
-import useTableHooks from "../../../hooks/useTableHooks"
-import { timeFormatter, getUrlParams } from '../../../utils';
 import {
   getAccount,
   pageBoundRoles,
@@ -19,387 +29,389 @@ import {
   rolelistRole,
   accountBoundRoles,
   accountUnboundRoles,
-  getAuthTree,
-  accountAuthorizePage,
+  accountAuthorizePage
 } from './api'
-import "./index.scss"
-import { InteractionOutlined } from "@ant-design/icons";
-import dayjs from "dayjs";
-
+import './index.scss'
+import { InteractionOutlined } from '@ant-design/icons'
+import dayjs from 'dayjs'
 
 export interface RoleInfoProps {
   isShowTab: {
-    main: boolean;
-    tableResource: boolean;
-    tableEmpower: boolean;
-    tableData: boolean;
-  };
-  getAuthTree?: any;
+    main: boolean
+    tableResource: boolean
+    tableEmpower: boolean
+    tableData: boolean
+  }
+  getAuthTree?: any
+  getAccountAuthTree?: any
 }
-export default function AccountInfo({ isShowTab, getAuthTree }: RoleInfoProps) {
-  const [accountInfo, setAccountInfoInfo]: any = useState({});
-  const [pageId, setPageId] = useState(getUrlParams("id"));
-  const [rolelistRoleData, setRolelistRoleData]: any = useState([]); // 角色总数据
-  const [roleCheckData, setRoleCheckData]: any = useState([]); //当前选中的角色list
-  const [editAccountOpen, setEditAccountOpen] = useState(false);
+export default function AccountInfo({ isShowTab, getAuthTree, getAccountAuthTree }: RoleInfoProps) {
+  const [accountInfo, setAccountInfoInfo]: any = useState({})
+  const [pageId, setPageId] = useState(getUrlParams('id'))
+  const [rolelistRoleData, setRolelistRoleData]: any = useState([]) // 角色总数据
+  const [roleCheckData, setRoleCheckData]: any = useState([]) //当前选中的角色list
+  const [editAccountOpen, setEditAccountOpen] = useState(false)
+
+  const [loading, setLoading] = useState(false)
+  const [tabCheck, setTabCheck] = useState('main')
+  const [ResourceTableData, setResourceTableData]: any = useState([]) //关联资源
+  const [isTableLoading, setisTableLoading] = useState(false)
+  const [selectedRowKeys, setselectedRowKeys]: any = useState([])
+  const [defaultExpandedRowKeys, setdefaultExpandedRowKeys]: any = useState([])
+  const [isTableByDataLoading, setisTableByDataLoading] = useState(false) //数据权限使用
+  const [selectedDataRowKeys, setselectedDataRowKeys]: any = useState([]) //数据权限使用
+  const [defaultExpandedDataRowKeys, setdefaultExpandedDataRowKeys]: any = useState([]) //数据权限使用
+  const [ResourceData, setResourceData]: any = useState([]) //数据权限使用
 
-  const [loading, setLoading] = useState(false);
-  const [tabCheck, setTabCheck] = useState("main");
-  const [ResourceTableData, setResourceTableData]: any = useState([]); //关联资源
-  const [isTableLoading, setisTableLoading] = useState(false);
-  const [selectedRowKeys, setselectedRowKeys]: any = useState([]); 
-  const [defaultExpandedRowKeys, setdefaultExpandedRowKeys]: any = useState([]); 
   const [TableItemData, setTableItemData]: any = useState([
     {
-      key: "main",
+      key: 'main',
       label: `关联角色`,
-      icon: <InteractionOutlined />,
-    },
-  ]); //tab 数据
+      icon: <InteractionOutlined />
+    }
+  ]) //tab 数据
   const TableResource: any = [
     {
-      title: "菜单名称",
-      dataIndex: "name",
-      key: "name",
-    },
-  ];
+      title: '菜单名称',
+      dataIndex: 'name',
+      key: 'name'
+    }
+  ]
   const columns: any = [
     {
-      title: "角色名称",
-      dataIndex: "roleName",
-      key: "roleName",
+      title: '角色名称',
+      dataIndex: 'roleName',
+      key: 'roleName'
     },
     {
-      title: "角色编码",
-      dataIndex: "roleCode",
-      key: "roleCode",
-      width: 300,
+      title: '角色编码',
+      dataIndex: 'roleCode',
+      key: 'roleCode',
+      width: 300
     },
     {
-      title: "来源",
-      dataIndex: "source",
-      key: "source",
+      title: '来源',
+      dataIndex: 'source',
+      key: 'source',
       render: (cell: any) => {
-        if (cell == "system") {
-          return "系统创建";
-        } else if (cell == "user") {
-          return "用户自建";
-        } else  {
-          return "未知";
+        if (cell === 'system') {
+          return '系统创建'
+        } else if (cell === 'user') {
+          return '用户自建'
+        } else {
+          return '未知'
         }
-      },
+      }
     },
     {
-      title: "描述",
-      dataIndex: "description",
-      key: "description",
+      title: '描述',
+      dataIndex: 'description',
+      key: 'description'
     },
     {
-      title: "创建时间",
-      dataIndex: "gmtCreate",
-      key: "gmtCreate",
+      title: '创建时间',
+      dataIndex: 'gmtCreate',
+      key: 'gmtCreate',
       render: (cell: any) => {
-        return timeFormatter(cell);
-      },
+        return timeFormatter(cell)
+      }
     },
     {
-      title: "修改时间",
-      dataIndex: "gmtModified",
-      key: "gmtModified",
+      title: '修改时间',
+      dataIndex: 'gmtModified',
+      key: 'gmtModified',
       render: (cell: any) => {
-        return timeFormatter(cell);
-      },
+        return timeFormatter(cell)
+      }
     },
     {
-      title: "操作",
+      title: '操作',
       width: 80,
-      fixed: "right",
+      fixed: 'right',
       render: (rowdata: any) => (
         <Space>
           <a
             onClick={() => {
               Modal.confirm({
-                title: "确认解绑吗？",
-                content: "",
+                title: '确认解绑吗？',
+                content: '',
                 onOk: () => {
-                  isBoundRolesFunc(false, { roleCodes: [rowdata.roleCode] });
-                },
-              });
+                  isBoundRolesFunc(false, { roleCodes: [rowdata.roleCode] })
+                }
+              })
             }}
           >
             解绑
           </a>
         </Space>
-      ),
-    },
-  ];
+      )
+    }
+  ]
   const TablePolicy: any = [
     {
-      title: "授权主体",
-      dataIndex: "subject",
-      key: "subject",
+      title: '授权主体',
+      dataIndex: 'subject',
+      key: 'subject'
     },
     {
-      title: "权限策略",
-      dataIndex: "policy",
-      key: "policy",
+      title: '权限策略',
+      dataIndex: 'policy',
+      key: 'policy'
     },
     {
-      title: "资源组",
-      dataIndex: "group",
-      key: "group",
+      title: '资源组',
+      dataIndex: 'group',
+      key: 'group'
     },
     {
-      title: "授权时间",
-      dataIndex: "gmtModified",
-      key: "gmtModified",
+      title: '授权时间',
+      dataIndex: 'gmtModified',
+      key: 'gmtModified',
       render: (text: any, data: any) => {
-        return dayjs(text).format("YYYY-MM-DD HH:mm:ss") || "数据格式错误";
-      },
-    },
-  ];
+        return dayjs(text).format('YYYY-MM-DD HH:mm:ss') || '数据格式错误'
+      }
+    }
+  ]
   useEffect(() => {
-    init();
-    getAccountFunc({ id: pageId });
-  }, []);
+    init()
+    getAccountFunc({ id: pageId })
+  }, [])
   const init = () => {
-    let data: any = [];
+    let data: any = []
     if (isShowTab?.tableResource) {
       data.push({
-        label: "关联菜单",
-        key: "tableResource",
-        icon: <InteractionOutlined />,
-      });
+        label: '关联菜单',
+        key: 'tableResource',
+        icon: <InteractionOutlined />
+      })
     }
     if (isShowTab?.tableEmpower) {
       data.push({
-        label: "关联授权",
-        key: "tableEmpower",
-        icon: <InteractionOutlined />,
-      });
+        label: '关联授权',
+        key: 'tableEmpower',
+        icon: <InteractionOutlined />
+      })
     }
     if (isShowTab?.tableData) {
       data.push({
-        label: "关联数据",
-        key: "tableData",
-        icon: <InteractionOutlined />,
-      });
+        label: '关联数权',
+        key: 'tableData',
+        icon: <InteractionOutlined />
+      })
     }
-    setTableItemData([...TableItemData, ...data]);
-  };
+    setTableItemData([...TableItemData, ...data])
+  }
 
   const tabCheckFunc = () => {
-    if (tabCheck == "tableEmpower") {
+    if (tabCheck === 'tableEmpower') {
       policy?.execute({
-        accountId: pageId,
-      }); // 获取授权策略
-    } else if (tabCheck == "tableResource") {
-      getAuthTreeFunc(); // 获取关联资源
+        accountId: pageId
+      }) // 获取授权策略
+    } else if (tabCheck === 'tableResource') {
+      getAuthTreeFunc() // 获取关联资源
+    } else if (tabCheck === 'tableData') {
+      getAccountAuthTreeFunc() // 获取关联数权
     } else {
-      execute({ accountId: pageId });
+      execute({ accountId: pageId })
     }
-  };
+  }
 
   useEffect(() => {
-    if(!tabCheck) return
-    tabCheckFunc();
-  }, [tabCheck]);
+    if (!tabCheck) return
+    tabCheckFunc()
+  }, [tabCheck])
 
   const getAccountFunc = (data: any) => {
-    setAccountInfoInfo({});
-    setLoading(true);
+    setAccountInfoInfo({})
+    setLoading(true)
     getAccount({
-      ...data,
+      ...data
     }).then((res: any) => {
-      setLoading(false);
-      setAccountInfoInfo(res || {});
-      tabCheckFunc();
-    });
-  };
+      setLoading(false)
+      setAccountInfoInfo(res || {})
+      tabCheckFunc()
+    })
+  }
 
   //获取关联资源
   const getAuthTreeFunc = () => {
-    setisTableLoading(true);
-    getAuthTree &&
-      getAuthTree({
-        accountId: pageId,
-      }).then((res: any) => {
-        let listId :Array<[]>= []
-        let defaultRowKeys :Array<[]>= []
-        let {data,list,drkey}: any = resourceAction(res,listId,defaultRowKeys);
-          setselectedRowKeys(list)
-          setdefaultExpandedRowKeys(drkey)
-          setResourceTableData(data);
-          setisTableLoading(false);
-      });
-  };
-  const resourceAction: any = (data: any,list:any,drkey:any) => {
-    if (Object.prototype.toString.call(data) === "[object Array]") {
+    setisTableLoading(true)
+    if (getAuthTree) {
+      getAuthTree().then((res: any) => {
+        let listId: Array<[]> = []
+        let defaultRowKeys: Array<[]> = []
+        let { data, list, drkey }: any = resourceAction(res, listId, defaultRowKeys)
+        setselectedRowKeys(list)
+        setdefaultExpandedRowKeys(drkey)
+        setResourceTableData(data)
+        setisTableLoading(false)
+      })
+    }
+  }
+  //获取关联数权
+  const getAccountAuthTreeFunc = () => {
+    setisTableByDataLoading(true)
+    if (getAccountAuthTree) {
+      getAccountAuthTree().then((res: any) => {
+        let listId: Array<[]> = []
+        let defaultRowKeys: Array<[]> = []
+        let { data, list, drkey }: any = resourceAction(res, listId, defaultRowKeys)
+        setselectedDataRowKeys(list)
+        setdefaultExpandedDataRowKeys(drkey)
+        setResourceData(data)
+        setisTableByDataLoading(false)
+      })
+    }
+  }
+  const resourceAction: any = (data: any, list: any, drkey: any) => {
+    if (Object.prototype.toString.call(data) === '[object Array]') {
       data.map((item: any) => {
-        return resourceAction(item,list,drkey);
-      });
+        return resourceAction(item, list, drkey)
+      })
       return {
         data,
         list,
         drkey
       }
-    } else if (Object.prototype.toString.call(data) === "[object Object]") {
-      if(data.checked)list.push(data.id)
+    } else if (Object.prototype.toString.call(data) === '[object Object]') {
+      if (data.checked) list.push(data.id || data.bizId)
       if (data.children && data.children.length !== 0) {
-        drkey.push(data.id)
-        return resourceAction(data.children,list,drkey);
+        drkey.push(data.id || data.bizId)
+        return resourceAction(data.children, list, drkey)
       } else {
-        delete data.children;
-        drkey.push(data.id)
-        return data;
+        delete data.children
+        drkey.push(data.id || data.bizId)
+        return data
       }
     }
-  };
-  const readDataList = ({
-    innerPageNo,
-    innerPageSize,
-    ...otherOptions
-  }: any) => {
+  }
+  const readDataList = ({ innerPageNo, innerPageSize, ...otherOptions }: any) => {
     return pageBoundRoles({
       currentPage: innerPageNo,
       pageSize: innerPageSize,
-      ...otherOptions,
+      ...otherOptions
     }).then((res: any) => {
-      let records = get(res, "records", []);
-      let total = get(res, "total", 0);
+      let records = get(res, 'records', [])
+      let total = get(res, 'total', 0)
       return {
+        ...res,
         dataList: records,
-        totalCount: total,
-      };
-    });
-  };
+        totalCount: total
+      }
+    })
+  }
   const { execute, dataList, isLoading, pagination } = useTableHooks({
-    asyncFunction: readDataList,
-  });
+    asyncFunction: readDataList
+  })
 
   const getQueryBoundRolesFunc = () => {
-    Promise.all([queryBoundRoles({ accountId: pageId }), rolelistRole()]).then(
-      (res) => {
-        let boundRoles: any = res[0];
-        let roleList: any = res[1];
-        let result :any= [];
-        for (var i = 0; i < roleList.length; i++) {
-          var item = roleList[i];
-          var repeat = false;
-          for (var j = 0; j < boundRoles.length; j++) {
-            if (item.roleCode === boundRoles[j].roleCode) {
-              repeat = true;
-              break;
-            }
-          }
-          if (repeat) {
-            result.push(item.roleCode);
+    Promise.all([queryBoundRoles({ accountId: pageId }), rolelistRole()]).then(res => {
+      let boundRoles: any = res[0]
+      let roleList: any = res[1]
+      let result: any = []
+      for (let i = 0; i < roleList.length; i++) {
+        let item = roleList[i]
+        let repeat = false
+        for (let j = 0; j < boundRoles.length; j++) {
+          if (item.roleCode === boundRoles[j].roleCode) {
+            repeat = true
+            break
           }
         }
-        setRolelistRoleData(roleList);
-        setRoleCheckData(result);
-        setEditAccountOpen(true);
-      },
-    );
-  };
+        if (repeat) {
+          result.push(item.roleCode)
+        }
+      }
+      setRolelistRoleData(roleList)
+      setRoleCheckData(result)
+      setEditAccountOpen(true)
+    })
+  }
   const isBoundRolesFunc = (type: any, { roleCodes }: any) => {
     return (type ? accountBoundRoles : accountUnboundRoles)({
       accountId: pageId,
-      roleCodes: roleCodes,
+      roleCodes: roleCodes
     }).then(() => {
-      message.success(`${type ? "绑定" : "解绑"}成功`);
-      execute({ accountId: pageId });
-      setEditAccountOpen(false);
-    });
-  };
+      message.success(`${type ? '绑定' : '解绑'}成功`)
+      execute({ accountId: pageId })
+      setEditAccountOpen(false)
+    })
+  }
 
-  const accountAuthorizePageFunc = ({
-    innerPageNo,
-    innerPageSize,
-    ...otherOptions
-  }: any) => {
+  const accountAuthorizePageFunc = ({ innerPageNo, innerPageSize, ...otherOptions }: any) => {
     return accountAuthorizePage({
       currentPage: innerPageNo,
       pageSize: innerPageSize,
-      ...otherOptions,
+      ...otherOptions
     }).then((res: any) => {
-      let records = get(res, "records", []);
-      let total = get(res, "total", 0);
+      let records = get(res, 'records', [])
+      let total = get(res, 'total', 0)
       return {
+        ...res,
         dataList: records,
-        totalCount: total,
-      };
-    });
-  };
+        totalCount: total
+      }
+    })
+  }
   let policy = useTableHooks({
-    asyncFunction: accountAuthorizePageFunc,
-  });
+    asyncFunction: accountAuthorizePageFunc
+  })
   return (
     <PageContainer>
       <Spin spinning={loading}>
-        <div className="deviceTopTitle">
-          <div className="deviceTopDivider">
-            <Divider orientation="left">
+        <div className='deviceTopTitle'>
+          <div className='deviceTopDivider'>
+            <Divider orientation='left'>
               <Avatar
-                style={{ backgroundColor: "#1677ff", marginRight: "8px" }}
+                style={{ backgroundColor: '#1677ff', marginRight: '8px' }}
                 draggable={false}
                 icon={<UserOutlined />}
                 src={!!accountInfo.avatar ? accountInfo.avatar : undefined}
               />
-              {accountInfo?.name || ""}
+              {accountInfo?.name || ''}
             </Divider>
           </div>
           <Button
-            className="deviceTopButton"
+            className='deviceTopButton'
             onClick={() => {
-              getAccountFunc({ id: pageId });
+              getAccountFunc({ id: pageId })
             }}
           >
             刷新
           </Button>
         </div>
-        <Descriptions className="basicInfoWrap">
-          <Descriptions.Item label="账号">
-            {accountInfo?.account || ""}
-          </Descriptions.Item>
-          <Descriptions.Item label="员工工号">
-            {accountInfo?.jobNumber || ""}
-          </Descriptions.Item>
-          <Descriptions.Item label="名称">
-            {accountInfo?.name || ""}
+        <Descriptions className='basicInfoWrap'>
+          <Descriptions.Item label='账号'>{accountInfo?.account || ''}</Descriptions.Item>
+          <Descriptions.Item label='员工工号'>{accountInfo?.jobNumber || ''}</Descriptions.Item>
+          <Descriptions.Item label='名称'>{accountInfo?.name || ''}</Descriptions.Item>
+          <Descriptions.Item label='手机号'>{accountInfo?.mobile || ''}</Descriptions.Item>
+          <Descriptions.Item label='邮箱'>{accountInfo?.email || ''}</Descriptions.Item>
+          <Descriptions.Item label='是否企业管理员'>
+            {accountInfo?.isAdmin ? '是' : '否'}
           </Descriptions.Item>
-          <Descriptions.Item label="手机号">
-            {accountInfo?.mobile || ""}
-          </Descriptions.Item>
-          <Descriptions.Item label="邮箱">
-            {accountInfo?.email || ""}
-          </Descriptions.Item>
-          <Descriptions.Item label="是否企业管理员">
-            {accountInfo?.isAdmin ? "是" : "否"}
-          </Descriptions.Item>
-          <Descriptions.Item label="创建时间">
+          <Descriptions.Item label='创建时间'>
             {timeFormatter(accountInfo?.gmtCreate)}
           </Descriptions.Item>
-          <Descriptions.Item label="修改时间">
+          <Descriptions.Item label='修改时间'>
             {timeFormatter(accountInfo?.gmtModified)}
           </Descriptions.Item>
         </Descriptions>
         <div>
-          <Divider orientation="left">当前账号关联内容</Divider>
-          <div className="jsonWarp">
+          <Divider orientation='left'>当前账号关联内容</Divider>
+          <div className='jsonWarp'>
             <Tabs
-              onChange={(e) => {
-                setTabCheck(e);
+              onChange={e => {
+                setTabCheck(e)
               }}
               items={TableItemData}
             />
-            {tabCheck == "main" && (
+            {tabCheck === 'main' && (
               <>
-                <div className="tableActionWarp">
+                <div className='tableActionWarp'>
                   <Button
-                    type="primary"
+                    type='primary'
                     onClick={() => {
-                      getQueryBoundRolesFunc();
+                      getQueryBoundRolesFunc()
                     }}
                   >
                     绑定
@@ -407,10 +419,10 @@ export default function AccountInfo({ isShowTab, getAuthTree }: RoleInfoProps) {
                 </div>
                 <Table
                   scroll={{
-                    x: 1200,
+                    x: 1200
                   }}
-                  size="small"
-                  rowKey="id"
+                  size='small'
+                  rowKey='id'
                   dataSource={dataList}
                   loading={isLoading}
                   columns={columns}
@@ -422,43 +434,43 @@ export default function AccountInfo({ isShowTab, getAuthTree }: RoleInfoProps) {
                     execute({
                       innerPageNo,
                       innerPageSize,
-                      accountId: pageId,
-                    });
+                      accountId: pageId
+                    })
                   }}
                 />
               </>
             )}
-            {tabCheck == "tableResource" && (
+            {tabCheck === 'tableResource' && (
               <>
                 <Table
-                  style={{ width: "100%" }}
-                  size="small"
-                  rowKey="id"
+                  style={{ width: '100%' }}
+                  size='small'
+                  rowKey='id'
                   loading={isTableLoading}
                   pagination={false}
                   columns={TableResource}
                   dataSource={ResourceTableData || []}
                   rowSelection={{
-                    selectedRowKeys:selectedRowKeys,
+                    selectedRowKeys: selectedRowKeys,
                     getCheckboxProps: (record: any) => {
                       return {
                         disabled: true
-                      };
+                      }
                     }
                   }}
                   expandable={{
-                    expandedRowKeys:defaultExpandedRowKeys, //defaultExpandAllRows 不走，不是初始化tab
+                    expandedRowKeys: defaultExpandedRowKeys //defaultExpandAllRows 不走，不是初始化tab
                   }}
                 />
               </>
             )}
 
-            {tabCheck == "tableEmpower" && (
+            {tabCheck === 'tableEmpower' && (
               <>
                 <Table
-                  style={{ width: "100%" }}
-                  size="small"
-                  rowKey="id"
+                  style={{ width: '100%' }}
+                  size='small'
+                  rowKey='id'
                   dataSource={policy?.dataList}
                   loading={policy?.isLoading}
                   columns={TablePolicy}
@@ -470,13 +482,36 @@ export default function AccountInfo({ isShowTab, getAuthTree }: RoleInfoProps) {
                     policy?.execute({
                       innerPageNo,
                       innerPageSize,
-                      accountId: pageId,
-                    });
+                      accountId: pageId
+                    })
+                  }}
+                />
+              </>
+            )}
+            {tabCheck === 'tableData' && (
+              <>
+                <Table
+                  style={{ width: '100%' }}
+                  size='small'
+                  rowKey='bizId'
+                  loading={isTableByDataLoading}
+                  pagination={false}
+                  columns={TableResource}
+                  dataSource={ResourceData || []}
+                  rowSelection={{
+                    selectedRowKeys: selectedDataRowKeys,
+                    getCheckboxProps: (record: any) => {
+                      return {
+                        disabled: true
+                      }
+                    }
+                  }}
+                  expandable={{
+                    expandedRowKeys: defaultExpandedDataRowKeys //defaultExpandAllRows 不走，不是初始化tab
                   }}
                 />
               </>
             )}
-            {tabCheck == "tableData" && <></>}
           </div>
         </div>
         {/* */}
@@ -489,5 +524,5 @@ export default function AccountInfo({ isShowTab, getAuthTree }: RoleInfoProps) {
         isBoundRolesFunc={isBoundRolesFunc}
       ></EditAccountDrawer>
     </PageContainer>
-  );
+  )
 }