587 lines
18 KiB
Vue
587 lines
18 KiB
Vue
<template>
|
||
<div>
|
||
<div class="layout-header-wrap flex-row">
|
||
<div class="layou-header-left-box flex-row align-items-center" style="width: 300px;">
|
||
<div class="flex-row">
|
||
<img src="../../../assets/image/header-logo1.png" height="30" alt="">
|
||
<span class="f20 color-fff ml-8">金桥云调</span>
|
||
</div>
|
||
<el-divider direction="vertical"></el-divider>
|
||
<span class="f20 color-fff ">互联网人民调解</span>
|
||
|
||
</div>
|
||
<div class="layou-header-left-box flex-row align-items-center">
|
||
<SideMenu/>
|
||
</div>
|
||
|
||
<div class="flex-row align-items-center">
|
||
<!-- <el-badge :value="1" :max="99" class="item">
|
||
<el-avatar size="medium" icon="el-icon-user-solid"></el-avatar>
|
||
</el-badge> -->
|
||
<div class="mr-16 cursor-pointer flex-row-center align-items-center" @mouseover="showInfo=true">
|
||
<el-avatar size="medium" :src="userInfo.headUrl?userInfo.headUrl:defaultHeadUrl" ></el-avatar>
|
||
<span class="f16 color-fff ml-16">{{ userInfo.realName || userInfo.showName || '-' }}</span>
|
||
</div>
|
||
<div v-if="agent" class="cursor-pointer border-radius-8 p-8-16" style="background-color:#00000010 ;">
|
||
<el-dropdown @command="handleCommand">
|
||
<div class="flex-row align-items-center">
|
||
<img :src="require(`@/assets/image/${agentStatus}.png`)" alt="" class="mr-8">
|
||
<span class="el-dropdown-link" style="color: white;">
|
||
{{agentStatusName}}<i class="el-icon-arrow-down el-icon--right"></i>
|
||
</span>
|
||
</div>
|
||
<el-dropdown-menu slot="dropdown">
|
||
<el-dropdown-item command="free">
|
||
空闲
|
||
</el-dropdown-item>
|
||
<!-- <el-dropdown-item command="busy">
|
||
忙碌
|
||
</el-dropdown-item> -->
|
||
<el-dropdown-item command="arrange">
|
||
话后整理
|
||
</el-dropdown-item>
|
||
<el-dropdown-item command="notReady">
|
||
示忙
|
||
</el-dropdown-item>
|
||
<el-dropdown-item command="rest">
|
||
小休
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<div v-show="showInfo">
|
||
<el-collapse-transition>
|
||
<div class="show-info-wrap border-radius-8" @mouseleave="showInfo=false">
|
||
<div class="flex-row align-items-center show-info-header">
|
||
<el-avatar :size="56" :src="userInfo.headUrl?userInfo.headUrl:defaultHeadUrl"></el-avatar>
|
||
<div class="ml-8 f14">
|
||
<div class="f18 color-text-primary pb-8">{{ userInfo.realName || userInfo.showName || '-' }}</div>
|
||
<div class="f14 color-text-regular">{{ userInfo.phone || '-' }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-row justify-content-between align-items-center border-t-solid-lighter-1 p-16 cursor-pointer"
|
||
@click="handleChangePassword">
|
||
<div class="f16 color-text-regular">密码管理</div>
|
||
<div class="f16 color-text-secondary">修改密码<i class="el-icon-arrow-right"></i></div>
|
||
</div>
|
||
<div class="flex-row justify-content-between align-items-center border-t-solid-lighter-1 p-16 cursor-pointer"
|
||
@click="handleChangePersonal">
|
||
<div class="f16 color-text-regular">个人信息</div>
|
||
<div class="f16 color-text-secondary">查看信息<i class="el-icon-arrow-right"></i></div>
|
||
</div>
|
||
|
||
<div class="border-t-solid-lighter-1 p-16 f16 color-1960F4 text-center cursor-pointer"
|
||
@click="handleLoginOut()">退出登录
|
||
</div>
|
||
</div>
|
||
</el-collapse-transition>
|
||
</div>
|
||
|
||
|
||
<!-- 修改密码弹框 -->
|
||
<el-dialog
|
||
title="修改密码"
|
||
:visible="changePasswordVisible"
|
||
width="30%"
|
||
:before-close="handleClose"
|
||
>
|
||
<div class="p-16">
|
||
<el-form ref="ruleForm"
|
||
:model="passwordInfo"
|
||
:rules="rulesClient"
|
||
label-width="80px"
|
||
class="demo-ruleForm">
|
||
<el-row type="flex" align="middle">
|
||
<el-col :span="24">
|
||
<el-form-item label="旧密码" prop="oldPwd">
|
||
<el-input
|
||
v-model.trim="passwordInfo.oldPwd"
|
||
placeholder="请输入旧密码"
|
||
clearable
|
||
maxlength="18"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row type="flex" align="middle">
|
||
<el-col :span="24">
|
||
<el-form-item label="新密码" prop="pwd">
|
||
<el-input
|
||
v-model.trim="passwordInfo.pwd"
|
||
placeholder="请输入新密码"
|
||
clearable
|
||
maxlength="18"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row type="flex" align="middle">
|
||
<el-col :span="24">
|
||
<el-form-item label="确认密码" prop="confirmPwd">
|
||
<el-input
|
||
v-model.trim="passwordInfo.confirmPwd"
|
||
placeholder="请再次输入新密码"
|
||
clearable
|
||
maxlength="18"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="handleSubmit()">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<!-- 个人信息 -->
|
||
<el-dialog
|
||
title="个人信息"
|
||
:visible="changePersonalVisible"
|
||
width="30%"
|
||
:before-close="handleClose"
|
||
>
|
||
<div class="p-16">
|
||
<el-form ref="ruleInfoForm"
|
||
:model="PersonalInfo"
|
||
:rules="rulesInfoClient"
|
||
label-width="80px"
|
||
class="demo-ruleForm">
|
||
<el-row type="flex" align="middle">
|
||
<el-col :span="24">
|
||
<el-form-item label="姓名">
|
||
<el-input
|
||
v-model.trim="PersonalInfo.realName"
|
||
disabled
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row type="flex" align="middle">
|
||
<el-col :span="24">
|
||
<el-form-item label="证件号码">
|
||
<el-input
|
||
v-model.trim="PersonalInfo.pwd"
|
||
disabled
|
||
maxlength="18"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row type="flex" align="middle">
|
||
<el-col :span="24">
|
||
<el-form-item label="手机号码" prop="phone">
|
||
<el-input
|
||
v-model.trim="PersonalInfo.phone"
|
||
placeholder="请输入手机号码"
|
||
clearable
|
||
maxlength="11"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row type="flex" align="middle">
|
||
<el-col :span="24">
|
||
<el-form-item label="回呼电话" prop="replyPhone">
|
||
<el-input
|
||
v-model.trim="PersonalInfo.replyPhone"
|
||
placeholder="请输入回呼电话"
|
||
clearable
|
||
maxlength="11"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row type="flex" align="middle">
|
||
<el-col :span="8">
|
||
<el-form-item v-if="PersonalInfo.signPic !=''" label="个人签名">
|
||
<img :src="PersonalInfo.signPic" width="125px" height="125px"/>
|
||
<br>
|
||
<span class="cursor-pointer color-86909C" @click="PersonalInfo.signPic = ''"><i class="el-icon-refresh"></i> 重新签名</span>
|
||
</el-form-item>
|
||
<el-form-item v-else label="个人签名">
|
||
<img :src="signUrl" width="125px" height="125px"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col v-if="PersonalInfo.signPic ==''" :span="16" class="line-height-10 color-86909C pl-16 line-height-20" >
|
||
请使用微信扫码，完成签字及刷脸认证！<br>
|
||
注：请保证个人信息中的姓名及身份证号信息是本人的真实信息。
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="handlePersonalSubmit()">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
<script>
|
||
import api from "@/services/systemManage";
|
||
import {mapState} from 'vuex'
|
||
export default {
|
||
components: {
|
||
SideMenu: () => import('./SideMenu'),
|
||
},
|
||
data() {
|
||
var validatePass = (rule, value, callback) => {
|
||
if (value === '') {
|
||
callback(new Error('请输入密码'));
|
||
} else {
|
||
if (this.passwordInfo.confirmPwd !== '') {
|
||
this.$refs.ruleForm.validateField('confirmPwd');
|
||
}
|
||
callback();
|
||
}
|
||
};
|
||
var validatePass2 = (rule, value, callback) => {
|
||
if (value === '') {
|
||
callback(new Error('请再次输入密码'));
|
||
} else if (value !== this.passwordInfo.pwd) {
|
||
callback(new Error('两次输入密码不一致!'));
|
||
} else {
|
||
callback();
|
||
}
|
||
};
|
||
return {
|
||
showInfo: false,
|
||
changePasswordVisible: false,
|
||
changePersonalVisible: false,
|
||
strKey: 'trydotec',
|
||
passwordInfo: {
|
||
oldPwd: '',//旧密码
|
||
pwd: '',//新密码
|
||
confirmPwd: '',//再次
|
||
},
|
||
PersonalInfo: {
|
||
realName: '',
|
||
phone: '',
|
||
id: '',
|
||
signPic: '',
|
||
replyPhone: '',
|
||
cardNo: '',
|
||
roleIds: []
|
||
},
|
||
signUrl: '',
|
||
rulesClient: {
|
||
oldPwd: [
|
||
{required: true, message: '请输入旧密码', trigger: 'change',},
|
||
],
|
||
pwd: [
|
||
{required: true, validator: validatePass, trigger: 'change',},
|
||
{
|
||
pattern: /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[\W_]).{6,18}$/,
|
||
message: '只能输入由6-18个字母、数字、下划线组成的密码',
|
||
trigger: ['blur', 'change']
|
||
}
|
||
],
|
||
confirmPwd: [
|
||
{required: true, validator: validatePass2, trigger: 'change',},
|
||
],
|
||
},
|
||
rulesInfoClient: {
|
||
phone: [
|
||
{ required: false, message: '请输入手机号码', trigger: 'change',},
|
||
{ pattern: /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})|(19[0-9]{9})$/, message: '请输入正确的手机号码', trigger: ['blur', 'change']}
|
||
],
|
||
replyPhone: [
|
||
{ required: false, message: '请输入手机号码', trigger: 'change',},
|
||
{ pattern: /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})|(19[0-9]{9})$/, message: '请输入正确的手机号码', trigger: ['blur', 'change']}
|
||
],
|
||
},
|
||
userInfo: {},
|
||
defaultHeadUrl: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',//默认图片
|
||
|
||
agentStatus: 'free',
|
||
agentStatusName: '空闲',
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
agent: state => state.agent
|
||
}),
|
||
},
|
||
mounted() {
|
||
if (JSON.parse(sessionStorage.getItem('userInfo'))) {
|
||
this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
|
||
}
|
||
// console.log('获取当前登录人的信息',this.userInfo)
|
||
// console.log(this.userInfo.showName)
|
||
console.log('判断是否绑定坐席agent',this.agent)
|
||
if (this.agent) {
|
||
setTimeout(() => {
|
||
window.tccc.Agent.online().then(res => {
|
||
console.log('坐席上线', res)
|
||
// this.getStatus()
|
||
})
|
||
}, 2000)
|
||
}
|
||
},
|
||
methods: {
|
||
// 个人信息
|
||
handleChangePersonal() {
|
||
api.getUserById({id: this.userInfo.id}).then(async res => {
|
||
this.PersonalInfo.id = res.id
|
||
this.PersonalInfo.realName = res.realName
|
||
// this.PersonalInfo.realName = res.realName
|
||
this.PersonalInfo.phone = res.phone
|
||
|
||
// this.PersonalInfo.signPic = res.signPic
|
||
if(res.signPic != ''&& res.signPic != null){
|
||
this.PersonalInfo.signPic = await this.$fetchApi.viewFullFile({path: res.signPic})
|
||
}
|
||
// obj.previewUrl = await this.$fetchApi.viewFullFile({path: item.url})
|
||
|
||
this.PersonalInfo.replyPhone = res.replyPhone
|
||
this.PersonalInfo.cardNo = res.cardNo
|
||
|
||
this.PersonalInfo.deptId = res.deptId
|
||
this.PersonalInfo.roleIds = res.roleIds
|
||
})
|
||
api.getQrCode().then(res => {
|
||
this.signUrl = 'data:image/jpg;base64,' + res
|
||
})
|
||
|
||
this.changePersonalVisible = true
|
||
this.showInfo = false
|
||
},
|
||
handlePersonalSubmit() {
|
||
this.$refs.ruleInfoForm.validate((valid) => {
|
||
if (valid) {
|
||
api.updateUserById(this.PersonalInfo).then(res => {
|
||
this.$message.success("修改成功")
|
||
this.handleClose()
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 修改密码
|
||
handleChangePassword() {
|
||
this.changePasswordVisible = true
|
||
this.showInfo = false
|
||
for (let key in this.passwordInfo) {
|
||
this.passwordInfo[key] = ''
|
||
}
|
||
},
|
||
// 确定
|
||
handleSubmit() {
|
||
this.$refs.ruleForm.validate((valid) => {
|
||
if (valid) {
|
||
|
||
// let data = {
|
||
// id:this.userInfo.id,
|
||
// ...this.passwordInfo
|
||
// }
|
||
|
||
let data = {
|
||
id: this.userInfo.id,
|
||
oldPwd: this.$util.encryptByDES(this.strKey, this.passwordInfo.oldPwd),
|
||
pwd: this.passwordInfo.pwd,
|
||
confirmPwd: this.passwordInfo.confirmPwd,
|
||
}
|
||
|
||
console.log('修改密码数据===', data)
|
||
this.$fetchApi.updatePassword(data).then(res => {
|
||
this.$message.success("修改成功")
|
||
this.handleClose()
|
||
})
|
||
}
|
||
})
|
||
|
||
|
||
},
|
||
async handleCommand(command) {
|
||
console.log(command)
|
||
if (this.agentStatus === command) {
|
||
return
|
||
}
|
||
try {
|
||
let res = await window.tccc.Agent.setStatus({status: command})
|
||
console.log('设置座席状态:', res)
|
||
this.agentStatus = command
|
||
if (command === 'free') {
|
||
this.agentStatusName = '空闲'
|
||
} else if (command === 'arrange') {
|
||
this.agentStatusName = '话后整理'
|
||
} else if (command === 'notReady') {
|
||
this.agentStatusName = '示忙'
|
||
} else if (command === 'rest') {
|
||
this.agentStatusName = '小休'
|
||
}
|
||
} catch (error) {
|
||
this.$message.error('设置座席状态失败' + error.message)
|
||
console.log('设置座席状态失败',error.message)
|
||
}
|
||
},
|
||
// 关闭
|
||
handleClose() {
|
||
this.changePasswordVisible = false
|
||
this.changePersonalVisible = false
|
||
},
|
||
// 退出登录
|
||
handleLoginOut() {
|
||
// token注销失效
|
||
this.$fetchApi.logout().then(res => {
|
||
// if(!res.code){
|
||
this.$router.push('/login')
|
||
sessionStorage.removeItem('token');
|
||
this.$store.commit('setToken', '');
|
||
sessionStorage.removeItem('userInfo')
|
||
this.$store.commit('setUserInfo', '');
|
||
this.$store.commit('setRoutes', '');
|
||
sessionStorage.removeItem('brokerEndpoint');
|
||
this.$store.commit('brokerEndpoint', '');
|
||
// }
|
||
|
||
})
|
||
},
|
||
// 获取座席状态
|
||
async getStatus() {
|
||
console.log('进入获取座席状态')
|
||
try {
|
||
let res = await window.tccc.Agent.getStatus()
|
||
console.log('获取座席状态:', res)
|
||
} catch (error) {
|
||
this.$message.error('获取座席状态失败' + error.message)
|
||
console.log('获取座席状态失败',error.message)
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
.layout-header-wrap {
|
||
width: 100%;
|
||
height: $height56;
|
||
display: flex;
|
||
padding: 0 $size24;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
// background: url('~@/assets/image/header-bg-1920.png') no-repeat ;
|
||
background-size: cover;
|
||
background-color: #C66A5B;
|
||
|
||
.el-badge__content {
|
||
height: $height20;
|
||
line-height: $height20;
|
||
border: 0 !important;
|
||
top: 30px;
|
||
}
|
||
|
||
.layou-header-right-box {
|
||
width: 300px;
|
||
display: inline-block;
|
||
text-align: right;
|
||
}
|
||
|
||
.layout-side-menu-wrap .side-menu-container {
|
||
border-right: 0;
|
||
}
|
||
|
||
.el-menu {
|
||
border: 0;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.el-menu--horizontal > .el-menu-item {
|
||
color: #FFFFFFB2;
|
||
}
|
||
|
||
.el-menu--horizontal > .el-submenu .el-submenu__title {
|
||
color: #FFFFFFB2;
|
||
}
|
||
|
||
.el-menu--horizontal > .el-menu-item:hover {
|
||
color: #C66A5B;
|
||
background-color: transparent;
|
||
color: #fff;
|
||
}
|
||
|
||
.el-menu--horizontal > .el-submenu:hover .el-submenu__title {
|
||
color: #C66A5B;
|
||
background-color: transparent;
|
||
color: #fff;
|
||
}
|
||
|
||
.el-submenu__title i {
|
||
color: #FFFFFFB2;
|
||
}
|
||
|
||
.el-menu--horizontal > .el-menu-item.is-active {
|
||
border-bottom: 2px solid #fff;
|
||
background-color: transparent;
|
||
color: #fff;
|
||
}
|
||
|
||
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
|
||
border-bottom: 2px solid #fff;
|
||
background-color: transparent;
|
||
color: #fff;
|
||
}
|
||
|
||
}
|
||
|
||
.el-menu--horizontal .el-menu.el-menu--popup .el-menu-item:not(.is-disabled):hover {
|
||
color: #C66A5B;
|
||
}
|
||
|
||
.el-menu--horizontal .el-menu .el-menu-item.is-active, .el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
|
||
color: #C66A5B;
|
||
}
|
||
|
||
.layout-header-number {
|
||
position: absolute;
|
||
right: -10px;
|
||
bottom: -4px;
|
||
min-width: $height20;
|
||
height: $height20;
|
||
border-radius: 50%;
|
||
background-color: $color-F56C6C;
|
||
color: $color-white;
|
||
line-height: $height20;
|
||
white-space: nowrap;
|
||
box-sizing: border-box;
|
||
padding: 1px 5px;
|
||
}
|
||
|
||
.show-info-wrap {
|
||
position: absolute;
|
||
width: 320px;
|
||
// height: 248px;
|
||
background-color: $color-white;
|
||
top: 8px;
|
||
right: 16px;
|
||
border: 1px solid $border-color-lighter;
|
||
z-index: 999;
|
||
box-shadow: 2px 2px 5px $border-color-lighter;
|
||
transition: opacity 2s;
|
||
|
||
.show-info-header {
|
||
padding: 40px 16px;
|
||
}
|
||
}
|
||
|
||
// 修改图标样式
|
||
.el-icon-caret-bottom {
|
||
font-size: 30px;
|
||
color: $color-text-placeholder;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 在小于或等于 1440 像素的屏幕上 */
|
||
@media screen and (max-width: 1440px) {
|
||
.layout-header-wrap {
|
||
background: url('~@/assets/image/header-bg-1440.png') no-repeat;
|
||
background-size: cover;
|
||
}
|
||
}
|
||
|
||
</style> |