feat: 补充流程的完结功能，流程页面的按钮读取权限控制

src/views/secondDev/approveFlowPage.vue

@@ -9,13 +9,13 @@
                         </slot>
                         关闭
                     </a-button>
-                    <a-button v-if="!readonly" type="primary" @click="onApproveClick">
+                    <a-button v-if="!readonly && hasBtnApprove" type="primary" @click="onApproveClick">
                         <slot name="icon">
                             <check-circle-outlined />
                         </slot>
                         同意
                     </a-button>
-                    <a-button v-if="!readonly" @click="onDenyClick">
+                    <a-button v-if="!readonly && hasBtnReject" @click="onDenyClick">
                         <slot name="icon">
                             <stop-outlined />
                         </slot>
@@ -24,7 +24,7 @@
                     <a-dropdown>
                         <template #overlay>
                             <a-menu @click="onMoreClick">
-                                <a-menu-item v-if="!readonly" key="terminate">终止</a-menu-item>
+                                <a-menu-item v-if="!readonly && hasBtnFinish" key="finish">终止</a-menu-item>
                                 <a-menu-item v-if="!readonly" key="transfer">转办</a-menu-item>
                                 <a-menu-item key="flowchart">查看流程图</a-menu-item>
                             </a-menu>
@@ -36,13 +36,20 @@
                     </a-dropdown>
                 </a-space>
             </div>
-            <FormInformation :key="renderKey" ref="formInformation" :disabled="readonly"
+            <FormInformation
-                :formAssignmentData="data.formAssignmentData" :formInfos="data.formInfos" :opinions="data.opinions"
+                :key="renderKey"
-                :opinionsComponents="data.opinionsComponents" @get-form-configs="(config) => (formConfigs = config)" />
+                ref="formInformation"
+                :disabled="readonly"
+                :formAssignmentData="data.formAssignmentData"
+                :formInfos="data.formInfos"
+                :opinions="data.opinions"
+                :opinionsComponents="data.opinionsComponents"
+                @get-form-configs="(config) => (formConfigs = config)"
+            />
             <Title :font-size="18" default-value="流转信息"></Title>
             <flow-history :items="getTaskRecords()"></flow-history>
             <opinion-dialog ref="opinionDlg" />
-            <a-modal :visible="showFlowChart" centered class="geg" title="流程图" width="1200px" :closable="false">
+            <a-modal :closable="false" :visible="showFlowChart" centered class="geg" title="流程图" width="1200px">
                 <process-information :process-id="processId" :xml="data.xml" />
                 <template #footer>
                     <a-button type="primary" @click="closeFlowChart">关闭</a-button>
@@ -53,45 +60,48 @@
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router';
+    import { useRouter } from 'vue-router';
-import { onMounted, reactive, ref, unref } from 'vue';
+    import { onMounted, reactive, ref, unref } from 'vue';
-import FormInformation from '/@/views/secondDev/FormInformation.vue';
+    import FormInformation from '/@/views/secondDev/FormInformation.vue';
-import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
+    import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
-import { getApprovalProcess, postApproval, postGetNextTaskMaybeArrival } from '/@/api/workflow/task';
+    import { getApprovalProcess, postApproval, postGetNextTaskMaybeArrival } from '/@/api/workflow/task';
-import { ApproveCode, ApproveType } from '/@/enums/workflowEnum';
+    import { ApproveCode, ApproveType } from '/@/enums/workflowEnum';
-import { CheckCircleOutlined, StopOutlined, CloseOutlined, DownOutlined } from '@ant-design/icons-vue';
+    import { CheckCircleOutlined, StopOutlined, CloseOutlined, DownOutlined } from '@ant-design/icons-vue';
-import OpinionDialog from '/@/components/SecondDev/OpinionDialog.vue';
+    import OpinionDialog from '/@/components/SecondDev/OpinionDialog.vue';
-import { separator } from '/@bpmn/config/info';
+    import { separator } from '/@bpmn/config/info';
-import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+    import { useMultipleTabStore } from '/@/store/modules/multipleTab';
-import Title from '/@/components/Title/src/Title.vue';
+    import Title from '/@/components/Title/src/Title.vue';
-import FlowHistory from '/@/components/SecondDev/FlowHistory.vue';
+    import FlowHistory from '/@/components/SecondDev/FlowHistory.vue';
-import { message } from 'ant-design-vue';
+    import { message } from 'ant-design-vue';
-import useEventBus from '/@/hooks/event/useEventBus';
+    import useEventBus from '/@/hooks/event/useEventBus';
-import ProcessInformation from '/@/views/workflow/task/components/flow/ProcessInformation.vue';
+    import ProcessInformation from '/@/views/workflow/task/components/flow/ProcessInformation.vue';
 
