KM-PC-Front-Milestone2/src/views/modules/knowledge/components/albumList.vue

<template>
  <div>
    <a-comment class="commentList">
      <div slot="actions" key="comment-nested-reply-to" >
        <div class="actionBox">
          {{item.createTime}}
          <div class="albumCallback" @click="showSubmitBox(item.pkId)">
            <img src="../../../../image/reply.png" class="btnsty"/>
            回复
          </div>
        </div>
        <div class="submitBoxAlbum" v-show="replyPkid==item.pkId">
          <a-input-search
            v-model="item.replyComment"
            class="commentAdd"
            placeholder="我也说一句"
            enter-button="提交"
            size="large"
            maxLength="100"
            @search="reply(-1)"
          />
        </div>
      </div>
      <a slot="author">{{item.createName}}</a>
      <a-avatar
        slot="avatar"
        :src="'/api/api-system/system/core/sysFile/previewFile?fileId='+item.createPhoto"
        :alt="item.createName"
      />
      <p slot="content" class="contentBox">
        {{ item.content }}
      </p>
      <div v-if="item.open==1">
        <a-comment v-if="index0<2||showAll" style="margin-top:0.6vw" v-for="(item0, index0) in item.replies" :key="index">
          <div slot="actions" key="comment-nested-reply-to">
            <div class="actionBox">
              {{item0.createTime}}
              <div class="albumCallback" @click="showSubmitBox(item0.pkId)">
                <img src="../../../../image/reply.png" class="btnsty"/>
                回复
              </div>
            </div>
            <div class="submitBoxAlbum" v-show="replyPkid==item0.pkId">
              <a-input-search
                v-model="item0.replyComment"
                class="commentAdd commentAddlevel2"
                placeholder="我也说一句"
                enter-button="提交"
                size="large"
                maxLength="100"
                @search="reply(index0)"
              >
              <div slot="prefix" style="font-size: 1.14583vw;">{{item0.replyLeft}}</div>
              </a-input-search>
            </div>
          </div>
          <a slot="author">{{item0.createName}}</a>
          <a-avatar
            slot="avatar"
            :src="'/api/api-system/system/core/sysFile/previewFile?fileId='+item0.createPhoto"
            :alt="item0.createName"
          />
          <p slot="content" class="contentBox">
            {{ item0.content }}
          </p>
        </a-comment>
        <div @click="showMoreData" class="getMore" v-if="item.replies.length>2&&showAll!=true">查看全部{{item.replies.length}}条回复&nbsp;&nbsp;></div>
      </div>
    </a-comment>
  </div>
</template>

<script>
import header0 from '../../../../image/header0.png'
import header1 from '../../../../image/header1.png'
import home from '@/api/knowledge/home'
import contentData from '@/api/knowledge/contentData'
import {mapState} from "vuex";
export default {
  props: {
    item: {
      type: Object,
      default: []
    }
  },
  computed: {
    ...mapState({
        user: (state) => state.appSetting.user,
    })
  },
  data() {
    return {
      showAll:false,
      delVisible:false,
      header0,
      header1,
      typeArr:['pdf','word','excel','ppt','其他'],
      replyPkid:''
    }
  },
  created() {
  },
  methods: {
    showMoreData(){
      this.showAll = true
    },
    showSubmitBox(pkId){
      if(this.replyPkid==pkId){
        this.replyPkid = ''
      }else{
        this.replyPkid = pkId
      }
    },
    lookDetail(data){
      if(this.type=='list0'||this.type=='list1'){
        if(this.approval) {
          this.$router.push({
            name: "knowledgeAuditInfo",
            query: {
                pkId: data.pkId
            }
          })
        } else {
          this.$router.push({
            name: "knowledgeContentInfo",
            query: {
                pkId: data.pkId
            }
          })
        }
      }else{
        let getData = {
          documentId:data.documentId,
          userId:this.user.userId,
          secretType:data.secretType
        }
        home.viewApi(getData).then((res) => {
          window.open(res.data)
        })
      }
    },
    download(data){
      window.open('/api/api-system/system/core/sysFile/previewFile?fileId='+data.attachment)
    },
    closeDel(){
      this.delVisible = false
    },
    confirmOk(){
      let param = {
        knowledgeId:this.item.pkId
      }
      this.delVisible = false
      contentData.deleteKnowledge(param).then((res) => {
        this.$message.success('删除成功')
        this.$emit('delRefresh')
      })
    },
    deleteData(){
      this.delVisible = true
    },
    jump(item){
      this.$router.push({
        path: '/knowledgePage/knowledgeAddUpdate',
        query: { pkId: item.pkId } 
      })
    },
    reply(num){
      let content = ''
      if(num==-1){
        content = this.item.replyComment
      }else{
        content = this.item.replies[num].replyLeft+this.item.replies[num].replyComment
      }
      let replyData={
        content:content,
        yelpId:this.replyPkid
      }
      this.$emit('replyYelp',replyData);
    }
  }
}
</script>

<style lang="less" scoped>
.commentList /deep/.ant-avatar-image{
  width: 1.6666vw;
  height: 1.6666vw;
}
.commentList /deep/.ant-avatar-image img{
  width: 100%;
  height: 100%;
}
.commentList /deep/.ant-comment-content-author-name a{
  font-size: 0.9375vw;
  color: #202124;
  height: 1.6666vw;
  line-height: 1.6666vw;
}
.commentList /deep/.ant-comment-content-detail p{
  font-size: 0.9375vw;
  color: #202124;
  white-space: inherit;
}

.commentList /deep/.ant-comment-inner{
  padding-top: 1.25vw;
  padding-bottom: 0vw;
}
.commentList /deep/.ant-comment-actions{
  margin: 0px;
}
.commentList /deep/.ant-comment-actions{
  margin: 0px;
}
.actionBox{
  margin-top: 5px;
  font-size: 0.9375vw;
  display: flex;
  width:100%;
  color: #5E5E5E;
}
.contentBox{
  white-space: inherit;
  padding: 0px;
}
.commentList /deep/.ant-comment-actions li{
  width:100%
}
.getMore{
  margin-top: 1.5625vw;
  width: 10.9375vw;
  height: 2.03125vw;
  line-height: 2.03125vw;
  background: rgba(64,108,196,0.1);
  color: #406CC4;
  text-align: center;
  font-size: 0.9375vw;
  margin-left: 2.2vw;
  cursor: pointer;
}
.submitBoxAlbum{
  width: 100%;
  display: inline-block;
  margin-top: 0.573vw;
}
.commentAdd /deep/input{
  height: 2.8125vw;
  font-size: 1.14583vw;
  border-radius: 0.41666vw;
}
.commentAddlevel2 /deep/.ant-input-lg{
  padding-left: 8vw;
}
.commentAdd /deep/.ant-input-search-button{
  font-size: 1.14583vw;
  background-color: #406cc4;
  border-color: #406cc4;
  height: 2.8125vw;
  width: 6.09375vw;
  border-radius: 0.41666vw!important;
}
.albumCallback{
  margin-left: auto;
  color: #406CC4;
  cursor: pointer;
}
.btnsty{
  height: 1vw;
}
</style>