th-table v0.2.22

Th-Table

demo

import React, { useRef, useState, useEffect } from "react";
import { DatePicker, Input, Menu, Modal, Button, Dropdown, Descriptions, Select, Space, Table, message, Tabs, Popconfirm, Checkbox, Card, Form } from "antd";
import { UserOutlined, DownOutlined, DeleteOutlined } from "@ant-design/icons";
import _ from "lodash";
import "./list.less";
import constantsAJAX from "@services/chain-state/constants";
import storageAJAX from "@services/storage";
import { formatterCurrency, formatterCurrencyStr, formatterSize, formatterSizeFromMB } from "@utils/format";
import { ThTable } from "@/components/ThTable";
import queryDB from "@services/queryDB";
import moment from "moment";

const { Option } = Select;
const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const Main = () => {
	const props = {
		border: true,
		size: "middle",
		pagesize: 5,
		filterBar: [
			{
				label: "ARR状态",
				cloumn: "status2",
				type: "select",
				defaultValue: 0,
				arr: [
					{ value: 1, label: "进行中" },
					{ value: 2, label: "已完成" },
					{ value: 3, label: "开始中" },
					{ value: 4, label: "进行中2" }
				]
			},
			{
				label: "状态",
				cloumn: "status",
				type: "select",
				defaultValue: 0,
				dicId: 1
			},
			{
				label: "Timestamp",
				cloumn: "timestamp",
				type: "datetime",
				props: {
					showTime: true
				}
			},
			{
				label: "Block Height",
				cloumn: "blockHeight",
				type: "numberRange",
				props: {
					keyboard: true
				}
			}
		],
		titleBar: {
			title: "表格标题",
			filter: [
				{
					label: "状态",
					cloumn: "status",
					type: "select",
					defaultValue: 0,
					dicId: 1
				},
				{
					label: "Block Height",
					cloumn: "blockHeight",
					type: "numberRange",
					props: {
						keyboard: true
					}
				}
			],
			btns: [
				{
					label: "AJAX请求",
					type: "ajax",
					key: "2",
					props: {
						type: "default",
						onClick: () => {
							alert("nnn");
						}
					}
				},
				{
					label: "",
					type: "add",
					key: "1"
				}
			]
		},
		btnBar: {
			float: "left",
			btns: [
				{
					label: "AJAX请求",
					type: "ajax",
					key: "2",
					props: {
						type: "default",
						onClick: () => {
							alert("333");
						}
					}
				},
				{
					label: "",
					type: "add",
					key: "1"
				}
			]
		},
		ajax: {
			list: {
				params: {
					tableName: "block_info"
				},
				autoRefresh: false,
				method: queryDB.list
			},
			detail: {
				params: {
					tableName: "block_info"
				},
				method: queryDB.detail
			},
			create: {
				params: {
					tableName: "block_info"
				},
				method: queryDB.list
			},
			update: {
				params: {
					tableName: "block_info"
				},
				method: queryDB.list
			},
			del: {
				params: {
					tableName: "block_info"
				},
				method: queryDB.del
			}
		},
		table: {
			columns: [
				{
					title: "blockHeight",
					dataIndex: "id",
					key: "id",
					sorter: true
				},
				{
					title: "hash",
					dataIndex: "hash",
					key: "hash",
					width: "15%",
					textWrap: "word-break",
					ellipsis: true
				},
				{
					title: "parentHash",
					dataIndex: "parentHash",
					key: "parentHash",
					width: "15%",
					textWrap: "word-break",
					ellipsis: true
				},
				// {
				// 	title: "stateRoot",
				// 	dataIndex: "stateRoot",
				// 	key: "stateRoot",
				// 	width: "15%",
				// 	textWrap: "word-break",
				// 	ellipsis: true
				// },
				// {
				// 	title: "extrinsicsRoot",
				// 	dataIndex: "extrinsicsRoot",
				// 	key: "extrinsicsRoot",
				// 	width: "15%",
				// 	textWrap: "word-break",
				// 	ellipsis: true
				// },
				{
					title: "timestamp",
					dataIndex: "timestamp",
					key: "timestamp",
					sorter: true
				}
			],
			actions: {
				props: {
					title: "操作",
					key: "operation",
					fixed: "right",
					width: 220
				},
				btns: [
					{
						title: "",
						showType: "detail"
					},
					{
						title: "",
						showType: "edit"
					},
					{
						title: "",
						showType: "del"
					},
					{
						title: "禁用",
						showType: "btn",
						props: {
							type: "primary",
							size: "small"
						},
						onClick: record => {
							alert(record.id);
						},
						isShow: record => {
							return record.id == 143606;
						}
					},
					{
						title: "启用",
						showType: "btn",
						props: {
							type: "default",
							size: "small"
						},
						onClick: record => {
							alert(record.id);
						},
						isShow: record => {
							return record.id != 143606;
						}
					},
					{
						title: <UserOutlined />,
						showType: "icon-btn",
						onClick: record => {
							alert(record.id);
						}
					},
					{
						title: "",
						showType: "switch",
						onClick: (record, refresh) => {
							alert(record.id);
							refresh();
						},
						defaultChecked: record => {
							return record.id == 143608;
						},
						props: {
							checkedChildren: "开启",
							unCheckedChildren: "关闭"
						}
					}
				],
				dropdown: [
					{
						label: "删除",
						showType: "del"
					},
					{
						label: "编辑",
						showType: "edit"
					},
					{
						label: "详情",
						showType: "detail"
					},
					{
						label: "测试",
						showType: "btn",
						onClick: record => {
							alert(record.id);
						},
						icon: <UserOutlined />
					}
				]
			}
		},
		create: {
			titleCreate: "添加记录",
			titleEdit: "修改记录",
			formProps: {
				labelAlign: "right"
			},
			columns: [
				{
					formItemProps: {
						label: "blockHeight",
						name: "blockHeight",
						rules: [
							{
								required: true,
								message: "Please input blockHeight!"
							}
						]
					},
					showType: "text",
					inputProps: {
						showCount: true
					}
				},
				{
					formItemProps: {
						label: "hash",
						name: "hash",
						rules: [
							{
								required: true,
								message: "Please input hash!"
							}
						]
					},
					showType: "password",
					inputProps: {
						showCount: true
					}
				},
				{
					formItemProps: {
						label: "parentHash",
						name: "parentHash",
						rules: [
							{
								required: true,
								message: "Please input parentHash!"
							}
						]
					},
					showType: "text",
					inputProps: {
						showCount: true
					}
				}
			]
		},
		detail: {
			title: "查看详情",
			width: "90%",
			columns: [
				{
					title: "blockHeight",
					dataIndex: "blockHeight",
					key: "blockHeight",
					sorter: true
				},
				{
					title: "hash",
					dataIndex: "hash",
					key: "hash",
					width: "15%",
					textWrap: "word-break",
					ellipsis: true
				},
				{
					title: "parentHash",
					dataIndex: "parentHash",
					key: "parentHash",
					width: "15%",
					textWrap: "word-break",
					ellipsis: true
				},
				// {
				// 	title: "stateRoot",
				// 	dataIndex: "stateRoot",
				// 	key: "stateRoot",
				// 	width: "15%",
				// 	textWrap: "word-break",
				// 	ellipsis: true
				// },
				// {
				// 	title: "extrinsicsRoot",
				// 	dataIndex: "extrinsicsRoot",
				// 	key: "extrinsicsRoot",
				// 	width: "15%",
				// 	textWrap: "word-break",
				// 	ellipsis: true
				// },
				{
					title: "timestamp",
					dataIndex: "timestamp",
					key: "timestamp",
					sorter: true
				}
			]
		},
		batchAction: [
			{
				label: "",
				type: "del",
				key: "1"
			},
			{
				label: "AJAX请求",
				type: "ajax",
				key: "2",
				props: {
					type: "default"
				},
				onClick: (items, refresh) => {
					alert("select count:" + items.length);
					refresh();
				}
			}
		]
	};
	let refresh = () => {
		alert("开始刷新了");
		if (props.refresh) {
			props.refresh();
		}
	};

	return (
		<div>
			<ThTable props={props} />
			<Button type="primary" onClick={refresh}>
				刷新列表
			</Button>
		</div>
	);
};

function isEqual(prevProps, nextProps) {
	return _.isEqual(prevProps.data, nextProps.data);
}

export default React.memo(Main, isEqual);