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

<template>
  <div class="details-container">
    <el-drawer
      :visible.sync="visible"
      :title="dialogTitle"
      size="90%"
      @close="handleClose"
    >
      <!-- 操作按钮区域 -->
      <div class="btn-group">
        <el-button
          v-for="item in buttonData"
          :key="item.id"
          type="primary"
          @click="handleAuditPass(item)"
        >
          {{ item.value }}
        </el-button>
      </div>
      <!-- 标签页面 -->
      <el-tabs v-model="activeTab" type="card" class="audit-tabs">
        <el-tab-pane label="监审文书" name="submitData"></el-tab-pane>
        <el-tab-pane label="集体审议" name="costSurvey"></el-tab-pane>
        <el-tab-pane
          v-if="currentNode !== 'clcs'"
          label="出具结论"
          name="costAudit"
        ></el-tab-pane>
      </el-tabs>
    </el-drawer>
  </div>
</template>

<script>
  import {
    getDataPreliminaryReviewButton,
    doProcessBtn,
  } from '@/api/dataPreliminaryReview'
  export default {
    name: 'Details',
    components: {},
    props: {
      visible: {
        type: Boolean,
        default: true,
      },
      id: {
        type: [String, Number],
        default: null,
      },
      currentNode: {
        type: String,
        default: '',
      },
      currentStatus: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        buttonData: [], //资料初审按钮数据
        activeTab: 'submitData', // 默认选中报送资料标签页
        // 弹窗显示状态
        showSupplementDialog: false,
        showAbortDialog: false,
        showRejectDialog: false,
        // 弹窗数据
        additionalParams: {},
        // 当前操作按钮信息
        currentButton: null,
      }
    },
    computed: {
      dialogTitle() {
        // 根据节点类型设置标题
        if (
          this.currentNode === 'sdshenhe' &&
          this.currentStatus === '审核中'
        ) {
          return '审核详情'
        } else if (this.currentNode === 'clcs') {
          return '成本调查详情'
        } else if (
          this.currentNode === 'yjgaozhi' ||
          this.currentNode === 'yjfk'
        ) {
          return '意见告知'
        }
        return '成本审核详情'
      },
    },
    watch: {
      visible(newVal) {
        // 监听visible变化，弹窗打开时设置标签页并获取按钮数据
        if (newVal && this.id) {
          // 使用 $nextTick 确保 props 已更新
          this.$nextTick(() => {
            // 设置标签页
            this.setActiveTab()
            // 弹窗打开时，无论什么情况都要获取资料初审按钮数据
            this.getPreliminaryReviewButton()
          })
        }
      },
      // 监听currentNode变化，如果弹窗已打开，更新标签页并重新获取按钮数据
      currentNode(newVal, oldVal) {
        if (this.visible && this.id && newVal && newVal !== oldVal) {
          this.$nextTick(() => {
            // 设置标签页
            this.setActiveTab()
            // 重新获取按钮数据
            this.getPreliminaryReviewButton()
          })
        }
      },
      // 监听currentStatus变化，如果弹窗已打开，更新标签页并重新获取按钮数据
      currentStatus(newVal, oldVal) {
        if (this.visible && this.id && newVal && newVal !== oldVal) {
          this.$nextTick(() => {
            // 设置标签页
            this.setActiveTab()
            // 重新获取按钮数据
            this.getPreliminaryReviewButton()
          })
        }
      },
      // 监听id变化，如果弹窗已打开，重新获取按钮数据
      id(newVal) {
        if (this.visible && newVal) {
          this.$nextTick(() => {
            // 设置标签页
            this.setActiveTab()
            // 获取按钮数据
            this.getPreliminaryReviewButton()
          })
        }
      },
    },
    mounted() {
      // 设置标签页
      this.setActiveTab()
      // 如果组件挂载时弹窗已打开且有id，也要获取按钮数据
      if (this.visible && this.id) {
        this.$nextTick(() => {
          // 弹窗打开时，无论什么情况都要获取资料初审按钮数据
          this.getPreliminaryReviewButton()
        })
      }
    },
    methods: {
      // 根据 currentNode 和 currentStatus 设置活动标签页
      setActiveTab() {},
      // 获取资料初审按钮
      async getPreliminaryReviewButton() {
        // 直接从 props 获取 currentNode，确保是最新的值
        const currentNode = this.currentNode

        // 构建参数对象
        const params = {
          taskId: this.id,
        }

        // 只有当 currentNode 有值时才添加 processNodeKey
        if (currentNode && currentNode.trim() !== '') {
          params.processNodeKey = currentNode === 'ccls' ? 'clcs' : currentNode
        }

        try {
          const response = await getDataPreliminaryReviewButton(params)
          this.buttonData = response.value || []
        } catch (error) {
          this.buttonData = []
        }
      },
      handleClose() {
        // 关闭弹窗时触发事件
        this.$emit('update:visible', false)
        this.$emit('close')
      },
      // 处理审核意见保存成功后的刷新
      handleAuditOpinionRefresh() {
        // 触发父组件刷新列表
        this.$emit('refresh')
      },
      open() {
        // 打开弹窗方法，供父组件通过ref调用
        this.$emit('update:visible', true)
      },
      // 处理审核操作按钮点击
      handleAuditPass(item) {},

      // 执行审核操作
      async executeAuditOperation() {
        if (!this.id) {
          this.$message.error('缺少任务ID')
          return
        }
        if (!this.currentButton) {
          this.$message.error('操作失败：缺少按钮信息')
          return
        }
        try {
          const params = {
            taskId: this.id,
            processNodeKey: this.currentNode,
            key: this.currentButton.key,
            sendType: this.additionalParams.sendType?.join(','),
            content: this.additionalParams.content,
          }

          const response = await doProcessBtn(params)

          if (response && response.code === 200) {
            this.$message.success(this.currentButton.value + '操作成功')
            // 关闭所有弹窗
            this.showSupplementDialog = false
            this.showAbortDialog = false
            this.showRejectDialog = false
            // 关闭主弹窗
            this.handleClose()
            // 触发父组件刷新列表
            this.$emit('refresh')
          } else {
            this.$message.error(
              response?.message || this.currentButton.value + '操作失败'
            )
          }
        } catch (error) {
          this.$message.error(this.currentButton.value + '操作失败')
        }
      },
    },
  }
