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

<template>
  <div class="L-public-main projectInfo" id="L-size-main">
    <el-row :gutter="10" class="L_row">
      <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" @click="goEnterprice(info.creditCode)">查看详情</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>
            <tab-five v-if="active == 4" :id="Number($route.query.userId)"></tab-five>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <project-progress></project-progress>
      </el-col>
    </el-row>
    <div class="enter-footTabs">
      <el-button type="primary" @click="goBack">返回</el-button>
      <!-- <el-button type="primary">导出企业清单</el-button> -->
    </div>
  </div>
</template>
<script>
import { tabOne, tabTwo, tabThree, tabFour, tabFive, projectProgress } from "./components"
import { jProjectId, getUserId } from "@/api/jin_ji_hu/project/index"
export default {
  dicts: ['jjh_project_type','jjh_status'],
  components:{
    tabOne,
    tabTwo,
    tabThree,
    tabFour,
    tabFive,
    projectProgress
  },
  data() {
    return {
      tabs:[],
      enterpriseTabs:[
        {
          name: "项目详细信息",
        },{
          name: "申报单位信息",
        },{
          name: "资金拨付进度",
        },{
          name: "备忘录",
        },
      ],
      govTabs:[
        {
          name: "项目详细信息",
        },{
          name: "申报单位信息",
        },{
          name: "资金拨付进度",
        },{
          name: "备忘录",
        },{
          name: "智能提醒",
        },
      ],
      // 判断登陆用户是何身份⌈ 01 ： 企业  02 ： 政务 ⌋
      userType: this.$store.state.user.userType,
      active: 0,
      info:{},
      detailedInfo:{},
      fileJson:{},
      loading:false,
      tabStyle:{
        height:undefined,
        overflow: 'auto'
      }
    }
  },
  mounted(){
    this.getInfo(this.$route.query.userId)
    if(this.userType == '01') {
      this.tabs = this.enterpriseTabs;
    } else {
      this.tabs = this.govTabs;
    }
    this.cancalDebounce();
    window.addEventListener('resize', this.cancalDebounce);
  },
  destroyed() {
    window.removeEventListener('resize', this.cancalDebounce);
  },
  methods:{
    goBack(){
      this.$router.back();
    },
    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);
        return getUserId({getCreditCode : this.info.creditCode})
        // console.log(this.fileJson,"this.fileJson");
        // for (var key in obj) {
        //   if (obj.hasOwnProperty(key)) {
        //     var value = obj[key];
        //     console.log(key + ': ' + value);
        //   }
        // }
      }).then(res=>{
        this.info.userId = res.data.id
      })
    },
    goback(id){
      // console.log(id,"id");
      // this.$router.replace({
      //   path: '/project/index',
      //   query: { projectId: id }
      // })
      this.$router.push({
        name: 'Project',
        params: { projectId: id }
      })
    },
    goEnterprice(creditCode){
      // console.log(creditCode);
      this.$router.push({
        name: 'enterInfo',
        query: { userId: this.info.userId, creditCode: creditCode }
      })
    },
    // 屏幕尺寸变化
    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 - 100) + 'px';
    }
  },
}
</script>