-const { data, approveUserData, initProcessData, notificationError, notificationSuccess } = userTaskItem();
+    const { data, approveUserData, initProcessData, notificationError, notificationSuccess } = userTaskItem();
-const { bus, FLOW_PROCESSED } = useEventBus();
+    const { bus, FLOW_PROCESSED } = useEventBus();
 
-const tabStore = useMultipleTabStore();
+    const tabStore = useMultipleTabStore();
-const router = useRouter();
+    const router = useRouter();
-const currentRoute = router.currentRoute.value;
+    const currentRoute = router.currentRoute.value;
-const parentRoutePath = localStorage.getItem('parentRoutePath');
+    const parentRoutePath = localStorage.getItem('parentRoutePath');
-localStorage.removeItem('parentRoutePath');
+    localStorage.removeItem('parentRoutePath');
-const fullPath = currentRoute.fullPath;
+    const fullPath = currentRoute.fullPath;
-const rQuery = currentRoute.query;
+    const rQuery = currentRoute.query;
-const rParams = currentRoute.params;
+    const rParams = currentRoute.params;
-const schemaId = ref(rParams.arg1);
+    const schemaId = ref(rParams.arg1);
-const taskId = ref(rQuery.taskId);
+    const taskId = ref(rQuery.taskId);
-const processId = ref(rParams.arg2);
+    const processId = ref(rParams.arg2);
-const readonly = ref(!!rQuery.readonly); // 查看流程会触发只读模式
+    const readonly = ref(!!rQuery.readonly); // 查看流程会触发只读模式
-const renderKey = ref('');
+    const renderKey = ref('');
-const formConfigs = ref();
+    const formConfigs = ref();
-const opinionDlg = ref();
+    const opinionDlg = ref();
-const validateSuccess = ref(false);
+    const validateSuccess = ref(false);
-const formInformation = ref();
+    const formInformation = ref();
-const showFlowChart = ref(false);
+    const showFlowChart = ref(false);
+    const hasBtnApprove = ref(true);
+    const hasBtnReject = ref(false);
+    const hasBtnFinish = ref(false);
 
