jin_ji_hu/src/views/project/projectInfo/index.vue

<template>
  <div class="L-public-main projectInfo" id="L-size-main">
    <el-row :gutter="10">
      <el-col :span="18">
        <div class="left-info" id="L-header">
          <div class="project-info-title">【{{ info.projectName }}】</div>
          <el-descriptions class="margin-top" :column="2" size="medium" border v-loading="loading">
            <el-descriptions-item label="项目名称">{{ info.projectName }}</el-descriptions-item>
            <el-descriptions-item label="项目分类" contentClassName="info-link"><a class="a-primary" @click="goback(info.projectClassify)"><dict-tag :options="dict.type.jjh_project_type" :value="info.projectClassify"/></a></el-descriptions-item>
            <el-descriptions-item label="申报单位" contentClassName="info-link">{{ info.declareUnit }}<a v-show="info.declareUnit">查看详情</a></el-descriptions-item>
            <el-descriptions-item label="年份">{{ info.projectYear }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="left-tabs">
          <div class="tabs-top" id="L-pagination">
            <div v-for="(item,index) in tabs" :key="index" class="tabs-top-item" :class="active == index ? 'active-item' : ''" @click="active = index">{{ item.name }}</div>
          </div>
          <div class="tabs-bottom" :style="tabStyle">
            <tab-one v-if="active == 0" :detailedInfo="detailedInfo" :fileJson="fileJson"></tab-one>
            <tab-two v-if="active == 1" :info="info"></tab-two>
            <tab-three v-if="active == 2"></tab-three>
            <tab-four v-if="active == 3" :id="$route.query.userId"></tab-four>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <project-progress></project-progress>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { tabOne, tabTwo, tabThree, tabFour, projectProgress } from "./components"
import { jProjectId } from "@/api/jin_ji_hu/project/index"
export default {
  dicts: ['jjh_project_type','jjh_status'],
  components:{
    tabOne,
    tabTwo,
    tabThree,
    tabFour,
    projectProgress
  },
  data() {
    return {
      tabs:[
        {
          name: "项目详细信息",
        },{
          name: "申报单位信息",
        },{
          name: "资金拨付进度",
        },{
          name: "备忘录",
        },
      ],
      active: 0,
      info:{},
      detailedInfo:{},
      fileJson:{},
      loading:false,
      tabStyle:{
        height:undefined,
        overflow: 'auto'
      }
    }
  },
  mounted(){
    this.getInfo(this.$route.query.userId)
    this.cancalDebounce();
    window.addEventListener('resize', this.cancalDebounce);
  },
  destroyed() {
    window.removeEventListener('resize', this.cancalDebounce);
  },
  methods:{
    getInfo(id){
      this.loading = true;
      jProjectId(id).then(res=>{
        this.info = res.data;
        this.loading = false;
        this.detailedInfo = JSON.parse(res.data.otherJson);
        this.fileJson = JSON.parse(res.data.fileJson);
        console.log(this.fileJson,"this.fileJson");
        // for (var key in obj) {
        //   if (obj.hasOwnProperty(key)) {
        //     var value = obj[key];
        //     console.log(key + ': ' + value);
        //   }
        // }
      })
    },
    goback(id){
      // console.log(id,"id");
      // this.$router.replace({
      //   path: '/project/index',
      //   query: { projectId: id }
      // })
      this.$router.push({
        name: 'Project',
        params: { projectId: id }
      })
    },
    // 屏幕尺寸变化
    cancalDebounce(){
      const element = document.getElementById('L-size-main'); // 通过元素的 ID 获取元素
      const header = document.getElementById('L-header'); // 通过元素的 ID 获取元素
      const pagination = document.getElementById('L-pagination'); // 通过元素的 ID 获取元素
      const elementHeight = element.offsetHeight;
      const headerHeight = header.offsetHeight;
      const paginationtHeight = pagination.offsetHeight;
      this.tabStyle.height = (elementHeight - headerHeight - paginationtHeight - 20) + 'px';
    }
  },
}
</script>