fix: 移除新增的tabKey，调整对应的路由设计，方便关闭路由和修改标题

feat: 新样式的退回操作对话框
2024-02-28 16:16:17 +08:00
parent cb075df41c
commit 8a8d18a33a
10 changed files with 362 additions and 250 deletions
--- a/src/views/secondDev/approveFlowPage.vue
+++ b/src/views/secondDev/approveFlowPage.vue
@ -24,9 +24,9 @@
                    <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-item key="terminate">终止</a-menu-item>
+                                <a-menu-item key="transfer">转办</a-menu-item>
+                                <a-menu-item key="flowchart">查看流程图</a-menu-item>
                            </a-menu>
                        </template>
                        <a-button>
@ -56,22 +56,26 @@
    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 { getApprovalProcess, postApproval } 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 { separator } from '/@bpmn/config/info';

-    const { data, initProcessData } = userTaskItem();
+    const { data, approveUserData, initProcessData, notificationError, notificationSuccess } = 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 currentRoute = router.currentRoute.value;
+    const rQuery = currentRoute.query;
+    const rParams = currentRoute.params;
+    const schemaId = ref(rParams.arg1);
+    const taskId = ref(rQuery.taskId);
+    const processId = ref(rParams.arg2);
    const renderKey = ref('');
    const formConfigs = ref();
    const opinionDlg = ref();
