nyzy_vue/src/views/gateway/listPage2.vue

622 lines
18 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>