feat: 初步修改审批页面的样式，增加输入审批意见的对话框，修复打开草稿时tab页标题不对的bug

src/components/SecondDev/OpinionDialog.vue

@@ -0,0 +1,67 @@
+<template>
+    <a-modal :title="dialogTitle" :visible="isOpen" :width="500" centered class="geg" @cancel="onClickCancel" @ok="onClickOK">
+        <div class="dialog-wrap">
+            <a-form :label-col="{ span: 5 }" :model="formState" autocomplete="off">
+                <a-form-item label="下一节点" name="nextNodeName">
+                    <span>{{ formState.nextNodeName }}</span>
+                </a-form-item>
+                <a-form-item label="审批意见" name="opinion">
+                    <a-textarea v-model:value="formState.opinion" :maxlength="200" :rows="3" placeholder="请输入审批意见，不超过200字" />
+                </a-form-item>
+            </a-form>
+        </div>
+    </a-modal>
+</template>
+
+<script setup>
+    import { reactive, ref } from 'vue';
+
+    const dialogTitle = ref('审批');
+    const isOpen = ref(false);
+    let _action = 'approve';
+    const titleMapping = {
+        approve: '同意',
+        deny: '拒绝',
+        eject: '退回',
+        cancel: '终止',
+        transfer: '转办'
+    };
+    let _callback = null;
+
+    const formState = reactive({
+        nextNodeName: '',
+        opinion: '',
+        opinionList: ['同意。', '请领导审批。']
+    });
+
+    function toggleDialog({ action, callback } = {}) {
+        isOpen.value = true;
+        _action = action;
+        _callback = callback;
+        formState.opinion = '';
+        dialogTitle.value = `审批 - ${titleMapping[action]}`;
+    }
+
+    function onClickOK() {
+        if (_callback && typeof _callback === 'function') {
+            _callback({
+                opinion: formState.opinion
+            });
+        }
+        isOpen.value = false;
+    }
+
+    function onClickCancel() {
+        isOpen.value = false;
+    }
+
+    defineExpose({
+        toggleDialog
+    });
+</script>
+
+<style lang="less" scoped>
+    .dialog-wrap {
+        padding-right: 15px;
+    }
+</style>

src/design/theme.less

@@ -70,3 +70,26 @@ html[data-theme='light'] {
         }
     }
 }
+
+.geg-flow-page {
+    padding: 10px;
+    background-color: #fff;
+
+    .top-toolbar {
+        padding-bottom: 15px;
+        border-bottom: 1px solid #eee;
+    }
+
+    .ant-input-affix-wrapper-disabled {
+        background-color: transparent;
+    }
+
+    .ant-input[disabled] {
+        color: rgb(0 0 0 / 85%);
+    }
+}
+
+.page-bg-wrap {
+    background-color: rgb(246 247 249);
+    padding: 10px;
+}

src/router/routes/basic.ts

