cfel-base-components 0.0.11 → 0.0.13

package/README.md

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

package/demo/src/index.jsx

@@ -2,22 +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",
-                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/lib/index.js

@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var r="object"==typeof exports?t(require("react")):t(e.React);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(self,(e=>(()=>{"use strict";var t={787:t=>{t.exports=e}},r={};var o={};return function e(o){var f=r[o];if(void 0!==f)return f.exports;var p=r[o]={exports:{}};return t[o](p,p.exports,e),p.exports}(787),o.default})()));

package/lib/index.min.css

@@ -0,0 +1,2 @@
+body{margin:0}.lios-header{height:48px;background:white;z-index:1;box-shadow:1px 0px 5px #ccc;position:relative;display:flex;justify-content:flex-start;align-items:center}.lios-header .background{width:800px;height:100%;position:absolute;top:0;right:0;overflow:hidden}.lios-header .background .background-img{width:800px;position:absolute;top:-65px}.lios-header .background .background-mask{position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(to right, #fff, rgba(255,255,255,0))}.lios-header .lios-header-fill{flex:1}.lios-header .lios-logo{left:48px;top:0;width:255px;position:absolute;z-index:1;display:inline-flex;align-items:center}.lios-header .lios-logo .img{color:#1677ff;font-size:20px;line-height:48px;font-family:Lucida Calligraphy, cursive, serif, sans-serif;margin-right:12px}.lios-header .lios-logo .interval{color:rgba(0,0,0,0.1);width:1px;height:12px;background-color:rgba(0,0,0,0.1);margin:8px}.lios-header .lios-logo .app-list .app-list-current{font-size:12px;height:24px;line-height:24px;padding:0 12px;border-radius:6px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';cursor:pointer;transition:all 0.3s;color:rgba(0,0,0,0.88);font-weight:400}.lios-header .lios-logo .app-list .app-list-current:hover{background:rgba(0,0,0,0.1)}.lios-header .lios-header-actions{display:flex;justify-content:flex-start;align-items:center;height:100%;max-width:300px;z-index:2}.lios-header .lios-header-actions .actions-item{height:36px;border-radius:6px;transition:all .3s;cursor:pointer;margin:0 4px;padding:0 12px;display:flex;justify-content:center;align-items:center}.lios-header .lios-header-actions .actions-item:hover{background:rgba(255,255,255,0.15)}.lios-header .lios-header-user{height:40px;display:flex;justify-content:flex-start;align-items:center;z-index:2;transition:all .3s;padding:0 12px;margin:0 12px;border-radius:6px;cursor:pointer}.lios-header .lios-header-user:hover{background:rgba(255,255,255,0.15)}.lios-header .lios-header-user .author{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.3);margin-right:12px}.lios-header .lios-header-user .name{color:white}.lios-main{display:flex;height:100%}.lios-side{max-width:255px;height:calc(100vh - 48px);background:white;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding-top:12px}.lios-content{width:100%;height:calc(100vh - 48px);overflow-y:auto;padding:16px 16px 5px;display:flex;flex-direction:column}.lios-user-card{min-width:182px;max-width:262px}.lios-user-card .user-info{display:flex;margin-bottom:12px}.lios-user-card .user-info .author{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,0.3);margin-right:12px}.lios-user-card .user-info .user-info-right{flex:1}.lios-user-card .user-info .name{display:inline-block;margin-top:18px}.lios-user-card .user-info .role-list{font-size:12px;line-height:16px;margin-top:4px}.lios-user-card .user-info .role-list .role-item{background:rgba(204,204,204,0.55);padding:2px 8px;border-radius:8px;display:inline-block;margin-right:4px;margin-bottom:4px}.lios-user-card .lios-tenant{margin-bottom:12px}.lios-user-card .lios-tenant .tenant-label{font-size:12px;color:rgba(0,0,0,0.65)}.lios-user-card .lios-tenant .tenant-switch{display:flex}.lios-user-card .lios-tenant .tenant-switch .tenant-value{flex:1;font-size:14px;color:rgba(0,0,0,0.85)}.lios-user-card .lios-tenant .tenant-switch .tenant-icon{width:40px;text-align:center;color:rgba(0,0,0,0.45);display:flex;justify-content:center;align-items:center}.lios-user-card .lios-tenant .tenant-switch .tenant-icon:hover{cursor:pointer;color:rgba(0,0,0,0.85)}.lios-user-card .lios-logout{cursor:pointer;display:flex;justify-content:center;align-items:center;color:rgba(0,0,0,0.45);border-radius:4px;transition:background .3s;padding:4px}.lios-user-card .lios-logout:hover{background:rgba(0,0,0,0.08)}.lios-user-card .lios-logout .logout-icon{width:16px;height:16px;margin-right:8px}.app-list-other .product-list-item{display:flex;justify-content:flex-start;align-items:center;margin:8px 0;padding:6px 12px;cursor:pointer;border-radius:4px;transition:all .3s;color:rgba(0,0,0,0.65)}.app-list-other .product-list-item:hover{background:rgba(22,119,255,0.08);color:rgba(22,119,255,0.8)}.app-list-other .product-list-item img{width:32px;height:32px;margin-right:12px}.app-list-other .current-product{color:#1677FF !important}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cfel-base-components",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "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/.umi/core/helmet.ts

@@ -0,0 +1,10 @@
+// @ts-nocheck
+// This file is generated by Umi automatically
+// DO NOT CHANGE IT MANUALLY!
+import React from 'react';
+import { HelmetProvider } from '/Users/wujingang/Desktop/workspace/base-components/node_modules/@umijs/renderer-react';
+import { context } from './helmetContext';
+
+export const innerProvider = (container) => {
+  return React.createElement(HelmetProvider, { context }, container);
+}

package/src/.umi/core/helmetContext.ts

@@ -0,0 +1,4 @@
+// @ts-nocheck
+// This file is generated by Umi automatically
+// DO NOT CHANGE IT MANUALLY!
+export const context = {};

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/components/layout/index.scss

@@ -216,11 +216,27 @@ body {
             font-size: 12px;
             color: rgba(0, 0, 0, .65);
         }
-
-        .tenant-value {
-            font-size: 14px;
-            color: rgba(0, 0, 0, .85);
+        .tenant-switch{
+            display: flex;
+            .tenant-value {
+                flex: 1;
+                font-size: 14px;
+                color: rgba(0, 0, 0, .85);
+            }
+            .tenant-icon{
+                width: 40px;
+                text-align: center;
+                color: rgba(0, 0, 0, .45);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+            .tenant-icon:hover{
+                cursor: pointer;
+                color: rgba(0, 0, 0, .85);
+            }
         }
+        
 
     }
 

package/src/components/layout/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { Layout, Menu, MenuProps, Popover } from 'antd';
+import { SwapOutlined, } from '@ant-design/icons';
 import "./index.scss"
 
 export interface LiosLayoutlProps {
@@ -16,7 +17,8 @@ export interface LiosLayoutlProps {
     tenantName: string,
     role: any[]
   };
-  logoutUrl?: string
+  logoutUrl?: string,
+  switchTenantUrl?: string,
   defaultOpenKeys?: string[],
   productList?: any[],
 }
@@ -31,6 +33,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     actions,
     user,
     logoutUrl,
+    switchTenantUrl,
     defaultOpenKeys,
     productList
   } = props
@@ -66,7 +69,16 @@ export default function LiosLayout(props: LiosLayoutlProps) {
 
       {tenantName && <div className='lios-tenant'>
         <div className='tenant-label'>租户</div>
-        <div className='tenant-value'>{tenantName}</div>
+        <div className='tenant-switch'>
+          <div className='tenant-value'>{tenantName}</div>
+          {
+            switchTenantUrl && <div className='tenant-icon' onClick={() => {
+              location.href = switchTenantUrl;
+            }}>
+              <SwapOutlined />
+            </div>
+          }
+        </div>
       </div>}
 
       {logoutUrl && <div className='lios-logout' onClick={() => {