|
|
@@ -7,7 +7,7 @@
|
|
7
|
7
|
<el-radio-button label="通讯录" />
|
|
8
|
8
|
</el-radio-group>
|
|
9
|
9
|
</div>
|
|
10
|
|
- <div class="contentBox">
|
|
|
10
|
+ <div class="contentBox" ref="scrollDivUser" v-if="radio2==='通讯录'" @scroll="handleScrollUser">
|
|
11
|
11
|
<el-input
|
|
12
|
12
|
v-if="radio2==='通讯录'"
|
|
13
|
13
|
v-model="addressBookSearch"
|
|
|
@@ -16,6 +16,36 @@
|
|
16
|
16
|
placeholder="请输入姓名"
|
|
17
|
17
|
:suffix-icon="Search"
|
|
18
|
18
|
/>
|
|
|
19
|
+ <div class="contentList" v-for="item in addressBookData">
|
|
|
20
|
+
|
|
|
21
|
+ <div class="leftBox">
|
|
|
22
|
+ <div class="telPhoneBox">
|
|
|
23
|
+ <span>{{item.dept.deptName}} -- </span>
|
|
|
24
|
+ <span>{{item.nickName}}</span>
|
|
|
25
|
+ <!-- <span>({{item.nickName}})</span> -->
|
|
|
26
|
+ <!-- {{
|
|
|
27
|
+ item.callType
|
|
|
28
|
+ ? getUnprefixNuber(item.callee)
|
|
|
29
|
+ : getUnprefixNuber(item.caller)
|
|
|
30
|
+ }} -->
|
|
|
31
|
+ </div>
|
|
|
32
|
+ <div class="remarkBox">
|
|
|
33
|
+ <span style="margin-right: 15px">{{ item.phonenumber }}</span>
|
|
|
34
|
+ <!-- <span>{{ getCallSate(item.callType, item.endTime) }}</span> -->
|
|
|
35
|
+ </div>
|
|
|
36
|
+ </div>
|
|
|
37
|
+ <div class="rightBox">
|
|
|
38
|
+ <el-icon
|
|
|
39
|
+ color="#409EFC"
|
|
|
40
|
+ class="no-inherit"
|
|
|
41
|
+ @click="phoneIconHandle(item)"
|
|
|
42
|
+ >
|
|
|
43
|
+ <Phone />
|
|
|
44
|
+ </el-icon>
|
|
|
45
|
+ </div>
|
|
|
46
|
+ </div>
|
|
|
47
|
+ </div>
|
|
|
48
|
+ <div class="contentBox" ref="scrollDivCall" v-if="radio2==='通话记录'" @scroll="handleScrollCall">
|
|
19
|
49
|
<div class="contentList" v-for="item in tableData" v-if="radio2==='通话记录'">
|
|
20
|
50
|
<div class="leftBox">
|
|
21
|
51
|
<div class="telPhoneBox">
|
|
|
@@ -46,16 +76,9 @@
|
|
46
|
76
|
<div class="telPhoneBox">
|
|
47
|
77
|
<span>{{item.dept.deptName}} -- </span>
|
|
48
|
78
|
<span>{{item.nickName}}</span>
|
|
49
|
|
- <!-- <span>({{item.nickName}})</span> -->
|
|
50
|
|
- <!-- {{
|
|
51
|
|
- item.callType
|
|
52
|
|
- ? getUnprefixNuber(item.callee)
|
|
53
|
|
- : getUnprefixNuber(item.caller)
|
|
54
|
|
- }} -->
|
|
55
|
79
|
</div>
|
|
56
|
80
|
<div class="remarkBox">
|
|
57
|
81
|
<span style="margin-right: 15px">{{ item.phonenumber }}</span>
|
|
58
|
|
- <!-- <span>{{ getCallSate(item.callType, item.endTime) }}</span> -->
|
|
59
|
82
|
</div>
|
|
60
|
83
|
</div>
|
|
61
|
84
|
<div class="rightBox">
|
|
|
@@ -68,21 +91,8 @@
|
|
68
|
91
|
</el-icon>
|
|
69
|
92
|
</div>
|
|
70
|
93
|
</div>
|
|
71
|
|
- <div style="margin-top: 15px" v-if="tableCount">
|
|
72
|
|
- <el-pagination
|
|
73
|
|
- v-model:page-size="pageSize4"
|
|
74
|
|
- :small="small"
|
|
75
|
|
- :disabled="disabled"
|
|
76
|
|
- :background="background"
|
|
77
|
|
- layout="total, prev, jumper, next"
|
|
78
|
|
- :total="tableCount"
|
|
79
|
|
- @size-change="handleSizeChange"
|
|
80
|
|
- @current-change="handleCurrentChange"
|
|
81
|
|
- />
|
|
82
|
|
- </div>
|
|
83
|
94
|
</div>
|
|
84
|
|
- </div>
|
|
85
|
|
-
|
|
|
95
|
+ </div>
|
|
86
|
96
|
<div v-if="callOrListState">
|
|
87
|
97
|
<div class="plate" v-if="getCallState === '2'">
|
|
88
|
98
|
<el-input
|
|
|
@@ -176,42 +186,44 @@
|
|
176
|
186
|
</el-row>
|
|
177
|
187
|
</div>
|
|
178
|
188
|
</div>
|
|
179
|
|
-
|
|
180
|
|
- <el-button
|
|
181
|
|
- size="large"
|
|
182
|
|
- type="danger"
|
|
183
|
|
- :icon="Phone"
|
|
184
|
|
- circle
|
|
185
|
|
- v-if="getCallState === '1'"
|
|
186
|
|
- :disabled="dropCallState"
|
|
187
|
|
- class="btnHangUp"
|
|
188
|
|
- @click="dropCall"
|
|
189
|
|
- />
|
|
190
|
|
- <el-button
|
|
191
|
|
- size="large"
|
|
192
|
|
- type="success"
|
|
193
|
|
- :icon="Phone"
|
|
194
|
|
- circle
|
|
195
|
|
- v-if="getCallState === '2'"
|
|
196
|
|
- class="btnCall"
|
|
197
|
|
- @click="btnCallType"
|
|
198
|
|
- />
|
|
199
|
|
- <el-button
|
|
200
|
|
- size="large"
|
|
201
|
|
- :icon="Edit"
|
|
202
|
|
- circle
|
|
203
|
|
- type="primary"
|
|
204
|
|
- class="btnCut"
|
|
205
|
|
- @click="btnTellState"
|
|
206
|
|
- />
|
|
207
|
|
- <el-button
|
|
208
|
|
- size="large"
|
|
209
|
|
- :icon="ArrowDownBold"
|
|
210
|
|
- circle
|
|
211
|
|
- type="primary"
|
|
212
|
|
- class="btnPage"
|
|
213
|
|
- @click="btnCutPage"
|
|
214
|
|
- />
|
|
|
189
|
+ <div class="btnBox">
|
|
|
190
|
+ <el-button
|
|
|
191
|
+ size="large"
|
|
|
192
|
+ type="danger"
|
|
|
193
|
+ :icon="Phone"
|
|
|
194
|
+ circle
|
|
|
195
|
+ v-if="getCallState === '1'"
|
|
|
196
|
+ :disabled="dropCallState"
|
|
|
197
|
+ class="btnHangUp"
|
|
|
198
|
+ @click="dropCall"
|
|
|
199
|
+ />
|
|
|
200
|
+ <el-button
|
|
|
201
|
+ size="large"
|
|
|
202
|
+ type="success"
|
|
|
203
|
+ :icon="Phone"
|
|
|
204
|
+ circle
|
|
|
205
|
+ v-if="getCallState === '2'"
|
|
|
206
|
+ class="btnCall"
|
|
|
207
|
+ @click="btnCallType"
|
|
|
208
|
+ />
|
|
|
209
|
+ <el-button
|
|
|
210
|
+ size="large"
|
|
|
211
|
+ :icon="Edit"
|
|
|
212
|
+ circle
|
|
|
213
|
+ type="primary"
|
|
|
214
|
+ class="btnCut"
|
|
|
215
|
+ @click="btnTellState"
|
|
|
216
|
+ />
|
|
|
217
|
+ <el-button
|
|
|
218
|
+ size="large"
|
|
|
219
|
+ :icon="ArrowDownBold"
|
|
|
220
|
+ circle
|
|
|
221
|
+ type="primary"
|
|
|
222
|
+ class="btnPage"
|
|
|
223
|
+ @click="btnCutPage"
|
|
|
224
|
+ />
|
|
|
225
|
+ </div>
|
|
|
226
|
+
|
|
215
|
227
|
</div>
|
|
216
|
228
|
|
|
217
|
229
|
<el-button
|
|
|
@@ -245,8 +257,12 @@ import { Send, ws } from '@/utils/telWebsocket'
|
|
245
|
257
|
import useSocketStore from '@/store/modules/socket'
|
|
246
|
258
|
import useSelectStore from '@/store/commonSelect/common';
|
|
247
|
259
|
import { Search } from '@element-plus/icons-vue'
|
|
|
260
|
+import { onMounted, ref, watch, nextTick } from 'vue';
|
|
248
|
261
|
|
|
249
|
262
|
const { proxy } = getCurrentInstance()
|
|
|
263
|
+const scrollDivUser = ref(null)
|
|
|
264
|
+const scrollDivCall = ref(null)
|
|
|
265
|
+
|
|
250
|
266
|
|
|
251
|
267
|
const radio2 = ref('通话记录')
|
|
252
|
268
|
const scoketDatas = ref({})
|
|
|
@@ -259,7 +275,7 @@ const telNumber = ref('')
|
|
259
|
275
|
const getCallState = ref('')
|
|
260
|
276
|
const getCallData = ref({})
|
|
261
|
277
|
|
|
262
|
|
-const pageSize4 = ref(7)
|
|
|
278
|
+const pageSize4 = ref(15)
|
|
263
|
279
|
const small = ref(false)
|
|
264
|
280
|
const background = ref(false)
|
|
265
|
281
|
const disabled = ref(false)
|
|
|
@@ -304,9 +320,11 @@ const props = defineProps({
|
|
304
|
320
|
function aaaa(e) {
|
|
305
|
321
|
console.log(e)
|
|
306
|
322
|
// if (e == '通话记录') {
|
|
307
|
|
- // tableCount.value = tableRecordCount.value
|
|
|
323
|
+ // paramsSearch.value.pageNum = 1
|
|
|
324
|
+ // getUserData()
|
|
308
|
325
|
// } else if(e == '通讯录'){
|
|
309
|
|
- // tableCount.value = addressBookCount.value
|
|
|
326
|
+ // paramsSearch.value.pageNum = 1
|
|
|
327
|
+ // getCustomeData()
|
|
310
|
328
|
// }
|
|
311
|
329
|
}
|
|
312
|
330
|
watch(
|
|
|
@@ -429,12 +447,35 @@ onMounted(() => {
|
|
429
|
447
|
paramsSearch.value.pageSize = pageSize4.value
|
|
430
|
448
|
getCustomeData()
|
|
431
|
449
|
getUserData()
|
|
|
450
|
+
|
|
|
451
|
+
|
|
432
|
452
|
})
|
|
|
453
|
+const handleScrollUser = () => {
|
|
|
454
|
+ const container = scrollDivUser.value
|
|
|
455
|
+ if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
|
|
|
456
|
+ // loadMore()
|
|
|
457
|
+ console.log('通讯录到底了');
|
|
|
458
|
+ paramsSearch.value.pageNum +=1
|
|
|
459
|
+ getUserData()
|
|
|
460
|
+
|
|
|
461
|
+ }
|
|
|
462
|
+}
|
|
|
463
|
+const handleScrollCall = () => {
|
|
|
464
|
+ const container = scrollDivCall.value
|
|
|
465
|
+ if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
|
|
|
466
|
+ // loadMore()
|
|
|
467
|
+ console.log('通话记录到底了');
|
|
|
468
|
+ paramsSearch.value.pageNum +=1
|
|
|
469
|
+ getCustomeData()
|
|
|
470
|
+ }
|
|
|
471
|
+}
|
|
433
|
472
|
function getCustomeData() {
|
|
434
|
473
|
delete paramsSearch.value.nickName
|
|
435
|
474
|
getPageListData('/call/calllog', paramsSearch.value).then(
|
|
436
|
475
|
({ data, total }) => {
|
|
437
|
|
- tableData.value = data
|
|
|
476
|
+ console.log(data);
|
|
|
477
|
+ const newArray = data
|
|
|
478
|
+ tableData.value = tableData.value.concat(newArray)
|
|
438
|
479
|
tableRecordCount.value = total
|
|
439
|
480
|
}
|
|
440
|
481
|
)
|
|
|
@@ -448,8 +489,9 @@ function getUserData() {
|
|
448
|
489
|
|
|
449
|
490
|
getPageListData('/system/user', paramsSearch.value).then(
|
|
450
|
491
|
({ data, total }) => {
|
|
451
|
|
- addressBookData.value = data
|
|
452
|
|
- console.log(data,total)
|
|
|
492
|
+ console.log(data);
|
|
|
493
|
+ const newArray = data
|
|
|
494
|
+ addressBookData.value = addressBookData.value.concat(newArray)
|
|
453
|
495
|
addressBookCount.value = total
|
|
454
|
496
|
|
|
455
|
497
|
}
|
|
|
@@ -547,10 +589,14 @@ function retrieveBack() {
|
|
547
|
589
|
width: 162px;
|
|
548
|
590
|
margin: 0 auto;
|
|
549
|
591
|
}
|
|
550
|
|
-
|
|
|
592
|
+ .contentBox::-webkit-scrollbar {
|
|
|
593
|
+ display: none; /* Chrome Safari */
|
|
|
594
|
+ }
|
|
551
|
595
|
.contentBox {
|
|
552
|
596
|
border-top: 1px solid #999;
|
|
553
|
597
|
margin-top: 15px;
|
|
|
598
|
+ height: 590px;
|
|
|
599
|
+ overflow-y: auto;
|
|
554
|
600
|
|
|
555
|
601
|
.contentList {
|
|
556
|
602
|
width: 100%;
|
|
|
@@ -607,7 +653,14 @@ function retrieveBack() {
|
|
607
|
653
|
right: 30px;
|
|
608
|
654
|
z-index: 2;
|
|
609
|
655
|
}
|
|
610
|
|
-
|
|
|
656
|
+ .btnBox{
|
|
|
657
|
+ width: 100%;
|
|
|
658
|
+ height: 60px;
|
|
|
659
|
+ background-color: #ffffff;
|
|
|
660
|
+ position: absolute;
|
|
|
661
|
+ bottom: 0px;
|
|
|
662
|
+ right: 0px;
|
|
|
663
|
+ }
|
|
611
|
664
|
.btnHangUp {
|
|
612
|
665
|
position: absolute;
|
|
613
|
666
|
bottom: 30px;
|