feat: 对接档案管理待归档、已归档列表并显示任务详情弹窗，待归档归档样式调整

src/api/audit/archive.js

@@ -0,0 +1,12 @@
+import request from '@/utils/request'
+
+const url = window.context.form
+
+// 归档列表
+export function getArchiveList(data) {
+  return request({
+    url: url + '/api/enterprise/reviewTask/archivePageList',
+    method: 'post',
+    data: data,
+  })
+}

src/views/costAudit/auditInfo/archivesManage/archiveList.vue

@@ -1,223 +1,303 @@
 <template>
-  <div class="pending-archive-list">
+  <div class="archive-list">
     <div v-if="activeTab == 'list'">
       <!-- 搜索表单 -->
-      <!-- <CostAuditForm :form-items="searchFormConfig.formItems" :inline="searchFormConfig.inline"
-        :gutter="searchFormConfig.gutter" :form-data="searchForm" :buttons="searchFormConfig.buttons"
-        :size="searchFormConfig.size" @submit="handleSearch" @reset="handleReset" /> -->
+      <div class="search-panel">
+        <el-form :inline="true" :model="searchForm" class="search-form">
+          <el-form-item label="年度:" prop="projectYear">
+            <el-date-picker
+              v-model="searchForm.projectYear"
+              type="year"
+              placeholder="选择年"
+              format="yyyy"
+              value-format="yyyy"
+            ></el-date-picker>
+          </el-form-item>
+
+          <el-form-item label="监审项目名称:">
+            <el-input
+              v-model="searchForm.projectName"
+              placeholder="请输入监审项目名称"
+              clearable
+              style="width: 200px"
+            ></el-input>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="primary" @click="handleSearch">搜索</el-button>
+            <el-button plain type="primary" @click="handleReset">
+              重置
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
 
       <!-- 数据表格 -->
-      <CostAuditTable
-        :table-data="tableData"
-        :columns="tableColumns"
-        show-index
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        style="width: 100%"
+        border
+        default-expand-all
+        row-key="id"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
       >
-        <template #projectName="{ row }">
-          <div class="cell-content cell-content--left">
-            <span class="project-link" @click="handleDetail(row)">
-              {{ row.projectName }}
+        <el-table-column
+          type="index"
+          label="序号"
+          width="80"
+          header-align="center"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <!-- 只显示父节点的序号 -->
+            <span v-if="scope.row.children || !scope.row.isSubTask">
+              {{ getParentNodeIndex(scope.row) }}
             </span>
