cfel-base-components 2.0.10 → 2.0.12

package/demo/src/index.jsx

@@ -2,14 +2,13 @@ import React from "react"
 import { createRoot } from 'react-dom/client';
 import style from './index.module.less';
 import { SwapOutlined, } from '@ant-design/icons';
-import { history } from 'umi';
 
 import './index.scss';
 import PageContainer from '../../src/components/base-component/PageContainer';
 import Layout from '../../src/components/layout';
-import Account from '../../src/components/universal-pages/account';
+// import Account from '../../src/components/universal-pages/account';
 // import AccountInfo from '../../src/components/universal-pages/accountInfo';
-// import Role from '../../src/components/universal-pages/role';
+import CpcRole from '../../src/components/universal-pages/cpcRole';
 // import RoleInfo from '../../src/components/universal-pages/roleInfo';
 
 const App = () => {
@@ -42,13 +41,13 @@ const App = () => {
             type:(window)?.g_config?.custom?.type,
             isCompleted:(window)?.g_config?.custom?.isCompleted,
             isAudited:(window)?.g_config?.custom?.isAudited,
-            hrefUrl='/web/user-info',
+            hrefUrl:'/web/user-info',
             historyAction:history
           }}
           logoutUrl={(window)?.g_config?.logoutUrl}
           switchTenantUrl={(window)?.g_config?.switchTenantUrl}
         >
-          <Account></Account>
+          <CpcRole></CpcRole>
         </Layout>
     </PageContainer>
 }

package/package.json

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

package/src/components/layout/index.scss