@@ -144,7 +144,7 @@ export const FLOW_ROUTE: AppRouteRecordRaw = {
         {
             path: 'approveFlow',
             name: 'ApproveFlow',
-            component: () => import('/@/views/secondDev/approveFlow.vue'),
+            component: () => import('/@/views/secondDev/approveFlowPage.vue'),
             meta: {
                 title: '审批流程'
             }

src/views/secondDev/approveFlowPage.vue

@@ -0,0 +1,134 @@
+<template>
+    <div class="page-bg-wrap">
+        <div class="geg-flow-page">
+            <div class="top-toolbar">
+                <a-space :size="10" wrap>
+                    <a-button style="margin-right: 10px">
+                        <slot name="icon">
+                            <close-outlined />
+                        </slot>
+                        关闭
+                    </a-button>
+                    <a-button type="primary" @click="onApproveClick">
+                        <slot name="icon">
+                            <check-circle-outlined />
+                        </slot>
+                        同意
+                    </a-button>
+                    <a-button @click="onDenyClick">
+                        <slot name="icon">
+                            <stop-outlined />
+                        </slot>
+                        拒绝
+                    </a-button>
+                    <a-dropdown>
+                        <template #overlay>
+                            <a-menu @click="onMoreClick">
+                                <a-menu-item key="1">退回</a-menu-item>
+                                <a-menu-item key="2">终止</a-menu-item>
+                                <a-menu-item key="3">转办</a-menu-item>
+                            </a-menu>
+                        </template>
+                        <a-button>
+                            更多
+                            <down-outlined />
+                        </a-button>
+                    </a-dropdown>
+                </a-space>
+            </div>
+            <FormInformation
+                :key="renderKey"
+                ref="formInformation"
+                :disabled="false"
+                :formAssignmentData="data.formAssignmentData"
+                :formInfos="data.formInfos"
+                :opinions="data.opinions"
+                :opinionsComponents="data.opinionsComponents"
+                @get-form-configs="(config) => (formConfigs = config)"
+            />
+            <opinion-dialog ref="opinionDlg" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { useRouter } from 'vue-router';
+    import { onMounted, reactive, ref, unref } from 'vue';
+    import FormInformation from '/@/views/secondDev/FormInformation.vue';
+    import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
+    import { getApprovalProcess } 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';
+
+    const { data, initProcessData } = userTaskItem();
+
+    const router = useRouter();
+    const { currentRoute } = router;
+    const rParams = currentRoute.value.query;
+    //const schemaId = ref(rParams.schemaId);
+    const taskId = ref(rParams.taskId);
+    const processId = ref(rParams.processId);
+    const renderKey = ref('');
+    const formConfigs = ref();
+    const opinionDlg = ref();
+
+    let approvalData = reactive({
+        isCountersign: false,
+        isAddOrSubSign: false,
+        stampInfo: {
+            stampId: '',
+            password: ''
+        },
+        buttonConfigs: [],
+        approvedType: ApproveType.AGREE,
+        approvedResult: ApproveCode.AGREE,
+        approvedContent: '',
+        rejectNodeActivityId: '',
+        rejectNodeActivityIds: [],
+        circulateConfigs: []
+    });
+    let approvedType = ref(ApproveType.AGREE);
+
+    function onMoreClick() {}
+
+    function onApproveClick() {
+        opinionDlg.value.toggleDialog({
+            action: 'approve'
+        });
+    }
+
+    function onDenyClick() {
+        opinionDlg.value.toggleDialog({
+            action: 'deny'
+        });
+    }
+
+    onMounted(async () => {
+        if (unref(taskId)) {
+            try {
+                let res = await getApprovalProcess(unref(taskId), unref(processId));
+                initProcessData(res);
+                if (res.buttonConfigs) {
+                    approvalData.buttonConfigs = res.buttonConfigs;
+                }
+                if (res.relationTasks) {
+                    data.predecessorTasks = res.relationTasks;
+                }
+                if (res.isAddOrSubSign) {
+                    approvalData.isAddOrSubSign = res.isAddOrSubSign;
+                }
+
+                approvalData.approvedType = ApproveType.AGREE;
+                approvedType.value = ApproveType.AGREE;
+                approvalData.approvedContent = '';
+                approvalData.rejectNodeActivityId = '';
+                approvalData.rejectNodeActivityIds = [];
+                approvalData.circulateConfigs = [];
+
+                renderKey.value = Math.random() + '';
+            } catch (error) {}
+        } else {
+        }
+    });
+</script>

src/views/secondDev/createFlow.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="page-bg-wrap">
-        <div class="itc-create-flow">
+        <div class="geg-flow-page">
-            <div class="toolbar">
+            <div class="top-toolbar">
                 <a-space :size="10" wrap>
                     <a-button style="margin-right: 10px">
                         <slot name="icon">
@@ -9,13 +9,13 @@
                         </slot>
                         关闭
                     </a-button>
-                    <a-button type="primary">
+                    <a-button type="primary" @click="saveLaunch">
                         <slot name="icon">
                             <send-outlined />
                         </slot>
                         提交
                     </a-button>
-                    <a-button @click="saveDraft" :disabled="disableSubmit">
+                    <a-button :disabled="disableSubmit" @click="saveDraft">
                         <slot name="icon">
                             <clock-circle-outlined />
                         </slot>
@@ -38,6 +38,8 @@
             <div class="flow-content">
                 <FormInformation :key="randKey" ref="formInformation" :disabled="false" :formAssignmentData="data.formAssignmentData" :formInfos="data.formInfos" :opinions="data.opinions" :opinionsComponents="data.opinionsComponents" />
             </div>
+            <PredecessorTask v-if="data.relationTasks && data.relationTasks.length > 0" @change="changePredecessorTasks" :schemaId="rSchemaId" :relationTasks="data.predecessorTasks" />
+            <ApproveUser v-if="approveUserData.visible" :taskList="approveUserData.list" :schemaId="approveUserData.schemaId" @change="changeApproveUserData" />
         </div>
         <a-modal :visible="showFlowChart" centered class="geg" closable title="流程图" width="1200px">
             <process-information :process-id="processId" :xml="data.xml" />
@@ -53,7 +55,9 @@
     import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
     import FormInformation from '/@/views/secondDev/FormInformation.vue';
     import ProcessInformation from '/@/views/workflow/task/components/flow/ProcessInformation.vue';
-    import { getStartProcessInfo, getReStartProcessInfo } from '/@/api/workflow/task';
+    import ApproveUser from '/@/views/workflow/task/components/flow/ApproveUser.vue';
+    import PredecessorTask from '/@/views/workflow/task/components/PredecessorTask.vue';
+    import { getStartProcessInfo, getReStartProcessInfo, reLaunch, postLaunch } from '/@/api/workflow/task';
     import { useMultipleTabStore } from '/@/store/modules/multipleTab';
     import { CloseOutlined, SendOutlined, ClockCircleOutlined, PrinterOutlined, ApartmentOutlined } from '@ant-design/icons-vue';
 
@@ -63,19 +67,26 @@
     import { nextTick, onMounted, ref, toRaw } from 'vue';
     import { postDraft, putDraft } from '/@/api/workflow/process';
     import { useI18n } from '/@/hooks/web/useI18n';
+    import { separator } from '/@bpmn/config/info';
 
     const { t } = useI18n();
-    const { data, initProcessData, notificationSuccess, notificationError } = userTaskItem();
+    const { data, approveUserData, initProcessData, notificationSuccess, notificationError } = userTaskItem();
     const currentRoute = router.currentRoute;
     const rParams = currentRoute.value.query;
     const rSchemaId = rParams.schemaId;
     const rDraftsId = rParams.draftsId;
     const draftsJsonStr = localStorage.getItem('draftsJsonStr');
     let formInformation = ref();
+    let pageMode = 'new';
     const showFlowChart = ref(false);
     const disableSubmit = ref(false);
     let randKey = ref('randkey'); // 强制表单重新渲染
 
+    if (draftsJsonStr) {
+        localStorage.removeItem('draftsJsonStr');
+        pageMode = 'draft';
+    }
+
     function closeFlowChart() {
         showFlowChart.value = false;
     }
@@ -136,7 +147,9 @@
                 let res = await getStartProcessInfo(rSchemaId);
                 const title = res?.schemaInfo?.name;
                 if (title) {
-                    tabStore.changeTitle('new_' + rSchemaId, '新建 - ' + title);
+                    const tabKey = `${pageMode}_${pageMode === 'new' ? rSchemaId : rDraftsId}`;
+                    const tabPrefix = pageMode === 'new' ? '新建' : '草稿';
+                    tabStore.changeTitle(tabKey, `${tabPrefix}：${title}`);
                 }
                 initProcessData(res);
             }
@@ -185,21 +198,98 @@
             notificationError(title);
         }
     }
