nyzy_vue/src/views/gateway/detailedPage3.vue

<template>
  <div>
    <headerView/>
    <!-- <div class="er_bann" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 101"></div>
    <div class="er_bann2" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 102"></div>
    <div class="er_bann3" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 103"></div>
    <div class="er_bann4" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 104"></div>
    <div class="er_bann5" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 105"></div>
    <div class="er_bann6" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 106"></div>
    <div class="er_bann7" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 107"></div>

    <div class="er_bann8" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 501"></div>
    <div class="er_bann9" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 306"></div>
    <div class="er_bann9" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 305"></div>
    <div class="er_bann9" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 304"></div>
    <div class="er_bann9" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 303"></div>
    <div class="er_bann9" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 302"></div>
    <div class="er_bann9" v-if="(thisColumn.parent?thisColumn.parent:thisColumn.id) == 301"></div> -->

		<div class="weizhibox">
			<div class="weizhi">
				<span><img src="img/shouye.png" style="width: 16px;margin: 11px 4px 0 0;"></span>
				<span>当前位置：</span>
				<a href="javascript:void(0);" @click="$to('home')">首页></a>
				<a href="javascript:void(0);" @click="$to('listPage',{pid:thisColumn.parent?thisColumn.parent:thisColumn.id,id:thisColumn.parent?thisColumn.id:null})">{{parentData.name}} > </a>
				<!-- <a href="javascript:void(0);" >{{parentData.name}} > </a> -->
				<a href="javascript:void(0);">{{thisColumn.name}}</a>
			</div>
		</div>
		<div class="er_contant clearfloat">
			<div class="er_contl left">
				<div class="hjk_item">
					<h3>{{parentData.name}}</h3>
					<div class="" style="width: 60px;height: 3px;background-color: #21c168;margin-top: -3px;"></div>
				</div>
				<div class="s-side">
          <a-menu
            style="width: 240px"
            mode="inline"
            @click="handleClick"
          >
            <a-menu-item key="301" >
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;工作动态
            </a-menu-item>
            <a-menu-item key="302"  >
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;行业要闻
            </a-menu-item>
            <a-sub-menu key="401">
              <span slot="title"><span>数据中心</span></span>
              <a-menu-item key="40101">
                微观经济调查
              </a-menu-item>
              <a-menu-item key="40102">
                农业资源数据
              </a-menu-item>
              <a-menu-item key="40103">
                遥感数据
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="304">
              <span slot="title"><span>科研成果</span></span>
              <a-menu-item key="30401">
                成果登记
              </a-menu-item>
              <a-menu-item key="30402">
                获奖情况
              </a-menu-item>
              <a-menu-item key="30403">
                发表论文
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="305">
              <span slot="title"><span>政策文件</span></span>
              <a-menu-item key="30501">
                省内政策
              </a-menu-item>
              <a-menu-item key="30502">
                国内政策
              </a-menu-item>
            </a-sub-menu>
            <a-menu-item key="306"  >
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;特色农业资源最新动态
            </a-menu-item>
            <a-menu-item key="303"  >
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;合作交流
            </a-menu-item>
            <a-sub-menu key="501">
              <span slot="title"><span>专题专栏</span></span>
              <a-menu-item key="50101">
                土壤
              </a-menu-item>
              <a-menu-item key="50102">
                水资源
              </a-menu-item>
              <a-menu-item key="50103">
                气候资源
              </a-menu-item>
              <a-menu-item key="50104">
                生物资源
              </a-menu-item>
            </a-sub-menu>
          </a-menu>
        </div>
			</div>
      <div class="cyh_contr right" v-show="listShow">
				<ul>
					<li v-for="(art,artIndex) in articleList" :key="artIndex">
						<a href="javascript:void(0);" class="cyh_coa clearfloat" @click="$to('detailedPage3',{id:art.id})">
							<div class="cyhl left">
								<h3 class="elli">{{art.title}}</h3>
								<p class="over-line2">{{$tfnm(art,'content',104)}}</p>
							</div>
							<div class="cyhr right">
								<div class="cyhr_date">{{getMonthAndDay(art.updateTime || art.createTime)}}</div>
								<div class="jianttewr">→</div>
							</div>
						</a>
					</li>
				</ul>
			</div>
			<div class="cyh_contr right" v-show="detailShow">
				<div class="xqer_cont">
					<h3>{{articleData.title}}</h3>
					<div class="xqer_date">
						<span>发布日期：<span>{{articleData.updateTime || articleData.createTime}}</span></span>
						<span v-show="articleData.author">作者：<span>{{articleData.author}}</span></span>
					</div>
					<p v-html="articleData.content"></p>
					
				</div>
			</div>
		</div>
    <footerView/>
  </div>
