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

<template>
  <div class="L-public-main projectInfo">
    <el-row :gutter="10">
      <el-col :span="18">
        <div class="left-info">
          <div class="project-info-title">【项目详细信息】</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">
            <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">
            <tab-one v-if="active == 0" :detailedInfo="detailedInfo"></tab-one>
            <tab-two v-if="active == 1"></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'],
  components:{
    tabOne,
    tabTwo,
    tabThree,
    tabFour,
    projectProgress
  },
  data() {
    return {
      tabs:[
        {
          name: "项目详细信息",
        },{
          name: "申报单位信息",
        },{
          name: "资金拨付进度",
        },{
          name: "备忘录",
        },
      ],
      active: 0,
      info:{},
      detailedInfo:{},
      loading:false,
    }
  },
  mounted(){
    this.getInfo(this.$route.query.userId)
  },
  methods:{
    getInfo(id){
      this.loading = true;
      jProjectId(id).then(res=>{
        this.info = res.data;
        this.loading = false;
        this.detailedInfo = JSON.parse(res.data.otherJson);
        // 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 }
      })
    },
  },
}
</script>