Merge branch 'feature/BasicTable' into 'dev'

.umirc.js

@@ -72,6 +72,7 @@ export default {
       {
         title: '通用',
         children: [
+          'BasicTable',
           'BasicTools',
           'ImageSelect',
           'QuotaSelect',

packages/BasicTable/README.md

+# `@wisdom-components/BasicTable`
+
+> TODO: description
+
+## Usage
+
+```
+const basicTable = require('@wisdom-components/BasicTable');
+
+// TODO: DEMONSTRATE API
+```

packages/BasicTable/package.json

+{
+  "name": "@wisdom-components/basictable",
+  "version": "1.0.1",
+  "description": "> TODO: description",
+  "author": "tuqian <webtuqian@163.com>",
+  "homepage": "",
+  "license": "ISC",
+  "main": "lib/index.js",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "registry": "https://g.civnet.cn:4873/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://g.civnet.cn:8443/ReactWeb5/wisdom-components.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  }
+}

packages/BasicTable/src/BasicTable.md

+---
+title: BasicTable - 标准表格
+nav:
+  title: 组件
+  path: /components
+group:
+  path: /
+---
+
+# BasicTable 标准表格
+
+基础业务组件
+
+- 展示行列数据
+
+## 何时使用
+
+- 当有大量结构化的数据需要展现时；
+- 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。
+
+## 代码演示
+
+<code src="./demos/Basic.tsx">
+
+## API
+
+api 参考 Antd Table 组件 https://ant.design/components/table-cn/#API

packages/BasicTable/src/demos/Basic.tsx

+import React, { useEffect, useState } from 'react';
+import Empty from '@wisdom-components/empty';
+import BasicTable from '../index';
+import request from 'umi-request';
+
+const Demo = () => {
+  const [columns, setColumns] = useState([]);
+  const [dataSource, setDataSource] = useState([]);
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const fetchData = (params = {}) => {
+    request(`${baseUrl}/AcrossTable/GetEquipmentDataReport`, {
+      method: 'get',
+      params: {},
+    }).then(function (response) {
+      const data = response.data;
+      let column = data.map((item, index) => {
+        return {
+          title: `${item.DName + item.DType}(${item.Unit})`,
+          dataIndex: `name${index}`,
+          key: `name${index}`,
+        };
+      });
+      column.unshift({
+        title: '时间',
+        dataIndex: 'time',
+        key: 'time',
+      });
+      let dataSource = data[0].NameDate.map((item, index) => ({ key: index, time: item.Time }));
+      data.forEach((item, index) => {
+        item.NameDate.forEach((child) => {
+          dataSource.forEach((v) => {
+            if (child.Time === v.time) v[`name${index}`] = child.Value;
+          });
+        });
+      });
+      setColumns(column);
+      setDataSource(dataSource);
+    });
+  };
+
+  return (
+    <div style={{ height: '400px' }}>
+      {!!dataSource.length && (
+        <BasicTable dataSource={dataSource} columns={columns} scroll={{ y: 294 }} />
+      )}
+      {!dataSource.length && <Empty description={'暂无数据'} />}
+    </div>
+  );
+};
+
+export default Demo;
+
+const baseUrl = 'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api';

packages/BasicTable/src/index.js

+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Table, ConfigProvider } from 'antd';
+import './index.less';
+
+const BasicTable = (props) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('basic-table');
+
+  return <Table className={classNames(prefixCls)} {...props} bordered />;
+};
+
+BasicTable.defaultProps = {
+  columns: [],
+  dataSource: [],
+};
+
+BasicTable.propTypes = {
+  columns: PropTypes.array,
+  dataSource: PropTypes.array,
+};
+
+export default BasicTable;

packages/BasicTable/src/index.less

+@import (reference) '~antd/es/style/themes/default';
+@basic-table-prefix-cls: ~'@{ant-prefix}-basic-table';
+
+.@{basic-table-prefix-cls} {
+  height: 100%;
+
+  .ant-table-wrapper,
+  .ant-spin-nested-loading,
+  .ant-spin-container {
+    height: 100%;
+  }
+
+  .ant-table.ant-table-bordered {
+    height: calc(100% - 64px);
+  }
+
+  .ant-table-tbody > tr {
+    background: rgba(255, 255, 255, 0);
+  }
+
+  .ant-table-tbody > tr > td {
+    background: rgba(255, 255, 255, 0);
+  }
+
+  .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
+    background: rgba(255, 255, 255, 0);
+  }
+
+  .ant-table-thead > tr > th {
+    font-weight: 600;
+    background: white;
+    border-bottom: 2px solid #dbe7fb;
+  }
+
+  .ant-table-thead > tr > th,
+  .ant-table-tbody > tr > td,
+  .ant-table tfoot > tr > th,
+  .ant-table tfoot > tr > td {
+    padding: 8px 8px;
+    border-right: 1px solid #dbe7fb;
+  }
+
+  .ant-table-tbody > tr:nth-child(2n-1) {
+    background: #f6f9fe;
+  }
+
+  .ant-table-tbody > tr:hover {
+    background: #edf2ff;
+  }
+
+  .ant-table.ant-table-bordered
+    > .ant-table-container
+    > .ant-table-content
+    > table
+    > thead
+    > tr
+    > th,
+  .ant-table.ant-table-bordered
+    > .ant-table-container
+    > .ant-table-header
+    > table
+    > thead
+    > tr
+    > th,
+  .ant-table.ant-table-bordered > .ant-table-container > .ant-table-body > table > thead > tr > th,
+  .ant-table.ant-table-bordered
+    > .ant-table-container
+    > .ant-table-content
+    > table
+    > tbody
+    > tr
+    > td,
+  .ant-table.ant-table-bordered
+    > .ant-table-container
+    > .ant-table-header
+    > table
+    > tbody
+    > tr
+    > td,
+  .ant-table.ant-table-bordered > .ant-table-container > .ant-table-body > table > tbody > tr > td,
+  .ant-table.ant-table-bordered
+    > .ant-table-container
+    > .ant-table-content
+    > table
+    > tfoot
+    > tr
+    > th,
+  .ant-table.ant-table-bordered
+    > .ant-table-container
+    > .ant-table-header
+    > table
+    > tfoot
+    > tr
+    > th,
+  .ant-table.ant-table-bordered > .ant-table-container > .ant-table-body > table > tfoot > tr > th,
+  .ant-table.ant-table-bordered
+    > .ant-table-container
+    > .ant-table-content
+    > table
+    > tfoot
+    > tr
+    > td,
+  .ant-table.ant-table-bordered
+    > .ant-table-container
+    > .ant-table-header
+    > table
+    > tfoot
+    > tr
+    > td,
+  .ant-table.ant-table-bordered > .ant-table-container > .ant-table-body > table > tfoot > tr > td {
+    border-right: 1px solid #dbe7fb;
+  }
+
+  .ant-table.ant-table-bordered > .ant-table-container {
+    border: 1px solid #dbe7fb;
+    border-right: 0;
+    border-bottom: 0;
+  }
+
+  .ant-table-tbody > tr > td {
+    border-bottom: 1px solid #dbe7fb;
+  }
+}

