|
|
@@ -1,14 +1,14 @@
|
|
1
|
1
|
<template>
|
|
2
|
2
|
<div class="dialplate">
|
|
3
|
3
|
<div class="plate">
|
|
4
|
|
- <!-- 拨号盘 -->
|
|
|
4
|
+ <!-- 拨号盘 @keyup.enter.native="callOut"-->
|
|
5
|
5
|
<el-input
|
|
6
|
6
|
v-model="telNumber"
|
|
7
|
7
|
class="tel_input"
|
|
8
|
8
|
autofocus
|
|
9
|
9
|
maxlength="12"
|
|
|
10
|
+ ref="inputFocus"
|
|
10
|
11
|
@keyup.native="callOutInput"
|
|
11
|
|
- @keyup.enter.native="callOut"
|
|
12
|
12
|
/>
|
|
13
|
13
|
<i v-show="isShowDelNum" class="del_num" @click="delNum" />
|
|
14
|
14
|
<el-row v-for="(item, index) in dialNums" :gutter="20" :key="index">
|
|
|
@@ -18,7 +18,7 @@
|
|
18
|
18
|
</el-row>
|
|
19
|
19
|
<el-button v-waves class="btn_call" type="success" round @click="callOut">拨打</el-button>
|
|
20
|
20
|
<!-- 右侧 通话记录和通讯录 -->
|
|
21
|
|
- <svg-icon v-popover:popover class="btn_yonghu" icon-class="yonghu" />
|
|
|
21
|
+ <!-- <svg-icon v-popover:popover class="btn_yonghu" icon-class="yonghu" />
|
|
22
|
22
|
<el-popover
|
|
23
|
23
|
ref="popover"
|
|
24
|
24
|
:value="telIsVisCallout"
|
|
|
@@ -28,68 +28,73 @@
|
|
28
|
28
|
width="396"
|
|
29
|
29
|
trigger="click"
|
|
30
|
30
|
transition="fade-in-linear"
|
|
31
|
|
- >
|
|
32
|
|
- <el-tabs v-model="tabActiveName" stretch class="phnoe_tabs" @tab-click="handleClick">
|
|
33
|
|
- <el-input v-model="s_keywords" size="mini" placeholder="搜索" prefix-icon="el-icon-search" @keyup.enter="serach_btn" />
|
|
34
|
|
- <el-tab-pane label="通讯录" name="first">
|
|
35
|
|
- <el-scrollbar
|
|
36
|
|
- v-loading="loading2"
|
|
37
|
|
- element-loading-background="transparent"
|
|
38
|
|
- style="height: 320px;"
|
|
39
|
|
- >
|
|
40
|
|
- <ul v-if="phoneLists.length" class="recent_calls_lists">
|
|
41
|
|
- <li
|
|
42
|
|
- v-for="(item, index) in phoneLists"
|
|
43
|
|
- :key="index"
|
|
44
|
|
- class="recent_calls_item clearfix"
|
|
|
31
|
+ > -->
|
|
|
32
|
+ <div class="popoverClass">
|
|
|
33
|
+ <el-tabs v-model="tabActiveName" stretch class="phnoe_tabs" @tab-click="handleClick">
|
|
|
34
|
+ <!-- <el-input v-model="s_keywords" size="mini" placeholder="搜索" prefix-icon="el-icon-search" @keyup.enter="serach_btn" /> -->
|
|
|
35
|
+ <el-tab-pane label="通讯录" name="first">
|
|
|
36
|
+ <el-scrollbar
|
|
|
37
|
+ v-loading="loading2"
|
|
|
38
|
+ element-loading-background="transparent"
|
|
|
39
|
+ style="height: 320px;"
|
|
45
|
40
|
>
|
|
46
|
|
- <div class="recent_calls_item_left" @click="recentCallOut(item.tel)">
|
|
47
|
|
- <p class="recent_calls_item_name">{{ item.name }}</p>
|
|
48
|
|
- <p class="recent_calls_item_tel">{{ item.tel }}</p>
|
|
49
|
|
- </div>
|
|
50
|
|
- </li>
|
|
51
|
|
- </ul>
|
|
52
|
|
- <p v-else class="text_center">没有找到数据···</p>
|
|
53
|
|
- </el-scrollbar>
|
|
54
|
|
- </el-tab-pane>
|
|
55
|
|
- <el-tab-pane label="历史记录" name="second">
|
|
56
|
|
- <div class="h_list_title">
|
|
57
|
|
- <span>最近通话</span>
|
|
58
|
|
- </div>
|
|
59
|
|
- <el-scrollbar
|
|
60
|
|
- v-loading="loading1"
|
|
61
|
|
- element-loading-background="transparent"
|
|
62
|
|
- style="height: 300px;"
|
|
63
|
|
- >
|
|
64
|
|
- <ul v-if="recentCalls.length" class="recent_calls_lists">
|
|
65
|
|
- <li v-for="item in recentCalls" :key="item.id" class="recent_calls_item clearfix">
|
|
66
|
|
- <div class="recent_calls_item_left" @click="recentCallOut(item.tel)">
|
|
67
|
|
- <svg-icon v-show="item.isCallOut" icon-class="huchu" />
|
|
68
|
|
- <p :class="{ name_state: !item.isConect }" class="recent_calls_item_name">
|
|
69
|
|
- <span v-if="item.isConect">{{ item.callTimes | secondToDuring }}</span>
|
|
70
|
|
- </p>
|
|
71
|
|
- <p class="recent_calls_item_tel">{{ item.tel }}</p>
|
|
72
|
|
- </div>
|
|
73
|
|
- <div class="recent_calls_item_right">
|
|
74
|
|
- <span class="recent_calls_item_time">{{ item.time | timesAgo }}</span>
|
|
75
|
|
- <el-tooltip
|
|
76
|
|
- v-show="isShowOrderIcon"
|
|
77
|
|
- v-if="item.isOrder"
|
|
78
|
|
- effect="dark"
|
|
79
|
|
- content="点击查看工单"
|
|
80
|
|
- placement="right"
|
|
|
41
|
+ <ul v-if="phoneLists.length" class="recent_calls_lists">
|
|
|
42
|
+ <li
|
|
|
43
|
+ v-for="(item, index) in phoneLists"
|
|
|
44
|
+ :key="index"
|
|
|
45
|
+ class="recent_calls_item clearfix"
|
|
81
|
46
|
>
|
|
82
|
|
- <svg-icon icon-class="xiangmu1" @click.native="goOrderList(item.tel)" />
|
|
83
|
|
- </el-tooltip>
|
|
84
|
|
- </div>
|
|
85
|
|
- </li>
|
|
86
|
|
- </ul>
|
|
87
|
|
- <p v-else class="text_center">没有找到数据···</p>
|
|
88
|
|
- </el-scrollbar>
|
|
89
|
|
- </el-tab-pane>
|
|
|
47
|
+ <div class="recent_calls_item_left" @click="recentCallOut(item.tel)">
|
|
|
48
|
+ <svg-icon icon-class="huchu" />
|
|
|
49
|
+ <p class="recent_calls_item_name">{{ item.name }}</p>
|
|
|
50
|
+ <p class="recent_calls_item_tel">{{ item.tel }}</p>
|
|
|
51
|
+ </div>
|
|
|
52
|
+ </li>
|
|
|
53
|
+ </ul>
|
|
|
54
|
+ <p v-else class="text_center">没有找到数据···</p>
|
|
|
55
|
+ </el-scrollbar>
|
|
|
56
|
+ </el-tab-pane>
|
|
|
57
|
+ <el-tab-pane label="历史记录" name="second">
|
|
|
58
|
+ <div class="h_list_title">
|
|
|
59
|
+ <span>最近通话</span>
|
|
|
60
|
+ </div>
|
|
|
61
|
+ <el-scrollbar
|
|
|
62
|
+ v-loading="loading1"
|
|
|
63
|
+ element-loading-background="transparent"
|
|
|
64
|
+ style="height: 300px;"
|
|
|
65
|
+ >
|
|
|
66
|
+ <ul v-if="recentCalls.length" class="recent_calls_lists">
|
|
|
67
|
+ <li v-for="item in recentCalls" :key="item.id" class="recent_calls_item clearfix">
|
|
|
68
|
+ <div class="recent_calls_item_left" @click="recentCallOut(item.tel)">
|
|
|
69
|
+ <svg-icon v-show="item.isCallOut" icon-class="huchu" />
|
|
|
70
|
+ <p :class="{ name_state: !item.isConect }" class="recent_calls_item_name">
|
|
|
71
|
+ <span v-if="item.isConect">{{ item.callTimes | secondToDuring }}</span>
|
|
|
72
|
+ </p>
|
|
|
73
|
+ <p class="recent_calls_item_tel">{{ item.tel }}</p>
|
|
|
74
|
+ </div>
|
|
|
75
|
+ <div class="recent_calls_item_right">
|
|
|
76
|
+ <span class="recent_calls_item_time">{{ item.time | timesAgo }}</span>
|
|
|
77
|
+ <el-tooltip
|
|
|
78
|
+ v-show="isShowOrderIcon"
|
|
|
79
|
+ v-if="item.isOrder"
|
|
|
80
|
+ effect="dark"
|
|
|
81
|
+ content="点击查看工单"
|
|
|
82
|
+ placement="right"
|
|
|
83
|
+ >
|
|
|
84
|
+ <svg-icon icon-class="xiangmu1" @click.native="goOrderList(item.tel)" />
|
|
|
85
|
+ </el-tooltip>
|
|
|
86
|
+ </div>
|
|
|
87
|
+ </li>
|
|
|
88
|
+ </ul>
|
|
|
89
|
+ <p v-else class="text_center">没有找到数据···</p>
|
|
|
90
|
+ </el-scrollbar>
|
|
|
91
|
+ </el-tab-pane>
|
|
90
|
92
|
|
|
91
|
|
- </el-tabs>
|
|
92
|
|
- </el-popover>
|
|
|
93
|
+ </el-tabs>
|
|
|
94
|
+ </div>
|
|
|
95
|
+
|
|
|
96
|
+
|
|
|
97
|
+ <!-- </el-popover> -->
|
|
93
|
98
|
</div>
|
|
94
|
99
|
</div>
|
|
95
|
100
|
</template>
|
|
|
@@ -133,7 +138,6 @@ export default {
|
|
133
|
138
|
['*', '0', '#']
|
|
134
|
139
|
],
|
|
135
|
140
|
tabActiveName: 'first',
|
|
136
|
|
- s_keywords: '',
|
|
137
|
141
|
pageParams: {
|
|
138
|
142
|
pageindex: 1, // 当前第几页
|
|
139
|
143
|
pagesize: Number(this.$store.getters.serverConfig.PAGESIZE), // 每页几条数据
|
|
|
@@ -158,6 +162,7 @@ export default {
|
|
158
|
162
|
telIsVisCallout: function(newVal, oldVal) {
|
|
159
|
163
|
console.log(newVal)
|
|
160
|
164
|
if (newVal) {
|
|
|
165
|
+ this.readCardModel()
|
|
161
|
166
|
this.tabActiveName = 'first'
|
|
162
|
167
|
this.getMailList()
|
|
163
|
168
|
} else {
|
|
|
@@ -167,7 +172,8 @@ export default {
|
|
167
|
172
|
}
|
|
168
|
173
|
},
|
|
169
|
174
|
created() {
|
|
170
|
|
- // this.tabActiveName = 'first'
|
|
|
175
|
+ // this.tabActiveName = 'first' .$refs['mark']
|
|
|
176
|
+
|
|
171
|
177
|
document.onkeyup = (e) => {
|
|
172
|
178
|
if (e.keyCode === 13) {
|
|
173
|
179
|
if (this.tabActiveName === 'first') {
|
|
|
@@ -182,14 +188,20 @@ export default {
|
|
182
|
188
|
|
|
183
|
189
|
//
|
|
184
|
190
|
serach_btn() {
|
|
185
|
|
- console.log(this.s_keywords)
|
|
186
|
191
|
if (this.tabActiveName === 'first') {
|
|
187
|
192
|
this.getMailList()
|
|
188
|
193
|
} else if (this.tabActiveName === 'second') {
|
|
189
|
194
|
this.getTelHisList()
|
|
190
|
195
|
}
|
|
191
|
196
|
},
|
|
192
|
|
- // 获取通话历史记录
|
|
|
197
|
+
|
|
|
198
|
+ readCardModel() {
|
|
|
199
|
+ const _this = this
|
|
|
200
|
+ setTimeout(function() {
|
|
|
201
|
+ _this.$refs.inputFocus.focus();
|
|
|
202
|
+ }, 100)
|
|
|
203
|
+ },
|
|
|
204
|
+
|
|
193
|
205
|
getTelHisList() {
|
|
194
|
206
|
this.loading1 = true
|
|
195
|
207
|
const stime = getPreDate(3600 * 1000 * 24 * 7) // 不传参数是30天前
|
|
|
@@ -197,7 +209,7 @@ export default {
|
|
197
|
209
|
const params = {
|
|
198
|
210
|
stime, // 开始时间
|
|
199
|
211
|
etime, // 结束时间
|
|
200
|
|
- phone: this.s_keywords // 否 string 模糊查询(呼叫号码)
|
|
|
212
|
+ phone: this.telNumber // 否 string 模糊查询(呼叫号码)
|
|
201
|
213
|
}
|
|
202
|
214
|
getCurentCallRecords(params).then(res => {
|
|
203
|
215
|
this.loading1 = false
|
|
|
@@ -223,12 +235,12 @@ export default {
|
|
223
|
235
|
},
|
|
224
|
236
|
// 获取通讯录
|
|
225
|
237
|
getMailList() {
|
|
226
|
|
- console.log(this.s_keywords)
|
|
|
238
|
+ console.log(this.telNumber)
|
|
227
|
239
|
this.loading2 = true
|
|
228
|
240
|
const params = {
|
|
229
|
241
|
pageindex: this.pageParams.pageindex, // 第几页
|
|
230
|
242
|
pagesize: this.pageParams.pagesize, // 每页几条信息
|
|
231
|
|
- keyword: this.s_keywords // 否 string 模糊查询(姓名,手机号码,固话)
|
|
|
243
|
+ keyword: this.telNumber // 否 string 模糊查询(姓名,手机号码,固话)
|
|
232
|
244
|
}
|
|
233
|
245
|
getCusUserList(params).then(res => {
|
|
234
|
246
|
this.loading2 = false
|
|
|
@@ -443,6 +455,17 @@ export default {
|
|
443
|
455
|
</style>
|
|
444
|
456
|
|
|
445
|
457
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
458
|
+.popoverClass{
|
|
|
459
|
+ width: 396px;
|
|
|
460
|
+ position: fixed;
|
|
|
461
|
+ top: 37px;
|
|
|
462
|
+ left: 672px;
|
|
|
463
|
+ transform-origin: left center;
|
|
|
464
|
+ z-index: 2001;
|
|
|
465
|
+ margin-left: 13px;
|
|
|
466
|
+ margin-top: 14px;
|
|
|
467
|
+}
|
|
|
468
|
+
|
|
446
|
469
|
.dialplate {
|
|
447
|
470
|
.plate {
|
|
448
|
471
|
width: 100%;
|
|
|
@@ -513,10 +536,12 @@ export default {
|
|
513
|
536
|
}
|
|
514
|
537
|
.recent_calls_item_name {
|
|
515
|
538
|
line-height: 18px;
|
|
|
539
|
+ text-align: left;
|
|
516
|
540
|
margin: 6px 0 0 0;
|
|
517
|
541
|
}
|
|
518
|
542
|
.recent_calls_item_tel {
|
|
519
|
543
|
line-height: 18px;
|
|
|
544
|
+ text-align: left;
|
|
520
|
545
|
margin: 4px 0 0 0;
|
|
521
|
546
|
}
|
|
522
|
547
|
}
|