Conversation组件

安装依赖

npm install common-conversation-plus

开始使用

main.js文件中引入并注册
import Conversation from 'common-conversation-plus';
Vue.use(Conversation.Conversation);

参数说明

title: 组件显示的title
placeholder: 编辑器引导内容
width: 整个组件宽度
height: 整个组件高度
maxHeight: 消息内容高度
meBg: 角色为Me的消息背景色
staffBg: 角色为staff的消息背景色
clientBg: 角色为client的消息背景色
innerBg: 消息区域背景色
sendText: 发送消息按钮文本内容
uploadText: 上传附件按钮文本内容
autoFocus: 编辑器初始化时，是否默认自动 focus 到编辑区域
editorId: 文本域节点ID（一个页面中存在多个该组件时使用）
meText: 标识为Me的文本内容
innerUploadUrl: 图片上传url
showMenu: 是否显示菜单栏，默认不显示
token: 当前系统的token
downUrl：下载图片url
editorHeight：编辑器区域高度
justEditor: 只显示文本编辑器
attachmentsName: 消息显示attachments的文本内容
isClear: 是否清空已输入内容
buttonLoading: 发送按钮加载状态
contentLoading: 消息内容加载状态
lists: 消息列表
menuList: 消息操作相关列表
isTopFileList: 上传附件列表是否显示在上方
@menuClick: 消息操作相关点击事件
@send: 发送消息
@downloadFile: 下载附件
@change: 获取编辑器中的内容

使用方法

<template>
  <div style="padding:0 16px">
    <Conversation placeholder="Note: all messages sent here will be seen by the client" width="660px" height="829px" maxHeight="640px" title="Conversation" meBg="#FAFEF9" staffBg="#F2F6FC"
      uploadUrl="https://jsonplaceholder.typicode.com/posts/" token="1" sendText="Send Reply" attachmentsName="Attachments" uploadText="Attach File" meText="Me" :isClear="isClear" :buttonLoading="buttonLoading" :downUrl="downUrls" :contentLoading="contentLoading"
      :lists="lists" :innerUploadUrl="innerUploadUrls" :menuList="menuList" @menuClick="menuClick" @send="send" @downloadFile="downloadFile">
    </Conversation>
  </div>
</template>

<script>
import Conversation from '@/components/Conversation.vue';
import axios from 'axios';
import moment from 'moment';
let uploadUrl = 'http://192.168.124.20:8580/upload/multi';
let saleUrl = 'http://192.168.124.20:8580/client/sale-note';
let findUrl =
  'http://192.168.124.20:8580/client/sale-note/find-by-client-id?clientId=31701019427840';
let delUrl = 'http://192.168.124.20:8580/client/sale-note/';
let downUrl = 'http://192.168.124.20:8580/upload/download/';
let innerUploadUrl = 'http://192.168.124.20:8580/upload';
let token = '1';
export default {
  components: {
    Conversation,
  },
  data() {
    return {
      lists: [
        {
          attachments: [],
          content:
            'Hi John. Thank you for notifying us. We are investigating this issue now and will get back to you shortly.',
          created: '2020-11-11 10:10:10',
          createdBy: {
            avtar: '',
            id: '',
            label: '',
            name: 'Me',
          },
          id: '',
          isClient: false,
          isMe: true,
          isStaff: false,
        },
        {
          attachments: [
            {
              filename: 'sdfs.png',
            },
            {
              filename: 'sdfs1.png',
            },
            {
              filename: 'sdfs2.png',
            },
          ],
          content:
            'Hi John. Thank you for notifying us. We are investigating this issue now and will get back to you shortly.',
          created: '2020-11-11 10:10:10',
          createdBy: {
            avtar: '',
            id: '',
            label: '',
            name: 'John',
          },
          id: '',
          isClient: true,
          isMe: false,
          isStaff: false,
        },
        {
          attachments: [],
          content:
            'Hi John. Thank you for notifying us. We are investigating this issue now and will get back to you shortly.',
          created: '2020-11-11 10:10:10',
          createdBy: {
            avtar: '',
            id: '',
            label: '',
            name: 'Alexandra',
          },
          id: '',
          isClient: false,
          isMe: false,
          isStaff: true,
        },
      ],
      menuList: ['Delete'],
      buttonLoading: false,
      contentLoading: false,
      attachments: [],
      isClear: false,
      innerUploadUrls: innerUploadUrl,
      downUrls: downUrl
    };
  },
  created() {
    // this.lists = this.lists.reverse();
    this.values =
      'This customer called support because he had an issue with signing in. I helped him and it’s all good now.';
    this.getLists();
  },
  methods: {
    getLists() {
      this.contentLoading = true;
      axios({
        url: findUrl,
        method: 'get',
        headers: {
          "api-token": token,
        },
      }).then((res) => {
        this.contentLoading = false;
        if (res.data.code === 200) {
          res.data.content.forEach((item) => {
            item.created = moment(item.created).format('YYYY-HH-MM HH:MM:ss');
          });
          this.lists = res.data.content.reverse();
        }
      });
    },
    menuClick(menu, item) {
      axios({
        url: delUrl + item.id,
        method: 'delete',
        headers: {
          "api-token": token,
        },
      }).then((res) => {
        if (res.data.code === 200) {
          this.getLists();
        }
      });
    },
    async upload(fileLists) {
      let formData = new FormData();
      fileLists.forEach(function (file) {
        formData.append('file', file, file.name);
      });
      await axios({
        url: uploadUrl,
        method: 'post',
        data: formData,
        headers: {
          "api-token": token,
          "content-type": "multipart/formdata"
        },
      }).then((res) => {
        this.attachments = res.data.content;
      });
    },
    async send(content, fileLists) {
      if (!content) return;
      this.buttonLoading = true;
      if (fileLists.length) {
        await this.upload(fileLists);
      }
      let params = {
        attachmentViews: this.attachments,
        clientId: '31701019427840',
        notes: content,
      };
      this.isClear = true;
      await axios({
        url: saleUrl,
        method: 'post',
        data: params,
        headers: {
          "api-token": token,
        },
      })
        .then((res) => {
          this.buttonLoading = false;
          this.isClear = false;
          this.attachments = [];
          if (res.data.code === 200) {
            this.getLists();
          }
        })
        .catch(() => {
          this.buttonLoading = false;
          this.isClear = false;
          this.contentLoading = false;
          this.attachments = [];
        });
    },
    downloadFile(file) {
      axios({
        url: downUrl + file.id,
        responseType: 'blob',
        method: 'get',
      }).then((res) => {
        let data = res.data;
        const contentDisposition = res.headers['content-disposition'];
        let fileName = 'file';
        if (contentDisposition) {
          const matches = /filename="(.*?)"/g.exec(contentDisposition);
          fileName = matches && matches.length > 1 ? matches[1] : null;
        }
        if (!data) {
          this.$message.warning('Download failed');
          return;
        } else {
          this.$message.success('Download Successfully');
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data]), fileName);
        } else {
          let url = window.URL.createObjectURL(new Blob([data]));
          let link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.setAttribute('download', fileName);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          window.URL.revokeObjectURL(url);
        }
      });
    },
  },
};
</script>