diff --git a/src/enums/workflowEnum.ts b/src/enums/workflowEnum.ts
index 3aa7965..8864ba3 100644
--- a/src/enums/workflowEnum.ts
+++ b/src/enums/workflowEnum.ts
@@ -6,5 +6,7 @@
  */
 
 export enum PageEnum {
-  TODO_TASK_PAGE = '/workflow/task/index',
+  TODO_TASK_PAGE = '/workflow/transaction/todo',
+  TASK_FORM_PAGE = '/workflow/task/taskForm',
+  TASK_FORM_VIEW_PAGE = '/workflow/task/taskViewForm'
 }
diff --git a/src/views/workflow/extension/form/FormCategoryModal.vue b/src/views/workflow/extension/form/FormCategoryModal.vue
index 30cd2c0..3bf8734 100644
--- a/src/views/workflow/extension/form/FormCategoryModal.vue
+++ b/src/views/workflow/extension/form/FormCategoryModal.vue
@@ -10,81 +10,81 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-/**
- * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
- * 采用vben-动态表格表单封装组件编写,采用 setup 写法
- * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
- * author wangxiang4
- */
-import { ref, unref } from 'vue';
-import { BasicForm, useForm } from '/@/components/Form/index';
-import { formCategorySchema } from './form.data';
-import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
-import { listFormCategory, getFormCategory, addFormCategory, editFormCategory } from '/@/api/platform/workflow/extension/controller/formCategory';
-import { listToTree } from '/@/utils/helper/treeHelper';
+  /**
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用vben-动态表格表单封装组件编写,采用 setup 写法
+   * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
+   * author wangxiang4
+   */
+  import { ref, unref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formCategorySchema } from './form.data';
+  import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
+  import { listFormCategory, getFormCategory, addFormCategory, editFormCategory } from '/@/api/platform/workflow/extension/controller/formCategory';
+  import { listToTree } from '/@/utils/helper/treeHelper';
 
-/** 通用变量统一声明区域 */
-const tag = ref<Nullable<string>>('');
-/** https://v3.cn.vuejs.org/api/options-data.html#emits */
-const emit = defineEmits(['success', 'register']);
-const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, updateSchema }] = useForm({
-  labelWidth: 100,
-  schemas: formCategorySchema,
-  showActionButtonGroup: false,
-  baseColProps: { span: 24 }
-});
-const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
-  // 处理清除脏数据
-  await resetFields();
-  await clearValidate();
-  // 处理设置数据
-  tag.value = data._tag;
-  const rootTree = { id: '0', name: '顶级分类', children: [] };
-  rootTree.children = listToTree(await listFormCategory());
-  await updateSchema({
-    field: 'parentId',
-    componentProps: {
-      treeData: [rootTree]
-    }
+  /** 通用变量统一声明区域 */
+  const tag = ref<Nullable<string>>('');
+  /** https://v3.cn.vuejs.org/api/options-data.html#emits */
+  const emit = defineEmits(['success', 'register']);
+  const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, updateSchema }] = useForm({
+    labelWidth: 100,
+    schemas: formCategorySchema,
+    showActionButtonGroup: false,
+    baseColProps: { span: 24 }
   });
-  const id = data.record?.id;
-  const props: Partial<ModalProps> = { confirmLoading: false };
-  // 采用tag标签区分操作
-  switch (unref(tag)) {
-    case 'add':
-      props.title = '新增表单分类';
-      id && await setFieldsValue({ parentId: id });
-      break;
-    case 'edit':
-      props.title = '编辑表单分类';
-      await setFieldsValue(await getFormCategory(id));
-      break;
-  }
-  // 尾部:设置处理后的最终配置数据
-  setModalProps(props);
-});
-
-/** 处理弹出框提交 */
-async function handleSubmit() {
-  try {
-    // 提取验证数据
-    const formData = await validate();
-    // 处理提交之前逻辑
-    setModalProps({ confirmLoading: true });
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
+    // 处理清除脏数据
+    await resetFields();
+    await clearValidate();
+    // 处理设置数据
+    tag.value = data._tag;
+    const rootTree = { id: '0', name: '顶级分类', children: [] };
+    rootTree.children = listToTree(await listFormCategory());
+    await updateSchema({
+      field: 'parentId',
+      componentProps: {
+        treeData: [rootTree]
+      }
+    });
+    const id = data.record?.id;
+    const props: Partial<ModalProps> = { confirmLoading: false };
     // 采用tag标签区分操作
     switch (unref(tag)) {
       case 'add':
-        await addFormCategory(formData);
+        props.title = '新增表单分类';
+        id && await setFieldsValue({ parentId: id });
         break;
       case 'edit':
-        await editFormCategory(formData);
+        props.title = '编辑表单分类';
+        await setFieldsValue(await getFormCategory(id));
         break;
     }
-    // 处理提交完成之后逻辑
-    closeModal();
-    emit('success');
-  } finally {
-    setModalProps({ confirmLoading: false });
+    // 尾部:设置处理后的最终配置数据
+    setModalProps(props);
+  });
+
+  /** 处理弹出框提交 */
+  async function handleSubmit() {
+    try {
+      // 提取验证数据
+      const formData = await validate();
+      // 处理提交之前逻辑
+      setModalProps({ confirmLoading: true });
+      // 采用tag标签区分操作
+      switch (unref(tag)) {
+        case 'add':
+          await addFormCategory(formData);
+          break;
+        case 'edit':
+          await editFormCategory(formData);
+          break;
+      }
+      // 处理提交完成之后逻辑
+      closeModal();
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
   }
-}
 </script>
diff --git a/src/views/workflow/extension/form/FormModal.vue b/src/views/workflow/extension/form/FormModal.vue
index 3d0f52a..d31b258 100644
--- a/src/views/workflow/extension/form/FormModal.vue
+++ b/src/views/workflow/extension/form/FormModal.vue
@@ -10,71 +10,71 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-/**
- * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
- * 采用vben-动态表格表单封装组件编写,采用 setup 写法
- * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
- * author wangxiang4
- */
-import { ref, unref } from 'vue';
-import { BasicForm, useForm } from '/@/components/Form/index';
-import { formSchema } from './form.data';
-import { addFormDefinition, editFormDefinition, getFormDefinition } from '/@/api/platform/workflow/extension/controller/formDefinition';
-import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
+  /**
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用vben-动态表格表单封装组件编写,采用 setup 写法
+   * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
+   * author wangxiang4
+   */
+  import { ref, unref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formSchema } from './form.data';
+  import { addFormDefinition, editFormDefinition, getFormDefinition } from '/@/api/platform/workflow/extension/controller/formDefinition';
+  import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
 
-/** 通用变量统一声明区域 */
-const tag = ref<Nullable<string>>('');
-/** https://v3.cn.vuejs.org/api/options-data.html#emits */
-const emit = defineEmits(['success', 'register']);
-const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, updateSchema }] = useForm({
-  labelWidth: 100,
-  schemas: formSchema,
-  showActionButtonGroup: false,
-  baseColProps: { span: 24 }
-});
-const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
-  // 处理清除脏数据
-  await resetFields();
-  await clearValidate();
-  // 处理设置数据
-  tag.value = data._tag;
-  const id = data.record?.id;
-  const props: Partial<ModalProps> = { confirmLoading: false };
-  // 采用tag标签区分操作
-  switch (unref(tag)) {
-    case 'add':
-      props.title = '新增流程表单';
-      break;
-    case 'edit':
-      props.title = '编辑流程表单';
-      await setFieldsValue(await getFormDefinition(id));
-      break;
-  }
-  // 尾部:设置处理后的最终配置数据
-  setModalProps(props);
-});
-
-/** 处理弹出框提交 */
-async function handleSubmit() {
-  try {
-    // 提取验证数据
-    const formData = await validate();
-    // 处理提交之前逻辑
-    setModalProps({ confirmLoading: true });
+  /** 通用变量统一声明区域 */
+  const tag = ref<Nullable<string>>('');
+  /** https://v3.cn.vuejs.org/api/options-data.html#emits */
+  const emit = defineEmits(['success', 'register']);
+  const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, updateSchema }] = useForm({
+    labelWidth: 100,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    baseColProps: { span: 24 }
+  });
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
+    // 处理清除脏数据
+    await resetFields();
+    await clearValidate();
+    // 处理设置数据
+    tag.value = data._tag;
+    const id = data.record?.id;
+    const props: Partial<ModalProps> = { confirmLoading: false };
     // 采用tag标签区分操作
     switch (unref(tag)) {
       case 'add':
-        await addFormDefinition(formData);
+        props.title = '新增流程表单';
         break;
       case 'edit':
-        await editFormDefinition(formData);
+        props.title = '编辑流程表单';
+        await setFieldsValue(await getFormDefinition(id));
         break;
     }