packages/QuotaSelect/src/QuotaSelect.md

@@ -44,6 +44,7 @@ group:
 | treeProps | 已选指标树 props | object | { } |
 | onModalCancel | 点击模态框取消按钮的回调 | function(value){ } | - |
 | onModalOk | 模态框点击确定回调 | function(value){ } | - |
+| onModalClose | 模态框点击关闭回调 | function(value){ } | - |
 | onSearch | 搜索框输入事件的回调，会返回搜索框输入信息 | function(value){ } | - |
 | onRadioChange | 指标类型切换的回调 | function(value){ } | - |
 | onCancelSelect | 点击已选指标树的删除按钮的回调 | function(value){ } | - |

packages/QuotaSelect/src/demos/Basic.tsx

@@ -40,6 +40,10 @@ const Demo = () => {
     console.log('onModalOk');
   };
 
+  const onModalClose = () => {
+    console.log('onModalClose');
+  };
+
   const onModalCancel = () => {
     let newQuotaList = [...quotaList];
     newQuotaList.forEach((item) => {
@@ -159,6 +163,7 @@ const Demo = () => {
       }}
       onModalCancel={onModalCancel}
       onModalOk={onModalOk}
+      onModalClose={onModalClose}
       maximum={3}
       targetValue={'emphasis'}
       dataSource={quotaList}

packages/QuotaSelect/src/index.js

@@ -15,6 +15,7 @@ const QuotaSelect = ({
   cancelText,
   onModalOk,
   onModalCancel,
+  onModalClose,
   searchPrefix,
   placeholder,
   targetValue,
@@ -42,6 +43,7 @@ const QuotaSelect = ({
     if (e.target.innerHTML === cancelText) {
       onModalCancel && onModalCancel();
     } else {
+      onModalClose && onModalClose();
       setVisible(false);
     }
   };
@@ -162,6 +164,7 @@ QuotaSelect.defaultProps = {
   treeProps: {},
   onModalCancel: () => {},
   onModalOk: () => {},
+  onModalClose: () => {},
   onSearch: () => {},
   onRadioChange: () => {},
   onCancelSelect: () => {},
@@ -181,6 +184,7 @@ QuotaSelect.propTypes = {
   treeProps: PropTypes.object,
   onModalCancel: PropTypes.func,
   onModalOk: PropTypes.func,
+  onModalClose: PropTypes.func,
   onSearch: PropTypes.func,
   onRadioChange: PropTypes.func,
   onCancelSelect: PropTypes.func,