@@ -118,7 +118,7 @@ body {
             transition: all .3s;
             cursor: pointer;
             margin: 0 4px;
-            padding: 0 12px;
+            padding: 0 4px;
 
             display: flex;
             justify-content: center;

package/src/components/layout/index.tsx

@@ -21,15 +21,15 @@ export interface LiosLayoutlProps {
     type: string,
     isCompleted: number,
     isAudited: number,
-    hrefUrl:string,
+    hrefUrl: string,
     historyAction?: any;
   }
-  myWalletInfo?:{
-    availableCashAmount:string,
-    availableAmount:string,
-    currency:string
+  myWalletInfo?: {
+    availableCashAmount: string,
+    availableAmount: string,
+    currency: string
   }
-  myWalletInfoAction?:Function,
+  myWalletInfoAction?: Function,
   logoutUrl?: string,
   switchTenantUrl?: string,
   defaultOpenKeys?: string[],
@@ -37,7 +37,8 @@ export interface LiosLayoutlProps {
   logoData?: {
     type: string,
     content: string
-  }
+  },
+  isHideHeader?:boolean //是否隐藏header
 }
 
 export default function LiosLayout(props: LiosLayoutlProps) {
@@ -55,7 +56,8 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     productList,
     logoData,
     myWalletInfo,
-    myWalletInfoAction
+    myWalletInfoAction,
+    isHideHeader
   } = props
 
   const {
@@ -82,9 +84,9 @@ 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:'￥'}
+    { value: 'JPY', label: '日元', icon: '￥' },
+    { value: 'USD', label: '美元', icon: "$" },
+    { value: 'CNY', label: '人民币', icon: '￥' }
   ])
   useEffect(() => {
     if (!productList) return
@@ -97,20 +99,20 @@ export default function LiosLayout(props: LiosLayoutlProps) {
   };
   const editUserInfo = () => {
     const { origin } = window.location
-    if(historyAction){
+    if (historyAction) {
       historyAction?.push({
         pathname: hrefUrl
       });
-    }else{
-      window.location.href = origin +  hrefUrl 
+    } else {
+      window.location.href = origin + hrefUrl
     }
-    
+
   }
-  const currencyText = (currencyText:string)=>{
+  const currencyText = (currencyText: string) => {
     let text = ''
-    currencyList.some((item:any)=>{
-      if(item.value == currencyText){
-        text =  item.icon
+    currencyList.some((item: any) => {
+      if (item.value == currencyText) {
+        text = item.icon
         return true
       }
     })
@@ -133,20 +135,20 @@ export default function LiosLayout(props: LiosLayoutlProps) {
           </div>
         </div>
       </div>
-      
+
       {
         myWalletInfo && <div className='lios-userInfo'>
           <div className='lios-li'>
             <div className='lios-key'>现金余额</div>
             <div className='lios-value'>
-            <span>{currencyText(currency)}</span>
-            {availableCashAmount || '加载中...'}
+              <span>{currencyText(currency)}</span>
+              {availableCashAmount || '加载中...'}
             </div>
           </div>
           <div className='lios-li'>
             <div className='lios-key'>可用额度</div>
             <div className='lios-value'><span>{currencyText(currency)}</span>
-            {availableAmount || '加载中...'}
+              {availableAmount || '加载中...'}
             </div>
           </div>
         </div>
@@ -215,6 +217,8 @@ export default function LiosLayout(props: LiosLayoutlProps) {
   }
   return (
     <Layout className="layoutWarp">
+      {
+        !isHideHeader && 
       <div className="lios-header">
 
         <div className="background">
@@ -263,10 +267,10 @@ export default function LiosLayout(props: LiosLayoutlProps) {
         </div>
 
         <Popover placement="bottom" content={<UserCard />} arrow={false} trigger="click"
-        onOpenChange={((e)=>{
-          if(!e)return
-          myWalletInfoAction()
-        })}>
+          onOpenChange={((e) => {
+            if (!e) return
+            myWalletInfoAction()
+          })}>
           <div className="lios-header-user">
             <img
               className="author"
@@ -278,27 +282,30 @@ export default function LiosLayout(props: LiosLayoutlProps) {
           </div>
         </Popover>
       </div>
-
+      }
       <div className="lios-main">
-        <Sider
-          className="lios-side"
-          theme={"light"}
-          collapsible
-          collapsed={collapsed}
-          width={collapsed ? 60 : 256}
-          onCollapse={(value) => setCollapsed(value)}>
-          <Menu
-            mode="inline"
-            openKeys={openKeys}
-            onOpenChange={onOpenChange}
-            items={menuList}
-            style={MenuStyle}
-            onClick={(item): any => {
-              onMenuClick && onMenuClick(item)
-            }}
-            selectedKeys={selectedKeys}
-          />
-        </Sider>
+        {
+          menuList &&
+          <Sider
+            className="lios-side"
+            theme={"light"}
+            collapsible
+            collapsed={collapsed}
+            width={collapsed ? 60 : 256}
+            onCollapse={(value) => setCollapsed(value)}>
+            <Menu
+              mode="inline"
+              openKeys={openKeys}
+              onOpenChange={onOpenChange}
+              items={menuList}
+              style={MenuStyle}
+              onClick={(item): any => {
+                onMenuClick && onMenuClick(item)
+              }}
+              selectedKeys={selectedKeys}
+            />
+          </Sider>
+        }
         <div className="lios-content">
           {props.children}
         </div>

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

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from 'react'
+import {
+    Button, Modal, Form, Input,
+} from 'antd';
+export default function index({
+    ModalOpen, //弹框状态
+    editOpenStatus, //关闭弹框
+    editingData, //编辑数据
+    actionFunc, //新增事件
+}: any) {
+    const [form] = Form.useForm();
+
+    const { TextArea } = Input;
+
+    const formDom = [
+        { title: "角色名称", key: 'roleName', type: 'string', required: true },
+        { title: "描述", key: 'description', type: 'descriptionstring', required: false },
+    ]
+    useEffect(() => {
+        if (!ModalOpen) return
+
+        if (editingData) {
+            console.log(editingData, "editingData")
+            form.setFieldsValue({
+                ...editingData
+            })
+        }
+    }, [ModalOpen])
+
+
+    const showCom = ({ title, key, type, required }: any) => {
+        let dom: any = null
+        switch (type) {
+            case 'string':
+                dom = (<Form.Item
+                    label={title}
+                    name={key}
+                    rules={[{ required: required, message: '请输入' }]}
+                >
+                    <Input placeholder="请输入" />
+                </Form.Item>)
+                break;
+            case 'descriptionstring':
+                dom = (<Form.Item
+                    label={title}
+                    name={key}
+                    rules={[{ required: required, message: '请输入' }]}
+                >
+                    <TextArea rows={3} placeholder="请输入"/>
+                </Form.Item>)
+                break;
+            
+            default:
+                break;
+        }
+        return dom
+    }
+
+    const closeModel = () => {
+        form.resetFields()
+        editOpenStatus(false)
+    }
+
+    const modelSubmit = () => {
+        form.validateFields().then((value) => {
+            console.log(value, "value")
+            if (editingData) {
+                value.roleCode = editingData.roleCode
+            }
+            actionFunc(value, editingData ? "edit" : "add").then(() => {
+                form.resetFields()
+            })
+        })
+    }
+    return (
+        <Modal title={editingData ? "编辑角色" : "新增角色"}
+            destroyOnClose={true}
+            open={ModalOpen}
+            onCancel={() => {
+                closeModel()
+            }}
+            footer={[
+                <Button
+                    key="refresh"
+                    onClick={() => {
+                        closeModel()
+                    }}
+                >
+                    取消
+                </Button>,
+                <Button
+                    key="submit"
+                    type="primary"
+                    onClick={() => {
+                        modelSubmit()
+                    }}
+                >
+                    确定
+                </Button>,
+            ]}
+        >
+            <Form
+                form={form}
+                layout={'vertical'}
+                initialValues={{ remember: true }}
+                autoComplete="off"
+            >
+                {
+                    formDom.map((item: any, index: number) => {
+                        return <div key={index}>{showCom(item)}</div>
+                    })
+                }
+            </Form>
+        </Modal>
+    )
+}

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

@@ -0,0 +1,16 @@
+import request from "../../../apiRequest/config"
+
+export const pageRequest = (data?: any) => {
+    return request.post("/api/permission/role/page.json", { ...data })
+}
+
+export const create = (data?: any) => {
+    return request.post("/api/permission/role/create.json", { ...data })
+}
+
+export const remove = (data?: any) => {
+    return request.post("/api/permission/role/remove.json", { ...data })
+}
+export const update = (data?: any) => {
+    return request.post("/api/permission/role/update.json", { ...data })
+}

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

@@ -0,0 +1,204 @@
+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 { Space, Button,message,Modal } from 'antd';
+import { pageRequest,
+  create,
+  remove,
+  update
+ } from "./api"
+
+import { ProFormText, } from '@ant-design/pro-components';
+import { timeFormatter } from '../../../utils';
+import AddModal from './AddModal'
+import "./index.scss"
+export interface RoleProps {
+  historyAction: any;
+}
+
+export default function Role({
+  historyAction
+}: RoleProps) {
+  const searchFormRef: any = useRef()
+
+  const [ModalOpen, setModalOpen] = useState(false)
+  const [editingData, setEditingData] = useState(null);//编辑数据
+  useEffect(() => {
+    init()
+    execute()
+  }, [])
+
+  const init = () => {
+  }
+
+  const columns: any = [
+    {
+      title: '角色名称',
+      dataIndex: 'roleName',
+      key: 'roleName',
+    },
+    {
+      title: '角色编码',
+      dataIndex: 'roleCode',
+      key: 'roleCode',
+    },
+    {
+      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: 180,
+      fixed: "right",
+      render: (rowdata: any,) => <Space>
+        {
+          rowdata.source !== "system"  && 
+          <a onClick={() => {
+            setEditingData(rowdata)
+            setModalOpen(true)
+          }}>编辑</a>
+        }
+        <a onClick={() => {
+          historyAction?.push({
+            pathname: `/role-info`,
+            search: `?roleCode=${rowdata.roleCode}`,
+          });
+        }}>赋予账号</a>
+        {
+          rowdata.source !== "system"  && 
+          <a onClick={() => {
+            Modal.confirm({
+              title: "确认删除吗？",
+              content: '',
+              onOk: () => {
+                DeleteFunc(rowdata?.roleCode)
+              }
+            })
+          }} >删除</a>
+        }
+      </Space>
+    },
+  ];
+
+  const handleOnReset: any = async (values: any) => {
+    searchFormRef.current = { ...values }
+    execute({
+      innerPageNo: 1,
+    })
+  }
+
+  const handleOnFinish: any = async (values: any) => {
+    searchFormRef.current = { ...values }
+    execute()
+  }
+
+  const readDataList = ({
+    innerPageNo,
+    innerPageSize,
+  }: any) => {
+    return pageRequest({
+      currentPage: innerPageNo,
+      pageSize: innerPageSize,
+      ...searchFormRef.current
+    }).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 handleRoload = () => {
+    execute()
+  }
+
+  const setModalOpenFunc = (type: boolean) => {
+    setModalOpen(type)
+    setEditingData(null)
+  }
+
+  const actionFunc = (data: any, type: string) => {
+    return  (type == 'add' ? create : update)({ ...data }).then((res) => {
+      message.success(`${type == 'add' ? '新增' : '更新'}成功`)
+      setModalOpen(false)
+      setEditingData(null)
+      execute()
+    })
+  }
+  const DeleteFunc = (roleCode:any)=>{
+    remove({
+      roleCode,
+    }).then((res: any) => {
+        message.success('删除成功')
+        execute()
+      })
+}
+  return (
+    <PageContainer >
+      <QueryFilter
+        onReset={handleOnReset}
+        onFinish={handleOnFinish}
+      >
+        <ProFormText name="roleName" label="角色名称" />
+      </QueryFilter>
+
+      <ProTable
+        toolBarRender={() => {
+          return [
+            <Button
+              type="primary"
+              onClick={() => {
+                setModalOpen(true)
+              }}
+            >
+              新增账号
+            </Button>,
+          ];
+        }}
+        headerTitle={"角色列表"}
+        dataSource={dataList}
+        loading={isLoading}
+        columns={columns}
+        rowKey="id"
+        options={{
+          reload: handleRoload
+        }}
+      />
+      <Pagination  {...pagination} />
+      <AddModal
+        ModalOpen={ModalOpen}
+        editOpenStatus={setModalOpenFunc} //修改状态事件
+        editingData={editingData} //当前数据
+        actionFunc={actionFunc}//事件
+      />
+    </PageContainer >
+  )
+};

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

@@ -0,0 +1,111 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Button, Drawer, Select, Modal, Form, Spin, Space } from 'antd';
+
+
+interface propsType {
+  open: boolean;
+  editOpenStatus: Function;
+  roleBoundAccountsFunc: Function;
+  queryByKeywordFunc: Function;
+}
+
+export default function index({ 
+  open, 
+  editOpenStatus, 
+  roleBoundAccountsFunc,
+  queryByKeywordFunc
+ }: propsType) {
+  const [form] = Form.useForm();
+  const [selectOptions, useSelectOptions] = useState([])
+
+  useEffect(() => {
+    form.resetFields()
+    if(open)queryByKeywordSearch('')
+  }, [open])
+
+  const editModelOpen = (type: boolean) => {
+    editOpenStatus(type);
+  };
+
+  const onCloseDrawer = () => {
+    editModelOpen(false)
+  }
+
+  function useDebounce(fn: any, delay: any, dep = []) {
+    const { current }: any = useRef({ fn, timer: null });
+    useEffect(function () {
+      current.fn = fn;
+    }, [fn]);
+    return useCallback(function f(...args: any) {
+      if (current.timer) {
+        clearTimeout(current.timer);
+      }
+      current.timer = setTimeout(() => {
+        current.fn(...args);
+      }, delay);
+    }, dep)
+  }
+
+  const queryByKeywordSearch = useDebounce((keyword: any) => {
+    queryByKeywordFunc({
+      keyword
+    }).then((res: any) => {
+      useSelectOptions(res)
+    }).catch((err) => {
+    })
+  }, 500)
+
+  const onFinishForm = () => {
+    form.validateFields()
+      .then((values) => {
+        roleBoundAccountsFunc(values)
+      })
+  }
+
+  return (
+    <Drawer
+      title="绑定的角色"
+      closable={false}
+      open={open}
+      destroyOnClose={true}
+      onClose={() => { onCloseDrawer() }}
+      footer={<Space>
+        <Button
+          key="submit"
+          type="primary"
+          onClick={() => {
+            onFinishForm()
+          }}
+        >保存</Button>
+        <Button
+          key="refresh"
+          onClick={() => { onCloseDrawer() }}
+        >取消</Button>
+      </Space>}
+    >
+      <Form
+        form={form}
+        layout={'vertical'}
+        initialValues={{ remember: true }}
+        autoComplete="off"
+      >
+        <Form.Item name="accountIds" label="添加账号"
+          rules={[{ required: true, message: '请选中账号!' }]}>
+          <Select
+            mode="multiple"
+            allowClear
+            placeholder="根据名称或账号搜索"
+            options={(selectOptions || []).map((d: any) => ({
+              value: d.id,
+              label: d.name,
+            }))}
+            onSearch={((e) => {
+              queryByKeywordSearch(e)
+            })}
+            filterOption={false}
+          />
+        </Form.Item>
+      </Form>
+    </Drawer>
+  );
+}

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

@@ -0,0 +1,22 @@
+import request from "../../../apiRequest/config"
+
+//根据角色分页查询绑定的账号
+export const pageBoundAccounts= (data?: any) => {
+    return request.post("/api/permission/accountRole/pageBoundAccounts.json", { ...data })
+}
+//按关键词查询账号信息
+export const queryByKeyword= (data?: any) => {
+    return request.post("/api/permission/account/queryByKeyword.json", { ...data })
+}
+//角色下绑定账号
+export const roleBoundAccounts= (data?: any) => {
+    return request.post("/api/permission/accountRole/roleBoundAccounts.json", { ...data })
+}
+//角色下解绑账号
+export const roleUnboundAccounts= (data?: any) => {
+    return request.post("/api/permission/accountRole/roleUnboundAccounts.json", { ...data })
+}
+//根据编码查询角色
+export const getRole= (data?: any) => {
+    return request.post("/api/permission/role/getRole.json", { ...data })
+}

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

@@ -0,0 +1,3 @@
+.basicInfoWrap {
+  padding: 0 24px
+}

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

@@ -0,0 +1,246 @@
+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 {
+  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({})
+  const [editAccountOpen, setEditAccountOpen] = useState(false);
+
+  const columns: any = [
+    {
+      title: '名称',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '账号',
+      dataIndex: 'account',
+      key: 'account',
+    },
+    {
+      title: '工号',
+      dataIndex: 'jobNumber',
+      key: 'jobNumber',
+    },
+    {
+      title: '手机号',
+      dataIndex: 'mobile',
+      key: 'mobile',
+    },
+    {
+      title: '邮箱',
+      dataIndex: 'email',
+      key: 'email',
+      copyable: true,
+    },
+    {
+      title: '是否企业管理员',
+      dataIndex: 'isAdmin',
+      key: 'isAdmin',
+      render: (cell: any) => {
+        if (cell) {
+          return '是'
+        } else {
+          return '否'
+        }
+      }
+    },
+    {
+      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: () => {
+              roleUnboundAccountsFunc(rowdata.id)
+            }
+          })
+
+        }}>解绑</a>
+      </Space>
+    },
+  ];
+
+  useEffect(() => {
+    initGetData('init', true)
+  }, [])
+
+  //初始化请求数据
+  const initGetData = (type: string, msgType: any) => {
+    let roleCode = getUrlParams('roleCode')
+    setRoleCode(roleCode)
+    if (roleCode) {
+      getRoleFunc({ roleCode })
+      execute({ "roleCode": roleCode })
+    }
+  }
+  const getRoleFunc = (data: any) => {
+    setRoleInfo({})
+    getRole({
+      ...data,
+    }).then((res: any) => {
+      setRoleInfo(res || {})
+    })
+  }
+  const roleUnboundAccountsFunc = (account: any) => {
+    roleUnboundAccounts({
+      "accountIds": [account],
+      "roleCode": roleCode
+    }).then((res: any) => {
+      message.success('解绑成功')
+      execute({ "roleCode": roleCode })
+    })
+  }
+
+  const readDataList = ({
+    innerPageNo,
+    innerPageSize,
+    ...otherOptions
+  }: any) => {
+    return pageBoundAccounts({
+      currentPage: innerPageNo,
+      pageSize: innerPageSize,
+      ...searchFormRef.current,
+      ...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 handleRoload = () => {
+    execute({ "roleCode": roleCode })
+  }
+
+  const getQueryBoundRolesFunc = async () => {
+    setEditAccountOpen(true)
+  }
+
+  const roleBoundAccountsFunc = ({ accountIds }: any) => {
+    return roleBoundAccounts({
+      "accountIds": accountIds,
+      "roleCode": roleCode
+    }).then((res: any) => {
+      message.success(`添加账号成功`)
+      execute({ "roleCode": roleCode })
+      setEditAccountOpen(false)
+    })
+  }
+  //搜索关键字
+  const queryByKeywordFunc = ({ keyword }: any) => {
+    return queryByKeyword({
+      keyword
+    })
+  }
+
+  const handleOnReset: any = async (values: any) => {
+    searchFormRef.current = { ...values }
+    execute({
+      innerPageNo: 1,
+      "roleCode": roleCode
+    })
+  }
+
+  const handleOnFinish: any = async (values: any) => {
+    searchFormRef.current = { ...values }
+    execute({ "roleCode": roleCode })
+  }
+  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>
+
+      <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
+          })
+        }}/>
+      <EditAccountDrawer
+        open={editAccountOpen} // 状态
+        editOpenStatus={setEditAccountOpen} //修改弹框显隐事件
+        roleBoundAccountsFunc={roleBoundAccountsFunc}
+        queryByKeywordFunc={queryByKeywordFunc} //搜索事件
+      ></EditAccountDrawer>
+
+    </PageContainer>
+  )
+};

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

@@ -226,7 +226,14 @@ export default function RoleInfo() {
         }}
       />
 
-      <Pagination  {...pagination} />
+      <Pagination  {...pagination} 
+        onChange={(innerPageNo: number, innerPageSize: number) => {
+          execute({
+            innerPageNo,
+            innerPageSize,
+            "roleCode": roleCode
+          })
+        }}/>
       <EditAccountDrawer
         open={editAccountOpen} // 状态
         editOpenStatus={setEditAccountOpen} //修改弹框显隐事件

package/src/index.tsx

@@ -12,7 +12,8 @@ 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 CpcRole from './components/universal-pages/cpcRole' //cpc 角色
+import CpcRoleInfo from './components/universal-pages/cpcRoleInfo' //cpc角色详情
 import { getUrlParams, downloadFile, timeFormatter } from './utils/index'
 export {
     LiosLayout,
@@ -34,5 +35,8 @@ export {
     hosts,
     getUrlParams,
     downloadFile,
-    timeFormatter
+    timeFormatter,
+    
+    CpcRole,
+    CpcRoleInfo
 }