no message

src/views/workOrder/workOrderPool/detailModule/CallLog/index.vue

@@ -1,21 +1,24 @@
 <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>
+  <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: {
@@ -25,83 +28,8 @@ export default {
   },
   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>
-            )
-          }
-        }
-      ]
+      evaluationData: [],
+      evaluationColumns: []
     }
   },
   mounted() {
@@ -109,21 +37,60 @@ export default {
   },
   methods: {
     getOrderQualityLis2() {
-      let params = {
+      unCallListOrder({
         pageNum: 1,
         pageSize: -1,
         params: [{ param: 'a.order_base_id', compare: 'like', value: this.id }]
-      }
-      unCallListOrder(params).then(res => {
-        this.callLogData = res.data.records
+      }).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>
-a {
-  justify-content: space-between;
+<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>