cfel-base-components 0.0.12 → 0.0.14

package/README.md

@@ -0,0 +1,2 @@
+<!-- npm run dev
+npm pubilsh -->

package/demo/src/index.jsx

@@ -2,23 +2,49 @@ import React from "react"
 import { createRoot } from 'react-dom/client';
 import './index.scss';
 import Layout from '../../src/components/layout';
+import Account from '../../src/components/account';
+import AccountInfo from '../../src/components/accountinfo';
+
+
+
 
 const App = () => {
     return (
-        < Layout appName="123123" productCode="lios-iot-wifi"
-            user={{
-                name: "\u5434\u6668\u61CB\uFF08\u592A\u4E00\uFF09",
-                avatar: "https:\/\/static-legacy.dingtalk.com\/media\/lQLPM5AkqOufBy7NAyDNAyCwJZ592czMOC4EeIgNJAAGAA_800_800.png",
-                tenantName: "\u8FDC\u822A\u8DE8\u56FD\u63A7\u80A1\u96C6\u56E2",
-                switchTenantUrl: "https:\/\/cfel-sso-daily.chengfengerlai.com\/tenant\/switch?fakeAccountId=1676424765496406018\u0026redirect=http:\/\/lios-iot-obee-daily.chengfengerlai.com\/sso\/login?back=http%3A%2F%2Flios-iot-obee-daily.chengfengerlai.com%2Fweb",
-                // role:["超级管理员","超管","子管理员","超级管理员","超级管理员123","子管理员","超级管理员","超级管理员123","子管理员","超级管理员","超级管理员123超级管理员123超级管理员123超级管理员123","子管理员"]
-                // role:["超级管理员"]
-            }}
-        >
-
-        </Layout >
+        // < Layout appName="123123" productCode="lios-iot-wifi"
+        //     user={{
+        //         name: "\u5434\u6668\u61CB\uFF08\u592A\u4E00\uFF09",
+        //         avatar: "https:\/\/static-legacy.dingtalk.com\/media\/lQLPM5AkqOufBy7NAyDNAyCwJZ592czMOC4EeIgNJAAGAA_800_800.png",
+        //         tenantName: "\u8FDC\u822A\u8DE8\u56FD\u63A7\u80A1\u96C6\u56E2",
+        //         role:["超级管理员","超管","子管理员","超级管理员","超级管理员123","子管理员","超级管理员","超级管理员123","子管理员","超级管理员","超级管理员123超级管理员123超级管理员123超级管理员123","子管理员"]
+        //         // role:["超级管理员"]
+        //     }}
+        // >
+        // </Layout >
+        <>
+            
+            {/* <Account 
+                // dataList={dataList} //表格数据
+                // columns={columns} //列
+                // isLoading={isLoading} //加载
+                // handleRoload={handleRoload} //分页
+                // handleOnReset={handleOnReset} //重置
+                // handleOnFinish={handleOnFinish} //搜索
+                // pagination={pagination} //分页配置
+            ></Account> */}
 
+            <AccountInfo
+                accountInfo={accountInfo} //用户详情
+                timeFormatter={timeFormatter} //时间戳转换
+                dataList={dataList} //表格数据
+                columns={columns} //列
+                isLoading={isLoading} //加载
+                handleRoload={handleRoload} //分页
+                pagination={pagination} //分页配置
+                isBoundRolesFunc={isBoundRolesFunc} //绑定/解绑事件
+                getQueryBoundRolesFunc={getQueryBoundRolesFunc} //绑定打开弹框
+            />
 
+        </>
     );
 }
 const container = document.getElementById('root');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cfel-base-components",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "cfel-base-components",
   "main": "/src/index.tsx",
   "types": "src/index.d.ts",
@@ -40,7 +40,9 @@
     "webpack-dev-server": "^4.15.1",
     "webpack-merge": "^5.9.0"
   },
-  "peerDependencies":{
+  "peerDependencies": {
+    "@ant-design/icons": "^5.1.4",
+    "@ant-design/pro-components": "^2.6.12",
     "antd": "^5.5.2"
   }
-}
+}

package/src/components/Pagecontainer/index.scss

@@ -0,0 +1,13 @@
+.page-container {
+    background: white;
+    border-radius: 8px;
+    flex: 1;
+    position: relative;
+  }
+  .page-footEmpower {
+    text-align: center;
+    color: #b6b6b6;
+    font-size: 10px;
+    padding: 4px 0px;
+  }
+  

package/src/components/Pagecontainer/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import "./index.scss"
+
+
+export default function PageContainer({
+  className,
+  children,
+  ...restFileds
+}: any) {
+  return (
+    <>
+      <div
+        className={`page-container ${className}`}
+        {...restFileds}
+      >
+        {children}
+      </div>
+      <div className="page-footEmpower">
+        ©{new Date().getFullYear() || ''} 橙蜂而来{' '}
+      </div>
+    </>)
+}

