cfel-base-components 2.2.5 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cfel-base-components",
-  "version": "2.2.5",
+  "version": "2.3.1",
   "description": "cfel-base-components",
   "main": "/src/index.tsx",
   "types": "src/index.d.ts",

package/src/apiRequest/config.ts

@@ -9,7 +9,6 @@ instance.interceptors.request.use(
   (config: any) => {
     config.headers = {
       ...config.headers,
-      "cfel-token": (window as any)?.g_config?.token
     } as AxiosRequestHeaders;
 
     config.params = {

package/src/components/layout/index.tsx

@@ -3,6 +3,11 @@ import { Layout, Menu, MenuProps, Popover } from 'antd';
 import { SwapOutlined, FormOutlined } from '@ant-design/icons';
 import "./index.scss"
 
+const currencyList = [
+  { value: 'JPY', label: '日元', icon: '￥' },
+  { value: 'USD', label: '美元', icon: "$" },
+  { value: 'CNY', label: '人民币', icon: '￥' }
+]
 export interface LiosLayoutlProps {
   appName?: any;
   productCode: string;
@@ -94,11 +99,6 @@ export default function LiosLayout(props: LiosLayoutlProps) {
 
   const [collapsed, setCollapsed] = useState(false);
 
-  const [currencyList, setCurrencyList] = useState([
-    { value: 'JPY', label: '日元', icon: '￥' },
-    { value: 'USD', label: '美元', icon: "$" },
-    { value: 'CNY', label: '人民币', icon: '￥' }
-  ])
 
   // useEffect(() => {
   //   if (!productList) return
@@ -165,7 +165,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
             </div>
           </div>
           {
-            amountInfo && 
+            amountInfo &&
             <div className='lios-li'>
               <div className='lios-key'>抵用金余额</div>
               <div className='lios-value'><span>{currencyText(currencyCode)}</span>
@@ -173,7 +173,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
               </div>
             </div>
           }
-          
+
         </div>
       }
       {
@@ -239,6 +239,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
   const MenuStyle = {
     width: collapsed ? 80 : 240
   }
+
   return (
     <Layout className="layout-warp">
       {

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

@@ -20,7 +20,6 @@ import "./index.scss"
 export interface RoleProps {
   historyAction: any;
 }
-
 export default function Role({
   historyAction
 }: RoleProps) {
@@ -41,6 +40,21 @@ export default function Role({
       title: '角色名称',
       dataIndex: 'roleName',
       key: 'roleName',
+      render: (text: any, data: any) => {
+        return (
+          <span
+            style={{ cursor: "pointer", color: "#1677ff" }}
+            onClick={() => {
+              historyAction?.push({
+                pathname: `/role-info`,
+                search: `?roleCode=${data.roleCode}`,
+              });
+            }}
+          >
+            {data?.roleName}
+          </span>
+        );
+      },
     },
     {
       title: '角色编码',

package/src/components/universal-pages/cpcRoleInfo/api.ts

@@ -20,3 +20,18 @@ export const roleUnboundAccounts= (data?: any) => {
 export const getRole= (data?: any) => {
     return request.post("/api/permission/role/getRole.json", { ...data })
 }
+//返回角色下的资源订阅树
+export const getAuthTree = (data?: any) => {
+    return request.post(
+      "/sdk/permission/rbac/console/resource-role/getAuthTree.json",
+      { ...data },
+    );
+  };
+  //分页查询权限策略授权信息
+  export const policyAuthorizePage = (data?: any) => {
+    return request.post(
+      "/sdk/permission/abac/console/policy-authorize/page.json",
+      { ...data },
+    );
+  };
+  

package/src/components/universal-pages/cpcRoleInfo/index.scss

@@ -1,3 +1,16 @@
 .basicInfoWrap {
-  padding: 0 24px
-}
+  padding: 0 24px;
+}
+.jsonWarp {
+  padding: 0px 44px 10px;
+}
+.tableActionWarp {
+  float: right;
+  margin-bottom: 15px;
+}
+.paginBox {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 10px 0px;
+}

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

@@ -1,134 +1,269 @@
-import React, { useEffect, useRef, useState } from 'react';
-import useTableHooks from "../../../hooks/useTableHooks"
-
-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 { ProFormText, } from '@ant-design/pro-components';
-import { Button, Divider, Modal, Descriptions, Space, message } from 'antd';
-import EditAccountDrawer from './EditAccountDrawer/index'
-import { timeFormatter, getUrlParams } from '../../../utils';
+import React, { useEffect, useRef, useState } from "react";
+import useTableHooks from "../../../hooks/useTableHooks";
+
+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 { ProFormText } from "@ant-design/pro-components";
+import {
+  Button,
+  Divider,
+  Modal,
+  Descriptions,
+  Space,
+  message,
+  Tabs,
+  Table,
+} from "antd";
+import EditAccountDrawer from "./EditAccountDrawer/index";
+import { timeFormatter, getUrlParams } from "../../../utils";
 import {
   pageBoundAccounts,
   roleBoundAccounts,
   roleUnboundAccounts,
   getRole,
-  queryByKeyword
-} from './api'
-import "./index.scss"
-
-export default function RoleInfo() {
-  const searchFormRef: any = useRef()
-  const [roleCode, setRoleCode] = useState('')
-  const [roleInfo, setRoleInfo]: any = useState({})
+  queryByKeyword,
+  // getAuthTree,
+  policyAuthorizePage,
+} from "./api";
+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;
+}
+
+export default function RoleInfo({ isShowTab, getAuthTree }: RoleInfoProps) {
+  const searchFormRef: any = useRef();
+  const [roleCode, setRoleCode] = useState(getUrlParams("roleCode"));
+  const [roleInfo, setRoleInfo]: any = useState({});
   const [editAccountOpen, setEditAccountOpen] = useState(false);
+  const [tabCheck, setTabCheck] = useState("main");
+
+  const [ResourceTableData, setResourceTableData]: any = useState([]); //关联资源
+  const [isTableLoading, setisTableLoading] = useState(false);
+
+  const [TableItemData, setTableItemData]: any = useState([
+    {
+      key: "main",
+      label: `关联账号`,
+      icon: <InteractionOutlined />,
+    },
+  ]); //tab 数据
 
   const columns: any = [
     {
-      title: '名称',
-      dataIndex: 'name',
-      key: 'name',
+      title: "名称",
+      dataIndex: "name",
+      key: "name",
     },
     {
-      title: '账号',
-      dataIndex: 'account',
-      key: 'account',
+      title: "账号",
+      dataIndex: "account",
+      key: "account",
     },
     {
-      title: '工号',
-      dataIndex: 'jobNumber',
-      key: 'jobNumber',
+      title: "工号",
+      dataIndex: "jobNumber",
+      key: "jobNumber",
     },
     {
-      title: '手机号',
-      dataIndex: 'mobile',
-      key: 'mobile',
+      title: "手机号",
+      dataIndex: "mobile",
+      key: "mobile",
     },
     {
-      title: '邮箱',
-      dataIndex: 'email',
-      key: 'email',
+      title: "邮箱",
+      dataIndex: "email",
+      key: "email",
       copyable: true,
     },
     {
-      title: '是否企业管理员',
-      dataIndex: 'isAdmin',
-      key: 'isAdmin',
+      title: "是否企业管理员",
+      dataIndex: "isAdmin",
+      key: "isAdmin",
       render: (cell: any) => {
         if (cell) {
-          return '是'
+          return "是";
         } else {
-          return '否'
+          return "否";
         }
-      }
+      },
     },
     {
-      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",
-      render: (rowdata: any,) => <Space>
-        <a onClick={() => {
-          Modal.confirm({
-            title: "确认解绑吗？",
-            content: '',
-            onOk: () => {
-              roleUnboundAccountsFunc(rowdata.id)
-            }
-          })
-
-        }}>解绑</a>
-      </Space>
+      render: (rowdata: any) => (
+        <Space>
+          <a
+            onClick={() => {
+              Modal.confirm({
+                title: "确认解绑吗？",
+                content: "",
+                onOk: () => {
+                  roleUnboundAccountsFunc(rowdata.id);
+                },
+              });
+            }}
+          >
+            解绑
+          </a>
+        </Space>
+      ),
     },
   ];
 
+  const TableResource: any = [
+    {
+      title: "资源名称",
+      dataIndex: "name",
+      key: "name",
+    },
+  ];
+  const TablePolicy: any = [
+    {
+      title: "授权主体",
+      dataIndex: "subject",
+      key: "subject",
+    },
+    {
+      title: "权限策略",
+      dataIndex: "policy",
+      key: "policy",
+    },
+    {
+      title: "资源组",
+      dataIndex: "group",
+      key: "group",
+    },
+    {
+      title: "授权时间",
+      dataIndex: "gmtModified",
+      key: "gmtModified",
+      render: (text: any, data: any) => {
+        return dayjs(text).format("YYYY-MM-DD HH:mm:ss") || "数据格式错误";
+      },
+    },
+  ];
   useEffect(() => {
-    initGetData('init', true)
-  }, [])
+    init();
+  }, []);
+
+  const init = () => {
+    let data: any = [];
+    if (isShowTab?.tableResource) {
+      data.push({
+        label: "关联资源",
+        key: "tableResource",
+        icon: <InteractionOutlined />,
+      });
+    }
+    if (isShowTab?.tableEmpower) {
+      data.push({
+        label: "关联授权",
+        key: "tableEmpower",
+        icon: <InteractionOutlined />,
+      });
+    }
+    if (isShowTab?.tableData) {
+      data.push({
+        label: "关联数据",
+        key: "tableData",
+        icon: <InteractionOutlined />,
+      });
+    }
+    setTableItemData([...TableItemData, ...data]);
+  };
+  useEffect(() => {
+    if (tabCheck == "tableEmpower") {
+      policy?.execute({
+        subjectCodes: [roleCode],
+      }); // 获取授权策略
+    } else if (tabCheck == "tableResource") {
+      getAuthTreeFunc(); // 获取关联资源
+    } else {
+      initGetData();
+    }
+  }, [tabCheck]);
+
+  //获取关联资源
+  const getAuthTreeFunc = () => {
+    setisTableLoading(true);
+    getAuthTree && getAuthTree({
+      roleCode: roleCode,
+    }).then((res: any) => {
+      setisTableLoading(false);
+      let data: any = resourceAction(res);
+      setResourceTableData(data);
+    });
+  };
+
+  const resourceAction: any = (data: any) => {
+    if (Object.prototype.toString.call(data) === "[object Array]") {
+      data.map((item: any) => {
+        return resourceAction(item);
+      });
+      return data;
+    } else if (Object.prototype.toString.call(data) === "[object Object]") {
+      if (data.children && data.children.length !== 0) {
+        return resourceAction(data.children);
+      } else {
+        delete data.children;
+        return data;
+      }
+    }
+  };
 
   //初始化请求数据
-  const initGetData = (type: string, msgType: any) => {
-    let roleCode = getUrlParams('roleCode')
-    setRoleCode(roleCode)
+  const initGetData = () => {
     if (roleCode) {
-      getRoleFunc({ roleCode })
-      execute({ "roleCode": roleCode })
+      getRoleFunc({ roleCode });
+      execute({ roleCode: roleCode });
     }
-  }
+  };
   const getRoleFunc = (data: any) => {
-    setRoleInfo({})
+    setRoleInfo({});
     getRole({
       ...data,
     }).then((res: any) => {
-      setRoleInfo(res || {})
-    })
-  }
+      setRoleInfo(res || {});
+    });
+  };
   const roleUnboundAccountsFunc = (account: any) => {
     roleUnboundAccounts({
-      "accountIds": [account],
-      "roleCode": roleCode
+      accountIds: [account],
+      roleCode: roleCode,
     }).then((res: any) => {
-      message.success('解绑成功')
-      execute({ "roleCode": roleCode })
-    })
-  }
+      message.success("解绑成功");
+      execute({ roleCode: roleCode });
+    });
+  };
 
   const readDataList = ({
     innerPageNo,
@@ -139,108 +274,202 @@ export default function RoleInfo() {
       currentPage: innerPageNo,
       pageSize: innerPageSize,
       ...searchFormRef.current,
-      ...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 {
         dataList: records,
-        totalCount: total
-      }
-    })
-  }
+        totalCount: total,
+      };
+    });
+  };
   const { execute, dataList, isLoading, pagination } = useTableHooks({
-    asyncFunction: readDataList
-  })
+    asyncFunction: readDataList,
+  });
 
   const handleRoload = () => {
-    execute({ "roleCode": roleCode })
-  }
+    execute({ roleCode: roleCode });
+  };
 
   const getQueryBoundRolesFunc = async () => {
-    setEditAccountOpen(true)
-  }
+    setEditAccountOpen(true);
+  };
 
   const roleBoundAccountsFunc = ({ accountIds }: any) => {
     return roleBoundAccounts({
-      "accountIds": accountIds,
-      "roleCode": roleCode
+      accountIds: accountIds,
+      roleCode: roleCode,
     }).then((res: any) => {
-      message.success(`添加账号成功`)
-      execute({ "roleCode": roleCode })
-      setEditAccountOpen(false)
-    })
-  }
+      message.success(`添加账号成功`);
+      execute({ roleCode: roleCode });
+      setEditAccountOpen(false);
+    });
+  };
   //搜索关键字
   const queryByKeywordFunc = ({ keyword }: any) => {
     return queryByKeyword({
-      keyword
-    })
-  }
+      keyword,
+    });
+  };
 
   const handleOnReset: any = async (values: any) => {
-    searchFormRef.current = { ...values }
+    searchFormRef.current = { ...values };
     execute({
       innerPageNo: 1,
-      "roleCode": roleCode
-    })
-  }
+      roleCode: roleCode,
+    });
+  };
 
   const handleOnFinish: any = async (values: any) => {
-    searchFormRef.current = { ...values }
-    execute({ "roleCode": roleCode })
-  }
+    searchFormRef.current = { ...values };
+    execute({ roleCode: roleCode });
+  };
+
+  const readDataListByPolicy = ({
+    innerPageNo,
+    innerPageSize,
+    ...otherOptions
+  }: any) => {
+    return policyAuthorizePage({
+      currentPage: innerPageNo,
+      pageSize: innerPageSize,
+      ...otherOptions,
+    }).then((res: any) => {
+      let records = get(res, "records", []);
+      let total = get(res, "total", 0);
+      return {
+        dataList: records,
+        totalCount: total,
+      };
+    });
+  };
+  let policy = useTableHooks({
+    asyncFunction: readDataListByPolicy,
+  });
+
   return (
     <PageContainer>
       <Divider orientation="left">{roleInfo?.roleName || "-"}</Divider>
       <Descriptions className="basicInfoWrap">
-        <Descriptions.Item label="角色名称">{roleInfo?.roleName || ''}</Descriptions.Item>
-        <Descriptions.Item label="角色编码">{roleInfo?.roleCode || ''}</Descriptions.Item>
-        <Descriptions.Item label="角色描述">{roleInfo?.description || ''}</Descriptions.Item>
-        <Descriptions.Item label="创建时间">{timeFormatter(roleInfo?.gmtCreate) || ''}</Descriptions.Item>
-        <Descriptions.Item label="更新时间">{timeFormatter(roleInfo?.gmtModified) || ''}</Descriptions.Item>
+        <Descriptions.Item label="角色名称">
+          {roleInfo?.roleName || ""}
+        </Descriptions.Item>
+        <Descriptions.Item label="角色编码">
+          {roleInfo?.roleCode || ""}
+        </Descriptions.Item>
+        <Descriptions.Item label="角色描述">
+          {roleInfo?.description || ""}
+        </Descriptions.Item>
+        <Descriptions.Item label="创建时间">
+          {timeFormatter(roleInfo?.gmtCreate) || ""}
+        </Descriptions.Item>
+        <Descriptions.Item label="更新时间">
+          {timeFormatter(roleInfo?.gmtModified) || ""}
+        </Descriptions.Item>
       </Descriptions>
 
-      <QueryFilter
-        onReset={handleOnReset}
-        onFinish={handleOnFinish}
-      >
-        <ProFormText name="keyword" label="关键词" />
-      </QueryFilter>
-
-      <ProTable
-        headerTitle={"角色下绑定的账号"}
-        dataSource={dataList}
-        loading={isLoading}
-        columns={columns}
-        rowKey="id"
-        options={{
-          reload: handleRoload
-        }}
-        toolBarRender={() => {
-          return [
-            <Button type="primary" onClick={(() => {
-              getQueryBoundRolesFunc()
-            })}>添加账号</Button>
-          ];
-        }}
-      />
-
-      <Pagination  {...pagination} 
-        onChange={(innerPageNo: number, innerPageSize: number) => {
-          execute({
-            innerPageNo,
-            innerPageSize,
-            "roleCode": roleCode
-          })
-        }}/>
+      <div>
+        <Divider orientation="left">当前角色关联内容</Divider>
+        <div className="jsonWarp">
+          <Tabs
+            onChange={(e) => {
+              setTabCheck(e);
+            }}
+            items={TableItemData}
+          />
+          {tabCheck == "main" && (
+            <>
+              <QueryFilter
+                style={{ padding: "0px" }}
+                size="middle"
+                onReset={handleOnReset}
+                onFinish={handleOnFinish}
+              >
+                <ProFormText name="keyword" label="关键词" />
+              </QueryFilter>
+              <ProTable
+                size="small"
+                dataSource={dataList}
+                loading={isLoading}
+                columns={columns}
+                rowKey="id"
+                options={{
+                  reload: handleRoload,
+                }}
+                toolBarRender={() => {
+                  return [
+                    <Button
+                      type="primary"
+                      onClick={() => {
+                        getQueryBoundRolesFunc();
+                      }}
+                    >
+                      添加账号
+                    </Button>,
+                  ];
+                }}
+              />
+
+              <Pagination
+                {...pagination}
+                onChange={(innerPageNo: number, innerPageSize: number) => {
+                  execute({
+                    innerPageNo,
+                    innerPageSize,
+                    roleCode: roleCode,
+                  });
+                }}
+              />
+            </>
+          )}
+          {tabCheck == "tableResource" && (
+            <>
+              <Table
+                style={{ width: "100%" }}
+                size="small"
+                rowKey="id"
+                loading={isTableLoading}
+                pagination={false}
+                columns={TableResource}
+                dataSource={ResourceTableData || []}
+              />
+            </>
+          )}
+
+          {tabCheck == "tableEmpower" && (
+            <>
+              <Table
+                style={{ width: "100%" }}
+                size="small"
+                rowKey="id"
+                dataSource={policy?.dataList}
+                loading={policy?.isLoading}
+                columns={TablePolicy}
+                pagination={false}
+              />
+              <Pagination
+                {...policy?.pagination}
+                onChange={(innerPageNo: number, innerPageSize: number) => {
+                  policy?.execute({
+                    innerPageNo,
+                    innerPageSize,
+                    subjectCodes: [roleCode],
+                  });
+                }}
+              />
+            </>
+          )}
+          {tabCheck == "tableData" && <></>}
+        </div>
+      </div>
+      {/*  */}
       <EditAccountDrawer
         open={editAccountOpen} // 状态
         editOpenStatus={setEditAccountOpen} //修改弹框显隐事件
         roleBoundAccountsFunc={roleBoundAccountsFunc}
         queryByKeywordFunc={queryByKeywordFunc} //搜索事件
       ></EditAccountDrawer>
-
     </PageContainer>
-  )
-};
+  );
+}