cfel-base-components 2.3.4-base → 2.3.4-base3

package/demo/src/index.jsx

@@ -9,7 +9,7 @@ import Layout from '../../src/components/layout';
 // import Account from '../../src/components/universal-pages/account';
 // import AccountInfo from '../../src/components/universal-pages/accountInfo';
 import CpcRole from '../../src/components/universal-pages/cpcRole';
-// import RoleInfo from '../../src/components/universal-pages/roleInfo';
+import CpcRoleInfo from '../../src/components/universal-pages/cpcRoleInfo';
 
 const App = () => {
   return <ConfigProvider
@@ -59,7 +59,13 @@ const App = () => {
       logoutUrl={(window)?.g_config?.logoutUrl}
       switchTenantUrl={(window)?.g_config?.switchTenantUrl}
     >
-      <CpcRole></CpcRole>
+      <CpcRoleInfo
+      isShowTab={{
+        main: true,
+        tableResource: true,
+        tableEmpower: true,
+        tableData: false,
+      }}></CpcRoleInfo>
     </Layout>
   </ConfigProvider>
 }

package/package.json

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

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

@@ -199,6 +199,7 @@ export default function AccountInfo({ isShowTab, getAuthTree }: RoleInfoProps) {
   };
 
   useEffect(() => {
+    if(!tabCheck) return
     tabCheckFunc();
   }, [tabCheck]);
 

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

@@ -99,7 +99,7 @@ export default function Role({
             pathname: `/role-info`,
             search: `?roleCode=${rowdata.roleCode}`,
           });
-        }}>赋予账号</a>
+        }}>配置</a>
         {
           rowdata.source !== "system"  && 
           <a onClick={() => {

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

@@ -14,13 +14,28 @@
   align-items: center;
   margin: 10px 0px;
 }
-.deviceTopTitle{
+.deviceTopTitle {
   display: flex;
   align-items: center;
-  .deviceTopDivider{
+  .deviceTopDivider {
     flex: 1;
   }
-  .deviceTopButton{
+  .deviceTopButton {
     margin: 0px 5px;
   }
-}
+}
+.deleteBox {
+  div {
+    margin-bottom: 5px;
+    display: flex;
+    span:first-child {
+      width: 80px;
+      text-align: right;
+      padding-right: 15px;
+      box-sizing: border-box;
+    }
+    div {
+      flex: 1;
+    }
+  }
+}

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

@@ -26,7 +26,6 @@ import {
   roleUnboundAccounts,
   getRole,
   queryByKeyword,
-  // getAuthTree,
   policyAuthorizePage,
 } from "./api";
 import "./index.scss";
@@ -41,9 +40,11 @@ export interface RoleInfoProps {
     tableData: boolean;
   };
   getAuthTree?: any;
+  empowerCom?: any;
+
 }
 
-export default function RoleInfo({ isShowTab, getAuthTree }: RoleInfoProps) {
+export default function RoleInfo({ isShowTab, getAuthTree , empowerCom}: RoleInfoProps) {
   const searchFormRef: any = useRef();
   const [roleCode, setRoleCode] = useState(getUrlParams("roleCode"));
   const [roleInfo, setRoleInfo]: any = useState({});
@@ -52,8 +53,10 @@ export default function RoleInfo({ isShowTab, getAuthTree }: RoleInfoProps) {
 
   const [ResourceTableData, setResourceTableData]: any = useState([]); //关联资源
   const [isTableLoading, setisTableLoading] = useState(false);
-  const [loading, setLoading] = useState(false)
-
+  const [loading, setLoading] = useState(false);
+  const [rowKeys, setRowKeys]: any = useState([]); //关联多选数据
+  const [selectedRowKeys, setselectedRowKeys]: any = useState([]); 
+  const [defaultExpandedRowKeys, setdefaultExpandedRowKeys]: any = useState([]); 
   const [TableItemData, setTableItemData]: any = useState([
     {
       key: "main",
@@ -172,6 +175,58 @@ export default function RoleInfo({ isShowTab, getAuthTree }: RoleInfoProps) {
         return dayjs(text).format("YYYY-MM-DD HH:mm:ss") || "数据格式错误";
       },
     },
+    {
+      title: "操作",
+      width: 80,
+      fixed: "right",
+      render: (rowdata: any) => (
+        <Space>
+          <a
+            onClick={() => {
+              let data = [
+                {
+                  groupId: rowdata?.groupId,
+                  policyId: rowdata?.policyId,
+                  subjectCode: rowdata?.subjectCode,
+                },
+              ];
+              Modal.confirm({
+                title: `确认解除指定的授权吗？`,
+                onOk: () => {
+                  DeleteFunc(data);
+                },
+                content: (
+                  <div className="deleteBox">
+                    <div>
+                      <span>授权主体:</span>
+                      <div>{rowdata.subject}</div>
+                    </div>
+                    <div>
+                      <span>权限策略:</span>
+                      <div>{rowdata.policy}</div>
+                    </div>
+                    <div>
+                      <span>资源组:</span>
+                      <div>{rowdata.group}</div>
+                    </div>
+                    <div>
+                      <span>授权时间:</span>
+                      <div>
+                        {dayjs(rowdata.gmtModified).format(
+                          "YYYY-MM-DD HH:mm:ss",
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ),
+              });
+            }}
+          >
+            解除授权
+          </a>
+        </Space>
+      ),
+    },
   ];
   useEffect(() => {
     init();
@@ -187,7 +242,7 @@ export default function RoleInfo({ isShowTab, getAuthTree }: RoleInfoProps) {
         icon: <InteractionOutlined />,
       });
     }
-    if (isShowTab?.tableEmpower) {
+    if (isShowTab?.tableEmpower && roleCode !== "admin") {
       data.push({
         label: "关联授权",
         key: "tableEmpower",
@@ -203,12 +258,12 @@ export default function RoleInfo({ isShowTab, getAuthTree }: RoleInfoProps) {
     }
     setTableItemData([...TableItemData, ...data]);
   };
-  
   const tabCheckFunc = () => {
     if (tabCheck == "tableEmpower") {
       policy?.execute({
         subjectCodes: [roleCode],
       }); // 获取授权策略
+      empowerCom?.empowerInit();
     } else if (tabCheck == "tableResource") {
       getAuthTreeFunc(); // 获取关联资源
     } else {
@@ -222,32 +277,43 @@ export default function RoleInfo({ isShowTab, getAuthTree }: RoleInfoProps) {
   //获取关联资源
   const getAuthTreeFunc = () => {
     setisTableLoading(true);
-    getAuthTree && getAuthTree({
-      roleCode: roleCode,
-    }).then((res: any) => {
-      setisTableLoading(false);
-      let data: any = resourceAction(res);
-      setResourceTableData(data);
-    });
+    getAuthTree &&
+      getAuthTree({
+        roleCode: roleCode,
+      }).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) => {
+  const resourceAction: any = (data: any,list:any,drkey:any) => {
     if (Object.prototype.toString.call(data) === "[object Array]") {
       data.map((item: any) => {
-        return resourceAction(item);
+        return resourceAction(item,list,drkey);
       });
-      return data;
+      return {
+        data,
+        list,
+        drkey
+      }
     } else if (Object.prototype.toString.call(data) === "[object Object]") {
       if (data.children && data.children.length !== 0) {
-        return resourceAction(data.children);
+        drkey.push(data.id)
+        return resourceAction(data.children,list,drkey);
       } else {
         delete data.children;
+        if(data.checked)list.push(data.id)
+        drkey.push(data.id)
         return data;
       }
     }
   };
 
-
   const getRoleFunc = (data: any) => {
     setRoleInfo({});
     setLoading(true);
@@ -351,130 +417,190 @@ export default function RoleInfo({ isShowTab, getAuthTree }: RoleInfoProps) {
   let policy = useTableHooks({
     asyncFunction: readDataListByPolicy,
   });
+  //批量解绑
+  const DeleteFunc = (authorizeList: any) => {
+    empowerCom?.RevokeFunc({ authorizeList }).then((res: any) => {
+      message.success("解除成功");
+      setRowKeys([]);
+      policy?.execute({ subjectCodes: [roleCode] });
+    });
+  };
 
   return (
     <PageContainer>
       <Spin spinning={loading}>
-      <div className="deviceTopTitle">
+        <div className="deviceTopTitle">
           <div className="deviceTopDivider">
             <Divider orientation="left">{roleInfo?.roleName || "-"}</Divider>
           </div>
-          <Button className="deviceTopButton" onClick={(() => {
+          <Button
+            className="deviceTopButton"
+            onClick={() => {
               getRoleFunc({ roleCode });
-          })} >刷新</Button>
-      </div>
-      <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>
-
-      <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>,
-                  ];
-                }}
-              />
+          >
+            刷新
+          </Button>
+        </div>
+        <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>
 
-              <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 || []}
-              />
-            </>
-          )}
+        <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>,
+                    ];
+                  }}
+                />
 
-          {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" && <></>}
+                <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 || []}
+                  rowSelection={{
+                    selectedRowKeys:selectedRowKeys,
+                  }}
+                  expandable={{
+                    expandedRowKeys:defaultExpandedRowKeys, //defaultExpandAllRows 无效
+                  }}
+                />
+              </>
+            )}
+
+            {tabCheck == "tableEmpower" && (
+              <>
+                <div className="tableActionWarp">
+                  <Button
+                    size="middle"
+                    type="primary"
+                    onClick={() => {
+                      console.log(empowerCom?.action);
+                      empowerCom?.action?.editOpenStatus(true);
+                    }}
+                  >
+                    新增
+                  </Button>
+                </div>
+                <Table
+                  style={{ width: "100%" }}
+                  size="small"
+                  rowKey="id"
+                  dataSource={policy?.dataList}
+                  loading={policy?.isLoading}
+                  columns={TablePolicy}
+                  pagination={false}
+                  rowSelection={{
+                    type: "checkbox",
+                    //   selectedRowKeys: rowKeys,
+                    onChange: (selectedRowKeys: any, list: any) => {
+                      let data = list?.map((item: any) => {
+                        return {
+                          groupId: item?.groupId,
+                          policyId: item?.policyId,
+                          subjectCode: item?.subjectCode,
+                        };
+                      });
+                      setRowKeys(data);
+                    },
+                  }}
+                />
+                <div className="paginBox">
+                  <Button
+                    disabled={rowKeys.length > 0 ? false : true}
+                    onClick={() => {
+                      Modal.confirm({
+                        title: `确认批量解绑吗？`,
+                        onOk: () => {
+                          DeleteFunc(rowKeys);
+                        },
+                      });
+                    }}
+                  >
+                    批量解绑
+                  </Button>
+                  <Pagination
+                    {...policy?.pagination}
+                    onChange={(innerPageNo: number, innerPageSize: number) => {
+                      policy?.execute({
+                        innerPageNo,
+                        innerPageSize,
+                        subjectCodes: [roleCode],
+                      });
+                    }}
+                  />
+                </div>
+              </>
+            )}
+            {tabCheck === "tableData" && <></>}
+          </div>
         </div>
-      </div>
       </Spin>
       {/*  */}
       <EditAccountDrawer
@@ -483,6 +609,15 @@ export default function RoleInfo({ isShowTab, getAuthTree }: RoleInfoProps) {
         roleBoundAccountsFunc={roleBoundAccountsFunc}
         queryByKeywordFunc={queryByKeywordFunc} //搜索事件
       ></EditAccountDrawer>
+      <empowerCom.drawer
+        {...empowerCom?.action}
+        actionFunc={(data: any) => {
+          return empowerCom?.action?.actionFunc(data).then(() => {
+            message.success("新增成功");
+            policy?.execute({ subjectCodes: [roleCode] });
+          });
+        }}
+      />
     </PageContainer>
   );
 }

package/src/index.tsx

@@ -13,7 +13,7 @@ import request from './apiRequest/config'
 import iotRequest from './apiRequest/iotConfig'
 import { hosts } from './apiRequest/hosts'
 import CpcAccount from './components/universal-pages/cpcAccount' //cp列表c账号
-import cpcAccountInfo from './components/universal-pages/cpcAccountInfo' //cpc账号详情
+import CpcAccountInfo from './components/universal-pages/cpcAccountInfo' //cpc账号详情
 import CpcRole from './components/universal-pages/cpcRole' //cpc 角色
 import CpcRoleInfo from './components/universal-pages/cpcRoleInfo' //cpc角色详情
 import { getUrlParams, downloadFile, timeFormatter } from './utils/index'
@@ -40,7 +40,7 @@ export {
     timeFormatter,
 
     CpcAccount,
-    cpcAccountInfo,
+    CpcAccountInfo,
     CpcRole,
     CpcRoleInfo
 }