learning-system-portal/src/views/article/MyList.vue

<template>
  <div>
    <!--
    <Remark>
      1.我的文章列表。关于文章的图片，发表文章时必须要有图片吗？发表文章时有图片会让人还要找图片对应<br/>
      2.这里是管理我自己发表的文章，从查询的角度是否增加更多的查询项，比如分类？<br/>
    </Remark>
    -->
    <div style="display: flex;justify-content: space-between;height: 40px; padding-right:20px">
      <!-- <div style="padding-top: 5px;">
        <el-tag type="primary" style="margin-right: 20px;">最新</el-tag>
        <el-tag type="info">最热</el-tag>
      </div> -->
      <div style="position: relative;">
        <div style="display: flex;justify-content:space-around;padding: 12px 22px 10px 17px;">
          <!-- <div style="padding: 0px 5px;"><el-cascader clearable v-model="params.type" :options="typeList"></el-cascader></div> -->
          <div style="padding: 0px 5px;">
            <span style="font-size: 18px;color: #333333;font-weight: 600;margin-right:30px" >我的文章</span>
            <el-select v-model="pageData.status" placeholder="状态" style="width: 110px;" clearable>
              <el-option v-for="item in selectData" :label="item.label" :value="item.value" :key="item.value"></el-option>
              <!-- <el-option label="草稿" :value='0'></el-option>
              <el-option label="待审核" :value='1'></el-option>
              <el-option label="未通过" :value='2'></el-option>
              <el-option label="通过"  :value='3'></el-option> -->
            </el-select>
          </div>
          <div style="padding: 0px 5px;"><el-input clearable placeholder="搜索名称" v-model="pageData.keyword"></el-input></div>
          <div style="padding: 0px 5px;"><el-button icon="el-icon-search" type="primary"  @click="search">搜索</el-button></div>
           <div style="padding: 0px 5px;"><el-button icon="el-icon-refresh-right" type="primary"  @click="reset">重置</el-button></div>
        </div>
      </div>
      <!-- <div style="padding:12px 20px; " class="write">
		<el-button type="primary" @click="diagSync=true" icon="el-icon-plus" >写文章</el-button>
      </div> -->
    </div>
    <div style="padding: 10px 19px 0px 22px;">
      <article-items @update="getArticleList" :items="pageData.list" v-if="pageData.list.length!=0"></article-items>
      <div v-if="pageData.list.length > 0 " style="text-align: center; margin-top:57px"><el-pagination
        @size-change="handleSizeChange"
        background
        @current-change="handleCurrentChange"
        :current-page="pageData.pageIndex"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination></div>
        <div v-else>
          <div v-if="pageData.list.length == 0"  class="home-no-list">
            <img class="img" style="width:360px;height:226px" :src="`${webBaseUrl}/images/homeWu/no-madel.png`" alt="" srcset=""/>
            <div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
            <div v-else class="zan-wu">你还没有发布文章～</div>
          </div>
        </div> 

    </div>
	<el-dialog title="创建文章" :visible.sync="diagSync" :close-on-click-modal="false" width="900px" custom-class="g-dialog">
	  <editItems v-if="diagSync" :jumpLimit="false" :editForm="{}" @success="saveSuccess"></editItems>
	</el-dialog>
    <div style="height: 100px;"></div>
  </div>    
</template>

<script>
import articleItems from '@/components/Article/ucItems.vue';
import apiArticle from '@/api/modules/article.js';
import apiUser from '@/api/system/user.js';
import editItems from '@/components/Article/editItems.vue';
import { mapGetters } from 'vuex';
export default {
  name: 'articleMyList',
  components: { articleItems,editItems },
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      isSearh:false,
      pageData: {
        pageIndex: 1,
        pageSize: 10,
        list: []
      },
      total: 0,
	  diagSync:false,
      selectData: [{ label: '草稿', value: 1 }, { label: '待审核', value: 2 }, { label: '未通过', value: 3 }, { label: '已发布', value: 9 },{ label: '已下架', value: 8 },{ label: '全部', value: null },]
    };
  },
  created() {
    this.getArticleList();
  },
  methods: {
     search(){
      this.isSearh = true;
      this.pageData.pageIndex = 1;
      this.getArticleList()
    },
    saveSuccess(data){
      this.diagSync=false;
      this.pageData.pageIndex = 1;
      this.pageData.list = [];
      this.getArticleList();
    },
    //获取文章列表数据
    getArticleList() {
      const { pageIndex, pageSize } = this.pageData;
      let query = { pageIndex, pageSize };
      if (this.pageData.status) {
        const { status } = this.pageData;
        query.status = status;
      }
      if (this.pageData.keyword) {
        const { keyword } = this.pageData;
        query.keyword = keyword;
      } //拼接查询条件
      query.sysCreateAid = this.userInfo.aid;
      apiArticle.myPageList(query).then(res => {
          if (res.status == 200) {
            this.total = res.result.count;
            this.pageData.list = res.result.list;
            if(this.pageData.list.length!=0){
              this.getQaUserData(this.pageData.list)
            }
          }
        })
        .catch(err => {
          this.$message.error('获取数据失败');
        });
    },

    reset(){
       this.pageData.pageIndex = 1;
       this.pageData.keyword = '',
       this.pageData.status = ''
       this.getArticleList();
       this.isSearh = false;
    },
    getQaUserData(list){
      let ids=list.map((item,index)=>{
        return item.sysCreateAid
      })
      apiUser.getByIds(ids).then(res=>{
        if(res.status==200){
          this.pageData.list=list.map((item,index)=>{
            item=Object.assign(item,res.result[index])
            return item
          })
        }
      }).catch(err=>{
        this.$message({
          message:'数据请求失败',
          type:'error'
        })
      })
    },
    //改变页数的回调
    handleSizeChange(value) {
      this.pageData.pageSize = value;
      this.getArticleList();
    },
    //改变条数的回调
    handleCurrentChange(value) {
      this.pageData.pageIndex = value;
      this.getArticleList();
    }
  }
};
</script>

<style scoped lang="scss">
.write{
  position: absolute;
 
  right:0px;
}
.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 0px;
    .uc-course-name {
      font-size: 18px;
      font-weight: 700;
    }
    .uc-course-text {
      color: #747474;
    }
  }
  .uc-course-btns {
    width: 150px;
  }
}
</style>