审批流程实现“转办”功能。

src/components/SecondDev/TransferDialog.vue

@@ -0,0 +1,133 @@
+<template>
+    <a-modal :mask-closable="false" :title="dialogTitle" :visible="isOpen" :width="500" class="geg" centered>
+        <template #footer>
+            <a-button :disabled="loading" @click="onClickCancel">取消</a-button>
+            <a-button :loading="loading" type="primary" @click="onClickOK">确定</a-button>
+        </template>
+        <div class="dialog-wrap">
+            <a-form ref="formRef" :label-col="{ span: 6 }" :model="formState" :rules="rules" autocomplete="off">
+                <a-form-item label="部门" name="department">
+                    <a-cascader v-model:value="formState.department" :field-names="{ label: 'name', value: 'id' }" :options="departmentList" :show-search="{ filter }" placeholder="请选择部门" @change="handleChangeDepartment"> </a-cascader>
+                </a-form-item>
+                <a-form-item label="转办人" name="userId" required>
+                    <a-select
+                        v-model:value="formState.userId"
+                        show-search
+                        placeholder="请选择转办人"
+                        :default-active-first-option="false"
+                        :show-arrow="false"
+                        :filter-option="false"
+                        :not-found-content="null"
+                        :options="userList"
+                        @search="handleSearchUser"
+                    >
+                    </a-select>
+                </a-form-item>
+            </a-form>
+        </div>
+    </a-modal>
+</template>
+
+<script setup>
+    import { reactive, ref, onMounted } from 'vue';
+    import { getDepartmentTree } from '/@/api/system/department';
+    import { getUserPageList } from '/@/api/system/user';
+
+    import { debounce } from 'lodash-es';
+
+    const dialogTitle = ref('转办');
+    const isOpen = ref(false);
+    const loading = ref(false);
+    const userList = ref([]);
+    const departmentList = ref([]);
+    const formRef = ref();
+    const formState = reactive({
+        department: undefined, // 部门
+        userId: undefined
+    });
+
+    const rules = {
+        userId: [{ required: true, message: '请选择转办人', trigger: 'change' }]
+    };
+    let _taskId = '';
+    let _callback = null;
+
+    async function toggleDialog({ isClose, taskId, callback }) {
+        if (isClose) {
+            isOpen.value = false;
+            loading.value = false;
+            return;
+        }
+        _taskId = taskId;
+        isOpen.value = true;
+        _callback = callback;
+        getUserList();
+        getDepartmentTree().then((res) => {
+            departmentList.value = res || [];
+        });
+    }
+
+    async function getUserList(params = {}) {
+        let userRes = await getUserPageList(params);
+        userList.value = (userRes.list || []).map((user) => {
+            return {
+                value: user.id,
+                label: user.name + (user.code ? ` - ${user.code}` : '')
+            };
+        });
+    }
+
+    function handleChangeDepartment(value) {
+        getUserList({
+            departmentId: value[value.length - 1]
+        });
+    }
+
+    const handleSearchUser = debounce((value) => {
+        const departmentId = formState.department?.length > 0 ? formState.department[formState.department.length - 1] : '';
+        getUserList({
+            departmentId,
+            keyword: value
+        });
+    }, 500);
+
+    function onClickCancel() {
+        isOpen.value = false;
+    }
+
+    function onClickOK() {
+        if (_callback && typeof _callback === 'function') {
+            _callback({
+                taskId: _taskId,
+                userId: formState.userId
+            });
+        } else {
+            isOpen.value = false;
+        }
+    }
+
+    function validate() {
+        return formRef.value.validate();
+    }
+
+    function startLoading() {
+        loading.value = true;
+    }
+
+    function stopLoading() {
+        loading.value = false;
+    }
+
+    defineExpose({
+        toggleDialog,
+        validate,
+        startLoading,
+        stopLoading
+    });
+</script>
+
+<style lang="less" scoped>
+    .dialog-wrap {
+        padding: 10px 15px 0 0;
+    }
+</style>

