learning-system-portal/src/components/Article/ucItems.vue

<template>
  <div>
    <Remark :fixed="false">
      <ul>
        <li>class名为problem的dom(即时间)无法直接垂直居中</li>
        <li>状态有草稿、待审核、未通过、已通过、已发布</li>
        <li>状态为已发布时才显示点赞收藏图标</li>
        <li>点击编辑时没有跳转到新页面</li>
      </ul>
    </Remark>
    <div class="article-list" v-for="(item, idx) in items" :key="idx" @click="jumpDetail(item)">
      <div class="article-info">
        <div class="article-info-title one-line-ellipsis"  
        >
          <span v-if="item.enabled" :class="classFilter(item.status).className">{{classFilter(item.status).text}}</span>
          <span v-else class="article-status8">【已下架】</span>
          <span  class="titleContent "  >
            {{ item.title }}
          </span>

        </div>
        <div class="article-info-summary two-line-ellipsis">{{item.summary}}</div>
        <div class="article-info-tools">
          <div class="article-info-tools-auth">
            <!-- <el-avatar size="small" :src="item.avatar ? fileBaseUrl + item.avatar : '/temp/index/male.jpg'"></el-avatar>
            <span>{{item.name}}{{(item.orgInfo)}}</span> -->
            <!-- <el-tag v-if="status === 0" type="success">已发布</el-tag>
            <el-tag type="warning" v-else>未发布</el-tag> -->
            <span class="article-time">
              <span> 时间：{{item.sysCreateTime|sysCreateTimeFilter}}</span>
            </span>
            <span v-if="!item.enabled">已下架</span>
          </div>
          <div class="article-info-tools-btns" v-if="item.status == 9">
            <!-- <interactBar :data="item" :type="2" :shares="false" :views="false"></interactBar> -->
            <!-- <el-link icon="el-icon-chat-line-round" class="article-info-tools-btn" >评论57</el-link>
            <el-link icon="el-icon-s-promotion" class="article-info-tools-btn" >分享57</el-link>
            <el-link icon="el-icon-star-on" class="article-info-tools-btn">收藏12</el-link>
            <el-link icon="el-icon-thumb" class="article-info-tools-btn" >点赞20</el-link > -->
          </div>
        </div>

      </div>
       <div class="article-info-date">
            <el-button class="edit" @click.stop="editItem(item.id)" type="text"  icon="el-icon-edit">编辑</el-button>
            <el-button class="del" @click.stop="delItem(item)" type="text" icon="el-icon-delete">删除</el-button>
      </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="editForm" @success="saveSuccess"></editItems>
    </el-dialog>
  </div>
</template>

<script>
import interactBar from '@/components/Portal/interactBar.vue';
import apiArticle from '@/api/modules/article.js';
import editItems from '@/components/Article/editItems.vue';
export default {
  components: {
    interactBar,editItems
  },
  name: 'articleItems',
  props: {
    items: {
      //name,
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      fileBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
      shareShow: false,
      diagSync:false,
      editForm:{
        id:''
      }
    };
  },
  
  filters:{
    sysCreateTimeFilter(item){
      return item.split(' ')[0]
    }
  },
  mounted() {
    console.log(this.items)
  },
  methods: {
    classFilter(status){
      switch(status){
        case 1:{
          return {text:'【草稿】',className:'article-status1'}
        };
        // #999999
        case 2:{
          return {text:'【待审核】',className:'article-status2'}
          // #FFB30F
        };
        case 3:{
          return {text:'【未通过】',className:'article-status3'}
          // #E62E38
        };
        case 9:{
          return {text:'【已发布】',className:'article-status9'}

// #2AB28B
        };
         case 8:{
          return {text:'【已下架】',className:'article-status8'}

// #2AB28B
        };

      }
    },
    jumpDetail(row){
      if(row.status == 9){
         this.$router.push({path:'/article/detail',query:{id:row.id}})
      //  window.open(this.webBaseUrl + '/article/detail?id='+row.id)
      } else {
        this.editForm=row
        this.diagSync=true
         // window.open(this.webBaseUrl + '/article/add?id='+row.id)
      }
    },
    editItem(id) {
      // window.open('/article/add?id='+id)
      // this.$router.push({
      //   path:'/article/add',
      //   query:{
      //     id
      //   }
      // })
      this.editForm.id = id;
      this.diagSync = true;
    },
    saveSuccess(){
       this.$emit('update',true);
      this.diagSync = false;
    },
    delItem(item) {

      this.$confirm('您确定要删除所选文章吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })

        .then(() => {
          apiArticle
            .del(item.id)
            .then(res => {
              if (res.status == 200) {
                this.$emit('update',true)
                this.$message.success('删除成功');
                console.log('shanchushanchu')

              }else{
                this.$message.error('删除失败');
              }
            })
            .catch(err => {
              this.$message.error('删除失败');
            });
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.two-line-ellipsis {
  display: -webkit-box;
  white-space:pre-wrap;
  overflow: hidden;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  box-sizing: border-box;
}
.one-line-ellipsis {
  display: -webkit-box;
   white-space: pre-wrap;
  overflow: hidden;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  box-sizing: border-box;
}
 .article-info-date {
      position: absolute;
      top: 70%;
      right:0px;
      .del{
         color: #8590A6;
         font-size: 14px;
      }
      .edit{
         color: #8590A6;
      }
      button{
        color: #8590A6;
        font-size: 14px;
      }
    }
.one-line-ellipsis {
    width: 100%;
    // word-break: break-all;
    // white-space:pre-wrap;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 这里是超出几行省略 */
   overflow: hidden;

}
.two-line-ellipsis{
  display: -webkit-box;
  // white-space:pre-wrap;
  overflow: hidden;
  // text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  box-sizing: border-box;
}
.article-status1 {
  padding: 3px;
  // border: 1px dotted #ddd;
  color: #666;
}
.article-status8{
  padding: 3px;
  color: #ccc;

}
.article-status2 {
  padding: 3px;
  // border: 1px dotted #FFB30F;
  color: #FFB30F;
}
.article-status3 {
  padding: 3px;
  // border: 1px dotted #E62E38;
  color: #E62E38;
}
.article-status5 {
  padding: 3px;
  // border: 1px dotted #2AB28B;
  color: #2AB28B;
}
.article-status9 {
  padding: 3px;
  // border: 1px dotted #588AFC;
  color: #588AFC;
}
.article-list {
   position: relative;
  margin: 0px 0;
 border-bottom: 1px solid #E8E8E8;
  padding-top: 15px;
  padding-bottom: 15px;
  cursor: pointer;

}

.article-info {


  .article-info-title {
    margin-left: -12px;
    color: #333;
width: 100%;
    font-size: 18px;
    // font-weight: 400;
    
    // height: 40px;
    margin-top: 7px;
    // line-height: 40px;
    .titleContent{
      // padding-left: 5px;
      cursor: pointer;
    }

  }
  .article-info-summary {
    // height: 65px;
    margin-bottom: 20px;
    color: #666;
    margin-top: 10px;
    font-size: 16px;


  }
  .article-info-tools {
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .article-info-tools-auth {
      display: flex;
      align-items: center;

      font-size: 13px;
      color: #999999;
      span{
        font-size: 13px;
        color: #7b7b7b;
        margin-left:5px;
      }
      .article-time{
        margin-left: -5px;
		border:0px;
        span{
          font-size: 14px;
        }
      }
    }
  }
}
</style>