nyzy_vue/src/views/gateway/listPage2.vue

<template>
  <div>
    <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);" @click="$to('listPage',{pid:thisColumn.parent})">{{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_contll left" style="width: 240px;">
				<div class="hjk_item">
					<h3>区域农业资源</h3>
					<div class="" style="width: 60px;height: 3px;background-color: #1dcc6a;margin-top: -3px;"></div>
				</div>
				<div class="navTab-panel tabsPageContent layoutBox" style="width: 240px;">
				  <div class="page unitBox">
				    <div class="pageFormContent">
				      <div id="leftside"> 
				        <!-- jtree模板 -->
				        <div id="sidebar">
							<a-tree
							:show-line="true"
							:default-expanded-keys="['10101', '10102', '10103', '10104']"
							@select="onSelect"
							>
								<a-tree-node key="10101">
									<span slot="title">
										<img src="img/smiley_sleep.png" class="iconClass">
										<span style="float:left;" @click="typeFun('10101')">西部杂粮杂豆</span>
									</span>
									<a-tree-node key="1010101" >
										<span slot="title">
											<img src="img/smiley_sleep.png" class="iconClass">
											<span style="float:left;" @click="nyzyFun('1010101')">高粱</span>
										</span>
										<a-tree-node key="101010101">
											<span slot="title">
												<img src="img/smiley_sleep.png" class="iconClass">
												<span style="float:left;" @click="nyzyFun('101010101')">育种</span>
											</span>
										</a-tree-node>
										<a-tree-node key="101010102">
											<span slot="title">
												<img src="img/smiley_sleep.png" class="iconClass">
												<span style="float:left;" @click="nyzyFun('101010102')">栽培</span>
											</span>
										</a-tree-node>
									</a-tree-node>
									<a-tree-node key="1010102" >
										<span slot="title">
											<img src="img/smiley_sleep.png" class="iconClass">
											<span style="float:left;" @click="nyzyFun('1010102')">花生</span>
										</span>
										<a-tree-node key="101010201">
											<span slot="title">
												<img src="img/smiley_sleep.png" class="iconClass">
												<span style="float:left;" @click="nyzyFun('101010201')">育种</span>
											</span>
										</a-tree-node>
										<a-tree-node key="101010202">
											<span slot="title">
												<img src="img/smiley_sleep.png" class="iconClass">
												<span style="float:left;" @click="nyzyFun('101010202')">栽培</span>
											</span>
										</a-tree-node>
									</a-tree-node>
									<a-tree-node key="1010103" >
										<span slot="title">
											<img src="img/smiley_sleep.png" class="iconClass">
											<span style="float:left;" @click="nyzyFun('1010103')">绿豆</span>
										</span>
										<a-tree-node key="101010301">
											<span slot="title">
												<img src="img/smiley_sleep.png" class="iconClass">
												<span style="float:left;" @click="nyzyFun('101010301')">育种</span>
											</span>
										</a-tree-node>
										<a-tree-node key="101010302">
											<span slot="title">
												<img src="img/smiley_sleep.png" class="iconClass">
												<span style="float:left;" @click="nyzyFun('101010302')">栽培</span>
											</span>
										</a-tree-node>
									</a-tree-node>
									<a-tree-node key="1010104" >
										<span slot="title">
											<img src="img/smiley_sleep.png" class="iconClass">
											<span style="float:left;" @click="nyzyFun('1010104')">小豆</span>
										</span>
										<a-tree-node key="101010401">
											<span slot="title">
												<img src="img/smiley_sleep.png" class="iconClass">
												<span style="float:left;" @click="nyzyFun('101010401')">育种</span>
											</span>
										</a-tree-node>
										<a-tree-node key="101010402">
											<span slot="title">
												<img src="img/smiley_sleep.png" class="iconClass">
												<span style="float:left;" @click="nyzyFun('101010402')">栽培</span>
											</span>
										</a-tree-node>
									</a-tree-node>
									<a-tree-node key="1010105" >
										<span slot="title">
											<img src="img/smiley_sleep.png" class="iconClass">
											<span style="float:left;" @click="nyzyFun('1010105')">燕麦</span>
										</span>
										<a-tree-node key="101010501">
											<span slot="title">
												<img src="img/smiley_sleep.png" class="iconClass">
												<span style="float:left;" @click="nyzyFun('101010501')">育种</span>
											</span>
										</a-tree-node>
										<a-tree-node key="101010502">
											<span slot="title">
												<img src="img/smiley_sleep.png" class="iconClass">
												<span style="float:left;" @click="nyzyFun('101010502')">栽培</span>
											</span>
										</a-tree-node>
									</a-tree-node>
									<a-tree-node key="1010106" >
										<span slot="title">
											<img src="img/smiley_sleep.png" class="iconClass">
											<span style="float:left;" @click="nyzyFun('1010106')">谷子</span>
										</span>
										<a-tree-node key="101010601">
											<span slot="title">
												<img src="img/smiley_sleep.png" class="iconClass">
												<span style="float:left;" @click="nyzyFun('101010601')">育种</span>
											</span>
										</a-tree-node>
										<a-tree-node key="101010602">
											<span slot="title">
												<img src="img/smiley_sleep.png" class="iconClass">
												<span style="float:left;" @click="nyzyFun('101010602')">栽培</span>
											</span>
										</a-tree-node>
									</a-tree-node>
									<a-tree-node key="1010107" >
										<span slot="title">
											<img src="img/smiley_sleep.png" class="iconClass">
											<span style="float:left;" @click="nyzyFun('1010107')">向日葵</span>
										</span>
										<a-tree-node key="101010701">
											<span slot="title">
												<img src="img/smiley_sleep.png" class="iconClass">
												<span style="float:left;" @click="nyzyFun('101010701')">育种</span>
											</span>
										</a-tree-node>
										<a-tree-node key="101010702">
											<span slot="title">
												<img src="img/smiley_sleep.png" class="iconClass">
												<span style="float:left;" @click="nyzyFun('101010702')">栽培</span>
											</span>
										</a-tree-node>
									</a-tree-node>
								</a-tree-node>
								<a-tree-node key="10102">
									<span slot="title">
										<img src="img/smiley_sleep.png" class="iconClass">
										<span style="float:left;" @click="typeFun('10102')">东部经济资源</span>
									</span>
									<a-tree-node key="1010201" >
										<span slot="title">
											<img src="img/smiley_sleep.png" class="iconClass">
											<span style="float:left;" @click="nyzyFun('1010201')">大豆</span>
										</span>
									</a-tree-node>
									<a-tree-node key="1010202" >
										<span slot="title">
											<img src="img/smiley_sleep.png" class="iconClass">
											<span style="float:left;" @click="nyzyFun('1010202')">食用菌</span>
										</span>
									</a-tree-node>
									<a-tree-node key="1010203" >
										<span slot="title">
											<img src="img/smiley_sleep.png" class="iconClass">
											<span style="float:left;" @click="nyzyFun('1010203')">中药材</span>
										</span>
									</a-tree-node>
									<a-tree-node key="1010204" >
										<span slot="title">
											<img src="img/smiley_sleep.png" class="iconClass">
											<span style="float:left;" @click="nyzyFun('1010204')">林果资源</span>
										</span>
									</a-tree-node>
								</a-tree-node>
								<a-tree-node key="10103">
									<span slot="title">
										<img src="img/smiley_sleep.png" class="iconClass">
										<span style="float:left;" @click="typeFun('10103')">中部粮食资源</span>
									</span>
									<a-tree-node key="1010301" >
										<span slot="title">
											<img src="img/smiley_sleep.png" class="iconClass">
											<span style="float:left;" @click="nyzyFun('1010301')">水稻</span>
										</span>
									</a-tree-node>
									<a-tree-node key="1010302" >
										<span slot="title">
											<img src="img/smiley_sleep.png" class="iconClass">
											<span style="float:left;" @click="nyzyFun('1010302')">玉米</span>
										</span>
									</a-tree-node>
								</a-tree-node>
								
								<a-tree-node key="10104">
									<span slot="title">
										<img src="img/smiley_sleep.png" class="iconClass">
										<span style="float:left;" @click="typeFun('10104')">适宜吉林省种植资源</span>
									</span>
									<a-tree-node key="1010401" >
										<span slot="title">
											<img src="img/smiley_sleep.png" class="iconClass">
											<span style="float:left;" @click="nyzyFun('1010401')">高粱</span>
										</span>
									</a-tree-node>
									<a-tree-node key="1010402" >
										<span slot="title">
											<img src="img/smiley_sleep.png" class="iconClass">
											<span style="float:left;" @click="nyzyFun('1010402')">花生</span>
										</span>
									</a-tree-node>
									<a-tree-node key="1010403" >
										<span slot="title">
											<img src="img/smiley_sleep.png" class="iconClass">
											<span style="float:left;" @click="nyzyFun('1010403')">绿豆</span>
										</span>
									</a-tree-node>
									<a-tree-node key="1010404" >
										<span slot="title">
											<img src="img/smiley_sleep.png" class="iconClass">
											<span style="float:left;" @click="nyzyFun('1010404')">小豆</span>
										</span>
									</a-tree-node>
									<a-tree-node key="1010405" >
										<span slot="title">
											<img src="img/smiley_sleep.png" class="iconClass">
											<span style="float:left;" @click="nyzyFun('1010405')">燕麦</span>
										</span>
									</a-tree-node>
									<a-tree-node key="1010406" >
										<span slot="title">
											<img src="img/smiley_sleep.png" class="iconClass">
											<span style="float:left;" @click="nyzyFun('1010406')">谷子</span>
										</span>
									</a-tree-node>
									<a-tree-node key="1010407" >
										<span slot="title">
											<img src="img/smiley_sleep.png" class="iconClass">
											<span style="float:left;" @click="nyzyFun('1010407')">向日癸</span>
										</span>
									</a-tree-node>
								</a-tree-node>
								<a-tree-node key="10105">
									<span slot="title">
										<img src="img/smiley_sleep.png" class="iconClass">
										<span style="float:left;" @click="typeFun('10105')">其他</span>
									</span>
								</a-tree-node>
								 
							</a-tree>
				        </div>
				      </div>
				    </div>
				  </div>
				</div>
			</div>
			<div class="er_contr right" v-show="nyzyShow">
				<ul>
					<template v-for="(zyDataList ) in nyzyData" >
						<template v-if="zyDataList.key == typeOption" >
							<li  v-for="(zyData , zyIndex) in zyDataList.content" :key="zyIndex">
								<a href="javascript:void(0)" class="er_coa">
										<div>
											<div class="er_coaimg" @click="nyzyFun(zyData.code)">
												<img :src="zyData.picPath" >
											</div>
											<div class="er_item" @click="nyzyFun(zyData.code)" v-text="zyData.title" ></div>
										</div>
								</a>
							</li>
						</template>
					</template>
				</ul>
			</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('detailedPage2',{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>



    <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: [],
	  nyzyShow: true,
	  listShow: false,
	  nyzyData: [
		{
			key:'10101',
			content:[
				{
					title: '高粱',
					code: '1010101',
					picPath:'img/nyzy_gl.jpg'
				},
				{
					title: '花生',
					code: '1010102',
					picPath:'img/nyzy_hs.jpg'
				},
				{
					title: '绿豆',
					code: '1010103',
					picPath:'img/nyzy_ld.jpg'
				},
				{
					title: '小豆',
					code: '1010104',
					picPath:'img/nyzy_xd.jpg'
				},
				{
					title: '燕麦',
					code: '1010105',
					picPath:'img/nyzy_ym.jpg'
				},
				{
					title: '谷子',
					code: '1010106',
					picPath:'img/nyzy_gz.jpg'
				},
				{
					title: '向日葵',
					code: '1010107',
					picPath:'img/nyzy_xrk.jpg'
				}
			]
		},
		{
			key:'10102',
			content:[
				{
					title: '大豆',
					code: '1010201',
					picPath:'img/nyzy_dd.jpg'
				},
				{
					title: '食用菌',
					code: '1010202',
					picPath:'img/nyzy_syj.jpg'
				},
				{
					title: '中药材',
					code: '1010203',
					picPath:'img/nyzy_zyc.jpg'
				},
				{
					title: '林果资源',
					code: '1010204',
					picPath:'img/nyzy_lgzy.jpg'
				},
			]
		},
		{
			key:'10103',
			content:[
				{
					title: '水稻',
					code: '1010301',
					picPath:'img/nyzy_sd.jpg'
				},
				{
					title: '玉米',
					code: '1010302',
					picPath:'img/nyzy_ym2.jpg'
				},
			]
		},
		{
			key:'10104',
			content:[
				{
					title: '高粱',
					code: '1010401',
					picPath:'img/nyzy_gl.jpg'
				},
				{
					title: '花生',
					code: '1010402',
					picPath:'img/nyzy_hs.jpg'
				},
				{
					title: '绿豆',
					code: '1010403',
					picPath:'img/nyzy_ld.jpg'
				},
				{
					title: '小豆',
					code: '1010404',
					picPath:'img/nyzy_xd.jpg'
				},
				{
					title: '燕麦',
					code: '1010405',
					picPath:'img/nyzy_ym.jpg'
				},
				{
					title: '谷子',
					code: '1010406',
					picPath:'img/nyzy_gz.jpg'
				},
				{
					title: '向日癸',
					code: '1010407',
					picPath:'img/nyzy_xrk.jpg'
				},
			]
		}
	  ],
	  treeData: [
			{
				title: 'parent 1',
				key: '0-0',
				slots: {
				icon: 'smile',
				},
				children: [
				{ title: 'leaf', key: '0-0-0', slots: { icon: 'meh' } },
				{ title: 'leaf', key: '0-0-1', scopedSlots: { icon: 'custom' } },
				],
			},
		],
		typeOption:'10101',
    }
  },
  computed:{
    pid(){
      return this.$route.query.pid || '-1';
    },
    id(){
      return this.$route.query.id;
    },
    findStr(){
      if(this.$route.query.findStr){
        return '*'+this.$route.query.findStr+'*';
      }else{
        return '';
      }
    },
  },
  mounted(){
    this.loadData();
  },
  watch:{
    pid(){
      this.loadData();
    },
    id(){
      this.loadData();
    },
    findStr(){
      this.loadData();
    }
  },
  updated(){
  },
  methods:{
	nyzyFun(record){
		this.nyzyShow= false
		this.listShow= true


		let columnId = record;
		//查询文章列表
		let findParam = {}
		if(this.findStr){
		if(this.utils.isCn()){
			findParam.title = this.findStr;
		}else if(this.utils.isEn()){
			findParam.titleen = this.findStr;
		}
		}else{
		//非搜索，还没有子id，差个锤子
		columnId = (columnId || this.pid) || '-1'
		}
		getAction('/gateway/gatewayArticle/list',{pageSize:-1,isRelease:'Y',columnId,...findParam,column: 'createTime',order: 'desc'}).then((res)=>{
		if(res.success){
			let list = res.result.records||res.result;
			this.articleList = list;
		}
		});
	},
	typeFun(record){
		this.typeOption = record
		this.nyzyShow= true
		this.listShow= false
	},
	onSelect(selectedKeys, info) {
      console.log('selected', selectedKeys, info);
    },
    loadData(){
		var typeOption = this.id
		if(typeOption.length>5){
			this.typeOption = typeOption.substring(0,5)
			
			this.nyzyShow= false
			this.listShow= true
			
			let columnId = this.id;
			//查询文章列表
			let findParam = {}
			if(this.findStr){
			if(this.utils.isCn()){
				findParam.title = this.findStr;
			}else if(this.utils.isEn()){
				findParam.titleen = this.findStr;
			}
			}else{
			//非搜索，还没有子id，差个锤子
			columnId = (columnId || this.pid) || '-1'
			}
			getAction('/gateway/gatewayArticle/list',{pageSize:-1,isRelease:'Y',columnId,...findParam,column: 'createTime',order: 'desc'}).then((res)=>{
			if(res.success){
				let list = res.result.records||res.result;
				this.articleList = list;
			}
			});
			
		}else{
			this.typeOption = this.id
			this.nyzyShow= true
			this.listShow= false
			
		}
		console.log('--->',this.typeOption);
	    
		//查询栏目（包含当前的和候选的）
		// getAction('/gateway/gatewayColumn/list',{pageSize:-1,isEnable:'Y',fpid:this.pid,column: 'createTime',order: 'desc'}).then((res)=>{
		// 	if(res.success){
		// 	let list = res.result.records||res.result;
		// 	// console.log('list===>',list);
		// 	//查出根节点
		// 	this.parentData = list.find(x => !x.parent);
		// 	if(this.id){
		// 		this.thisColumn = list.find(x => x.id == this.id);
		// 		this.columnList = list.filter(x => x.parent);
		// 	}else{
		// 		this.thisColumn = list[0];
		// 		this.columnList = [];
		// 		this.columnList.push(list[0]);
		// 	}
		// 	}
		// });
    },
    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">
.iconClass{
	width:15px;
	height:15px;
	float:left;
	margin:5px;
}
</style>