src/views/secondDev/approveFlowPage.vue

@@ -49,6 +49,7 @@
             <Title :font-size="18" default-value="流转信息"></Title>
             <flow-history :items="getTaskRecords()"></flow-history>
             <opinion-dialog ref="opinionDlg" />
+            <transfer-dialog ref="transferDlg" />
             <a-modal :closable="false" :visible="showFlowChart" centered class="geg" title="流程图" width="1200px">
                 <process-information :process-id="processId" :xml="data.xml" />
                 <template #footer>
@@ -64,15 +65,16 @@
     import { onMounted, reactive, ref, unref } from 'vue';
     import FormInformation from '/@/views/secondDev/FormInformation.vue';
     import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
-    import { getApprovalProcess, postApproval, postGetNextTaskMaybeArrival } from '/@/api/workflow/task';
+    import { getApprovalProcess, postApproval, postGetNextTaskMaybeArrival, postTransfer } from '/@/api/workflow/task';
     import { ApproveCode, ApproveType } from '/@/enums/workflowEnum';
     import { CheckCircleOutlined, StopOutlined, CloseOutlined, DownOutlined } from '@ant-design/icons-vue';
     import OpinionDialog from '/@/components/SecondDev/OpinionDialog.vue';
+    import TransferDialog from '/@/components/SecondDev/TransferDialog.vue';
     import { separator } from '/@bpmn/config/info';
     import { useMultipleTabStore } from '/@/store/modules/multipleTab';
     import Title from '/@/components/Title/src/Title.vue';
     import FlowHistory from '/@/components/SecondDev/FlowHistory.vue';
-    import { message } from 'ant-design-vue';
+    import { message, Modal } from 'ant-design-vue';
     import useEventBus from '/@/hooks/event/useEventBus';
     import ProcessInformation from '/@/views/workflow/task/components/flow/ProcessInformation.vue';
 
@@ -92,6 +94,7 @@
     const renderKey = ref('');
     const formConfigs = ref();
     const opinionDlg = ref();
+    const transferDlg = ref();
     const validateSuccess = ref(false);
     const formInformation = ref();
     const showFlowChart = ref(false);
@@ -121,8 +124,16 @@
         const key = e.key;
         if (key === 'flowchart') {
             openFlowChart();
-        } else if(key === 'finish'){
-            onFinishClick();
+        } else if (key === 'finish') {
+            Modal.confirm({
+                title: () => '提示',
+                content: () => '确定终止吗？',
+                onOk: () => {
+                    onFinishClick();
+                }
+            });
+        } else if (key === 'transfer') {
+            onTransferClick();
         }
     }
 
@@ -171,7 +182,43 @@
         });
     }
 
-    async function onFinishClick(){
+    function onTransferClick() {
+        transferDlg.value.toggleDialog({
+            taskId: taskId.value,
+            callback: (args) => {
+                onTransfer(args);
+            }
+        });
+    }
+
+    function onTransfer({ taskId, userId }) {
+        transferDlg.value.validate().then(() => {
+            transferDlg.value.startLoading();
+            postTransfer(taskId, userId)
+                .then((res) => {
+                    transferDlg.value.toggleDialog({
+                        isClose: true
+                    });
+                    message.success('转办成功');
+                    setTimeout(() => {
+                        bus.emit(FLOW_PROCESSED);
+                        close();
+                    }, 500);
+                })
+                .catch((err) => {
+                    message.error('转办失败');
+                    transferDlg.value.toggleDialog({
+                        isClose: true
+                    });
+                });
+        });
+    }
+
+    function onTransferFlowFail() {
+        transferDlg.value.stopLoading();
+    }
+
+    async function onFinishClick() {
         approvalData.approvedType = ApproveType.FINISH;
         approvalData.approvedResult = ApproveCode.FINISH;
         onFinish('finish');