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;
|
||||||
@ -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