diff --git a/src/views/super/bpm/process/personalOffice/myCcTask/CcTaskListContent.vue b/src/views/super/bpm/process/personalOffice/myCcTask/CcTaskListContent.vue
new file mode 100644
index 0000000..0cefd11
--- /dev/null
+++ b/src/views/super/bpm/process/personalOffice/myCcTask/CcTaskListContent.vue
@@ -0,0 +1,104 @@
+<template>
+  <BasicTable @register="registerTable">
+    <template #action="{ record }">
+      <TableAction :actions="getTableAction(record)" />
+    </template>
+  </BasicTable>
+  <TaskHandleModal @register="registerHistoryModal"></TaskHandleModal>
+</template>
+
+<script>
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { columns, readColumns, searchFormSchema } from './task.cc.data';
+  import { list, markRead } from './task.cc.api';
+  import { getTaskInfoForHistory } from '../myHandleTask/useTaskList';
+  import TaskHandleModal from '../myHandleTask/modal/TaskHandleModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  export default {
+    name: 'CcTaskListContent',
+    components: {
+      BasicTable,
+      TaskHandleModal,
+      TableAction,
+    },
+    props: {
+      isRead: { type: Number, default: 0 },
+      designScope: { type: String, default: 'my-cc-task-list' },
+      showReadAction: { type: Boolean, default: false },
+    },
+    setup(props) {
+      const { createMessage } = useMessage();
+
+      const tableColumns = props.isRead === 1 ? readColumns : columns;
+
+      const { tableContext } = useListPage({
+        designScope: props.designScope,
+        pagination: true,
+        tableProps: {
+          api: (params) => list({ ...params, isRead: props.isRead }),
+          columns: tableColumns,
+          pagination: { pageSize: 12, defaultPageSize: 12 },
+          showIndexColumn: true,
+          showTableSetting: true,
+          canResize: false,
+          scroll: { x: 1600 },
+          actionColumn: { dataIndex: 'action', fixed: 'right' },
+          formConfig: {
+            schemas: searchFormSchema,
+            autoAdvancedCol: 4,
+            baseColProps: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 6 },
+            actionColOptions: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 6 },
+          },
+        },
+      });
+      const [registerTable, { reload }] = tableContext;
+      const [registerHistoryModal, { openModal: openHistoryModal }] = useModal();
+
+      function getTableAction(record) {
+        const actions = [];
+        if (props.isRead === 0 && props.showReadAction) {
+          actions.push({
+            label: '标记已阅',
+            onClick: handleMarkRead.bind(null, record),
+          });
+        }
+        actions.push({
+          label: '查看详情',
+          onClick: showHistory.bind(null, record),
+        });
+        return actions;
+      }
+
+      async function showHistory(record) {
+        let { formData, formUrl } = await getTaskInfoForHistory(record);
+        formData['PROCESS_TAB_TYPE'] = 'history';
+        openHistoryModal(true, {
+          formData,
+          formUrl,
+          title: '流程历史',
+        });
+      }
+
+      async function handleMarkRead(record) {
+        try {
+          await markRead(record.id);
+          createMessage.success('已标记为已阅');
+          reload();
+        } catch (e) {
+          createMessage.error('标记已阅失败');
+        }
+      }
+
+      return {
+        registerTable,
+        getTableAction,
+        registerHistoryModal,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>