cfel-base-components 2.0.1 → 2.0.3

package/demo/src/index.jsx

@@ -6,7 +6,7 @@ import { SwapOutlined, } from '@ant-design/icons';
 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 RoleInfo from '../../src/components/universal-pages/roleInfo';
@@ -146,7 +146,9 @@ const App = () => {
             type:'img',
             content:'运营平台'
           }}
-        ></Layout>
+        >
+          <Account></Account>
+        </Layout>
     </PageContainer>
 }
 const container = document.getElementById('root');

package/package.json

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

package/src/components/layout/index.scss

@@ -57,8 +57,8 @@ body {
             line-height: 48px;
             font-family: Lucida Calligraphy, cursive, serif, sans-serif;
             margin-right: 12px;
-            width: 100px;
-            height: 33px;
+            height: 40px;
+            object-fit: cover;
         }
         .text{
             color: #1677ff;

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

@@ -0,0 +1,137 @@
+import React, { useEffect, useState } from 'react'
+import {
+    Button, Modal, Form, Input, Row,
+    Col, InputNumber, Switch, Select, Cascader, Divider
+} from 'antd';
+import { } from '../api'
+export default function index({
+    ModalOpen, //弹框状态
+    editOpenStatus, //关闭弹框
+    editingData, //编辑数据
+    actionFunc, //新增ecs事件
+}: any) {
+    const { TextArea } = Input;
+    const [form] = Form.useForm();
+
+    const [hypervisorValue, setHypervisorValue] = useState(null) // 厂商list
+    const [RAZValue, setRAZValue] = useState([]) // 可用区list
+
+    const formDom = [
+        { title: "名称", key: 'name', type: 'string', required: true },
+        { title: "手机号", key: 'mobile', type: 'mobileint', required: true },
+        { title: "邮箱", key: 'email', type: 'emailstring', 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 'emailstring':
+                dom = (<Form.Item
+                    label={title}
+                    name={key}
+                    rules={[
+                        { required: required, message: '请输入' },
+                        { pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, message: '请输入正确的邮箱' }
+                    ]}
+                >
+                    <Input placeholder="请输入" />
+                </Form.Item>)
+                break;
+            case 'mobileint':
+                dom = (<Form.Item
+                    label={title}
+                    name={key}
+                    rules={
+                        editingData?[{ required: required, message: '请输入' }]:[
+                        { required: required, message: '请输入' },
+                        { pattern: /1[0-9]{10}$/, message: '请输入正确的电话号码' }
+                    ]}
+                >
+                    <Input placeholder="请输入"
+                     disabled={editingData?true:false} />
+                </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.id = editingData.id
+            }
+            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 showCom(item)
+                        })
+                    }
+            </Form>
+        </Modal>
+    )
+}

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

@@ -0,0 +1,18 @@
+import request from "@/api/config"
+
+//分页查询账号
+export const accountPage= (data?: any) => {
+    return request.post("/api/permission/account/page.json", { ...data })
+}
+//指定租户下创建账号
+export const accountCreateAccount = (data?: any) => {
+    return request.post("/api/permission/account/createAccount.json", { ...data })
+}
+//指定租户下修改账号
+export const accountUpdateAccount = (data?: any) => {
+    return request.post("/api/permission/account/updateAccount.json", { ...data })
+}
+//指定租户下删除账号
+export const accountDeleteAccount = (data?: any) => {
+    return request.get("/api/permission/account/deleteAccount.json", { params:{...data} })
+}

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

