✨ [CTable] 表格提供默认列模板

Author: liyuan-meng

src/components/c-table/columnTpl/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import NumberTpl from './number';
+import TimeTpl from './time';
+import { isVoid } from '../util';
+import { NUMBER, TIME } from '../constant';
+
+const components = {
+  [NUMBER]: NumberTpl,
+  [TIME]: TimeTpl,
+};
+
+export default function ColumnTpl({ value, type, typeConfig = {} }) {
+  const Com = components[type];
+  if (Com) {
+    return <Com value={value} {...typeConfig} />;
+  }
+  return isVoid(value) ? '-' : value;
+}
+
+ColumnTpl.propTypes = {
+  numberConfig: PropTypes.object,
+  timeConfig: PropTypes.object,
+};
+
+ColumnTpl.defaultProps = {
+  numberConfig: {},
+};

src/components/c-table/columnTpl/number.js

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import { formatThousands, isVoid } from '../util';
+
+export default function NumberTpl({
+  value,
+  precision = 0,
+  isThousands = true,
+  prefix = '',
+  suffix = '',
+}) {
+  let number = value;
+  if (isVoid(number)) {
+    return '-';
+  }
+  if (precision > 0) {
+    number = Number(number).toFixed(precision);
+  }
+  if (isThousands) {
+    number = formatThousands(number);
+  }
+  return `${prefix || ''}${number}${suffix || ''}`;
+}
+
+NumberTpl.propTypes = {
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  precision: PropTypes.number, // 小数位数
+  isThousands: PropTypes.bool, // 是否使用千分位格式
+  prefix: PropTypes.string, // 前缀
+  suffix: PropTypes.string, // 后缀
+};
+
+NumberTpl.defaultProps = {
+  precision: 0,
+  isThousands: true,
+  prefix: '',
+  suffix: '',
+};

src/components/c-table/columnTpl/time.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { isVoid } from '../util';
+
+export default function TimeTpl({ value, format }) {
+  if (isVoid(value)) {
+    return '-';
+  }
+  if (format) {
+    return moment(value).format(format);
+  }
+  return `${value}`.replaceAll('/', '-');
+}
+
+TimeTpl.propTypes = {
+  value: PropTypes.string.isRequired,
+  format: PropTypes.string,
+};
+
+TimeTpl.defaultProps = {
+  format: '',
+};

src/components/c-table/columnTpl/timeRange.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { isVoid } from '../util';
+
+export default function TimeRangeTpl({ value, format }) {
+  if (isVoid(value)) {
+    return '-';
+  }
+  if (format) {
+    return (
+      <div>
+        <p>
+          起：
+          {moment(value).format(format)}
+        </p>
+        <p>
+          止：
+          {moment(value).format(format)}
+        </p>
+      </div>
+    );
+  }
+  return `${value}`.replaceAll('/', '-');
+}
+
+TimeRangeTpl.propTypes = {
+  value: PropTypes.string.isRequired,
+  format: PropTypes.string,
+};
+
+TimeRangeTpl.defaultProps = {
+  format: '',
+};

src/components/c-table/constant.js

@@ -5,3 +5,7 @@ export const tablePrefixCls = `${prefixCls}-table`;
 export const DRAG_SELECTOR = `.${tablePrefixCls}-row`;
 
 export const DRAG_ICON_SELECTOR = `.${tablePrefixCls}-drag-column`;
+
+export const NUMBER = 'NUMBER'; // 数字类型
+export const TIME = 'TIME'; // 时间类型
+export const TIME_RANGE = 'TIME_RANGE'; // 时间范围类型

src/components/c-table/demos/uniform_number.md

@@ -0,0 +1,49 @@
+---
+order: 1
+title: CTable
+desc: 默认表格
+---
+
+```jsx
+import React from 'react';
+import { CTable } from 'cloud-react';
+
+const data = [
+  { number: '1234455', name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: '12,222' },
+  { number: 122, name: 'ouid疲劳度3', createTime: '2021/12/13 15:47:33	', creator: 'jiaojiao.diao', num: '198' },
+  { number: 12243, name: '继续发送手机1', createTime: '2021/12/13 15:36:42', creator: 'nan.run', num: '1,232' },
+  { number: 2345, name: '继续发送手机2', createTime: '2021/12/13 11:14:40', creator: 'xiaotong.fan', num: '12,122,112' },
+  { number: 1231322, name: '继续发送手机3', createTime: '2021/12/13 11:03:05', creator: 'zhenxiao.guo', num: '1000,000' },
+];
+
+const columns = [
+  {
+    title: '客户数',
+    dataIndex: 'number',
+    width: 120,
+    type: 'NUMBER'
+  },
+  {
+    title: '金额',
+    dataIndex: 'number',
+    width: 130,
+    type: 'NUMBER',
+    typeConfig: {
+      prefix: '¥ ',
+      precision: 2,
+    }
+  },
+  { title: '人数', dataIndex: 'num', align: 'right', width: 120 },
+  { title: '创建人', dataIndex: 'creator', width: 130 }
+];
+
+export default function CTableDemo() {
+	return (
+        <CTable
+           style={{ height: 400 }}
+           columnData={columns}
+           ajaxData={{ totals: data.length, data }}
+        />
+	);
+}
+```

