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"
          icon="iconfont-5039297 icon-chaxun"
          @click="handleSearch"
        >
          查询
        </el-button>
        <el-button
          type="primary"
          plain
          icon="iconfont-5039297 icon-zhongzhi"
          style="margin-left: 10px"
          @click="handleReset"
        >
          重置
        </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="150"
        >
          <template slot-scope="scope">
            <span v-if="!scope.row.isSubTask">
              <span v-if="scope.row.currentNode === 'gd'">
                {{ scope.row.currentNodeName }}
              </span>
              <span v-else>
                {{ scope.row.currentNodeName }}-{{ scope.row.statusName }}
              </span>
            </span>
            <span v-else>{{ scope.row.statusName }}</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="handleViewTaskDetail(scope.row)">
                任务详情
              </el-button>
              <el-button
                v-if="scope.row.status != '300'"
                type="text"
                @click="handleOpenMainDetails(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 === '200' || scope.row.status === '600')
                "
                type="text"
                @click="handleOpenDetails(scope.row)"
              >
                资料初审
              </el-button>
              <el-button
                v-if="
                  (scope.row.currentNode === 'sdsh' ||
                    scope.row.currentNode === 'yjfk') &&
                  scope.row.status === '200'
                "
                type="text"
                @click="handleOpenDetails(scope.row)"
              >
                成本审核
              </el-button>
              <el-button
                v-if="
                  scope.row.currentNode === 'yjgz' && scope.row.status === '200'
                "
                type="text"
                @click="handleOpenDetails(scope.row)"
              >
                意见告知
              </el-button>
              <el-button
                v-if="
                  scope.row.currentNode === 'jtsy' && scope.row.status === '200'
                "
                type="text"
                @click="handleOpenDetails(scope.row, 'shenhe')"
              >
                审核
              </el-button>
              <el-button
                v-if="
                  scope.row.currentNode === 'jtsy' && scope.row.status === '260'
                "
                type="text"
                @click="handleOpenDetails(scope.row, 'auditOpinion')"
              >
                审核
              </el-button>

              <!-- <el-button
                v-if="scope.row.status === '300'"
                type="text"
                @click="handleHf(scope.row)"
              >
                恢复
              </el-button> -->
              <el-button
                type="text"
                @click="handleMessage(scope.row, 'chengben')"
              >
                查看
              </el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        :current-page="pageNum"
        :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"
      :task-info="selectedProject"
      :selected-project="selectedProject"
      :visible.sync="detailsVisible"
      :current-node="selectedProject && selectedProject.currentNode"
      :current-status="selectedProject && selectedProject.status"
      :is-shenhe="isShenhe"
      @close="handleDetailsClose"
      @refresh="handleRefresh"
    />
    <!-- 主详情弹窗组件 -->
    <mainDetailsDialog
      :id="selectedProject && selectedProject.id"
      ref="mainDetailsRef"
      :project="selectedProject"
      :visible.sync="mainDetailsVisible"
      :current-node="selectedProject && selectedProject.currentNode"
      :current-status="selectedProject && selectedProject.status"
      @close="handleMainDetailsClose"
      @refresh="handleMainRefresh"
    />
    <taskInfo ref="taskInfo" />
    <!-- 成本监审信息弹窗 -->
    <cbjs-info
      :id="cbjsInfoData && cbjsInfoData.id"
      :selected-project="cbjsInfoData"
      :visible.sync="cbjsInfoVisible"
      :current-node="cbjsInfoData && cbjsInfoData.currentNode"
      :current-status="cbjsInfoData && cbjsInfoData.status"
    />
    <taskDetail ref="taskDetail" />
    <!-- 成本监审任务制定弹窗（用于“任务详情”只读查看） -->
    <task-customized-release-dialog
      :visible.sync="taskReleaseDialogVisible"
      :project="project"
      :selected-project="selectedProject"
      :is-view="true"
      @backToList="taskReleaseDialogVisible = false"
      @close="taskReleaseDialogVisible = false"
    />
  </div>
