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()); if (hasAuth('workflow:category:remove')) buttons.push(deleteBtn());
return ( return (
<div class="flex-center gap-8px"> <div class="flex-center gap-4px">
{buttons.map((btn, index) => ( {buttons.map((btn, index) => (
<> <>
{index !== 0 && <NDivider vertical />} {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) => { const buttonWithDividers = buttons.flatMap((btn, index) => {
if (index === 0) return [btn]; if (index === 0) return [btn];
return [<NDivider vertical />, btn]; return [<NDivider vertical />, btn];

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

@ -176,38 +176,56 @@ const {
width: 150, width: 150,
fixed: 'right', fixed: 'right',
render: row => { 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 = { const firstRowButtons = buttons.flatMap((btn, index) => {
edit: ( if (index === 0) return [btn];
<ButtonIcon return [<NDivider vertical />, btn];
text });
type="primary"
icon="material-symbols:drive-file-rename-outline-outline" const secondRowButtons = [];
tooltipContent={$t('common.edit')}
onClick={() => edit(row.id)} secondRowButtons.push(
/> <ButtonIcon
), text
delete: ( type="primary"
<ButtonIcon icon="material-symbols:file-export"
text tooltipContent="导出流程"
type="error" onClick={() => handleExport(row)}
icon="material-symbols:delete-outline" />
tooltipContent={$t('common.delete')} );
popconfirmContent={$t('common.confirmDelete')}
onPositiveClick={() => handleDelete(row.id)} secondRowButtons.push(
/> isPublish.value ? (
),
design: (
<ButtonIcon
text
type="primary"
icon="material-symbols:design-services"
tooltipContent="流程设计"
onClick={() => handleDesign(row.id)}
/>
),
preview: (
<ButtonIcon <ButtonIcon
text text
type="primary" type="primary"
@ -215,8 +233,19 @@ const {
tooltipContent="查看流程" tooltipContent="查看流程"
onClick={() => handlePreview(row.id)} 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 <ButtonIcon
text text
type="primary" type="primary"
@ -225,48 +254,18 @@ const {
popconfirmContent={`确定要发布 ${row.flowName} 吗？`} popconfirmContent={`确定要发布 ${row.flowName} 吗？`}
onPositiveClick={() => handlePublish(row.id)} onPositiveClick={() => handlePublish(row.id)}
/> />
), );
copy: ( }
<ButtonIcon
text const secondRowWithDividers = secondRowButtons.flatMap((btn, index) => {
type="primary" if (index === 0) return [btn];
icon="material-symbols:content-copy" return [<NDivider vertical />, btn];
tooltipContent="复制流程" });
popconfirmContent={`确定要复制 ${row.flowName} 吗？`}
onPositiveClick={() => handleCopy(row.id)}
/>
),
export: (
<ButtonIcon
text
type="primary"
icon="material-symbols:file-export"
tooltipContent="导出流程"
onClick={() => handleExport(row)}
/>
)
};
return ( return (
<div class="flex-col"> <div class="flex-col">
<div class="h-[24px] flex-center gap-4px"> <div class="h-[24px] flex-center gap-4px">{firstRowButtons}</div>
{buttons.edit} <div class="h-[24px] flex-center gap-4px">{secondRowWithDividers}</div>
{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> </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 => { render: row => {
const id = row.id; const id = row.id;
const showAll = runningStatus.value; const showAll = runningStatus.value;
const Divider = <NDivider vertical />; const buttons = [];
const cancelBtn = ( if (showAll) {
<ButtonIcon buttons.push(
text <ButtonIcon
type="error" text
showPopconfirmIcon={false} type="error"
icon="material-symbols:cancel-outline-rounded" showPopconfirmIcon={false}
tooltipContent="作废流程" icon="material-symbols:cancel-outline-rounded"
popconfirmContent={ tooltipContent="作废流程"
<NInput v-model:value={cancelModel.comment} size="large" type="textarea" placeholder="请输入作废原因" /> popconfirmContent={
} <NInput v-model:value={cancelModel.comment} size="large" type="textarea" placeholder="请输入作废原因" />
onPositiveClick={() => handleCancel(id)} }
/> onPositiveClick={() => handleCancel(id)}
); />
);
}
const deleteBtn = ( if (showAll) {
<ButtonIcon buttons.push(
text <ButtonIcon
type="error" text
icon="material-symbols:delete-outline" type="error"
tooltipContent={$t('common.delete')} icon="material-symbols:delete-outline"
popconfirmContent={$t('common.confirmDelete')} tooltipContent={$t('common.delete')}
onPositiveClick={() => handleDelete(id)} popconfirmContent={$t('common.confirmDelete')}
/> onPositiveClick={() => handleDelete(id)}
); />
);
}
const previewBtn = ( buttons.push(
<ButtonIcon text type="info" icon="material-symbols:visibility-outline" tooltipContent="流程预览" /> <ButtonIcon text type="info" icon="material-symbols:visibility-outline" tooltipContent="流程预览" />
); );
const variableBtn = ( buttons.push(
<ButtonIcon <ButtonIcon
text text
type="info" type="info"
@ -194,17 +198,12 @@ const operateColumns = ref<NaiveUI.TableColumn<Api.Workflow.ProcessInstance>[]>(
/> />
); );
return ( const buttonWithDividers = buttons.flatMap((btn, index) => {
<div class="flex-center gap-1px"> if (index === 0) return [btn];
{showAll && cancelBtn} return [<NDivider vertical />, btn];
{showAll && Divider} });
{showAll && deleteBtn}
{showAll && Divider} return <div class="flex-center gap-1px">{buttonWithDividers}</div>;
{previewBtn}
{Divider}
{variableBtn}
</div>
);
} }
} }
]); ]);