|
|
@@ -29,11 +29,16 @@
|
|
29
|
29
|
</el-popover>
|
|
30
|
30
|
|
|
31
|
31
|
<div v-if="seatflag" class="navar_item close">
|
|
|
32
|
+ <i
|
|
|
33
|
+ class="el-icon-chat-dot-square"
|
|
|
34
|
+ style="color: white; font-size: 20px; vertical-align: middle;margin-right:10px"
|
|
|
35
|
+ @click="drawer = true"
|
|
|
36
|
+ />
|
|
32
|
37
|
<span class="" @click="logout">退出</span>
|
|
33
|
38
|
</div>
|
|
34
|
39
|
<el-dropdown class="avatar-container" trigger="click">
|
|
35
|
40
|
<div class="avatar-wrapper">
|
|
36
|
|
- <img :src="!avatar ? usertx : avatar" class="user-avatar" />
|
|
|
41
|
+ <img :src="!avatar ? usertx : avatar" class="user-avatar" >
|
|
37
|
42
|
</div>
|
|
38
|
43
|
<el-dropdown-menu slot="dropdown" class="user-dropdown">
|
|
39
|
44
|
<router-link class="inlineBlock" to="/">
|
|
|
@@ -48,7 +53,7 @@
|
|
48
|
53
|
</el-dropdown-menu>
|
|
49
|
54
|
</el-dropdown>
|
|
50
|
55
|
<!-- 发送消息 -->
|
|
51
|
|
- <div
|
|
|
56
|
+ <!-- <div
|
|
52
|
57
|
style="
|
|
53
|
58
|
display: inline-block;
|
|
54
|
59
|
float: right;
|
|
|
@@ -58,23 +63,23 @@
|
|
58
|
63
|
"
|
|
59
|
64
|
>
|
|
60
|
65
|
<i
|
|
61
|
|
- @click="drawer = true"
|
|
62
|
66
|
class="el-icon-chat-dot-square"
|
|
63
|
67
|
style="color: white; font-size: 25px; vertical-align: middle"
|
|
64
|
|
- ></i>
|
|
65
|
|
- </div>
|
|
|
68
|
+ @click="drawer = true"
|
|
|
69
|
+ />
|
|
|
70
|
+ </div> -->
|
|
66
|
71
|
<el-drawer
|
|
67
|
|
- style="margin-top: 100px"
|
|
68
|
|
- size="20%"
|
|
69
|
72
|
:modal="false"
|
|
70
|
|
- title="消息通讯"
|
|
71
|
73
|
:visible.sync="drawer"
|
|
72
|
74
|
:show-close="false"
|
|
73
|
75
|
:direction="direction"
|
|
|
76
|
+ style="margin-top: 100px"
|
|
|
77
|
+ size="20%"
|
|
|
78
|
+ title="消息通讯"
|
|
74
|
79
|
>
|
|
75
|
80
|
<el-tabs
|
|
76
|
|
- style="padding: 0 20px"
|
|
77
|
81
|
v-model="activeName"
|
|
|
82
|
+ style="padding: 0 20px"
|
|
78
|
83
|
type="card"
|
|
79
|
84
|
@tab-click="handleClick"
|
|
80
|
85
|
>
|
|
|
@@ -91,16 +96,18 @@
|
|
91
|
96
|
>
|
|
92
|
97
|
<div style="width: 80px; text-align: center">
|
|
93
|
98
|
<img
|
|
94
|
|
- class="pimg"
|
|
95
|
99
|
:src="$store.getters.serverConfig.BASE_API + item.F_See"
|
|
96
|
|
- />
|
|
|
100
|
+ class="pimg"
|
|
|
101
|
+ >
|
|
97
|
102
|
<p class="puser">{{ item.F_UserName }}</p>
|
|
98
|
103
|
</div>
|
|
99
|
104
|
<div class="pcon">{{ item.Content }}</div>
|
|
100
|
105
|
<div class="pdate">
|
|
101
|
106
|
{{ item.CreateDate }}
|
|
102
|
|
- <span class="phf" @click="tosend(item.F_RoleId, item.FromUserId)"
|
|
103
|
|
- >回复</span
|
|
|
107
|
+ <span
|
|
|
108
|
+ class="phf"
|
|
|
109
|
+ @click="tosend(item.F_RoleId, item.FromUserId)"
|
|
|
110
|
+ >回复</span
|
|
104
|
111
|
>
|
|
105
|
112
|
</div>
|
|
106
|
113
|
</div>
|
|
|
@@ -114,16 +121,18 @@
|
|
114
|
121
|
>
|
|
115
|
122
|
<div style="width: 80px; text-align: center">
|
|
116
|
123
|
<img
|
|
117
|
|
- class="pimg"
|
|
118
|
124
|
:src="$store.getters.serverConfig.BASE_API + item.F_See"
|
|
119
|
|
- />
|
|
|
125
|
+ class="pimg"
|
|
|
126
|
+ >
|
|
120
|
127
|
<p class="puser">{{ item.F_UserName }}</p>
|
|
121
|
128
|
</div>
|
|
122
|
129
|
<div class="pcon">{{ item.Content }}</div>
|
|
123
|
130
|
<div class="pdate">
|
|
124
|
131
|
{{ item.CreateDate }}
|
|
125
|
|
- <span class="phf" @click="tosend(item.F_RoleId, item.FromUserId)"
|
|
126
|
|
- >回复</span
|
|
|
132
|
+ <span
|
|
|
133
|
+ class="phf"
|
|
|
134
|
+ @click="tosend(item.F_RoleId, item.FromUserId)"
|
|
|
135
|
+ >回复</span
|
|
127
|
136
|
>
|
|
128
|
137
|
</div>
|
|
129
|
138
|
</div>
|
|
|
@@ -136,138 +145,138 @@
|
|
136
|
145
|
</template>
|
|
137
|
146
|
|
|
138
|
147
|
<script>
|
|
139
|
|
-import { mapGetters } from "vuex";
|
|
140
|
|
-import store from "@/store";
|
|
141
|
|
-import { getLogout } from "@/api/layout/permsgEdit";
|
|
142
|
|
-import { createWebSocket } from "@/utils/telWebsocket";
|
|
|
148
|
+import { mapGetters } from 'vuex'
|
|
|
149
|
+import store from '@/store'
|
|
|
150
|
+import { getLogout } from '@/api/layout/permsgEdit'
|
|
|
151
|
+import { createWebSocket } from '@/utils/telWebsocket'
|
|
143
|
152
|
import {
|
|
144
|
153
|
getGetChatLists,
|
|
145
|
|
- getGetChatCount,
|
|
146
|
|
-} from "@/api/AnnounceManagement/chart";
|
|
147
|
|
-import Teloperation from "./teloperation";
|
|
148
|
|
-import NavUserInfo from "./NavUserInfo";
|
|
149
|
|
-import navTelStateMsg from "./navTelStateMsg";
|
|
150
|
|
-import permsgEdit from "./permsgEdit.vue";
|
|
151
|
|
-import sendMsg from "./sendmsg.vue";
|
|
|
154
|
+ getGetChatCount
|
|
|
155
|
+} from '@/api/AnnounceManagement/chart'
|
|
|
156
|
+import Teloperation from './teloperation'
|
|
|
157
|
+import NavUserInfo from './NavUserInfo'
|
|
|
158
|
+import navTelStateMsg from './navTelStateMsg'
|
|
|
159
|
+import permsgEdit from './permsgEdit.vue'
|
|
|
160
|
+import sendMsg from './sendmsg.vue'
|
|
152
|
161
|
export default {
|
|
153
|
|
- name: "Navbar",
|
|
|
162
|
+ name: 'Navbar',
|
|
154
|
163
|
components: {
|
|
155
|
164
|
Teloperation,
|
|
156
|
165
|
NavUserInfo,
|
|
157
|
|
- navTelStateMsg,
|
|
|
166
|
+ navTelStateMsg
|
|
158
|
167
|
},
|
|
159
|
168
|
data() {
|
|
160
|
169
|
return {
|
|
161
|
|
- usertx: "",
|
|
162
|
|
- activeName: "0",
|
|
163
|
|
- noread: "",
|
|
|
170
|
+ usertx: '',
|
|
|
171
|
+ activeName: '0',
|
|
|
172
|
+ noread: '',
|
|
164
|
173
|
noreadlist: [],
|
|
165
|
174
|
readlist: [],
|
|
166
|
175
|
drawer: false,
|
|
167
|
176
|
orderFlag: true,
|
|
168
|
|
- direction: "rtl",
|
|
|
177
|
+ direction: 'rtl',
|
|
169
|
178
|
showTopNotice: false, // 是否显示项目到期的消息
|
|
170
|
|
- telTopRightText: "",
|
|
|
179
|
+ telTopRightText: '',
|
|
171
|
180
|
offsetRight: 0,
|
|
172
|
181
|
offsetBottom: 0,
|
|
173
|
182
|
topNoticeNum: 0, // 顶部消息数量
|
|
174
|
|
- roleName: "", // 用户角色名称
|
|
175
|
|
- };
|
|
|
183
|
+ roleName: '' // 用户角色名称
|
|
|
184
|
+ }
|
|
176
|
185
|
},
|
|
177
|
186
|
computed: {
|
|
178
|
187
|
...mapGetters([
|
|
179
|
|
- "telSeatState", // 坐席状态
|
|
180
|
|
- "teamName", // 中心
|
|
181
|
|
- "groupName", // 小组
|
|
182
|
|
- "sidebar",
|
|
183
|
|
- "avatar",
|
|
184
|
|
- "seatflag",
|
|
185
|
|
- "telIsLogin", // 是否签入
|
|
186
|
|
- "telIsConnected", // 连接是否建立
|
|
187
|
|
- ]),
|
|
|
188
|
+ 'telSeatState', // 坐席状态
|
|
|
189
|
+ 'teamName', // 中心
|
|
|
190
|
+ 'groupName', // 小组
|
|
|
191
|
+ 'sidebar',
|
|
|
192
|
+ 'avatar',
|
|
|
193
|
+ 'seatflag',
|
|
|
194
|
+ 'telIsLogin', // 是否签入
|
|
|
195
|
+ 'telIsConnected' // 连接是否建立
|
|
|
196
|
+ ])
|
|
188
|
197
|
},
|
|
189
|
198
|
watch: {
|
|
190
|
|
- telTopRightState: function (newT) {
|
|
191
|
|
- if (this.telSeatState === 2 && (newT === "空闲" || newT === "忙碌")) {
|
|
192
|
|
- this.telTopRightText = "空闲";
|
|
193
|
|
- store.dispatch("ChangeTopRightState", ["空闲", true]);
|
|
|
199
|
+ telTopRightState: function(newT) {
|
|
|
200
|
+ if (this.telSeatState === 2 && (newT === '空闲' || newT === '忙碌')) {
|
|
|
201
|
+ this.telTopRightText = '空闲'
|
|
|
202
|
+ store.dispatch('ChangeTopRightState', ['空闲', true])
|
|
194
|
203
|
} else if (
|
|
195
|
204
|
this.telSeatState === 5 &&
|
|
196
|
|
- (newT === "空闲" || newT === "忙碌")
|
|
|
205
|
+ (newT === '空闲' || newT === '忙碌')
|
|
197
|
206
|
) {
|
|
198
|
|
- this.telTopRightText = "忙碌";
|
|
199
|
|
- store.dispatch("ChangeTopRightState", ["忙碌", false]);
|
|
|
207
|
+ this.telTopRightText = '忙碌'
|
|
|
208
|
+ store.dispatch('ChangeTopRightState', ['忙碌', false])
|
|
200
|
209
|
} else {
|
|
201
|
|
- this.telTopRightText = newT;
|
|
|
210
|
+ this.telTopRightText = newT
|
|
202
|
211
|
}
|
|
203
|
|
- },
|
|
|
212
|
+ }
|
|
204
|
213
|
},
|
|
205
|
214
|
created() {
|
|
206
|
215
|
this.usertx =
|
|
207
|
216
|
this.$store.getters.serverConfig.BASE_API +
|
|
208
|
|
- localStorage.getItem("storageUsertx");
|
|
209
|
|
- this.roleName = window.localStorage.getItem("roleName");
|
|
|
217
|
+ localStorage.getItem('storageUsertx')
|
|
|
218
|
+ this.roleName = window.localStorage.getItem('roleName')
|
|
210
|
219
|
if (!this.telIsConnected && this.seatflag) {
|
|
211
|
|
- createWebSocket();
|
|
|
220
|
+ createWebSocket()
|
|
212
|
221
|
}
|
|
213
|
|
- this.getList();
|
|
|
222
|
+ this.getList()
|
|
214
|
223
|
},
|
|
215
|
224
|
methods: {
|
|
216
|
225
|
getList() {
|
|
217
|
226
|
return new Promise((resolve) => {
|
|
218
|
227
|
const params = {
|
|
219
|
228
|
top: 50,
|
|
220
|
|
- fromid: parseInt(localStorage.getItem("storageUserid")),
|
|
221
|
|
- isread: this.activeName,
|
|
222
|
|
- };
|
|
|
229
|
+ fromid: parseInt(localStorage.getItem('storageUserid')),
|
|
|
230
|
+ isread: this.activeName
|
|
|
231
|
+ }
|
|
223
|
232
|
getGetChatLists(params).then((response) => {
|
|
224
|
|
- this.noread = response.total;
|
|
225
|
|
- if (this.activeName == "0") {
|
|
226
|
|
- this.noreadlist = response.rows;
|
|
|
233
|
+ this.noread = response.total
|
|
|
234
|
+ if (this.activeName == '0') {
|
|
|
235
|
+ this.noreadlist = response.rows
|
|
227
|
236
|
}
|
|
228
|
|
- if (this.activeName == "1") {
|
|
229
|
|
- this.readlist = response.rows;
|
|
|
237
|
+ if (this.activeName == '1') {
|
|
|
238
|
+ this.readlist = response.rows
|
|
230
|
239
|
}
|
|
231
|
|
- });
|
|
232
|
|
- resolve();
|
|
233
|
|
- });
|
|
|
240
|
+ })
|
|
|
241
|
+ resolve()
|
|
|
242
|
+ })
|
|
234
|
243
|
},
|
|
235
|
244
|
handleClick(tab, event) {
|
|
236
|
|
- this.getList();
|
|
|
245
|
+ this.getList()
|
|
237
|
246
|
},
|
|
238
|
247
|
logout() {
|
|
239
|
|
- this.$confirm("您确定退出吗?", "提示", {
|
|
240
|
|
- confirmButtonText: "确定",
|
|
241
|
|
- cancelButtonText: "取消",
|
|
242
|
|
- type: "warning",
|
|
|
248
|
+ this.$confirm('您确定退出吗?', '提示', {
|
|
|
249
|
+ confirmButtonText: '确定',
|
|
|
250
|
+ cancelButtonText: '取消',
|
|
|
251
|
+ type: 'warning'
|
|
243
|
252
|
})
|
|
244
|
253
|
.then(() => {
|
|
245
|
|
- this.isDisable = false;
|
|
246
|
|
- this.loginout();
|
|
247
|
|
- this.signOut(); // 签出
|
|
|
254
|
+ this.isDisable = false
|
|
|
255
|
+ this.loginout()
|
|
|
256
|
+ this.signOut() // 签出
|
|
248
|
257
|
})
|
|
249
|
258
|
.catch(() => {
|
|
250
|
259
|
this.$message({
|
|
251
|
|
- type: "info",
|
|
252
|
|
- message: "已取消",
|
|
253
|
|
- });
|
|
254
|
|
- });
|
|
|
260
|
+ type: 'info',
|
|
|
261
|
+ message: '已取消'
|
|
|
262
|
+ })
|
|
|
263
|
+ })
|
|
255
|
264
|
},
|
|
256
|
265
|
loginout() {
|
|
257
|
266
|
const params = {
|
|
258
|
|
- token: localStorage.getItem("Admin-Token").split(" ")[1],
|
|
259
|
|
- };
|
|
|
267
|
+ token: localStorage.getItem('Admin-Token').split(' ')[1]
|
|
|
268
|
+ }
|
|
260
|
269
|
return new Promise((resolve, reject) => {
|
|
261
|
270
|
getLogout(params)
|
|
262
|
271
|
.then((response) => {
|
|
263
|
|
- this.$store.dispatch("FedLogOut").then(() => {
|
|
264
|
|
- location.reload(); // 为了重新实例化vue-router对象 避免bug
|
|
265
|
|
- });
|
|
|
272
|
+ this.$store.dispatch('FedLogOut').then(() => {
|
|
|
273
|
+ location.reload() // 为了重新实例化vue-router对象 避免bug
|
|
|
274
|
+ })
|
|
266
|
275
|
})
|
|
267
|
276
|
.catch((error) => {
|
|
268
|
|
- reject(error);
|
|
269
|
|
- });
|
|
270
|
|
- });
|
|
|
277
|
+ reject(error)
|
|
|
278
|
+ })
|
|
|
279
|
+ })
|
|
271
|
280
|
},
|
|
272
|
281
|
|
|
273
|
282
|
tosend(roleid, uesrid) {
|
|
|
@@ -277,45 +286,45 @@ export default {
|
|
277
|
286
|
parent: this, // 当前的vue对象
|
|
278
|
287
|
data: {
|
|
279
|
288
|
roleid: roleid,
|
|
280
|
|
- userid: uesrid,
|
|
281
|
|
- }, // props
|
|
|
289
|
+ userid: uesrid
|
|
|
290
|
+ } // props
|
|
282
|
291
|
},
|
|
283
|
|
- area: ["50%", "70%"],
|
|
284
|
|
- title: "发送消息",
|
|
285
|
|
- });
|
|
|
292
|
+ area: ['50%', '70%'],
|
|
|
293
|
+ title: '发送消息'
|
|
|
294
|
+ })
|
|
286
|
295
|
},
|
|
287
|
296
|
sendMsg() {
|
|
288
|
297
|
this.$layer.iframe({
|
|
289
|
298
|
content: {
|
|
290
|
299
|
content: sendMsg, // 传递的组件对象
|
|
291
|
300
|
parent: this, // 当前的vue对象
|
|
292
|
|
- data: {}, // props
|
|
|
301
|
+ data: {} // props
|
|
293
|
302
|
},
|
|
294
|
|
- area: ["50%", "70%"],
|
|
295
|
|
- title: "发送消息",
|
|
296
|
|
- });
|
|
|
303
|
+ area: ['50%', '70%'],
|
|
|
304
|
+ title: '发送消息'
|
|
|
305
|
+ })
|
|
297
|
306
|
},
|
|
298
|
307
|
onedit() {
|
|
299
|
308
|
this.$layer.iframe({
|
|
300
|
309
|
content: {
|
|
301
|
310
|
content: permsgEdit, // 传递的组件对象
|
|
302
|
311
|
parent: this, // 当前的vue对象
|
|
303
|
|
- data: {}, // props
|
|
|
312
|
+ data: {} // props
|
|
304
|
313
|
},
|
|
305
|
|
- area: ["50%", "70%"],
|
|
306
|
|
- title: "个人中心",
|
|
307
|
|
- });
|
|
|
314
|
+ area: ['50%', '70%'],
|
|
|
315
|
+ title: '个人中心'
|
|
|
316
|
+ })
|
|
308
|
317
|
},
|
|
309
|
318
|
// 签出
|
|
310
|
319
|
signOut() {
|
|
311
|
|
- store.dispatch("UpdateCalloutScreen", false);
|
|
|
320
|
+ store.dispatch('UpdateCalloutScreen', false)
|
|
312
|
321
|
},
|
|
313
|
322
|
// 从子组件获取的 消息数量值
|
|
314
|
323
|
getTopNoticeNum(value) {
|
|
315
|
|
- this.topNoticeNum = value.num;
|
|
316
|
|
- },
|
|
317
|
|
- },
|
|
318
|
|
-};
|
|
|
324
|
+ this.topNoticeNum = value.num
|
|
|
325
|
+ }
|
|
|
326
|
+ }
|
|
|
327
|
+}
|
|
319
|
328
|
</script>
|
|
320
|
329
|
|
|
321
|
330
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
@@ -453,8 +462,8 @@ export default {
|
|
453
|
462
|
}
|
|
454
|
463
|
|
|
455
|
464
|
.close {
|
|
456
|
|
- width: 60px;
|
|
457
|
|
- right: 60px;
|
|
|
465
|
+ width: 120px;
|
|
|
466
|
+ right: 40px;
|
|
458
|
467
|
cursor: pointer;
|
|
459
|
468
|
|
|
460
|
469
|
span {
|