</template>
<script>
  import { doProcessBtn } from '@/api/dataPreliminaryReview'
  import detailsDialog from './details.vue'
  import mainDetailsDialog from './mainDetails.vue'
  // 成本监审任务列表API
  import { getReviewTaskList } from '@/api/audit/auditIndex'
  import taskInfo from '@/components/task/taskInfo.vue'
  import cbjsInfo from '@/components/task/cbjsInfo.vue'
  import taskDetail from '@/components/task/taskDetail.vue'
  import TaskCustomizedReleaseDialog from '@/components/task/TaskCustomizedReleaseDialog.vue'
  import { getCostProjectDetail } from '@/api/taskCustomizedRelease.js'
  import { dictMixin } from '@/mixins/useDict'
  export default {
    name: 'CostAuditManagement',
    components: {
      detailsDialog,
      taskInfo,
      cbjsInfo,
      mainDetailsDialog,
      taskDetail,
      TaskCustomizedReleaseDialog,
    },
    mixins: [dictMixin],
    data() {
      return {
        isShenhe: false,
        dictData: {
          projectProposal: [],
        },
        // 分页相关
        pageNum: 1,
        pageSize: 10,
        total: 0,
        // 搜索相关
        searchQuery: '',
        // 列表数据
        auditProjectList: [],
        // 加载状态
        loading: false,
        // 详情弹窗相关
        detailsVisible: false,
        selectedProject: null,
        // cbjsInfo弹窗相关
        cbjsInfoVisible: false,
        cbjsInfoData: null,
        mainDetailsVisible: false,
        // 任务详情（项目）弹窗
        taskReleaseDialogVisible: false,
        project: {},
        isView: true,
      }
    },

    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 = {
            pageNum: this.pageNum,
            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),
                form: record.auditTypeName,
                status: this.getStatusText(record.status),
                statusName: record.statusName,
                isSubTask: record.pid !== '0',
                currentNodeName: record.currentNodeName,
                currentNode: record.currentNode,
                projectId: record.projectId,
                auditedUnitId: record.auditedUnitId,
                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,
                      statusName: child.statusName,
                      isSubTask: true,
                      projectId: child.projectId,
                      auditedUnitId: child.auditedUnitId,
                      taskId: child.id,
                      catalogId: child.catalogId,
                    }))
                  : [],
              }
            })
            // 设置总数
            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) {
        return this.getDictName('projectProposal', 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.pageNum = 1
        this.loadAuditProjectList()
      },

      // 重置
      handleReset() {
        // 重置搜索条件
        this.searchQuery = ''
        // 重新加载数据
        this.loadAuditProjectList()
      },

      // 查看任务详情
      handleViewTaskDetail(row) {
        // 使用成本监审任务制定弹窗（只读）
        this.openTaskReleaseDialog(row)
      },
      // 打开成本监审任务制定弹窗（只读查看）
      openTaskReleaseDialog(row) {
        if (!row) return
        const projectId =
          row.projectId || row.projectID || row.id || row.taskId || ''
        if (!projectId) {
          this.$message &&
            this.$message.warning &&
            this.$message.warning('缺少项目ID，无法查看详情')
          return
        }
        this.isView = true
        this.selectedProject = row
        getCostProjectDetail({ id: projectId })
          .then((res) => {
            this.project = (res && res.value) || {}
            this.taskReleaseDialogVisible = true
          })
          .catch(() => {
            // 回退：接口失败时至少展示当前行数据
            this.project = row || {}
            this.taskReleaseDialogVisible = true
          })
      },

      // 打开详情弹窗
      handleOpenDetails(project, type) {
        this.selectedProject = project
        this.isShenhe = type === 'shenhe'
        this.detailsVisible = true
        this.$nextTick(() => {
          if (this.$refs.detailsRef) {
            this.$refs.detailsRef.open()
          }

          // “审核1”：打开弹窗后，自动切换到“成本审核意见”页签
          // 注意：details.vue 在 visible watcher 里会调用 setActiveTab()，可能覆盖父组件设置
          // 因此这里用一次异步延迟，确保在其默认逻辑之后再强制切换
          if (type === 'auditOpinion') {
            setTimeout(() => {
              const dlg = this.$refs.detailsRef
              if (!dlg) return
              dlg.activeTab = 'auditOpinion'
              // 主动触发一次 tab-click 对应逻辑（刷新接口）
              if (typeof dlg.handleTabClick === 'function') {
                dlg.handleTabClick({ name: 'auditOpinion' })
              }
            }, 80)
          }
        })
      },

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

      // 刷新表格数据（可选重置到第一页）
      handleRefresh(payload) {
        if (payload && payload.resetToFirst) {
          this.pageNum = 1
        }
        this.loadAuditProjectList()
      },

      // 主详情弹窗关闭处理
      handleMainDetailsClose() {
        this.selectedProject = null
        this.mainDetailsVisible = false
      },

      // 主详情刷新处理
      handleMainRefresh() {
        // 刷新列表数据
        this.loadAuditProjectList()
      },

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

      // 恢复任务
      async handleHf(row) {
        if (!row || !row.id) {
          this.$message.error('缺少任务ID')
          return
        }

        // 弹出确认对话框
        this.$confirm('确定要恢复此任务吗？', '恢复任务', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            try {
              const params = {
                taskId: row.id,
                key: 2,
                status: 200,
                processNodeKey: row.currentNode,
              }

              const response = await doProcessBtn(params)

              if (response && response.code === 200) {
                this.$message.success('恢复任务成功')
                // 刷新列表
                this.loadAuditProjectList()
              } else {
                this.$message.error(response?.message || '恢复任务失败')
              }
            } catch (error) {
              // this.$message.error('恢复任务失败')
              console.error('恢复任务失败:', error)
            }
          })
          .catch(() => {
            // 用户取消操作
            this.$message.info('已取消恢复任务')
          })
      },

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

      handleCurrentChange(current) {
        this.pageNum = current
        this.loadAuditProjectList()
      },
      // 查看 - 修改为打开cbjsInfo弹窗
      handleMessage(row, type) {
        if (type === 'chengben') {
          this.cbjsInfoData = row
          this.cbjsInfoVisible = true
        } else {
          this.$refs.taskInfo.open(row, type)
        }
      },
    },
  }
</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>