feat(component-deploy): 实现组件部署列表及新增实例功能
parent
82ecfe4cf2
commit
ececda16a7
@ -0,0 +1,9 @@
|
||||
import axios from 'axios';
|
||||
|
||||
// 公共路径
|
||||
const urlPrefix = '/api/v1/bpms-workbench';
|
||||
|
||||
// 部署列表
|
||||
export function getDeployList(params) {
|
||||
return axios.get(`${urlPrefix}/componentDeploy/list`, { params });
|
||||
}
|
||||
@ -0,0 +1,280 @@
|
||||
import React, { useState, useRef, useEffect, useContext, useCallback } from 'react';
|
||||
import { Button, Table, Input, Select, Form, FormInstance, Switch, DatePicker } from '@arco-design/web-react';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const EditableContext = React.createContext<{ getForm?: () => FormInstance }>({});
|
||||
|
||||
interface EditableTableProps {
|
||||
columns: ColumnProps[];
|
||||
data: any[];
|
||||
onDataChange?: (data: any[]) => void;
|
||||
showAddButton?: boolean;
|
||||
addButtonText?: string;
|
||||
onAdd?: () => void;
|
||||
showDeleteButton?: boolean;
|
||||
deleteButtonText?: string;
|
||||
onDelete?: (key: string) => void;
|
||||
// Table组件的其他配置属性
|
||||
tableProps?: any;
|
||||
// 添加空数据的配置
|
||||
emptyItem?: any;
|
||||
}
|
||||
|
||||
interface ColumnProps {
|
||||
title: string;
|
||||
dataIndex: string;
|
||||
editable?: boolean;
|
||||
render?: (text: any, record: any, index: number) => React.ReactNode;
|
||||
// 用于指定编辑时使用的组件类型
|
||||
editComponent?: 'input' | 'select' | 'switch' | 'date' | 'custom';
|
||||
// 用于select组件的选项
|
||||
options?: { label: string; value: any }[];
|
||||
// 用于自定义渲染编辑组件
|
||||
renderEdit?: (props: EditComponentProps) => React.ReactNode;
|
||||
|
||||
// 其他列配置属性
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
interface EditComponentProps {
|
||||
value: any;
|
||||
onChange: (value: any) => void;
|
||||
rowData: any;
|
||||
column: ColumnProps;
|
||||
}
|
||||
|
||||
interface EditableRowProps {
|
||||
children: React.ReactNode;
|
||||
record: any;
|
||||
className: string;
|
||||
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
interface EditableCellProps {
|
||||
children: React.ReactNode;
|
||||
className: string;
|
||||
rowData: any;
|
||||
column: ColumnProps;
|
||||
onHandleSave: (row: any) => void;
|
||||
}
|
||||
|
||||
function EditableRow(props: EditableRowProps) {
|
||||
const { children, record, className, ...rest } = props;
|
||||
const refForm = useRef<FormInstance | null>(null);
|
||||
|
||||
const getForm = () => refForm.current;
|
||||
|
||||
return (
|
||||
<EditableContext.Provider
|
||||
value={{
|
||||
getForm
|
||||
}}
|
||||
>
|
||||
<Form
|
||||
style={{ display: 'table-row' }}
|
||||
ref={refForm}
|
||||
wrapper="tr"
|
||||
wrapperProps={rest}
|
||||
className={`${className} editable-row`}
|
||||
>
|
||||
{children}
|
||||
</Form>
|
||||
</EditableContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
function EditableCell(props: EditableCellProps) {
|
||||
const { children, className, rowData, column, onHandleSave } = props;
|
||||
const { getForm } = useContext(EditableContext);
|
||||
|
||||
const cellValueChangeHandler = (value: any) => {
|
||||
const values = {
|
||||
[column.dataIndex]: value
|
||||
};
|
||||
onHandleSave && onHandleSave({ ...rowData, ...values });
|
||||
};
|
||||
|
||||
// 渲染编辑组件
|
||||
const renderEditComponent = () => {
|
||||
// 如果有自定义渲染函数，使用它
|
||||
if (column.renderEdit) {
|
||||
return column.renderEdit({
|
||||
value: rowData[column.dataIndex],
|
||||
onChange: cellValueChangeHandler,
|
||||
rowData,
|
||||
column
|
||||
});
|
||||
}
|
||||
|
||||
// 根据editComponent类型渲染不同的组件
|
||||
switch (column.editComponent) {
|
||||
case 'select':
|
||||
return (
|
||||
<Select
|
||||
defaultValue={rowData[column.dataIndex]}
|
||||
options={column.options || []}
|
||||
onChange={cellValueChangeHandler}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
);
|
||||
case 'switch':
|
||||
return (
|
||||
<Switch
|
||||
checked={rowData[column.dataIndex]}
|
||||
onChange={cellValueChangeHandler}
|
||||
/>
|
||||
);
|
||||
case 'date':
|
||||
return (
|
||||
<DatePicker
|
||||
defaultValue={rowData[column.dataIndex]}
|
||||
onChange={cellValueChangeHandler}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
);
|
||||
case 'custom':
|
||||
// 自定义组件需要通过renderEdit提供
|
||||
return null;
|
||||
case 'input':
|
||||
default:
|
||||
return (
|
||||
<Input
|
||||
defaultValue={rowData[column.dataIndex]}
|
||||
onChange={(value) => cellValueChangeHandler(value)}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// 如果列是可编辑的，直接渲染编辑组件
|
||||
if (column.editable) {
|
||||
return (
|
||||
<div>
|
||||
<FormItem
|
||||
style={{ marginBottom: 0 }}
|
||||
labelCol={{ span: 0 }}
|
||||
wrapperCol={{ span: 24 }}
|
||||
initialValue={rowData[column.dataIndex]}
|
||||
field={column.dataIndex}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
{renderEditComponent()}
|
||||
</FormItem>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 非编辑状态直接显示文本
|
||||
return (
|
||||
<div className={className}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const EditableTable: React.FC<EditableTableProps> = ({
|
||||
columns,
|
||||
data,
|
||||
onDataChange,
|
||||
showAddButton = true,
|
||||
addButtonText = 'Add',
|
||||
onAdd,
|
||||
showDeleteButton = true,
|
||||
deleteButtonText = 'Delete',
|
||||
onDelete,
|
||||
tableProps = {},
|
||||
emptyItem = {}
|
||||
}) => {
|
||||
const [tableData, setTableData] = useState<any[]>(data);
|
||||
|
||||
useEffect(() => {
|
||||
setTableData(data);
|
||||
}, [data]);
|
||||
|
||||
const handleSave = (row: any) => {
|
||||
const newData = [...tableData];
|
||||
const index = newData.findIndex((item) => row.key === item.key);
|
||||
if (index !== -1) {
|
||||
newData.splice(index, 1, { ...newData[index], ...row });
|
||||
setTableData(newData);
|
||||
onDataChange && onDataChange(newData);
|
||||
}
|
||||
};
|
||||
|
||||
const removeRow = (key: string) => {
|
||||
const newData = tableData.filter((item) => item.key !== key);
|
||||
setTableData(newData);
|
||||
onDataChange && onDataChange(newData);
|
||||
onDelete && onDelete(key);
|
||||
};
|
||||
|
||||
const addRow = () => {
|
||||
if (onAdd) {
|
||||
onAdd();
|
||||
}
|
||||
else {
|
||||
// 添加一条空数据
|
||||
const newKey = `${Date.now()}`;
|
||||
const newRow = {
|
||||
key: newKey,
|
||||
...emptyItem
|
||||
};
|
||||
const newData = [...tableData, newRow];
|
||||
setTableData(newData);
|
||||
onDataChange && onDataChange(newData);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理列配置，添加删除按钮
|
||||
const processedColumns = [...columns];
|
||||
if (showDeleteButton && !columns.some(col => col.dataIndex === 'op')) {
|
||||
processedColumns.push({
|
||||
title: 'Operation',
|
||||
dataIndex: 'op',
|
||||
render: (_: any, record: any) => (
|
||||
<Button onClick={() => removeRow(record.key)} type="primary" status="danger">
|
||||
{deleteButtonText}
|
||||
</Button>
|
||||
)
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{showAddButton && (
|
||||
<Button
|
||||
style={{ marginBottom: 10 }}
|
||||
type="primary"
|
||||
onClick={addRow}
|
||||
>
|
||||
{addButtonText}
|
||||
</Button>
|
||||
)}
|
||||
<Table
|
||||
data={tableData}
|
||||
components={{
|
||||
body: {
|
||||
row: EditableRow,
|
||||
cell: EditableCell
|
||||
}
|
||||
}}
|
||||
columns={processedColumns.map((column) =>
|
||||
column.editable
|
||||
? {
|
||||
...column,
|
||||
onCell: () => ({
|
||||
onHandleSave: handleSave
|
||||
})
|
||||
}
|
||||
: column
|
||||
)}
|
||||
className="table-demo-editable-cell"
|
||||
{...tableProps}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditableTable;
|
||||
@ -1,227 +1,113 @@
|
||||
import React from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Collapse, Space, Tag, Button, Table, TableColumnProps } from '@arco-design/web-react';
|
||||
import styles from './style/collapseList.module.less';
|
||||
import { IconEye } from '@arco-design/web-react/icon';
|
||||
import ListNode from '@/pages/componentDevelopment/componentDeployment/listNode';
|
||||
import AddModal from '@/pages/componentDevelopment/componentDeployment/addModal';
|
||||
import { getDeployList } from '@/api/componentDeploy';
|
||||
import { runStatusConstant, runStatusDic } from '@/const/isdp/componentDeploy';
|
||||
|
||||
const CollapseItem = Collapse.Item;
|
||||
|
||||
const CollapseList = () => {
|
||||
const [collapses, setCollapses] = useState([]);
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
const headerNode = () => {
|
||||
return (
|
||||
<div className={styles['header-node']}>
|
||||
<Space size={7} style={{ marginRight: 50 }}>
|
||||
<img src="https://picsum.photos/200/300"
|
||||
style={{ width: 50, height: 50, borderRadius: 6, overflow: 'hidden' }} />
|
||||
<div>小车零件中心点识别</div>
|
||||
</Space>
|
||||
const getList = async () => {
|
||||
const params = {
|
||||
current: 1,
|
||||
size: 10
|
||||
};
|
||||
const res: any = await getDeployList(params);
|
||||
if (res.code === 200) setCollapses(res.data.records);
|
||||
};
|
||||
|
||||
<Space size={10}>
|
||||
<Tag>视觉AI组件</Tag>
|
||||
<Tag>X86_64</Tag>
|
||||
<Tag color={'green'}>启用中</Tag>
|
||||
<div className={styles['flex-box']}>
|
||||
<img src={'/icons/countIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
|
||||
<span style={{ color: '#A2A2AB' }}>4</span>
|
||||
</div>
|
||||
</Space>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
useEffect(() => {
|
||||
getList();
|
||||
}, []);
|
||||
|
||||
const extraNode = () => {
|
||||
return (
|
||||
<div className={styles['extra-node']}>
|
||||
<Space size={20}>
|
||||
<div className={styles['flex-box']}>
|
||||
<img src={'/icons/compileIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
|
||||
<span style={{ color: '#A2A2AB' }}>未编译</span>
|
||||
</div>
|
||||
<div className={styles['flex-box']}>
|
||||
<img src={'/icons/recompileIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
|
||||
<span style={{ color: '#A2A2AB' }}>重新编译</span>
|
||||
</div>
|
||||
<div className={styles['flex-box']}>
|
||||
<img src={'/icons/addIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
|
||||
<span style={{ color: '#A2A2AB' }}>新增实例</span>
|
||||
</div>
|
||||
<div className={styles['flex-box']}>
|
||||
<img src={'/icons/removedIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
|
||||
<span style={{ color: '#A2A2AB' }}>下架组件</span>
|
||||
</div>
|
||||
<div className={styles['flex-box']}>
|
||||
<img src={'/icons/moreIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
|
||||
<span style={{ color: '#A2A2AB' }}>更多操作</span>
|
||||
</div>
|
||||
</Space>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const headerNode = (item) => {
|
||||
const getRunStatus = () => {
|
||||
return runStatusDic.find((v) => v.value === runStatusConstant[item.runStatus]) || {
|
||||
color: 'gray',
|
||||
label: '未知'
|
||||
};
|
||||
};
|
||||
|
||||
const extraNode1 = () => {
|
||||
return (
|
||||
<div className={styles['extra-node']}>
|
||||
<Space size={20}>
|
||||
<div className={styles['flex-box']}>
|
||||
<img src={'/icons/compiledIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
|
||||
<span style={{ color: '#40BF6D' }}>已编译</span>
|
||||
</div>
|
||||
<div className={styles['flex-box']}>
|
||||
<img src={'/icons/recompileIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
|
||||
<span style={{ color: '#A2A2AB' }}>重新编译</span>
|
||||
</div>
|
||||
<div className={styles['flex-box']}>
|
||||
<img src={'/icons/addIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
|
||||
<span style={{ color: '#A2A2AB' }}>新增实例</span>
|
||||
</div>
|
||||
<div className={styles['flex-box']}>
|
||||
<img src={'/icons/removedIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
|
||||
<span style={{ color: '#A2A2AB' }}>下架组件</span>
|
||||
</div>
|
||||
<div className={styles['flex-box']}>
|
||||
<img src={'/icons/moreIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
|
||||
<span style={{ color: '#A2A2AB' }}>更多操作</span>
|
||||
</div>
|
||||
</Space>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div className={styles['header-node']}>
|
||||
<Space size={7} style={{ marginRight: 50 }}>
|
||||
<img src="https://picsum.photos/200/300"
|
||||
style={{ width: 50, height: 50, borderRadius: 6, overflow: 'hidden' }} />
|
||||
<div>{item.name}</div>
|
||||
</Space>
|
||||
|
||||
const columns: TableColumnProps[] = [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: 'key',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '组件标识',
|
||||
dataIndex: 'name',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '实例名称',
|
||||
dataIndex: 'salary',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '运行类型',
|
||||
dataIndex: 'address',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '运行状态',
|
||||
dataIndex: 'email',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'email',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: '',
|
||||
align: 'center',
|
||||
render: (col, record, index) => (
|
||||
<div className={styles['table-handle-box']}>
|
||||
<Space size={20}>
|
||||
<Button type="text">查看配置</Button>
|
||||
<Button type="text">环境配置</Button>
|
||||
<Button type="text">运行日志</Button>
|
||||
<Button type="text">实例配置</Button>
|
||||
<Button type="text"
|
||||
icon={<img
|
||||
src={'/icons/editIcon.png'}
|
||||
style={{ width: 16, height: 16, marginRight: 5 }} />}
|
||||
>编辑</Button>
|
||||
<Button type="text"
|
||||
icon={<img
|
||||
src={'/icons/powerUpIcon.png'}
|
||||
style={{ width: 16, height: 16, marginRight: 5 }} />}
|
||||
>启用</Button>
|
||||
<Button type="text"
|
||||
icon={<img
|
||||
src={'/icons/deleteIcon.png'}
|
||||
style={{ width: 16, height: 16, marginRight: 5 }} />}
|
||||
>删除</Button>
|
||||
<Space size={10}>
|
||||
<Tag>{item.componentClassify}</Tag>
|
||||
<Tag>{item.arches}</Tag>
|
||||
<Tag color={getRunStatus().color}>{getRunStatus().label}</Tag>
|
||||
<div className={styles['flex-box']}>
|
||||
<img src={'/icons/countIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
|
||||
<span style={{ color: '#A2A2AB' }}>{item.instanceCount}</span>
|
||||
</div>
|
||||
</Space>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
];
|
||||
const data = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'Jane Doe',
|
||||
salary: 23000,
|
||||
address: '32 Park Road, London',
|
||||
email: 'jane.doe@example.com'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'Alisa Ross',
|
||||
salary: 25000,
|
||||
address: '35 Park Road, London',
|
||||
email: 'alisa.ross@example.com'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'Kevin Sandra',
|
||||
salary: 22000,
|
||||
address: '31 Park Road, London',
|
||||
email: 'kevin.sandra@example.com'
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
name: 'Ed Hellen',
|
||||
salary: 17000,
|
||||
address: '42 Park Road, London',
|
||||
email: 'ed.hellen@example.com'
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
name: 'William Smith',
|
||||
salary: 27000,
|
||||
address: '62 Park Road, London',
|
||||
email: 'william.smith@example.com'
|
||||
}
|
||||
];
|
||||
);
|
||||
};
|
||||
|
||||
const listNode = () => {
|
||||
return (
|
||||
<Table pagination={false} border={false} columns={columns} data={data} />
|
||||
);
|
||||
};
|
||||
const extraNode = () => {
|
||||
return (
|
||||
<div className={styles['extra-node']}>
|
||||
<Space size={20}>
|
||||
{/*<div className={styles['flex-box']}>*/}
|
||||
{/* <img src={'/icons/compileIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />*/}
|
||||
{/* <span style={{ color: '#A2A2AB' }}>未编译</span>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className={styles['flex-box']}>*/}
|
||||
{/* <img src={'/icons/recompileIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />*/}
|
||||
{/* <span style={{ color: '#A2A2AB' }}>重新编译</span>*/}
|
||||
{/*</div>*/}
|
||||
<div className={styles['flex-box']} onClick={() => setVisible(true)}>
|
||||
<img src={'/icons/addIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
|
||||
<span style={{ color: '#A2A2AB' }}>新增实例</span>
|
||||
</div>
|
||||
<div className={styles['flex-box']}>
|
||||
<img src={'/icons/removedIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
|
||||
<span style={{ color: '#A2A2AB' }}>下架组件</span>
|
||||
</div>
|
||||
<div className={styles['flex-box']}>
|
||||
<img src={'/icons/moreIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
|
||||
<span style={{ color: '#A2A2AB' }}>更多操作</span>
|
||||
</div>
|
||||
</Space>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const CollapseList = () => {
|
||||
return (
|
||||
<div className={styles['collapse-list']}>
|
||||
<Collapse
|
||||
expandIconPosition={'right'}
|
||||
bordered={false}
|
||||
>
|
||||
<CollapseItem
|
||||
header={headerNode()}
|
||||
name="1"
|
||||
extra={extraNode()}
|
||||
<>
|
||||
<div className={styles['collapse-list']}>
|
||||
<Collapse
|
||||
expandIconPosition={'right'}
|
||||
bordered={false}
|
||||
>
|
||||
{listNode()}
|
||||
</CollapseItem>
|
||||
|
||||
<CollapseItem
|
||||
header={headerNode()}
|
||||
name="2"
|
||||
extra={extraNode1()}>
|
||||
{listNode()}
|
||||
</CollapseItem>
|
||||
{collapses.map((item, index) => (
|
||||
<CollapseItem
|
||||
key={item.identifier}
|
||||
header={headerNode(item)}
|
||||
name="1"
|
||||
extra={extraNode()}
|
||||
>
|
||||
<ListNode />
|
||||
</CollapseItem>
|
||||
))}
|
||||
</Collapse>
|
||||
</div>
|
||||
|
||||
<CollapseItem
|
||||
header={headerNode()}
|
||||
name="3"
|
||||
extra={extraNode()}>
|
||||
{listNode()}
|
||||
</CollapseItem>
|
||||
</Collapse>
|
||||
</div>
|
||||
<AddModal
|
||||
visible={visible}
|
||||
setVisible={setVisible}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -0,0 +1,112 @@
|
||||
import React from "react";
|
||||
import { Button, Space, Table, TableColumnProps } from '@arco-design/web-react';
|
||||
import styles from '@/pages/componentDevelopment/componentDeployment/style/collapseList.module.less';
|
||||
|
||||
const ListNode = () => {
|
||||
|
||||
|
||||
const columns: TableColumnProps[] = [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: 'key',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '组件标识',
|
||||
dataIndex: 'name',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '实例名称',
|
||||
dataIndex: 'salary',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '运行类型',
|
||||
dataIndex: 'address',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '运行状态',
|
||||
dataIndex: 'email',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'email',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: '',
|
||||
align: 'center',
|
||||
render: (col, record, index) => (
|
||||
<div className={styles['table-handle-box']}>
|
||||
<Space size={20}>
|
||||
<Button type="text">查看配置</Button>
|
||||
<Button type="text">环境配置</Button>
|
||||
<Button type="text">运行日志</Button>
|
||||
<Button type="text">实例配置</Button>
|
||||
<Button type="text"
|
||||
icon={<img
|
||||
src={'/icons/editIcon.png'}
|
||||
style={{ width: 16, height: 16, marginRight: 5 }} />}
|
||||
>编辑</Button>
|
||||
<Button type="text"
|
||||
icon={<img
|
||||
src={'/icons/powerUpIcon.png'}
|
||||
style={{ width: 16, height: 16, marginRight: 5 }} />}
|
||||
>启用</Button>
|
||||
<Button type="text"
|
||||
icon={<img
|
||||
src={'/icons/deleteIcon.png'}
|
||||
style={{ width: 16, height: 16, marginRight: 5 }} />}
|
||||
>删除</Button>
|
||||
</Space>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
];
|
||||
const data = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'Jane Doe',
|
||||
salary: 23000,
|
||||
address: '32 Park Road, London',
|
||||
email: 'jane.doe@example.com'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'Alisa Ross',
|
||||
salary: 25000,
|
||||
address: '35 Park Road, London',
|
||||
email: 'alisa.ross@example.com'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'Kevin Sandra',
|
||||
salary: 22000,
|
||||
address: '31 Park Road, London',
|
||||
email: 'kevin.sandra@example.com'
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
name: 'Ed Hellen',
|
||||
salary: 17000,
|
||||
address: '42 Park Road, London',
|
||||
email: 'ed.hellen@example.com'
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
name: 'William Smith',
|
||||
salary: 27000,
|
||||
address: '62 Park Road, London',
|
||||
email: 'william.smith@example.com'
|
||||
}
|
||||
];
|
||||
return (
|
||||
<Table pagination={false} border={false} columns={columns} data={data} />
|
||||
)
|
||||
}
|
||||
|
||||
export default ListNode;
|
||||
Loading…
Reference in New Issue