page_pc_stationSocial/src/components/action-list/index.vue

<template>
  <div class="action-container">
    <div class="action-list">
      <el-popover
        v-for="(item, index) in getOptions"
        :key="index"
        placement="top"
        trigger="hover"
        :content="item.content"
        popper-class="custom-popper"
        :close-delay="10"
      >
        <el-upload
          v-if="item.type == 'image'"
          action="#"
          accept=".jpg,.png,.svg,.jpeg,.gif,.bmp"
          :file-list="imageList"
          :http-request="uploadImage"
          :show-file-list="false"
          :multiple="true"
          :before-upload="beforeUploadImage"
          slot="reference"
        >
          <span class="action-img image"></span>
        </el-upload>
        <el-upload
          v-else-if="item.type == 'attach'"
          action="#"
          accept=".pdf,.word,.docx,.ppt,.pptx"
          :file-list="attachList"
          :http-request="uploadFiles"
          :show-file-list="false"
          :multiple="true"
          :before-upload="beforeUploadAttach"
          slot="reference"
        >
          <span class="action-img attach"></span>
        </el-upload>
        <span v-else-if="isRobot === 2" class="action-img" :class="item.type" slot="reference" @click="onClick(item.type)"></span>
      </el-popover>
    </div>
    <div v-if="isLink">
      <slot></slot>
      <div class="turn-btn" @click.stop="onTurn">转人工</div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { Popover, Upload } from 'element-ui'
import { fileUpload } from '@/api/modules/'
export default {
  name: 'action-container',
  components: {
    [Popover.name]: Popover,
    [Upload.name]: Upload
  },
  props: {
    /**
     * 支持的配置['keyboard', 'sound', 'image', 'attach', 'rate']
     * 键盘：keyboard
     * 语音：sound
     * 图片：image
     * 附件：attach
     * 评分：rate
     */
    options: {
      type: Array,
      default: () => {
        return ['image']
      }
    },
    /**
     * 右侧人工跳转
     */
    isLink: {
      type: Boolean,
      default: false
    },
    isRobot: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      list: this.options,
      imageList: [],
      attachList: []
    }
  },
  watch: {
    options (val) {
      this.list = val
    }
  },
  computed: {
    getOptions () {
      const list = this.list
      const arr = list.map(v => {
        const temp = {}
        switch (v) {
          case 'keyboard':
            temp.type = 'keyboard'
            temp.content = '键盘'
            break
          case 'sound':
            temp.type = 'sound'
            temp.content = '语音'
            break
          case 'image':
            temp.type = 'image'
            temp.content = '图片'
            break
          case 'attach':
            temp.type = 'attach'
            temp.content = '上传附件'
            break
          case 'rate':
            temp.type = 'rate'
            temp.content = '评价客服'
            break
        }
        return temp
      })
      return arr
    }
  },
  methods: {
    onClick (data) {
      this.$emit('action', data)
    },
    onTurn () {
      this.$emit('turn')
    },
    async uploadImage (file) {
      // this.$emit('upload-image', file.file)
      const params = new FormData()
      params.append('file', file.file)
      const { data } = await fileUpload(params)
      if (data) {
        this.imageList.push(data)
        this.$emit('upload-image', data)
      }
    },
    async uploadFiles (file) {
      const params = new FormData()
      params.append('file', file.file)
      const { data } = await fileUpload(params)
      if (data) {
        this.attachList.push(data)
        this.$emit('upload-attach', data)
      }
    },
    beforeUploadImage (file) {
      const size = file.size / 1024 / 1024
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      const whiteList = ['jpg', 'jpeg', 'png', 'svg', 'gif', 'bmp']
      if (size > 10) {
        this.$toast('上传失败，文件大小不能超过10M')
        return false
      }
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$toast('上传失败，只能选择图片格式')
        return false
      }
    },
    beforeUploadAttach (file) {
      const size = file.size / 1024 / 1024
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      const whiteList = ['doc', 'docx', 'pdf', 'ppt', 'pptx']
      if (size > 10) {
        this.$toast('上传失败，文件大小不能超过10M')
        return false
      }
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$toast('上传失败，只能选择PDF、WORD、PPT格式')
        return false
      }
    }
  }
}
</script>

<style lang="scss">
  .custom-popper{
    min-width: 0;
    padding: 8px 16px;
  }
</style>
<style lang="scss" scoped>
.action-container{
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: space-between;
  padding: 8px 0 16px;
  box-sizing: border-box;
  .action-list{
    display: flex;
    align-items: center;
  }
  &.white{
    background: #fff;
  }
  .action-img{
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
    &.keyboard{
      background-image: url('~@/assets/image/keyboard.png');
    }
    &.sound{
      background-image: url('~@/assets/image/sound.png');
    }
    &.image{
      background-image: url('~@/assets/image/image.png');
    }
    &.attach{
      background-image: url('~@/assets/image/attach.png');
    }
    &.rate{
      background-image: url('~@/assets/image/rate.png');
    }
  }
  .turn-btn{
    padding: 4px 16px 4px 36px;
    border: 1px solid $color_main;
    border-radius: 4px;
    color: $color_main;
    font-size: 12px;
    background: url('~@/assets/image/hand.png') no-repeat 16px center;
    background-size: 18px 18px;
    cursor: pointer;
  }
}
</style>