@@ -0,0 +1,225 @@
+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 { ProFormText, } from '@ant-design/pro-components';
+import { Space, Button, message,Modal } from 'antd';
+import { get } from 'lodash';
+import { timeFormatter } from '../../../utils';
+import useTableHooks from "../../../hooks/useTableHooks"
+import {
+  accountPage, accountCreateAccount,
+  accountUpdateAccount, accountDeleteAccount
+} from "./api"
+import AddModal from './AddModal'
+import "./index.scss"
+
+export interface AccountProps {
+  historyAction: any;
+}
+
+export default function Account({
+  historyAction
+}: AccountProps) {
+  const searchFormRef: any = useRef()
+
+  const [ModalOpen, setModalOpen] = useState(false)
+  const [editingData, setEditingData] = useState(null);//编辑数据
+
+  useEffect(() => {
+    execute()
+  }, [])
+
+  const columns: any = [
+    {
+      title: '名称',
+      dataIndex: 'name',
+      key: 'name',
+      render: (text: any) => {
+        return <span>{text}</span>
+      }
+    },
+    {
+      title: '账号',
+      dataIndex: 'account',
+      key: 'account',
+    },
+    {
+      title: '工号',
+      dataIndex: 'jobNumber',
+      key: 'jobNumber',
+    },
+    {
+      title: '手机号',
+      dataIndex: 'mobile',
+      key: 'mobile',
+    },
+    {
+      title: '邮箱',
+      dataIndex: 'email',
+      key: 'email',
+      ellipsis: true,
+    },
+    {
+      title: '是否企业管理员',
+      dataIndex: 'isAdmin',
+      key: 'isAdmin',
+      render: (text: any, rowData: any) => {
+        if (rowData.isAdmin) {
+          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: '操作',
+      fixed: 'right',
+      width: 150,
+      render: (rowdata: any) => (
+
+        <Space>
+          <a onClick={() => {
+            setEditingData(rowdata)
+            setModalOpen(true)
+          }} >编辑</a>
+          <a
+            onClick={() => {
+              historyAction?.push({
+                pathname: `/account-info`,
+                search: `?id=${rowdata.id}`,
+              });
+            }}
+          >
+            配置
+          </a>
+          <a onClick={() => {
+            Modal.confirm({
+              title: "确认删除吗？",
+              content: '',
+              onOk: () => {
+                DeleteFunc(rowdata?.id)
+              }
+            })
+          }} >删除</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 accountPage({
+      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' ? accountCreateAccount : accountUpdateAccount)({ ...data }).then((res) => {
+      message.success(`${type == 'add' ? '新增' : '更新'}成功`)
+      setModalOpen(false)
+      setEditingData(null)
+      execute()
+    })
+  }
+  const DeleteFunc = (id:any)=>{
+    accountDeleteAccount({
+        id,
+    }).then((res: any) => {
+        message.success('删除成功')
+        execute()
+      })
+}
+  return (
+    <PageContainer>
+      <QueryFilter
+        onReset={handleOnReset}
+        onFinish={handleOnFinish}
+      >
+        <ProFormText name="name" label="名称" />
+        <ProFormText name="account" label="账号" />
+      </QueryFilter>
+      <ProTable
+        toolBarRender={() => {
+          return [
+            <Button
+              type="primary"
+              onClick={() => {
+                setModalOpen(true)
+              }}
+            >
+              新增账号
+            </Button>,
+          ];
+        }}
+        headerTitle={"账号列表"}
+        dataSource={dataList}
+        loading={isLoading}
+        columns={columns}
+        rowKey="id"
+        options={{
+          reload: handleRoload
+        }}
+      />
+      <AddModal
+        ModalOpen={ModalOpen}
+        editOpenStatus={setModalOpenFunc} //修改状态事件
+        editingData={editingData} //当前数据
+        actionFunc={actionFunc}//事件
+      />
+      <Pagination  {...pagination} />
+    </PageContainer>
+  )
+}

package/src/index.tsx

@@ -11,6 +11,7 @@ import RoleInfo from './components/universal-pages/roleInfo'
 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 { getUrlParams, downloadFile, timeFormatter } from './utils/index'
 export {
@@ -26,6 +27,8 @@ export {
     Role,
     RoleInfo,
 
+    CpcAccount,
+
     request,
     iotRequest,
     hosts,