</script>

<style scoped>
  .btn-group {
    margin-bottom: 20px;
    margin-left: 20px;
  }

  .btn-group .el-button {
    margin-right: 10px;
  }
  .details-container {
    width: 100%;
    height: 100%;
  }

  .audit-tabs {
    height: calc(100vh - 150px);
  }

  .audit-tabs .el-tabs__header {
    margin-bottom: 0;
    padding: 15px 15px 0;
    background: #f5f7fa;
    border-bottom: 1px solid #ebeef5;
  }

  .audit-tabs .el-tabs__nav-wrap {
    padding-bottom: 10px;
  }

  .audit-tabs .el-tabs__content {
    height: calc(100% - 60px);
    padding: 15px;
    overflow-y: auto;
  }

  .audit-tabs .el-tab-pane {
    height: 100%;
  }

  /* 弹窗样式 */
  .dialog-content {
    padding: 10px 0;
  }

  .form-item {
    margin-bottom: 20px;
  }

  .form-label {
    display: inline-block;
    width: 100px;
    text-align: right;
    margin-right: 0;
    color: #606266;
    vertical-align: middle;
  }

  .form-item .el-checkbox-group {
    display: inline-block;
    margin-left: 10px;
  }

  .form-item .el-checkbox {
    margin-right: 20px;
    vertical-align: middle;
  }

  .form-item .el-input__inner {
    width: calc(100% - 115px);
    margin-left: 115px;
  }
</style>