feat(component): 实现组件开发流程的新建组件，接口设计，组件编辑
- 新增组件接口设计功能，支持新增和编辑接口 - 实现组件基本信息的增删改查功能 - 添加组件状态、发布状态、公开状态的管理 - 支持组件删除功能，增加确认提示 - 实现组件编辑时的数据回显和表单重置 - 新增API接口设计弹窗，支持参数配置 - 添加数据类型字典和组件类型映射 - 实现组件列表的分页和筛选功能 - 增加工具函数：对象类型判断和深拷贝方法master
parent
c986114e75
commit
2d3bb0f7f3
@ -0,0 +1,14 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
// 公共路径
|
||||||
|
const urlPrefix = '/api/v1/bpms-workbench';
|
||||||
|
|
||||||
|
// 获取组件设计
|
||||||
|
export function getComponentDesign(componentBaseId) {
|
||||||
|
return axios.get(`${urlPrefix}/componentDevelopProcess/design?componentBaseId=${componentBaseId}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新组件设计
|
||||||
|
export function updateComponentDesign(params) {
|
||||||
|
return axios.post(`${urlPrefix}/componentDevelopProcess/design`, params);
|
||||||
|
}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
export const globalOption = {
|
||||||
|
border: false,
|
||||||
|
align: 'left',
|
||||||
|
menuHeaderAlign: 'left',
|
||||||
|
size: 'mini',
|
||||||
|
refreshBtn: false,
|
||||||
|
filterBtn: false,
|
||||||
|
columnBtn: false,
|
||||||
|
searchShowBtn: false,
|
||||||
|
// labelPosition: "left"
|
||||||
|
};
|
||||||
|
export const TrimReg = /^[^\s]+$/;
|
||||||
|
export const patternTrim = { pattern: TrimReg, message: '不能输入空格' };
|
||||||
@ -0,0 +1,176 @@
|
|||||||
|
import { globalOption, patternTrim } from '@/const/globalOption';
|
||||||
|
import { runTypeDic, runStatusDic, runStatusConstant } from '@/const/isdp/componentDeploy';
|
||||||
|
export const runStatusConstant2 = runStatusConstant;
|
||||||
|
export const componentTestOption = {
|
||||||
|
...globalOption,
|
||||||
|
height: '400',
|
||||||
|
calcHeight: 30,
|
||||||
|
tip: false,
|
||||||
|
searchShow: false,
|
||||||
|
selection: false,
|
||||||
|
dialogClickModal: false,
|
||||||
|
header: false,
|
||||||
|
delBtn: true,
|
||||||
|
viewBtn: true,
|
||||||
|
editBtn: false,
|
||||||
|
dialogWidth: '55%',
|
||||||
|
menuWidth: 230,
|
||||||
|
saveBtn: false,
|
||||||
|
cancelBtn: false,
|
||||||
|
menu: false,
|
||||||
|
emptyBtn: false,
|
||||||
|
submitBtn: false,
|
||||||
|
menuPosition: 'right',
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '用例名称',
|
||||||
|
prop: 'testCaseName',
|
||||||
|
type: 'select',
|
||||||
|
allowCreate: true,
|
||||||
|
filterable: true,
|
||||||
|
placeholder: '请输入或选择测试用例',
|
||||||
|
rules: [{ required: true, message: '用例名称不能为空' }, { max: 20, message: '用例名称最长为20个字符' }, patternTrim],
|
||||||
|
dicData: [
|
||||||
|
{
|
||||||
|
label: '通过用例',
|
||||||
|
value: '通过用例',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '失败用例',
|
||||||
|
value: '失败用例',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '参数有误',
|
||||||
|
value: '参数有误',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '数据为空',
|
||||||
|
value: '数据为空',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '缺少参数',
|
||||||
|
value: '缺少参数',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '记录不存在',
|
||||||
|
value: '记录不存在',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
span: 12,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'none',
|
||||||
|
display: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '输入参数',
|
||||||
|
prop: 'expectDataIns',
|
||||||
|
type: 'dynamic',
|
||||||
|
span: 24,
|
||||||
|
children: {
|
||||||
|
height: 250,
|
||||||
|
addBtn: false,
|
||||||
|
delBtn: false,
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '名称',
|
||||||
|
prop: 'id',
|
||||||
|
type: 'input',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '参数类型',
|
||||||
|
prop: 'type',
|
||||||
|
type: 'input',
|
||||||
|
width: 80,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '数组类型',
|
||||||
|
placeholder: '请选择数组类型',
|
||||||
|
prop: 'generic',
|
||||||
|
type: 'input',
|
||||||
|
width: 80,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '参数值',
|
||||||
|
prop: 'value',
|
||||||
|
type: 'input',
|
||||||
|
cell: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '输出参数',
|
||||||
|
prop: 'expectDataOuts',
|
||||||
|
type: 'dynamic',
|
||||||
|
span: 24,
|
||||||
|
children: {
|
||||||
|
height: 250,
|
||||||
|
addBtn: false,
|
||||||
|
delBtn: false,
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '名称',
|
||||||
|
prop: 'id',
|
||||||
|
type: 'input',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '参数类型',
|
||||||
|
prop: 'type',
|
||||||
|
type: 'input',
|
||||||
|
width: 80,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '数组类型',
|
||||||
|
prop: 'generic',
|
||||||
|
type: 'input',
|
||||||
|
width: 80,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '参数值',
|
||||||
|
prop: 'value',
|
||||||
|
type: 'input',
|
||||||
|
cell: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
export const option = {
|
||||||
|
...globalOption,
|
||||||
|
header: false,
|
||||||
|
editBtn: false,
|
||||||
|
delBtn: false,
|
||||||
|
menuWidth: 100,
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '实例标识',
|
||||||
|
prop: 'identifier',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '实例名',
|
||||||
|
prop: 'name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '运行类型',
|
||||||
|
prop: 'runType',
|
||||||
|
width: 80,
|
||||||
|
dicData: runTypeDic,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '实例状态',
|
||||||
|
prop: 'runStatus',
|
||||||
|
width: 80,
|
||||||
|
dicData: runStatusDic,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '实例测试时间',
|
||||||
|
width: 130,
|
||||||
|
prop: 'lastTestTime',
|
||||||
|
slot: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
@ -0,0 +1,113 @@
|
|||||||
|
import { globalOption } from '@/const/globalOption';
|
||||||
|
/**
|
||||||
|
* @数据映射
|
||||||
|
*/
|
||||||
|
// 数据显示的映射
|
||||||
|
export const typeMap = {
|
||||||
|
INTEGER: 'INT',
|
||||||
|
DOUBLE: 'DOU',
|
||||||
|
STRING: 'STR',
|
||||||
|
LONG: 'LONG',
|
||||||
|
FLOAT: 'FLOAT',
|
||||||
|
DATE: 'DATE',
|
||||||
|
TIMESTAMP: 'TS',
|
||||||
|
DATETIME: 'DT',
|
||||||
|
BOOLEAN: 'BOOL',
|
||||||
|
ARRAY: 'ARR',
|
||||||
|
OBJECT: 'OBJ',
|
||||||
|
};
|
||||||
|
export const dataTypeDict = [
|
||||||
|
{
|
||||||
|
label: '整数',
|
||||||
|
value: 'INTEGER',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '浮点数',
|
||||||
|
value: 'DOUBLE',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '字符串',
|
||||||
|
value: 'STRING',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '布尔值',
|
||||||
|
value: 'BOOLEAN',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '数组',
|
||||||
|
value: 'ARRAY',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '对象',
|
||||||
|
value: 'OBJECT',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '日期',
|
||||||
|
value: 'DATE',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '日期时间',
|
||||||
|
value: 'DATETIME',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '时间戳',
|
||||||
|
value: 'TIMESTAMP',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 显示查看表单
|
||||||
|
export const showOption = {
|
||||||
|
...globalOption,
|
||||||
|
minHeight: '100',
|
||||||
|
calcHeight: 30,
|
||||||
|
tip: false,
|
||||||
|
searchShow: false,
|
||||||
|
searchMenuSpan: 24,
|
||||||
|
addBtn: false,
|
||||||
|
viewBtn: false,
|
||||||
|
selection: false,
|
||||||
|
editBtn: false,
|
||||||
|
delBtn: false,
|
||||||
|
dialogClickModal: false,
|
||||||
|
header: false,
|
||||||
|
dialogWidth: '50%',
|
||||||
|
menuWidth: 60,
|
||||||
|
// dialogFullscreen: true,
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '名称',
|
||||||
|
prop: 'ident',
|
||||||
|
span: 12,
|
||||||
|
trigger: 'blur',
|
||||||
|
placeholder: '请输入名称',
|
||||||
|
rules: [
|
||||||
|
{ required: true, message: '名称不能为空' },
|
||||||
|
{ pattern: /^[a-z][a-zA-Z0-9]*$/, message: '名称符需要为首字母小写的驼峰命名法' },
|
||||||
|
{ max: 50, message: '名称最长为50个字符' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '数据类型',
|
||||||
|
prop: 'type',
|
||||||
|
type: 'select',
|
||||||
|
placeholder: '请选择数据类型',
|
||||||
|
dicData: dataTypeDict,
|
||||||
|
trigger: 'blur',
|
||||||
|
rules: [{ required: true, message: '数据类型不能为空' }],
|
||||||
|
},
|
||||||
|
// 需要加上change
|
||||||
|
{
|
||||||
|
label: '数组类型',
|
||||||
|
prop: 'generic',
|
||||||
|
slot: true,
|
||||||
|
formSlot: true,
|
||||||
|
placeholder: '请选择数组类型',
|
||||||
|
dicData: dataTypeDict.filter((item) => item.value !== 'ARRAY'),
|
||||||
|
rules: [{ required: true, message: '数组类型不能为空' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '参数描述',
|
||||||
|
prop: 'desc',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
import { option as baseOption } from '../componentBase';
|
||||||
|
import { deepClone } from '@/utils/common';
|
||||||
|
|
||||||
|
export const permissionConstant = {
|
||||||
|
ADMIN: 'admin',
|
||||||
|
READ: 'read',
|
||||||
|
WRITE: 'write',
|
||||||
|
};
|
||||||
|
|
||||||
|
// 系统模块
|
||||||
|
export const permissionDic = [
|
||||||
|
{
|
||||||
|
label: '管理',
|
||||||
|
value: 'admin',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '读',
|
||||||
|
value: 'read',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '写',
|
||||||
|
value: 'write',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const option = deepClone(baseOption);
|
||||||
|
option.header = false;
|
||||||
|
option.addBtn = false;
|
||||||
|
option.menuWidth = 200;
|
||||||
|
|
||||||
|
const hideArr = ['name', 'componentClassify', 'publicStatus'];
|
||||||
|
const columnArr = [];
|
||||||
|
option.column.forEach((element) => {
|
||||||
|
if (hideArr.includes(element.prop)) {
|
||||||
|
element.align = 'center';
|
||||||
|
columnArr.push(element);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
option.column = [
|
||||||
|
...columnArr,
|
||||||
|
{
|
||||||
|
label: '组件标识',
|
||||||
|
prop: 'identifier',
|
||||||
|
type: 'input',
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '组件版本',
|
||||||
|
prop: 'componentVersion',
|
||||||
|
type: 'input',
|
||||||
|
width: 120,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '组件描述',
|
||||||
|
prop: 'recommend',
|
||||||
|
type: 'input',
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '组件评分',
|
||||||
|
prop: 'stars',
|
||||||
|
type: 'input',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '审核结果',
|
||||||
|
prop: 'reviewOpinion',
|
||||||
|
type: 'input',
|
||||||
|
width: 'auto',
|
||||||
|
},
|
||||||
|
];
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
import { option as baseOption } from '../componentBase';
|
||||||
|
import { deepClone } from '@/util/util';
|
||||||
|
import { globalOption } from '@/const/globalOption';
|
||||||
|
|
||||||
|
export const permissionConstant = {
|
||||||
|
ADMIN: 'admin',
|
||||||
|
READ: 'read',
|
||||||
|
WRITE: 'write',
|
||||||
|
};
|
||||||
|
|
||||||
|
// 系统模块
|
||||||
|
export const permissionDic = [
|
||||||
|
{
|
||||||
|
label: '管理',
|
||||||
|
value: 'admin',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '读',
|
||||||
|
value: 'read',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '写',
|
||||||
|
value: 'write',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const userOption = {
|
||||||
|
...globalOption,
|
||||||
|
addBtn: false,
|
||||||
|
editBtn: false,
|
||||||
|
viewBtn: false,
|
||||||
|
header: false,
|
||||||
|
delBtn: false,
|
||||||
|
height: 200,
|
||||||
|
menuWidth: 100,
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '用户账号',
|
||||||
|
prop: 'collaboratorAccount',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '操作权限',
|
||||||
|
prop: 'permission',
|
||||||
|
slot: true,
|
||||||
|
width: '120px',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const option = deepClone(baseOption);
|
||||||
|
option.header = false;
|
||||||
|
option.addBtn = false;
|
||||||
|
option.column.push({
|
||||||
|
label: '权限',
|
||||||
|
prop: 'permission',
|
||||||
|
type: 'select',
|
||||||
|
dicData: permissionDic,
|
||||||
|
display: false,
|
||||||
|
});
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
import { globalOption } from '../globalOption';
|
||||||
|
|
||||||
|
export const option = {
|
||||||
|
...globalOption,
|
||||||
|
height: 'auto',
|
||||||
|
calcHeight: 30,
|
||||||
|
tip: false,
|
||||||
|
dialogClickModal: false,
|
||||||
|
header: false,
|
||||||
|
menu: true,
|
||||||
|
editBtn: false,
|
||||||
|
delBtn: false,
|
||||||
|
menuWidth: '100',
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '#',
|
||||||
|
prop: 'index',
|
||||||
|
fixed: true,
|
||||||
|
width: 40,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '名称',
|
||||||
|
prop: 'name',
|
||||||
|
overHidden: true,
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '类型',
|
||||||
|
prop: 'type',
|
||||||
|
overHidden: true,
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '格式',
|
||||||
|
prop: 'format',
|
||||||
|
overHidden: true,
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '状态',
|
||||||
|
prop: 'status',
|
||||||
|
overHidden: true,
|
||||||
|
slot: true,
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'URL',
|
||||||
|
prop: 'url',
|
||||||
|
slot: true,
|
||||||
|
overHidden: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
@ -0,0 +1,115 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Modal, Form, Input, Message } from '@arco-design/web-react';
|
||||||
|
import EditableTable from '@/pages/componentDevelopment/componentList/editableTable';
|
||||||
|
import { updateComponentDesign } from '@/api/componentDevelopProcess';
|
||||||
|
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
const TextArea = Input.TextArea;
|
||||||
|
|
||||||
|
const AddApiModal = ({ visible, baseInfo, componentDesignProgress, onCancel, onOk }) => {
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const [parametersData, setParametersData] = useState([]);
|
||||||
|
const [responsesData, setResponsesData] = useState([]);
|
||||||
|
|
||||||
|
// 当 visible 或 componentDesignProgress 变化时，设置表单初始值
|
||||||
|
useEffect(() => {
|
||||||
|
if (visible && componentDesignProgress) {
|
||||||
|
// 设置表单字段值
|
||||||
|
form.setFieldsValue({
|
||||||
|
ident: componentDesignProgress.ident || '',
|
||||||
|
desc: componentDesignProgress.desc || ''
|
||||||
|
});
|
||||||
|
|
||||||
|
// 设置参数表格数据
|
||||||
|
if (componentDesignProgress.parameters && Array.isArray(componentDesignProgress.parameters)) {
|
||||||
|
setParametersData(componentDesignProgress.parameters.map((param, index) => ({
|
||||||
|
key: param.id || index,
|
||||||
|
...param
|
||||||
|
})));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置响应表格数据
|
||||||
|
if (componentDesignProgress.responses && Array.isArray(componentDesignProgress.responses)) {
|
||||||
|
setResponsesData(componentDesignProgress.responses.map((response, index) => ({
|
||||||
|
key: response.id || index,
|
||||||
|
...response
|
||||||
|
})));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (visible) {
|
||||||
|
// 重置表单和表格数据
|
||||||
|
form.resetFields();
|
||||||
|
setParametersData([]);
|
||||||
|
setResponsesData([]);
|
||||||
|
}
|
||||||
|
}, [visible, componentDesignProgress, form]);
|
||||||
|
|
||||||
|
const submit = async () => {
|
||||||
|
try {
|
||||||
|
await form.validate();
|
||||||
|
const formData = form.getFields();
|
||||||
|
const params = {
|
||||||
|
baseInfo
|
||||||
|
};
|
||||||
|
|
||||||
|
params['operates'] = {
|
||||||
|
...formData,
|
||||||
|
type: 'EVENT',
|
||||||
|
parameters: parametersData,
|
||||||
|
responses: responsesData
|
||||||
|
};
|
||||||
|
const res: any = await updateComponentDesign(params);
|
||||||
|
|
||||||
|
if (res.code === 200) {
|
||||||
|
Message.success('新增成功');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
Message.error(res.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 调用父组件传递的 onOk 回调，并传递数据
|
||||||
|
onOk && onOk(params);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('表单验证失败:', error);
|
||||||
|
Message.error('请检查表单填写是否正确');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
title={componentDesignProgress ? '编辑接口' : '新增接口'}
|
||||||
|
visible={visible}
|
||||||
|
onCancel={onCancel}
|
||||||
|
onOk={submit}
|
||||||
|
style={{ width: '50%' }}
|
||||||
|
okButtonProps={{ disabled: !visible }}
|
||||||
|
>
|
||||||
|
<Form form={form} layout="vertical">
|
||||||
|
<FormItem
|
||||||
|
label="接口名称"
|
||||||
|
field="ident"
|
||||||
|
required
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入接口名称'
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input placeholder="请输入接口名称" />
|
||||||
|
</FormItem>
|
||||||
|
<FormItem label="描述" field="desc">
|
||||||
|
<TextArea placeholder="请输入描述" />
|
||||||
|
</FormItem>
|
||||||
|
<FormItem label="输入参数" field="parameters">
|
||||||
|
<EditableTable onDataUpdate={setParametersData} />
|
||||||
|
</FormItem>
|
||||||
|
<FormItem label="输出参数" field="responses">
|
||||||
|
<EditableTable onDataUpdate={setResponsesData} />
|
||||||
|
</FormItem>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddApiModal;
|
||||||
@ -0,0 +1,184 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Button, Dropdown, Menu, Message } from '@arco-design/web-react';
|
||||||
|
import { ComponentItem } from '@/api/interface';
|
||||||
|
import {
|
||||||
|
componentStatusConstant,
|
||||||
|
publicStatus,
|
||||||
|
publishStatusConstant
|
||||||
|
} from '@/const/isdp/componentBase';
|
||||||
|
|
||||||
|
interface HandleButtonGroupProps {
|
||||||
|
row: ComponentItem;
|
||||||
|
index: number;
|
||||||
|
onHandlePublishComponent: (row: ComponentItem) => void;
|
||||||
|
onGoToReview: (row: ComponentItem) => void;
|
||||||
|
onPublishOrRevokeComponent: (action: 'publish' | 'revoke', identifier: string, version: string) => void;
|
||||||
|
onNavTo: (id: number, type: string) => void;
|
||||||
|
onSourceCodeView: (row: ComponentItem) => void;
|
||||||
|
onShowEdit: (row: ComponentItem, index: number) => void;
|
||||||
|
onCopyHandler: (row: ComponentItem) => void;
|
||||||
|
onShareCollaboration: (row: ComponentItem) => void;
|
||||||
|
onExportComponent: (id: number) => void;
|
||||||
|
onStopComponentShow: (row: ComponentItem) => void;
|
||||||
|
onRowDel: (row: ComponentItem) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const HandleButtonGroup: React.FC<HandleButtonGroupProps> = ({
|
||||||
|
row,
|
||||||
|
index,
|
||||||
|
onHandlePublishComponent,
|
||||||
|
onGoToReview,
|
||||||
|
onPublishOrRevokeComponent,
|
||||||
|
onNavTo,
|
||||||
|
onSourceCodeView,
|
||||||
|
onShowEdit,
|
||||||
|
onCopyHandler,
|
||||||
|
onShareCollaboration,
|
||||||
|
onExportComponent,
|
||||||
|
onStopComponentShow,
|
||||||
|
onRowDel
|
||||||
|
}) => {
|
||||||
|
|
||||||
|
// 检查组件状态是否符合条件
|
||||||
|
const isEligible = (eligibleStatuses: string[], currentStatus: string) => {
|
||||||
|
return eligibleStatuses.includes(currentStatus);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 构建更多操作菜单
|
||||||
|
const renderDropdownMenu = () => {
|
||||||
|
const items = [];
|
||||||
|
|
||||||
|
// 组件复制
|
||||||
|
if (!isEligible([componentStatusConstant.DEFAULT, componentStatusConstant.DESIGN], row.componentStatus)) {
|
||||||
|
items.push(
|
||||||
|
<Menu.Item key="copy">
|
||||||
|
<Button type="text" onClick={() => onCopyHandler(row)}>组件复制</Button>
|
||||||
|
</Menu.Item>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分享协作
|
||||||
|
if (!isEligible([componentStatusConstant.DESIGN, componentStatusConstant.DEFAULT], row.componentStatus)) {
|
||||||
|
items.push(
|
||||||
|
<Menu.Item key="share">
|
||||||
|
<Button type="text" onClick={() => onShareCollaboration(row)}>分享协作</Button>
|
||||||
|
</Menu.Item>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出组件
|
||||||
|
items.push(
|
||||||
|
<Menu.Item key="export">
|
||||||
|
<Button type="text" onClick={() => onExportComponent(row.id)}>导出组件</Button>
|
||||||
|
</Menu.Item>
|
||||||
|
);
|
||||||
|
|
||||||
|
// 下架组件
|
||||||
|
if (isEligible([componentStatusConstant.DEPLOYED], row.componentStatus)) {
|
||||||
|
items.push(
|
||||||
|
<Menu.Item key="stop">
|
||||||
|
<Button type="text" onClick={() => onStopComponentShow(row)}>下架组件</Button>
|
||||||
|
</Menu.Item>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除组件
|
||||||
|
if (!isEligible([componentStatusConstant.DEPLOYED, componentStatusConstant.PUBLISHED], row.componentStatus)) {
|
||||||
|
items.push(
|
||||||
|
<Menu.Item key="delete">
|
||||||
|
<Button type="text" onClick={() => onRowDel(row)}>删除组件</Button>
|
||||||
|
</Menu.Item>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <Menu>{items}</Menu>;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* 发布组件/更新版本/查看审核 */}
|
||||||
|
{row.publicStatus !== publicStatus.REVIEW ? (
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
onClick={() => onHandlePublishComponent(row)}
|
||||||
|
>
|
||||||
|
{row.publicStatus === publicStatus.PUBLISHED ? '更新版本' : '发布组件'}
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
onClick={() => onGoToReview(row)}
|
||||||
|
>
|
||||||
|
查看审核
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 公开组件/取消公开 */}
|
||||||
|
{row.publishStatus !== publishStatusConstant.PUBLISHED ? (
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
onClick={() => onPublishOrRevokeComponent('publish', row.identifier, row.version)}
|
||||||
|
>
|
||||||
|
公开组件
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
onClick={() => onPublishOrRevokeComponent('revoke', row.identifier, row.version)}
|
||||||
|
>
|
||||||
|
取消公开
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 接口设计/查看接口 */}
|
||||||
|
{isEligible([componentStatusConstant.DESIGN, componentStatusConstant.DEFAULT], row.componentStatus) ? (
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
onClick={() => onNavTo(row.id, '接口设计')}
|
||||||
|
>
|
||||||
|
接口设计
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{/* 组件编码 */}
|
||||||
|
{isEligible([componentStatusConstant.CODING], row.componentStatus) ? (
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
onClick={() => onNavTo(row.id, '逻辑编码')}
|
||||||
|
>
|
||||||
|
组件编码
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{/* 查看源码 */}
|
||||||
|
{!isEligible(
|
||||||
|
[componentStatusConstant.CODING, componentStatusConstant.DESIGN, componentStatusConstant.DEFAULT],
|
||||||
|
row.componentStatus
|
||||||
|
) ? (
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
onClick={() => onSourceCodeView(row)}
|
||||||
|
>
|
||||||
|
查看源码
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{/* 编辑组件 */}
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
onClick={() => onShowEdit(row, index)}
|
||||||
|
>
|
||||||
|
编辑组件
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{/* 更多操作 */}
|
||||||
|
<Dropdown droplist={renderDropdownMenu()} position="bl">
|
||||||
|
<Button type="text">
|
||||||
|
更多操作
|
||||||
|
</Button>
|
||||||
|
</Dropdown>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HandleButtonGroup;
|
||||||
Loading…
Reference in New Issue