cbjsxt-front-master/src/views/costAudit/auditInfo/auditManage/index.vue

<template>
  <div class="cost-audit-management">
    <!-- 成本审核项目列表页面 -->
    <div class="audit-list-container">
      <div class="search-section">
        <el-input
          v-model="searchQuery"
          placeholder="监审项目名称"
          style="width: 300px; margin-right: 10px"
          clearable
        />
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </div>

      <el-table
        v-loading="loading"
        class="mb10"
        :data="auditProjectList"
        style="width: 100%"
        border
        default-expand-all
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <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 v-else></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="projectName"
          label="成本监审项目名称"
          show-overflow-tooltip
          header-align="center"
          align="left"
        />
        <el-table-column
          prop="auditObject"
          label="监审对象"
          header-align="center"
          align="left"
        />
        <el-table-column
          prop="auditPeriod"
          label="监审期间"
          header-align="center"
          align="center"
          width="120"
        />
        <el-table-column
          prop="source"
          label="立项来源"
          header-align="center"
          align="center"
          width="100"
        />
        <el-table-column
          prop="form"
          label="监审形式"
          header-align="center"
          align="center"
          width="100"
        />
        <el-table-column
          prop="currentNodeName"
          label="状态"
          align="center"
          width="80"
        >
          <template slot-scope="scope">
            <span v-if="!scope.row.isSubTask">
              {{ scope.row.currentNodeName }}
            </span>
            <span v-else>{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="260">
          <template slot-scope="scope">
            <span v-if="!scope.row.isSubTask" class="action-buttons">
              <el-button type="text" @click="handleOpenDetails(scope.row)">
                任务详情
              </el-button>
              <el-button
                v-if="scope.row.currentNode === 'sdshenhe'"
                type="text"
                @click="handleOpenDetails(scope.row)"
              >
                任务办理
              </el-button>
              <el-button type="text" @click="handleCheckRecord(scope.row)">
                备忘录
              </el-button>
            </span>
            <span v-if="scope.row.isSubTask" class="action-buttons">
              <el-button
                v-if="
                  scope.row.currentNode === 'clcs' &&
                  scope.row.status === '审核中'
                "
                type="text"
                @click="handleOpenDetails(scope.row)"
              >
                资料初审
              </el-button>
              <el-button
                v-if="
                  (scope.row.currentNode === 'sdshenhe' ||
                    scope.row.currentNode === 'yjfk') &&
                  scope.row.status === '审核中'
                "
                type="text"
                @click="handleOpenDetails(scope.row)"
              >
                成本审核
              </el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>

    <!-- 详情弹窗组件 -->
    <details-dialog
      :id="selectedProject && selectedProject.id"
      ref="detailsRef"
      :visible.sync="detailsVisible"
      :current-node="selectedProject && selectedProject.currentNode"
      :current-status="selectedProject && selectedProject.status"
      @close="handleDetailsClose"
      @refresh="handleRefresh"
    />
  </div>
</template>

<script>
  import detailsDialog from './details.vue'
  import taskMixins from './taskMixins.js'
  // 成本监审任务列表API
  import { getReviewTaskList } from '@/api/audit/auditIndex'
  export default {
    name: 'CostAuditManagement',
    components: {
      detailsDialog,
    },
    mixins: [taskMixins],
    data() {
      return {
        // 分页相关
        currentPage: 1,
        pageSize: 10,
        total: 0,
        // 搜索相关
        searchQuery: '',
        // 列表数据
        auditProjectList: [],
        // 加载状态
        loading: false,
        // 详情弹窗相关
        detailsVisible: false,
        selectedProject: null,
      }
    },

    created() {
      this.loadAuditProjectList()
    },

    methods: {
      // 获取父节点的连续序号
      getParentNodeIndex(row) {
        // 过滤出所有父节点
        const parentNodes = this.auditProjectList.filter(
          (item) => item.children && item.children.length > 0
        )
        // 找到当前行在父节点数组中的索引
        const index = parentNodes.findIndex((item) => item.id === row.id)
        // 返回序号（索引+1）
        return index + 1
      },
      // 加载审核项目列表
      async loadAuditProjectList() {
        try {
          this.loading = true
          // 调用API获取数据
          const params = {
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            projectName: this.searchQuery,
          }
          const response = await getReviewTaskList(params)

          // 根据API返回格式处理数据
          if (response.state && response.value) {
            // 获取记录列表
            const records = response.value.records || []
            // 转换数据格式，将childTasks转换为children以适应表格组件
            this.auditProjectList = records.map((record) => {
              return {
                id: record.id,
                projectName: record.projectName,
                auditObject: record.auditedUnitName,
                auditPeriod: record.auditPeriod,
                source: this.getSourceTypeText(record.sourceType),
                form: this.getAuditTypeText(record.auditType),
                status: this.getStatusText(record.status),
                isSubTask: record.pid !== '0',
                currentNodeName: record.currentNodeName,
                currentNode: record.currentNode,
                children: record.childTasks
                  ? record.childTasks.map((child) => ({
                      id: child.id,
                      projectName: child.projectName,
                      auditObject: child.auditedUnitName,
                      auditPeriod: record.auditPeriod, // 子任务可能使用父任务的审核期间
                      source: '',
                      form: '',
                      currentNode: child.currentNode,
                      status: child.status,
                      isSubTask: true,
                    }))
                  : [],
              }
            })
            // 设置总数
            this.total = response.value.total || 0
          } else {
            this.auditProjectList = []
            this.total = 0
            this.$message.warning('未获取到审核项目数据')
          }
        } catch (error) {
          this.$message.error('加载审核项目列表失败')
          console.error('加载审核项目列表失败:', error)
        } finally {
          this.loading = false
        }
      },

      // 获取来源类型文本
      getSourceTypeText(type) {
        const typeMap = {
          1: '年度计划内',
          2: '年度计划外',
          // 可根据实际需求补充其他类型
        }
        return typeMap[type] || type
      },

      // 获取审核类型文本
      getAuditTypeText(type) {
        const typeMap = {
          1: '定期监审',
          2: '定调价监审',
          // 可根据实际需求补充其他类型
        }
        return typeMap[type] || type
      },

      // 获取状态文本
      getStatusText(status) {
        const statusMap = {
          ccls: '资料初审',
          200: '审核通过',
          clcs: '审核中', // 添加clcs状态映射为审核中
          // 可根据实际需求补充其他状态
        }
        return statusMap[status] || status
      },

      // 搜索
      handleSearch() {
        // 搜索逻辑
        this.loadAuditProjectList()
      },

      // 打开详情弹窗
      handleOpenDetails(project) {
        console.log('project', project)
        this.selectedProject = project
        this.detailsVisible = true
      },

      // 详情弹窗关闭处理
      handleDetailsClose() {
        this.selectedProject = null
        this.detailsVisible = false
        // 可以在这里添加刷新列表的逻辑
      },

      // 刷新表格数据
      handleRefresh() {
        // 刷新列表数据
        this.loadAuditProjectList()
      },

      // 查记录
      handleCheckRecord(project) {
        // memoManage
        this.$router.push({
          name: 'memoManage',
          // params: { projectId: project.id }
        })
      },

      // 分页处理
      handleSizeChange(size) {
        this.pageSize = size
        this.loadAuditProjectList()
      },

      handleCurrentChange(current) {
        this.currentPage = current
        this.loadAuditProjectList()
      },
    },
  }
</script>

<style scoped>
  .cost-audit-management {
    padding: 20px;
  }

  /* 列表页面样式 */
  .search-section {
    margin-bottom: 20px;
  }

  .action-buttons {
    font-size: 12px;
  }

  .action-buttons a {
    color: #409eff;
    text-decoration: none;
  }

  .separator {
    margin: 0 5px;
    color: #999;
  }

  .note-section {
    margin-top: 20px;
  }

  .note-text {
    color: #f56c6c;
    font-size: 12px;
    margin: 5px 0;
  }

  /* 详情页面样式 */
  .audit-detail-container {
    margin-top: 20px;
  }

  .detail-form {
    margin-top: 20px;
  }

  .tab-content {
    padding: 20px;
    background-color: #f9f9f9;
    min-height: 200px;
  }

  /* 办理页面样式 */
  .audit-process-container {
    margin-top: 20px;
  }

  .process-actions {
    margin-bottom: 20px;
  }

  .process-actions .el-button {
    margin-right: 10px;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .process-steps {
      flex-direction: column;
    }

    .step-line {
      width: 2px;
      height: 20px;
      margin: 5px 0;
    }

    .documents-layout {
      flex-direction: column;
    }

    .documents-type-list {
      width: 100%;
      margin-right: 0;
      margin-bottom: 20px;
    }

    .meeting-form .el-row {
      flex-direction: column;
    }

    .meeting-form .el-col {
      width: 100%;
    }
  }
</style>