feat: 将草稿箱分拆为单独页面

src/views/secondDev/FormInformation.vue

@@ -285,7 +285,6 @@
 <style lang="less" scoped>
     .form-container {
         display: flex;
-        height: 100vh;
         margin-top: -10px;
     }
 

src/views/secondDev/createFlow.vue

@@ -15,7 +15,7 @@
                         </slot>
                         提交
                     </a-button>
-                    <a-button>
+                    <a-button @click="saveDraft" :disabled="disableSubmit">
                         <slot name="icon">
                             <clock-circle-outlined />
                         </slot>
@@ -61,13 +61,19 @@
     const tabStore = useMultipleTabStore();
 
     import { nextTick, onMounted, ref, toRaw } from 'vue';
+    import { postDraft, putDraft } from '/@/api/workflow/process';
+    import { useI18n } from '/@/hooks/web/useI18n';
 
-    const { data, initProcessData } = userTaskItem();
+    const { t } = useI18n();
+    const { data, 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();
     const showFlowChart = ref(false);
+    const disableSubmit = ref(false);
     let randKey = ref('randkey'); // 强制表单重新渲染
 
     function closeFlowChart() {
@@ -83,9 +89,6 @@
             type: String,
             required: true
         },
-        draftsJsonStr: {
-            type: String
-        },
         draftsId: {
             type: String
         },
@@ -138,17 +141,16 @@
                 initProcessData(res);
             }
         } catch (error) {}
-
-        await nextTick();
-        initDraftsFormData();
-
         randKey.value = Math.random() + '';
+        // 这里的顺序不能变 表单不渲染的时候 设置表单初值没用
+        await nextTick();
+        await initDraftsFormData();
     });
 
     async function initDraftsFormData() {
         //isPublish.value = Object.keys(data.formInfos).length > 0 ? false : true;
-        if (props.draftsJsonStr) {
+        if (draftsJsonStr) {
-            let formDataJson = JSON.parse(props.draftsJsonStr);
+            let formDataJson = JSON.parse(draftsJsonStr);
             let formData = [];
 
             data.formInfos.forEach((item) => {
@@ -159,6 +161,30 @@
             await formInformation.value.setFormData(formData);
         }
     }
+
+    async function saveDraft() {
+        try {
+            disableSubmit.value = true;
+            let formModels = await formInformation.value.saveDraftData();
+            if (rDraftsId) {
+                let res = await putDraft(rSchemaId, formModels, rDraftsId, props.rowKeyData);
+                showResult(res, t('保存草稿'));
+            } else {
+                let res = await postDraft(rSchemaId, formModels, props.rowKeyData);
+                showResult(res, t('保存草稿'));
+            }
+        } catch (error) {
+            notificationError(t('保存草稿'));
+        }
+    }
+
+    function showResult(res, title) {
+        if (res) {
+            notificationSuccess(title);
+        } else {
+            notificationError(title);
+        }
+    }
 </script>
 
 <style lang="less">

src/views/secondDev/processTasksPage.vue

@@ -36,7 +36,7 @@
     });
 
     const Drafts = defineAsyncComponent({
-        loader: () => import('../workflow/task/components/processTasks/Drafts.vue')
+        loader: () => import('../workflow/task/components/processTasks/DraftsV2.vue')
     });
     const componentByType: Map<string, any> = new Map([
         ['ToDoTasks', ToDoTasks],

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

@@ -0,0 +1,130 @@
+<template>
+    <BasicTable @register="registerTable">
+        <template #action="{ record }">
+            <TableAction :actions="tableActions(record)" />
+        </template>
+    </BasicTable>
+    <LaunchProcess v-if="processData.visible" :draftsId="processData.draftsId" :draftsJsonStr="processData.draftsJsonStr" :schemaId="processData.schemaId" @close="processData.visible = false" />
+</template>
+
+<script setup>
+    import userTaskTable from './../../hooks/userTaskTable';
+
+    import LaunchProcess from './../LaunchProcess.vue';
+    import { BasicTable, useTable, TableAction } from '/@/components/Table';
+    import { deleteDraft, getDraftInfo, getSchemaTask } from '/@/api/workflow/process';
+    import { reactive } from 'vue';
+    import { notification } from 'ant-design-vue';
+    import { TaskTypeUrl } from '/@/enums/workflowEnum';
+    import { useI18n } from '/@/hooks/web/useI18n';
+    import { useRouter } from 'vue-router';
+
+    const { t } = useI18n();
+    const router = useRouter();
+    const configColumns = [
+        {
+            title: t('流程名称'),
+            dataIndex: 'schemaName',
+            align: 'left'
+        },
+        {
+            title: t('发起者'),
+            dataIndex: 'originator',
+            sorter: true,
+            align: 'left'
+        },
+        {
+            title: t('发起时间'),
+            dataIndex: 'createDate',
+            align: 'left'
+        }
+    ];
+    const processData = reactive({
+        visible: false,
+        schemaId: '',
+        draftsJsonStr: '',
+        draftsId: ''
+    });
+    const { formConfig } = userTaskTable();
+    const [registerTable, { reload }] = useTable({
+        title: t('草稿箱列表'),
+        api: getSchemaTask,
+        rowKey: 'id',
+        columns: configColumns,
+        formConfig: formConfig('Drafts'),
+        beforeFetch: (params) => {
+            return { data: params, taskUrl: TaskTypeUrl.DRAFT };
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        striped: false,
+        pagination: {
+            pageSize: 18
+        },
+        actionColumn: {
+            width: 80,
+            title: t('操作'),
+            dataIndex: 'action',
+            slots: { customRender: 'action' },
+            fixed: undefined
+        }
+    });
+
+    function tableActions(record) {
+        return [
+            {
+                icon: 'clarity:note-edit-line',
+                onClick: handleEdit.bind(null, record)
+            },
+            {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                popConfirm: {
+                    title: t('是否确认删除'),
+                    confirm: handleDelete.bind(null, record)
+                }
+            }
+        ];
+    }
+
+    async function handleEdit(record) {
+        try {
+            let res = await getDraftInfo(record.id);
+            /*processData.draftsId = record.id;
+            processData.schemaId = res.schemaId;
+            processData.draftsJsonStr = res.formData;
+            processData.visible = true;*/
+            localStorage.setItem('draftsJsonStr', res.formData);
+            router.push({
+                path: '/flow/createFlow',
+                query: {
+                    schemaId: res.schemaId,
+                    draftsId: record.id,
+                    tabKey: 'new_' + record.id
+                }
+            });
+        } catch (error) {}
+    }
+
+    async function handleDelete(record) {
+        try {
+            let res = await deleteDraft([record.id]);
+            if (res) {
+                notification.open({
+                    type: 'success',
+                    message: t('删除'),
+                    description: t('删除成功')
+                });
+                reload();
+            } else {
+                notification.open({
+                    type: 'error',
+                    message: t('删除'),
+                    description: t('删除失败')
+                });
+            }
+        } catch (error) {}
+    }
+</script>
+
+<style scoped></style>