learning-system-portal/src/views/share/ToList.vue

<template>
  <div>
    <!-- 分享给我的 -->
    <div style="position: relative;padding: 12px 22px 32px;">
      <span class="title">分享给我的</span>
      <!-- <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 type="toMy" v-if="item.type==1" :items="[item]" @confirm="confirm"></course-items>
            <case-items type="toMy" v-if="item.type==3" :items="[item]" @confirm="confirm" ></case-items>
            <article-items type="toMy" v-if="item.type==2" @confirm="confirm" :items="[item]"></article-items>
            <qa-items type="toMy" v-if="item.type==4" :items="[item]" @confirm="confirm" :collect="true" :share="false" :remove="false" :edit="false"></qa-items>
          </div>
         
          <div style="text-align: center;margin-top:57px" v-if="dataList.list.length > 0">
            <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>
             <div v-else>
                <div v-if="dataList.list.length == 0">
                  <div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
                  <div v-else class="zan-wu">暂无数据</div>
                </div>
              </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>
            <div v-if="courseList.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="courseList.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="case">
          <div style="min-height: 500px;">
            <case-items :keyword="keyword" type="toMy" @confirm="confirm" :items="caseList.list"></case-items>
            <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="caseList.pageIndex"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="caseList.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="caseList.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>
            <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>
            <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 caseItems from '@/components/Case/caseItems.vue'
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,caseItems },
  data() {
    return {
      isSearh:false,
      isRead: '',
      tabName: 'all',
      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.qaList.pageIndex = 1;
      this.articleList.pageIndex = 1;
      this.courseList.pageIndex = 1;
      this.dataList.pageIndex = 1;
      this.isSearh= true;
      if (this.tabName == 'qa') {
        this.findQa();
      }
      if (this.tabName == 'article') {
        this.findArticle();
      }
      if (this.tabName == 'course') {
        this.findCourse();
      }
      if (this.tabName == 'case') {
        this.findCase();
      }
      if (this.tabName == 'all') {
        this.findAll();
      }

    },
    resData() {
      this.keyword = '';
      this.isRead = '';
      this.qaList.pageIndex = 1;
      this.articleList.pageIndex = 1;
      this.courseList.pageIndex = 1;
      this.dataList.pageIndex = 1;
      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();
      }
      if (tab.name == 'case') {
        this.findCase();
      }
      if (tab.name == 'all') {
        this.findAll();
      }
    },
    //分页点击事件
    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();
      }
      if (this.tabName == 'case') {
        this.caseList.pageSize = value;
        this.findCase()
      }
      if (this.tabName == 'all') {
        this.dataList.pageSize = value;
        this.findAll()
      }
    },
    //分页点击事件
    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();
      }
      if (this.tabName == 'case') {
        this.caseList.pageIndex = value;
        this.findCase();
      }
      if (this.tabName == 'all') {
        this.dataList.pageIndex = value;
        this.findAll();
      }

    },
    findAll(){
      let { pageIndex, pageSize } = this.dataList;
      let query = { pageIndex, pageSize, keyword: this.keyword, isRead: this.isRead };
      apiShares.findShareMe(query).then(res=>{
        if(res.status == 200) {
          this.dataList.count = res.result.count;

          res.result.list.forEach(item => {
            if(item.type == 4) {
              item.question = {isResolve:false,title:'',content:'',bestAnswer:''};
              item.question.isResolve=item.isResolve;
              item.question.title=item.title;
              item.question.content=item.content;
              item.question.bestAnswer=item.bestAnswer;
              item.question.id=item.id;
            }
            if(item.type == 3){
              item.cases = {title:'',summary:''};
              item.cases.title=item.title;
              item.cases.summary=item.content;
              item.cases.id=item.id;
            }
          });
          this.dataList.list = res.result.list;
        } else {
           this.$message.error(res.message);
        }
      })
    },
    // 案例
    findCase(){
      let { pageIndex, pageSize } = this.caseList;
      let query = { pageIndex, pageSize, keyword: this.keyword, isRead: this.isRead };
      apiShares.myMeCaseList(query).then(res=>{
        if(res.status == 200) {
          this.caseList.count = res.result.count;
          this.caseList.list = res.result.list;
        } else {
           this.$message.error(res.message);
        }
      })
    },
    //问答数据查询
    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();
      }
      if (this.tabName == 'case') {
        this.findCase();
      }
      if (this.tabName == 'all') {
        this.findAll();
      }
    }
  },
  mounted() {
    if (this.tabName == 'qa') {
      this.findQa();
    }
    if (this.tabName == 'article') {
      this.findArticle();
    }
    if (this.tabName == 'course') {
      this.findCourse();
    }
    if (this.tabName == 'case') {
      this.findCase();
    }
    if (this.tabName == 'all') {
      this.findAll();
    }

  }
};
</script>

<style scoped lang="scss">
.title{
  font-size: 18px;
  color: #333333;
  font-weight: 600;
}
.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>