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

<template>
  <zj-page-container>
    <zj-page-fill class="neibuview">
      <zj-form-container>
        <zj-form-module title="通话记录">
          <zj-table
            :columns="evaluationColumns"
            :table-data="evaluationData"
            :table-attributes="{
              border: true
            }"
          />
        </zj-form-module>
      </zj-form-container>
    </zj-page-fill>
  </zj-page-container>
</template>

<script>
import { unCallListOrder } from '@/api/cloudCall.js'
import { tableDataParsing } from '@/utils/common.js'
export default {
  props: {
    id: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      evaluationData: [],
      evaluationColumns: []
    }
  },
  mounted() {
    this.getOrderQualityLis2()
  },
  methods: {
    getOrderQualityLis2() {
      unCallListOrder({
        pageNum: 1,
        pageSize: -1,
        params: [{ param: 'a.order_base_id', compare: 'like', value: this.id }]
      }).then(res => {
        this.evaluationColumns = tableDataParsing(
          res.fieldBeans.filter(item => !~['orderFlags', 'orderType'].indexOf(item.jname))
        ).map(item => {
          if (item.columnAttributes.prop == 'fileUrl') {
            item.columnAttributes['min-width'] = 360
            item.render = (h, { row, index, column }) => {
              return (
                <div style="padding:0 6px;cursor: pointer;">
                  {row.fileUrl ? (
                    <div style="margin:13px  0 0  0">
                      <audio controls>
                        <source src={row.fileUrl} type="audio/ogg" contentEditable="true" />
                        <source src={row.fileUrl} type="audio/mpeg" contentEditable="true" />
                      </audio>
                    </div>
                  ) : null}
                </div>
              )
            }
          }
          return item
        })
        this.$nextTick(() => {
          this.evaluationData = res.data.records.map(item => {
            Object.keys(item).map(key => {
              var val = JSON.parse(res?.fieldBeans?.find(val => val.jname == key)?.enumMap || '{}')[item[key]]
              if (val) item[key] = val
            })
            return item
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.neibuview {
  box-sizing: border-box;
  padding-left: 16px;

  ::v-deep & > .zj-page-fill-scroll {
    box-sizing: border-box;
    padding-right: 16px;

    & > div:nth-child(1) {
      margin-top: 20px;
    }
  }
}
</style>