|
|
@@ -0,0 +1,924 @@
|
|
|
+<template>
|
|
|
+ <div class="setting">
|
|
|
+ <template v-if="!settingFlag">
|
|
|
+ <div class="setting-top">
|
|
|
+ <div class="avator-box">
|
|
|
+ <el-image
|
|
|
+ :src="info.sys_user.image_url?info.sys_user.image_url:require('../assets/avatar.png')"
|
|
|
+ fit="contain">
|
|
|
+ </el-image>
|
|
|
+ <a @click="toggleShow" class="img-crop">
|
|
|
+ <svg-icon icon-class="camera"></svg-icon>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="center">
|
|
|
+ <div class="info-items">
|
|
|
+ <label>用户名：</label>
|
|
|
+ <span>{{info.sys_user.user_name}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-items">
|
|
|
+ <label>手机号码：</label>
|
|
|
+ <span>{{info.sys_user.phone.substring(0,3)+'******'+info.sys_user.phone.substring(9,11)}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-items">
|
|
|
+ <label>账号ID：</label>
|
|
|
+ <span>{{info.sys_user.id}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-items">
|
|
|
+ <label>邮箱：</label>
|
|
|
+ <span>{{info.sys_user.email}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-items">
|
|
|
+ <label>{{page==='editPerson'?'创建时间：':'注册时间：'}}</label>
|
|
|
+ <span>{{info.sys_user.create_time}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="setting-bottom">
|
|
|
+ <div class="tabs-box">
|
|
|
+ <a :class="[tabsIndex===0?'active':'']" @click="handleChangeTabs(0)">基本信息</a>
|
|
|
+ <a :class="[tabsIndex===1?'active':'']" @click="handleChangeTabs(1)">安全设置</a>
|
|
|
+ <a :class="[tabsIndex===2?'active':'']" @click="handleChangeTabs(2)">{{page==='editPerson'?'我的权限':'权限设置'}}</a>
|
|
|
+ </div>
|
|
|
+ <template v-if="tabsIndex===0">
|
|
|
+ <el-form :model="infoForm" :rules="rules" ref="ruleForm" label-width="150px" class="setting-form">
|
|
|
+ <el-form-item label="用户名" prop="name">
|
|
|
+ <el-input v-model="infoForm.name" disabled placeholder="请输入用户名"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="真实姓名" prop="realName">
|
|
|
+ <el-input v-model="infoForm.realName" placeholder="请输入真实姓名" @blur="handleTrim('infoForm','realName')"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="性别" prop="sex">
|
|
|
+ <el-radio-group v-model="infoForm.sex">
|
|
|
+ <el-radio :label="1">男</el-radio>
|
|
|
+ <el-radio :label="0">女</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所在省市" prop="selectedOptions">
|
|
|
+ <el-cascader
|
|
|
+ size="medium"
|
|
|
+ :options="provinceAndCityData"
|
|
|
+ v-model="infoForm.selectedOptions"
|
|
|
+ @change="handleCity">
|
|
|
+ </el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="desc">
|
|
|
+ <el-input type="textarea" v-model="infoForm.desc" placeholder="请输入备注" maxlength="100" :rows="4" show-word-limit @blur="handleTrim('infoForm','desc')"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="onSubmit('ruleForm')" size="small" :loading="loading">保存</el-button>
|
|
|
+ <el-button @click="onCancel('ruleForm')" size="small">取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </template>
|
|
|
+ <template v-if="tabsIndex===1&&page==='editPerson'">
|
|
|
+ <div class="safe-items">
|
|
|
+ <label>登录密码</label>
|
|
|
+ <div class="safe-items-right">
|
|
|
+ <p class="hasContent">
|
|
|
+ 已设置。密码至少6位字符，支持数字和字母，且必须同时包含数字和大小写字母。
|
|
|
+ </p>
|
|
|
+ <!-- <p v-else class="noContent">
|
|
|
+ 您暂未设置密码，密码可以有效的保护账号的安全。
|
|
|
+ </p> -->
|
|
|
+ <a @click="handleSetting('passwordFlag')">{{'修改'}}</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="safe-items">
|
|
|
+ <label>绑定手机</label>
|
|
|
+ <div class="safe-items-right">
|
|
|
+ <p v-if="info.sys_user.phone" class="hasContent">
|
|
|
+ 已绑定： {{info.sys_user.phone.substring(0,3)+'******'+info.sys_user.phone.substring(9,11)}}
|
|
|
+ </p>
|
|
|
+ <p v-else class="noContent">
|
|
|
+ 您暂未绑定手机，绑定手机可以有效的保护账号的安全。
|
|
|
+ </p>
|
|
|
+ <a @click="handleSetting('phoneFlag')">{{info.sys_user.phone?'修改':'设置'}}</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="safe-items">
|
|
|
+ <label>绑定邮箱</label>
|
|
|
+ <div class="safe-items-right">
|
|
|
+ <p v-if="info.sys_user.email" class="hasContent">
|
|
|
+ 已绑定： {{info.sys_user.email}}
|
|
|
+ </p>
|
|
|
+ <p v-else class="noContent">
|
|
|
+ 您暂未设置邮箱，绑定邮箱可以用来找回密码、接收通知等。
|
|
|
+ </p>
|
|
|
+ <a @click="handleSetting('emailFlag')">{{info.sys_user.email?'修改':'设置'}}</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="tabsIndex===2">
|
|
|
+ <table class="step-table">
|
|
|
+ <tr>
|
|
|
+ <td rowspan="2" class="step-table-header">管理权限</td>
|
|
|
+ <td>系统用户</td>
|
|
|
+ <td>机构管理</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td><el-checkbox v-model="manageAuth" :label="10001"><br/></el-checkbox></td>
|
|
|
+ <td><el-checkbox v-model="manageAuth" :label="10002"><br/></el-checkbox></td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ <table class="step-table">
|
|
|
+ <tr>
|
|
|
+ <td rowspan="2" class="step-table-header">内容权限</td>
|
|
|
+ <td class="td1">报纸管理</td>
|
|
|
+ <td class="td1">画刊管理</td>
|
|
|
+ <td class="td1">专辑管理</td>
|
|
|
+ <td class="td1">评测管理</td>
|
|
|
+ <td class="td1">练习册管理</td>
|
|
|
+ <td class="td1">课程管理</td>
|
|
|
+ <td class="td1">广告管理</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td1"><el-checkbox v-model="manageAuth" :label="20001"><br/></el-checkbox></td>
|
|
|
+ <td class="td1"><el-checkbox v-model="manageAuth" :label="20002"><br/></el-checkbox></td>
|
|
|
+ <td class="td1"><el-checkbox v-model="manageAuth" :label="20003"><br/></el-checkbox></td>
|
|
|
+ <td class="td1"><el-checkbox v-model="manageAuth" :label="20004"><br/></el-checkbox></td>
|
|
|
+ <td class="td1"><el-checkbox v-model="manageAuth" :label="20005"><br/></el-checkbox></td>
|
|
|
+ <td class="td1"><el-checkbox v-model="manageAuth" :label="20006"><br/></el-checkbox></td>
|
|
|
+ <td class="td1"><el-checkbox v-model="manageAuth" :label="20007"><br/></el-checkbox></td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ <table class="step-table">
|
|
|
+ <tr>
|
|
|
+ <td rowspan="2" class="step-table-header">兑换码权限</td>
|
|
|
+ <td>生成兑换码</td>
|
|
|
+ <td>查看兑换码使用情况</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td><el-checkbox v-model="manageAuth" :label="30001"><br/></el-checkbox></td>
|
|
|
+ <td>
|
|
|
+ <el-radio-group v-model="codeAuth.viewCode">
|
|
|
+ <el-radio :label="1">全部</el-radio>
|
|
|
+ <el-radio :label="0">自己生成的</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ <table class="step-table">
|
|
|
+ <tr>
|
|
|
+ <td rowspan="2" class="step-table-header">财务权限</td>
|
|
|
+ <td>查看数据</td>
|
|
|
+ <td>导出数据</td>
|
|
|
+ <td>授权地区</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td><el-checkbox v-model="manageAuth" :label="40001"><br/></el-checkbox></td>
|
|
|
+ <td><el-checkbox v-model="manageAuth" :label="40002"><br/></el-checkbox></td>
|
|
|
+ <td>
|
|
|
+ <el-cascader
|
|
|
+ class="step-cascader"
|
|
|
+ size="medium"
|
|
|
+ :props="props"
|
|
|
+ collapse-tags
|
|
|
+ clearable
|
|
|
+ :options="provinceAndCityData"
|
|
|
+ v-model="financeAuth.selectedOptions"
|
|
|
+ @change="handleCity">
|
|
|
+ </el-cascader>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="setting-iframe" v-if="settingFlag&&passwordFlag">
|
|
|
+ <p class="title">
|
|
|
+ <i class="el-icon-arrow-left" @click="handleSetting('passwordFlag')"></i>
|
|
|
+ 修改登录密码
|
|
|
+ </p>
|
|
|
+ <el-form :model="passwordForm" :rules="rulesPassword" ref="passwordForm" label-width="100px" class="passwordForm">
|
|
|
+ <!-- <el-form-item label="原始密码" prop="oldPwd">
|
|
|
+ <el-input v-model="passwordForm.oldPwd" :type="oldPwdFlag?'text':'password'" autocomplete="off" placeholder="请输入密码" >
|
|
|
+ <i slot="suffix" class="el-icon-view show-icon" @click="changeIcon('oldPwdFlag')" v-if="oldPwdFlag"></i>
|
|
|
+ <i slot="suffix" class="show-icon" @click="changeIcon('oldPwdFlag')" v-else>
|
|
|
+ <svg-icon icon-class="eye-invisible"></svg-icon>
|
|
|
+ </i>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item label="修改密码" prop="newPwd">
|
|
|
+ <el-input v-model="passwordForm.newPwd" :type="newPwdFlag?'text':'password'" autocomplete="off" placeholder="请输入密码" @blur="handleTrim('passwordForm','newPwd')" >
|
|
|
+ <i slot="suffix" class="el-icon-view show-icon" @click="changeIcon('newPwdFlag')" v-if="newPwdFlag"></i>
|
|
|
+ <i slot="suffix" class="show-icon" @click="changeIcon('newPwdFlag')" v-else>
|
|
|
+ <svg-icon icon-class="eye-invisible"></svg-icon>
|
|
|
+ </i>
|
|
|
+ </el-input>
|
|
|
+ <p class="tips">不少于6位，且必须同时包含数字和大小写字母</p>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="再次输入" prop="confirmPwd">
|
|
|
+ <el-input v-model="passwordForm.confirmPwd" :type="comfirmPwdFlag?'text':'password'" autocomplete="off" placeholder="请输入密码" @blur="handleTrim('passwordForm','confirmPwd')" >
|
|
|
+ <i slot="suffix" class="el-icon-view show-icon" @click="changeIcon('comfirmPwdFlag')" v-if="comfirmPwdFlag"></i>
|
|
|
+ <i slot="suffix" class="show-icon" @click="changeIcon('comfirmPwdFlag')" v-else>
|
|
|
+ <svg-icon icon-class="eye-invisible"></svg-icon>
|
|
|
+ </i>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="onSubmitPassword('passwordForm')" size="small" :loading="loading">保存</el-button>
|
|
|
+ <el-button @click="onCancel('passwordForm')" size="small">取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="setting-iframe" v-if="settingFlag&&phoneFlag">
|
|
|
+ <p class="title">
|
|
|
+ <i class="el-icon-arrow-left" @click="handleSetting('phoneFlag')"></i>
|
|
|
+ 修改绑定手机
|
|
|
+ </p>
|
|
|
+ <el-form :model="phoneForm" :rules="rulesPhone" ref="phoneForm" label-width="100px" class="phoneForm">
|
|
|
+ <el-form-item label="原手机号" prop="oldPhone">
|
|
|
+ <el-input v-model="phoneForm.oldPhone" autocomplete="off" placeholder="请输入完整手机号" @blur="handleTrim('phoneForm','oldPhone')" >
|
|
|
+ <template slot="prepend">+86</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="新手机号" prop="newPhone">
|
|
|
+ <el-input v-model="phoneForm.newPhone" autocomplete="off" placeholder="请输入完整手机号" @blur="handleTrim('phoneForm','newPhone')" >
|
|
|
+ <template slot="prepend">+86</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="onSubmitPhone('phoneForm')" size="small" :loading="loading">保存</el-button>
|
|
|
+ <el-button @click="onCancel('phoneForm')" size="small">取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="setting-iframe" v-if="settingFlag&&emailFlag">
|
|
|
+ <p class="title">
|
|
|
+ <i class="el-icon-arrow-left" @click="handleSetting('emailFlag')"></i>
|
|
|
+ 修改安全邮箱
|
|
|
+ </p>
|
|
|
+ <el-form :model="emailForm" :rules="rulesEmail" ref="emailForm" label-width="100px" class="emailForm">
|
|
|
+ <el-form-item label="原邮箱" prop="email">
|
|
|
+ <el-input v-model="emailForm.email" autocomplete="off" placeholder="请输入邮箱地址" @blur="handleTrim('emailForm','email')" >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="新邮箱" prop="newEmail">
|
|
|
+ <el-input v-model="emailForm.newEmail" autocomplete="off" placeholder="请输入邮箱地址" @blur="handleTrim('emailForm','newEmail')" >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="onSubmitPhone('emailForm')" size="small" :loading="loading">保存</el-button>
|
|
|
+ <el-button @click="onCancel('emailForm')" size="small">取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+//例如：import 《组件名称》from ‘《组件路径》';
|
|
|
+import {
|
|
|
+ provinceAndCityData
|
|
|
+} from "element-china-area-data";
|
|
|
+import { getLogin } from "@/api/ajax";
|
|
|
+export default {
|
|
|
+ //import引入的组件需要注入到对象中才能使用
|
|
|
+ components: { },
|
|
|
+ props: ["page","info"],
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ const validatePass = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请输入密码'));
|
|
|
+ } else {
|
|
|
+ let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,16}$/;
|
|
|
+ let result = reg.test(value);
|
|
|
+ if (result) {
|
|
|
+ callback();
|
|
|
+ } else {
|
|
|
+ callback(new Error('密码必须同时包含数字和大小写字母'));
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const validatePass2 = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请再次输入密码'));
|
|
|
+ } else if (value !== this.passwordForm.newPwd) {
|
|
|
+ callback(new Error('两次输入密码不一致!'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const validatePhone = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请输入手机号'));
|
|
|
+ } else {
|
|
|
+ let reg = /^1[3-9]\d{9}$/;
|
|
|
+ let result = reg.test(value);
|
|
|
+ if (result) {
|
|
|
+ callback();
|
|
|
+ } else {
|
|
|
+ callback(new Error('请输入正确的手机号'));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const validateEmail = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请输入邮箱地址'));
|
|
|
+ } else {
|
|
|
+ let reg = /^[a-zA-Z0-9_\.-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
|
|
|
+ let result = reg.test(value);
|
|
|
+ if (result) {
|
|
|
+ callback();
|
|
|
+ } else {
|
|
|
+ callback(new Error('请输入正确的邮箱地址'));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ return {
|
|
|
+ provinceAndCityData,
|
|
|
+ show: false, // 编辑头像flag
|
|
|
+ tabsIndex: 0,
|
|
|
+ infoForm:{
|
|
|
+ name:JSON.parse(JSON.stringify(this.info.sys_user.user_name)),
|
|
|
+ realName:JSON.parse(JSON.stringify(this.info.sys_user.real_name)),
|
|
|
+ sex:JSON.parse(JSON.stringify(this.info.sys_user.sex)),
|
|
|
+ // selectedOptions: JSON.parse(JSON.stringify(this.info.sys_user.city_id)),
|
|
|
+ desc:JSON.parse(JSON.stringify(this.info.sys_user.memo)),
|
|
|
+ selectedOptions: '0302',
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: '请输入用户名', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ // selectedOptions: [
|
|
|
+ // { type: 'array', required: true, message: '请选择所在省市', trigger: 'change' }
|
|
|
+ // ],
|
|
|
+ realName:[
|
|
|
+ { required: true, message: '请输入真实姓名', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ sex:[
|
|
|
+ { required: true, message: '请选择性别', trigger: 'change' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ settingFlag: false, // 修改设置
|
|
|
+ passwordFlag: false, // 修改密码
|
|
|
+ phoneFlag: false, // 修改手机
|
|
|
+ emailFlag: false, // 修改邮箱
|
|
|
+ passwordForm:{
|
|
|
+ oldPwd:'', // 旧密码
|
|
|
+ newPwd:'', // 新密码
|
|
|
+ confirmPwd:'' // 确认密码
|
|
|
+ },
|
|
|
+ rulesPassword:{
|
|
|
+ oldPwd:[
|
|
|
+ { required: true, message: '请输入原始密码', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ newPwd:[
|
|
|
+ { required: true, validator: validatePass, trigger: 'blur' },
|
|
|
+ { min: 6, max: 16, message: '请输入 6-16 位密码，且必须同时包含数字和大小写字母', trigger:'change' },
|
|
|
+ ],
|
|
|
+ confirmPwd:[
|
|
|
+ { required: true, validator: validatePass2, trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ oldPwdFlag: false, // 查看旧密码
|
|
|
+ newPwdFlag: false, // 查看新密码
|
|
|
+ comfirmPwdFlag: false, // 查看确认密码
|
|
|
+ phoneForm:{
|
|
|
+ oldPhone:'', // 旧手机
|
|
|
+ oldCode:'', // 旧手机验证码
|
|
|
+ newPhone:'', // 新手机
|
|
|
+ newCode:'', // 新手机验证码
|
|
|
+ },
|
|
|
+ rulesPhone:{
|
|
|
+ oldPhone:[
|
|
|
+ { required: true, validator: validatePhone, trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ oldCode:[
|
|
|
+ { required: true, message: '请输入验证码', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ newPhone:[
|
|
|
+ { required: true, validator: validatePhone, trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ newCode:[
|
|
|
+ { required: true, message: '请输入验证码', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ time: 60, //获取验证码的时间
|
|
|
+ verificationCodeShow: false, //是否已经获取了验证码
|
|
|
+ times: 60, //获取验证码的时间
|
|
|
+ verificationCodesShow: false, //是否已经获取了验证码
|
|
|
+ timee: 60, //获取验证码的时间
|
|
|
+ verificationCodeeShow: false, //是否已经获取了验证码
|
|
|
+ emailForm:{
|
|
|
+ email:'',
|
|
|
+ newEmail:''
|
|
|
+ },
|
|
|
+ rulesEmail:{
|
|
|
+ email:[
|
|
|
+ { required: true, validator: validateEmail, trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ newEmail:[
|
|
|
+ { required: true, validator: validateEmail, trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ manageAuth:JSON.parse(JSON.stringify(this.info.popedom_code_list)), // 管理权限
|
|
|
+ codeAuth:{
|
|
|
+ auth:[],
|
|
|
+ viewCode:JSON.parse(JSON.stringify(this.info.data_scope.discount_code_view_scope))
|
|
|
+ }, // 兑换码权限
|
|
|
+ financeAuth:{
|
|
|
+ auth: [],
|
|
|
+ selectedOptions:JSON.parse(JSON.stringify(this.info.data_scope.finance_popedom_data_scope))
|
|
|
+ }, // 财务权限
|
|
|
+ props: { multiple: true },
|
|
|
+ loading: false,
|
|
|
+ id:this.$route.query.id?this.$route.query.id:'',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //计算属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中数据变化
|
|
|
+ watch: {
|
|
|
+
|
|
|
+ },
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ // 编辑头像
|
|
|
+ toggleShow() {
|
|
|
+ this.show = !this.show;
|
|
|
+ },
|
|
|
+ // 切换tabs
|
|
|
+ handleChangeTabs(value){
|
|
|
+ this.tabsIndex = value
|
|
|
+ },
|
|
|
+ // 级联选择器
|
|
|
+ handleCity(value){
|
|
|
+ console.log(value)
|
|
|
+ },
|
|
|
+ // 提交表单
|
|
|
+ onSubmit(formName){
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.loading = true
|
|
|
+ let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_BaseInfo";
|
|
|
+ let data = {
|
|
|
+ id: this.id,
|
|
|
+ user_name: this.infoForm.name,
|
|
|
+ real_name: this.infoForm.realName,
|
|
|
+ sex: this.infoForm.sex,
|
|
|
+ city_id: this.infoForm.selectedOptions,
|
|
|
+ memo: this.infoForm.desc
|
|
|
+ }
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ this.loading = false
|
|
|
+ if(res.status===1){
|
|
|
+ this.$emit("getInfo")
|
|
|
+ }
|
|
|
+ }).catch((res) =>{
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 取消 恢复到修改前状态
|
|
|
+ onCancel(formName){
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ },
|
|
|
+ // 修改设置
|
|
|
+ handleSetting(flag){
|
|
|
+ this.settingFlag = !this.settingFlag
|
|
|
+ this[flag] = !this[flag]
|
|
|
+ },
|
|
|
+ changeIcon(flag){
|
|
|
+ this[flag] = !this[flag]
|
|
|
+ },
|
|
|
+ // 修改密码提交表单
|
|
|
+ onSubmitPassword(formName){
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ alert('submit!');
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 修改手机提交表单
|
|
|
+ onSubmitPhone(formName){
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ alert('submit!');
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 发送验证码
|
|
|
+ sendCode(time,phone,flag,obj){
|
|
|
+ let this_ = this;
|
|
|
+ if(this_[time] != 60){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let timer;
|
|
|
+ // 修改手机号
|
|
|
+ if(!obj){
|
|
|
+ if (this_.phoneForm[phone]) {
|
|
|
+ let reg = /^1[3-9]\d{9}$/;
|
|
|
+ let result = reg.test(this_.phoneForm[phone]);
|
|
|
+ if (!result) {
|
|
|
+ this_.$message.warning('请输入正确的手机号');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this_[flag] = true;
|
|
|
+ timer = setInterval(() => {
|
|
|
+ this_[time]--;
|
|
|
+ if (this_[time] == 0) {
|
|
|
+ this_[flag] = false;
|
|
|
+ clearInterval(timer);
|
|
|
+ timer = null;
|
|
|
+ this_[time] = 60;
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ // let MethodName = "user_manager-SendVerificationCode";
|
|
|
+ // let data = {
|
|
|
+ // verification_type: 'EMAIL',
|
|
|
+ // phone_or_email: this_.loginForm.username,
|
|
|
+ // };
|
|
|
+ // getLogin(MethodName, data).then((res) => {
|
|
|
+ // }).catch(()=>{
|
|
|
+ // this_[flag] = false;
|
|
|
+ // clearInterval(timer);
|
|
|
+ // timer = null;
|
|
|
+ // this_[time] = 60;
|
|
|
+ // });
|
|
|
+ } else {
|
|
|
+ this_.$message.warning('请先输入手机号');
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ // 修改邮箱
|
|
|
+ if (this_.emailForm[phone]) {
|
|
|
+ let reg = /^[a-zA-Z0-9_\.-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
|
|
|
+ let result = reg.test(this_.emailForm[phone]);
|
|
|
+ if (!result) {
|
|
|
+ this_.$message.warning('请输入正确的邮箱地址');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this_[flag] = true;
|
|
|
+ timer = setInterval(() => {
|
|
|
+ this_[time]--;
|
|
|
+ if (this_[time] == 0) {
|
|
|
+ this_[flag] = false;
|
|
|
+ clearInterval(timer);
|
|
|
+ timer = null;
|
|
|
+ this_[time] = 60;
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ // let MethodName = "user_manager-SendVerificationCode";
|
|
|
+ // let data = {
|
|
|
+ // verification_type: 'EMAIL',
|
|
|
+ // phone_or_email: this_.loginForm.username,
|
|
|
+ // };
|
|
|
+ // getLogin(MethodName, data).then((res) => {
|
|
|
+ // }).catch(()=>{
|
|
|
+ // this_[flag] = false;
|
|
|
+ // clearInterval(timer);
|
|
|
+ // timer = null;
|
|
|
+ // this_[time] = 60;
|
|
|
+ // });
|
|
|
+ } else {
|
|
|
+ this_.$message.warning('请先输入邮箱');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 去掉前后空格
|
|
|
+ handleTrim(form,fild){
|
|
|
+ this[form][fild] = this[form][fild].trim()
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+ //生命周期-创建之前
|
|
|
+ beforeCreated() { },
|
|
|
+ //生命周期-挂载之前
|
|
|
+ beforeMount() { },
|
|
|
+ //生命周期-更新之前
|
|
|
+ beforUpdate() { },
|
|
|
+ //生命周期-更新之后
|
|
|
+ updated() { },
|
|
|
+ //生命周期-销毁之前
|
|
|
+ beforeDestory() { },
|
|
|
+ //生命周期-销毁完成
|
|
|
+ destoryed() { },
|
|
|
+ //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ activated() { }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+/* @import url(); 引入css类 */
|
|
|
+.setting{
|
|
|
+ height: 100%;
|
|
|
+ &-top{
|
|
|
+ margin: 0 0 12px 0;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ padding: 22px 40px;
|
|
|
+ .avator-box{
|
|
|
+ width: 96px;
|
|
|
+ height: 96px;
|
|
|
+ position: relative;
|
|
|
+ .img-crop{
|
|
|
+ position: absolute;
|
|
|
+ // padding: 4px;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ right: -4px;
|
|
|
+ bottom: -4px;
|
|
|
+ background: #F2F3F5;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ padding: 7px;
|
|
|
+ font-size: 0;
|
|
|
+ border: 2px solid #FFFFFF;
|
|
|
+ .svg-icon{
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ color: #165DFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-image{
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .center{
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-flow: wrap;
|
|
|
+ margin-top: 12px;
|
|
|
+ .info-items{
|
|
|
+ margin-bottom: 12px;
|
|
|
+ width: 40%;
|
|
|
+ }
|
|
|
+ label{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #86909C;
|
|
|
+ width: 156px;
|
|
|
+ text-align: right;
|
|
|
+ display: inline-block;
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #1D2129;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-bottom{
|
|
|
+ padding: 24px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 4px;
|
|
|
+ min-height: calc(100vh - 270px);
|
|
|
+ .tabs-box{
|
|
|
+ display: flex;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ a{
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #4E5969;
|
|
|
+ border-radius: 100px;
|
|
|
+ padding: 5px 16px;
|
|
|
+ margin-right: 12px;
|
|
|
+ &:hover{
|
|
|
+ background: #F2F3F5;
|
|
|
+ }
|
|
|
+ &.active{
|
|
|
+ background: #F2F3F5;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #165DFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ margin-left: 16px;
|
|
|
+ }
|
|
|
+ .safe-items{
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ padding: 30px 20px 13px 20px;
|
|
|
+ label{
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #4E5969;
|
|
|
+ }
|
|
|
+ &-right{
|
|
|
+ border-bottom: 1px solid #E5E6EB;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ p{
|
|
|
+ margin: 0;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #4E5969;
|
|
|
+ &.noContent{
|
|
|
+ color: #86909C;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ a{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #165DFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-iframe{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 24px;
|
|
|
+ .title{
|
|
|
+ margin: 0;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #000000;
|
|
|
+ .el-icon-arrow-left{
|
|
|
+ margin-right: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .passwordForm,.phoneForm,.emailForm{
|
|
|
+ padding-top: 40px;
|
|
|
+ .show-icon{
|
|
|
+ cursor: pointer;
|
|
|
+ color: #4E5969;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .code-input{
|
|
|
+ width: 268px;
|
|
|
+ .el-input__inner{
|
|
|
+ border-radius: 2px 0 0 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.step-table{
|
|
|
+ border: 1px solid #E5E6EB;
|
|
|
+ border-collapse: collapse;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #1D2129;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ &-header{
|
|
|
+ background: #F7F8FA;
|
|
|
+ width: 120px !important;
|
|
|
+ color: #86909C;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ td{
|
|
|
+ height: 40px;
|
|
|
+ width: 260px;
|
|
|
+ border: 1px solid #E5E6EB;
|
|
|
+ &.td1{
|
|
|
+ width: 130px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .step-cascader{
|
|
|
+ width: 250px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.tips{
|
|
|
+ margin: 0;
|
|
|
+ color: #86909C;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 20px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.setting{
|
|
|
+ .el-input,.el-textarea{
|
|
|
+ width: 360px;
|
|
|
+ }
|
|
|
+ .el-input__inner{
|
|
|
+ height: 32px;
|
|
|
+ color: #1D2129;
|
|
|
+ background: #F2F3F5;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .el-textarea__inner,.el-input-group__prepend{
|
|
|
+ color: #1D2129;
|
|
|
+ background: #F2F3F5;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .el-input__count{
|
|
|
+ background: #F2F3F5;
|
|
|
+ }
|
|
|
+ .el-form-item__label{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 32px;
|
|
|
+ color: #4E5969;
|
|
|
+ }
|
|
|
+ .el-form-item__content,.el-input__icon{
|
|
|
+ line-height: 32px;
|
|
|
+ color: #4E5969 !important;
|
|
|
+ }
|
|
|
+ .el-form-item{
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .el-radio__input.is-checked+.el-radio__label{
|
|
|
+ color: #165DFF;
|
|
|
+ }
|
|
|
+ .el-radio__input.is-checked .el-radio__inner{
|
|
|
+ background: #165DFF;
|
|
|
+ border-color: #165DFF;
|
|
|
+ }
|
|
|
+ .el-button--primary{
|
|
|
+ background: #165DFF;
|
|
|
+ border-color: #165DFF;
|
|
|
+ border-radius: 2px;
|
|
|
+ &:hover{
|
|
|
+ background: #4080FF;
|
|
|
+ border-color: #4080FF;
|
|
|
+ }
|
|
|
+ &:focus{
|
|
|
+ background: #0E42D2;
|
|
|
+ border-color: #0E42D2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-button--default{
|
|
|
+ background: #F2F3F5;
|
|
|
+ border-radius: 2px;
|
|
|
+ border: none;
|
|
|
+ color: #4E5969;
|
|
|
+ height: 32px;
|
|
|
+ &:hover{
|
|
|
+ background: #E5E6EB;
|
|
|
+ }
|
|
|
+ &:focus{
|
|
|
+ background: #C9CDD4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .setting-form{
|
|
|
+ padding-top: 26px;
|
|
|
+ }
|
|
|
+ .code-box{
|
|
|
+ .el-form-item__content{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .code-input{
|
|
|
+ height: 32px;
|
|
|
+ .el-input__inner{
|
|
|
+ border-radius: 4px 0 0 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sendCode{
|
|
|
+ border-radius: 0 4px 4px 0;
|
|
|
+ margin-top: 1px;
|
|
|
+ width: 92px;
|
|
|
+ }
|
|
|
+ .el-input-group__prepend{
|
|
|
+ width: 54px;
|
|
|
+ height: 32px;
|
|
|
+ border: none;
|
|
|
+ background: #F2F3F5;
|
|
|
+ border-radius: 2px 0px 0px 2px;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .el-input-group--prepend{
|
|
|
+ display: flex;
|
|
|
+ .el-input__inner{
|
|
|
+ margin-left: 8px;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .step-cascader{
|
|
|
+ .el-input{
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha
