|
@@ -1,146 +1,57 @@
|
|
|
import React, { useRef } from 'react';
|
|
|
-import { PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
|
|
|
-import { Button, Tag, Space, Menu, Dropdown } from 'antd';
|
|
|
-import ProTable, { ProColumns, TableDropdown, ActionType } from '@ant-design/pro-table';
|
|
|
+import ProTable, { ActionType } from '@ant-design/pro-table';
|
|
|
import request from 'umi-request';
|
|
|
|
|
|
-const columns: ProColumns[] = [
|
|
|
- {
|
|
|
- dataIndex: 'index',
|
|
|
- valueType: 'indexBorder',
|
|
|
- width: 48,
|
|
|
- },
|
|
|
- {
|
|
|
- title: '标题',
|
|
|
- dataIndex: 'title',
|
|
|
- copyable: true,
|
|
|
- ellipsis: true,
|
|
|
- tip: '标题过长会自动收缩',
|
|
|
- formItemProps: {
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: '此项为必填项',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- width: '30%',
|
|
|
- search: false,
|
|
|
- },
|
|
|
- {
|
|
|
- title: '状态',
|
|
|
- dataIndex: 'state',
|
|
|
- initialValue: 'open',
|
|
|
- filters: true,
|
|
|
- valueType: 'select',
|
|
|
- valueEnum: {
|
|
|
- all: { text: '全部', status: 'Default' },
|
|
|
- open: {
|
|
|
- text: '未解决',
|
|
|
- status: 'Error',
|
|
|
- },
|
|
|
- closed: {
|
|
|
- text: '已解决',
|
|
|
- status: 'Success',
|
|
|
- },
|
|
|
- processing: {
|
|
|
- text: '解决中',
|
|
|
- status: 'Processing',
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- title: '标签',
|
|
|
- dataIndex: 'labels',
|
|
|
- renderFormItem: (_, { defaultRender }) => {
|
|
|
- return defaultRender(_);
|
|
|
- },
|
|
|
- render: (_, record) => (
|
|
|
- <Space>
|
|
|
- {record.labels.map(({ name, color }) => (
|
|
|
- <Tag color={color} key={name}>
|
|
|
- {name}
|
|
|
- </Tag>
|
|
|
- ))}
|
|
|
- </Space>
|
|
|
- ),
|
|
|
- },
|
|
|
- {
|
|
|
- title: '创建时间',
|
|
|
- key: 'created_at',
|
|
|
- dataIndex: 'created_at',
|
|
|
- valueType: 'date',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '操作',
|
|
|
- valueType: 'option',
|
|
|
- render: (text, record, _, action) => [
|
|
|
- <a
|
|
|
- key="editable"
|
|
|
- onClick={() => {
|
|
|
- action.startEditable?.(record.id);
|
|
|
- }}
|
|
|
- >
|
|
|
- 编辑
|
|
|
- </a>,
|
|
|
- <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
|
|
|
- 查看
|
|
|
- </a>,
|
|
|
- <TableDropdown
|
|
|
- key="actionGroup"
|
|
|
- onSelect={() => action.reload()}
|
|
|
- menus={[
|
|
|
- { key: 'copy', name: '复制' },
|
|
|
- { key: 'delete', name: '删除' },
|
|
|
- ]}
|
|
|
- />,
|
|
|
- ],
|
|
|
- },
|
|
|
-];
|
|
|
+export interface DataTable {
|
|
|
+ toolBarRender?: object; // 表格操作栏
|
|
|
+ url?: boolean; // 表格请求地址
|
|
|
+ columns?: object; // 表格列表显示配置
|
|
|
+ rowKey?: string; // 表格key值
|
|
|
+ headerTitle?: string // 表格标题
|
|
|
+ tableAlertOptionRender?: () => {};// 表格对选操作
|
|
|
+ tableAlertRender?: () => {}; // 自定义批量操作工具栏左侧信息区域
|
|
|
+ rowSelection?: object; // 表格选择配置
|
|
|
+ search?: object; // 搜索配置
|
|
|
+ requestProcess?: ()=>{}, // 请求前参数处理 用于处理向时间间隔上传时参数重复问题
|
|
|
+ onRow?: ()=>{}, // 内容行操作
|
|
|
+ onHeaderRow?: ()=>{}, // 标题行操作
|
|
|
+}
|
|
|
|
|
|
-const menu = (
|
|
|
- <Menu>
|
|
|
- <Menu.Item key="1">1st item</Menu.Item>
|
|
|
- <Menu.Item key="2">2nd item</Menu.Item>
|
|
|
- <Menu.Item key="3">3rd item</Menu.Item>
|
|
|
- </Menu>
|
|
|
-);
|
|
|
-
|
|
|
-export default (props) => {
|
|
|
+const DataTable: React.FC<DataTable> = (props) => {
|
|
|
const actionRef = useRef<ActionType>();
|
|
|
|
|
|
return (
|
|
|
<ProTable
|
|
|
columns={
|
|
|
- //默认配置列都不出现在搜索中
|
|
|
+ // 默认配置列都不出现在搜索中
|
|
|
+ // v5中不再支持设置search为true,所以用searchbool代替
|
|
|
props.columns.map((v) => {
|
|
|
- if(!v.search){
|
|
|
+ if(!v.searchbool){
|
|
|
v.search = false;
|
|
|
- }
|
|
|
+ };
|
|
|
return v
|
|
|
})
|
|
|
}
|
|
|
actionRef={actionRef}
|
|
|
- request={async (params = {}) =>
|
|
|
- {
|
|
|
- params.pageNo = params.current;
|
|
|
- delete params.current;
|
|
|
- const msg = await request(props.url, {
|
|
|
- params,
|
|
|
- });
|
|
|
- if(msg.error.length > 0){
|
|
|
- return {
|
|
|
- success: false,
|
|
|
- };
|
|
|
- }else{
|
|
|
- return {
|
|
|
- data: msg.data.list,
|
|
|
- success: true,
|
|
|
- total: msg.data.totalCount,
|
|
|
- };
|
|
|
+ request={async (params = {}) =>{
|
|
|
+ params.pageNo = params.current;
|
|
|
+ delete params.current;
|
|
|
+ const msg = await request(props.url, {
|
|
|
+ params: props.requestProcess?props.requestProcess(params):params,
|
|
|
+ });
|
|
|
+ if(msg.error.length > 0){
|
|
|
+ return {
|
|
|
+ success: false,
|
|
|
+ };
|
|
|
+ }else{
|
|
|
+ return {
|
|
|
+ data: msg.data.list,
|
|
|
+ success: true,
|
|
|
+ total: msg.data.totalCount,
|
|
|
+ };
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
editable={{
|
|
|
type: 'multiple',
|
|
|
}}
|
|
@@ -149,22 +60,22 @@ export default (props) => {
|
|
|
filterType: 'query',
|
|
|
labelWidth: 'auto',
|
|
|
defaultCollapsed: false,
|
|
|
+ ...props.search,
|
|
|
}}
|
|
|
pagination={{
|
|
|
pageSize: 10,
|
|
|
}}
|
|
|
- dateFormatter="string"
|
|
|
- headerTitle="高级表格"
|
|
|
- toolBarRender={() => [
|
|
|
- <Button key="button" icon={<PlusOutlined />} type="primary">
|
|
|
- 新建
|
|
|
- </Button>,
|
|
|
- <Dropdown key="menu" overlay={menu}>
|
|
|
- <Button>
|
|
|
- <EllipsisOutlined />
|
|
|
- </Button>
|
|
|
- </Dropdown>,
|
|
|
- ]}
|
|
|
+ scroll={{ x: 1300 }}
|
|
|
+ dateFormatter="string" // 时间转换格式
|
|
|
+ headerTitle={props.headerTitle || '未知列表'}
|
|
|
+ toolBarRender={() => props.toolBarRender || false}
|
|
|
+ rowSelection={props.rowSelection || false}
|
|
|
+ tableAlertRender={props.tableAlertRender || false}
|
|
|
+ tableAlertOptionRender={props.tableAlertOptionRender || false}
|
|
|
+ onRow={props.onRow}
|
|
|
+ onHeaderRow={props.onHeaderRow}
|
|
|
/>
|
|
|
);
|
|
|
};
|
|
|
+
|
|
|
+export default DataTable;
|