package/src/components/Pagination/index.scss

@@ -0,0 +1,4 @@
+.pagination {
+    text-align: right;
+    padding-right: 24px;
+ }

package/src/components/Pagination/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Pagination, PaginationProps } from 'antd';
+import "./index.scss"
+
+export default function PaginationComponent (props: PaginationProps){
+  const { className } = props
+  return (
+    <div
+      className={`pagination ${className}`}
+    >
+      <Pagination
+        showQuickJumper
+        showSizeChanger
+        showTotal={(total) => `共 ${total} 条`}
+        {...props}
+      />
+    </div>
+  )
+
+}

package/src/components/ProTable/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {
+  ProTable,
+  ProTableProps
+} from '@ant-design/pro-components';
+import "./index.scss"
+
+export default function ProTableComponent (props: ProTableProps<any,any>){
+  const { className } = props
+  return (
+    <ProTable
+      className={`protable ${className}`}
+      search={false}
+      pagination={false}
+      scroll={{
+        x: 'max-content'
+      }}
+      {...props}
+    />
+  )
+
+}

package/src/components/QueryFilter/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {
+  QueryFilter,
+  QueryFilterProps
+} from '@ant-design/pro-components';
+import "./index.scss"
+
+
+
+export default function PaginationComponent (props: QueryFilterProps<any>){
+  const { className } = props
+  return (
+    <QueryFilter
+      className={`queryfilter ${className}`}
+      layout="vertical"
+      {...props}
+    />
+  )
+
+}

package/src/components/account/index.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useRef, useState } 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 AccountProps {
+  dataList:any;
+  columns:any;
+  isLoading:any;
+  handleRoload:()=>any;
+  pagination:any;
+  handleOnReset:(item:any)=>any;
+  handleOnFinish:(item:any)=>any;
+}
+
+export default function Account({
+  dataList,
+  columns,
+  isLoading,
+  handleRoload,
+  pagination,
+  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>
+  )
+}

package/src/components/accountInfo/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/accountInfo/index.scss

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

package/src/components/accountInfo/index.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useRef ,useState} from 'react';
+import Pagecontainer from '../Pagecontainer';
+import ProTable from '../ProTable';
+import Pagination from '../Pagination';
+
+import { Modal, Button, Divider, Descriptions, Space, message, Avatar } from 'antd';
+import { UserOutlined } from '@ant-design/icons';
+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;
+  
+}
+
+export default function AccountInfo ({
+  accountInfo,
+  timeFormatter,
+  dataList,
+  columns,
+  isLoading,
+  handleRoload,
+  pagination,
+  isBoundRolesFunc,
+  getQueryBoundRolesFunc
+}: AccountInfoProps) {
+  const [rolelistRoleData, setRolelistRoleData]: any = useState([]); // 角色总数据
+  const [roleCheckData, setRoleCheckData]: any = useState([]); //当前选中的角色list
+
+  const [editAccountOpen, setEditAccountOpen] = useState(false);
+
+  return (
+    <Pagecontainer>
+      <Divider orientation="left">
+        <Avatar
+          style={{ backgroundColor: '#1677ff', marginRight: '8px' }}
+          draggable={false}
+          icon={<UserOutlined />}
+          src={!!accountInfo.avatar ? accountInfo.avatar : undefined}
+        />
+        {accountInfo?.name || ''}
+      </Divider>
+      <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>
+
+      <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} //修改弹框显隐事件
+        rolelistRoleData={rolelistRoleData} //总角色
+        roleCheckData={roleCheckData} //当前角色选中数据
+        isBoundRolesFunc={isBoundRolesFunc}
+      ></EditAccountDrawer>
+    </Pagecontainer>
+  )
+  
+}
+

package/src/components/button/index.scss

@@ -1,3 +0,0 @@
-.aaa-button {
-    color: red;
-}

package/src/index.tsx

@@ -1,8 +1,18 @@
 import LiosLayout, { LiosLayoutlProps } from './components/layout'
-
-
+import Pagecontainer from './components/Pagecontainer'
+import QueryFilter from './components/QueryFilter'
+import ProTable from './components/ProTable'
+import Pagination from './components/Pagination'
+import Account from './components/account'
+import AccountInfo from './components/accountInfo'
 
 export {
     LiosLayout,
-    LiosLayoutlProps
+    LiosLayoutlProps,
+    Pagecontainer,
+    QueryFilter,
+    ProTable,
+    Pagination,
+    Account,
+    AccountInfo
 }