mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-17 23:06:45 +08:00
2022年5月29日从svn移到git
This commit is contained in:
daihh
409
src/views/share/ToList.vue
Normal file
409
src/views/share/ToList.vue
Normal file
@@ -0,0 +1,409 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 分享给我的 -->
|
||||
<div style="position: relative;padding: 12px 22px 32px;">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4">
|
||||
<el-select v-model="isRead" clearable placeholder="状态" style="width:100%">
|
||||
<el-option label="全部" :value="null"></el-option>
|
||||
<el-option label="未查看" :value="false"></el-option>
|
||||
<el-option label="已查看" :value="true"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="4"><el-input placeholder="标题查询" clearable v-model="keyword" style="margin-right: 20px"></el-input></el-col>
|
||||
<el-col :span="16">
|
||||
<el-button type="primary" icon="el-icon-search" @click="queryData" style="margin-right: 10px;padding: 10px 15px;">搜索</el-button>
|
||||
<el-button type="primary" @click="resData" icon="el-icon-refresh-right" style="padding: 10px 15px;">重置</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-tabs v-model="tabName" @tab-click="changeTab" style="margin-top:14px">
|
||||
<!-- 全部 -->
|
||||
<!-- <el-tab-pane label="全部" name="all">
|
||||
<div v-for="(item, index) in dataList.list">
|
||||
<course-items v-if="item.objType==1" :items="[item]" @confirm="confirm"></course-items>
|
||||
<article-items v-if="item.objType==2" @confirm="confirm" :items="[item]"></article-items>
|
||||
<qa-items v-if="item.objType==4" :items="[item]" @confirm="confirm" :collect="true" :share="false" :remove="false" :edit="false"></qa-items>
|
||||
</div>
|
||||
v-if="courseList.count>courseList.pageSize"
|
||||
<div style="text-align: center;margin-top:57px">
|
||||
<el-pagination
|
||||
background
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="dataList.pageIndex"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:page-size="dataList.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="dataList.count"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</el-tab-pane> -->
|
||||
|
||||
|
||||
<el-tab-pane label="课程" name="course">
|
||||
<div style="min-height: 500px;">
|
||||
<course-items :keyword="keyword" type="toMy" @confirm="confirm" :items="courseList.list"></course-items>
|
||||
<!-- v-if="courseList.count>courseList.pageSize" -->
|
||||
<div v-if="caseList.list.length > 0" style="text-align: center; margin-top:57px">
|
||||
<el-pagination
|
||||
background
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="courseList.pageIndex"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:page-size="courseList.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="courseList.count"
|
||||
></el-pagination>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="caseList.list.length == 0">
|
||||
<div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
|
||||
<div v-else class="zan-wu">暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="文章" name="article">
|
||||
<div style="min-height: 500px;">
|
||||
<article-items :keyword="keyword" type="toMy" @confirm="confirm" :items="articleList.list"></article-items>
|
||||
<!-- v-if="articleList.count>articleList.pageSize" -->
|
||||
<div v-if="articleList.list.length > 0" style="text-align: center; margin-top:57px">
|
||||
<el-pagination
|
||||
background
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="articleList.pageIndex"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:page-size="articleList.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="articleList.count"
|
||||
></el-pagination>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="articleList.list.length == 0">
|
||||
<div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
|
||||
<div v-else class="zan-wu">暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="问答" name="qa">
|
||||
<div style="min-height: 500px;">
|
||||
<qa-items :keyword="keyword" type="toMy" @confirm="confirm" :items="qaList.list"></qa-items>
|
||||
<!-- v-if="qaList.count>qaList.pageSize" -->
|
||||
<div v-if="qaList.list.length > 0" style="text-align: center;margin-top:57px">
|
||||
<el-pagination
|
||||
background
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="qaList.pageIndex"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:page-size="qaList.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="qaList.count"
|
||||
></el-pagination>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="qaList.list.length == 0">
|
||||
<div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
|
||||
<div v-else class="zan-wu">暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import articleItems from '@/components/Article/shareItems.vue';
|
||||
import courseItems from '@/components/Course/shareItem.vue';
|
||||
import qaItems from '@/components/Qa/shareList.vue';
|
||||
import apiShares from '@/api/modules/shares.js';
|
||||
import apiUser from '@/api/system/user.js';
|
||||
export default {
|
||||
name: 'myShareIndex',
|
||||
components: { articleItems, courseItems, qaItems },
|
||||
data() {
|
||||
return {
|
||||
isSearh:false,
|
||||
isRead: '',
|
||||
tabName: 'course',
|
||||
keyword: '',
|
||||
courseIndex: null,
|
||||
qaIndex: null,
|
||||
articleIndex: null,
|
||||
qaList: {
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
count: 0,
|
||||
list: []
|
||||
},
|
||||
caseList: {
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
count: 0,
|
||||
list: []
|
||||
},
|
||||
articleList: {
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
count: 0,
|
||||
list: []
|
||||
},
|
||||
courseList: {
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
count: 0,
|
||||
list: []
|
||||
},
|
||||
dataList: {
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
keyword: '',
|
||||
count: 0,
|
||||
list: []
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
this.isSearh= true;
|
||||
if (this.tabName == 'qa') {
|
||||
this.findQa();
|
||||
}
|
||||
if (this.tabName == 'article') {
|
||||
this.findArticle();
|
||||
}
|
||||
if (this.tabName == 'course') {
|
||||
this.findCourse();
|
||||
}
|
||||
|
||||
},
|
||||
resData() {
|
||||
this.keyword = '';
|
||||
this.isRead = '';
|
||||
this.queryData();
|
||||
this.isSearh= false;
|
||||
},
|
||||
// changeIndex(value) {
|
||||
// if (this.tabName == 'qa') {
|
||||
// this.qaIndex = value;
|
||||
// this.findQa();
|
||||
// }
|
||||
// if (this.tabName == 'article') {
|
||||
// this.articleIndex = value;
|
||||
// this.findArticle();
|
||||
// }
|
||||
// if (this.tabName == 'course') {
|
||||
// this.courseIndex = value;
|
||||
// this.findCourse();
|
||||
// }
|
||||
// },
|
||||
changeTab(tab) {
|
||||
if (tab.name == 'qa') {
|
||||
this.findQa();
|
||||
}
|
||||
if (tab.name == 'article') {
|
||||
this.findArticle();
|
||||
}
|
||||
if (tab.name == 'course') {
|
||||
this.findCourse();
|
||||
}
|
||||
},
|
||||
//分页点击事件
|
||||
handleSizeChange(value) {
|
||||
if (this.tabName == 'qa') {
|
||||
this.qaList.pageSize = value;
|
||||
this.findQa();
|
||||
}
|
||||
if (this.tabName == 'article') {
|
||||
this.articleList.pageSize = value;
|
||||
this.findArticle();
|
||||
}
|
||||
if (this.tabName == 'course') {
|
||||
this.courseList.pageSize = value;
|
||||
this.findCourse();
|
||||
}
|
||||
|
||||
},
|
||||
//分页点击事件
|
||||
handleCurrentChange(value) {
|
||||
if (this.tabName == 'qa') {
|
||||
this.qaList.pageIndex = value;
|
||||
this.findQa();
|
||||
}
|
||||
if (this.tabName == 'article') {
|
||||
this.articleList.pageIndex = value;
|
||||
this.findArticle();
|
||||
}
|
||||
if (this.tabName == 'course') {
|
||||
this.courseList.pageIndex = value;
|
||||
this.findCourse();
|
||||
}
|
||||
|
||||
},
|
||||
//问答数据查询
|
||||
findQa() {
|
||||
let { pageIndex, pageSize } = this.qaList;
|
||||
let query = { pageIndex, pageSize, keyword: this.keyword, isRead: this.isRead };
|
||||
apiShares.mymeqalist(query).then(res => {
|
||||
if (res.status == 200) {
|
||||
this.qaList.count = res.result.count;
|
||||
this.qaList.list = res.result.list;
|
||||
if (this.qaList.list.length != 0) {
|
||||
this.getQaUserData(res.result.list);
|
||||
}
|
||||
} else {
|
||||
this.$message.error(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
getQaUserData(list) {
|
||||
let ids;
|
||||
ids = list.map((item, index) => {
|
||||
// item.authorInfo = { aid: '', name: '', orgInfo: '', avater: '' };
|
||||
return item.question.sysCreateAid;
|
||||
});
|
||||
let noRepeatIds = [...new Set(ids)];
|
||||
apiUser.getByIds(noRepeatIds).then(res => {
|
||||
if (res.status == 200) {
|
||||
this.qaList.list = list.map(item => {
|
||||
let obj = res.result.find(author => {
|
||||
return author.aid == item.question.sysCreateAid;
|
||||
});
|
||||
item = Object.assign(item, obj);
|
||||
return item;
|
||||
});
|
||||
} else {
|
||||
this.$message.error(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
findArticle() {
|
||||
let { pageIndex, pageSize } = this.articleList;
|
||||
let query = { pageIndex, pageSize, keyword: this.keyword, isRead: this.isRead };
|
||||
apiShares.mymearticlelist(query).then(res => {
|
||||
if (res.status == 200) {
|
||||
this.articleList.count = res.result.count;
|
||||
this.articleList.list = res.result.list;
|
||||
if (this.articleList.list.length != 0) {
|
||||
this.getArticleUserData(res.result.list);
|
||||
}
|
||||
} else {
|
||||
this.$message.error(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
getArticleUserData(list) {
|
||||
let ids;
|
||||
ids = list.map((item, index) => {
|
||||
return item.sysCreateAid;
|
||||
});
|
||||
const noRepeatIds = [...new Set(ids)];
|
||||
apiUser.getByIds(noRepeatIds).then(res => {
|
||||
if (res.status == 200) {
|
||||
this.articleList.list = list.map(item => {
|
||||
let obj = res.result.find(author => {
|
||||
return author.aid == item.sysCreateAid;
|
||||
});
|
||||
item = Object.assign(item, obj);
|
||||
return item;
|
||||
});
|
||||
} else {
|
||||
this.$message.error(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
findCourse() {
|
||||
let { pageIndex, pageSize } = this.courseList;
|
||||
let query = { pageIndex, pageSize, keyword: this.keyword, isRead: this.isRead };
|
||||
apiShares.mymecourselist(query).then(res => {
|
||||
if (res.status == 200) {
|
||||
this.courseList.count = res.result.count;
|
||||
this.courseList.list = res.result.list;
|
||||
} else {
|
||||
this.$message.error(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
confirm(item) {
|
||||
if (this.tabName == 'qa') {
|
||||
this.findQa();
|
||||
}
|
||||
if (this.tabName == 'article') {
|
||||
this.findArticle();
|
||||
}
|
||||
if (this.tabName == 'course') {
|
||||
this.findCourse();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.tabName == 'qa') {
|
||||
this.findQa();
|
||||
}
|
||||
if (this.tabName == 'article') {
|
||||
this.findArticle();
|
||||
}
|
||||
if (this.tabName == 'course') {
|
||||
this.findCourse();
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-col {
|
||||
padding: 0 0 0 10px !important;
|
||||
}
|
||||
.grid-content {
|
||||
padding-right: 0px;
|
||||
}
|
||||
::v-deep .el-tabs__item.is-active {
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
::v-deep .el-tabs__active-bar {
|
||||
background-color: #ffb30f;
|
||||
}
|
||||
.tag-space {
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.uc-badge {
|
||||
margin-top: 10px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
.uc-course {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
border: 1px solid #f0f0f0;
|
||||
padding: 10px;
|
||||
.uc-course-img {
|
||||
width: 200px;
|
||||
img {
|
||||
width: 200px;
|
||||
border: 1px solid #f4f4f5;
|
||||
}
|
||||
}
|
||||
.uc-course-info {
|
||||
flex: 1;
|
||||
line-height: 28px;
|
||||
padding: 0px 10px;
|
||||
.uc-course-name {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.uc-course-text {
|
||||
color: #747474;
|
||||
}
|
||||
}
|
||||
.uc-course-btns {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user