src/components/c-table/demos/uniform_time.md

@@ -0,0 +1,73 @@
+---
+order: 1
+title: CTable
+desc: 默认表格
+---
+
+```jsx
+import React from 'react';
+import { CTable } from 'cloud-react';
+
+const data = [
+  { number: '1234455', name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: '12,222' },
+  { number: 122, name: 'ouid疲劳度3', createTime: '2021/12/13 15:47:33	', creator: 'jiaojiao.diao', num: '198' },
+  { number: 12243, name: '继续发送手机1', createTime: '2021/12/13 15:36:42', creator: 'nan.run', num: '1,232' },
+  { number: 2345, name: '继续发送手机2', createTime: '2021/12/13 11:14:40', creator: 'xiaotong.fan', num: '12,122,112' },
+  { number: 1231322, name: '继续发送手机3', createTime: '2021/12/13 11:03:05', creator: 'zhenxiao.guo', num: '1000,000' },
+];
+
+const columns = [
+  {
+    title: '年月日时分秒',
+    dataIndex: 'createTime',
+    width: 190,
+    type: 'TIME',
+  },
+  {
+    title: '年月日',
+    dataIndex: 'createTime',
+    width: 130,
+    type: 'TIME',
+    typeConfig: {
+      format: 'YYYY-MM-DD',
+    }
+  },
+  {
+    title: '年月',
+    dataIndex: 'createTime',
+    width: 90,
+    type: 'TIME',
+    typeConfig: {
+      format: 'YYYY-MM',
+    }
+  },
+  {
+    title: '月日',
+    dataIndex: 'createTime',
+    width: 90,
+    type: 'TIME',
+    typeConfig: {
+      format: 'MM-DD',
+    }
+  },
+  {
+    title: '时分秒',
+    dataIndex: 'createTime',
+    width: 100,
+    type: 'TIME',
+    typeConfig: {
+      format: 'HH:MM:SS',
+    }
+  },
+];
+
+export default function CTableDemo() {
+	return (
+        <CTable
+           style={{ height: 400 }}
+           columnData={columns}
+           ajaxData={{ totals: data.length, data }}
+        />
+	);
+}
+```

src/components/c-table/index.js

@@ -17,7 +17,12 @@ import {
   debounce,
   hasCustomScroll,
 } from './util';
-import { DRAG_ICON_SELECTOR, DRAG_SELECTOR, tablePrefixCls } from './constant';
+import {
+  DRAG_ICON_SELECTOR,
+  DRAG_SELECTOR,
+  NUMBER,
+  tablePrefixCls,
+} from './constant';
 import getExpandableConfig from './js/expend';
 import ResizableTitle from './js/resizableTitle';
 import Pagination from '../pagination';
@@ -29,6 +34,7 @@ import './css/business.less';
 import Column from './js/column';
 import RowTooltip from './js/rowTooltip';
 import { defaultProps, propTypes } from './js/propType';
+import ColumnTpl from './columnTpl';
 
 class CTable extends Component {
   ref = createRef();
@@ -148,13 +154,19 @@ class CTable extends Component {
   };
 
   resolveColumn = (columnData) => {
-    return columnData.map((item) => ({ ...item, show: true }));
+    return columnData.map((item) => ({
+      render: (val, row) => <ColumnTpl value={val} row={row} {...item} />,
+      ...item,
+      show: true,
+      align: item.type === NUMBER ? 'right' : 'left',
+    }));
   };
 
   resolveOriginColumn = (columnData) => {
     return (
       (this.props.supportMemory && getConfig(this.props.tableId)) ||
       columnData.map((item) => ({
+        render: (val, row) => <ColumnTpl value={val} row={row} {...item} />,
         ...item,
         show: true,
       }))