拆分出 录音播放组件、聊天记录组件

build/webpack.base.conf.js

@@ -28,6 +28,7 @@ module.exports = {
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
       '@': resolve('src'),
+      '@api': resolve('src/service/api'),
       '@util': resolve('src/util'),
       '@service': resolve('src/service'),
       '@framework': resolve('src/components/framework'),

src/components/framework/PhoneRecord.vue

+<template>
+  <div>
+    <el-button
+      @click="dialogToggle"
+      size="mini" type="primary" plain>录音</el-button>
+    <el-dialog title="录音播放" append-to-body :visible.sync="dialog.show" width="500px">
+      <audio ref="recordAudio" style="display: block; width: 100%;" :src="src" controls preload="metadata"></audio>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "PhoneRecord",
+    props: {
+      src: {
+        type: String,
+        required: true
+      }
+    },
+    data() {
+      return {
+        dialog: {
+          show: false
+        }
+      }
+    },
+    watch: {
+      'dialog.show'(value) {
+        if (!value) {
+          this.$refs['recordAudio'].pause()
+        }
+      }
+    },
+    methods: {
+      dialogToggle() {
+        this.dialog.show = !this.dialog.show;
+
+      }
+    }
+  }
+</script>
+
+<style>
+
+</style>

src/components/team/hourDialog.vue

@@ -72,8 +72,15 @@
           </el-table-column>
           <el-table-column label="操作">
             <template slot-scope="scope">
-              <span class="cell-link" v-if="scope.row.chat_count > 0">聊天记录</span>
-              <span class="cell-link" v-if="scope.row.phone_source_file">录音</span>
+              <!--<el-button size="small" v-if="scope.row.chat_count > 0">聊天记录</el-button>-->
+              <chat-record
+                v-if="scope.row.chat_count > 0"
+                :friend-id="scope.row.friend_id" :start-at="dialogObj.start_at"
+                ></chat-record>
+              <phone-record
+                v-if="scope.row.phone_source_file"
+                :src="scope.row.phone_source_file"></phone-record>
+              <!--<span class="cell-link" v-if="scope.row.phone_source_file">录音</span>-->
             </template>
           </el-table-column>
         </el-table>
@@ -119,8 +126,14 @@
           </el-table-column>
           <el-table-column label="操作">
             <template slot-scope="scope">
-              <span v-if="dialog.search.type == '0'" class="cell-link">聊天记录</span>
-              <span v-if="dialog.search.type == '1'" class="cell-link">录音</span>
+              <chat-record
+                v-if="dialog.search.type == '0'"
+                :friend-id="scope.row.friend_id" :start-at="dialogObj.start_at"></chat-record>
+              <phone-record
+                v-if="dialog.search.type == '1' && scope.row.source_file"
+                :src="scope.row.source_file"></phone-record>
+              <!--<span v-if="dialog.search.type == '0'" class="cell-link">聊天记录</span>
+              <span v-if="dialog.search.type == '1'" class="cell-link">录音</span>-->
             </template>
           </el-table-column>
         </el-table>
@@ -135,11 +148,13 @@
 
 <script>
   import {getHourSingleApi, getHourTimeApi} from "@service/api";
+  import PhoneRecord from '@framework/PhoneRecord'
+  import ChatRecord from '@framework/ChatRecord'
   import page from '@framework/page'
 
   export default {
     name: "HourDialog",
-    components: {page},
+    components: {page, PhoneRecord, ChatRecord},
     props: {
       dialogObj: {
         type: Object,