crm-mobile/pages_crm/components/customFlow/flowCommentPopup.vue

<template>
  <view class="popup">
    <view class="popup-header">
      <text class="wk wk-close icon" @click="handleClose" />
      <text class="text">
        全部{{ commentNum }}条评论
      </text>
    </view>
  
    <scroll-view scroll-y class="popup-container">
      <comment-list
        :show-icon="false"
        :reply-list="commandData"
        class="comment-list"
        @choose="handleChooseUser" />
    </scroll-view>
  
    <add-comment
      ref="comment"
      v-model="content"
      :replay="replayInfo"
      :immediate-focus="immediateFocus"
      @change-user="changeUser"
      @submit="submit" />
  </view>
</template>

<script>
  import {
    QueryCommentListAPI,
    SetCommentAPI
  } from '@/api/crm/flow.js'
	
  import AddComment from '@/components/base/add-comment.vue'
  import CommentList from '@/components/base/comment-list.vue'
	
  export default {
    name: 'CustomCommentPopup',
    components: {
      AddComment,
      CommentList
    },
    props: {
      dataId: {
        type: [String, Number],
        required: true
      },
      commentNum: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        commandData: [],
        content: '',
        replayInfo: null,
        immediateFocus: false
      }
    },
    mounted() {
      this.getCommentData()
    },
    methods: {
      getCommentData() {
        QueryCommentListAPI({
          id: this.dataId
        }).then(res => {
          this.commandData = res || []
        }).catch(() => {})
      },
			
      handleClose() {
        this.$emit('close')
      },
			
      handleChooseUser(user) {
        console.log('selected: ', user)
        if (this.replayInfo) {
          let str = `回复@${this.replayInfo.user.realname} `
          if (this.content.startsWith(str)) {
            this.content = this.content.replace(str, `回复@${user.user.realname} `)
          } else {
            this.content = `回复@${user.user.realname} ` + this.content
          }
        } else {
          this.content = `回复@${user.user.realname} ` + this.content
        }
        this.replayInfo = user
        this.$refs.comment.focus()
      },
			
      changeUser(data) {
        this.replayInfo = data
      },
			
      submit() {
        let params = {
          dataId: this.dataId,
          content: this.content
        }
        if (this.replayInfo) {
          params.replyId = this.replayInfo.createUserId; // 被回复人的id
          params.mainId = this.replayInfo.mainId || this.replayInfo.commentId; // 回复主id
				
          let str = `回复@${this.replayInfo.user.realname} `
          if (params.content.startsWith(str)) {
            params.content = params.content.replace(str, '')
          }
        }
        if (this.$isEmpty(params.content)) {
          this.$toast('回复内容不能为空')
          return
        }
        // console.log('save: ', params)
        SetCommentAPI(params).then(() => {
          this.$toast('回复成功')
          this.content = ''
          this.replayInfo = null
          this.showEmoji = false
          this.$emit('update')
          this.handleClose()
        }).catch(() => {})
      }
    }
  }
</script>

<style scoped lang="scss">
.popup {
  padding-top: 20rpx;
  padding-bottom: 112rpx;

  .popup-header {
    position: relative;
    padding: 0 36rpx;
    margin-bottom: 36rpx;
    @include center;
    .text {
      font-size: $wk-font-large;
    }
    .icon {
      position: absolute;
      left: 20rpx;
      top: 50%;
      transform: translateY(-50%);
      color: $gray;
      font-size: $wk-font-medium;
      padding: 20rpx;

      &.wk-arrow-right {
        transform: rotate(180deg) translateY(50%);
        transform-origin: center center;
      }
    }
  }

  .popup-container {
    min-height: 45vh;
    max-height: 65vh;
    padding: 0 36rpx 15rpx;
    overflow: auto;
    box-sizing: border-box;

    .comment-list {
      overflow: initial;
    }
  }
}
</style>