cbjsxt-front-master/src/components/task/cbjsInfo.vue

<template>
  <div class="cbjs-info-container">
    <el-dialog
      :visible.sync="visible"
      :title="dialogTitle"
      width="90%"
      :close-on-click-modal="false"
      @close="handleClose"
    >
      <!-- 标签页面 - 移除了操作按钮区域 -->
      <el-tabs
        v-model="activeTab"
        type="card"
        class="audit-tabs"
        @tab-click="handleTabClick"
      >
        <el-tab-pane label="报送资料" name="submitData">
          <submit-data :id="id" :disabled="true" />
        </el-tab-pane>
        <el-tab-pane label="成本调查表" name="costSurvey">
          <cost-survey
            :id="id"
            ref="costSurveyRef"
            :disabled="true"
            :audited-unit-id="auditedUnitId"
            :catalog-id="catalogId"
            :task-id="taskId"
          />
        </el-tab-pane>
        <el-tab-pane
          v-if="currentNode !== 'clcs'"
          label="成本审核"
          name="costAudit"
        >
          <cost-audit
            :id="id"
            :disabled="true"
            :selected-project="selectedProject"
          />
        </el-tab-pane>
        <el-tab-pane
          v-if="currentNode !== 'clcs'"
          label="工作底稿"
          name="workDraft"
        >
          <work-draft :id="id" :disabled="true" />
        </el-tab-pane>
        <el-tab-pane
          v-if="currentNode !== 'clcs'"
          label="提取材料登记"
          name="extractMaterial"
        >
          <extract-material :id="id" :disabled="true" />
        </el-tab-pane>
        <el-tab-pane
          v-if="currentNode !== 'clcs'"
          label="成本审核意见"
          name="auditOpinion"
        >
          <audit-opinion
            :id="id"
            :current-node="currentNode"
            :status="currentStatus"
            :disabled="true"
          />
        </el-tab-pane>
        <el-tab-pane label="消息通知" name="messageNotify">
          <message-notify :id="id" :disabled="true" />
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
  import costAudit from './components/costAudit.vue'
  import costSurvey from './components/costSurvey.vue'
  import submitData from './components/submitData.vue'
  import workDraft from './components/workDraft.vue'
  import extractMaterial from './components/extractMaterial.vue'
  import auditOpinion from './components/auditOpinion.vue'
  import messageNotify from './components/messageNotify.vue'

  export default {
    name: 'CbjsInfo',
    components: {
      costAudit,
      costSurvey,
      submitData,
      workDraft,
      extractMaterial,
      auditOpinion,
      messageNotify,
    },
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      id: {
        type: [String, Number],
        default: null,
      },
      selectedProject: {
        type: Object,
        default: () => {
          return {}
        },
      },
      currentNode: {
        type: String,
        default: '',
      },
      currentStatus: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        activeTab: 'submitData', // 默认选中报送资料标签页
      }
    },
    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 '成本审核详情'
      },
      // 从 selectedProject 中派生 auditedUnitId / catalogId，供子组件查询接口使用
      auditedUnitId() {
        return (
          (this.selectedProject &&
            (this.selectedProject.auditedUnitId ||
              this.selectedProject.auditedunitid)) ||
          ''
        )
      },
      catalogId() {
        return (
          (this.selectedProject &&
            (this.selectedProject.catalogId ||
              this.selectedProject.catalogid)) ||
          ''
        )
      },
      taskId() {
        return (
          (this.selectedProject &&
            (this.selectedProject.taskId || this.selectedProject.taskid)) ||
          ''
        )
      },
    },
    watch: {
      visible(newVal) {
        // 监听visible变化，弹窗打开时设置标签页
        if (newVal && this.id) {
          // 使用 $nextTick 确保 props 已更新
          this.$nextTick(() => {
            // 设置标签页
            this.setActiveTab()
          })
        }
      },
      // 监听currentNode变化，如果弹窗已打开，更新标签页
      currentNode(newVal, oldVal) {
        if (this.visible && this.id && newVal && newVal !== oldVal) {
          this.$nextTick(() => {
            // 设置标签页
            this.setActiveTab()
          })
        }
      },
      // 监听currentStatus变化，如果弹窗已打开，更新标签页
      currentStatus(newVal, oldVal) {
        if (this.visible && this.id && newVal && newVal !== oldVal) {
          this.$nextTick(() => {
            // 设置标签页
            this.setActiveTab()
          })
        }
      },
      // 监听id变化，如果弹窗已打开，更新标签页
      id(newVal) {
        if (this.visible && newVal) {
          this.$nextTick(() => {
            // 设置标签页
            this.setActiveTab()
          })
        }
      },
    },
    mounted() {
      // 设置标签页
      this.setActiveTab()
    },
    methods: {
      // 根据 currentNode 和 currentStatus 设置活动标签页
      setActiveTab() {
        if (this.currentNode === 'sdsh' && this.currentStatus === '审核中') {
          this.activeTab = 'costAudit'
        } else if (this.currentNode === 'clcs') {
          // 如果 currentNode 是 'clcs'，显示成本调查表标签页
          this.activeTab = 'submitData'
        } else if (
          this.currentNode === 'yjgaozhi' ||
          this.currentNode === 'yjfk'
        ) {
          // 如果 currentNode 是 'yjgaozhi'，显示意见告知标签页（成本审核意见）
          this.activeTab = 'auditOpinion'
        } else {
          // 其他情况默认显示报送资料标签页
          this.activeTab = 'submitData'
        }
      },
      // 标签切换时回调
      handleTabClick(tab) {
        if (tab && tab.name === 'costSurvey') {
          // 切到成本调查表时，调用子组件刷新
          this.$nextTick(() => {
            if (
              this.$refs &&
              this.$refs.costSurveyRef &&
              this.$refs.costSurveyRef.loadList
            ) {
              this.$refs.costSurveyRef.loadList()
            }
          })
        }
      },
      handleClose() {
        // 关闭弹窗时触发事件
        this.$emit('update:visible', false)
        this.$emit('close')
      },
      open() {
        // 打开弹窗方法，供父组件通过ref调用
        this.$emit('update:visible', true)
      },
    },
  }