+    const validateSuccess = ref(false);
+    const formInformation = ref();

    let approvalData = reactive({
        isCountersign: false,
@ -92,18 +96,44 @@

    function onMoreClick() {}

-    function onApproveClick() {
+    async function onApproveClick() {
+        await submit();
+        approvalData.approvedType = ApproveType.AGREE;
+        approvalData.approvedResult = ApproveCode.AGREE;
        opinionDlg.value.toggleDialog({
-            action: 'approve'
+            action: 'agree'
        });
    }

-    function onDenyClick() {
+    async function onDenyClick() {
+        approvalData.approvedType = ApproveType.REJECT;
+        approvalData.approvedResult = ApproveCode.REJECT;
        opinionDlg.value.toggleDialog({
-            action: 'deny'
+            action: 'reject',
+            processId: processId.value,
+            taskId: taskId.value,
+            callback: (args) => {
+                approvalData.approvedContent = args.opinion;
+                approvalData.rejectNodeActivityId = args.rejectNodeId;
+                onFinish({});
+            }
        });
    }

+    function reset() {
+        approvalData.isAddOrSubSign = false;
+        approvalData.stampInfo = {
+            stampId: '',
+            password: ''
+        };
+        approvalData.buttonConfigs = [];
+        approvalData.approvedType = ApproveType.AGREE;
+        approvalData.approvedContent = '';
+        approvalData.rejectNodeActivityId = '';
+        approvalData.rejectNodeActivityIds = [];
+        approvalData.circulateConfigs = [];
+    }
+
    onMounted(async () => {
        if (unref(taskId)) {
            try {
@ -131,4 +161,100 @@
        } else {
        }
    });
+
+    async function submit() {
+        data.submitLoading = true;
+        validateSuccess.value = false;
+        try {
+            let validateForms = await formInformation.value.validateForm();
+            if (validateForms.length > 0) {
+                let successValidate = validateForms.filter((ele) => {
+                    return ele.validate;
+                });
+                if (successValidate.length == validateForms.length) {
+                    validateSuccess.value = true;
+                    data.submitLoading = false;
+                } 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;
+    }
+
+    async function onFinish(values) {
+        try {
+            if (/*validateSuccess.value*/ true) {
+                let formModels = await formInformation.value.getFormModels();
+                let system = formInformation.value.getSystemType();
+                let fileFolderIds = getUploadFileFolderIds(formModels);
+                let params = {
+                    approvedType: approvalData.approvedType,
+                    approvedResult: approvalData.approvedResult, // approvalData.approvedType 审批结果 如果为 4 就需要传buttonCode
+                    approvedContent: approvalData.approvedContent,
+                    formData: formModels,
+                    rejectNodeActivityId: approvalData.rejectNodeActivityId,
+                    taskId: taskId.value,
+                    fileFolderIds,
+                    circulateConfigs: approvalData.circulateConfigs,
+                    stampId: values.stampId,
+                    stampPassword: values.password,
+                    isOldSystem: system
+                };
+
+                let res = await postApproval(params);
+                // 下一节点审批人
+                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 = props.schemaId;
+                        approveUserData.visible = true;
+                        data.submitLoading = false;
+                    } else {
+                        opinionDlg.value.toggleDialog({ isClose: true });
+                        data.submitLoading = false;
+                        save(true, t('审批流程'));
+                    }
+                } else {
+                    opinionDlg.value.toggleDialog({ isClose: true });
+                    data.submitLoading = false;
+                    save(true, t('审批流程'));
+                }
+            }
+        } catch (error) {}
+    }
 </script>
--- a/src/views/secondDev/createFlow.vue
+++ b/src/views/secondDev/createFlow.vue
@ -71,10 +71,11 @@

    const { t } = useI18n();
    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 currentRoute = router.currentRoute.value;
+    const rParams = currentRoute.params;
+    const fullPath = currentRoute.fullPath;
+    const rSchemaId = rParams.arg1;
+    const rDraftsId = rParams.arg2;
    const draftsJsonStr = localStorage.getItem('draftsJsonStr');
    let formInformation = ref();
    let pageMode = 'new';
@ -147,9 +148,8 @@
                let res = await getStartProcessInfo(rSchemaId);
                const title = res?.schemaInfo?.name;
                if (title) {
-                    const tabKey = `${pageMode}_${pageMode === 'new' ? rSchemaId : rDraftsId}`;
                    const tabPrefix = pageMode === 'new' ? '新建' : '草稿';
-                    tabStore.changeTitle(tabKey, `${tabPrefix}：${title}`);
+                    tabStore.changeTitle(fullPath, `${tabPrefix}：${title}`);
                }
                initProcessData(res);
            }
@ -179,7 +179,7 @@
        try {
            disableSubmit.value = true;
            let formModels = await formInformation.value.saveDraftData();
-            if (rDraftsId) {
+            if (rDraftsId !== '0') {
                let res = await putDraft(rSchemaId, formModels, rDraftsId, props.rowKeyData);
                showResult(res, t('保存草稿'));
            } else {
--- a/src/views/secondDev/processTasksPage.vue
+++ b/src/views/secondDev/processTasksPage.vue
@ -94,17 +94,16 @@
    ];
    const selectedKeys = ref(['ToDoTasks']);
    const query = unref(currentRoute).query;
-    let id = query.name;
-    const tabKey = query.tabKey as string;
+    let id = 'ToDoTasks';
+    const lHash = location.hash;
+    if (lHash.indexOf('/draft') > 0) {
+        id = 'Drafts';
+    }
    let data = reactive({
        componentName: shallowRef(ToDoTasks)
    });
    if (id) {
        selectedKeys.value = [id.toString()];
-        const tabName = treeData.find((item) => item.id === id)?.name;
-        if (tabName && tabKey) {
-            tabStore.changeTitle(tabKey, tabName);
-        }
        handleSelect([id]);
    }

--- a/src/views/workflow/task/FlowLaunch.vue
+++ b/src/views/workflow/task/FlowLaunch.vue
@ -1,205 +1,169 @@
 <template>
-  <PageLayout
-    :layoutClass="
-      currentRoute.path == '/workflow/launch'
-        ? '!p-2'
-        : currentRoute.path == '/task/processtasks'
-        ? '!p-0 !pr-7px'
-        : ''
-    "
-    :searchConfig="searchConfig"
-    :title="t('流程模板列表')"
-    @search="search"
-    @scroll-height="scrollHeight"
-  >
-    <template #left>
-      <BasicTree
-        :clickRowToExpand="true"
-        :fieldNames="{ key: 'id', title: 'name' }"
-        :title="t('流程模板分类')"
-        :treeData="data.treeData"
-        search
-        @select="handleSelect"
-      />
-    </template>
+    <PageLayout :layoutClass="currentRoute.path == '/workflow/launch' ? '!p-2' : currentRoute.path == '/task/processtasks' ? '!p-0 !pr-7px' : ''" :searchConfig="searchConfig" :title="t('流程模板列表')" @search="search" @scroll-height="scrollHeight">
+        <template #left>
+            <BasicTree :clickRowToExpand="true" :fieldNames="{ key: 'id', title: 'name' }" :title="t('流程模板分类')" :treeData="data.treeData" search @select="handleSelect" />
+        </template>

-    <template #search></template>
+        <template #search></template>

-    <template #right>
-      <div
-        v-if="data.list.length > 0"
-        :style="{ overflowY: 'auto', height: tableOptions.scrollHeight + 30 + 'px' }"
-      >
-        <div class="list-page-box">
-          <TemplateCard
-            v-for="(item, index) in data.list"
-            :key="index"
-            :item="item"
-            @click="launchProcessInTab(item.id)"
-          />
-        </div>
-        <div class="page-box">
-          <a-pagination
-            v-model:current="data.pagination.current"
-            v-model:pageSize="data.pagination.pageSize"
-            :pageSizeOptions="['18', '36', '54', '72']"
-            :show-total="(total) => t(`共 {total} 条数据`, { total })"
-            :showSizeChanger="true"
-            :total="data.pagination.total"
-            @change="getList"
-          />
-        </div>
-      </div>
+        <template #right>
+            <div v-if="data.list.length > 0" :style="{ overflowY: 'auto', height: tableOptions.scrollHeight + 30 + 'px' }">
+                <div class="list-page-box">
+                    <TemplateCard v-for="(item, index) in data.list" :key="index" :item="item" @click="launchProcessInTab(item.id)" />
+                </div>
+                <div class="page-box">
+                    <a-pagination
+                        v-model:current="data.pagination.current"
+                        v-model:pageSize="data.pagination.pageSize"
+                        :pageSizeOptions="['18', '36', '54', '72']"
+                        :show-total="(total) => t(`共 {total} 条数据`, { total })"
+                        :showSizeChanger="true"
+                        :total="data.pagination.total"
+                        @change="getList"
+                    />
+                </div>
+            </div>

-      <div v-else>
-        <EmptyBox />
-      </div>
-      <LaunchProcess
-        v-if="visibleLaunchProcess"
-        :schemaId="data.schemaId"
-        @close="visibleLaunchProcess = false"
-      />
-    </template>
-  </PageLayout>
+            <div v-else>
+                <EmptyBox />
+            </div>
+            <LaunchProcess v-if="visibleLaunchProcess" :schemaId="data.schemaId" @close="visibleLaunchProcess = false" />
+        </template>
+    </PageLayout>
 </template>

 <script lang="ts" setup>
-  import { onMounted, reactive, ref, unref, watch } from 'vue';
-  import TemplateCard from '/@bpmn/components/card/TemplateCard.vue';
-  import { EmptyBox } from '/@/components/ModalPanel/index';
-  import { getDesignPage } from '/@/api/workflow/design';
-  import { WorkflowPageModel } from '/@/api/workflow/model';
-  import { getDicDetailList } from '/@/api/system/dic';
-  import { BasicTree, TreeItem } from '/@/components/Tree';
-  import { PageLayout } from '/@/components/ModalPanel';
-  import LaunchProcess from './components/LaunchProcess.vue';
-  import { FlowCategory } from '/@/enums/workflowEnum';
-  import userTableScrollHeight from '/@/hooks/setting/userTableScrollHeight';
-  import { useRouter } from 'vue-router';
-  import { useI18n } from '/@/hooks/web/useI18n';
+    import { onMounted, reactive, ref, unref, watch } from 'vue';
+    import TemplateCard from '/@bpmn/components/card/TemplateCard.vue';
+    import { EmptyBox } from '/@/components/ModalPanel/index';
+    import { getDesignPage } from '/@/api/workflow/design';
+    import { WorkflowPageModel } from '/@/api/workflow/model';
+    import { getDicDetailList } from '/@/api/system/dic';
+    import { BasicTree, TreeItem } from '/@/components/Tree';
+    import { PageLayout } from '/@/components/ModalPanel';
+    import LaunchProcess from './components/LaunchProcess.vue';
+    import { FlowCategory } from '/@/enums/workflowEnum';
+    import userTableScrollHeight from '/@/hooks/setting/userTableScrollHeight';
+    import { useRouter } from 'vue-router';
+    import { useI18n } from '/@/hooks/web/useI18n';

-  const { t } = useI18n();
-  const router = useRouter();
-  const { currentRoute } = router;
-  const searchConfig = [
-    {
-      field: 'code',
-      label: t('模板编码'),
-      type: 'input',
-    },
-    {
-      field: 'name',
-      label: t('模板名称'),
-      type: 'input',
-    },
-  ];
-  const { tableOptions, scrollHeight } = userTableScrollHeight();
-  let visibleLaunchProcess = ref(false);
-  let data: {
-    list: Array<WorkflowPageModel>;
-    treeData: Array<TreeItem>;
-    schemaId: string;
-    selectDeptId: string;
-    pagination: { current: number; total: number; pageSize: number };
-  } = reactive({
-    list: [],
-    treeData: [],
-    schemaId: '',
-    selectDeptId: '',
-    pagination: {
-      current: 1,
-      total: 0,
-      pageSize: 18,
-    },
-  });
-
-  watch(
-    () => unref(currentRoute),
-    (val) => {
-      if (val.path == '/workflow/launch') init();
-    },
-    { deep: true },
-  );
-  onMounted(() => {
-    getCategoryTree();
-    init();
-  });
-
-  async function init() {
-    data.pagination.current = 1;
-    data.pagination.total = 0;
-    data.selectDeptId = '';
-    await getList();
-  }
-
-  async function getCategoryTree() {
-    let res = (await getDicDetailList({
-      itemId: FlowCategory.ID,
-    })) as unknown as TreeItem[];
-    data.treeData = res.map((ele) => {
-      ele.icon = 'ant-design:tags-outlined';
-      return ele;
+    const { t } = useI18n();
+    const router = useRouter();
+    const { currentRoute } = router;
+    const searchConfig = [
+        {
+            field: 'code',
+            label: t('模板编码'),
+            type: 'input'
+        },
+        {
+            field: 'name',
+            label: t('模板名称'),
+            type: 'input'
+        }
+    ];
+    const { tableOptions, scrollHeight } = userTableScrollHeight();
+    let visibleLaunchProcess = ref(false);
+    let data: {
+        list: Array<WorkflowPageModel>;
+        treeData: Array<TreeItem>;
+        schemaId: string;
+        selectDeptId: string;
+        pagination: { current: number; total: number; pageSize: number };
+    } = reactive({
+        list: [],
+        treeData: [],
+        schemaId: '',
+        selectDeptId: '',
+        pagination: {
+            current: 1,
+            total: 0,
+            pageSize: 18
+        }
    });
-  }

-  async function getList(params?: any) {
-    const searchParams = {
-      ...{
-        limit: data.pagination.current,
-        size: data.pagination.pageSize,
-      },
-      ...{ category: data.selectDeptId },
-      ...params,
-      ...{ enabledMark: 1 }, // 流程发起list 需要隐藏 禁用的模板[enabledMark=1]
-    };
-
-    try {
-      let res = await getDesignPage(searchParams);
-      data.pagination.total = res.total;
-      data.list = res.list;
-    } catch (error) {}
-  }
-
-  function handleSelect(deptIds) {
-    data.selectDeptId = deptIds[0];
-    getList();
-  }
-
-  /*
-async function launchProcess(id: string) {
-  data.schemaId = id;
-  visibleLaunchProcess.value = true;
-}
-*/
-
-  function launchProcessInTab(id: string) {
-    router.push({
-      path: '/flow/createFlow',
-      query: {
-        schemaId: id,
-        tabKey: 'new_' + id,
-      },
+    watch(
+        () => unref(currentRoute),
+        (val) => {
+            if (val.path == '/workflow/launch') init();
+        },
+        { deep: true }
+    );
+    onMounted(() => {
+        getCategoryTree();
+        init();
    });
-  }

-  function search(params: any) {
-    data.pagination.current = 1;
-    getList(params);
-  }
+    async function init() {
+        data.pagination.current = 1;
+        data.pagination.total = 0;
+        data.selectDeptId = '';
+        await getList();
+    }
+
+    async function getCategoryTree() {
+        let res = (await getDicDetailList({
+            itemId: FlowCategory.ID
+        })) as unknown as TreeItem[];
+        data.treeData = res.map((ele) => {
+            ele.icon = 'ant-design:tags-outlined';
+            return ele;
+        });
+    }
+
+    async function getList(params?: any) {
+        const searchParams = {
+            ...{
+                limit: data.pagination.current,
+                size: data.pagination.pageSize
+            },
+            ...{ category: data.selectDeptId },
+            ...params,
+            ...{ enabledMark: 1 } // 流程发起list 需要隐藏 禁用的模板[enabledMark=1]
+        };
+
+        try {
+            let res = await getDesignPage(searchParams);
+            data.pagination.total = res.total;
+            data.list = res.list;
+        } catch (error) {}
+    }
+
+    function handleSelect(deptIds) {
+        data.selectDeptId = deptIds[0];
+        getList();
+    }
+
+    async function launchProcess(id: string) {
+        // 旧版弹窗界面 便于调试
+        data.schemaId = id;
+        visibleLaunchProcess.value = true;
+    }
+
+    function launchProcessInTab(id: string) {
+        router.push({
+            path: `/flow/${id}/0/createFlow`
+        });
+    }
+
+    function search(params: any) {
+        data.pagination.current = 1;
+        getList(params);
+    }
 </script>
 <style lang="less" scoped>
-  .list-page-box {
-    display: flex;
-    flex-wrap: wrap;
-  }
+    .list-page-box {
+        display: flex;
+        flex-wrap: wrap;
+    }

-  :deep(.list-item) {
-    max-width: 320px;
-  }
+    :deep(.list-item) {
+        max-width: 320px;
+    }

-  .page-box {
-    position: absolute;
-    bottom: 20px;
-    right: 20px;
-  }
+    .page-box {
+        position: absolute;
+        bottom: 20px;
+        right: 20px;
+    }
 </style>
--- a/src/views/workflow/task/components/processTasks/DraftsV2.vue
+++ b/src/views/workflow/task/components/processTasks/DraftsV2.vue
@ -96,12 +96,7 @@
            processData.visible = true;*/
            localStorage.setItem('draftsJsonStr', res.formData);
            router.push({
-                path: '/flow/createFlow',
-                query: {
-                    schemaId: res.schemaId,
-                    draftsId: record.id,
-                    tabKey: 'draft_' + record.id
-                }
+                path: `/flow/${res.schemaId}/${record.id}/createFlow`
            });
        } catch (error) {}
    }
--- a/src/views/workflow/task/components/processTasks/ToDoTasksV2.vue
+++ b/src/views/workflow/task/components/processTasks/ToDoTasksV2.vue
@ -136,12 +136,9 @@
    const onRowDblClick = (record, index) => {
        const { processId, taskId, schemaId } = record;
        router.push({
-            path: "/flow/approveFlow",
+            path: `/flow/${schemaId}/${processId}/approveFlow`,
            query: {
-                schemaId,
-                taskId,
-                processId,
-                tabKey: "approve_" + taskId
+                taskId
            }
        });
    };