-let approvalData = reactive({
+    let approvalData = reactive({
         isCountersign: false,
         isAddOrSubSign: false,
         stampInfo: {
@@ -106,28 +116,31 @@ let approvalData = reactive({
         rejectNodeActivityIds: [],
         circulateConfigs: [],
         nextTaskUser: {} // 格式为taskKey: 用户id（逗号分隔）
-});
+    });
-let approvedType = ref(ApproveType.AGREE);
+    let approvedType = ref(ApproveType.AGREE);
 
-function onMoreClick(e) {
+    function onMoreClick(e) {
-    if (e.key === "flowchart") {
+        const key = e.key;
-        openFlowChart()
+        if (key === 'flowchart') {
+            openFlowChart();
+        } else if(key === 'finish'){
+            onFinishClick();
+        }
     }
-}
 
-function closeFlowChart() {
+    function closeFlowChart() {
         showFlowChart.value = false;
-}
+    }
 
-function openFlowChart() {
+    function openFlowChart() {
         showFlowChart.value = true;
-}
+    }
 
-function close() {
+    function close() {
         tabStore.closeTab(currentRoute, router, parentRoutePath);
-}
+    }
 
-async function onApproveClick() {
+    async function onApproveClick() {
         await submit();
         const params = await getApproveParams();
         const nextNodes = await postGetNextTaskMaybeArrival(params);
@@ -142,9 +155,9 @@ async function onApproveClick() {
                 onFinish('approve');
             }
         });
-}
+    }
 
-async function onDenyClick() {
+    async function onDenyClick() {
         approvalData.approvedType = ApproveType.REJECT;
         approvalData.approvedResult = ApproveCode.REJECT;
         opinionDlg.value.toggleDialog({
@@ -158,9 +171,15 @@ async function onDenyClick() {
                 onFinish('reject');
             }
         });
-}
+    }
 
-function flowSuccess() {
+    async function onFinishClick(){
+        approvalData.approvedType = ApproveType.FINISH;
+        approvalData.approvedResult = ApproveCode.FINISH;
+        onFinish('finish');
+    }
+
+    function flowSuccess() {
         opinionDlg.value.toggleDialog({
             isClose: true
         });
@@ -169,13 +188,13 @@ function flowSuccess() {
             bus.emit(FLOW_PROCESSED);
             close();
         }, 500);
-}
+    }
 
-function flowFail() {
+    function flowFail() {
         opinionDlg.value.stopLoading();
-}
+    }
 
-function reset() {
+    function reset() {
         approvalData.isAddOrSubSign = false;
         approvalData.stampInfo = {
             stampId: '',
@@ -187,15 +206,27 @@ function reset() {
         approvalData.rejectNodeActivityId = '';
         approvalData.rejectNodeActivityIds = [];
         approvalData.circulateConfigs = [];
-}
+    }
 
-function getTaskRecords() {
+    function setBtnStatus() {
+        const btnConfigs = approvalData.buttonConfigs;
+        btnConfigs.forEach((btn) => {
+            const code = btn.buttonCode;
+            if (code === 'reject') {
+                hasBtnReject.value = true;
+            } else if (code === 'finish') {
+                hasBtnFinish.value = true;
+            }
+        });
+    }
+
+    function getTaskRecords() {
         if (data?.taskApproveOpinions?.length) {
             return data.taskApproveOpinions || [];
         }
-}
+    }
 
-onMounted(async () => {
+    onMounted(async () => {
         try {
             let res = await getApprovalProcess(unref(taskId), unref(processId));
             initProcessData(res);
@@ -207,6 +238,7 @@ onMounted(async () => {
             if (!readonly.value) {
                 if (res.buttonConfigs) {
                     approvalData.buttonConfigs = res.buttonConfigs;
+                    setBtnStatus();
                 }
                 if (res.relationTasks) {
                     data.predecessorTasks = res.relationTasks;
@@ -223,10 +255,10 @@ onMounted(async () => {
                 approvalData.circulateConfigs = [];
             }
             renderKey.value = Math.random() + '';
-    } catch (error) { }
+        } catch (error) {}
-});
+    });
 
-async function submit() {
+    async function submit() {
         data.submitLoading = true;
         validateSuccess.value = false;
         try {
@@ -247,9 +279,9 @@ async function submit() {
             data.submitLoading = false;
             notificationError(t('审批流程'), t('审批流程失败'));
         }
-}
+    }
 
-function getUploadFileFolderIds(formModels) {
+    function getUploadFileFolderIds(formModels) {
         let fileFolderIds = [];
         let uploadComponentIds = formInformation.value.getUploadComponentIds();
         uploadComponentIds.forEach((ids) => {
@@ -265,9 +297,9 @@ function getUploadFileFolderIds(formModels) {
             }
         });
         return fileFolderIds;
-}
+    }
 
-async function getApproveParams() {
+    async function getApproveParams() {
         let formModels = await formInformation.value.getFormModels();
         let system = formInformation.value.getSystemType();
         let fileFolderIds = getUploadFileFolderIds(formModels);
@@ -285,11 +317,11 @@ async function getApproveParams() {
             isOldSystem: system,
             nextTaskUser: approvalData.nextTaskUser
         };
-}
+    }
 
-async function onFinish(values) {
+    async function onFinish(values) {
         try {
-        if (validateSuccess.value || values === 'reject') {
+            if (validateSuccess.value || values === 'reject' || values === 'finish') {
                 let params = await getApproveParams();
                 await postApproval(params);
                 flowSuccess();
@@ -298,5 +330,5 @@ async function onFinish(values) {
         } catch (error) {
             flowFail();
         }
-}
+    }
 </script>