-          </div>
-        </template>
-        <template #action="{ row }">
-          <el-button type="text" size="small" @click="handleTaskDetail(row)">
-            任务详情
-          </el-button>
-          <el-button type="text" size="small" @click="handleView(row)">
-            查看
-          </el-button>
-        </template>
-      </CostAuditTable>
-    </div>
-    <div v-if="activeTab == 'detail'">
-      <el-breadcrumb
-        separator-class="el-icon-arrow-right"
-        style="margin-bottom: 20px"
-      >
-        <el-breadcrumb-item>
-          <a href="javascript:void(0)" @click="backToList">已归档列表</a>
-        </el-breadcrumb-item>
-        <el-breadcrumb-item>任务详情</el-breadcrumb-item>
-      </el-breadcrumb>
-      <taskDetail />
-    </div>
-    <div v-if="activeTab == 'view'">
-      <el-breadcrumb
-        separator-class="el-icon-arrow-right"
-        style="margin-bottom: 20px"
-      >
-        <el-breadcrumb-item>
-          <a href="javascript:void(0)" @click="backToList">已归档列表</a>
-        </el-breadcrumb-item>
-        <el-breadcrumb-item>查看</el-breadcrumb-item>
-      </el-breadcrumb>
-      查看
+            <span v-else></span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="year"
+          label="立项年度"
+          width="100"
+          header-align="center"
+          align="center"
+        />
+        <el-table-column
+          prop="projectName"
+          label="成本监审项目名称"
+          show-overflow-tooltip
+          header-align="center"
+          align="left"
+        >
+          <template slot-scope="scope">
+            <div class="cell-content cell-content--left">
+              <span class="project-link" @click="handleDetail(scope.row)">
+                {{ scope.row.projectName }}
+              </span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="auditObject"
+          label="监审对象"
+          header-align="center"
+          align="left"
+        />
+        <el-table-column
+          prop="auditPeriod"
+          label="监审期间"
+          header-align="center"
+          align="center"
+          width="200"
+        />
+        <el-table-column
+          prop="source"
+          label="立项来源"
+          header-align="center"
+          align="center"
+          width="120"
+        />
+        <el-table-column
+          prop="form"
+          label="监审形式"
+          header-align="center"
+          align="center"
+          width="120"
+        />
+        <el-table-column label="操作" align="center" width="200" fixed="right">
+          <template slot-scope="scope">
+            <span class="action-buttons">
+              <el-button
+                type="text"
+                size="small"
+                @click="handleTaskDetail(scope.row)"
+              >
+                任务详情
+              </el-button>
+              <el-button
+                type="text"
+                size="small"
+                @click="handleView(scope.row)"
+              >
+                查看
+              </el-button>
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        style="margin-top: 10px"
+        background
+        layout="total, sizes, prev, pager, next"
+        :current-page="pagination.currentPage"
+        :page-sizes="[10, 20, 30, 40]"
+        :page-size="pagination.pageSize"
+        :total="pagination.total"
+        @current-change="handleCurrentChange"
+        @size-change="handleSizeChange"
+      />
     </div>
+    <!-- 任务详情弹窗 -->
+    <taskDetail ref="taskDetail" />
   </div>
 </template>
 
 <script>
