optimize(projects): 统一button的添加方式
This commit is contained in:
parent
20b96ac54b
commit
b3f81ba3f0
@ -110,7 +110,7 @@ const {
|
||||
if (hasAuth('workflow:category:remove')) buttons.push(deleteBtn());
|
||||
|
||||
return (
|
||||
<div class="flex-center gap-8px">
|
||||
<div class="flex-center gap-4px">
|
||||
{buttons.map((btn, index) => (
|
||||
<>
|
||||
{index !== 0 && <NDivider vertical />}
|
||||
|
@ -168,7 +168,6 @@ const {
|
||||
);
|
||||
}
|
||||
|
||||
// 插入分隔符(仅在前后两个按钮之间插入 Divider)
|
||||
const buttonWithDividers = buttons.flatMap((btn, index) => {
|
||||
if (index === 0) return [btn];
|
||||
return [<NDivider vertical />, btn];
|
||||
|
@ -176,10 +176,8 @@ const {
|
||||
width: 150,
|
||||
fixed: 'right',
|
||||
render: row => {
|
||||
const Divider = <NDivider vertical />;
|
||||
|
||||
const buttons = {
|
||||
edit: (
|
||||
const buttons = [];
|
||||
buttons.push(
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
@ -187,8 +185,8 @@ const {
|
||||
tooltipContent={$t('common.edit')}
|
||||
onClick={() => edit(row.id)}
|
||||
/>
|
||||
),
|
||||
delete: (
|
||||
);
|
||||
buttons.push(
|
||||
<ButtonIcon
|
||||
text
|
||||
type="error"
|
||||
@ -197,36 +195,8 @@ const {
|
||||
popconfirmContent={$t('common.confirmDelete')}
|
||||
onPositiveClick={() => handleDelete(row.id)}
|
||||
/>
|
||||
),
|
||||
design: (
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
icon="material-symbols:design-services"
|
||||
tooltipContent="流程设计"
|
||||
onClick={() => handleDesign(row.id)}
|
||||
/>
|
||||
),
|
||||
preview: (
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
icon="material-symbols:visibility-outline"
|
||||
tooltipContent="查看流程"
|
||||
onClick={() => handlePreview(row.id)}
|
||||
/>
|
||||
),
|
||||
publish: (
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
icon="material-symbols:publish"
|
||||
tooltipContent="发布流程"
|
||||
popconfirmContent={`确定要发布 ${row.flowName} 吗?`}
|
||||
onPositiveClick={() => handlePublish(row.id)}
|
||||
/>
|
||||
),
|
||||
copy: (
|
||||
);
|
||||
buttons.push(
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
@ -235,8 +205,16 @@ const {
|
||||
popconfirmContent={`确定要复制 ${row.flowName} 吗?`}
|
||||
onPositiveClick={() => handleCopy(row.id)}
|
||||
/>
|
||||
),
|
||||
export: (
|
||||
);
|
||||
|
||||
const firstRowButtons = buttons.flatMap((btn, index) => {
|
||||
if (index === 0) return [btn];
|
||||
return [<NDivider vertical />, btn];
|
||||
});
|
||||
|
||||
const secondRowButtons = [];
|
||||
|
||||
secondRowButtons.push(
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
@ -244,29 +222,50 @@ const {
|
||||
tooltipContent="导出流程"
|
||||
onClick={() => handleExport(row)}
|
||||
/>
|
||||
);
|
||||
|
||||
secondRowButtons.push(
|
||||
isPublish.value ? (
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
icon="material-symbols:visibility-outline"
|
||||
tooltipContent="查看流程"
|
||||
onClick={() => handlePreview(row.id)}
|
||||
/>
|
||||
) : (
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
icon="material-symbols:design-services"
|
||||
tooltipContent="流程设计"
|
||||
onClick={() => handleDesign(row.id)}
|
||||
/>
|
||||
)
|
||||
};
|
||||
);
|
||||
|
||||
if (!isPublish.value) {
|
||||
secondRowButtons.push(
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
icon="material-symbols:publish"
|
||||
tooltipContent="发布流程"
|
||||
popconfirmContent={`确定要发布 ${row.flowName} 吗?`}
|
||||
onPositiveClick={() => handlePublish(row.id)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const secondRowWithDividers = secondRowButtons.flatMap((btn, index) => {
|
||||
if (index === 0) return [btn];
|
||||
return [<NDivider vertical />, btn];
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="flex-col">
|
||||
<div class="h-[24px] flex-center gap-4px">
|
||||
{buttons.edit}
|
||||
{Divider}
|
||||
{buttons.delete}
|
||||
{Divider}
|
||||
{buttons.copy}
|
||||
</div>
|
||||
<div class="h-[24px] flex-center gap-4px">
|
||||
{buttons.export}
|
||||
{Divider}
|
||||
{isPublish.value ? buttons.preview : buttons.design}
|
||||
{!isPublish.value && (
|
||||
<>
|
||||
{Divider}
|
||||
{buttons.publish}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div class="h-[24px] flex-center gap-4px">{firstRowButtons}</div>
|
||||
<div class="h-[24px] flex-center gap-4px">{secondRowWithDividers}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -153,9 +153,10 @@ const operateColumns = ref<NaiveUI.TableColumn<Api.Workflow.ProcessInstance>[]>(
|
||||
render: row => {
|
||||
const id = row.id;
|
||||
const showAll = runningStatus.value;
|
||||
const Divider = <NDivider vertical />;
|
||||
const buttons = [];
|
||||
|
||||
const cancelBtn = (
|
||||
if (showAll) {
|
||||
buttons.push(
|
||||
<ButtonIcon
|
||||
text
|
||||
type="error"
|
||||
@ -168,8 +169,10 @@ const operateColumns = ref<NaiveUI.TableColumn<Api.Workflow.ProcessInstance>[]>(
|
||||
onPositiveClick={() => handleCancel(id)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const deleteBtn = (
|
||||
if (showAll) {
|
||||
buttons.push(
|
||||
<ButtonIcon
|
||||
text
|
||||
type="error"
|
||||
@ -179,12 +182,13 @@ const operateColumns = ref<NaiveUI.TableColumn<Api.Workflow.ProcessInstance>[]>(
|
||||
onPositiveClick={() => handleDelete(id)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const previewBtn = (
|
||||
buttons.push(
|
||||
<ButtonIcon text type="info" icon="material-symbols:visibility-outline" tooltipContent="流程预览" />
|
||||
);
|
||||
|
||||
const variableBtn = (
|
||||
buttons.push(
|
||||
<ButtonIcon
|
||||
text
|
||||
type="info"
|
||||
@ -194,17 +198,12 @@ const operateColumns = ref<NaiveUI.TableColumn<Api.Workflow.ProcessInstance>[]>(
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<div class="flex-center gap-1px">
|
||||
{showAll && cancelBtn}
|
||||
{showAll && Divider}
|
||||
{showAll && deleteBtn}
|
||||
{showAll && Divider}
|
||||
{previewBtn}
|
||||
{Divider}
|
||||
{variableBtn}
|
||||
</div>
|
||||
);
|
||||
const buttonWithDividers = buttons.flatMap((btn, index) => {
|
||||
if (index === 0) return [btn];
|
||||
return [<NDivider vertical />, btn];
|
||||
});
|
||||
|
||||
return <div class="flex-center gap-1px">{buttonWithDividers}</div>;
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
Loading…
Reference in New Issue
Block a user