+
+    function changePredecessorTasks(list) {
+        data.predecessorTasks = list;
+    }
+
+    function changeApproveUserData() {
+        /*approveUserData.visible = false;*/
+    }
+
+    async function saveLaunch() {
+        data.submitLoading = true;
+        try {
+            let validateForms = await formInformation.value.validateForm();
+            let system = formInformation.value.getSystemType();
+
+            if (validateForms.length > 0) {
+                let successValidate = validateForms.filter((ele) => {
+                    return ele.validate;
+                });
+                if (successValidate.length == validateForms.length) {
+                    let formModels = await formInformation.value.getFormModels();
+                    let relationTasks = [];
+                    if (data.predecessorTasks && data.predecessorTasks.length > 0) {
+                        relationTasks = data.predecessorTasks.map((ele) => {
+                            return { taskId: ele.taskId, schemaId: ele.schemaId };
+                        });
+                    }
+                    let fileFolderIds = getUploadFileFolderIds(formModels);
+                    //如果传入了processId  代表是重新发起流程
+                    let res;
+                    if (props.processId) {
+                        res = await reLaunch(props.processId, props.schemaId, formModels, relationTasks, fileFolderIds, system);
+                    } else {
+                        res = await postLaunch(rSchemaId, formModels, relationTasks, fileFolderIds, system);
+                    }
+
+                    // 下一节点审批人
+                    let taskList = [];
+                    if (res && res.length > 0) {
+                        taskList = res
+                            .filter((ele) => {
+                                return ele.isMultiInstance == false && ele.isAppoint == true;
+                            })
+                            .map((ele) => {
+                                return {
+                                    taskId: ele.taskId,
+                                    taskName: ele.taskName,
+                                    provisionalApprover: ele.provisionalApprover,
+                                    selectIds: []
+                                };
+                            });
+                        if (taskList.length > 0) {
+                            approveUserData.list = taskList;
+                            approveUserData.schemaId = rSchemaId;
+                            approveUserData.visible = true;
+                            data.submitLoading = false;
+                        } else {
+                            data.submitLoading = false;
+                            //save(true, t('发起流程'));
+                        }
+                    } else {
+                        data.submitLoading = false;
+                        //save(true, t('发起流程'));
+                    }
+                } else {
+                    data.submitLoading = false;
+                    notificationError(t('发起流程'), t('表单校验未通过'));
+                }
+            }
+        } catch (error) {
+            data.submitLoading = false;
+            notificationError(t('发起流程'), t('发起流程失败'));
+        }
+    }
+
+    function getUploadFileFolderIds(formModels) {
+        let fileFolderIds = [];
+        let uploadComponentIds = formInformation.value.getUploadComponentIds();
+        uploadComponentIds.forEach((ids) => {
+            if (ids.includes(separator)) {
+                let arr = ids.split(separator);
+                if (arr.length == 2 && formModels[arr[0]][arr[1]]) {
+                    fileFolderIds.push(formModels[arr[0]][arr[1]]);
+                } else if (arr.length == 3 && formModels[arr[0]][arr[1]] && Array.isArray(formModels[arr[0]][arr[1]])) {
+                    formModels[arr[0]][arr[1]].forEach((o) => {
+                        fileFolderIds.push(o[arr[2]]);
+                    });
+                }
+            }
+        });
+        return fileFolderIds;
+    }
 </script>
 
-<style lang="less">
+<style lang="less"></style>
-    .itc-create-flow {
-        padding: 10px;
-        background-color: #fff;
-
-        .toolbar {
-            padding-bottom: 15px;
-            border-bottom: 1px solid #eee;
-        }
-    }
-
-    .page-bg-wrap {
-        background-color: rgb(246 247 249);
-        padding: 10px;
-    }
-</style>

src/views/workflow/task/components/processTasks/DraftsV2.vue

@@ -100,7 +100,7 @@
                 query: {
                     schemaId: res.schemaId,
                     draftsId: record.id,
-                    tabKey: 'new_' + record.id
+                    tabKey: 'draft_' + record.id
                 }
             });
         } catch (error) {}