-    // 处理提交完成之后逻辑
-    closeModal();
-    emit('success');
-  } finally {
-    setModalProps({ confirmLoading: false });
+    // 尾部:设置处理后的最终配置数据
+    setModalProps(props);
+  });
+
+  /** 处理弹出框提交 */
+  async function handleSubmit() {
+    try {
+      // 提取验证数据
+      const formData = await validate();
+      // 处理提交之前逻辑
+      setModalProps({ confirmLoading: true });
+      // 采用tag标签区分操作
+      switch (unref(tag)) {
+        case 'add':
+          await addFormDefinition(formData);
+          break;
+        case 'edit':
+          await editFormDefinition(formData);
+          break;
+      }
+      // 处理提交完成之后逻辑
+      closeModal();
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
   }
-}
 </script>
diff --git a/src/views/workflow/extension/form/helper/WorkflowFormDesign.vue b/src/views/workflow/extension/form/helper/WorkflowFormDesign.vue
index 19d421c..cb38320 100644
--- a/src/views/workflow/extension/form/helper/WorkflowFormDesign.vue
+++ b/src/views/workflow/extension/form/helper/WorkflowFormDesign.vue
@@ -90,7 +90,7 @@
   });
 
   function handleVisibleChange(visible: boolean) {
-    !visible && state.formDesignApp.unmount();
+    !visible && state.formDesignApp?.unmount();
   }
 
   /** 处理弹出框提交 */
diff --git a/src/views/workflow/extension/formJson/FormJsonModal.vue b/src/views/workflow/extension/formJson/FormJsonModal.vue
index b4cf8e4..a1984d1 100644
--- a/src/views/workflow/extension/formJson/FormJsonModal.vue
+++ b/src/views/workflow/extension/formJson/FormJsonModal.vue
@@ -11,55 +11,55 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-import { reactive } from 'vue';
-import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
-import { loadMicroApp, MicroApp } from 'qiankun';
-import { getSubDefineProps } from '/@/qiankun/state';
-import { GlStateEnum } from '/@/enums/microAppEnum';
-import { useMicroAppStore } from '/@/store/modules/microApp';
-import { apps } from '/@/qiankun/apps';
-import { FORM_DESIGN_APP_COMPONENTS } from '/@/enums/microAppEnum';
+  import { reactive } from 'vue';
+  import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
+  import { loadMicroApp, MicroApp } from 'qiankun';
+  import { getSubDefineProps } from '/@/qiankun/state';
+  import { GlStateEnum } from '/@/enums/microAppEnum';
+  import { useMicroAppStore } from '/@/store/modules/microApp';
+  import { apps } from '/@/qiankun/apps';
+  import { FORM_DESIGN_APP_COMPONENTS } from '/@/enums/microAppEnum';
 
-interface TableState {
-  formDesignApp: MicroApp;
-}
+  interface TableState {
+    formDesignApp: MicroApp;
+  }
 
