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.declareUnit }}】</div>
          <el-descriptions class="margin-top" :column="2" size="medium" border v-loading="loading">
            <el-descriptions-item label="企业名称" contentClassName="info-link">{{ info.declareUnit }}<a v-if="$route.query.type == 1" @click="goEnterprice(info.creditCode)">查看详情</a></el-descriptions-item>
            <el-descriptions-item label="统一社会信用代码">{{ info.creditCode }}</el-descriptions-item>
            <!-- <el-descriptions-item label="项目分类" contentClassName="info-link">
              <div class="project_info_box" style="display: flex;">
                <dict-tag class="dict_type" :options="dict.type.project_categories" :value="info.projectBigType" />/<dict-tag class="dict_type" :options="dict.type.project_middle_type" :value="info.projectMiddleType"/>/<dict-tag class="dict_type" :options="dict.type.project_small_type" :value="info.projectSmallType"/>
              </div>
            </el-descriptions-item> -->
            <el-descriptions-item label="项目大类" contentClassName="info-link"><dict-tag :options="dict.type.project_categories" :value="info.projectBigType"/></el-descriptions-item>
            <el-descriptions-item label="项目中类" contentClassName="info-link"><dict-tag :options="dict.type.project_middle_type" :value="info.projectMiddleType"/></el-descriptions-item>
            <el-descriptions-item label="项目小类" contentClassName="info-link"><dict-tag :options="dict.type.project_small_type" :value="info.projectSmallType"/></el-descriptions-item>
            <!-- <el-descriptions-item label="项目大类" contentClassName="info-link"><a class="a-primary" @click="goback(info.projectBigType)"><dict-tag :options="dict.type.project_categories" :value="info.projectBigType"/></a></el-descriptions-item>
            <el-descriptions-item label="项目中类" contentClassName="info-link"><a class="a-primary" @click="goback(info.projectMiddleType)"><dict-tag :options="dict.type.project_middle_type" :value="info.projectMiddleType"/></a></el-descriptions-item>
            <el-descriptions-item label="项目小类" contentClassName="info-link"><a class="a-primary" @click="goback(info.projectSmallType)"><dict-tag :options="dict.type.project_small_type" :value="info.projectSmallType"/></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 == item.id ? 'active-item' : ''" @click="active = item.id">{{ item.name }}</div>
          </div>
          <div class="tabs-bottom" :style="tabStyle">
            <tab-one v-if="active == 1" :detailedInfo="detailedInfo" :fileJson="fileJson" :enterInfo="info"></tab-one>
            <tab-two v-if="active == 2" :info="enterInfo"></tab-two>
            <tab-three v-if="active == 3" :id="Number($route.query.userId)"></tab-three>
            <tab-four v-if="active == 4" :id="$route.query.userId"></tab-four>
            <tab-five v-if="active == 5" :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: ["project_middle_type", "project_small_type", "project_categories"],
  components:{
    tabOne,
    tabTwo,
    tabThree,
    tabFour,
    tabFive,
    projectProgress
  },
  data() {
    return {
      tabs:[],
      enterpriseTabs:[
        {
          name: "项目详细信息",
          id: 1,
        },{
          name: "申报单位信息",
          id: 2,
        },{
          name: "资金拨付进度",
          id: 3,
        }
      ],
      enterpriseSpecialTabs:[
        {
          name: "项目详细信息",
          id: 1,
        },{
          name: "资金拨付进度",
          id: 3,
        }
      ],
      govSpecialTabs:[
        {
          name: "项目详细信息",
          id: 1,
        },{
          name: "资金拨付进度",
          id: 3,
        },{
          name: "备忘录",
          id: 4,
        },{
          name: "智能提醒",
          id: 5,
        },
      ],
      govTabs:[
        {
          name: "项目详细信息",
          id: 1,
        },{
          name: "申报单位信息",
          id: 2,
        },{
          name: "资金拨付进度",
          id: 3,
        },{
          name: "备忘录",
          id: 4,
        },{
          name: "智能提醒",
          id: 5,
        },
      ],
      // 判断登陆用户是何身份⌈ 01 ： 企业  02 ： 政务 ⌋
      userType: this.$store.state.user.userType,
      active: 1,
      info:{},
      detailedInfo:{},
      fileJson:{},
      loading:false,
      tabStyle:{
        height:undefined,
        overflow: 'auto'
      },
      enterInfo:{},
    }
  },
  mounted(){
    this.getInfo(this.$route.query.userId)
    if(this.userType == '01') {
      if(this.$route.query.type == 2) {
        this.tabs = this.enterpriseSpecialTabs
      } else {
        this.tabs = this.enterpriseTabs;
      }
    } else {
      if(this.$route.query.type == 2) {
        this.tabs = this.govSpecialTabs
      } else {
        this.tabs = this.govTabs;
      }
    }
    this.cancalDebounce();
    window.addEventListener('resize', this.cancalDebounce);
  },
  destroyed() {
    window.removeEventListener('resize', this.cancalDebounce);
  },
  methods:{
    goBack(){
      this.$router.back();
    },
    getLabel(id,type){
      if(type == 'big') {
        let label = this.dict.type.project_categories.filter(item => item.value === id + "")
        return label[0].label;
      } else if(type == 'middle') {
        let label = this.dict.type.project_middle_type.filter(item => item.value === id + "")
        return label[0].label;
      } else if(type == 'small') {
        let label = this.dict.type.project_small_type.filter(item => item.value === id + "")
        return label[0].label;
      }
    },
    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);
        if(this.info.creditCode) {
          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.enterInfo = res.data
        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);
      if(this.userType == '01') {
        this.$router.push({
          name: 'EenterInfo',
          query: { userId: this.info.userId, creditCode: creditCode }
        })
      } else {
        this.$router.push({
          name: 'enterpriselibraryInfo',
          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>