Commit 8a5bcc56 authored by zhengke's avatar zhengke

增加修改个人信息

parent 3165615b
......@@ -173,7 +173,7 @@ export default {
}
</script>
<style>
@import "//at.alicdn.com/t/font_635492_04cmbkb1wq28.css";
@import "//at.alicdn.com/t/font_635492_3v2juwulgcc.css";
@import "./assets/css/Semibold.css";
@import "./assets/css/global/config.css";
@import "./assets/css/fileIcon.css";
......
<style>
.Person_Content{
/* width:100%; */
height:96%;
margin:18px;
overflow: hidden;
}
.PerSon_LeftNav{
width:418px;
height:91%;
position: fixed;
background-color: #fff;
display: inline-block;
}
.Person_Right{
margin-left:440px;
width:100%;
height:100%;
background-color: #fff;
}
.PerSon_Edit{
text-align: right;
width:100%;
color:#BBBBBB;
font-size:12px;
padding:30px;
}
.PerSon_Edit span{
cursor: pointer;
}
.PerSon_Edit i{
font-size:12px;
}
.Person_Header{
width:120px;
height:120px;
margin:39px auto;
border:1px solid #F4F4F4;
padding:3px;
}
.Person_Header img{
width:100%;
height:100%;
}
.Person_ComCenter{
width:100%;
font-size:14px;
color:#333333;
text-align: center;
}
.Person_MenuList{
margin-top:60px;
}
.Person_MenuList li{
list-style-type: none;
width:100%;
height:54px;
padding:0 30px;
display: flex;
align-items: center;
border-bottom:1px solid #F3F3F3;
}
.Person_MenuList li .Person_Pname{
display: flex;
align-items: center;
width:26%;
height:100%;
font-size:12px;
color:#999999;
}
.Person_Jobs{
display: inline-block;
padding:5px 8px;
background-color: #007EFF;
color:#fff;
font-size:12px;
border-radius:8px;
margin-left:10px;
}
.Person_Company{
color:#333333;
font-size:14px;
display: inline-block;
}
.Person_Wrong{
color:#999999;
font-size:12px;
text-align: right;
}
.Person_CenterList{
display: inline-block;
width:72%;
font-size:14px;
}
.Per_Jiantou i{
font-size:12px;
color:#999999;
}
.Person_menuCked li:hover{
cursor: pointer;
background-color: #F1F8FF;
}
.P_cked{
background-color: #F1F8FF;
}
.Shouji_Top{
width:100%;
height:54px;
line-height: 54px;
padding:0 30px;
font-size:14px;
color:#333333;
border-bottom:1px solid #F3F3F3;
}
.Shouji_Conteng{
margin:70px 0 0 120px;
}
.phone_commonBotm{
width:400px;
position:relative;
}
.phone_commonBotm .input{
width:400px;
height:44px;
outline:none;
padding-left: 17px;
border:none;
border: 1px solid #DCDFE6;
}
.phone_commonBotm .input::-webkit-input-placeholder{
color: #D3D6DC;
}
.phone_commonBotm .validatCode {
position: absolute;
right: 10px;
top: 16px;
height:12px;
line-height: 12px;
padding-left: 10px;
color: #007EFF;
font-size: 12px;
letter-spacing: 2px;
border-left: 1px solid #DCDFE6;
}
.phone_bangding{
color:#333333;
margin:0 0 29px 100px;
font-size:16px;
}
.phone_bangding span{
margin-left:21px;
}
.Shouji_Conteng .el-input .el-input__inner{
height:44px;
}
.PI_qiehuan{
font-size:14px;
color:#333333;
}
.PI_comMoshi{
color:#999999
}
.PI_QiehuanImg{
width:370px;
height:174px;
margin-top:18px;
cursor: pointer;
margin-left:20px;
border:4px solid #fff;
}
.ckedQieImg{
border:4px solid #007EFF;
}
.PI_QiehuanImg img{
width:100%;
height:100%;
}
.Account_NumList{
margin-top:68px;
min-height: 80px;
margin:0 30px;
border-bottom: 1px dashed #BBBBBB;
}
.Account_NumList table{
padding:30px 0 30px 160px;
font-size:16px;
}
.Account_NumList table td{
height:30px;
}
.AC_bankName{
color:#333333;
font-weight: bold;
margin-right:11px;
}
.AC_jeibang{
width:80px;
text-align: right;
color:#999999;
font-size:12px;
}
.bank_Count{
position: absolute;
display: inline-block;
width:14px;
height:14px;
background-color: #007EFF;
color:#fff;
border-radius: 50%;
right:25px;
line-height: 14px;
text-align: center;
top:20px;
}
.bind_Imidetly{
color: rgb(0, 126, 255);
cursor: pointer;
display: inline-block;
width: 70%;
font-size: 14px;
}
.addAccountTitle{
margin:0 0 20px 97px;
font-size:14px;
}
.Person_Content .FPF_s{
cursor: pointer;
}
#demo #button {
position: absolute;
right: 10px;
width: 80px;
height: 40px;
border:none;
cursor: pointer;
color:#fff;
border-radius: 5px;
background:#E95252;
}
#demo .show {
width: 100px;
height: 100px;
overflow: hidden;
position: relative;
border-radius: 50%;
border: 1px solid #d5d5d5;
}
#demo .picture {
width: 100%;
height: 100%;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
#demo .container {
z-index: 9999999;
position: fixed;
padding-top: 60px;
left: 0;
top: 0;
right: 0;
bottom: 0;
background:rgba(0,0,0,0.4);
}
#demo #image {
max-width: 100%;
}
.cropper-view-box,.cropper-face {
border-radius: 50%;
}
/*!
* Cropper.js v1.0.0-rc
* https://github.com/fengyuanchen/cropperjs
*
* Copyright (c) 2017 Fengyuan Chen
* Released under the MIT license
*
* Date: 2017-03-25T12:02:21.062Z
*/
.cropper-container {
font-size: 0;
line-height: 0;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
direction: ltr;
-ms-touch-action: none;
touch-action: none
}
.cropper-container img {
/* Avoid margin top issue (Occur only when margin-top <= -height) */
display: block;
min-width: 0 !important;
max-width: none !important;
min-height: 0 !important;
max-height: none !important;
width: 100%;
height: 100%;
image-orientation: 0deg
}
.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.cropper-wrap-box {
overflow: hidden;
}
.cropper-drag-box {
opacity: 0;
}
.cropper-modal {
opacity: .5;
}
.cropper-view-box {
display: block;
overflow: hidden;
width: 100%;
height: 100%;
outline: 1px solid #e95252;
outline-color: #e95252;
}
.cropper-dashed {
position: absolute;
display: block;
opacity: .5;
border: 0 dashed #e95252
}
.cropper-dashed.dashed-h {
top: 33.33333%;
left: 0;
width: 100%;
height: 33.33333%;
border-top-width: 1px;
border-bottom-width: 1px
}
.cropper-dashed.dashed-v {
top: 0;
left: 33.33333%;
width: 33.33333%;
height: 100%;
border-right-width: 1px;
border-left-width: 1px
}
.cropper-center {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 0;
height: 0;
opacity: .75
}
.cropper-center:before,
.cropper-center:after {
position: absolute;
display: block;
content: ' ';
}
.cropper-center:before {
top: 0;
left: -3px;
width: 7px;
height: 1px
}
.cropper-center:after {
top: -3px;
left: 0;
width: 1px;
height: 7px
}
.cropper-face,
.cropper-line,
.cropper-point {
position: absolute;
display: block;
width: 100%;
height: 100%;
opacity: .1;
}
.cropper-face {
top: 0;
left: 0;
}
.cropper-line.line-e {
top: 0;
right: -3px;
width: 5px;
cursor: e-resize
}
.cropper-line.line-n {
top: -3px;
left: 0;
height: 5px;
cursor: n-resize
}
.cropper-line.line-w {
top: 0;
left: -3px;
width: 5px;
cursor: w-resize
}
.cropper-line.line-s {
bottom: -3px;
left: 0;
height: 5px;
cursor: s-resize
}
.cropper-point {
width: 5px;
height: 5px;
opacity: .75;
}
.cropper-point.point-e {
top: 50%;
right: -3px;
margin-top: -3px;
cursor: e-resize
}
.cropper-point.point-n {
top: -3px;
left: 50%;
margin-left: -3px;
cursor: n-resize
}
.cropper-point.point-w {
top: 50%;
left: -3px;
margin-top: -3px;
cursor: w-resize
}
.cropper-point.point-s {
bottom: -3px;
left: 50%;
margin-left: -3px;
cursor: s-resize
}
.cropper-point.point-ne {
top: -3px;
right: -3px;
cursor: ne-resize
}
.cropper-point.point-nw {
top: -3px;
left: -3px;
cursor: nw-resize
}
.cropper-point.point-sw {
bottom: -3px;
left: -3px;
cursor: sw-resize
}
.cropper-point.point-se {
right: -3px;
bottom: -3px;
width: 20px;
height: 20px;
cursor: se-resize;
opacity: 1
}
@media (min-width: 768px) {
.cropper-point.point-se {
width: 15px;
height: 15px
}
}
@media (min-width: 992px) {
.cropper-point.point-se {
width: 10px;
height: 10px
}
}
@media (min-width: 1200px) {
.cropper-point.point-se {
width: 5px;
height: 5px;
opacity: .75
}
}
.cropper-point.point-se:before {
position: absolute;
right: -50%;
bottom: -50%;
display: block;
width: 200%;
height: 200%;
content: ' ';
opacity: 0;
}
.cropper-invisible {
opacity: 0;
}
.cropper-hide {
position: absolute;
display: block;
width: 0;
height: 0;
}
.cropper-hidden {
display: none !important;
}
.cropper-move {
cursor: move;
}
.cropper-crop {
cursor: crosshair;
}
.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
cursor: not-allowed;
}
.a-upload {
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1
}
.a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
</style>
<template>
<div class="Person_Content">
<div class="PerSon_LeftNav">
<div class="PerSon_Edit">
<a href="javascript:;" class="a-upload">
<i class="iconfont icon-Edit"></i>&nbsp;&nbsp;修改头像</span>
<input type="file" id="change" accept="image" @change="change">
</a>
</div>
<div class="Person_Header">
<img v-if="dataList.EmPhoto" :src="dataList.EmPhoto" alt/>
<img v-else src="../assets/img/default_head_img.jpg" alt/>
</div>
<div class="Person_ComCenter" style="margin-bottom:14px;">
{{dataList.EmName}}
</div>
<div class="Person_ComCenter">
<i class="iconfont icon-dianhua"></i>&nbsp;&nbsp;{{dataList.EmLoginMobile}}
</div>
<ul class="Person_MenuList">
<li>
<span class="Person_Pname">部门</span>
<span class="Person_Company">
{{companyName}}
<span class="Person_Jobs" v-if="Gangwei">{{Gangwei}}</span>
</span>
</li>
<li>
<span class="Person_Pname">用户名</span>
<span class="Person_Company" style="width:43%;">{{dataList.EmName}}</span>
<span class="Person_Wrong">如有错误请联系行政</span>
</li>
</ul>
<ul class="Person_MenuList Person_menuCked" style="margin-top:0;">
<li @click="ckedNum=1,resetPhoneNum()" :class="{'P_cked':ckedNum==1}">
<span class="Person_Pname">绑定手机</span>
<span class="Person_CenterList">
{{getBangding(dataList.EmLoginMobile)}}
</span>
<span class="Per_Jiantou">
<i class="iconfont icon-jiantouyou1"></i>
</span>
</li>
<li @click="ckedNum=2" :class="{'P_cked':ckedNum==2}">
<span class="Person_Pname">密码</span>
<span class="Person_CenterList">
******
</span>
<span class="Per_Jiantou">
<i class="iconfont icon-jiantouyou1"></i>
</span>
</li>
<li @click="ckedNum=3" :class="{'P_cked':ckedNum==3}">
<span class="Person_Pname" style="position:relative;">
银行账户
<span class="bank_Count">{{AccCount}}</span>
</span>
<span v-if="AccCount==0" class="bind_Imidetly">
立即绑定
</span>
<span v-else class="Person_CenterList">
{{AccDataList.BankName}}
<span style="margin-left:10px;">{{getBankNum(AccDataList.CardNum)}}</span>
</span>
<span class="Per_Jiantou">
<i class="iconfont icon-jiantouyou1"></i>
</span>
</li>
<li @click="ckedNum=4" :class="{'P_cked':ckedNum==4}">
<span class="Person_Pname">页面切换方式</span>
<span class="Person_CenterList" v-if="openMode==1">
单页面多标签模式
</span>
<span class="Person_CenterList" v-else>
多页面单标签模式
</span>
<span class="Per_Jiantou">
<i class="iconfont icon-jiantouyou1"></i>
</span>
</li>
</ul>
</div>
<div class="Person_Right">
<!-- 绑定手机号 -->
<div class="Per_Shouji" v-if="ckedNum==1">
<div class="Shouji_Top">绑定手机</div>
<div class="Shouji_Conteng">
<div class="phone_bangding" v-if="dataList.EmLoginMobile">
已绑定手机号 <span>{{getBangding(dataList.EmLoginMobile)}}</span>
</div>
<el-form :model="phoneMsg" ref="phoneMsg" label-position="right" :rules="rules" label-width="100px">
<el-form-item label="新手机号" prop="LoginMobile" style="margin-bottom:40px;">
<div class="phone_commonBotm">
<input class="input" maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'')" v-model="phoneMsg.LoginMobile" type="text" placeholder="11位数字"/>
<div class="validatCode">
<span v-show="showCode" @click="getCode" class="FPF_s">发送验证码</span>
<span v-show="!showCode" class="count FPF_s">{{count}}s重新获取</span>
</div>
</div>
</el-form-item>
<el-form-item label="验证码" prop="code">
<el-input v-model="phoneMsg.code" class="w150" placeholder="4位验证码" maxlength="4"></el-input>
</el-form-item>
</el-form>
<button class="normalBtn" style="margin:30px 0 0 100px;" @click="submitForm1('phoneMsg')">确定</button>
</div>
</div>
<!-- 修改密码 -->
<div class="Per_Shouji" v-if="ckedNum==2">
<div class="Shouji_Top">密码</div>
<div class="Shouji_Conteng">
<el-form :model="passWordMsg" ref="passWordMsg" label-position="right" :rules="rules2" label-width="100px">
<el-form-item v-if="sureOldPwd" label="旧密码" prop="OldPwd" style="margin-bottom:30px;">
<el-input type="password" class="w400" v-model="passWordMsg.OldPwd">
<i slot="suffix" title="显示密码" @click="changePassOld('show')" style="cursor:pointer;"
class="el-input__icon iconfont icon-yincang"></i>
</el-input>
</el-form-item>
<el-form-item v-else label="旧密码" prop="OldPwd" style="margin-bottom:30px;">
<el-input type="text" class="w400" v-model="passWordMsg.OldPwd">
<i slot="suffix" title="隐藏密码" @click="changePassOld('hide')" style="cursor:pointer;"
class="el-input__icon iconfont icon-xianshi"></i>
</el-input>
</el-form-item>
<el-form-item v-if="visible" label="新密码" style="margin-bottom:30px;" prop="Pwd">
<el-input type="password" class="w400" v-model="passWordMsg.Pwd" maxlength="6" placeholder="请输入新密码">
<i slot="suffix" title="显示密码" @click="changePass('show')" style="cursor:pointer;"
class="el-input__icon iconfont icon-yincang"></i>
</el-input>
</el-form-item>
<el-form-item v-else label="新密码" style="margin-bottom:30px;" prop="Pwd">
<el-input type="text" class="w400" v-model="passWordMsg.Pwd" maxlength="6" placeholder="请输入新密码">
<i slot="suffix" title="隐藏密码" @click="changePass('hide')" style="cursor:pointer;"
class="el-input__icon iconfont icon-xianshi"></i>
</el-input>
</el-form-item>
<el-form-item v-if="SureVisible" label="确认密码" style="margin-bottom:30px;" prop="surePassword">
<el-input type="password" class="w400" v-model="passWordMsg.surePassword" maxlength="6" placeholder="请输入新密码">
<i slot="suffix" title="显示密码" @click="changePass2('show')" style="cursor:pointer;"
class="el-input__icon iconfont icon-yincang"></i>
</el-input>
</el-form-item>
<el-form-item v-else label="确认密码" style="margin-bottom:30px;" prop="surePassword">
<el-input type="text" class="w400" v-model="passWordMsg.surePassword" maxlength="6" placeholder="请输入新密码">
<i slot="suffix" title="隐藏密码" @click="changePass2('hide')" style="cursor:pointer;"
class="el-input__icon iconfont icon-xianshi"></i>
</el-input>
</el-form-item>
</el-form>
<button class="normalBtn" style="margin:30px 0 0 100px;" @click="submitForm2('passWordMsg')">确定</button>
</div>
</div>
<!-- 银行账户 -->
<div class="Per_Shouji" v-if="ckedNum==3">
<div class="Shouji_Top">银行账户</div>
<div class="Account_NumList" v-if="AcountData.length>0">
<table>
<tr v-for="(item,index) in AcountData">
<td style="width:100px">
<template v-if="index==0">银行账户</template>
</td>
<td>
<span class="AC_bankName">{{item.BankName}}</span><span>{{getBankNum(item.CardNum)}}</span>
</td>
<td class="AC_jeibang">
<span style="cursor:pointer;color:#007EFF;" v-if='item.Status==0' @click="deleteData(item.ID)">冻结</span>
<span style="cursor:pointer;color:#007EFF;" v-if='item.Status==1' @click="deleteData(item.ID)">启用</span>
</td>
</tr>
</table>
</div>
<div class="Shouji_Conteng">
<div class="addAccountTitle" v-if="AcountData.length>0">添加新银行账户</div>
<el-form :model="addAccountMsg" ref="addAccountMsg" label-position="right" :rules="rules3" label-width="100px">
<el-form-item label="账户分类" prop="oldPassword" style="margin-bottom:30px;">
<el-select v-model='addAccountMsg.AccountClassify' class="w400" placeholder="请选择" @change='changeTitle'>
<el-option label='银行' value='2' key='2'></el-option>
<el-option label='虚拟账户' value='3' key='3'></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="addAccountMsg.AccountClassify==2" label="所属机构" prop="BankName">
<el-input type="text" class="w400" v-model="addAccountMsg.BankName" placeholder="例如:中国建行"></el-input>
</el-form-item>
<el-form-item v-if='addAccountMsg.AccountClassify!=3' :label="nameA" prop="OpenBankName">
<el-input type="text" class="w400" v-model="addAccountMsg.OpenBankName" placeholder="例如:锦江支行"></el-input>
</el-form-item>
<el-form-item v-if='addAccountMsg.AccountClassify!=3' :label="nameB" prop="AccountHolder">
<el-input type="text" class="w400" v-model="addAccountMsg.AccountHolder"></el-input>
</el-form-item>
<el-form-item :label="nameC" prop="CardNum">
<el-input type="text" class="w400" v-model="addAccountMsg.CardNum" @keyup.native="resetAccountNum(addAccountMsg.CardNum)"></el-input>
</el-form-item>
<el-form-item :label="nameD" prop="AccountAlias" >
<el-input type="text" class="w400" v-model="addAccountMsg.AccountAlias"></el-input>
</el-form-item>
</el-form>
<button class="normalBtn" style="margin:30px 0 0 100px;" @click="submitForm3('addAccountMsg')">确定</button>
</div>
</div>
<!-- 页面切换方式 -->
<div class="Per_Shouji" v-if="ckedNum==4">
<div class="Shouji_Top">页面切换方式</div>
<div class="Shouji_Conteng">
<div class="phone_bangding" style="margin-left:25px;">
当前切换方式
<span style="font-weight:bold;" v-if="radio==1">单页面多标签模式</span>
<span style="font-weight:bold;" v-else>多页面单标签模式</span>
</div>
<div class="PI_qiehuan" style="margin-bottom:50px;">
<el-radio v-model="radio" label="1">单页面多标签模式<span class="PI_comMoshi">(此模式适合电脑性能高的用户)</span>
<div class="PI_QiehuanImg" :class="{'ckedQieImg':radio==1}" @click="radio=1">
<img src='../assets/img/chosen_one.png' />
</div>
</el-radio>
</div>
<div class="PI_qiehuan">
<el-radio v-model="radio" label="2">多页面单标签模式<span class="PI_comMoshi">(此模式适合电脑性能较低的用户)</span>
<div class="PI_QiehuanImg" :class="{'ckedQieImg':radio==2}" @click="radio=2">
<img src='../assets/img/chosen_two.png' />
</div>
</el-radio>
</div>
<button class="normalBtn" style="margin:30px 0 0 20px;" @click="SureType">确定</button>
</div>
</div>
</div>
<div id="demo">
<div class="container" v-show="panel">
<div style="width:400px;height:400px;margin:5% 0 0 36%;position:relative;">
<img id="image" :src="url" alt="Picture">
<button type="button" id="button" style="bottom:0;" @click="crop">确定</button>
</div>
</div>
<div style="padding:20px;">
<div class="show">
<div class="picture" :style="'backgroundImage:url('+headerImage+')'">
</div>
</div>
<div style="margin-top:20px;">
</div>
</div>
</div>
</div>
</template>
<script>
import Cropper from "cropperjs"
export default {
data() {
return {
//页面切换方式
openMode:0,
outerVisible:false,
nameA:'账户名称',
nameB:'开户人',
nameC:'卡号',
nameD:'账户别名',
//切换选项卡
ckedNum:1,
showCode:true,
count: "",
//验证码参数
phoneMsg:{
LoginMobile:'',
code:''
},
//修改密码
passWordMsg:{
OldPwd:'',
Pwd:'',
surePassword:''
},
sureOldPwd:true,
visible:true,
SureVisible:true,
//切换方式
radio:'1',
msg: {
},
rules:{
LoginMobile: [
{ required: true, message: '请输入新手机号', trigger: 'blur' }
],
code: [
{ required: true, message: '请输入验证码', trigger: 'blur' }
]
},
rules2:{
OldPwd: [
{ required: true, message: '请输入旧密码', trigger: 'blur' }
],
Pwd: [
{ required: true, message: '请输入新密码', trigger: 'blur' }
],
surePassword: [
{ required: true, message: '请输入确认密码', trigger: 'blur' }
]
},
rules3:{
BankName:[{ required: true, message: '请填写银行', trigger: 'blur' }],
AccountHolder:[{ required: true, message: '请填写开户人', trigger: 'blur' }],
OpenBankName:[{ required: true, message: '请填写账户名称', trigger: 'blur' }],
CardNum:[{ required: true, message: '请填写卡号', trigger: 'blur' }],
AccountAlias:[{ required: true, message: '请填写账户别名', trigger: 'blur' }],
},
//公司
companyName:'',
//岗位
Gangwei:'',
//获取公司参数
getCompanyMsg:{
RB_Group_Id:'2',
Status:'0',
},
//获取部门参数
getDepartmentMsg:{
RB_Group_Id:'0',
RB_Branch_Id:'-1',
Status:'0',
},
getPostMsg:{
RB_Group_Id:'0',
RB_Branch_Id:'-1',
RB_Department_Id:'0',
},
//获取银行账户参数
AccountMsg:{
BranchId:'-1',
EmpId:'-1',
BankId:'',
AccountHolder:'',
AccountAlias:'',
pageIndex:1,
pageSize:15,
Type:9,
},
AccDataList:{},
//银行所有账户
AcountData:[],
AccCount:0,
//添加银行账户参数
addAccountMsg:{
Id:'0',
ObjID:'-1',
BankId:'-1',
OpenBankName:'',
BankName: '',
AccountHolder:'',
CardNum:'',
AccountAlias:'',
AccountType:'1',
AccountClassify:'2',
Type:'9'
},
dataList:{},
headerImage:'',
picValue:'',
cropper:'',
croppable:false,
panel:false,
url:''
};
},
methods: {
//绑定手机
submitForm1(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.doBind();
} else {
}
});
},
//修改密码
submitForm2(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
this.changePwd();
} else {
}
});
},
//新增银行账户
submitForm3(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
this.addAccountNum();
} else {
}
});
},
//新增银行账户
addAccountNum(){
this.addAccountMsg.ObjID=this.dataList.EmployeeId;
if(this.addAccountMsg.AccountClassify!='3'){
if(this.addAccountMsg.OpenBankName==''){
this.Error('请填写'+this.nameA)
return
}
if(this.addAccountMsg.AccountHolder==''){
this.Error('请填写'+this.nameB)
return
}
}
if(this.addAccountMsg.CardNum==''){
this.Error('请填写'+this.nameC)
return
}
if(this.addAccountMsg.AccountAlias==''){
this.Error('请填写'+this.nameD)
return
}
this.addAccountMsg.CardNum=this.addAccountMsg.CardNum.replace(/\s+/g,"");
this.apipost("admin_post_SetEmpBankAccount",this.addAccountMsg,res=>{
if(res.data.resultCode==1)
{
this.Success(res.data.message)
this.getList()
this.resetAccountMsg();
}else{
this.Error(res.data.message)
}
},err=>{})
},
//重置信息
resetAccountMsg(){
this.addAccountMsg.OpenBankName='';
this.addAccountMsg.BankName='';
this.addAccountMsg.AccountHolder='';
this.addAccountMsg.CardNum='';
this.addAccountMsg.AccountAlias='';
},
//修改密码方法
changePwd(){
if(this.passWordMsg.Pwd!=this.passWordMsg.surePassword){
this.Error('新密码和确认密码不一致');
return;
}
this.apipost('admin_get_MySelfResetPwd',this.passWordMsg,res=>{
if(res.data.resultCode==1){
this.Success(res.data.message);
this.passWordMsg.OldPwd='';
this.passWordMsg.Pwd='';
this.passWordMsg.surePassword='';
// //修改成功后退出登录
setTimeout(()=>{
console.log('执行了');
this.$store.dispatch("logout")
localStorage.removeItem("userInfo");
localStorage.removeItem("previousPathInfo");
location.href='/'
}, 1000);
}else{
this.Error(res.data.message);
}
},err=>{})
},
//获取银行账户信息
getAccount(){
this.AccountMsg.EmpId=this.dataList.EmployeeId;
this.apipost("admin_get_GetEmpBankAccountPageList", this.AccountMsg, res => {
if(res.data.resultCode==1){
this.AcountData=res.data.data.pageData;
this.AccDataList=res.data.data.pageData[0];
this.AccCount=res.data.data.count;
}else{
this.Error(res.data.message);
}
}, err => {})
},
//获取验证码
getCode() {
var phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
//电话
var phone = this.phoneMsg.LoginMobile.replace(/^\s+|\s+$/gm, "");
if (!phoneReg.test(phone)) {
this.nameErrorMsg = "请输入有效的手机号码!";
return false;
}
const TIME_COUNT = 60;
this.phoneMsg.code = "";
if (!this.timer) {
this.count = TIME_COUNT;
this.showCode = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.showCode = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
let msg = {
mobileNumber: this.phoneMsg.LoginMobile,
mobileCodeType: 1
};
this.apipost("user_get_moblieNumber_code", msg, res => {
if (res.data.resultCode == 1) {
} else {
this.$notify.error({
title: "提示",
customClass: "msgTips",
message: res.data.message,
showClose: false,
duration: 3000
});
}
});
},
//绑定手机号
doBind() {
if (this.phoneMsg.LoginMobile == "") {
this.Error('请输入手机号');
return;
} else if (this.phoneMsg.code == "") {
this.Error('请输入验证码');
return;
}
this.apipost("admin_get_MySelfResetLoginMobile", this.phoneMsg, res => {
if (res.data.resultCode == 1) {
this.Success(res.data.message);
this.getList();
this.phoneMsg.LoginMobile='';
this.phoneMsg.code='';
} else {
this.Error(res.data.message);
}
});
},
//重置手机
resetPhoneNum(){
this.phoneMsg.LoginMobile='';
this.phoneMsg.code='';
},
changePassOld(value){
this.sureOldPwd = !(value === 'show');
},
changePass(value) {
this.visible = !(value === 'show');
}, //判断渲染,true:暗文显示,false:明文显示
changePass2(value){
this.SureVisible = !(value === 'show');
},
//获取用户信息
getList(){
let userInfo = this.getLocalStorage();
let msg={
Id:userInfo.EmployeeId
}
this.apipost('admin_get_EmployeeGet',msg,res=>{
console.log(res,'resss');
if(res.data.resultCode==1){
this.dataList=res.data.data;
this.getAccount();
}else{
this.Error(res.data.message);
}
},err=>{})
},
//获取公司
getCompany(){
this.apipost('admin_get_BranchGetList',this.getCompanyMsg,res=>{
if(res.data.resultCode==1){
let data = res.data.data;
data.forEach(x=>{
if(this.dataList.RB_Branch_id==x.Id){
this.companyName=x.BName;
}
})
}else{}
},err=>{})
},
getPost(){ //岗位
this.getPostMsg.RB_Branch_Id = this.dataList.RB_Branch_Id;
this.getPostMsg.RB_Department_Id = this.dataList.RB_Department_Id;
this.apipost('admin_get_PostGetList',this.getPostMsg,res=>{
if(res.data.resultCode==1){
let data=res.data.data;
data.forEach(x=>{
if(this.dataList.RB_Post_Id==x.PostId){
this.Gangwei = x.PostName;
}
})
}else{}
},err=>{})
},
//过滤电话号码
getBangding(val){
if(val){
return val.substr(0, 3) + "****" + val.substr(-4,4)
}
},
//过滤银行卡号
getBankNum(bankNumber){
if(bankNumber){
return bankNumber.substr(0,4)+"********"+bankNumber.substr(-4);
}
},
//冻结启用银行账户
deleteData(id){
this.$confirm('确认启用/冻结该账户信息?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.apipost('admin_post_DelEmpBankAccount', {
BAId:id
}, res => {
if(res.data.resultCode == 1) {
this.Success('保存成功!')
this.getList();
}
}, err => {})
}).catch(() => {
this.$message.info('已取消!')
});
},
changeTitle(){
if(this.addAccountMsg.AccountClassify==1){
this.nameA='平台名称'
this.nameB='用户名称'
this.nameC='平台账户'
this.nameD='账户别名'
this.addAccountMsg.AccountType='1'
}else if(this.addAccountMsg.AccountClassify==2){
this.nameA='账户名称'
this.nameB='开户人'
this.nameC='卡号'
this.nameD='账户别名'
}else{
this.nameA='平台名称'
this.nameB='用户名称'
this.nameC='平台账户'
this.nameD='账户别名'
}
},
//确认方式
SureType(){
localStorage.openMode=this.radio;
window.location.reload()
},
//重置卡号
resetAccountNum(val){
this.addAccountMsg.CardNum=this.addAccountMsg.CardNum.replace(/\s/g,'').replace(/(\d{4})(?=\d)/g,"$1 ");
},
getObjectURL (file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
},
change (e) {
let files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
this.panel = true;
this.outerVisible=true;
this.picValue = files[0];
this.url = this.getObjectURL(this.picValue);
//每次替换图片要重新得到新的url
if(this.cropper){
this.cropper.replace(this.url);
}
this.panel = true;
},
crop () {
this.panel = false;
var croppedCanvas;
var roundedCanvas;
if (!this.croppable) {
return;
}
// Crop
croppedCanvas = this.cropper.getCroppedCanvas();
console.log(this.cropper)
// Round
roundedCanvas = this.getRoundedCanvas(croppedCanvas);
this.headerImage = roundedCanvas.toDataURL();
console.log(this.headerImage,'headerImage');
let that = this;
let blob = that.base64ToBlob(this.headerImage);
let newArr = [];
newArr.push(blob);
var fileName = `${that.uuid(10,10)}.png`;
var path = `/Upload/Temporary`;
that.uploadSelfBlob(path, newArr, x => {
console.log(x);
let allPath = that.domainManager().ViittoFileUrl + x.data.FilePath;
this.postImg(allPath)
})
},
base64ToBlob(code) {
let parts = code.split(';base64,');
let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {
type: contentType
});
},
uuid(len, radix) {
let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
let uuid = [],
i;
radix = radix || chars.length;
if (len) {
// Compact form
for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
} else {
let r;
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
uuid[14] = '4';
for (i = 0; i < 36; i++) {
if (!uuid[i]) {
r = 0 | Math.random() * 16;
uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r];
}
}
}
return uuid.join('');
},
getRoundedCanvas (sourceCanvas) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var width = sourceCanvas.width;
var height = sourceCanvas.height;
canvas.width = width;
canvas.height = height;
context.imageSmoothingEnabled = true;
context.drawImage(sourceCanvas, 0, 0, width, height);
context.globalCompositeOperation = 'destination-in';
context.beginPath();
context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
context.fill();
return canvas;
},
postImg (path) {
//这边写图片的上传
let msg={
icon:path
}
this.apipost('app_get_employee_modify_icon',msg,res=>{
if(res.data.resultCode==1){
this.Success(res.data.message);
this.getList();
}else{
this.Error(res.data.message);
}
},err=>{})
}
},
mounted() {
this.getList();
this.getCompany();
this.getPost();
this.openMode=localStorage.openMode;
this.radio=localStorage.openMode;
//初始化这个裁剪框
var self = this;
var image = document.getElementById('image');
this.cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 1,
background:false,
zoomable:false,
ready: function () {
self.croppable = true;
}
});
}
};
</script>
......@@ -187,16 +187,23 @@
常用付款对象
<i class="iconfont icon-right1"></i>
</el-dropdown-item>
<el-dropdown-item class="clearfix _dropdown_other" @click.native="settingSys">
<!-- <el-dropdown-item class="clearfix _dropdown_other" @click.native="settingSys">
<i class="iconfont icon-menu-shezhi1" style="color:#2c3e50"></i>
设置
<i class="iconfont icon-right1"></i>
</el-dropdown-item> -->
<el-dropdown-item class="clearfix _dropdown_other" @click.native="goUrlPersonal()">
<i class="iconfont icon-menu-shezhi1" style="color:#2c3e50"></i>
设置
<i class="iconfont icon-right1"></i>
</el-dropdown-item>
<!-- <el-dropdown-item class="clearfix _dropdown_other">
<i class="iconfont icon-menu-shezhi"></i>
设置
</el-dropdown-item> -->
<el-dropdown-item class="clearfix _dropdown_other" @click.native ="exit">
</el-dropdown-item> --> <el-dropdown-item class="clearfix _dropdown_other" @click.native ="exit">
<i class="iconfont icon-menu-tuichu" style="color:#c0392b"></i>
退出
<i class="iconfont icon-right1"></i>
......@@ -3520,6 +3527,10 @@ export default {
let eid=this.getLocalStorage().EmployeeId;
this.$router.push({ path: 'empBankAccount', query: { id: eid,type:10,blank:'y' } });
},
//跳转至个人信息设置
goUrlPersonal(){
this.$router.push({ path: 'PersonalInfoSet', query:{} });
},
getMenu() {
var tempList = this.getLocalStorage().UserMenu;
tempList.forEach(x => {
......
......@@ -3995,6 +3995,14 @@ export default {
title: '个人中心'
}
},
{
path: '/PersonalInfoSet', //个人信息设置
name: 'PersonalInfoSet',
component: resolve => require(['@/components/PersonalInfoSet'], resolve),
meta: {
title: '个人信息设置'
}
},
{
path: '/magic', //供应商一级页面
name: 'magic',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment