GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimize(projects): 统一button的添加方式

Browse Source
This commit is contained in:
AN 2025-06-18 15:15:19 +08:00
parent 20b96ac54b
commit b3f81ba3f0
4 changed files with 108 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/workflow/category/index.vue
View File

@ -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 />}

1
src/views/workflow/leave/index.vue
View File

@ -168,7 +168,6 @@ const {
);
}
// 插入分隔符（仅在前后两个按钮之间插入 Divider）
const buttonWithDividers = buttons.flatMap((btn, index) => {
if (index === 0) return [btn];
return [<NDivider vertical />, btn];

143
src/views/workflow/process-definition/index.vue
View File

@ -176,38 +176,56 @@ const {
width: 150,
fixed: 'right',
render: row => {
const Divider = <NDivider vertical />;
const buttons = [];
buttons.push(
<ButtonIcon
text
type="primary"
icon="material-symbols:drive-file-rename-outline-outline"
tooltipContent={$t('common.edit')}
onClick={() => edit(row.id)}
/>
);
buttons.push(
<ButtonIcon
text
type="error"
icon="material-symbols:delete-outline"
tooltipContent={$t('common.delete')}
popconfirmContent={$t('common.confirmDelete')}
onPositiveClick={() => handleDelete(row.id)}
/>
);
buttons.push(
<ButtonIcon
text
type="primary"
icon="material-symbols:content-copy"
tooltipContent="复制流程"
popconfirmContent={`确定要复制 ${row.flowName} 吗？`}
onPositiveClick={() => handleCopy(row.id)}
/>
);
const buttons = {
edit: (
<ButtonIcon
text
type="primary"
icon="material-symbols:drive-file-rename-outline-outline"
tooltipContent={$t('common.edit')}
onClick={() => edit(row.id)}
/>
),
delete: (
<ButtonIcon
text
type="error"
icon="material-symbols:delete-outline"
tooltipContent={$t('common.delete')}
popconfirmContent={$t('common.confirmDelete')}
onPositiveClick={() => handleDelete(row.id)}
/>
),
design: (
<ButtonIcon
text
type="primary"
icon="material-symbols:design-services"
tooltipContent="流程设计"
onClick={() => handleDesign(row.id)}
/>
),
preview: (
const firstRowButtons = buttons.flatMap((btn, index) => {
if (index === 0) return [btn];
return [<NDivider vertical />, btn];
});
const secondRowButtons = [];
secondRowButtons.push(
<ButtonIcon
text
type="primary"
icon="material-symbols:file-export"
tooltipContent="导出流程"
onClick={() => handleExport(row)}
/>
);
secondRowButtons.push(
isPublish.value ? (
<ButtonIcon
text
type="primary"
@ -215,8 +233,19 @@ const {
tooltipContent="查看流程"
onClick={() => handlePreview(row.id)}
/>
),
publish: (
) : (
<ButtonIcon
text
type="primary"
icon="material-symbols:design-services"
tooltipContent="流程设计"
onClick={() => handleDesign(row.id)}
/>
)
);
if (!isPublish.value) {
secondRowButtons.push(
<ButtonIcon
text
type="primary"
@ -225,48 +254,18 @@ const {
popconfirmContent={`确定要发布 ${row.flowName} 吗？`}
onPositiveClick={() => handlePublish(row.id)}
/>
),
copy: (
<ButtonIcon
text
type="primary"
icon="material-symbols:content-copy"
tooltipContent="复制流程"
popconfirmContent={`确定要复制 ${row.flowName} 吗？`}
onPositiveClick={() => handleCopy(row.id)}
/>
),
export: (
<ButtonIcon
text
type="primary"
icon="material-symbols:file-export"
tooltipContent="导出流程"
onClick={() => handleExport(row)}
/>
)
};
);
}
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>
);
}

73
src/views/workflow/process-instance/index.vue
View File

@ -153,38 +153,42 @@ 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 = (
<ButtonIcon
text
type="error"
showPopconfirmIcon={false}
icon="material-symbols:cancel-outline-rounded"
tooltipContent="作废流程"
popconfirmContent={
<NInput v-model:value={cancelModel.comment} size="large" type="textarea" placeholder="请输入作废原因" />
}
onPositiveClick={() => handleCancel(id)}
/>
);
if (showAll) {
buttons.push(
<ButtonIcon
text
type="error"
showPopconfirmIcon={false}
icon="material-symbols:cancel-outline-rounded"
tooltipContent="作废流程"
popconfirmContent={
<NInput v-model:value={cancelModel.comment} size="large" type="textarea" placeholder="请输入作废原因" />
}
onPositiveClick={() => handleCancel(id)}
/>
);
}
const deleteBtn = (
<ButtonIcon
text
type="error"
icon="material-symbols:delete-outline"
tooltipContent={$t('common.delete')}
popconfirmContent={$t('common.confirmDelete')}
onPositiveClick={() => handleDelete(id)}
/>
);
if (showAll) {
buttons.push(
<ButtonIcon
text
type="error"
icon="material-symbols:delete-outline"
tooltipContent={$t('common.delete')}
popconfirmContent={$t('common.confirmDelete')}
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>;
}
}
]);