hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-11 11:56:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

2022年5月29日从svn移到git

Browse Source
This commit is contained in:
daihh
2022-05-29 18:56:34 +08:00
commit b050613020
488 changed files with 68444 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

612
src/views/portal/case/Index.vue Normal file
View File

@@ -0,0 +1,612 @@
<template>
<div id="case-list-content">
<portal-header current="case" @emitInput="emitInput"></portal-header>
<div class="xcontent portal-content">
<div style="flex: 1;" class="xcol content-div">
<el-row>
<el-col :span="24">
<el-card :body-style="{ padding: '0px' }" class="left-div">
<el-row class="search-div">
<el-row>
<el-col :span="10" class="search-keyword">
<!-- <el-input placeholder="请输入关键词搜索" v-model="keyWord" clearable><el-button slot="append" icon="el-icon-search" @click="search"></el-button></el-input> -->
<!-- <div class="tip">热门搜索词：物联网 教师 辅导 绩效</div> -->
<!-- <div class="tip" style="font-size: 14px;">
热门搜索词：<span style="cursor:pointer;font-size:15px;margin-left: 10px;" v-for="(item,index) in searchRecords" :key="index" @click="useHotword(item)">{{item.keyword}}</span>
</div> -->
</el-col>
</el-row>
<div class="searchbar" v-if="searchTags.length > 0">
<div style="line-height: 30px;">
<span class="item-title">搜索条件</span>
<el-tag closable>显示事业</el-tag>
<el-tag closable>经营</el-tag>
<el-tag closable>业绩提升</el-tag>
<el-tag closable v-for="(tag, tagIdx) in searchTags" :key="tagIdx">{{ tag.words }}</el-tag>
</div>
</div>
<el-row class="search-item">
<el-col :span="24">
<!-- <div class="item-title">组织领域</div> -->
<div style="margin-top:10px; display: flex;">
<div style="line-height: 25px;">
<span class="item-title" style="padding-right: 5px;">组织领域</span>
<span class="item-line"></span>
</div>
<div>
<el-radio-group v-model="category" size="mini" @change="search()">
<el-radio-button label="0">全部</el-radio-button>
<el-radio-button label="1">显示事业</el-radio-button>
<el-radio-button label="2">传感器事业</el-radio-button>
<el-radio-button label="3">智慧医工事业</el-radio-button>
</el-radio-group>
</div>
</div>
</el-col>
</el-row>
<div class="search-div-collapse">
<el-row class="search-item">
<el-col :span="24">
<!-- <div class="item-title">专业领域</div> -->
<div style="margin-top:10px; display: flex;">
<div style="line-height: 25px;">
<span class="item-title" style="padding-right: 5px;">专业分类</span>
<span class="item-line"></span>
</div>
<div>
<el-radio-group v-model="type2" size="mini" @change="search()">
<el-radio-button label="0">全部</el-radio-button>
<el-radio-button label="1">经营</el-radio-button>
<el-radio-button label="2">领用</el-radio-button>
<el-radio-button label="3">研发</el-radio-button>
<el-radio-button label="4">营销</el-radio-button>
<el-radio-button label="5">生产技术</el-radio-button>
<el-radio-button label="6">信息技术</el-radio-button>
<el-radio-button label="7">质量</el-radio-button>
</el-radio-group>
</div>
</div>
</el-col>
</el-row>
<el-row class="search-item">
<el-col :span="24">
<!-- <div class="item-title">应用场景</div> -->
<div style="margin-top:10px; display: flex;">
<div style="line-height: 25px;">
<span class="item-title" style="padding-right: 5px;">专业领域</span>
<span class="item-line"></span>
</div>
<div>
<el-radio-group v-model="type3" size="mini" @click="search()">
<el-radio-button label="0">全部</el-radio-button>
<el-radio-button label="1">业绩提升</el-radio-button>
<el-radio-button label="2">人才培养</el-radio-button>
<el-radio-button label="3">知识管理</el-radio-button>
</el-radio-group>
</div>
</div>
</el-col>
</el-row>
</div>
<!-- <el-row class="search-div-more">
<el-col :span="24">
<el-button type="text" @click="queryExpand = true" v-if="!queryExpand">收起</el-button>
<el-button type="text" v-else @click="queryExpand = false">更多</el-button>
</el-col>
</el-row> -->
</el-row>
<el-row class="order-div">
<span class="quyer-tag">
<el-button type="text" class="order-class" @click="searchData('')" :class="{ actice: queryCondition.orderField == '' }">时间最近</el-button>
<el-button type="text" class="order-class" @click="searchData('praises')" :class="{ actice: queryCondition.orderField == 'praises' }">热度最高</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>
<!-- <span v-if="isFind" style="padding-left:10px;">本次搜索出 {{caseList.count}} 条结果</span> -->
<!-- <span class="more"></span> -->
</el-row>
<el-row class="data-content">
<el-col :span="24" v-for="item in caseList.list" :key="item.id" class="case-list">
<div class="case-info">
<div class="case-info">
<div class="case-info-title">
<router-link :to="'/case/detail?id='+item.id">
<!-- <span v-if="i % 2 == 0" style="color:red;margin-right:5px">[组织推荐]</span> -->
<span v-html="item.title"></span>
<div class="case-info-date">
<i class="el-icon-time"></i>
<time-show :time="item.sysCreateTime"></time-show>
</div>
</router-link>
</div>
<div class="case-info-summary" >
{{item.content}}
</div>
<div style="display: flex;justify-content: space-between;">
<div><author :avatar="item.authorInfo.avatar" :name="item.authorInfo.name" :info="item.authorInfo.orgInfo" :sex="item.authorInfo.sex"></author> </div>
<div><interactBar :type="0" :shares="false" :views="false" :data="item" :readonly="false"></interactBar> </div>
</div>
</div>
</div>
</el-col>
</el-row>
</el-card>
<div class="pagination-div">
<span class="pag-text" v-if="isMore" @click="loadMore()">加载更多</span>
<span class="pag-text" v-else>没有更多数据了</span>
</div>
</el-col>
</el-row>
</div>
<div style="width: 245px;margin-left: 5px;">
<div id="fixd-box">
<el-card class="ranking-card">
<div slot="header">
<span>排行榜</span>
</div>
<div>
<el-row class="ranking-title" v-for="(item,index) in ankingList" :key="index">
<el-col :span="6">
<img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
<img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
<img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
</el-col>
<el-col class="center" :span="18">{{item.sysCreateUname}}</el-col>
<!-- <el-col class="center" :span="7">{{''}}</el-col>
<el-col class="center" :span="7">{{item.counts}}</el-col> -->
</el-row>
</div>
</el-card>
</div>
</div>
<el-row :gutter="10">
</el-row>
<div style="height: 50px;"></div>
<el-dialog class="protocol" :visible.sync="protocolDialogVisible" width="30%" :show-close="false">
<div class="protocol-title">案例查阅及使用用户协议</div>
<div class="protocol-content">
&emsp;&emsp;本专区内案例为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";
export default {
name: 'index',
components: { portalHeader, portalFooter, portalFloatTools, interactBar,timeShow ,author},
computed: {
...mapGetters(['userInfo','portalCase']),
isMore() {
let isOk = true;
if(this.caseList.list.length === this.caseList.count) {
isOk = false;
}
return isOk;
}
},
data() {
return {
searchRecords:[],
caseList:{
count:0,
list:[]
},
ankingList:[],
protocolDialogVisible: false,
protocolConfirmButton:true,
queryCondition:{
pageIndex:1,
pageSize:10,
orderField:'',
breCommend:null,
keyWord:''
},
keyWord:'',
anking: 2,
queryExpand: true, // true更多，false收起
category: 0,
type2: 0,
type3: 0,
isFind: false,
searchTags: []
};
},
mounted() {
if(!this.portalCase.readProtocol){
this.protocolDialogVisible = true;
}
this.keyWord = this.$route.query.keyword;
this.getAnkingData()
this.searchterm()
this.getCaseData();
window.addEventListener(
"scroll",
this.handleScroll
);
},
watch:{
// queryCondition:{
// handler(newValue,oldValue){
// this.getCaseData()
// },
// deep:true,
// immediate:true
// }
},
beforeDestroy(){
window.removeEventListener("scroll",this.handleScroll);
},
methods: {
emitInput(val) {
this.keyWord=val;
this.search()
},
searchData(num) {
this.queryCondition.orderField = num;
this.getCaseData();
},
handleScroll() {
let innerHeight = document.querySelector('#case-list-content').clientHeight
let outerHeight = document.documentElement.clientHeight
let scrollTop = document.documentElement.scrollTop
// if ((outerHeight + scrollTop + 350) >= innerHeight) {
// if(this.moreState == 1 && this.course.pageIndex < 4) {
// this.loadMore();
// }
// }
if(scrollTop > 100) {
document.querySelector('#fixd-box').style.cssText = "position: fixed;top: 0;width:245px";
} 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
}
this.getCaseData();
},
async getCaseData(){
let isTopList = [];
let caseList = [];
await apiCase.queryList(this.queryCondition).then(res=>{
if(res.status==200){
if(res.result.list.length>0){
res.result.list.forEach(item=>{
item.authorInfo={aid:'',name:'',orgInfo:'',avatar:'',sex:null};
if(item.isTop) {
isTopList.push(item);
} else {
caseList.push(item)
}
})
if(this.queryCondition.pageIndex == 1) {
this.caseList.list =[];
}
this.caseList.list.push(...isTopList,...caseList);
this.caseList.count=res.result.count;
this.getCaseUserData(res.result.list)
}
}else{
this.$message.error(res.message);
}
}).catch(err=>{
console.log(err)
})
},
getCaseUserData(caseList){
let ids=caseList.map((item,index)=>{
return item.sysCreateAid
})
const noReapetIds=[...new Set(ids)]
apiUser.getByIds(ids).then(res=>{
if(res.status==200){
caseList.forEach((item,index)=>{
res.result.some(author=>{
if(author.aid==item.sysCreateAid){
item.authorInfo=author;
return true;
}else{
return false;
}
})
});
}else{
this.$message.error(res.message);
}
});
},
getAnkingData(){
apiCase.usernameList(10).then(res=>{
if(res.status==200){
this.ankingList=res.result
}
})
}
}
};
</script>
<style scoped lang="scss">
::v-deep .el-card{
border: none;
border-radius: 0px;
}
::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;
}
.item-title{
margin: 10px 10px 10px 0;
//font-size: 14px;
font-weight: 600;
color: #333333;
// line-height: 20px;
}
.item-line{
padding-left: 2px;
height: 20px;
background: #ddd;
}
.portal-content{
display: flex;
justify-content: space-between;
// .item-title{
// margin-bottom: 5px;
// line-height: 36px;
// font-size: 14px;
// font-weight: 600;
// color: #333333;
// }
}
.searchbar {
background-color: #ffffff;
// border: 1px solid #f3f3f3;
// width: 1200px;
// padding: 5px 20px;
// margin-bottom: 10px;
}
.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 {
.quyer-tag {
// margin-left: 10px;
.order-class {
color: #666666;
width: 80px;
// text-align: left;
border: 1px solid #dfdfdf;
// padding-left: 5px;
// padding-top: 5px;
// padding-bottom: 5px;
// padding: 8px 20px;
.el-icon--right {
margin-left: 0;
}
}
.actice {
background: #3e7fff;
color: #fff;
}
}
/* 分页div */
.pagination-div {
text-align: center;
padding: 10px 0;
}
.order-div {
padding: 12px 15px;
background-color: #fff;
// margin-bottom: ;
}
.data-content {
background-color: #fff;
padding: 5px 10px;
.case-list:last-child {
border-bottom: none;
}
.case-list {
margin: 5px 0;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
border-bottom: 1px solid #dfdfdf;
}
.case-image {
width: 230px;
height: 170px;
float: left;
border: 1px solid #eee;
}
.case-info {
.case-info {
.case-info-title {
font-size: 16px;
font-weight: 600;
height: 30px;
.case-info-date {
height: 30px;
float: right;
font-weight: 200;
color: #999999;
i {
margin-right: 5px;
}
}
}
.case-info-summary {
height: 45px;
line-height: 30px;
font-size: 15px;
color: #444444;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.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: 10px 25px;
.search-keyword {
line-height: 30px;
.tip {
font-size: 12px;
color: #999999;
// margin-bottom: 20px;
}
}
.search-item {
// 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;
}
}
.right-box {
line-height: 25px;
.ranking-card {
margin-bottom: 10px;
.el-col{
margin-bottom: 10px;
}
.center{
text-align: center;
}
}
.ranking-title {
}
.aligh-title{
font-size: 14px;
color: #333333;
}
.ranking-data {
margin: 10px 0;
color: #999999;
}
}
</style>