cfel-base-components 2.3.1 → 2.3.3

package/package.json

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

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

@@ -146,7 +146,7 @@ export default function AccountInfo() {
     Promise.all([queryBoundRoles({ accountId: pageId }), rolelistRole()]).then((res) => {
       let boundRoles: any = res[0]
       let roleList: any = res[1]
-      let result = []
+      let result :any= []
       for (var i = 0; i < roleList.length; i++) {
         var item = roleList[i]
         var repeat = false

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

@@ -36,9 +36,21 @@ export default function Account({
       title: '名称',
       dataIndex: 'name',
       key: 'name',
-      render: (text: any) => {
-        return <span>{text}</span>
-      }
+      render: (text: any, data: any) => {
+        return (
+          <span
+            style={{ cursor: "pointer", color: "#1677ff" }}
+            onClick={() => {
+              historyAction?.push({
+                pathname: `/account-info`,
+                search: `?id=${data.id}`,
+              });
+            }}
+          >
+            {data?.name}
+          </span>
+        );
+      },
     },
     {
       title: '账号',

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

@@ -0,0 +1,80 @@
+import React, { useEffect, useRef } from 'react';
+import { Button, Drawer, Select, Form, Space } from 'antd';
+
+interface propsType {
+  open: boolean;
+  editOpenStatus: Function;
+  isBoundRolesFunc: Function;
+  rolelistRoleData: any;
+  roleCheckData: any;
+}
+export default function index({
+  open,
+  editOpenStatus,
+  isBoundRolesFunc,
+  rolelistRoleData,
+  roleCheckData,
+}: propsType) {
+
+  const [form] = Form.useForm();
+  useEffect(() => {
+    if (!open) return
+    form.setFieldsValue({
+      roleCodes: roleCheckData || [],
+    })
+  }, [open])
+
+  const onCloseDrawer = () => {
+    editOpenStatus(false)
+  }
+  const onFinishForm = () => {
+    form.validateFields()
+      .then((values) => {
+        isBoundRolesFunc(true, values).then((res: any) => {
+          form.resetFields()
+        })
+      })
+  }
+  return (<Drawer
+    title="绑定的角色"
+    closable={false}
+    open={open}
+    destroyOnClose={true}
+    onClose={() => { onCloseDrawer() }}
+    footer={<Space>
+      <Button
+        type="primary"
+        onClick={() => {
+          onFinishForm()
+        }}
+      >保存</Button>
+      <Button
+        onClick={() => { onCloseDrawer() }}
+      >取消</Button>
+    </Space>
+    }
+  >
+    <Form
+      form={form}
+      layout={'vertical'}
+      initialValues={{ remember: true }}
+      autoComplete="off"
+    >
+      <Form.Item
+        name="roleCodes"
+        label="绑定角色"
+        rules={[{ required: true, message: '' }]} >
+        <Select
+          mode="multiple"
+          allowClear
+          placeholder="请选择"
+          options={rolelistRoleData?.map((d: any) => ({
+            label: d.roleName,
+            value: d.roleCode,
+          }))}
+        />
+      </Form.Item>
+    </Form>
+  </Drawer >
+  );
+}

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

@@ -0,0 +1,41 @@
+import request from "../../../apiRequest/config"
+
+//按账号id查询账号信息
+export const getAccount= (data?: any) => {
+    return request.post("/api/permission/account/getAccount.json", { ...data })
+}
+//根据账号查询绑定的角色 分页
+export const pageBoundRoles= (data?: any) => {
+    return request.post("/api/permission/accountRole/pageBoundRoles.json", { ...data })
+}
+//根据账号查询绑定的角色
+export const queryBoundRoles= (data?: any) => {
+    return request.post("/api/permission/accountRole/queryBoundRoles.json", { ...data })
+}
+//获取所有角色
+export const rolelistRole = (data?: any) => {
+    return request.get("/api/permission/role/listRole.json", { ...data })
+}
+//账号下绑定角色
+export const accountBoundRoles= (data?: any) => {
+    return request.post("/api/permission/accountRole/accountBoundRoles.json", { ...data })
+}
+//账号下解绑角色
+export const accountUnboundRoles= (data?: any) => {
+    return request.post("/api/permission/accountRole/accountUnboundRoles.json", { ...data })
+}
+
+//查询账号下的资源订阅树
+export const getAuthTree = (data?: any) => {
+    return request.post(
+      "/sdk/permission/rbac/console/resource-account/getAuthTree.json",
+      { ...data },
+    );
+  };
+  //分页查询账号权限策略授权信息
+  export const accountAuthorizePage = (data?: any) => {
+    return request.post(
+      "/sdk/permission/abac/console/account-authorize/page.json",
+      { ...data },
+    );
+  };

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

@@ -0,0 +1,26 @@
+.basicInfoWrap {
+  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;
+}
+.deviceTopTitle {
+  display: flex;
+  align-items: center;
+  .deviceTopDivider {
+    flex: 1;
+  }
+  .deviceTopButton {
+    margin: 0px 5px;
+  }
+}

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

@@ -0,0 +1,468 @@
+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,
+  Spin,
+  Tabs,
+  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,
+  queryBoundRoles,
+  rolelistRole,
+  accountBoundRoles,
+  accountUnboundRoles,
+  getAuthTree,
+  accountAuthorizePage,
+} 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 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);
+
+  const [loading, setLoading] = 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 TableResource: any = [
+    {
+      title: "资源名称",
+      dataIndex: "name",
+      key: "name",
+    },
+  ];
+  const columns: any = [
+    {
+      title: "角色名称",
+      dataIndex: "roleName",
+      key: "roleName",
+    },
+    {
+      title: "角色编码",
+      dataIndex: "roleCode",
+      key: "roleCode",
+      width: 300,
+    },
+    {
+      title: "来源",
+      dataIndex: "source",
+      key: "source",
+      render: (cell: any) => {
+        if (cell == "system") {
+          return "系统创建";
+        } else if (cell == "user") {
+          return "用户自建";
+        } else if (cell == "user") {
+          return "未知";
+        }
+      },
+    },
+    {
+      title: "描述",
+      dataIndex: "description",
+      key: "description",
+    },
+    {
+      title: "创建时间",
+      dataIndex: "gmtCreate",
+      key: "gmtCreate",
+      render: (cell: any) => {
+        return timeFormatter(cell);
+      },
+    },
+    {
+      title: "修改时间",
+      dataIndex: "gmtModified",
+      key: "gmtModified",
+      render: (cell: any) => {
+        return timeFormatter(cell);
+      },
+    },
+    {
+      title: "操作",
+      width: 80,
+      fixed: "right",
+      render: (rowdata: any) => (
+        <Space>
+          <a
+            onClick={() => {
+              Modal.confirm({
+                title: "确认解绑吗？",
+                content: "",
+                onOk: () => {
+                  isBoundRolesFunc(false, { roleCodes: [rowdata.roleCode] });
+                },
+              });
+            }}
+          >
+            解绑
+          </a>
+        </Space>
+      ),
+    },
+  ];
+  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(() => {
+    init();
+    getAccountFunc({ id: pageId });
+  }, []);
+  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]);
+  };
+
+  const tabCheckFunc = () => {
+    if (tabCheck == "tableEmpower") {
+      policy?.execute({
+        accountId: pageId,
+      }); // 获取授权策略
+    } else if (tabCheck == "tableResource") {
+      getAuthTreeFunc(); // 获取关联资源
+    } else {
+      execute({ accountId: pageId });
+    }
+  };
+
+  useEffect(() => {
+    tabCheckFunc();
+  }, [tabCheck]);
+
+  const getAccountFunc = (data: any) => {
+    setAccountInfoInfo({});
+    setLoading(true);
+    getAccount({
+      ...data,
+    }).then((res: any) => {
+      setLoading(false);
+      setAccountInfoInfo(res || {});
+      tabCheckFunc();
+    });
+  };
+
+  //获取关联资源
+  const getAuthTreeFunc = () => {
+    setisTableLoading(true);
+    getAuthTree &&
+      getAuthTree({
+        accountId: pageId,
+      }).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 readDataList = ({
+    innerPageNo,
+    innerPageSize,
+    ...otherOptions
+  }: any) => {
+    return pageBoundRoles({
+      currentPage: innerPageNo,
+      pageSize: innerPageSize,
+      ...otherOptions,
+    }).then((res: any) => {
+      let records = get(res, "records", []);
+      let total = get(res, "total", 0);
+      return {
+        dataList: records,
+        totalCount: total,
+      };
+    });
+  };
+  const { execute, dataList, isLoading, pagination } = useTableHooks({
+    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);
+          }
+        }
+        setRolelistRoleData(roleList);
+        setRoleCheckData(result);
+        setEditAccountOpen(true);
+      },
+    );
+  };
+  const isBoundRolesFunc = (type: any, { roleCodes }: any) => {
+    return (type ? accountBoundRoles : accountUnboundRoles)({
+      accountId: pageId,
+      roleCodes: roleCodes,
+    }).then(() => {
+      message.success(`${type ? "绑定" : "解绑"}成功`);
+      execute({ accountId: pageId });
+      setEditAccountOpen(false);
+    });
+  };
+
+  const accountAuthorizePageFunc = ({
+    innerPageNo,
+    innerPageSize,
+    ...otherOptions
+  }: any) => {
+    return accountAuthorizePage({
+      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: accountAuthorizePageFunc,
+  });
+  return (
+    <PageContainer>
+      <Spin spinning={loading}>
+        <div className="deviceTopTitle">
+          <div className="deviceTopDivider">
+            <Divider orientation="left">
+              <Avatar
+                style={{ backgroundColor: "#1677ff", marginRight: "8px" }}
+                draggable={false}
+                icon={<UserOutlined />}
+                src={!!accountInfo.avatar ? accountInfo.avatar : undefined}
+              />
+              {accountInfo?.name || ""}
+            </Divider>
+          </div>
+          <Button
+            className="deviceTopButton"
+            onClick={() => {
+              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.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="创建时间">
+            {timeFormatter(accountInfo?.gmtCreate)}
+          </Descriptions.Item>
+          <Descriptions.Item label="修改时间">
+            {timeFormatter(accountInfo?.gmtModified)}
+          </Descriptions.Item>
+        </Descriptions>
+        <div>
+          <Divider orientation="left">当前账号关联内容</Divider>
+          <div className="jsonWarp">
+            <Tabs
+              onChange={(e) => {
+                setTabCheck(e);
+              }}
+              items={TableItemData}
+            />
+            {tabCheck == "main" && (
+              <>
+                <div className="tableActionWarp">
+                  <Button
+                    type="primary"
+                    onClick={() => {
+                      getQueryBoundRolesFunc();
+                    }}
+                  >
+                    绑定
+                  </Button>
+                </div>
+                <Table
+                  scroll={{
+                    x: 1200,
+                  }}
+                  size="small"
+                  rowKey="id"
+                  dataSource={dataList}
+                  loading={isLoading}
+                  columns={columns}
+                  pagination={false}
+                />
+                <Pagination
+                  {...pagination}
+                  onChange={(innerPageNo: number, innerPageSize: number) => {
+                    execute({
+                      innerPageNo,
+                      innerPageSize,
+                      accountId: pageId,
+                    });
+                  }}
+                />
+              </>
+            )}
+            {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,
+                      accountId: pageId,
+                    });
+                  }}
+                />
+              </>
+            )}
+            {tabCheck == "tableData" && <></>}
+          </div>
+        </div>
+        {/* */}
+      </Spin>
+      <EditAccountDrawer
+        open={editAccountOpen} // 状态
+        editOpenStatus={setEditAccountOpen} //修改弹框显隐事件
+        rolelistRoleData={rolelistRoleData} //总角色
+        roleCheckData={roleCheckData} //当前角色选中数据
+        isBoundRolesFunc={isBoundRolesFunc}
+      ></EditAccountDrawer>
+    </PageContainer>
+  );
+}

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

