HM21St_Page_Manager/src/components/Setting.vue

<template>
  <div class="setting" v-if="info">
    <template v-if="!settingFlag">
        <div class="setting-top">
            <div class="avator-box">
            <el-image
                :src="info.sys_user&&info.sys_user.image_url?info.sys_user.image_url:info.image_url?info.image_url:require('../assets/avatar.png')"
                fit="cover" style="width:96px;height:96px;">
            </el-image>
            <a class="img-crop" v-if="page!=='personCheck'">
                <upload :datafileList="infoForm.cover_image_list" :filleNumber="99" :changeFillId="handleAvatarSuccess" :fileName="'cover'" :showList="true" uploadType="image" />
            </a>
            </div>
            <div class="center">
                <div class="info-items">
                    <label>用户名：</label>
                    <span>{{page==='editPerson'||page==='personal'?info.sys_user.user_name:info.user_name}}</span>
                </div>
                <div class="info-items">
                    <label>手机号码：</label>
                    <span>{{(page==='editPerson'||page==='personal')&&info.sys_user.phone?info.sys_user.phone.substring(0,3)+'******'+info.sys_user.phone.substring(9,11):info.phone?info.phone.substring(0,3)+'******'+info.phone.substring(9,11):'-'}}</span>
                </div>
                <div class="info-items">
                    <label>账号ID：</label>
                    <span>{{page==='editPerson'||page==='personal'?info.sys_user.id:info.id}}</span>
                </div>
                <div class="info-items">
                    <label>邮箱：</label>
                    <span>{{(page==='editPerson'||page==='personal')&&info.sys_user.email?info.sys_user.email:info.email?info.email:'-'}}</span>
                </div>
                <div class="info-items">
                    <label>{{page==='editPerson'||page==='personal'?'创建时间：':'注册时间：'}}</label>
                    <span>{{page==='editPerson'||page==='personal'?info.sys_user.create_time:info.register_time}}</span>
                </div>
                <div class="info-items" v-if="page==='editOrgPerson'||page==='personCheck'">
                    <label>机构：</label>
                    <span>{{info.org_name}}</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)" v-if="page!=='personCheck'">安全设置</a>
                <a :class="[tabsIndex===2?'active':'']" @click="handleChangeTabs(2)" v-if="page!=='personCheck'">{{page==='editPerson'||page==='personal'?'我的权限':'权限设置'}}</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="$provinceCityList"
                            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 v-if="page!=='personCheck'">
                        <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-item v-else>
                        <el-button type="primary" @click="handleAudit('up')" size="small" :loading="loading">通过</el-button>
                        <el-button @click="handleAudit('down')" size="small">拒绝</el-button>
                    </el-form-item>
                </el-form>
            </template>
            <template v-if="tabsIndex===1">
                <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.phone||info.sys_user&&info.sys_user.phone" class="hasContent">
                            已绑定： {{(page==='editPerson'||page==='personal')&&info.sys_user.phone?info.sys_user.phone.substring(0,3)+'******'+info.sys_user.phone.substring(9,11):info.phone?info.phone.substring(0,3)+'******'+info.phone.substring(9,11):'-'}}
                        </p>
                        <p v-else class="noContent">
                        您暂未绑定手机，绑定手机可以有效的保护账号的安全。 
                        </p>
                        <a @click="handleSetting('phoneFlag')">{{info.phone||info.sys_user&&info.sys_user.phone?'修改':'设置'}}</a>
                    </div>
                </div>
                <div class="safe-items">
                    <label>绑定邮箱</label>
                    <div class="safe-items-right">
                        <p v-if="info.email||info.sys_user&&info.sys_user.email" class="hasContent">
                            已绑定： {{info.email||info.sys_user.email}}
                        </p>
                        <p v-else class="noContent">
                        您暂未设置邮箱，绑定邮箱可以用来找回密码、接收通知等。
                        </p>
                        <a @click="handleSetting('emailFlag')">{{info.email||info.sys_user&&info.sys_user.email?'修改':'设置'}}</a>
                    </div>
                </div>
            </template>
            <template v-if="tabsIndex===2&&(page==='editPerson'||page==='personal')">
                <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" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
                            <td><el-checkbox v-model="manageAuth" :label="10002" :disabled="page==='personal'?true:false"><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" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20002" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20003" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20004" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20005" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20006" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
                            <td class="td1"><el-checkbox v-model="manageAuth" :label="20007" :disabled="page==='personal'?true:false"><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" :disabled="page==='personal'?true:false">
                                    <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" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
                            <td><el-checkbox v-model="manageAuth" :label="40002" :disabled="page==='personal'?true:false"><br/></el-checkbox></td>
                            <td>
                                <el-cascader
                                    :disabled="page==='personal'?true:false"
                                    class="step-cascader"
                                    size="medium"
                                    :props="props"
                                    collapse-tags
                                    clearable
                                    :options="$provinceCityListAll"
                                    v-model="financeAuth.selectedOptions"
                                    @change="handleCity">
                                </el-cascader>
                            </td>
                        </tr>
                    </table>
                    <template v-if="page==='editPerson'">
                        <el-button type="primary" @click="onSubmitAuth()" size="small" :loading="loading">保存</el-button>
                        <el-button @click="onCancelAuth()" size="small">取消</el-button>
                    </template>
            </template>
            <template v-if="tabsIndex===2&&page==='editOrgPerson'">
                <el-form :model="managerForm" ref="managerForm" label-width="150px" class="setting-form">
                    <el-form-item label="机构管理员" prop="is_manager">
                        <el-radio-group v-model="managerForm.is_manager">
                            <el-radio label="true">是</el-radio>
                            <el-radio label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmitManager('managerForm')" size="small" :loading="loading">保存</el-button>
                        <el-button @click="onCancel('managerForm')" size="small">取消</el-button>
                    </el-form-item>
                </el-form>
            </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" v-if="phoneForm.oldPhone">
                <el-input v-model="phoneForm.oldPhone" autocomplete="off" :disabled="phoneForm.oldPhone?true:false" 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" v-if="emailForm.email">
                <el-input v-model="emailForm.email" autocomplete="off" :disabled="emailForm.email?true:false" 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="onSubmitEmail('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 Upload from "./Upload.vue"