-const state = reactive<TableState>({
-  formDesignApp: undefined!,
-});
-const formPreviewProps = {
-  style: { height: 'calc(100vh - 160px)' },
-  options: {},
-  disabled: false,
-  readonly: false,
-  formSubmitSuccess: () => {},
-  formSubmitError: () => {},
-  formResetChange: () => {}
-};
-const emit = defineEmits(['success', 'register']);
-const microAppStore = useMicroAppStore();
-const [registerModal, { setModalProps, closeModal, changeLoading }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
-  changeLoading();
-  state.formDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'form-design'), {
-    container: '#formPreview',
-    props: {
-      ...getSubDefineProps(),
-      // 表单设计器props
-      [GlStateEnum.FORM_DESIGN_APP_PROPS_KEY]: formPreviewProps,
-      mountApp: FORM_DESIGN_APP_COMPONENTS.PREVIEW
-    }
-  }), { sandbox: { experimentalStyleIsolation: true }});
-  state.formDesignApp.mountPromise.then(() => {
-    changeLoading(false);
+  const state = reactive<TableState>({
+    formDesignApp: undefined!,
+  });
+  const formPreviewProps = {
+    style: { height: 'calc(100vh - 160px)' },
+    options: {},
+    disabled: false,
+    readonly: false,
+    formSubmitSuccess: () => {},
+    formSubmitError: () => {},
+    formResetChange: () => {}
+  };
+  const emit = defineEmits(['success', 'register']);
+  const microAppStore = useMicroAppStore();
+  const [registerModal, { setModalProps, closeModal, changeLoading }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
+    changeLoading();
+    state.formDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'form-design'), {
+      container: '#formPreview',
+      props: {
+        ...getSubDefineProps(),
+        // 表单设计器props
+        [GlStateEnum.FORM_DESIGN_APP_PROPS_KEY]: formPreviewProps,
+        mountApp: FORM_DESIGN_APP_COMPONENTS.PREVIEW
+      }
+    }), { sandbox: { experimentalStyleIsolation: true }});
+    state.formDesignApp.mountPromise.then(() => {
+      changeLoading(false);
+    });
+    data?.json && (formPreviewProps.options = eval('(' + data.json + ')') );
+    const props: Partial<ModalProps> = { confirmLoading: false };
+    props.title = '预览流程表单';
+    setModalProps(props);
   });
-  data?.json && (formPreviewProps.options = eval('(' + data.json + ')') );
-  const props: Partial<ModalProps> = { confirmLoading: false };
-  props.title = '预览流程表单';
-  setModalProps(props);
-});
 
-function handleVisibleChange(visible: boolean) {
-  !visible && state.formDesignApp.unmount();
-}
+  function handleVisibleChange(visible: boolean) {
+    !visible && state.formDesignApp.unmount();
+  }
 
 </script>
diff --git a/src/views/workflow/model/helper/WorkflowModelDesign.vue b/src/views/workflow/model/helper/WorkflowModelDesign.vue
index d8e2d47..d389963 100644
--- a/src/views/workflow/model/helper/WorkflowModelDesign.vue
+++ b/src/views/workflow/model/helper/WorkflowModelDesign.vue
@@ -77,7 +77,7 @@
     }, 100);
   });
   function handleVisibleChange(visible: boolean) {
-    !visible && state.workflowDesignApp.unmount();
+    !visible && state.workflowDesignApp?.unmount();
   }
 </script>
 <style lang="less">
diff --git a/src/views/workflow/process/index.vue b/src/views/workflow/process/index.vue
index f235586..31dbb4f 100644
--- a/src/views/workflow/process/index.vue
+++ b/src/views/workflow/process/index.vue
@@ -52,6 +52,7 @@
   import { useUserStore } from '/@/store/modules/user';
   import { formatToDateTime } from '/@/utils/dateUtil';
   import { useRouter } from 'vue-router';