@@ -14,3 +14,13 @@
   align-items: center;
   margin: 10px 0px;
 }
+.deviceTopTitle{
+  display: flex;
+  align-items: center;
+  .deviceTopDivider{
+    flex: 1;
+  }
+  .deviceTopButton{
+    margin: 0px 5px;
+  }
+}

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

@@ -16,6 +16,7 @@ import {
   message,
   Tabs,
   Table,
+  Spin
 } from "antd";
 import EditAccountDrawer from "./EditAccountDrawer/index";
 import { timeFormatter, getUrlParams } from "../../../utils";
@@ -51,6 +52,7 @@ export default function RoleInfo({ isShowTab, getAuthTree }: RoleInfoProps) {
 
   const [ResourceTableData, setResourceTableData]: any = useState([]); //关联资源
   const [isTableLoading, setisTableLoading] = useState(false);
+  const [loading, setLoading] = useState(false)
 
   const [TableItemData, setTableItemData]: any = useState([
     {
@@ -173,6 +175,7 @@ export default function RoleInfo({ isShowTab, getAuthTree }: RoleInfoProps) {
   ];
   useEffect(() => {
     init();
+    getRoleFunc({ roleCode });
   }, []);
 
   const init = () => {
@@ -200,7 +203,8 @@ export default function RoleInfo({ isShowTab, getAuthTree }: RoleInfoProps) {
     }
     setTableItemData([...TableItemData, ...data]);
   };
-  useEffect(() => {
+  
+  const tabCheckFunc = () => {
     if (tabCheck == "tableEmpower") {
       policy?.execute({
         subjectCodes: [roleCode],
@@ -208,8 +212,11 @@ export default function RoleInfo({ isShowTab, getAuthTree }: RoleInfoProps) {
     } else if (tabCheck == "tableResource") {
       getAuthTreeFunc(); // 获取关联资源
     } else {
-      initGetData();
+      execute({ roleCode: roleCode });
     }
+  };
+  useEffect(() => {
+    tabCheckFunc();
   }, [tabCheck]);
 
   //获取关联资源
@@ -240,19 +247,16 @@ export default function RoleInfo({ isShowTab, getAuthTree }: RoleInfoProps) {
     }
   };
 
-  //初始化请求数据
-  const initGetData = () => {
-    if (roleCode) {
-      getRoleFunc({ roleCode });
-      execute({ roleCode: roleCode });
-    }
-  };
+
   const getRoleFunc = (data: any) => {
     setRoleInfo({});
+    setLoading(true);
     getRole({
       ...data,
     }).then((res: any) => {
+      setLoading(false);
       setRoleInfo(res || {});
+      tabCheckFunc();
     });
   };
   const roleUnboundAccountsFunc = (account: any) => {
@@ -350,7 +354,15 @@ export default function RoleInfo({ isShowTab, getAuthTree }: RoleInfoProps) {
 
   return (
     <PageContainer>
-      <Divider orientation="left">{roleInfo?.roleName || "-"}</Divider>
+      <Spin spinning={loading}>
+      <div className="deviceTopTitle">
+          <div className="deviceTopDivider">
+            <Divider orientation="left">{roleInfo?.roleName || "-"}</Divider>
+          </div>
+          <Button className="deviceTopButton" onClick={(() => {
+              getRoleFunc({ roleCode });
+          })} >刷新</Button>
+      </div>
       <Descriptions className="basicInfoWrap">
         <Descriptions.Item label="角色名称">
           {roleInfo?.roleName || ""}
@@ -463,6 +475,7 @@ export default function RoleInfo({ isShowTab, getAuthTree }: RoleInfoProps) {
           {tabCheck == "tableData" && <></>}
         </div>
       </div>
+      </Spin>
       {/*  */}
       <EditAccountDrawer
         open={editAccountOpen} // 状态