</template>

<script>
import { getwayMixin } from '@/views/gateway/mixins/getwayMixin'
import { getAction } from '@/api/manage'
import headerView from '@/views/gateway/common/header'
import footerView from '@/views/gateway/common/footer'

export default {
  mixins:[getwayMixin],
  components:{
    headerView,
    footerView
  },
  props:{
  },
  data(){
    return {
      parentData:{},
      thisColumn:{},
      columnList:[],
      articleList: [],
      articleData:{},
      detailShow:true,
      listShow:false,
    }
  },
  computed:{
    id(){
      return this.$route.query.id || '-1';
    }
  },
  mounted(){
    this.loadData();
  },
  watch:{
    id(){
      this.loadData();
    },
  },
  updated(){
  },
  methods:{
    handleClick(record){
      console.log('record-->',record);
      this.loadData2(record.key)
    },
    loadData2(id){
      this.detailShow = false
      this.listShow = true
      //如果没有ID自动选中一个
      // if(this.id){
        let columnId = id||this.id;
        if(columnId == '301'){this.syname = "工作动态"}
        else if(columnId == '302'){this.syname = "行业要闻"}
        else if(columnId == '304'){this.syname = "科研成果";columnId == '30401'}
        else if(columnId == '30401'){this.syname = "成果登记"}
        else if(columnId == '30402'){this.syname = "获奖情况"}
        else if(columnId == '30403'){this.syname = "发表论文"}
        else if(columnId == '305'){this.syname = "政策文件";columnId == '30501'}
        else if(columnId == '30501'){this.syname = "省内政策"}
        else if(columnId == '30502'){this.syname = "国内政策"}
        else if(columnId == '306'){this.syname = "特色农业资源最新动态"}
        else if(columnId == '303'){this.syname = "合作交流"}
        else if(columnId == '501'){this.syname = "专题专栏";columnId == '50101'}
        else if(columnId == '50101'){this.syname = "土壤"}
        else if(columnId == '50102'){this.syname = "水资源"}
        else if(columnId == '50103'){this.syname = "气候资源"}
        else if(columnId == '50104'){this.syname = "生物资源"}
        else if(columnId == '401'){this.syname = "数据中心"; columnId='40101'}
        else if(columnId == '40101'){this.syname = "微观经济调查"}
        else if(columnId == '40102'){this.syname = "农业资源数据"}
        else if(columnId == '40103'){this.syname = "遥感数据"}

        
        getAction('/gateway/gatewayArticle/list',{pageSize:-1,isRelease:'Y',columnId:columnId,column: 'createTime',order: 'desc'}).then((res)=>{
          if(res.success){
            let list = res.result.records||res.result;
            this.articleList = list;
          }
        });
      // }
    },
    loadData(){
      this.detailShow =  true
      this.listShow = false
      let columnId =this.id;
      //查询栏目（包含当前的和候选的）
      getAction('/gateway/gatewayArticle/queryArticleById',{id:columnId}).then((res)=>{
        if(res.success){
          console.log('res =>',res.result);
          let data = res.result;
          this.articleData = data;
          this.thisColumn = data.currentGatewayColumn
          //查出根节点
          if(data.parentGatewayColumn){
            this.parentData = data.parentGatewayColumn
          }else{
            this.parentData = data.currentGatewayColumn
          }

          if(data.gatewayColumnList && data.gatewayColumnList.length > 0){
            this.columnList = data.gatewayColumnList
          }else{
            this.columnList = [];
            this.columnList.push(data.currentGatewayColumn);

          }
        }
      });
    },
    getFileName(url){
      if(!url) return '';
      let filePaths = url.split('/');
      let fileAllName = filePaths[filePaths.length-1]
      return fileAllName.substring(0,fileAllName.lastIndexOf('_'));
    },
    getDay(dateTime){
      if(!dateTime) return '';
      let d = new Date(dateTime);
      return d.getDate()
    },
    getMonthAndDay(dateTime){
      if(!dateTime) return '';
      let d = new Date(dateTime);
      return (d.getMonth()+1)  + '-' + d.getDate();
    },
    getYearAndMonth(dateTime){
      if(!dateTime) return '';
      let d = new Date(dateTime);
      return d.getFullYear() + '-' + (d.getMonth()+1)
    },
  },
}
</script>

<style scoped>
</style>