ylrz_his_scrm_companyUI/src/views/crm/components/customerVoiceLogsList.vue

<template>
    <div>
        <el-table border v-loading="loading" :data="list" >
            <el-table-column label="ID" align="center" prop="voiceId" />
            <el-table-column label="公司名" align="center" prop="companyName" />
            <el-table-column label="员工姓名" align="center" prop="userNickName" />
            <el-table-column label="录制地址" align="center"  show-overflow-tooltip prop="voiceUrl" width="350">
                <template slot-scope="scope">
                    <audio  v-if="scope.row.voiceUrl!=null"   controls :src="scope.row.voiceUrl"></audio>
                </template>
            </el-table-column>
            <el-table-column label="开始时间" align="center" prop="startTime" width="180">
                <template slot-scope="scope">
                <span>{{ parseTime(scope.row.startTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="结束时间" align="center" prop="finishTime" width="180">
                <template slot-scope="scope">
                <span>{{ parseTime(scope.row.finishTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="主叫" align="center" prop="callerPhone" />
            <el-table-column label="被叫" align="center" prop="calleePhone" />
            <el-table-column label="时长(秒)" align="center" prop="times" width="180">
                <template slot-scope="scope">
                <span v-if="scope.row.voiceUrl!=null">{{ scope.row.times}}秒 </span>
                </template>
            </el-table-column>
            <el-table-column label="计费时长(分)" align="center" prop="billingTime" width="180">
            </el-table-column>
            <el-table-column label="主叫显示号" align="center" prop="displayCallerNumber" />
            <el-table-column label="被叫显示号" align="center" prop="displayCalleeNumber" />
            <el-table-column label="状态" align="center" prop="status" >
                <template slot-scope="scope">
                    <el-tag prop="status" v-for="(item, index) in statusOptions"    v-if="scope.row.status==item.dictValue">{{item.dictLabel}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remark" />
        </el-table>
        <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
        />

    </div>
</template>
  
<script>
import { listCompanyVoiceLogs, getCompanyVoiceLogs, delCompanyVoiceLogs, addCompanyVoiceLogs, updateCompanyVoiceLogs, exportCompanyVoiceLogs } from "@/api/company/companyVoiceLogs";
export default {
        name: "customerVisit",
        data() {
            return {
                 
                statusOptions:[],
                // 遮罩层
                loading: true,
                // 总条数
                total: 0,
                list: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    customerId: null,
                },
            };
        },
        created() {
            this.getDicts("company_voice_logs_status").then((response) => {
                this.statusOptions = response.data;
            });
          
        },
        methods: {
            getData(customerId){
                this.queryParams.customerId=customerId;
                this.queryParams.pageNum=1;
                this.getList();
            },
            getList() {
                this.loading = true;
                listCompanyVoiceLogs(this.queryParams).then(response => {
                    this.list = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
        }
    };
</script>
<style lang="scss" scoped> 
</style>