mirror of
https://gitee.com/dapppp/ruoyi-plus-vben5.git
synced 2026-04-06 22:43:15 +08:00
refactor(workflow): 重构流程操作按钮组件以使用 Dropdown 的 menu 属性
将手动构建的 Menu 和 MenuItem 组件替换为 Dropdown 的 items 属性和 menu-click 事件,简化模板结构并提升可维护性。同时统一按钮的 variant 和 color 属性以符合新的 Ant Design Vue 规范。
This commit is contained in:
@@ -1,4 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import type { DropdownEmits, MenuItemType } from 'antdv-next';
|
||||||
|
|
||||||
import type { ApprovalType } from '../type';
|
import type { ApprovalType } from '../type';
|
||||||
|
|
||||||
import type { User } from '#/api/core/user';
|
import type { User } from '#/api/core/user';
|
||||||
@@ -21,7 +23,7 @@ import {
|
|||||||
UsergroupDeleteOutlined,
|
UsergroupDeleteOutlined,
|
||||||
UserOutlined,
|
UserOutlined,
|
||||||
} from '@antdv-next/icons';
|
} from '@antdv-next/icons';
|
||||||
import { Dropdown, Menu, MenuItem, Space } from 'antdv-next';
|
import { Dropdown, Space } from 'antdv-next';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
cancelProcessApply,
|
cancelProcessApply,
|
||||||
@@ -284,6 +286,63 @@ const showMultiActions = computed(() => {
|
|||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const items = computed(() => {
|
||||||
|
const list: MenuItemType[] = [];
|
||||||
|
const { buttonPermissions } = props;
|
||||||
|
|
||||||
|
if (buttonPermissions?.trust) {
|
||||||
|
list.push({
|
||||||
|
key: 'trust',
|
||||||
|
label: '委托',
|
||||||
|
icon: h(UserOutlined),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (buttonPermissions?.transfer) {
|
||||||
|
list.push({
|
||||||
|
key: 'transfer',
|
||||||
|
label: '转办',
|
||||||
|
icon: h(RollbackOutlined),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (showMultiActions.value && buttonPermissions?.addSign) {
|
||||||
|
list.push({
|
||||||
|
key: 'addSign',
|
||||||
|
label: '加签',
|
||||||
|
icon: h(UsergroupAddOutlined),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (showMultiActions.value && buttonPermissions?.subSign) {
|
||||||
|
list.push({
|
||||||
|
key: 'subSign',
|
||||||
|
label: '减签',
|
||||||
|
icon: h(UsergroupDeleteOutlined),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return list;
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleMenuClick: DropdownEmits['menuClick'] = (e) => {
|
||||||
|
const { key } = e;
|
||||||
|
switch (key) {
|
||||||
|
case 'addSign': {
|
||||||
|
addSignatureModalApi.open();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'subSign': {
|
||||||
|
reductionSignatureModalApi.open();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'transfer': {
|
||||||
|
transferModalApi.open();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'trust': {
|
||||||
|
delegationModalApi.open();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -300,17 +359,16 @@ const showMultiActions = computed(() => {
|
|||||||
<Space v-if="type === 'myself'">
|
<Space v-if="type === 'myself'">
|
||||||
<a-button
|
<a-button
|
||||||
v-if="revocable"
|
v-if="revocable"
|
||||||
danger
|
variant="outlined"
|
||||||
ghost
|
color="danger"
|
||||||
type="primary"
|
|
||||||
:icon="h(RollbackOutlined)"
|
:icon="h(RollbackOutlined)"
|
||||||
@click="handleCancel"
|
@click="handleCancel"
|
||||||
>
|
>
|
||||||
撤销申请
|
撤销申请
|
||||||
</a-button>
|
</a-button>
|
||||||
<a-button
|
<a-button
|
||||||
type="primary"
|
variant="outlined"
|
||||||
ghost
|
color="primary"
|
||||||
v-if="editableAndRemoveable"
|
v-if="editableAndRemoveable"
|
||||||
:icon="h(EditOutlined)"
|
:icon="h(EditOutlined)"
|
||||||
@click="handleEdit"
|
@click="handleEdit"
|
||||||
@@ -319,9 +377,8 @@ const showMultiActions = computed(() => {
|
|||||||
</a-button>
|
</a-button>
|
||||||
<a-button
|
<a-button
|
||||||
v-if="editableAndRemoveable"
|
v-if="editableAndRemoveable"
|
||||||
danger
|
variant="outlined"
|
||||||
ghost
|
color="danger"
|
||||||
type="primary"
|
|
||||||
:icon="h(EditOutlined)"
|
:icon="h(EditOutlined)"
|
||||||
@click="handleRemove"
|
@click="handleRemove"
|
||||||
>
|
>
|
||||||
@@ -331,7 +388,8 @@ const showMultiActions = computed(() => {
|
|||||||
<Space v-if="type === 'approve'">
|
<Space v-if="type === 'approve'">
|
||||||
<a-button
|
<a-button
|
||||||
type="primary"
|
type="primary"
|
||||||
ghost
|
variant="outlined"
|
||||||
|
color="green"
|
||||||
:icon="h(CheckOutlined)"
|
:icon="h(CheckOutlined)"
|
||||||
@click="handleApproval"
|
@click="handleApproval"
|
||||||
>
|
>
|
||||||
@@ -339,9 +397,8 @@ const showMultiActions = computed(() => {
|
|||||||
</a-button>
|
</a-button>
|
||||||
<a-button
|
<a-button
|
||||||
v-if="buttonPermissions?.termination"
|
v-if="buttonPermissions?.termination"
|
||||||
danger
|
variant="outlined"
|
||||||
ghost
|
color="danger"
|
||||||
type="primary"
|
|
||||||
:icon="h(ExclamationCircleOutlined)"
|
:icon="h(ExclamationCircleOutlined)"
|
||||||
@click="handleTermination"
|
@click="handleTermination"
|
||||||
>
|
>
|
||||||
@@ -349,9 +406,8 @@ const showMultiActions = computed(() => {
|
|||||||
</a-button>
|
</a-button>
|
||||||
<a-button
|
<a-button
|
||||||
v-if="buttonPermissions?.back"
|
v-if="buttonPermissions?.back"
|
||||||
danger
|
variant="outlined"
|
||||||
ghost
|
color="orange"
|
||||||
type="primary"
|
|
||||||
:icon="h(ArrowLeftOutlined)"
|
:icon="h(ArrowLeftOutlined)"
|
||||||
@click="handleRejection"
|
@click="handleRejection"
|
||||||
>
|
>
|
||||||
@@ -360,39 +416,9 @@ const showMultiActions = computed(() => {
|
|||||||
<Dropdown
|
<Dropdown
|
||||||
:get-popup-container="getPopupContainer"
|
:get-popup-container="getPopupContainer"
|
||||||
placement="bottomRight"
|
placement="bottomRight"
|
||||||
|
:menu="{ items }"
|
||||||
|
@menu-click="handleMenuClick"
|
||||||
>
|
>
|
||||||
<template #overlay>
|
|
||||||
<Menu>
|
|
||||||
<MenuItem
|
|
||||||
v-if="buttonPermissions?.trust"
|
|
||||||
key="1"
|
|
||||||
@click="() => delegationModalApi.open()"
|
|
||||||
>
|
|
||||||
<UserOutlined class="mr-2" />委托
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem
|
|
||||||
v-if="buttonPermissions?.transfer"
|
|
||||||
key="2"
|
|
||||||
@click="() => transferModalApi.open()"
|
|
||||||
>
|
|
||||||
<RollbackOutlined class="mr-2" /> 转办
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem
|
|
||||||
v-if="showMultiActions && buttonPermissions?.addSign"
|
|
||||||
key="3"
|
|
||||||
@click="() => addSignatureModalApi.open()"
|
|
||||||
>
|
|
||||||
<UsergroupAddOutlined class="mr-2" /> 加签
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem
|
|
||||||
v-if="showMultiActions && buttonPermissions?.subSign"
|
|
||||||
key="4"
|
|
||||||
@click="() => reductionSignatureModalApi.open()"
|
|
||||||
>
|
|
||||||
<UsergroupDeleteOutlined class="mr-2" /> 减签
|
|
||||||
</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</template>
|
|
||||||
<a-button v-if="showButtonOther" :icon="h(MenuOutlined)">
|
<a-button v-if="showButtonOther" :icon="h(MenuOutlined)">
|
||||||
其他
|
其他
|
||||||
</a-button>
|
</a-button>
|
||||||
|
|||||||
Reference in New Issue
Block a user