mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-10 03:16:42 +08:00
1247 lines
38 KiB
Vue
1247 lines
38 KiB
Vue
<template>
|
||
<div id="case-list-content">
|
||
<div style="margin-bottom:30px" class="case-banner">
|
||
<portal-header current="case" textColor="#fff" @emitInput="emitInput"></portal-header>
|
||
</div>
|
||
<div class="xcontent2">
|
||
<div class="xcontent2-main" style="margin-right: 30px;">
|
||
<div class="left-div">
|
||
<div class="search-div">
|
||
<div class="searchbar" v-if="fieldData.length > 0">
|
||
<div style="line-height: 30px;">
|
||
<span class="item-title">搜索条件</span>
|
||
<el-tag closable v-for="(tag, tagIdx) in fieldData" :key="tagIdx" @close="tagsClose(tag,tagIdx)">{{ tag.name }}</el-tag>
|
||
</div>
|
||
</div>
|
||
<div class="search-item">
|
||
<div style="margin-top:10px; display: flex;margin-bottom:24px;">
|
||
<div style="line-height: 25px;padding-right: 10px;">
|
||
<!-- <img class="orgaicon" :src="`${webBaseUrl}/images/orgaimg.png`" alt=""> -->
|
||
<span class="item-title" >组织领域</span>
|
||
<span class="item-line"></span>
|
||
</div>
|
||
<div style="flex:1;">
|
||
<div class="field">
|
||
<div :class="fielclass ? 'fieldactive' :'' " @click="domainall()">全部</div>
|
||
<div :class="item.fielclass ? 'fieldactive' :'' " @click="fieldswich(item)" v-for="(item,idx) in domain" :key="'t'+ idx">{{item.name}}</div>
|
||
</div>
|
||
<!-- <el-checkbox-group v-model="queryCondition.orgDomain" size="mini" @change="search()">
|
||
<el-checkbox-button :label="null">全部</el-checkbox-button>
|
||
<el-checkbox-button v-for="item in domain" :key="item.code" :label="item.code"> {{ item.name}}</el-checkbox-button>
|
||
</el-checkbox-group> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="search-div-collapse">
|
||
<div class="search-item">
|
||
|
||
<div style="margin-top:10px; display: flex;">
|
||
<div style="line-height: 25px;padding-right: 10px;">
|
||
<!-- <img class="orgaicon" :src="`${webBaseUrl}/images/specimg.png`" alt=""> -->
|
||
<span class="item-title" >专业分类</span>
|
||
<span class="item-line"></span>
|
||
</div>
|
||
<div style="flex:1" id="searchBox">
|
||
<div class="field">
|
||
<div :class="fielclassjor ? 'fieldactive' :'' " @click="majorall()">全部</div>
|
||
<div :class="item.fielclass ? 'fieldactive' :'' " @click="fieldmajor(item)" v-for="(item,idx) in speciData" :key="'d'+idx">{{item.name}}</div>
|
||
</div>
|
||
<!-- <el-radio-group style="display:flex;" v-model="queryCondition.majorType" size="mini" @change="search()">
|
||
<el-radio-button :label="null">全部</el-radio-button>
|
||
<div>
|
||
<el-radio-button v-for="item in speciData" :key="item.code" :label="item.code" > {{ item.name }} </el-radio-button>
|
||
</div>
|
||
</el-radio-group> -->
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="searBox" v-if="searchwd">
|
||
<el-button type="text" id="closeSearchBtn" @click="closeSearch">
|
||
{{word}}
|
||
<i :class="showAll ? 'el-icon-arrow-up ': 'el-icon-arrow-down'"></i>
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<div style="height:30px;background-color:#f6f7fc;"></div>
|
||
<div class="order-div" style="border-bottom:none">
|
||
<span class="quyer-tag">
|
||
<el-button type="text" class="order-class" @click="searchData('views')" :class="{ actice: queryCondition.orderField == 'views' }">最热</el-button>
|
||
<el-button type="text" class="order-class" @click="searchData('')" :class="{ actice: queryCondition.orderField == '' }">最新</el-button>
|
||
<el-button type="text" class="order-class" @click="searchexcellent()" :class="{ actice: queryCondition.excellent == true }">优秀案例</el-button>
|
||
|
||
<!-- <el-button type="text" class="order-class" @click="queryCondition.breCommend = queryCondition.breCommend == ture ? true : null" :class="{ actice: queryCondition.breCommend == true }">组织推荐</el-button> -->
|
||
</span>
|
||
</div>
|
||
<div class="data-content">
|
||
<div v-for="item in caseList.list" :key="item.id" class="case-list">
|
||
<div class="case-info">
|
||
<div class="case-info-cont">
|
||
<router-link :to="'/case/detail?id='+item.id">
|
||
<div class="case-info-title">
|
||
<div class="case-titdiv">
|
||
<span class="case-tittext" v-html="item.title"></span>
|
||
<div class="case-info-date portal-time">
|
||
<i class="el-icon-time"></i>
|
||
<time-show :time="item.sysCreateTime"></time-show>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</router-link>
|
||
<div style="height:58px;padding-top:14px ">
|
||
<author :avatar="item.authorInfo.avatar" :name="item.authorInfo.name" :info="item.authorInfo.orgInfo" :sex="item.authorInfo.sex" :aid="item.authorInfo.aid"></author>
|
||
</div>
|
||
<router-link :to="'/case/detail?id='+item.id">
|
||
<div class="keyword-text clearfix">
|
||
<div style="color:#2974D6;font-weight: 450;" v-if="item.orgDomain">{{ orgDomainTranslate(item.orgDomain) }}</div>
|
||
<div style="color:#2974D6;font-weight: 450;" v-if="item.orgDomain == '' && item.orgDomainParent">{{ orgDomainTranslate(item.orgDomainParent) }}</div>
|
||
<div style="color:#2974D6;font-weight: 450;" v-for="item,idx in item.majorType" :key="idx" >{{ majorTypeTranslate(item) }}</div>
|
||
<div v-if="item.keyword1">{{ item.keyword1 }}</div>
|
||
<div v-if="item.keyword2">{{ item.keyword2 }}</div>
|
||
<div v-if="item.keyword3">{{ item.keyword3 }}</div>
|
||
<div v-if="item.keyword4">{{ item.keyword4 }}</div>
|
||
<div v-if="item.keyword5">{{ item.keyword5 }}</div>
|
||
</div>
|
||
</router-link>
|
||
<div class="case-info-summary two-line-ellipsis" @click="jumcasedet(item)">
|
||
{{ item.summary }}
|
||
<!-- <router-link :to="'/case/detail?id='+item.id"> -->
|
||
<!-- {{displayAll(item)}} -->
|
||
<!-- </router-link> -->
|
||
<!-- <span style="color:#588afc;cursor:pointer;" v-if="item.summary.length>150" @click.stop="changeIsAll(item)"> -->
|
||
<!-- {{item.isAll?'收起':'展开'}} -->
|
||
<!-- </span> -->
|
||
</div>
|
||
<div style="display: flex;justify-content: flex-end;">
|
||
<div style="margin:8px 0;">
|
||
<interactBar :type="0" :data="item" :readonly="true"></interactBar> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pagination-div">
|
||
<span class="pag-text" @click="loadMore()" v-if="moreState == 1">加载更多</span>
|
||
<span class="pag-text-msg" v-else-if="moreState == 2">数据加载中</span>
|
||
<span class="notcoures" v-else-if="caseList.list.length == 0">
|
||
<img :src="`${webBaseUrl}/images/nocase.png`" alt="">
|
||
<h5>暂无案例，请优先学习其它案例吧～</h5>
|
||
</span>
|
||
<!-- <span class="pag-text-msg" v-else-if="isSeach">没有查询到相关内容</span> -->
|
||
</div>
|
||
<div v-if="isSeach" style="height:382px">
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="xcontent2-minor">
|
||
<div id="fixd-box">
|
||
<div class="portal-ranking ranking-bg">
|
||
<p class="ranking-title">好评榜</p>
|
||
<ul class="ranking-data">
|
||
<li v-for="(item, index) in Positive" :key="index" class="title-line-ellipsis" style="cursor: pointer;margin-top:30px;line-height: 22px;">
|
||
<router-link :to="'/case/detail?id='+item.id">
|
||
<span class="portal-right-text blue-one" v-if="index==0">
|
||
<img :src="`${webBaseUrl}/images/listblue01.png`" alt="">
|
||
</span>
|
||
<span class="portal-right-text blue-tow" v-if="index==1">
|
||
<img :src="`${webBaseUrl}/images/listblue02.png`" alt="">
|
||
</span>
|
||
<span class="portal-right-text blue-three" v-if="index==2">
|
||
<img :src="`${webBaseUrl}/images/listblue03.png`" alt="">
|
||
</span>
|
||
<span class="portal-right-text" v-if="index==3">
|
||
<img :src="`${webBaseUrl}/images/list04.png`" alt="">
|
||
</span>
|
||
<span class="portal-right-text" v-if="index==4">
|
||
<img :src="`${webBaseUrl}/images/list05.png`" alt="">
|
||
</span>
|
||
<span class="portal-title-desc" style="font-size: 14px;">{{ item.title }}</span>
|
||
</router-link>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="portal-ranking ranking-bg1" style="margin-top:26px" >
|
||
<p class="ranking-title">人气榜</p>
|
||
<ul class="ranking-data">
|
||
<li v-for="(item, index) in Popularity" :key="index" class="title-line-ellipsis" style="cursor: pointer;margin-top:30px;line-height: 22px;">
|
||
<router-link :to="'/case/detail?id='+item.id">
|
||
<span class="portal-right-text orange-one" v-if="index==0">
|
||
<img :src="`${webBaseUrl}/images/list-01.png`" alt="">
|
||
</span>
|
||
<span class="portal-right-text orange-tow" v-if="index==1">
|
||
<img :src="`${webBaseUrl}/images/list02.png`" alt="">
|
||
</span>
|
||
<span class="portal-right-text orange-three" v-if="index==2">
|
||
<img :src="`${webBaseUrl}/images/list03.png`" alt="">
|
||
</span>
|
||
<span class="portal-right-text" v-if="index==3">
|
||
<img :src="`${webBaseUrl}/images/list04.png`" alt="">
|
||
</span>
|
||
<span class="portal-right-text" v-if="index==4">
|
||
<img :src="`${webBaseUrl}/images/list05.png`" alt="">
|
||
</span>
|
||
<span class="portal-title-desc" style="font-size: 14px;">{{ item.title }}</span>
|
||
</router-link>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- <div class="course-resources pointer"> -->
|
||
<!-- 资源位 -->
|
||
<!-- <img @click="banJump()" :src="fileBaseUrl + resonimg.image" alt=""> -->
|
||
<!-- </div> -->
|
||
</div>
|
||
</div>
|
||
<div style="height: 50px;"></div>
|
||
<el-dialog class="protocol" :close-on-click-modal="false" :visible.sync="protocolDialogVisible" width="30%" :show-close="false">
|
||
<div class="protocol-title">案例查阅及使用用户协议</div>
|
||
<div class="protocol-content">
|
||
  本专区内案例为BOE各组织沉淀的通用案例、 组织案例、卓越绩效案例、管理案例、 职级晋升案例、企业文化案例等。 案例内容记录作者亲历的、真实的、已完成的、
