Browse Source

fe-11 看板组件

master
Chunxian Zhang 2 years ago
parent
commit
9581e2332c
2 changed files with 55 additions and 0 deletions
  1. +24
    -0
      lazy-timer-fe/src/pages/Charts/Kanban.jsx
  2. +31
    -0
      lazy-timer-fe/src/pages/Charts/Orders.jsx

+ 24
- 0
lazy-timer-fe/src/pages/Charts/Kanban.jsx View File

@ -0,0 +1,24 @@
import React from 'react';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-kanban';
import { kanbanData, kanbanGrid } from '../data/dummy';
import { Header } from '../components';
const Kanban = () => (
<div className="m-2 md:m-10 mt-24 p-2 md:p-10 bg-white rounded-3xl">
<Header category="App" title="Kanban" />
<KanbanComponent
id="kanban"
keyField="Status"
dataSource={kanbanData}
cardSettings={{ contentField: 'Summary', headerField: 'Id' }}
>
<ColumnsDirective>
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
{kanbanGrid.map((item, index) => <ColumnDirective key={index} {...item} />)}
</ColumnsDirective>
</KanbanComponent>
</div>
);
export default Kanban;

+ 31
- 0
lazy-timer-fe/src/pages/Charts/Orders.jsx View File

@ -0,0 +1,31 @@
import React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective, Resize, Sort, ContextMenu, Filter, Page, ExcelExport, PdfExport, Edit, Inject } from '@syncfusion/ej2-react-grids';
import { ordersData, contextMenuItems, ordersGrid } from '../data/dummy';
import { Header } from '../components';
const Orders = () => {
const editing = { allowDeleting: true, allowEditing: true };
return (
<div className="m-2 md:m-10 mt-24 p-2 md:p-10 bg-white rounded-3xl">
<Header category="Page" title="Orders" />
<GridComponent
id="gridcomp"
dataSource={ordersData}
allowPaging
allowSorting
allowExcelExport
allowPdfExport
contextMenuItems={contextMenuItems}
editSettings={editing}
>
<ColumnsDirective>
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
{ordersGrid.map((item, index) => <ColumnDirective key={index} {...item} />)}
</ColumnsDirective>
<Inject services={[Resize, Sort, ContextMenu, Filter, Page, ExcelExport, Edit, PdfExport]} />
</GridComponent>
</div>
);
};
export default Orders;

Loading…
Cancel
Save