IDCOL/webConfig/src/views/userManagement.vue

<template>
    <div class="userRights_template">
        <div class="nav_top">
            <div class="left_title">
                <img src="../img/iconfont/notice.png"><span class="span">Please pay attention to the updated content at any time.</span>
            </div>
            <div class="right_operation">
                <el-dropdown @command="commandDropdown" trigger="click" @visible-change="commandHide('dropdown_projectManagement_role_')">
                    <span class="el-dropdown-link">
                        <span>{{role_Name}}</span><i class="el-icon-caret-bottom el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" class="scrollbar_style dropdown_projectManagement_role_">
                        <el-dropdown-item :class="{'select':role_ == '0'}" :command="{'key':'role_','id':'0'}" :key="'0'">All</el-dropdown-item>
                        <el-dropdown-item v-for="item in roleList" :class="{'select':item.id==role_}" :command="{'key':'role_','id':item.id}" :key="item.id">{{item.name}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-input placeholder="search..." type='search' v-model="keywords" @keyup.native="getUserSub_listKeyUp($event)" class="input-with-select">
                    <i slot="suffix" class="el-input__icon el-icon-search" @click="getUserSub_list()"></i>
                </el-input>
                <div class="btn" @click="addAccountFun()"><img src="../img/iconfont/add.png"><span>New account</span></div>
            </div>
        </div>
        <div class="userRights_main">
            <div class="userRights_left">
                <div class="editBtn" @click="editFun(userInfo)" title="Edit">
                    <i class="iconfont icon-bianji" style="color: #A3AFBB"></i>
                </div>
                <el-upload
                  class="avatar-uploader"
                  :action="actionImg"
                  :data="imgUploadData"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <p class="name">{{userInfo.name}}</p>
                <div class="from">
                    <div class="item_form">
                        <div class="key">Name</div>
                        <div class="val">{{userInfo.name}}</div>
                    </div>
                    <div class="item_form">
                        <div class="key">Account type</div>
                        <div class="val">{{roleArr[userInfo.role]}}</div>
                    </div>
                    <div class="item_form">
                        <div class="key">Phone</div>
                        <div class="val">{{userInfo.phone}}</div>
                    </div>
                    <div class="item_form">
                        <div class="key">E-mail</div>
                        <div class="val">{{userInfo.email}}</div>
                    </div>
                    <div class="item_form">
                        <div class="key">Password</div>
                        <div class="val">{{userInfo.name}}</div>
                    </div>
                    <div class="item_form">
                        <div class="key">Company</div>
                        <div class="val">{{userInfo.company}}</div>
                    </div>
                </div>
                <div class="bottom_authority" @click="jurisdictionFun(userInfo,'view')">
                    <p class="p1">Account authority</p>
                    <p class="p2">{{userData.permCount}}</p>
                    <p class="p3">
                        <i class="iconfont icon-celan-gou" v-if="userData.view == 1"></i>
                        <i class="iconfont icon-celan-guanbi" v-if="userData.view == 0"></i>
                        <span>View</span>
                    </p>
                    <p class="p3">
                        <i class="iconfont icon-celan-gou" v-if="userData.operating == 1"></i>
                        <i class="iconfont icon-celan-guanbi" v-if="userData.operating == 0"></i>
                        <span>Operating</span>
                    </p>
                    <p class="p3">
                        <i class="iconfont icon-celan-gou" v-if="userData.parameter == 1"></i>
                        <i class="iconfont icon-celan-guanbi" v-if="userData.parameter == 0"></i>
                        <span>Parameter</span>
                    </p>
                    <i class="iconfont icon-youjiantou-dan"></i>
                </div>
            </div>
            <div class="userRights_right">
                <div class="userRights_right_top">
                    <div class="li li1">
                        <div class="i_box">
                            <i class="iconfont icon-quanbuzhanghu"></i>
                        </div>
                        <div class="text_box">
                            <p class="p1">{{userData.total}}</p>
                            <p class="p2">Total accounts</p>
                        </div>
                    </div>
                    <div class="li">
                        <p class="p1">{{userData.manuCount}}</p>
                        <p class="p2">Manufacturer</p>
                        <div class="line"></div>
                    </div>
                    <div class="li">
                        <p class="p1">{{userData.suppCount}}</p>
                        <p class="p2">Supplier</p>
                        <div class="line"></div>
                    </div>
                    <div class="li">
                        <p class="p1">{{userData.poCount}}</p>
                        <p class="p2">PO</p>
                        <div class="line"></div>
                    </div>
                    <div class="li">
                        <p class="p1">{{userData.upaCount}}</p>
                        <p class="p2">Upazilla</p>
                        <div class="line"></div>
                    </div>
                    <div class="li">
                        <p class="p1">{{userData.monCount}}</p>
                        <p class="p2">Monitoring</p>
                        <div class="line"></div>
                    </div>
                    <div class="li">
                        <p class="p1">{{userData.conCount}}</p>
                        <p class="p2">Controlling</p>
                        <div class="line"></div>
                    </div>
                </div>
                <div class="table_box">
                    <el-table
                        ref="faultInformationList"
                        v-loading="loading.faultInformationList"
                        element-loading-background="rgba(0, 0, 0, 0.5)"
                        height="calc(100% - 3.5rem)"
                        :data="faultInformationList">
                        <el-table-column
                            label="Num"
                            prop="webIndex"
                            align="center"
                            header-align="center"
                            width="60">
                        </el-table-column>
                        <el-table-column
                            v-for="(item) in faultInformationArr"
                            :key="'table_'+item.prop"
                            :prop="item.prop"
                            :label="item.label"
                            :align="item.align?item.align:'center'"
                            :width="item.width"
                            :show-overflow-tooltip="true"
                            :min-width="item.minWidth">
                            <template slot-scope="scope">
                                <div v-if="item.type != 1">{{scope.row[item.prop]}}{{item.unit?item.unit:''}}</div>
                                <div v-if="item.prop == 'role'" class="Type">
                                    <div class="box">{{roleArr[scope.row[item.prop]]}}{{item.unit?item.unit:''}}</div>
                                </div>
                                <div v-if="item.prop == 'status'" class="State" v-loading="scope.row.block_userLoading">
                                    <span class="pl_switch" :class="{'checked':scope.row['status'] == '1'}" @click="blockUser(scope.row)"></span>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column
                            align="center"
                            :width="120"
                            :label="'Operation'">
                            <template slot-scope="scope">
                                <span class="btn" @click="editFun(scope.row)" title="Edit">
                                    <i class="iconfont icon-bianji" style="color: #A3AFBB"></i>
                                </span>
                                <span class="btn" @click="jurisdictionFun(scope.row)" title="Jurisdiction">
                                    <i class="iconfont icon-quanxian" style="color: #A3AFBB"></i>
                                </span>
                                <span class="btn" @click="delFun(scope.row)" title="Delete">
                                    <i class="iconfont icon-shanchu" style="color: #A3AFBB"></i>
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <!-- 编辑用户权限 -->
        <div class="permissions_wrap" v-show="permissionsTkShowbg">
            <div class="permissions_wrap_bg" @click="permissionsTkClose()"></div>
            <div class="permissions_box" :class="{'permissions_tk_show':permissionsTkShow}">
                <div class="permissions_title">
                    <span class="span1">Edit permissions</span>
                </div>
                <div class="form scrollbar_style">
                    <div class="form_item" :class="{'open':item.open}" v-for="item in privilegeList" :key="item.id">
                        <p class="form_item_title" @click="privilegeOpenFun(item)">
                            <span class="laber">{{item.en_name}}</span>
                            <i class="iconfont icon-xialajiantou"></i>
                        </p>
                        <div class="form_item_main" v-if="item.open">
                            <div class="checkbox_inde">
                                <el-checkbox :indeterminate="item.indeterminate" v-model="item.checkAll" :disabled="userId == userInfo.id" @change="handleCheckAllChange(item)">All</el-checkbox>
                            </div>
                            <div>
                                <el-checkbox-group v-model="item.checkedCities" @change="handleCheckedCitiesChange(item)">
                                    <el-checkbox v-for="obj in item.sub_list" :label="obj.id" :key="obj.id" :disabled="userId == userInfo.id">{{obj.en_name}}</el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="btn_box">
                    <div class="cancel" @click="permissionsTkClose()">Cancel</div>
                    <div class="btn" @click="permissionsSave()" v-if="userId != userInfo.id">Confirm</div>
                </div>
            </div>
        </div>
        <!-- 添加编辑用户 -->
        <div class="account_wrap" v-show="accountTkShowbg">
            <div class="account_wrap_bg" @click="accountTkClose()"></div>
            <div class="account_box" :class="{'account_tk_show':accountTkShow}">
                <div class="account_title">
                    <span class="span1">{{accountTkTitle}}</span>
                </div>
                <div class="form_box scrollbar_style" v-if="accountType == '0'">
                    <div class="form form1">
                        <div class="form_item">
                            <span class="laber">Account type</span>
                            <!-- <el-input v-model="accountForm.role" placeholder=""></el-input> -->
                            <el-dropdown @command="commandDropdown" trigger="click" @visible-change="commandHide('dropdown_projectManagement_roleName')" v-if="accountForm.role != 1">
                                <span class="el-dropdown-link">
                                    <span>{{accountFormRoleName}}</span><i class="el-icon-caret-bottom el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown" class="scrollbar_style dropdown_projectManagement_roleName_">
                                    <el-dropdown-item v-for="item in roleList" :class="{'select':item.id==accountForm.role}" :command="{'key':'accountForm.role','id':item.id}" :key="item.id">{{item.name}}</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <span class="text" v-if="accountForm.role == 1">Admin</span>
                        </div>
                        <div class="form_item" v-if="accountTkTitle == 'Add account'">
                            <span class="laber">Account name</span>
                            <el-input v-model="accountForm.account" placeholder=""></el-input>
                        </div>
                        <div class="form_item" v-if="accountTkTitle == 'Add account'">
                            <span class="laber">Password</span>
                            <el-input v-model="accountForm.password" type="password" placeholder=""></el-input>
                        </div>
                    </div>
                    <div class="form">
                        <div class="form_item">
                            <span class="laber">Name</span>
                            <el-input v-model="accountForm.name" placeholder=""></el-input>
                        </div>
                        <div class="form_item">
                            <span class="laber">Phone</span>
                            <el-input v-model="accountForm.phone" placeholder=""></el-input>
                        </div>
                        <div class="form_item">
                            <span class="laber">E-mail</span>
                            <el-input v-model="accountForm.email" placeholder=""></el-input>
                        </div>
                        <div class="form_item">
                            <span class="laber">Company</span>
                            <el-input v-model="accountForm.company" placeholder=""></el-input>
                        </div>
                    </div>
                </div>
                <div class="form_ul scrollbar_style" v-if="accountType == '1'">
                    <div class="form_item" :class="{'open':item.open}" v-for="item in privilegeList" :key="item.id">
                        <p class="form_item_title" @click="privilegeOpenFun(item)">
                            <span class="laber">{{item.en_name}}</span>
                            <i class="iconfont icon-xialajiantou"></i>
                        </p>
                        <div class="form_item_main" v-if="item.open">
                            <div class="checkbox_inde">
                                <el-checkbox :indeterminate="item.indeterminate" v-model="item.checkAll" @change="handleCheckAllChange(item)">All</el-checkbox>
                            </div>
                            <div>
                                <el-checkbox-group v-model="item.checkedCities" @change="handleCheckedCitiesChange(item)">
                                    <el-checkbox v-for="obj in item.sub_list" :label="obj.id" :key="obj.id">{{obj.en_name}}</el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="btn_box">
                    <div class="cancel" @click="accountTkClose()" v-if="accountTkTitle == 'Edit account'||(accountTkTitle == 'Add account'&&accountType == '0')">Cancel</div>
                    <div class="btn" @click="accountSave()" v-if="accountTkTitle == 'Edit account'">Confirm</div>
                    <div class="btn" @click="accountNextStep()" v-if="accountTkTitle == 'Add account'&&accountType == '0'">next step</div>
                    <div class="btn" @click="accountLastStep()" v-if="accountTkTitle == 'Add account'&&accountType == '1'">Last step</div>
                    <div class="btn" @click="accountSave()" v-if="accountTkTitle == 'Add account'&&accountType == '1'">Confirm</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
    import { mapGetters } from 'vuex'
    import allUel from '../api/allUel.js'
    import base from '../api/base.js'

    export default{
        name:'userRights',
        data(){
            return{
                userId:'',
                userInfo:{
                    avatar:'',
                },
                userData:{},

                actionImg:'',
                imgUploadData:{
                    username:'',
                    client_key:'',
                    token:'',
                },

                privilegeList: [],

                keywords:'',
                role_:'',
                role_Nav:[{id:'0',name:'All'},{id:'1',name:'admin'},{id:2,name:'Manufacturer'},{id:3,name:'Supplier'},{id:4,name:'PO'},{id:5,name:'Upazilla'},{id:6,name:'Monitoring'},{id:7,name:'Controlling'}],
                rightDate:'',
                rightDateNav:[{id:'0',name:'Today'}],
                myChart1:'',

                faultInformationList:[],
                faultInformationArr:[],


                permissionsTkShowbg:false,
                permissionsTkShow:false,

                accountTkShowbg:false,
                accountTkShow:false,
                accountForm:{
                    id:'',
                    name:'',
                    phone:'',
                    account:'',
                    company:'',
                    password:'',
                    email:'',
                    role:'',
                    privilegeIds:'',
                },
                accountTkTitle:'Edit account',
                accountType:'0',
                roleArr:['','Admin','Manufacturer','Supplier','PO','Upazilla','Monitoring','Controlling'],
                roleList:[{id:2,name:'Manufacturer'},{id:3,name:'Supplier'},{id:4,name:'PO'},{id:5,name:'Upazilla'},{id:6,name:'Monitoring'},{id:7,name:'Controlling'}],

                loading:{
                    faultInformationList:false,
                }
            }
        },
        // components:{sideBarIdcol},
        computed:{
            ...mapGetters({
                token:'token',
                client_key:'client_key',
                username:'username',
                version:'version',
                id:'id',
            }),
            role_Name(){
                let name;
                for(let d of this.role_Nav){
                    if(d.id == this.role_){
                        name = d.name;
                    }
                }
                return name;
            },
            accountFormRoleName(){
                let name;
                for(let d of this.roleList){
                    if(d.id == this.accountForm.role){
                        name = d.name;
                    }
                }
                return name;
            }
        },
        mounted(){
            this.actionImg = allUel.user.update_avatar;
            this.imgUploadData.username = this.username;
            this.imgUploadData.client_key = this.client_key;
            this.imgUploadData.token = this.token;

            this.role_ = 0;
            this.faultInformationArr = [
                {prop:'role',label:'Type',minWidth:120,type:1},
                {prop:'name',label:'Name',minWidth:80,align:'left'},
                {prop:'id',label:'ID',minWidth:80,align:'left'},
                {prop:'phone',label:'phone',minWidth:80,align:'left'},
                {prop:'email',label:'E-mail',width:80,align:'left'},
                {prop:'company',label:'Affiliated unit',minWidth:80},
                {prop:'status',label:'State',minWidth:60,type:1},
            ];
            // this.faultInformationList = [
            //     {'Name':'Claudia Bryant','Type':'Upa','ID':'3432525053','phone':18126534952,'eMail':'nupuid@unwot.ht','AffiliatedUnit':'City-Name','State':1},
            //     {'Name':'Claudia Bryant','Type':'Upa','ID':'3432525053','phone':18126534952,'eMail':'nupuid@unwot.ht','AffiliatedUnit':'City-Name','State':0},
            // ];
            this.getUserSub_list();
            this.getUserInfo(this.id,data=>{
                this.userInfo = data.data;
            });
            this.getUserData();
        },
        methods:{
            commandHide(val){
                this.$nextTick(function(){
                    if($('.'+val)&&$('.'+val+' >.select').offset()){
                        $('.'+val).animate({scrollTop: $('.'+val).scrollTop() + $('.'+val+' >.select').offset().top - $('.'+val).offset().top - 100})
                    }
                })
            },
            commandDropdown(obj){
                if(obj.key.split('.').length == 1){
                    this.$set(this,obj.key,obj.id)
                }else if(obj.key.split('.').length == 2){
                    this.$set(this[obj.key.split('.')[0]],obj.key.split('.')[1],obj.id)
                }
                if(obj.key == 'role_'){
                    this.getUserSub_list();
                }
            },
            getUserInfo(id,callback,error){
                base.ajax_post(
                    allUel.user.info,
                    {
                        username:this.username,
                        token:this.token,
                        client_key:this.client_key,
                        id:id,
                    },
                    {},
                    data => {
                        if(callback){
                            callback(data)
                        }
                    },
                    this,
                    data =>{
                        if(error){
                            error(data)
                        }
                    }
                )
            },
            getUserData(){
                base.ajax_post(
                    allUel.user.data,
                    {
                        username:this.username,
                        token:this.token,
                        client_key:this.client_key,
                        id:this.id,
                    },
                    {},
                    data => {
                        this.userData = data.data;
                        console.log(data)
                    },
                    this
                )
            },
            getPrivilege_list(id){
                base.ajax_post(
                    allUel.user.privilege_list,
                    {
                        username:this.username,
                        token:this.token,
                        client_key:this.client_key,
                        id:id,
                    },
                    {},
                    data => {
                        this.privilegeList = data.data.list;
                        for(let d of this.privilegeList){
                            this.$set(d,'open',true);
                            this.$set(d,'AllModel',true);
                            this.$set(d,'cityOptions',[]);
                            this.$set(d,'checkedCities',[]);
                            // d.sub_list =
                            for(let dd of d.sub_list){
                                this.$set(d.cityOptions,d.cityOptions.length,dd.id);
                                if(dd.select){
                                    this.$set(d.checkedCities,d.checkedCities.length,dd.id);
                                }
                            }
                            this.$set(d,'indeterminate',d.checkedCities.length > 0 && d.checkedCities.length < d.sub_list.length);
                            this.$set(d,'checkAll',d.checkedCities.length === d.sub_list.length);
                        }
                    },
                    this
                )
            },
            addAccountFun(){
                this.accountTkTitle = 'Add account';
                for(let key in this.accountForm){
                    this.accountForm[key] = '';
                }
                this.accountForm.role = 2;
                this.accountType = '0';
                let this_ = this;
                this.accountTkShowbg = true;
                setTimeout(function(){
                    this_.accountTkShow = true;
                },300)
            },
            editFun(data){
                this.accountTkTitle = 'Edit account';
                this.accountTkShowbg = true;

                this.getUserInfo(data.id,data=>{
                    for(let key in data.data){
                        this.accountForm[key] = data.data[key];
                    }
                    this.accountTkShow = true;
                },()=>{
                    this.accountTkShowbg = false;
                });
            },
            accountTkClose(){
                let this_ = this;
                this.accountTkShow = false;
                setTimeout(function(){
                    this_.accountTkShowbg = false;
                },300)
            },
            accountLastStep(){
                this.accountType = '0';
            },
            accountNextStep(){
                this.getPrivilege_list();
                this.accountType = '1';
            },
            accountSave(){
                this.accountTkShow = false;
                this.accountForm.privilegeIds = '';
                for(let d of this.privilegeList){
                    for(let id of d.checkedCities){
                        if(this.accountForm.privilegeIds == ''){
                            this.accountForm.privilegeIds = id
                        }else{
                            this.accountForm.privilegeIds += ','+id;
                        }
                    }
                }
                base.ajax_post(
                    allUel.user.user_update,
                    {
                        username:this.username,
                        token:this.token,
                        client_key:this.client_key,
                        ...this.accountForm,
                    },
                    {},
                    data => {
                        this.$message({
                          showClose: true,
                          message: data.msg,
                          type: 'success'
                        });
                        this.accountTkShowbg = false;
                        this.getUserSub_list();
                        this.getUserData();
                        if(this.accountForm.id == this.userInfo.id){
                            this.getUserInfo(this.userInfo.id,data=>{
                                this.userInfo = data.data;
                            });
                        }
                    },
                    this,()=>{
                        this.accountTkShow = true;
                    }
                )
            },
            /*删除*/
            delFun(obj,type){
                let ids = '',isTrue = true;
                if(type == 'batch'){
                    if(obj.length == 0){
                        isTrue = false;
                        this.$message({
                            message: 'Please select the devices',
                            type: 'warning'
                        });
                    }else{
                        for(let id of obj){
                            if(id == ''){
                                ids = id;
                            }else{
                                ids += ','+id;
                            }
                        }
                    }
                }else{
                    ids = obj.id;
                }
                if(isTrue){
                    this.$confirm(
                        'Are you sure you want to delete the user?', 'Warning', {
                            confirmButtonText: 'Confirm',
                            cancelButtonText: 'Cancel',
                            type: 'warning'
                        }
                    ).then(() => {
                        base.ajax_post(
                            allUel.user.del,
                            {
                                username:this.username,
                                client_key:this.client_key,
                                token:this.token,
                                id:ids,
                            },
                            {},
                            data =>{
                                this.$message({
                                  showClose: true,
                                  message: data.msg,
                                  type: 'success'
                                });
                                this.getUserSub_list();
                                this.getUserData();
                            },
                            this
                        )
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: 'Delete canceled'
                        });          
                    });
                }
            },

            blockUser(data){
                if(data.status == '1'){
                    data.status = '0'
                }else{
                    data.status = '1'
                }
                data.block_userLoading = true;
                base.ajax_post(
                    allUel.user.block_user,
                    {
                        username:this.username,
                        token:this.token,
                        client_key:this.client_key,
                        id:data.id,
                        status:data.status,
                    },
                    {},
                    obj => {
                        this.$message({
                          showClose: true,
                          message: obj.msg,
                          type: 'success'
                        });
                        data.block_userLoading = false;
                    },
                    this,()=>{
                        if(data.status == '1'){
                            data.status = '0'
                        }else{
                            data.status = '1'
                        }
                        data.block_userLoading = false;
                    }
                )
            },

            privilegeOpenFun(data){
                if(data.open){
                    data.open = false;
                }else{
                    data.open = true;
                }
            },
            handleCheckAllChange(data) {
                data.checkedCities = data.checkAll ? data.cityOptions : [];
                data.indeterminate = false;
            },
            handleCheckedCitiesChange(data) {
                let checkedCount = data.checkedCities.length;
                data.checkAll = checkedCount === data.sub_list.length;
                data.indeterminate = checkedCount > 0 && checkedCount < data.sub_list.length;
            },
            jurisdictionFun(data){
                let this_ = this;
                this.permissionsTkShowbg = true;
                setTimeout(function(){
                    this_.permissionsTkShow = true;
                },300)
                this.getPrivilege_list(data.id);
                this.userId = data.id;
            },
            permissionsTkClose(){
                let this_ = this;
                this.permissionsTkShow = false;
                setTimeout(function(){
                    this_.permissionsTkShowbg = false;
                },300)
            },
            permissionsSave(){
                let privilegeIds = '';
                for(let d of this.privilegeList){
                    for(let id of d.checkedCities){
                        if(privilegeIds == ''){
                            privilegeIds = id
                        }else{
                            privilegeIds += ','+id;
                        }
                    }
                }
                base.ajax_post(
                    allUel.user.save_user_privilege,
                    {
                        username:this.username,
                        token:this.token,
                        client_key:this.client_key,
                        userid:this.userId,
                        privilegeIds:privilegeIds,
                    },
                    {},
                    data => {
                        this.$message({
                          showClose: true,
                          message: data.msg,
                          type: 'success'
                        });
                        this.permissionsTkShowbg = false;
                        this.getUserSub_list();
                    },
                    this,()=>{
                        this.permissionsTkShow = true;
                    }
                )
            },

            handleAvatarSuccess(res, file) {
                console.log(res, file)
                if(res.code == '0000'){
                    this.$message({
                      showClose: true,
                      message: res.msg,
                      type: 'success'
                    });
                    this.userInfo.avatar = URL.createObjectURL(file.raw);
                }else{
                    this.$alert(res.msg, 'System hints', {
                      confirmButtonText: 'Confirm',
                    });
                }
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                  this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                  this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            /*列表*/
            getUserSub_listKeyUp(e){
                if(e.key == 'Enter'){
                    this.getUserSub_list();
                    this.getUserInfo(this.id,data=>{
                        this.userInfo = data.data;
                    });
                    this.getUserData();
                  
                }
            },
            getUserSub_list(){
                base.ajax_post(
                    allUel.user.sub_list,
                    {
                        username:this.username,
                        token:this.token,
                        client_key:this.client_key,
                        keywords:this.keywords,
                        role:this.role_,
                    },
                    {},
                    data => {
                        this.faultInformationList = data.data.list;
                        let i = 1;
                        for(let d of this.faultInformationList){
                            this.$set(d,'block_userLoading',false)
                            d.webIndex = i;
                            i++;
                        }
                    },
                    this
                )
            },
        }
    }
