|
|
@@ -2,7 +2,7 @@
|
|
|
<div class="app-container">
|
|
|
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
<el-form-item label="公司名" prop="companyId">
|
|
|
- <el-select style="width: 220px" v-model="queryParams.companyId" placeholder="请选择公司名" clearable size="small">
|
|
|
+ <el-select filterable style="width: 220px" v-model="queryParams.companyId" placeholder="请选择公司名" @change="companyChange" clearable size="small">
|
|
|
<el-option
|
|
|
v-for="item in companys"
|
|
|
:key="item.companyId"
|
|
|
@@ -10,8 +10,10 @@
|
|
|
:value="item.companyId"
|
|
|
/>
|
|
|
</el-select>
|
|
|
-
|
|
|
</el-form-item>
|
|
|
+ <el-form-item >
|
|
|
+ <treeselect style="width: 220px" :clearable="false" v-model="queryParams.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
|
|
|
+ </el-form-item>
|
|
|
|
|
|
<el-form-item label="员工姓名" prop="userNickName">
|
|
|
<el-input
|
|
|
@@ -76,12 +78,12 @@
|
|
|
<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">
|
|
|
+ <el-table-column label="开始时间" align="center" prop="startTime" width="100">
|
|
|
<template slot-scope="scope">
|
|
|
<span>{{ parseTime(scope.row.startTime) }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="结束时间" align="center" prop="finishTime" width="180">
|
|
|
+ <el-table-column label="结束时间" align="center" prop="finishTime" width="100">
|
|
|
<template slot-scope="scope">
|
|
|
<span>{{ parseTime(scope.row.finishTime) }}</span>
|
|
|
</template>
|
|
|
@@ -95,14 +97,14 @@
|
|
|
</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="displayCallerNumber" width="110"/>
|
|
|
+ <el-table-column label="被叫显示号" align="center" prop="displayCalleeNumber" width="110"/>
|
|
|
<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-column label="备注" align="center" prop="remark" width="120" />
|
|
|
<el-table-column label="操作" fixed="right" align="center" prop="查看" >
|
|
|
<template slot-scope="scope">
|
|
|
<el-link v-if="scope.row.voiceUrl!=null" :href="scope.row.voiceUrl" target="_blank" >下载录音</el-link>
|
|
|
@@ -126,13 +128,22 @@
|
|
|
import { listCompanyVoiceLogs, getCompanyVoiceLogs, delCompanyVoiceLogs, addCompanyVoiceLogs, updateCompanyVoiceLogs, exportCompanyVoiceLogs } from "@/api/company/companyVoiceLogs";
|
|
|
import { getCompanyList } from "@/api/company/company";
|
|
|
|
|
|
+import { treeselect } from "@/api/company/companyDept";
|
|
|
+import Treeselect from "@riophae/vue-treeselect";
|
|
|
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
|
|
|
export default {
|
|
|
name: "CompanyVoiceLogs",
|
|
|
+ components: { Treeselect },
|
|
|
+ watch: {
|
|
|
+ // 监听deptId
|
|
|
+ 'deptId': 'currDeptChange'
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
statusOptions:[],
|
|
|
companys:[],
|
|
|
+ deptOptions:[],
|
|
|
// 遮罩层
|
|
|
loading: true,
|
|
|
// 选中数组
|
|
|
@@ -168,6 +179,7 @@ export default {
|
|
|
moeny: null,
|
|
|
displayCallerNumber: null,
|
|
|
displayCalleeNumber: null,
|
|
|
+ deptId:null,
|
|
|
|
|
|
},
|
|
|
// 表单参数
|
|
|
@@ -182,8 +194,11 @@ export default {
|
|
|
this.statusOptions = response.data;
|
|
|
});
|
|
|
getCompanyList().then(response => {
|
|
|
- this.companys = response.data;
|
|
|
-
|
|
|
+ this.companys = response.data;
|
|
|
+ if(this.companys!=null&&this.companys.length>0){
|
|
|
+ this.companyId=this.companys[0].companyId;
|
|
|
+ this.getTreeselect();
|
|
|
+ }
|
|
|
});
|
|
|
this.getList();
|
|
|
},
|
|
|
@@ -305,7 +320,30 @@ export default {
|
|
|
}).then(response => {
|
|
|
this.download(response.msg);
|
|
|
}).catch(function() {});
|
|
|
- }
|
|
|
+ },
|
|
|
+ /** 查询部门下拉树结构 */
|
|
|
+ getTreeselect() {
|
|
|
+ var that=this;
|
|
|
+ var param={companyId:this.companyId}
|
|
|
+ treeselect(param).then((response) => {
|
|
|
+ this.deptOptions = response.data;
|
|
|
+ console.log(this.deptOptions)
|
|
|
+ if(response.data!=null&&response.data.length>0){
|
|
|
+ //this.queryParams.deptId=response.data[0].id;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ companyChange(val){
|
|
|
+ console.log(val);
|
|
|
+ this.companyId=val;
|
|
|
+ this.getTreeselect();
|
|
|
+ },
|
|
|
+ currDeptChange(val){
|
|
|
+ console.log(val)
|
|
|
+ this.queryParams.deptId=val;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+
|
|
|
}
|
|
|
};
|
|
|
</script>
|
wansfa