-  import CostAuditTable from '@/components/costAudit/CostAuditTable.vue'
-  // import CostAuditForm from '@/components/costAudit/CostAuditForm.vue'
-  // import CostAuditDialog from '@/components/costAudit/CostAuditDialog.vue'
-  import taskDetail from '@/views/costAudit/auditInfo/auditManage/taskDetail.vue'
+  import taskDetail from '@/components/task/taskDetail.vue'
+  import { getArchiveList } from '@/api/audit/archive'
   export default {
     name: 'ArchiveList',
     components: {
-      CostAuditTable,
-      // CostAuditForm,
-      // CostAuditDialog,
       taskDetail,
     },
     data() {
       return {
         searchForm: {
-          year: null,
-          area: '',
+          projectYear: '2025',
           projectName: '',
         },
         loading: false,
-        tableData: [
-          {
-            id: 1,
-            year: '2025年',
-            projectName: '省1111内油气管道运输成本监审',
-            auditObject: '山西省油气管道公司、太原市油气公司',
-            auditPeriod: '2022年--2024年',
-            source: '年度计划外',
-            form: '定调价监审',
-          },
-          {
-            id: 2,
-            year: '2026年',
-            projectName: '太原市电网输配电成本监审',
-            auditObject: '太原市热电厂、****热电厂',
-            auditPeriod: '2022年--2024年',
-            source: '年度计划内',
-            form: '定期监审',
-          },
-        ],
+        tableData: [],
+        // 分页配置
+        pagination: {
+          currentPage: 1,
+          pageSize: 10,
+          total: 0,
+        },
         activeTab: 'list',
       }
     },
-    computed: {
-      searchFormConfig() {
-        return {
-          inline: true,
-          gutter: 20,
-          size: 'small',
-          formItems: [
-            {
-              label: '年度：',
-              prop: 'year',
-              type: 'datePicker',
-              clearable: true,
-              span: 8,
-              md: 8,
-              sm: 12,
-              xs: 24,
-              props: {
-                type: 'year',
-                format: 'yyyy', // 添加格式化
-                valueFormat: 'yyyy', // 添加值格式化
-              },
-            },
-            {
-              label: '地区：',
-              prop: 'area',
-              type: 'cascader',
-              clearable: true,
-              props: {
-                options: [
-                  {
-                    value: '1',
-                    label: '山西',
-                    children: [
-                      {
-                        value: '1-1',
-                        label: '太原',
-                      },
-                    ],
-                  },
-                ],
-              },
-              span: 8,
-              md: 8,
-              sm: 12,
-              xs: 24,
-            },
-            {
-              label: '卷宗号:',
-              prop: 'projectName',
-              type: 'input',
-              clearable: true,
-              span: 8,
-              md: 8,
-              sm: 12,
-              xs: 24,
-            },
-          ],
-          buttons: ['query', 'reset'],
+    created() {
+      this.fetchData()
+    },
+    methods: {
+      // 获取父节点的连续序号
+      getParentNodeIndex(row) {
+        // 过滤出所有父节点
+        const parentNodes = this.tableData.filter(
+          (item) =>
+            (item.children && item.children.length > 0) || !item.isSubTask
+        )
+        // 找到当前行在父节点数组中的索引
+        const index = parentNodes.findIndex((item) => item.id === row.id)
+        // 返回序号（索引+1）
+        return index + 1
+      },
+      // 获取数据
+      async fetchData() {
+        try {
+          this.loading = true
+          const params = {
+            currentPage: this.pagination.currentPage,
+            pageSize: this.pagination.pageSize,
+            projectYear: this.searchForm.projectYear,
+            projectName: this.searchForm.projectName,
+            isGd: 1, // 已归档
+          }
+          const response = await getArchiveList(params)
+
+          // 根据API返回格式处理数据
+          if (response && response.value) {
+            // 获取记录列表
+            const records = response.value.records || []
+            // 转换数据格式，将childTasks转换为children以适应表格组件
+            this.tableData = records.map((record) => {
+              return {
+                id: record.id,
+                year: record.projectYear || record.year || '',
+                projectName: record.projectName,
+                auditObject: record.auditedUnitName || record.auditObject || '',
+                auditPeriod: record.auditPeriod || '',
+                source: this.getSourceTypeText(record.sourceType),
+                form: this.getAuditTypeText(record.auditType),
+                isSubTask: record.pid && record.pid !== '0',
+                projectId: record.projectId,
+                auditedUnitId: record.auditedUnitId,
+                taskId: record.id,
+                children: record.childTasks
+                  ? record.childTasks.map((child) => ({
+                      id: child.id,
+                      year: '',
+                      projectName: child.projectName,
+                      auditObject: child.auditedUnitName || '',
+                      auditPeriod: record.auditPeriod || '', // 子任务可能使用父任务的审核期间
+                      source: '',
+                      form: '',
+                      isSubTask: true,
+                      projectId: child.projectId,
+                      auditedUnitId: child.auditedUnitId,
+                      taskId: child.id,
+                    }))
+                  : [],
+              }
+            })
+            // 设置总数
+            this.pagination.total = response.value.total || 0
+          } else {
+            this.tableData = []
+            this.pagination.total = 0
+          }
+        } catch (error) {
+          this.$message.error('加载列表失败')
+          console.error('加载列表失败:', error)
+          this.tableData = []
+          this.pagination.total = 0
+        } finally {
+          this.loading = false
         }
       },
-      tableColumns() {
-        return [
-          {
-            prop: 'year',
-            label: '立项年度',
-            width: 100,
-          },
-          {
-            prop: 'projectName',
-            label: '卷宗号',
-            align: 'left',
-            slotName: 'projectName',
-          },
-          {
-            prop: 'auditObject',
-            label: '成本监审项目名称',
-            align: 'left',
-          },
-          {
-            prop: 'auditPeriod',
-            label: '监审对象',
-            width: 200,
-          },
-          {
-            prop: 'source',
-            label: '监审期间',
-            width: 120,
-          },
-          {
-            prop: 'form',
-            label: '归档人',
-            width: 120,
-          },
-          {
-            label: '操作',
-            width: 200,
-            fixed: 'right',
-            slotName: 'action',
-          },
-        ]
+      // 获取来源类型文本
+      getSourceTypeText(type) {
+        const typeMap = {
+          1: '年度计划内',
+          2: '年度计划外',
+        }
+        return typeMap[type] || type || ''
+      },
+      // 获取审核类型文本
+      getAuditTypeText(type) {
+        const typeMap = {
+          1: '定期监审',
+          2: '定调价监审',
+        }
+        return typeMap[type] || type || ''
       },
-    },
-    methods: {
       handleSearch() {
-        console.log('搜索参数:', this.searchForm)
+        this.pagination.currentPage = 1
+        this.fetchData()
       },
       handleReset() {
         this.searchForm = {
-          year: null,
+          projectYear: '2025',
           projectName: '',
         }
-        this.handleSearch()
+        this.pagination.currentPage = 1
+        this.fetchData()
+      },
+      // 处理分页变化
+      handleCurrentChange(current) {
+        this.pagination.currentPage = current
+        this.fetchData()
+      },
+      handleSizeChange(size) {
+        this.pagination.pageSize = size
+        this.pagination.currentPage = 1
+        this.fetchData()
       },
-      handleDetail(id) {
-        this.activeTab = 'detail'
+      handleDetail(row) {
+        // 可以在这里处理详情点击
+        console.log('详情:', row)
       },
-      handleView(id) {
-        this.activeTab = 'view'
+      handleTaskDetail(row) {
+        // 打开任务详情弹窗
+        this.$refs.taskDetail.open(row, 'chengben')
+      },
+      handleView(row) {
+        // 查看操作，可以打开查看弹窗或跳转
+        console.log('查看:', row)
+        this.$message.info('查看功能待实现')
       },
       backToList() {
         this.activeTab = 'list'
@@ -226,34 +306,44 @@
   }
 </script>
 
-<style scoped>
-  .pending-archive-list {
+<style scoped lang="scss">
+  .archive-list {
+    padding: 20px;
+  }
+
+  .search-panel {
+    margin-bottom: 20px;
     padding: 20px;
+    background-color: #f5f7fa;
+    border-radius: 4px;
   }
 
-  .action-cell {
-    display: flex;
-    gap: 10px;
-    justify-content: center;
+  .action-buttons {
+    display: inline-flex;
+    gap: 8px;
   }
 
   .action-link {
     color: #409eff;
     cursor: pointer;
     text-decoration: none;
-  }
+    transition: color 0.3s;
 
-  .action-link:hover {
-    text-decoration: underline;
+    &:hover {
+      color: #66b1ff;
+      text-decoration: underline;
+    }
   }
 
   .project-link {
     color: #409eff;
     cursor: pointer;
     text-decoration: none;
-  }
+    transition: color 0.3s;
 
-  .project-link:hover {
-    text-decoration: underline;
+    &:hover {
+      color: #66b1ff;
+      text-decoration: underline;
+    }
   }
 </style>

src/views/costAudit/auditInfo/archivesManage/pendingArchiveList.vue

@@ -6,15 +6,17 @@
         <el-form :inline="true" :model="searchForm" class="search-form">
           <el-form-item label="年度:" prop="year">
             <el-date-picker
-              v-model="searchForm.year"
+              v-model="searchForm.projectYear"
               type="year"
               placeholder="选择年"
+              format="yyyy"
+              value-format="yyyy"
             ></el-date-picker>
           </el-form-item>
 
           <el-form-item label="监审项目名称:">
             <el-input
-              v-model="searchForm.unitName"
+              v-model="searchForm.projectName"
               placeholder="请输入监审项目名称"
               clearable
               style="width: 200px"
@@ -22,19 +24,8 @@
           </el-form-item>
 
           <el-form-item>
-            <el-button
-              icon="el-icon-search"
-              type="primary"
-              @click="handleSearch"
-            >
-              搜索
-            </el-button>
-            <el-button
-              plain
-              type="primary"
-              icon="el-icon-refresh"
-              @click="handleReset"
-            >
+            <el-button type="primary" @click="handleSearch">搜索</el-button>
+            <el-button plain type="primary" @click="handleReset">
               重置
             </el-button>
           </el-form-item>
@@ -42,40 +33,129 @@
       </div>
 
       <!-- 数据表格 -->
-      <CostAuditTable
-        :table-data="tableData"
-        :columns="tableColumns"
-        show-index
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        style="width: 100%"
+        border
+        default-expand-all
+        row-key="id"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
       >
-        <template #projectName="{ row }">
-          <div class="cell-content cell-content--left">
-            <span class="project-link" @click="handleDetail(row)">
-              {{ row.projectName }}
+        <el-table-column
+          type="index"
+          label="序号"
+          width="80"
+          header-align="center"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <!-- 只显示父节点的序号 -->
+            <!-- <span v-if="scope.row.children">
+              {{ getParentNodeIndex(scope.row) }}
+            </span> -->
+            <span>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="year"
+          label="立项年度"
+          width="100"
+          header-align="center"
+          align="center"
+        />
+        <el-table-column
+          prop="projectName"
+          label="成本监审项目名称"
+          show-overflow-tooltip
+          header-align="center"
+          align="left"
+        >
+          <template slot-scope="scope">
+            <div class="cell-content cell-content--left">
+              <span class="project-link" @click="handleDetail(scope.row)">
+                {{ scope.row.projectName }}
+              </span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="auditObject"
+          label="监审对象"
+          header-align="center"
+          align="left"
+        />
+        <el-table-column
+          prop="auditPeriod"
+          label="监审期间"
+          header-align="center"
+          align="center"
+          width="200"
+        />
+        <el-table-column
+          prop="source"
+          label="立项来源"
+          header-align="center"
+          align="center"
+          width="120"
+        />
+        <el-table-column
+          prop="form"
+          label="监审形式"
+          header-align="center"
+          align="center"
+          width="120"
+        />
+        <el-table-column label="操作" align="center" width="200" fixed="right">
+          <template slot-scope="scope">
+            <span v-if="!scope.row.isSubTask" class="action-buttons">
+              <el-button
+                type="text"
+                size="small"
+                @click="handleTaskDetail(scope.row)"
+              >
+                任务详情
+              </el-button>
+              <el-button
+                type="text"
+                size="small"
+                @click="handleArchive(scope.row)"
+              >
+                归档
+              </el-button>
             </span>
-          </div>
-        </template>
-        <template #action="{ row }">
-          <el-button type="text" size="small" @click="handleTaskDetail(row)">
-            任务详情
-          </el-button>
-          <el-button type="text" size="small" @click="handleArchive(row)">
-            归档
-          </el-button>
-        </template>
-      </CostAuditTable>
-    </div>
-    <div v-if="activeTab == 'detail'">
-      <el-breadcrumb
-        separator-class="el-icon-arrow-right"
-        style="margin-bottom: 20px"
-      >
-        <el-breadcrumb-item>
-          <a href="javascript:void(0)" @click="backToList">待归档列表</a>
-        </el-breadcrumb-item>
-        <el-breadcrumb-item>任务详情</el-breadcrumb-item>
-      </el-breadcrumb>
-      <taskDetail />
+            <span v-if="scope.row.isSubTask" class="action-buttons">
+              <el-button
+                type="text"
+                size="small"
+                @click="handleTaskDetail(scope.row)"
+              >
+                任务详情
+              </el-button>
+              <el-button
+                type="text"
+                size="small"
+                @click="handleArchive(scope.row)"
+              >
+                归档
+              </el-button>
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        background
+        layout="total, sizes, prev, pager, next"
+        :current-page="pagination.currentPage"
+        :page-sizes="[10, 20, 30, 40]"
+        :page-size="pagination.pageSize"
+        :total="pagination.total"
+        @current-change="handleCurrentChange"
+        @size-change="handleSizeChange"
+      />
     </div>
+    <!-- 任务详情弹窗 -->
+    <taskDetail ref="taskDetail" />
     <div v-if="activeTab == 'archive'" class="archive-container">
       <el-breadcrumb
         separator-class="el-icon-arrow-right"
@@ -290,7 +370,8 @@
   import CostAuditTable from '@/components/costAudit/CostAuditTable.vue'
   // import CostAuditForm from '@/components/costAudit/CostAuditForm.vue'
   import CostAuditDialog from '@/components/costAudit/CostAuditDialog.vue'
-  import taskDetail from '@/views/costAudit/auditInfo/auditManage/taskDetail.vue'
+  import taskDetail from '@/components/task/taskDetail.vue'
+  import { getArchiveList } from '@/api/audit/archive'
   export default {
     name: 'PendingArchiveList',
     components: {
@@ -302,30 +383,17 @@
     data() {
       return {
         searchForm: {
-          year: null,
+          projectYear: '2025',
           projectName: '',
         },
         loading: false,
-        tableData: [
-          {
-            id: 1,
-            year: '2025年',
-            projectName: '省内油气管道运输成本监审',
-            auditObject: '山西省油气管道公司、太原市油气公司',
-            auditPeriod: '2022年--2024年',
-            source: '年度计划外',
-            form: '定调价监审',
-          },
-          {
-            id: 2,
-            year: '2026年',
-            projectName: '太原市电网输配电成本监审',
-            auditObject: '太原市热电厂、****热电厂',
-            auditPeriod: '2022年--2024年',
-            source: '年度计划内',
-            form: '定期监审',
-          },
-        ],
+        tableData: [],
+        // 分页配置
+        pagination: {
+          currentPage: 1,
+          pageSize: 10,
+          total: 0,
+        },
         activeTab: 'list', // list
         currentStep: 0, // 当前步骤 0:资料归纳 1:目录核对 2:档案预览
         archiveTab: 'dataCollect', // 归档页面标签页  dataCollect preview
@@ -684,100 +752,132 @@
         ],
       }
     },
-    computed: {
-      searchFormConfig() {
-        return {
-          inline: true,
-          gutter: 20,
-          size: 'small',
-          formItems: [
-            {
-              label: '年度',
-              prop: 'year',
-              type: 'datePicker',
-              clearable: true,
-              span: 8,
-              md: 8,
-              sm: 12,
-              xs: 24,
-              props: {
-                type: 'year',
-                format: 'yyyy', // 添加格式化
-                valueFormat: 'yyyy', // 添加值格式化
-              },
-            },
-            {
-              label: '项目名称',
-              prop: 'projectName',
-              type: 'input',
-              clearable: true,
-              span: 8,
-              md: 8,
-              sm: 12,
-              xs: 24,
-            },
-          ],
-          buttons: ['query', 'reset'],
+    created() {
+      this.fetchData()
+    },
+    methods: {
+      // 获取父节点的连续序号
+      getParentNodeIndex(row) {
+        // 过滤出所有父节点
+        const parentNodes = this.tableData.filter(
+          (item) => item.children && item.children.length > 0
+        )
+        // 找到当前行在父节点数组中的索引
+        const index = parentNodes.findIndex((item) => item.id === row.id)
+        // 返回序号（索引+1）
+        return index + 1
+      },
+      // 获取数据
+      async fetchData() {
+        try {
+          this.loading = true
+          const params = {
+            currentPage: this.pagination.currentPage,
+            pageSize: this.pagination.pageSize,
+            projectYear: this.searchForm.projectYear,
+            projectName: this.searchForm.projectName,
+            isGd: 0,
+          }
+          const response = await getArchiveList(params)
+
+          // 根据API返回格式处理数据
+          if (response && response.value) {
+            // 获取记录列表
+            const records = response.value.records || []
+            // 转换数据格式，将childTasks转换为children以适应表格组件
+            this.tableData = records.map((record) => {
+              return {
+                id: record.id,
+                year: record.projectYear || record.year || '',
+                projectName: record.projectName,
+                auditObject: record.auditedUnitName || record.auditObject || '',
+                auditPeriod: record.auditPeriod || '',
+                source: this.getSourceTypeText(record.sourceType),
+                form: this.getAuditTypeText(record.auditType),
+                isSubTask: record.pid && record.pid !== '0',
+                projectId: record.projectId,
+                auditedUnitId: record.auditedUnitId,
+                taskId: record.id,
+                children: record.childTasks
+                  ? record.childTasks.map((child) => ({
+                      id: child.id,
+                      year: '',
+                      projectName: child.projectName,
+                      auditObject: child.auditedUnitName || '',
+                      auditPeriod: record.auditPeriod || '', // 子任务可能使用父任务的审核期间
+                      source: '',
+                      form: '',
+                      isSubTask: true,
+                      projectId: child.projectId,
+                      auditedUnitId: child.auditedUnitId,
+                      taskId: child.id,
+                    }))
+                  : [],
+              }
+            })
+            // 设置总数
+            this.pagination.total = response.value.total || 0
+          } else {
+            this.tableData = []
+            this.pagination.total = 0
+          }
+        } catch (error) {
+          this.$message.error('加载列表失败')
+          console.error('加载列表失败:', error)
+          this.tableData = []
+          this.pagination.total = 0
+        } finally {
+          this.loading = false
         }
       },
-      tableColumns() {
-        return [
-          {
-            prop: 'year',
-            label: '立项年度',
-            width: 100,
-          },
-          {
-            prop: 'projectName',
-            label: '成本监审项目名称',
-            align: 'left',
-            slotName: 'projectName',
-          },
-          {
-            prop: 'auditObject',
-            label: '监审对象',
-            align: 'left',
-          },
-          {
-            prop: 'auditPeriod',
-            label: '监审期间',
-            width: 200,
-          },
-          {
-            prop: 'source',
-            label: '立项来源',
-            width: 120,
-          },
-          {
-            prop: 'form',
-            label: '监审形式',
-            width: 120,
-          },
-          {
-            label: '操作',
-            width: 200,
-            fixed: 'right',
-            slotName: 'action',
-          },
-        ]
+      // 获取来源类型文本
+      getSourceTypeText(type) {
+        const typeMap = {
+          1: '年度计划内',
+          2: '年度计划外',
+        }
+        return typeMap[type] || type || ''
+      },
+      // 获取审核类型文本
+      getAuditTypeText(type) {
+        const typeMap = {
+          1: '定期监审',
+          2: '定调价监审',
+        }
+        return typeMap[type] || type || ''
       },
-    },
-    methods: {
       handleSearch() {
-        console.log('搜索参数:', this.searchForm)
+        this.pagination.currentPage = 1
+        this.fetchData()
       },
       handleReset() {
         this.searchForm = {
-          year: null,
+          projectYear: '2025',
           projectName: '',
         }
-        this.handleSearch()
+        this.pagination.currentPage = 1
+        this.fetchData()
+      },
+      // 处理分页变化
+      handleCurrentChange(current) {
+        this.pagination.currentPage = current
+        this.fetchData()
+      },
+      handleSizeChange(size) {
+        this.pagination.pageSize = size
+        this.pagination.currentPage = 1
+        this.fetchData()
+      },
+      handleDetail(row) {
+        // 可以在这里处理详情点击
+        console.log('详情:', row)
       },
       backToList() {
         this.activeTab = 'list'
       },
-      handleTaskDetail(id) {
-        this.activeTab = 'detail'
+      handleTaskDetail(row) {
+        // 打开任务详情弹窗
+        this.$refs.taskDetail.open(row, 'chengben')
       },
       handleArchive(id) {
         this.activeTab = 'archive'
@@ -883,53 +983,175 @@
     margin-top: $base-margin;
     text-align: right;
   }
+
   .archive-container {
-    width: 70%;
+    width: 100%;
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 4px;
+  }
+
+  .search-panel {
+    margin-bottom: 20px;
+    padding: 20px;
+    background-color: #f5f7fa;
+    border-radius: 4px;
+  }
+
+  .project-link {
+    color: #409eff;
+    cursor: pointer;
+    text-decoration: none;
+    transition: color 0.3s;
+
+    &:hover {
+      color: #66b1ff;
+      text-decoration: underline;
+    }
+  }
+
+  .custom-steps {
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto 30px;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .proofread-content {
+    padding: 20px 0;
   }
 
   .preview-content {
     width: 100%;
+    display: flex;
     flex-direction: column;
+
+    .doc-actions {
+      display: flex;
+      justify-content: flex-start;
+      gap: 10px;
+      margin-bottom: 20px;
+      padding: 15px;
+      background-color: #f5f7fa;
+      border-radius: 4px;
+    }
+
     .doc-title {
-      height: 30px;
-      line-height: 30px;
-      border: 1px solid $base-color-default;
-      padding: 5px;
-      color: $base-color-default;
-      margin-top: $base-margin;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      border: 1px solid #dcdfe6;
+      border-radius: 4px 4px 0 0;
+      padding: 0 20px;
+      background: linear-gradient(to right, #409eff, #66b1ff);
+      color: #fff;
+      font-size: 18px;
+      font-weight: 500;
+      margin-top: 0;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
     }
+
     .doc-container {
       display: flex;
+      border: 1px solid #dcdfe6;
+      border-top: none;
+      border-radius: 0 0 4px 4px;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+      min-height: 600px;
+
       .doc-catalogue {
-        padding: 5px;
-        width: 100px;
-        height: 100%;
-        text-align: center;
-        border: 1px solid $base-content-border-color;
+        width: 200px;
+        min-height: 100%;
+        background-color: #fafafa;
+        border-right: 1px solid #dcdfe6;
+        padding: 10px 0;
+
         .doc-catalogue-item {
-          height: 30px;
-          line-height: 30px;
+          height: 40px;
+          line-height: 40px;
+          padding: 0 20px;
+          cursor: pointer;
+          transition: all 0.3s;
+          color: #606266;
+          font-size: 14px;
+          border-left: 3px solid transparent;
+
           &:hover {
-            color: $base-color-default;
-            background-color: $base-content-border-color;
+            color: #409eff;
+            background-color: #ecf5ff;
+            border-left-color: #409eff;
+          }
+
+          &:active {
+            background-color: #b3d8ff;
           }
         }
       }
+
       .doc-content {
         flex: 1;
-        min-height: calc(100vh - 200px);
-        padding: 60px;
-        border: 1px solid $base-content-border-color;
+        min-height: 600px;
+        padding: 40px;
+        background-color: #fff;
+        position: relative;
+
         .doc-content-item {
-          height: 100%;
-          border: 1px solid $base-content-border-color;
-          margin-bottom: $base-margin;
+          width: 100%;
+          min-height: 500px;
+          padding: 20px;
+          background-color: #fafafa;
+          border: 1px solid #e4e7ed;
+          border-radius: 4px;
+          box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
         }
       }
     }
   }
-  .custom-steps {
-    width: 40%; /* 设置宽度 */
-    margin: 0 auto 20px; /* 居中显示并保留底部边距 */
+
+  /* 表格操作按钮样式优化 */
+  .action-buttons {
+    display: inline-flex;
+    gap: 8px;
+  }
+
+  /* 响应式优化 */
+  @media (max-width: 1200px) {
+    .archive-container {
+      padding: 15px;
+    }
+
+    .custom-steps {
+      padding: 15px;
+    }
+
+    .preview-content {
+      .doc-container {
+        flex-direction: column;
+
+        .doc-catalogue {
+          width: 100%;
+          border-right: none;
+          border-bottom: 1px solid #dcdfe6;
+          display: flex;
+          overflow-x: auto;
+
+          .doc-catalogue-item {
+            white-space: nowrap;
+            flex-shrink: 0;
+          }
+        }
+
+        .doc-content {
+          min-height: 400px;
+          padding: 20px;
+        }
+      }
+    }
   }
 </style>