</script>
<style type="text/css" lang="less">
    .userRights_template{
        
        width: 100%;
        // height: 100%;
        // height: 105rem;
        min-height: 50rem;
        // min-width: 120rem;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        .nav_top{
            display: flex;
            justify-content: space-between;
            width:100%;
            height:3.3rem;line-height: 3.3rem;
            background:rgba(255,255,255,1);
            border:0.1rem solid rgba(240,240,240,1);
            .left_title{
                display: flex;
                align-items: center;
                img{
                    display: inline-block;
                    // width: 1.2rem;
                    height: 1rem;
                    margin: 0 0.6rem;
                }
                .span{
                    font-size:1rem;
                    font-family:HiraginoSansGB-W3,HiraginoSansGB;
                    font-weight:normal;
                    color:rgba(101,112,133,1);
                }
            }
            .right_operation{
                display: flex;
                align-items: center;
                padding-right: 1.6rem;
                .el-dropdown{
                    width: 10rem;
                    height: 2rem;line-height: 2rem;
                    background:rgba(246,248,250,1);
                    border-radius: 0.2rem;
                    margin-right: 0.8rem;
                    .el-dropdown-link{
                        cursor: pointer;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 0 0.8rem;
                        font-size:1rem;
                        font-family:PingFang-SC-Medium,PingFang-SC;
                        font-weight:500;
                        color:rgba(101,112,133,1);
                    }
                }
                .el-input{
                    width: 16.5rem;
                    height: 2rem;line-height: 2rem;
                    .el-input__inner{
                        height: 2rem;line-height: 2rem;
                        background:rgba(246,248,250,1);
                        border: none;
                    }
                    .el-input__suffix{
                        right: 0;
                        border-top-right-radius: 0.2rem;
                        border-bottom-right-radius: 0.2rem;
                    }
                    .el-input__icon{
                        width: 1.8rem;
                        height: 2rem;line-height: 2rem;
                        border-top-right-radius: 0.2rem;
                        border-bottom-right-radius: 0.2rem;
                        background:#FC8440;
                        color: #fff;
                        font-size: 1rem;
                        cursor: pointer;

                        position: absolute;
                        top: 0;
                        right: 0;
                    }
                }
                .btn{
                    margin-left: 0.6rem;
                    display: flex;
                    align-items: center;
                    padding: 0.5rem 1rem;
                    height:2rem;line-height: 2rem;
                    background:rgba(255,255,255,1);
                    border-radius:0.2rem 0.1rem 0.1rem 0.2rem;
                    border:0.1rem solid rgba(240,240,240,1);

                    cursor: pointer;
                    font-size:1rem;
                    font-family:PingFang-SC-Medium,PingFang-SC;
                    font-weight:500;
                    color:rgba(51,51,51,1);
                    img{
                        height: 1.2rem;
                        margin-right: 0.5rem;
                    }
                }
            }
        }
        .userRights_main{
            display: flex;
            .userRights_left{
                width: 30rem;
                height: 60rem;
                border-right: 0.08rem solid rgba(240,240,240,1);
                position: relative;
                .editBtn{
                    cursor: pointer;
                    position: absolute;
                    text-align: center;
                    width: 1.6rem;height: 1.6rem;line-height: 1.6rem;
                    right: 2rem;top: 2rem;
                    i{
                        font-size: 1.4rem;
                    }
                }
                .avatar-uploader{
                    margin: 3.4rem auto 0;
                    width: 8.3rem;height: 8.3rem;
                    text-align: center;
                    overflow: hidden;
                    border:0.17rem solid rgba(233,233,233,1);
                    border-radius: 50%;
                    .avatar-uploader-icon{
                        width: 8.3rem;height: 8.3rem;line-height: 8.3rem;
                    }
                    .avatar{
                        width: 8.3rem;height: 8.3rem;line-height: 8.3rem;
                    }
                }
                .name{
                    margin: 1rem 0 2.5rem;
                    text-align: center;
                    font-size:1.17rem;
                    font-family:HiraginoSansGB-W3,HiraginoSansGB;
                    font-weight:normal;
                    color:rgba(51,51,51,1);
                }
                .from{
                    padding: 0 2rem;
                    .item_form{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        height:3.1rem;line-height:3.1rem;
                        background:rgba(255,255,255,1);
                        border-radius:0.17rem;
                        border:0.08rem solid rgba(235,239,242,1);
                        padding: 0 1.2rem;
                        margin-bottom: 0.8rem;
                        .key{
                            font-size:1rem;
                            font-family:HiraginoSansGB-W3,HiraginoSansGB;
                            font-weight:normal;
                            color:rgba(101,112,133,1);
                        }
                        .val{
                            max-width: 60%;
                            line-height: 1.5rem;
                            font-size:1rem;
                            font-family:HiraginoSansGB-W3,HiraginoSansGB;
                            font-weight:normal;
                            color:rgba(51,51,51,1);
                        }
                    }
                }
                .bottom_authority{
                    margin: 1.4rem 2rem 0rem;
                    height:15.4rem;
                    border-radius:0.5rem;
                    padding-top: 2rem; 
                    // border:0.08rem solid rgba(240,240,240,1);
                    cursor: pointer;
                    background-image: url('../img/userManagement/permissions.png');
                    background-size: 100% 100%;
                    background-position: center;
                    position: relative;
                    .icon-youjiantou-dan{
                        color: #fff;
                        font-size: 1.6rem;
                        position: absolute;right: 1.5rem;top: 8rem;
                    }
                    .p1{
                        margin-top: 1.2rem;
                        margin-left: 11.5rem;
                        font-size:1.33rem;
                        font-family:AlibabaPuHuiTiB;
                        color:rgba(255,255,255,1);
                    }
                    .p2{
                        margin-left: 11.5rem;
                        font-size:3rem;
                        font-family:AlibabaPuHuiTiB;
                        color:rgba(255,255,255,1);
                    }
                    .p3{
                        margin-left: 9.6rem;
                        display: flex;
                        align-items: center;
                        i{
                            font-size: 1.2rem;
                            color: #FFDB00;
                            &.icon-celan-guanbi{
                                font-size: 1rem;
                            }
                        }
                        span{
                            margin-left: 0.6rem;
                            font-size:1rem;
                            font-family:AlibabaPuHuiTiR;
                            color:rgba(255,255,255,1);
                        }
                    }
                }
            }
            .userRights_right{
                margin-left: 0.8rem;
                margin-right: 1.6rem;
                flex: 1;
                width: calc(100% - 32.4rem);
                .userRights_right_top{
                    margin-top: 0.8rem;
                    height:5.8rem;
                    background:rgba(255,255,255,1);
                    border:0.08rem solid rgba(240,240,240,1);
                    display: flex;
                    align-items: center;
                    .li{
                        flex: 1;
                        text-align: center;
                        &.li1{
                            flex: 1.3;
                            height: 100%;
                            display: flex;
                            align-items: center;
                            border-right: 0.08rem solid rgba(240,240,240,1);
                            .i_box{
                                margin: 0rem 0.8rem 0 2.5rem;
                                width:2.2rem;
                                height:2.2rem;line-height: 2.2rem;
                                background:linear-gradient(134deg,rgba(252,169,64,1) 0%,rgba(252,132,64,1) 100%);
                                border-radius:0.33rem;
                                i{
                                    color: #fff;
                                }
                            }
                            .text_box{
                                text-align: left;
                            }
                        }
                        .p1{
                            font-size:1.67rem;
                            font-family:AlibabaPuHuiTiB;
                            color:rgba(51,51,51,1);
                        }
                        .p2{
                            font-size:1rem;
                            font-family:HiraginoSansGB-W3,HiraginoSansGB;
                            font-weight:normal;
                            color:rgba(101,112,133,1);
                            margin-bottom: 0.2rem;
                        }
                        .line{
                            margin: 0 auto;
                            width:1.2rem;
                            height:0.2rem;
                            background:linear-gradient(134deg,rgba(0,124,255,1) 0%,rgba(0,93,236,1) 100%);
                            border-radius:0.08rem;
                        }
                    }
                }
                .table_box{
                    margin-top: 0.8rem;
                    height:50rem;
                    background:rgba(255,255,255,1);
                    border:0.08rem solid rgba(240,240,240,1);
                    .el-table{
                        width: 100%;
                        th,td{
                            padding: 0;
                            >.cell{
                                padding: 0 0.5rem;
                            }
                        }
                        th{
                            height: 3.33rem;line-height: 3.33rem;
                            background:rgba(246,248,250,1);
                            font-size:1rem;
                            font-family:PingFang-SC-Medium,PingFang-SC;
                            font-weight:500;
                            color:rgba(102,102,102,1);
                        }
                        td{
                            height: 4.2rem;line-height: 4.2rem;
                            font-size:1rem;
                            font-family:PingFangSC-Medium,PingFang SC;
                            font-weight:500;
                            color:rgba(51,51,51,1);
                        }
                        .btn{
                            padding: 0.2rem 0.5rem;
                            cursor: pointer;
                            i{
                                font-size: 1rem;
                                color: #A3AFBB;
                            }
                        }
                        .Type{
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            // width: calc(100% - 1rem);
                            // margin: 0 0.5rem;
                            .box{
                                padding: 0 1rem;
                                height:1.8rem;line-height: 1.8rem;
                                background:rgba(29,125,253,0.1);
                                border-radius:1rem;

                                font-size:1rem;
                                font-family:PingFang-SC-Medium,PingFang-SC;
                                font-weight:500;
                                color:rgba(29,125,253,1);
                            }
                        }
                        .State{
                            display: flex;
                            align-items: center;
                            // width: calc(100% - 1rem);
                            // margin: 0 0.5rem;
                            .pl_switch{
                                margin: 0 auto;
                                position: relative;
                                display: inline-block;
                                width: 2.5rem;
                                height: 1.4rem;
                                background: #EBEFF2;
                                border-radius: 1.1rem;
                                cursor: pointer;
                                &::after{
                                    position: absolute;
                                    left: 0.3rem;top: 0.2rem;
                                    width: 1rem;height: 1rem;border-radius: 50%;
                                    content: '';
                                    background: #A3AFBB;
                                    transition: all 0.5s;
                                }
                                &.checked{
                                    background: #F2EEEB;
                                    &::after{
                                        left: 1.2rem;
                                        background: #FC8440;
                                    }
                                }
                            }
                        }
                        .el-loading-spinner{
                            height: 100%;
                            top: 0;
                            margin-top: 0;
                            .circular{
                                height: 100%;
                                width: inherit;
                            }
                        }
                    }
                }
            }
        }
        .permissions_wrap{
            position: fixed;
            top: 0;left: 0;right: 0;bottom: 0;
            z-index: 2000;
            .permissions_wrap_bg{
                position: absolute;
                top: 0;left: 0;width: 100%;height: 100%;
                background-color:rgba(57,57,57,0.3);
            }
            // overflow: hidden;
            .permissions_box{
                position: absolute;
                width: 36rem;height: calc(100% - 4.1rem);
                top: 4.1rem;
                // min-height: 50rem;
                background: #FFFFFF;
                box-shadow: 0 0 8px 0 rgba(0,0,0,0.12);
                right: -36rem;
                transition: all 0.5s;
                &.permissions_tk_show{
                    right: 0rem; 
                }
                .permissions_title{
                    height: 4.1rem;line-height: 4.1rem;
                    display: flex;
                    justify-content: space-between;
                    padding: 0 1.6rem 0 1.6rem;
                    .span1{
                        font-family: PingFang-SC-Medium;
                        font-size: 1.17rem;
                        color: #333333;
                    }
                }
                .form{
                    padding: 0 0.8rem 0 1.6rem;
                    margin-top: 1.96rem;
                    height: calc(100% - 11.1rem);
                    margin-right: 0.8rem;
                    .form_item{
                        &.open{
                            .form_item_title{
                                i{
                                    transform: rotate(180deg);
                                }
                            }
                        }
                        .form_item_title{
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            height:2.5rem;
                            background:rgba(246,248,250,1);
                            border-radius:0.17rem;
                            padding: 0 1rem;
                            cursor: pointer;
                            span{
                                font-size:1rem;
                                font-family:PingFang-SC-Medium,PingFang-SC;
                                font-weight:500;
                                color:rgba(101,112,133,1);
                            }
                            .icon-xialajiantou{
                                font-size: 0.6rem;
                                transition: all 0.5s;
                                color: #657085;
                            }
                        }
                        .form_item_main{
                            margin-top: 0.5rem;
                            padding-left: 1rem;
                            &.open{
                                .checkbox_inde{
                                    .icon-xialajiantou{
                                        transform: rotate(180deg);
                                    }
                                }
                            }
                            .checkbox_inde{
                                display: flex;
                                align-items: center;
                                cursor: pointer;
                                .icon-xialajiantou{
                                    margin-right: 0.5rem;
                                    font-size: 0.6rem;
                                    transition: all 0.5s;
                                    color: #657085;
                                }
                            }
                            .el-checkbox__input{
                                .el-checkbox__inner{
                                    width: 1.2rem;height: 1.2rem;
                                    background-color: #EBEFF2;
                                    border: none;
                                    &::after{
                                        border: 0.1rem solid rgba(252, 132, 64, 1);
                                        border-left: 0;
                                        border-top: 0;
                                        height: 0.6rem;width: 0.25rem;
                                        top:0.15rem;left: 0.5rem;
                                    }
                                    &::before{
                                        background-color: rgba(252, 132, 64, 1);
                                    }
                                }
                                &.is-checked .el-checkbox__inner,&.is-indeterminate .el-checkbox__inner{
                                    background-color: #EBEFF2;
                                    border: none;
                                }
                            }
                            .el-checkbox{
                                margin-right: 0.3rem;
                            }
                            .el-checkbox__label{
                                font-size:1rem;
                                font-family:PingFang-SC-Medium,PingFang-SC;
                                font-weight:500;
                                color:rgba(101,112,133,1);
                            }
                            .el-checkbox{
                                display: block;
                            }
                            .el-checkbox-group{
                                padding-left: 3rem;
                            }
                        }
                    }
                }
                .btn_box{
                    margin-top: 1rem;
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    .cancel{
                        padding: 0 1rem;
                        height: 2.67rem;line-height: 2.67rem;
                        cursor: pointer;

                        font-size:1rem;
                        font-family:PingFang-SC-Medium,PingFang-SC;
                        font-weight:500;
                        color:rgba(101,112,133,1);
                    }
                    .btn{
                        width: 9rem;height: 2.67rem;line-height: 2.67rem;
                        margin-left: 2rem;
                        background:linear-gradient(134deg,rgba(252,169,64,1) 0%,rgba(252,132,64,1) 100%);
                        border-radius: 0.2rem;
                        text-align:center;
                        cursor: pointer;

                        font-size:1rem;
                        font-family:PingFang-SC-Medium,PingFang-SC;
                        font-weight:500;
                        color:rgba(255,255,255,1);
                    }
                }
            }
        }
        .account_wrap{
            position: fixed;
            top: 0;left: 0;right: 0;bottom: 0;
            z-index: 2000;
            .account_wrap_bg{
                position: absolute;
                top: 0;left: 0;width: 100%;height: 100%;
                background-color:rgba(57,57,57,0.3);
            }
            // overflow: hidden;
            .account_box{
                position: absolute;
                width: 36rem;height: calc(100% - 4.1rem);
                top: 4.1rem;
                background: #FFFFFF;
                box-shadow: 0 0 8px 0 rgba(0,0,0,0.12);
                right: -36rem;
                transition: all 0.5s;
                &.account_tk_show{
                    right: 0rem; 
                }
                .account_title{
                    height: 4.1rem;line-height: 4.1rem;
                    display: flex;
                    justify-content: space-between;
                    padding: 0 1.6rem 0 1.6rem;
                    .span1{
                        font-family: PingFang-SC-Medium;
                        font-size: 1.17rem;
                        color: #333333;
                    }
                }
                .form_box{
                    height: calc(100% - 9.1rem);
                }
                .form{
                    margin: 0 1.6rem 0 1.6rem;
                    &.form1{
                        border-bottom: 0.1rem dotted #C6CDD5;
                        padding-bottom: 1rem;
                        margin-bottom: 1.5rem;
                    }
                    .form_item{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: 0.8rem;
                        padding: 0 0.8rem 0;
                        height:2.5rem;line-height: 2.5rem;
                        background:rgba(246,248,250,1);
                        border-radius:0.17rem;
                        .laber{
                            font-family: PingFang-SC-Medium;
                            font-size: 1rem;
                            color: #333333;
                        }
                        .el-dropdown{
                            cursor: pointer;
                            i{
                                margin-left: 1.67rem;
                            }
                        }
                        .el-input{
                            width: calc(100% - 8rem);
                            .el-input__inner{
                                height:2.5rem;line-height: 2.5rem;
                                font-family: PingFang-SC-Medium;
                                font-size: 1rem;
                                color: #657085;
                                text-align: right;
                                background: initial;
                                border: none;
                            }
                        }
                        .text{
                            margin-right: 15px;
                        }
                    }
                }
                .form_ul{
                    padding: 0 0.8rem 0 1.6rem;
                    margin-top: 1.96rem;
                    height: calc(100% - 11.1rem);
                    margin-right: 0.8rem;
                    .form_item{
                        &.open{
                            .form_item_title{
                                i{
                                    transform: rotate(180deg);
                                }
                            }
                        }
                        .form_item_title{
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            height:2.5rem;
                            background:rgba(246,248,250,1);
                            border-radius:0.17rem;
                            padding: 0 1rem;
                            cursor: pointer;
                            span{
                                font-size:1rem;
                                font-family:PingFang-SC-Medium,PingFang-SC;
                                font-weight:500;
                                color:rgba(101,112,133,1);
                            }
                            .icon-xialajiantou{
                                font-size: 0.6rem;
                                transition: all 0.5s;
                                color: #657085;
                            }
                        }
                        .form_item_main{
                            margin-top: 0.5rem;
                            padding-left: 1rem;
                            &.open{
                                .checkbox_inde{
                                    .icon-xialajiantou{
                                        transform: rotate(180deg);
                                    }
                                }
                            }
                            .checkbox_inde{
                                display: flex;
                                align-items: center;
                                cursor: pointer;
                                .icon-xialajiantou{
                                    margin-right: 0.5rem;
                                    font-size: 0.6rem;
                                    transition: all 0.5s;
                                    color: #657085;
                                }
                            }
                            .el-checkbox__input{
                                .el-checkbox__inner{
                                    width: 1.2rem;height: 1.2rem;
                                    background-color: #EBEFF2;
                                    border: none;
                                    &::after{
                                        border: 0.1rem solid rgba(252, 132, 64, 1);
                                        border-left: 0;
                                        border-top: 0;
                                        height: 0.6rem;width: 0.25rem;
                                        top:0.15rem;left: 0.5rem;
                                    }
                                    &::before{
                                        background-color: rgba(252, 132, 64, 1);
                                    }
                                }
                                &.is-checked .el-checkbox__inner,&.is-indeterminate .el-checkbox__inner{
                                    background-color: #EBEFF2;
                                    border: none;
                                }
                            }
                            .el-checkbox{
                                margin-right: 0.3rem;
                            }
                            .el-checkbox__label{
                                font-size:1rem;
                                font-family:PingFang-SC-Medium,PingFang-SC;
                                font-weight:500;
                                color:rgba(101,112,133,1);
                            }
                            .el-checkbox{
                                display: block;
                            }
                            .el-checkbox-group{
                                padding-left: 3rem;
                            }
                        }
                    }
                }
                .btn_box{
                    position: absolute;
                    width: 100%;
                    bottom: 1.67rem;
                    display: flex;
                    justify-content: center;
                    .cancel{
                        padding: 0 1rem;
                        height: 2.67rem;line-height: 2.67rem;
                        cursor: pointer;

                        font-size:1rem;
                        font-family:PingFang-SC-Medium,PingFang-SC;
                        font-weight:500;
                        color:rgba(101,112,133,1);
                    }
                    .btn{
                        width: 9rem;height: 2.67rem;line-height: 2.67rem;
                        margin-left: 2rem;
                        background:linear-gradient(134deg,rgba(252,169,64,1) 0%,rgba(252,132,64,1) 100%);
                        border-radius: 0.2rem;
                        text-align:center;
                        cursor: pointer;

                        font-size:1rem;
                        font-family:PingFang-SC-Medium,PingFang-SC;
                        font-weight:500;
                        color:rgba(255,255,255,1);
                    }
                }
            }
        }
    }
</style>