wt_project_web_bak/src/views/home/pro_detail.vue

<template>
  <div class='flex flex-justify-start'>
    <div class="full-height">
      <pro-left :data="data" :code='code' @success='listSucc' @change='changeIndex'/>
    </div>
    <div style='margin-left: 300px;' class='full-width' ref='content'>
      <basic-container>
        <basic-tab :tabs='tabs' @change='change'></basic-tab>
      </basic-container>

      <div v-if='currentTab.value === 1'>
        <basic-container v-for='(item,index) in resultList' :key='item.id'>
          <div class='full-width padding-top' :id="`header`+(index+1)">
            <params1 v-if='item.dictKey === "1" ' :info='item'/>
            <params2 v-if='item.dictKey === "2" ' :info='item'/>
            <params3 v-if='item.dictKey === "3" ' :info='item'/>
            <params4 v-if='item.dictKey === "4" ' :info='item'/>
            <params5 v-if='item.dictKey === "5" ' :info='item'/>
            <params6 v-if='item.dictKey === "6" ' :info='item'/>
          </div>
        </basic-container>
      </div>
      <div v-else-if='currentTab.value === 2'>
        <basic-container v-for='(item,index) in resultList' :key='item.id'>
          <div class='full-width' :id="`header`+(index+1)">
            <inspect1 :info='item'/>
          </div>
        </basic-container>
      </div>
      <div v-else-if='currentTab.value === 3'>
        tab3
      </div>
    </div>
  </div>
</template>
<route>
{
name: '项目详情',
meta: { keepAlive: true }
}
</route>

<script>
import proLeft from '@/views/home/component/pro_left.vue'
import BasicContainer from '@/components/basic-container/main.vue'
import BasicTab from '@/components/basic-tab/index.vue'
import params1 from '@/views/home/component/params/params1.vue'
import params2 from '@/views/home/component/params/params2.vue'
import params3 from '@/views/home/component/params/params3.vue'
import params4 from '@/views/home/component/params/params4.vue'
import params5 from '@/views/home/component/params/params5.vue'
import params6 from '@/views/home/component/params/params6.vue'
import inspect1 from '@/views/home/component/inspect/Inspect1.vue'

export default {
  name: 'pro_detail',
  components: { BasicContainer, proLeft, BasicTab, params1, inspect1, params2, params3, params4, params5, params6 },
  data () {
    return {
      id: '',
      data: {},
      tabs: [
        { name: '项目信息管理', value: 1, code: 'params_type' },
        { name: '项目督查情况', value: 2, code: 'inspect_type' }
        // { name: '项目数据明细管理', value: 3 }
      ],
      currentTab: null,
      resultList: [],
      code: 'params_type',
      url: ''
    }
  },
  created () {
    this.id = this.$route.query.id
    const tmp = window.location.href
    if (tmp.indexOf('#header') > 0) {
      this.url = tmp.split('#header')[0]
    }
    this.currentTab = this.tabs[0]
    this.proInfo()
  },
  methods: {
    change (res, index) {
      this.currentTab = res
      this.code = this.currentTab.code
    },
    /**
     * 项目信息
     */
    proInfo () {
      this.$api.project.projectInfo(this.id).then(res => {
        if (res.code === 200) {
          this.data = res.data
        }
      })
    },
    listSucc (list) {
      this.resultList = list
    },
    changeIndex (index) {
      // window.location.hash = '#header' + (index + 1)
      document.getElementById('header' + (index + 1)).scrollIntoView()
      // this.$nextTick(() => {
      // })
    }
  }
}
</script>

<style scoped>

</style>