nyzy_vue/src/views/gateway/detailedPage3.vue

<template>
  <div style="background-color: #f7f7f7;">
    <headerView/>

		<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);" v-show="parentData.name!='首页' && parentData.name!=thisColumn.name" @click="$to('listPage3',{pid:thisColumn.parent?thisColumn.parent:thisColumn.id,id:thisColumn.parent?thisColumn.id:null})">{{parentData.name}} > </a>
				<a href="javascript:void(0);" @click="$to('listPage3',{pid:thisColumn.parent?thisColumn.parent:thisColumn.id,id:thisColumn.parent?thisColumn.id:null})">{{thisColumn.name}}</a>
			</div>
		</div>
		<div class="er_contant clearfloat">
			<div class="cyh_contr "  style="width:100%;">
				<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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;作者：<span>{{articleData.author}}</span></span>
					</div>
					<p v-html="linkOpenToNewPage(articleData.content)"></p>
          
					<div v-if="articleData.files" style="cursor:pointer;">
						<span>附件：</span>
						<div v-if="articleData.files.indexOf(',')>-1">
							<div v-for="(fj,index) in articleData.files.split(',')" :key="index">
								<span  @click="downloadFile(fj)">{{fujian(fj)}}</span>
							</div>
						</div>
						<div v-else>
						<span  @click="downloadFile(articleData.files)">{{fujian(articleData.files)}}</span>
						</div>
					</div>
				</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:{
    fujian(record){
      var arr = record.split("/");
      return arr[1];
    },
    linkOpenToNewPage(v){
      if(v && v.indexOf("<a ")>-1){
        v = v.replaceAll("<a ",'<a target="_blank"')
      }
      return v;
    },
    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 lang="less">
/deep/ img{
  width: auto !important;
}
</style>