</script>

<style scoped>
  /* 直接设置弹窗主体和内容区域，确保滚动正常工作 */
  .cbjs-info-container {
    width: 100%;
    height: 100%;
  }

  /* 关键修改：弹窗主体设置固定高度并隐藏溢出 */
  :deep(.el-dialog__body) {
    padding: 0 !important;
    height: calc(100vh - 200px);
    overflow: hidden;
  }

  /* 标签容器占满弹窗高度 */
  .audit-tabs {
    height: 100%;
  }

  /* 标签头保持固定位置 */
  .audit-tabs .el-tabs__header {
    margin-bottom: 0;
    padding: 15px 15px 0;
    background: #f5f7fa;
    border-bottom: 1px solid #ebeef5;
  }

  /* 核心修改：内容区域设置固定高度并允许垂直滚动 */
  .audit-tabs .el-tabs__content {
    height: calc(100% - 60px); /* 减去标签头的高度 */
    overflow-y: auto; /* 这是最重要的设置，确保内容超出时显示滚动条 */
    padding: 15px;
    box-sizing: border-box;
  }

  /* 优化滚动条样式 */
  .audit-tabs .el-tabs__content::-webkit-scrollbar {
    width: 8px;
  }

  .audit-tabs .el-tabs__content::-webkit-scrollbar-track {
    background: #f5f7fa;
  }

  .audit-tabs .el-tabs__content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
  }

  .audit-tabs .el-tabs__content::-webkit-scrollbar-thumb:hover {
    background: #999;
  }

  /* 确保标签页内容不受限制 */
  .audit-tabs .el-tab-pane {
    height: auto;
    overflow: visible;
  }

  /* 确保子组件可以正常显示和滚动 */
  .audit-tabs .el-tab-pane > div {
    width: 100%;
  }

  /* 只读样式 */
  :deep(.el-form-item__content) {
    color: #909399;
  }

  :deep(.el-input__inner),
  :deep(.el-select__inner),
  :deep(.el-textarea__inner) {
    background-color: #f5f7fa;
    color: #909399;
    cursor: not-allowed;
  }

  :deep(.el-checkbox),
  :deep(.el-radio) {
    cursor: not-allowed;
  }

  :deep(.el-button) {
    pointer-events: none;
    opacity: 0.6;
  }
</style>