jsm-mall-front/src/views/workOrder/workOrderPool/detailModule/CallLog/index.vue

<template>
  <zj-form-container>
    <zj-form-module title="通话记录">
      <zj-table
        ref="tableEl"
        :is-drop="true"
        :columns="callLogColumns"
        :table-data="callLogData"
        :table-attributes="{
          border: true
        }"
      />
    </zj-form-module>
  </zj-form-container>
</template>

<script>
import { unCallListOrder } from '@/api/cloudCall.js'
export default {
  props: {
    id: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      callLogData: []
    }
  },
  computed: {
    callLogColumns() {
      return [
        {
          columnAttributes: {
            label: '呼叫方式',
            prop: 'callDirection'
          }
        },
        {
          columnAttributes: {
            label: '通话类型',
            prop: 'callType'
          }
        },
        {
          columnAttributes: {
            label: '通话发起时间',
            prop: 'callStartTime',
            'min-width': 130
          }
        },
        {
          columnAttributes: {
            label: '客户手机号',
            prop: 'userMobile',
            'min-width': 130
          }
        },

        {
          columnAttributes: {
            label: '后台云呼信息',
            width: 170,
            prop: 'backTel'
          }
        },
        {
          columnAttributes: {
            label: '通话时长（秒）',
            prop: 'callHoldTime',
            width: 130
          }
        },
        {
          columnAttributes: {
            label: '振铃时长（秒）',
            prop: 'callWaitTime',
            width: 130
          },
          render: (_h, { row, column, $index }) => {
            const { callWaitTime } = row
            return <div style="margin:13px  0 0  0">{callWaitTime ? Number(callWaitTime) / 1000 : 0}</div>
          }
        },
        {
          columnAttributes: {
            label: '通话录音',
            prop: 'fileUrl',
            'min-width': 300
          },
          render: (_h, { row, column, $index }) => {
            const { fileUrl } = row
            return (
              <div style="margin:13px  0 0  0">
                <audio controls>
                  <source src={fileUrl} type="audio/ogg" contentEditable="true" />
                  <source src={fileUrl} type="audio/mpeg" contentEditable="true" />
                </audio>
              </div>
            )
          }
        }
      ]
    }
  },
  mounted() {
    this.getOrderQualityLis2()
  },
  methods: {
    getOrderQualityLis2() {
      let params = {
        pageNum: 1,
        pageSize: -1,
        params: [{ param: 'a.order_base_id', compare: 'like', value: this.id }]
      }
      unCallListOrder(params).then(res => {
        this.callLogData = res.data.records
      })
    }
  }
}
</script>

<style>
a {
  justify-content: space-between;
}
</style>