import { getLogin } from "@/api/ajax";
import { getToken } from '@/utils/auth'
import { mapState } from 'vuex';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Upload },
  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('请输入正确的邮箱地址'));
            }
        }
    };
    const validateProvince = (rule, value, callback) => {
        if(value===[]){
            callback(new Error('请选择所在省市'));
        }else if(value.length===2){
            if(value[0]===''||value[1]===''){
                callback(new Error('请选择所在省市'));
            }else{
                callback();
            }
        }else {
            callback();
        }
    };
    return {
        show: false, // 编辑头像flag
        tabsIndex: 0,
        infoForm:{
            cover_image_url: '',
            cover_image_list: [],
            cover_image_id: null,
            name:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.user_name)):JSON.parse(JSON.stringify(this.info.user_name)),
            realName:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.real_name)):JSON.parse(JSON.stringify(this.info.real_name)),
            sex:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.sex)):JSON.parse(JSON.stringify(this.info.sex)),
            selectedOptions: this.page==='editPerson'||this.page==='personal'?[JSON.parse(JSON.stringify(this.info.sys_user.province_id)),JSON.parse(JSON.stringify(this.info.sys_user.city_id))]:[JSON.parse(JSON.stringify(this.info.province_id)),JSON.parse(JSON.stringify(this.info.city_id))],
            desc:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.memo)):JSON.parse(JSON.stringify(this.info.memo)),
            // selectedOptions: '0302',
        },
        rules: {
            name: [
                { required: true, message: '请输入用户名', trigger: 'blur' }
            ],
            selectedOptions: [
                { type: 'array', required: true, validator: validateProvince, trigger: 'change' }
            ],
            sex:[
                { required: true, message: '请选择性别', trigger: 'change' },
            ],
        },
        settingFlag: false, // 修改设置
        passwordFlag: false, // 修改密码
        phoneFlag: false, // 修改手机
        emailFlag: false, // 修改邮箱
        passwordForm:{
            newPwd:'', // 新密码
            confirmPwd:'' // 确认密码
        },
        rulesPassword:{
            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:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.phone)):JSON.parse(JSON.stringify(this.info.phone)), // 旧手机
            newPhone:'', // 新手机
        },
        rulesPhone:{
            oldPhone:[
                { required: true, validator: validatePhone, trigger: 'blur' },
            ],
            newPhone:[
                { required: true, validator: validatePhone, trigger: 'blur' },
            ]
        },
        time: 60, //获取验证码的时间
        verificationCodeShow: false, //是否已经获取了验证码
        times: 60, //获取验证码的时间
        verificationCodesShow: false, //是否已经获取了验证码
        timee: 60, //获取验证码的时间
        verificationCodeeShow: false, //是否已经获取了验证码
        emailForm:{
            email:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.sys_user.email)):JSON.parse(JSON.stringify(this.info.email)),
            newEmail:''
        },
        rulesEmail:{
            email:[
                { required: true, validator: validateEmail, trigger: 'blur' },
            ],
            newEmail:[
                { required: true, validator: validateEmail, trigger: 'blur' }
            ]
        },
        manageAuth:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.popedom_code_list)):[], // 管理权限
        codeAuth:{
            auth:[],
            viewCode:this.page==='editPerson'||this.page==='personal'?JSON.parse(JSON.stringify(this.info.data_scope.discount_code_view_scope)):0
        }, // 兑换码权限
        financeAuth:{
            auth: [],
            selectedOptions:this.page==='editPerson'||this.page==='personal'?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:'',
        managerForm:{
            is_manager: this.page==='editOrgPerson'?JSON.parse(JSON.stringify(this.info.is_manager)):"false"
        }
    }
  },
  //计算属性 类似于data概念
  computed: {
    ...mapState(['$provinceCityList','$provinceCityListAll']),
  },
  //监控data中数据变化
  watch: {

  },
  //方法集合
  methods: {
    handleAvatarSuccess(fileList,name) {
        let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_Image";
        if(this.page==='editOrgPerson'){
            MethodName = "/OrgServer/Manager/PersonManager/UpdatePerson_Image";
        }
        let data = {
            id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
            image_id: fileList.length>0&&fileList[fileList.length-1].response&&fileList[fileList.length-1].response.file_info_list&&fileList[fileList.length-1].response.file_info_list[0]?fileList[fileList.length-1].response.file_info_list[0].file_id:''
        }
        getLogin(MethodName, data)
        .then((res) => {
            if(res.status===1){
                this.$emit("getInfo")
            }
        }).catch((res) =>{
        })
    },
    // 切换tabs
    handleChangeTabs(value){
        this.tabsIndex = value
        let breadcrumb = []
        if(this.page==='editOrgPerson'){
            breadcrumb = [
                {
                    icon:'school-line',
                    url:'',
                    text:''
                },
                {
                    icon:'',
                    url:'',
                    text:'机构管理'
                },
                {
                    icon:'',
                    url:'',
                    text:this.info.org_name
                },
                {
                    icon:'',
                    url:'',
                    notLink: true,
                    text:value===0?'人员信息':value===1?'安全设置':'权限设置'
                }
            ]
            this.$emit("changeBread",breadcrumb)
        }
    },
    // 级联选择器
    handleCity(value){
        console.log(value)
    },
    // 提交表单
    onSubmit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true
            let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_BaseInfo";
            if(this.page==='editOrgPerson'){
                MethodName = "/OrgServer/Manager/PersonManager/UpdatePerson_BaseInfo";
            }
            let data = {
                id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
                user_name: this.infoForm.name,
                real_name: this.infoForm.realName,
                sex: this.infoForm.sex,
                city_id: this.infoForm.selectedOptions[1],
                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]
        let breadcrumb = []
        if(this.page==='editPerson'){
            if(this[flag]){
                breadcrumb = [
                    {
                        icon:'contacts-line',
                        url:'',
                        text:''
                    },
                    {
                        icon:'',
                        url:'',
                        text:'系统用户'
                    },
                    {
                        icon:'',
                        url:'',
                        notLink: true,
                        text:'安全设置'
                    },
                    {
                        icon:'',
                        url:'',
                        text:flag==='passwordFlag'?'修改密码':flag==='phoneFlag'?'绑定手机':'安全邮箱'
                    }
                ]
            }else{
                breadcrumb = [
                    {
                        icon:'contacts-line',
                        url:'',
                        text:''
                    },
                    {
                        icon:'',
                        url:'',
                        text:'系统用户'
                    },
                    {
                        icon:'',
                        url:'',
                        text:'编辑'
                    }
                ]
            }
            this.$emit("changeBread",breadcrumb)
        }
    },
    changeIcon(flag){
        this[flag] = !this[flag]
    },
    // 修改密码提交表单
    onSubmitPassword(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true
            let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_Password";
            if(this.page==='editOrgPerson'){
                MethodName = "/OrgServer/Manager/PersonManager/UpdatePerson_Password";
            }
            let data = {
                id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
                password: this.passwordForm.newPwd
            }
            getLogin(MethodName, data)
            .then((res) => {
                this.loading = false
                if(res.status===1){
                    this.$message.success("修改成功")
                    this.$emit("getInfo")
                    this.handleSetting('passwordFlag')
                }
            }).catch((res) =>{
                this.loading = false
            })
          } else {
            return false;
          }
        });
    },
    // 修改手机提交表单
    onSubmitPhone(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true
            let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_Phone";
            if(this.page==='editOrgPerson'){
                MethodName = "/OrgServer/Manager/PersonManager/UpdatePerson_Phone";
            }
            let data = {
                id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
                phone: this.phoneForm.newPhone
            }
            getLogin(MethodName, data)
            .then((res) => {
                this.loading = false
                if(res.status===1){
                    this.$message.success("修改成功")
                    this.$emit("getInfo")
                    this.handleSetting('phoneFlag')
                    this.phoneForm.oldPhone = JSON.parse(JSON.stringify(this.phoneForm.newPhone))
                    this.phoneForm.newPhone = ''
                }
            }).catch((res) =>{
                this.loading = false
            })
          } else {
            return false;
          }
        });
    },
    // 修改邮箱
    onSubmitEmail(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true
            let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_Email";
            if(this.page==='editOrgPerson'){
                MethodName = "/OrgServer/Manager/PersonManager/UpdatePerson_Email";
            }
            let data = {
                id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
                email: this.emailForm.newEmail
            }
            getLogin(MethodName, data)
            .then((res) => {
                this.loading = false
                if(res.status===1){
                    this.$message.success("修改成功")
                    this.$emit("getInfo")
                    this.handleSetting('emailFlag')
                    this.emailForm.email = JSON.parse(JSON.stringify(this.emailForm.newEmail))
                    this.emailForm.newEmail = ''
                }
            }).catch((res) =>{
                this.loading = false
            })
          } else {
            return false;
          }
        });
    },
    // 去掉前后空格
    handleTrim(form,fild){
        this[form][fild] = this[form][fild].trim()
    },
    // 修改权限
    onSubmitAuth(){
        this.loading = true
        let MethodName = "/OrgServer/Manager/SysUserManager/UpdateSysUser_Popedom";
        let data = {
            id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
            popedom_code_list: this.manageAuth,
            data_scope:{
                discount_code_view_scope:this.codeAuth.viewCode,
                finance_popedom_data_scope:{
                    province_id_list:['03'],
                    city_id_list:['02'],
                }
            }
        }
        getLogin(MethodName, data)
        .then((res) => {
            this.loading = false
            if(res.status===1){
                this.$message.success("修改成功")
            }
        }).catch((res) =>{
            this.loading = false
        })
    },
    // 取消权限
    onCancelAuth(){
        this.manageAuth = []
        this.codeAuth.viewCode = 0
        this.financeAuth.selectedOptions = []
    },
    // 修改管理员权限
    onSubmitManager(){
        this.loading = true
        let MethodName = "/OrgServer/Manager/PersonManager/UpdatePerson_Popedom";
        let data = {
            id: this.page==='personal'?JSON.parse(getToken()).user_id:this.id,
            is_manager: this.managerForm.is_manager,
        }
        getLogin(MethodName, data)
        .then((res) => {
            this.loading = false
            if(res.status===1){
                this.$message.success("修改成功")
            }
        }).catch((res) =>{
            this.loading = false
        })
    },
    // 通过 拒绝
    handleAudit(type) {
      let Mname = "/OrgServer/Manager/PersonManager/AuditPerson";
      let data = {
        id_list: [this.id]
      };
      if (type==='up') {
        // 下架状态
        data.is_pass = "true";
      } else if (type==='down') {
        data.is_pass = "false";
      }
      getLogin(Mname, data).then(res => {
        this.$message.success("操作成功");
        this.$router.go(-1)
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前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;
                border-radius: 50%;
                display: block;
                text-align: center;
                font-size: 0;
                border: 2px solid #FFFFFF;
                background: #F2F3F5 url("../assets/camera.png") center no-repeat;
                background-size: 12px;
            }
            .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;
        }
    }
    .upload{
        width: 30px;
        height: 30px;
        overflow: hidden;
        .upload-demo{
            opacity: 0;
            width: 100% !important;
        }
    }
}
</style>