cfel-base-components 0.0.16 → 0.0.18

package/demo/src/index.jsx

@@ -4,6 +4,8 @@ import './index.scss';
 import Layout from '../../src/components/layout';
 import Account from '../../src/components/account';
 import AccountInfo from '../../src/components/accountinfo';
+import Role from '../../src/components/role';
+import RoleInfo from '../../src/components/roleinfo';
 
 
 
@@ -32,7 +34,7 @@ const App = () => {
                 // pagination={pagination} //分页配置
             ></Account> */}
 
-            <AccountInfo
+            {/* <AccountInfo
                 accountInfo={accountInfo} //用户详情
                 timeFormatter={timeFormatter} //时间戳转换
                 dataList={dataList} //表格数据
@@ -46,8 +48,34 @@ const App = () => {
                 setEditAccountOpen={setEditAccountOpen}// 关闭弹框
                 rolelistRoleData={rolelistRoleData} //弹框总角色数据
                 roleCheckData={roleCheckData} //弹框当前选中
-            />
+            /> */}
+            {/* <Role 
+                // dataList={dataList} //表格数据
+                // columns={columns} //列
+                // isLoading={isLoading} //加载
+                // handleRoload={handleRoload} //分页
+                // handleOnReset={handleOnReset} //重置
+                // handleOnFinish={handleOnFinish} //搜索
+                // pagination={pagination} //分页配置
+            ></Role> */}
+
+            {/* <RoleInfo
+                accountInfo={accountInfo} //角色详情
+                timeFormatter={timeFormatter} //时间戳转换
+                dataList={dataList} //表格数据
+                columns={columns} //列
+                isLoading={isLoading} //加载
+                handleRoload={handleRoload} //分页
+                pagination={pagination} //分页配置
+                handleOnFinish={handleOnFinish} //搜索
+                handleOnReset={handleOnReset} //重置
+                queryByKeywordFunc={queryByKeywordFunc}
+                getQueryBoundRolesFunc={getQueryBoundRolesFunc} //绑定打开弹框
+                editAccountOpen={editAccountOpen}// 弹框状态
+                setEditAccountOpen={setEditAccountOpen}// 关闭弹框
+                roleBoundAccountsFunc={roleBoundAccountsFunc} //绑定/解绑事件
 
+            /> */}
         </>
     );
 }

package/package.json

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

package/src/components/account/index.tsx

@@ -1,23 +1,22 @@
 import React, { useEffect, useRef, useState } from 'react';
-import Pagecontainer from '../Pagecontainer';
+import PageContainer from '../PageContainer';
 import QueryFilter from '../QueryFilter';
 import ProTable from '../ProTable';
 import Pagination from '../Pagination';
 import {
   ProFormText,
 } from '@ant-design/pro-components';
-
 import "./index.scss"
 
 
 export interface AccountProps {
-  dataList:any;
-  columns:any;
-  isLoading:any;
-  handleRoload:()=>any;
-  pagination:any;
-  handleOnReset:(item:any)=>any;
-  handleOnFinish:(item:any)=>any;
+  dataList: any;
+  columns: any;
+  isLoading: any;
+  handleRoload: () => any;
+  pagination: any;
+  handleOnReset: (item: any) => any;
+  handleOnFinish: (item: any) => any;
 }
 
 export default function Account({
@@ -29,27 +28,27 @@ export default function Account({
   handleOnReset,
   handleOnFinish
 }: AccountProps) {
-  
+
   return (
-    <Pagecontainer>
-        <QueryFilter 
-          onReset={handleOnReset}
-          onFinish={handleOnFinish}
-        >
-            <ProFormText name="name" label="名称" />
-            <ProFormText name="account" label="账号" />
-        </QueryFilter>
-        <ProTable
-          headerTitle={"账号列表"}
-          dataSource={dataList}
-          loading={isLoading}
-          columns={columns}
-          rowKey="id"
-          options={{
-            reload: handleRoload
-          }}
-        />
-        <Pagination  {...pagination} />
-    </Pagecontainer>
+    <PageContainer>
+      <QueryFilter
+        onReset={handleOnReset}
+        onFinish={handleOnFinish}
+      >
+        <ProFormText name="name" label="名称" />
+        <ProFormText name="account" label="账号" />
+      </QueryFilter>
+      <ProTable
+        headerTitle={"账号列表"}
+        dataSource={dataList}
+        loading={isLoading}
+        columns={columns}
+        rowKey="id"
+        options={{
+          reload: handleRoload
+        }}
+      />
+      <Pagination  {...pagination} />
+    </PageContainer>
   )
 }

package/src/components/accountInfo/index.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useRef ,useState} from 'react';
-import Pagecontainer from '../Pagecontainer';
+import React, { useEffect, useRef, useState } from 'react';
+import Pagecontainer from '../PageContainer';
 import ProTable from '../ProTable';
 import Pagination from '../Pagination';
 
@@ -10,22 +10,22 @@ import EditAccountDrawer from './EditAccountDrawer/index'
 import "./index.scss"
 
 export interface AccountInfoProps {
-  accountInfo:any;
-  timeFormatter:(item:any)=>any;
-  dataList:any;
-  columns:any;
-  isLoading:any;
-  handleRoload:()=>any;
-  pagination:any;
-  isBoundRolesFunc:(type:any,item:any)=>any;
-  getQueryBoundRolesFunc:()=>any;
-  editAccountOpen:any
-  setEditAccountOpen:(item:any)=>any;
-  rolelistRoleData:any,
-  roleCheckData:any,
+  accountInfo: any;
+  timeFormatter: (item: any) => any;
+  dataList: any;
+  columns: any;
+  isLoading: any;
+  handleRoload: () => any;
+  pagination: any;
+  isBoundRolesFunc: (type: any, item: any) => any;
+  getQueryBoundRolesFunc: () => any;
+  editAccountOpen: any
+  setEditAccountOpen: (item: any) => any;
+  rolelistRoleData: any,
+  roleCheckData: any,
 }
 
-export default function AccountInfo ({
+export default function AccountInfo({
   accountInfo,//用户详情
   timeFormatter,//时间戳转换
   dataList,//表格数据
@@ -39,7 +39,7 @@ export default function AccountInfo ({
   setEditAccountOpen, //关闭弹框
   rolelistRoleData, //总角色数据
   roleCheckData, //当前选中
-  
+
 }: AccountInfoProps) {
 
   return (
@@ -92,6 +92,6 @@ export default function AccountInfo ({
       ></EditAccountDrawer>
     </Pagecontainer>
   )
-  
+
 }
 

package/src/components/role/index.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useRef } from 'react';
+import PageContainer from '../PageContainer';
+import QueryFilter from '../QueryFilter';
+import ProTable from '../ProTable';
+import Pagination from '../Pagination';
+import {
+  ProFormText,
+} from '@ant-design/pro-components';
+import "./index.scss"
+
+export interface RoleProps {
+  dataList: any;
+  columns: any;
+  isLoading: any;
+  handleRoload: () => any;
+  pagination: any;
+  handleOnReset: (item: any) => any;
+  handleOnFinish: (item: any) => any;
+}
+
+export default function Role({
+  dataList,
+  columns,
+  isLoading,
+  handleRoload,
+  pagination,
+  handleOnReset,
+  handleOnFinish
+}: RoleProps) {
+  return (
+    <PageContainer >
+      <QueryFilter
+        onReset={handleOnReset}
+        onFinish={handleOnFinish}
+      >
+        <ProFormText name="roleName" label="角色名称" />
+      </QueryFilter>
+
+      <ProTable
+        headerTitle={"角色列表"}
+        dataSource={dataList}
+        loading={isLoading}
+        columns={columns}
+        rowKey="id"
+        options={{
+          reload: handleRoload
+        }}
+      />
+      <Pagination  {...pagination} />
+
+    </PageContainer >
+  )
+};

package/src/components/roleInfo/EditAccountDrawer/index.tsx

@@ -0,0 +1,110 @@
+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()
+  }, [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/roleInfo/index.scss

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

package/src/components/roleInfo/index.tsx

@@ -0,0 +1,94 @@
+import React, { useEffect, useRef } from 'react';
+import PageContainer from '../PageContainer';
+import QueryFilter from '../QueryFilter';
+import ProTable from '../ProTable';
+import Pagination from '../Pagination';
+import {
+  ProFormText,
+} from '@ant-design/pro-components';
+import { Button, Divider, Modal, Descriptions, Space, } from 'antd';
+import EditAccountDrawer from './EditAccountDrawer/index'
+
+import "./index.scss"
+export interface RoleProps {
+  roleInfo: any;
+  timeFormatter: (item: any) => any;
+  handleOnReset: () => any;
+  handleOnFinish: () => any;
+  dataList: any;
+  columns: any;
+  isLoading: any;
+  handleRoload: () => any;
+  pagination: any;
+  getQueryBoundRolesFunc: () => any;
+  editAccountOpen: any
+  setEditAccountOpen: (item: any) => any;
+  roleBoundAccountsFunc: (item: any) => any;
+  queryByKeywordFunc: (item: any) => any;
+  
+  // rolelistRoleData: any,
+  // roleCheckData: any,
+}
+export default function RoleInfo({
+  roleInfo,
+  timeFormatter,
+  handleOnReset,
+  handleOnFinish,
+  dataList,
+  columns,
+  isLoading,
+  handleRoload,
+  pagination,
+  getQueryBoundRolesFunc,
+  editAccountOpen,
+  setEditAccountOpen,
+  roleBoundAccountsFunc,
+  queryByKeywordFunc
+}:RoleProps){
+  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} />
+      <EditAccountDrawer
+        open={editAccountOpen} // 状态
+        editOpenStatus={setEditAccountOpen} //修改弹框显隐事件
+        roleBoundAccountsFunc={roleBoundAccountsFunc}
+        queryByKeywordFunc={queryByKeywordFunc} //搜索事件
+      ></EditAccountDrawer>
+
+    </PageContainer>
+  )
+};

package/src/index.tsx

@@ -5,6 +5,9 @@ import ProTable from './components/ProTable'
 import Pagination from './components/Pagination'
 import Account from './components/account'
 import AccountInfo from './components/accountInfo'
+import Role from './components/role'
+import RoleInfo from './components/roleInfo'
+
 
 export {
     LiosLayout,
@@ -14,5 +17,7 @@ export {
     ProTable,
     Pagination,
     Account,
-    AccountInfo
+    AccountInfo,
+    Role,
+    RoleInfo
 }