+  import { PageEnum } from '/@/enums/workflowEnum';
 
   /** 类型规范统一声明定义区域 */
   interface TableState {
@@ -108,7 +109,7 @@
         const formTitle = `${userStore.getUserInfo.nickName} 在 ${formatToDateTime()} 发起了 [${record?.name}]`;
         const data = await getTaskDefinition( { processDefId: record?.id });
         await push({
-          path: '/workflow/task/taskForm',
+          path: PageEnum.TASK_FORM_PAGE,
           query: {
             _meta: 'y',
             processDefId: record?.id,
diff --git a/src/views/workflow/task/HistoryTask.vue b/src/views/workflow/task/HistoryTask.vue
new file mode 100644
index 0000000..aa0e1a6
--- /dev/null
+++ b/src/views/workflow/task/HistoryTask.vue
@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction :actions="[
+            {
+              label: '办理',
+              icon: 'fa6-regular:pen-to-square',
+              onClick: handleTodo.bind(null, record)
+            },
+            {
+              label: '进度',
+              icon: 'fa6-solid:bars-progress',
+              onClick: handleTrace.bind(null, record)
+            }]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <WorkflowChartModal @register="registerModal"/>
+  </div>
+</template>
+
+<script lang="ts">
+  /**
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用vben-动态表格表单封装组件编写,不采用 setup 写法
+   * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
+   * author wangxiang4
+   */
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { columns, searchFormSchema } from './task.data';
+  import { listTodoTask, getTaskDefinition } from '/@/api/platform/workflow/controller/task';
+  import { PageEnum } from '/@/enums/workflowEnum';
+  import { useRouter } from 'vue-router';
+  import WorkflowChartModal from './popups/WorkflowChartModal.vue';
+
+  export default defineComponent({
+    name: 'WorkflowTodoTask',
+    components: {
+      WorkflowChartModal,
+      BasicTable,
+      TableAction,
+    },
+    setup() {
+      const [registerModal, { openModal }] = useModal();
+      const { push } = useRouter();
+      const [registerTable] = useTable({
+        api: listTodoTask,
+        rowKey: 'id',
+        columns,
+        formConfig: {
+          compact: true,
+          labelWidth: 100,
+          schemas: searchFormSchema,
+          autoSubmitOnEnter: true,
+          showAdvancedButton: true,
+          autoAdvancedLine: 3,
+          fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']]
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        clickToRowSelect: false,
+        showIndexColumn: false,
+        actionColumn: {
+          width: 240,
+          title: '操作',
+          dataIndex: 'action',
+          fixed: false
+        },
+      });
+
+      async function handleTodo(record: Recordable) {
+        const { taskInfo, vars } = record;
+        const task = await getTaskDefinition({
+          taskId: taskInfo.id,
+          taskName: taskInfo.name,
+          taskDefKey: taskInfo.taskDefKey,
+          processInsId: taskInfo.processInsId,
+          processDefId: taskInfo.processDefId,
+          processDefKey: taskInfo.processDefKey
+        });
+        await push({
+          path: PageEnum.TASK_FORM_PAGE,
+          query: {
+            _meta: 'y',
+            title: `审批【${taskInfo.name || ''}】`,
+            formTitle: `${vars.title}`,
+            formType: task.formType,
+            formKey: task.formKey,
+            formReadOnly: String(task.formReadOnly),
+            processInsId: task.processInsId,
+            processDefId: task.processDefId,
+            processDefKey: task.processDefKey,
+            taskId: task.taskId,
+            taskDefKey: task.taskDefKey,
+            businessId: task.businessId
+          }
+        });
+      }
+
+      function handleTrace(record: Recordable) {
+        openModal(true, { record: record.taskInfo });
+      }
+
+      return {
+        handleTodo,
+        handleTrace,
+        registerTable,
+        registerModal,
+      };
+    }
+  });
+</script>
diff --git a/src/views/workflow/task/TaskForm.vue b/src/views/workflow/task/TaskForm.vue
index 443bb0a..c4f8d66 100644
--- a/src/views/workflow/task/TaskForm.vue
+++ b/src/views/workflow/task/TaskForm.vue
@@ -26,7 +26,7 @@
                      :businessId="state.businessId"
           />
         </ATabPane>
-        <ATabPane key="processInfo">
+        <ATabPane v-if="state.processInsId" key="processInfo">
           <template #tab>
             <span>
               <Icon icon="fa6-solid:money-bill-wheat"/>流程信息
@@ -42,7 +42,7 @@
           </template>
           <WorkflowChartModel ref="workflowChart"/>
         </ATabPane>
-        <ATabPane key="flowRecord">
+        <ATabPane v-if="state.processInsId" key="flowRecord">
           <template #tab>
             <span>
               <Icon icon="fa6-solid:bars-progress"/>流转记录
diff --git a/src/views/workflow/task/WorkflowChartModel.vue b/src/views/workflow/task/WorkflowChartModel.vue
index 493120d..0fbd7d5 100644
--- a/src/views/workflow/task/WorkflowChartModel.vue
+++ b/src/views/workflow/task/WorkflowChartModel.vue
@@ -34,7 +34,7 @@
       state.loading = true;
       // 处理流程图xml数据
       try {
-        if (this.processInsId) {
+        if (processInsId) {
           state.bpmnData = await getProcessInsFlowChart(processInsId);
         } else {
           const bpmnXml = await getProcessDefFlowChart(processDefId);
diff --git a/src/views/workflow/task/index.vue b/src/views/workflow/task/index.vue
new file mode 100644
index 0000000..b479758
--- /dev/null
+++ b/src/views/workflow/task/index.vue
@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '办理',
+                icon: 'fa6-regular:pen-to-square',
+                onClick: handleTodo.bind(null, record)
+              },
+              {
+                label: '进度',
+                icon: 'fa6-solid:bars-progress',
+                onClick: handleTrace.bind(null, record)
+              }]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <WorkflowChartModal @register="registerModal"/>
+  </div>
+</template>
+
+<script lang="ts">
+  /**
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用vben-动态表格表单封装组件编写,不采用 setup 写法
+   * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
+   * author wangxiang4
+   */
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { columns, searchFormSchema } from './task.data';
+  import { listTodoTask, getTaskDefinition } from '/@/api/platform/workflow/controller/task';
+  import { PageEnum } from '/@/enums/workflowEnum';
+  import { useRouter } from 'vue-router';
+  import WorkflowChartModal from './popups/WorkflowChartModal.vue';
+
+  export default defineComponent({
+    name: 'WorkflowTodoTask',
+    components: {
+      WorkflowChartModal,
+      BasicTable,
+      TableAction,
+    },
+    setup() {
+      const [registerModal, { openModal }] = useModal();
+      const { push } = useRouter();
+      const [registerTable] = useTable({
+        api: listTodoTask,
+        rowKey: 'id',
+        columns,
+        formConfig: {
+          compact: true,
+          labelWidth: 100,
+          schemas: searchFormSchema,
+          autoSubmitOnEnter: true,
+          showAdvancedButton: true,
+          autoAdvancedLine: 3,
+          fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']]
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        clickToRowSelect: false,
+        showIndexColumn: false,
+        actionColumn: {
+          width: 240,
+          title: '操作',
+          dataIndex: 'action',
+          fixed: false
+        },
+      });
+
+      async function handleTodo(record: Recordable) {
+        const { taskInfo, vars } = record;
+        const task = await getTaskDefinition({
+          taskId: taskInfo.id,
+          taskName: taskInfo.name,
+          taskDefKey: taskInfo.taskDefKey,
+          processInsId: taskInfo.processInsId,
+          processDefId: taskInfo.processDefId,
+          processDefKey: taskInfo.processDefKey
+        });
+        await push({
+          path: PageEnum.TASK_FORM_PAGE,
+          query: {
+            _meta: 'y',
+            title: `审批【${taskInfo.name || ''}】`,
+            formTitle: `${vars.title}`,
+            formType: task.formType,
+            formKey: task.formKey,
+            formReadOnly: String(task.formReadOnly),
+            processInsId: task.processInsId,
+            processDefId: task.processDefId,
+            processDefKey: task.processDefKey,
+            taskId: task.taskId,
+            taskDefKey: task.taskDefKey,
+            businessId: task.businessId
+          }
+        });
+      }
+
+      function handleTrace(record: Recordable) {
+        openModal(true, { record: record.taskInfo });
+      }
+
+      return {
+        handleTodo,
+        handleTrace,
+        registerTable,
+        registerModal,
+      };
+    }
+  });
+</script>
diff --git a/src/views/workflow/task/popups/WorkflowChartModal.vue b/src/views/workflow/task/popups/WorkflowChartModal.vue
new file mode 100644
index 0000000..77c8988
--- /dev/null
+++ b/src/views/workflow/task/popups/WorkflowChartModal.vue
@@ -0,0 +1,88 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    defaultFullscreen
+    :canFullscreen="false"
+    :showCancelBtn="false"
+    :showOkBtn="false"
+    @register="registerModal"
+    @visible-change="handleVisibleChange"
+  >
+    <div id="workflowChart"/>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import { loadMicroApp, MicroApp } from 'qiankun';
+  import { getSubDefineProps } from '/@/qiankun/state';
+  import { GlStateEnum, WORKFLOW_DESIGN_APP_COMPONENTS } from '/@/enums/microAppEnum';
+  import { useMicroAppStore } from '/@/store/modules/microApp';
+  import { apps } from '/@/qiankun/apps';
+  import { getFlowChart as getProcessDefFlowChart } from '/@/api/platform/workflow/controller/process';
+  import { getFlowChart as getProcessInsFlowChart } from '/@/api/platform/workflow/controller/task';
+  import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  interface WindowState {
+    workflowDesignApp: MicroApp;
+    bpmnData: Recordable;
+  }
+
+  const state = reactive<WindowState>({
+    workflowDesignApp: undefined!,
+    bpmnData: {},
+  });
+
+  const workflowDesignProps = {
+    style: { 'min-height': '100vh' },
+  };
+  const emit = defineEmits(['register']);
+  const microAppStore = useMicroAppStore();
+  const { createMessage } = useMessage();
+  const [registerModal, { setModalProps, closeModal, changeLoading }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
+    const props: Partial<ModalProps> = { title: '查看进度' };
+    const { processInsId, processDefId } = data.record || {};
+    if (processInsId || processDefId) {
+      changeLoading();
+      try {
+        if (processInsId) {
+          state.bpmnData = await getProcessInsFlowChart(processInsId);
+        } else {
+          const bpmnXml = await getProcessDefFlowChart(processDefId);
+          state.bpmnData = { bpmnXml };
+        }
+        state.workflowDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'workflow-design'), {
+          container: '#workflowChart',
+          props: {
+            ...getSubDefineProps(),
+            mountApp: WORKFLOW_DESIGN_APP_COMPONENTS.CHART,
+            [GlStateEnum.WORKFLOW_DESIGN_APP_PROPS_KEY]: workflowDesignProps
+          }
+        }), { sandbox: { experimentalStyleIsolation: true }});
+        state.workflowDesignApp.mountPromise.then(() => {
+          const workflowChartApp: Recordable = microAppStore.getWorkflowDesignApp(WORKFLOW_DESIGN_APP_COMPONENTS.CHART),
+                workflowRef: Recordable = workflowChartApp.getRef().$refs['workflow-chart'];
+          workflowRef.setHighlightImportDiagram(state.bpmnData);
+          changeLoading(false);
+        });
+      } catch(e: any) {
+        createMessage.error(e);
+        changeLoading(false);
+      }
+    } else createMessage.error('无法打开流程图,没有关联流程图ID!');
+    setModalProps(props);
+  });
+
+  function handleVisibleChange(visible: boolean) {
+    !visible && state.workflowDesignApp?.unmount();
+  }
+
+</script>
+<style lang="less">
+  .ant-modal {
+    .ant-modal-body > .scrollbar {
+      padding: 0;
+    }
+  }
+</style>
+
diff --git a/src/views/workflow/task/task.data.ts b/src/views/workflow/task/task.data.ts
new file mode 100644
index 0000000..d0fbc01
--- /dev/null
+++ b/src/views/workflow/task/task.data.ts
@@ -0,0 +1,58 @@
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '流程标题',
+    dataIndex: ['vars', 'title'],
+    width: 200,
+  },
+  {
+    title: '流程名称',
+    dataIndex: 'processDefName',
+    width: 200,
+  },
+  {
+    title: '当前环节',
+    dataIndex:  ['taskInfo', 'name'],
+    width: 150,
+    customRender: ({ record }) => {
+      const taskName = record.taskInfo?.name;
+      return h(Tag, { color: 'processing' }, () =>  taskName);
+    }
+  },
+  {
+    title: '流程发起人',
+    dataIndex: ['vars', 'userName'],
+    width: 150
+  },
+  {
+    title: '创建时间',
+    dataIndex: ['taskInfo', 'createTime'],
+    width: 200
+  }
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'title',
+    label: '流程标题',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入流程标题',
+    },
+    colProps: { span: 8 }
+  },
+  {
+    field: 'dateRange',
+    label: '创建时间',
+    component: 'RangePicker',
+    componentProps: {
+      style: { width:'100%' },
+      valueFormat: 'YYYY-MM-DD',
+      placeholder: ['开始日期','结束日期']
+    },
+    colProps: { span: 8 }
+  }
+];