|
||
典型工作事件，提炼解决具体问题的心得、思路经验、方法等。 仅供BOE员工查询、学习、交流使用，未经允许不得以任何方式外传。
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-checkbox label="我已阅读并同意。" @change="protocolCheck" style="float: left"></el-checkbox>
|
||
<el-tooltip :disabled="!protocolConfirmButton" effect="light" content="请先勾选‘我已阅读并同意。’" placement="bottom">
|
||
<span><el-button type="primary" :disabled="protocolConfirmButton" @click="protocolConfirm">确 定</el-button></span>
|
||
</el-tooltip>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
<portal-footer></portal-footer>
|
||
<portalFloatTools></portalFloatTools>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from "vuex";
|
||
import portalHeader from "@/components/PortalHeader.vue";
|
||
import portalFooter from "@/components/PortalFooter.vue";
|
||
import portalFloatTools from "@/components/PortalFloatTools.vue";
|
||
import interactBar from "@/components/Portal/interactBar.vue";
|
||
import timeShow from "@/components/Portal/datetimeShow.vue";
|
||
import author from "@/components/Portal/authorInfo.vue";
|
||
import apiCase from "@/api/modules/cases.js";
|
||
import apiUser from "@/api/system/user.js";
|
||
import apiSearchterm from "@/api/modules/searchterm.js";
|
||
import { deepClone } from "../../../utils";
|
||
import apiDict from "@/api/modules/dict.js";
|
||
import {cutFullName} from "@/utils/tools.js";
|
||
import apiPlace from "@/api/phase2/place.js"
|
||
export default {
|
||
name: "index",
|
||
components: {
|
||
portalHeader,
|
||
portalFooter,
|
||
portalFloatTools,
|
||
interactBar,
|
||
timeShow,
|
||
author
|
||
},
|
||
computed: {
|
||
...mapGetters(["userInfo", "portalCase"]),
|
||
word: function() {
|
||
if (this.showAll == false) {
|
||
//对文字进行处理
|
||
return "展开";
|
||
} else {
|
||
return "收起";
|
||
}
|
||
},
|
||
isMore() {
|
||
let isOk = true;
|
||
if (this.caseList.list.length === this.caseList.count) {
|
||
isOk = false;
|
||
}
|
||
return isOk;
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
|
||
resonimg:{},
|
||
speciData:[],
|
||
moreState: 1, // 1 加载更多 2 加载中 3无数据
|
||
isSeach: false,
|
||
searchwd: false,
|
||
showAll: true, //是否展开全部
|
||
initHeight:40,//原始 高度
|
||
searchRecords: [],
|
||
caseList: {
|
||
count: 0,
|
||
list: []
|
||
},
|
||
ankingList: [],
|
||
Popularity: [],
|
||
Positive: [],
|
||
domain: [],
|
||
Profess: [],
|
||
optionsList: [], //分类数据
|
||
protocolDialogVisible: false,
|
||
protocolConfirmButton: true,
|
||
queryCondition: {
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
isTop: true,
|
||
orderField: "views",
|
||
// breCommend:null,
|
||
keyWord: "",
|
||
majorType:'', //专业分类
|
||
orgDomain: '', // 组织领域
|
||
orderAsc: false,
|
||
excellent:false
|
||
},
|
||
keyWord: "",
|
||
anking: 2,
|
||
queryExpand: true, // true更多，false收起
|
||
category: 0,
|
||
type2: 0,
|
||
type3: 0,
|
||
isFind: false,
|
||
searchTags: [],
|
||
orgData: [],
|
||
fieldData:[],
|
||
fielclass:true,
|
||
fielclassjor:true,
|
||
orgDomainData:'',
|
||
orgsto:[],
|
||
majorTypeData:'',
|
||
majsto:[],
|
||
Domarr:[],
|
||
majarr:[],
|
||
domData:[],
|
||
majData:[],
|
||
};
|
||
},
|
||
|
||
mounted() {
|
||
if(this.searchTags.length == 0){
|
||
this.queryCondition.majorType = null;
|
||
this.queryCondition.orgDomain = null;
|
||
};
|
||
this.specialized();
|
||
if (!this.portalCase.readProtocol) {
|
||
this.protocolDialogVisible = true;
|
||
}
|
||
this.keyWord = this.$route.query.keyword;
|
||
if (this.keyWord != "") {
|
||
this.isSeach = true;
|
||
}
|
||
this.getAnkingData();
|
||
this.getPopularity();
|
||
this.searchterm();
|
||
this.getPositive();
|
||
//this.getProfess();
|
||
this.getdomain();
|
||
// this.getCaseData();
|
||
this.search();
|
||
this.couresreso();
|
||
window.addEventListener("scroll", this.handleScroll);
|
||
|
||
},
|
||
|
||
watch: {
|
||
// queryCondition:{
|
||
// handler(newValue,oldValue){
|
||
// this.getCaseData()
|
||
// },
|
||
// deep:true,
|
||
// immediate:true
|
||
// }
|
||
},
|
||
beforeDestroy() {
|
||
window.removeEventListener("scroll", this.handleScroll);
|
||
},
|
||
methods: {
|
||
majorall(){
|
||
this.queryCondition.majorType = '';
|
||
this.fielclassjor=true;
|
||
if(this.fielclassjor){
|
||
let narr = this.fieldData;
|
||
this.fieldData = narr.filter(item => {
|
||
if(item.type == 'major_type') {
|
||
console.log(item);
|
||
item.fielclass = false;
|
||
return false;
|
||
}else{
|
||
return true;
|
||
}
|
||
})
|
||
}
|
||
this.getCaseData();
|
||
},
|
||
domainall(){
|
||
this.queryCondition.orgDomain = '';
|
||
this.fielclass=true;
|
||
if(this.fielclass){
|
||
var newArr = this.fieldData;
|
||
this.fieldData = newArr.filter(item => {
|
||
if(item.type == 'org_domain') {
|
||
console.log(item);
|
||
item.fielclass = false;
|
||
return false;
|
||
console.log(this.fieldData)
|
||
}else{
|
||
return true;
|
||
}
|
||
})
|
||
}
|
||
this.getCaseData();
|
||
},
|
||
fieldmajor(item){//专业分类
|
||
this.fielclassjor = false;
|
||
item.fielclass = !item.fielclass;
|
||
if(item.fielclass){
|
||
let has=this.fieldData.some(fd=>{
|
||
return fd.code==item.code;
|
||
});
|
||
if(!has){
|
||
this.fieldData.push(item);
|
||
}
|
||
}else{
|
||
let delIdx=-1;
|
||
this.fieldData.some((fd,fdidx)=>{
|
||
if(fd.code==item.code){
|
||
delIdx=fdidx;
|
||
return true;
|
||
}
|
||
return false;
|
||
});
|
||
if(delIdx>-1){
|
||
this.fieldData.splice(delIdx,1);
|
||
}
|
||
}
|
||
this.majsto.push(item.code);
|
||
this.majorTypeData = this.majsto.toString()//传给后端
|
||
this.queryCondition.majorType = this.majorTypeData;
|
||
this.getCaseData();
|
||
this.ceshiorg();
|
||
},
|
||
ceshiorg(){//判断专业
|
||
this.majData = [];
|
||
this.fieldData.forEach(itx =>{
|
||
if(itx.type == 'major_type'){
|
||
console.log(typeof itx);
|
||
if(itx.fielclass == true){
|
||
this.majData.push(itx)
|
||
}
|
||
}
|
||
})
|
||
console.log(this.majData);
|
||
let b = JSON.stringify(this.majData);
|
||
if(b == '[]'){
|
||
this.fielclassjor=true;
|
||
}
|
||
},
|
||
ceshidom(){//判断组织
|
||
this.domData = [];
|
||
this.fieldData.forEach(itx =>{
|
||
if(itx.type == 'org_domain'){
|
||
console.log(typeof itx);
|
||
if(itx.fielclass == true){
|
||
this.domData.push(itx)
|
||
}
|
||
}
|
||
})
|
||
let b = JSON.stringify(this.domData);
|
||
if(b == '[]'){
|
||
this.fielclass=true;
|
||
}
|
||
},
|
||
fieldswich(item){//组织领域
|
||
this.fielclass=false;
|
||
item.fielclass = !item.fielclass;
|
||
if(item.fielclass){
|
||
let has=this.fieldData.some(fd=>{
|
||
return fd.code==item.code;
|
||
});
|
||
//console.log(has,'has')
|
||
if(!has){
|
||
this.fieldData.push(item);
|
||
}
|
||
}else{
|
||
let delIdx=-1;
|
||
this.fieldData.some((fd,fdidx)=>{
|
||
if(fd.code==item.code){
|
||
delIdx=fdidx;
|
||
return true;
|
||
}
|
||
return false;
|
||
});
|
||
if(delIdx>-1){
|
||
this.fieldData.splice(delIdx,1);
|
||
}
|
||
}
|
||
this.orgsto.push(item.code);
|
||
this.orgDomainData = this.orgsto.toString()//传给后端
|
||
this.queryCondition.orgDomain = this.orgDomainData;
|
||
this.getCaseData();
|
||
this.ceshidom();
|
||
},
|
||
|
||
banJump() {
|
||
if(this.resonimg.JumpUrl) {
|
||
window.open(this.resonimg.JumpUrl);
|
||
}
|
||
},
|
||
couresreso(){
|
||
let key = 'case';
|
||
apiPlace.detail(key).then(res=>{
|
||
let lmj = JSON.parse(res.result.content)
|
||
this.resonimg = lmj[0]
|
||
})
|
||
},
|
||
specialized(){
|
||
let $this=this;
|
||
apiCase.majorTypes().then(res =>{
|
||
if(res.status == 200){
|
||
if (res.status == 200) {
|
||
res.result.forEach(item =>{
|
||
item.fielclass = false;
|
||
item.type='major_type';
|
||
})
|
||
}
|
||
this.speciData = res.result;
|
||
this.Profess=res.result;
|
||
this.$nextTick(function() {
|
||
$this.initHeight = document.getElementById("searchBox").offsetHeight;
|
||
$this.closeSearch();
|
||
});
|
||
}
|
||
})
|
||
},
|
||
|
||
|
||
jumcasedet(item) {
|
||
this.$router.push({path:'/case/detail',query:{id:item.id}});
|
||
|
||
},
|
||
debounce(func, wait) {
|
||
// 非立即执行
|
||
let timeout;
|
||
return function() {
|
||
let context = this;
|
||
let args = arguments;
|
||
if (timeout) clearTimeout(timeout);
|
||
timeout = setTimeout(() => {
|
||
func.apply(context, args);
|
||
}, wait);
|
||
};
|
||
},
|
||
//展示全部
|
||
displayAll(item) {
|
||
if (!item.isAll && item.summary && item.summary.length > 150) {
|
||
return item.summary.slice(0, 150) + "...";
|
||
}
|
||
return item.summary;
|
||
},
|
||
changeIsAll(item) {
|
||
item.isAll = !item.isAll;
|
||
},
|
||
closeSearch() {
|
||
this.showAll = !this.showAll;
|
||
var searchBoxHeght = document.getElementById("searchBox");
|
||
//console.log(this.initHeight,'this.initHeight');
|
||
if(this.initHeight>80){
|
||
this.searchwd = true;
|
||
}
|
||
//console.log(het,'het');
|
||
if(this.showAll){
|
||
//searchBoxHeght.style.height = "auto";
|
||
searchBoxHeght.style.maxHeight = this.initHeight + "px";
|
||
}else{
|
||
searchBoxHeght.style.maxHeight = 70 + "px";
|
||
}
|
||
},
|
||
getAnkingData() {
|
||
apiCase.usernameList(5).then(res => {
|
||
if (res.status == 200) {
|
||
this.ankingList = res.result;
|
||
}
|
||
});
|
||
},
|
||
getPopularity() {
|
||
apiCase.queryPraises(5).then(res => {
|
||
if (res.status == 200) {
|
||
this.Popularity = res.result;
|
||
// console.log(this.Popularity)
|
||
}
|
||
});
|
||
},
|
||
getPositive() {
|
||
apiCase.queryComments(5).then(res => {
|
||
if (res.status == 200) {
|
||
this.Positive = res.result;
|
||
console.log(res);
|
||
}
|
||
});
|
||
},
|
||
|
||
getdomain() {
|
||
let key = "org_domain";
|
||
apiDict.items(key).then(res => {
|
||
if (res.status == 200) {
|
||
res.result.forEach(item =>{
|
||
item.fielclass = false;
|
||
item.type=key;
|
||
})
|
||
this.domain = res.result;
|
||
if(res.result.length > 0) {
|
||
this.orgDomainLevel(res.result)
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//删除，不再使用
|
||
getProfess() {
|
||
let key = "major_type";
|
||
apiDict.items(key).then(res => {
|
||
if (res.status == 200) {
|
||
this.Profess = res.result;
|
||
}
|
||
});
|
||
},
|
||
orgDomainLevel(organization) {
|
||
this.orgData = [];
|
||
organization.forEach(item=>{
|
||
this.orgData.push(item);
|
||
if(item.list && item.list != "" && item.list.length > 0){
|
||
item.list.forEach(it =>{
|
||
this.orgData.push(it);
|
||
})
|
||
}
|
||
})
|
||
},
|
||
orgDomainTranslate(code){ // 组织领域翻译
|
||
if(code == '') {
|
||
return
|
||
}
|
||
let name = '';
|
||
let data = this.orgData.find(item => item.code == code);
|
||
if(data == undefined){
|
||
name = '';
|
||
} else {
|
||
name = data.name;
|
||
}
|
||
return name;
|
||
},
|
||
majorTypeTranslate(code){ // 专业分类翻译
|
||
let name = '';
|
||
let data = this.Profess.find(item => item.code == code);
|
||
if(data == undefined){
|
||
name = '';
|
||
} else {
|
||
name = data.name;
|
||
}
|
||
return name;
|
||
},
|
||
emitInput(val) {
|
||
this.keyWord = val;
|
||
this.isSeach = true;
|
||
this.queryCondition.pageIndex = 1;
|
||
this.search();
|
||
},
|
||
searchexcellent(){
|
||
this.queryCondition.excellent = !this.queryCondition.excellent;
|
||
this.getCaseData();
|
||
},
|
||
searchData(num) {
|
||
// if(num == 1){
|
||
// this.queryCondition.excellent = !this.queryCondition.excellent;
|
||
// this.getCaseData();
|
||
// }
|
||
this.queryCondition.pageIndex = 1;
|
||
this.queryCondition.orderField = num;
|
||
this.getCaseData();
|
||
},
|
||
handleScroll() {
|
||
let innerw = document.querySelector("#fixd-box");
|
||
let innerHeight = document.querySelector("#case-list-content")
|
||
.clientHeight;
|
||
let outerHeight = document.documentElement.clientHeight;
|
||
let outerWidth = innerw.clientWidth;
|
||
let scrollTop = document.documentElement.scrollTop;
|
||
if (outerHeight + scrollTop + 350 >= innerHeight) {
|
||
if (this.moreState == 1) {
|
||
this.debounce(this.loadMore(), 5000);
|
||
}
|
||
}
|
||
if (scrollTop > 630) {
|
||
document.querySelector("#fixd-box").style.cssText =
|
||
"position: fixed;top: -400px;width:"+outerWidth+"px";
|
||
} else {
|
||
document.querySelector("#fixd-box").style.cssText = "position: static";
|
||
}
|
||
},
|
||
useHotword(item) {
|
||
this.keyWord = item.keyword;
|
||
this.search();
|
||
},
|
||
searchterm() {
|
||
apiSearchterm.list(5, 3).then(res => {
|
||
if (res.status === 200) {
|
||
this.searchRecords = res.result;
|
||
}
|
||
});
|
||
},
|
||
loadMore() {
|
||
this.queryCondition.pageIndex += 1;
|
||
this.getCaseData();
|
||
},
|
||
protocolCheck(obj) {
|
||
this.protocolConfirmButton = !obj;
|
||
},
|
||
protocolConfirm() {
|
||
this.protocolDialogVisible = false;
|
||
this.$store.dispatch("portal/SetReadProtocol", true);
|
||
},
|
||
handleSizeChange(item) {
|
||
this.queryCondition.pageSize = item;
|
||
},
|
||
handleCurrentChange(item) {
|
||
this.queryCondition.pageIndex = item;
|
||
},
|
||
search() {
|
||
apiSearchterm.save({ keyword: this.keyWord, type: 3 });
|
||
if (!this.isFind) {
|
||
this.isFind = true;
|
||
}
|
||
this.queryCondition.pageIndex = 1;
|
||
if (this.keyWord != this.queryCondition.keyWord) {
|
||
this.queryCondition.keyWord = this.keyWord;
|
||
}
|
||
if(this.queryCondition.orgDomain == 0){
|
||
this.queryCondition.orgDomain = null
|
||
}
|
||
if(this.queryCondition.majorType == 0){
|
||
this.queryCondition.majorType = null
|
||
}
|
||
|
||
|
||
this.getCaseData();
|
||
},
|
||
async getCaseData() {
|
||
// this.fieldData
|
||
this.getTags();
|
||
if (this.queryCondition.pageIndex == 1) {
|
||
this.caseList.list = [];
|
||
}
|
||
this.moreState = 2;
|
||
await apiCase
|
||
.queryList(this.queryCondition)
|
||
.then(res => {
|
||
if (res.status == 200) {
|
||
if (res.result.list.length > 0) {
|
||
this.isSeach = false;
|
||
res.result.list.forEach(item => {
|
||
item.majorType = item.majorType.split(",");
|
||
item.isAll = false;
|
||
item.authorInfo = {
|
||
aid: "",
|
||
name: "",
|
||
orgInfo: "",
|
||
avatar: "",
|
||
sex: null
|
||
};
|
||
});
|
||
this.caseList.list.push(...res.result.list);
|
||
this.caseList.count = res.result.count;
|
||
this.getCaseUserData(res.result.list);
|
||
this.moreState = 1;
|
||
if (res.result.count === res.result.list.length) {
|
||
this.moreState = 3;
|
||
}
|
||
} else {
|
||
this.moreState = 3;
|
||
}
|
||
} else {
|
||
this.$message.error(res.message);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log(err);
|
||
});
|
||
},
|
||
getTags() {
|
||
this.searchTags = [];
|
||
let caseData = deepClone(this.queryCondition);
|
||
for (let i in caseData) {
|
||
if (
|
||
caseData[i] !== "" &&
|
||
i !== "pageIndex" &&
|
||
i !== "pageSize" &&
|
||
i !== "orderField" &&
|
||
i !== "orderAsc" &&
|
||
i !== "isTop" &&
|
||
caseData[i] !== null &&
|
||
caseData[i] !== undefined
|
||
) {
|
||
if (caseData[i] == "0") {
|
||
return;
|
||
}
|
||
if(i == 'majorType'){
|
||
this.searchTags.push({ type:'majorType',value:this.majorTypeTranslate(caseData[i])})
|
||
}
|
||
if(i == 'orgDomain'){
|
||
this.searchTags.push({type:'orgDomain',value:this.orgDomainTranslate(caseData[i])})
|
||
}
|
||
if(i == 'keyWord'){
|
||
this.searchTags.push({type:'keyWord',value:caseData[i]})
|
||
}
|
||
}
|
||
}
|
||
},
|
||
tagsClose(tag, index) {
|
||
if(tag.type=='org_domain'){
|
||
console.log(tag)
|
||
this.domain.some((m,idx)=>{
|
||
if(m.code=tag.code){
|
||
m.fielclass=false;
|
||
return true;
|
||
}
|
||
return false;
|
||
})
|
||
}else if(tag.type=='major_type'){
|
||
this.speciData.some((m,idx)=>{
|
||
if(m.code=tag.code){
|
||
m.fielclass=false;
|
||
return true;
|
||
}
|
||
return false;
|
||
})
|
||
}else if(tag.type=='keyWord'){
|
||
this.queryCondition.keyWord = "";
|
||
this.keyWord = "";
|
||
}
|
||
this.fieldData.splice(index,1);
|
||
this.getCaseData();
|
||
|
||
|
||
},
|
||
getCaseUserData(caseList) {
|
||
let ids = caseList.map((item, index) => {
|
||
return item.authorId;
|
||
});
|
||
const noReapetIds = [...new Set(ids)];
|
||
apiUser.getByIds(noReapetIds).then(res => {
|
||
if (res.status == 200) {
|
||
caseList.forEach((item, index) => {
|
||
res.result.some(author => {
|
||
if (author.aid == item.authorId) {
|
||
item.authorInfo = author;
|
||
author.orgInfo=cutFullName(author.orgInfo,1);
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
});
|
||
} else {
|
||
this.$message.error(res.message);
|
||
}
|
||
});
|
||
},
|
||
getPopularity() {
|
||
apiCase.queryPraises(5).then(res => {
|
||
if (res.status == 200) {
|
||
this.Popularity = res.result;
|
||
if(res.result.length < 5){
|
||
for(let i=0;i=(5-res.result.length);i++){
|
||
this.Popularity.push({
|
||
authorName:'',
|
||
count:1,
|
||
id:'',
|
||
title:'',
|
||
})
|
||
}
|
||
}
|
||
|
||
}
|
||
});
|
||
},
|
||
getPositive() {
|
||
apiCase.queryComments(5).then(res => {
|
||
if (res.status == 200) {
|
||
this.Positive = res.result;
|
||
if(res.result.length < 5){
|
||
for(let i=0;i=(5-res.result.length);i++){
|
||
this.Positive.push({
|
||
authorName:'',
|
||
count:1,
|
||
id:'',
|
||
title:'',
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
jumpRouter(item) {
|
||
// console.log(item)
|
||
this.$router.push(`/case/detail?id=${item.id}`);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.field{
|
||
display: flex;
|
||
div{
|
||
padding: 0 15px;
|
||
font-size: 14px;
|
||
line-height: 25px;
|
||
color: #3d3d3d;
|
||
font-weight: 500;
|
||
}
|
||
.fieldactive{
|
||
color: #387DF7;
|
||
}
|
||
}
|
||
::v-deep .el-checkbox-button.is-checked .el-checkbox-button__inner{
|
||
box-shadow: none !important;
|
||
}
|
||
::v-deep .el-checkbox-button.is-checked .el-checkbox-button__inner{
|
||
color: #387df7 !important;
|
||
background-color: #fff !important;
|
||
}
|
||
::v-deep .el-checkbox-button--mini .el-checkbox-button__inner{
|
||
font-size: 14px;
|
||
}
|
||
::v-deep .el-checkbox-button .el-checkbox-button__inner{
|
||
border: none !important;
|
||
}
|
||
.notcoures{
|
||
text-align: center;
|
||
img{
|
||
width: 360px;
|
||
height: 226px;
|
||
}
|
||
h5{
|
||
font-size: 14px;
|
||
color: #333333;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
.orgaicon{
|
||
width: 22px;
|
||
height: 22px;
|
||
vertical-align: middle;
|
||
margin-right: 8px;
|
||
img{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.course-resources{
|
||
margin-top: 26px;
|
||
img{
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
.case-banner{
|
||
height: 240px;
|
||
background: url('../../../../public/images/case-banner.png');
|
||
}
|
||
|
||
::v-deep .el-checkbox{
|
||
.el-checkbox__input{
|
||
.el-checkbox__inner{
|
||
border: 1px solid #3e3c3c;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
::v-deep .el-radio-button{
|
||
margin-right:-5px;
|
||
}
|
||
::v-deep .el-button {
|
||
border-radius: 0px;
|
||
}
|
||
.case-titdiv {
|
||
line-height: 30px;
|
||
display: flex;
|
||
.case-tittext {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
width: 67%;
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
word-break: break-all;
|
||
text-overflow: ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
::v-deep .interact-bar .interact-bar-btns .interact-bar-btn {
|
||
margin-left: 0;
|
||
margin-right: 20px;
|
||
}
|
||
.clearfix:after{
|
||
content: "020";
|
||
display: block;
|
||
height: 0;
|
||
clear: both;
|
||
visibility: hidden;
|
||
}
|
||
.keyword-text {
|
||
|
||
div {
|
||
padding:0px 8px;
|
||
margin-top: 5px;
|
||
float: left;
|
||
line-height: 24px;
|
||
font-size: 12px;
|
||
border-radius:2px;
|
||
margin-right: 8px;
|
||
color: #2C68FF;
|
||
height: 24px;
|
||
background: rgba(44,104,255,0.06);
|
||
}
|
||
}
|
||
.searBox {
|
||
text-align: center;
|
||
margin: 0px auto 0 auto;
|
||
}
|
||
#searchBox {
|
||
overflow: hidden;
|
||
|
||
}
|
||
|
||
::v-deep .title-line-ellipsis {
|
||
// width: 100%;
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
box-sizing: border-box;
|
||
word-break: break-all;
|
||
}
|
||
::v-deep .el-card__body {
|
||
padding: 0;
|
||
}
|
||
::v-deep .bacolor:nth-child(odd) {
|
||
background-color: #f6f6f6;
|
||
padding: 0 5px;
|
||
}
|
||
::v-deep .bacolor:nth-child(even) {
|
||
background-color: #fff;
|
||
padding: 0 5px;
|
||
}
|
||
::v-deep .el-card {
|
||
border: none;
|
||
border-radius: 0px;
|
||
// border: 1px solid #ebeef5;
|
||
}
|
||
::v-deep .el-radio-button__inner,
|
||
.el-radio-group {
|
||
vertical-align: top;
|
||
}
|
||
::v-deep .el-radio-button__inner {
|
||
background: none;
|
||
}
|
||
::v-deep .el-radio-button:first-child .el-radio-button__inner {
|
||
border-left: none;
|
||
|
||
// border-radius: 4px 0 0 4px;
|
||
//box-shadow: none!important;
|
||
}
|
||
|
||
::v-deep.item-title {
|
||
margin: 15px 10px 10px 0;
|
||
font-size: 16px !important;
|
||
font-weight: 400;
|
||
color: #6B7C85;
|
||
line-height: 25px;
|
||
}
|
||
.item-line {
|
||
padding-left: 2px;
|
||
height: 20px;
|
||
// background: #ddd;
|
||
}
|
||
|
||
.portal-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
}
|
||
.searchbar {
|
||
background-color: #ffffff;
|
||
|
||
}
|
||
|
||
.fixed {
|
||
position: fixed;
|
||
top: 0px;
|
||
background-color: #f0f0f0;
|
||
z-index: 999;
|
||
height: 50px;
|
||
}
|
||
.protocol {
|
||
.protocol-title {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
margin-bottom: 25px;
|
||
}
|
||
.protocol-content {
|
||
font-size: 14px;
|
||
line-height: 25px;
|
||
}
|
||
}
|
||
.left-div {
|
||
border: none;
|
||
.quyer-tag {
|
||
// margin-left: 10px;
|
||
.order-class {
|
||
padding:0px 12px;
|
||
color: #6E7B84;
|
||
line-height: 32px;
|
||
border-radius: 0px;
|
||
.el-icon--right {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
.actice {
|
||
border: 0px;
|
||
background: #387DF7;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
/* 分页div */
|
||
.pagination-div {
|
||
text-align: center;
|
||
padding: 10px 0;
|
||
.pag-text {
|
||
}
|
||
}
|
||
.order-div {
|
||
padding: 34px 40px 20px 40px;
|
||
background-color: #fff;
|
||
// margin-bottom: ;
|
||
}
|
||
.data-content {
|
||
background-color: #fff;
|
||
padding: 5px 50px;
|
||
::v-deep .interact-bar-btns{
|
||
.interact-bar-btn{
|
||
text-align: right;
|
||
min-width: 78px !important;
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
.case-list:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.case-list {
|
||
border-bottom: 1px solid rgba(153, 153, 153,.2);
|
||
margin-top: 10px;
|
||
margin-bottom: 25px;
|
||
padding-left: 5px;
|
||
padding-right: 5px;
|
||
}
|
||
.case-image {
|
||
width: 230px;
|
||
height: 170px;
|
||
float: left;
|
||
border: 1px solid #eee;
|
||
}
|
||
|
||
.case-info {
|
||
.case-info-cont {
|
||
.case-info-title {
|
||
font-size: 15px;
|
||
color: #333;
|
||
font-weight: 600;
|
||
height: 30px;
|
||
.case-info-date {
|
||
flex: 1;
|
||
text-align: right;
|
||
font-weight: normal;
|
||
// font-size: 12px;
|
||
// height: 30px;
|
||
// font-weight: 200;
|
||
// color: #8590a6;
|
||
i {
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
.case-info-summary {
|
||
margin-top:16px;
|
||
cursor: pointer;
|
||
margin-bottom: 5px;
|
||
word-break: break-all;
|
||
line-height: 24px;
|
||
font-size: 14px;
|
||
color: #333330;
|
||
font-weight: 400;
|
||
}
|
||
.case-info-tools {
|
||
height: 30px;
|
||
.case-info-tools-auth {
|
||
float: left;
|
||
font-size: 13px;
|
||
color: #999999;
|
||
img {
|
||
margin-right: 10px;
|
||
width: 30px;
|
||
border: 1px solid #eee;
|
||
border-radius: 50%;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
.case-info-tools-btns {
|
||
float: right;
|
||
.case-info-tools-btn {
|
||
margin: 0 0 0 15px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.search-div {
|
||
background: #fff;
|
||
padding: 30px 40px;
|
||
.search-keyword {
|
||
line-height: 30px;
|
||
.tip {
|
||
font-size: 12px;
|
||
color: #999999;
|
||
// margin-bottom: 20px;
|
||
}
|
||
}
|
||
.search-item {
|
||
cursor: pointer;
|
||
// margin-bottom: 10px;
|
||
// padding: 10px 0;
|
||
}
|
||
// .search-item:not(:last-child) {
|
||
// // border-bottom: 1px solid #dfdfdf;
|
||
// }
|
||
}
|
||
.search-div-collapse {
|
||
display: block;
|
||
}
|
||
.search-div-expand {
|
||
display: none;
|
||
}
|
||
.search-div-more {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
</style>
|