IDCOL/webConfig/src/views/companyManagement.vue

<template>
    <div class="companyManagement_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="keyword" @keyup.native="getCompanyListKeyUp($event)" class="input-with-select">
                    <i slot="suffix" class="el-input__icon el-icon-search" @click="getCompanyList()"></i>
                </el-input>
                <div class="btn" @click="addCompanyFun()"><img src="../img/iconfont/add.png"><span>New company</span></div>
            </div>
        </div>
        <div class="companyManagement_main">
            <div class="table_box">
                <el-table
                    ref="companyList"
                    v-loading="loading.companyList"
                    element-loading-background="rgba(255, 255, 255, 0.5)"
                    height="calc(100% - 5.5rem)"
                    :data="companyList">
                    <el-table-column
                        label="Num"
                        prop="webIndex"
                        align="center"
                        header-align="center"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        v-for="(item) in companyListArr"
                        :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 == 'type'" class="Type">
                                <div class="box">{{roleArr[scope.row[item.prop]]}}{{item.unit?item.unit:''}}</div>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column
                        align="center"
                        :width="12*remRatio"
                        :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="delFun(scope.row)" title="Delete">
                                <i class="iconfont icon-shanchu" style="color: #A3AFBB"></i>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination_box">
                    <div class="left">
                        <div class="totle">
                            <span class="span1">Total</span>
                            <span class="span2">{{total}}</span>
                        </div>
                        <div class="line"></div>
                        <el-dropdown @command="commandDropdown" trigger="click" @visible-change="commandHide('dropdown_projectManagement_division')">
                            <span class="el-dropdown-link">
                                <span>{{pageSizeName}}</span><i class="el-icon-caret-bottom el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown" class="scrollbar_style dropdown_projectManagement_division">
                                <el-dropdown-item v-for="item in pageSizeArr" :class="{'select':item.id==pageSize}" :command="{'key':'pageSize','id':item.id}" :key="item.id">{{item.name}}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <el-pagination
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-sizes="pageSizeArr"
                      :page-size="pageSize"
                      layout="prev, pager, next, jumper"
                      :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- 添加编辑用户 -->
        <div class="company_wrap" v-show="companyTkShowbg">
            <div class="company_wrap_bg" @click="companyTkClose()"></div>
            <div class="company_box" :class="{'company_tk_show':companyTkShow}">
                <div class="company_title">
                    <span class="span1">{{companyTkTitle}}</span>
                </div>
                <div class="form_box scrollbar_style">
                    <div class="form">
                        <div class="form_item">
                            <span class="laber">company type</span>
                            <!-- <el-input v-model="companyForm.type" placeholder=""></el-input> -->
                            <el-dropdown @command="commandDropdown" trigger="click" @visible-change="commandHide('dropdown_projectManagement_roleName')" v-if="companyForm.type != 1">
                                <span class="el-dropdown-link">
                                    <span>{{companyFormRoleName}}</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==companyForm.type}" :command="{'key':'companyForm.type','id':item.id}" :key="item.id">{{item.name}}</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <span class="text" v-if="companyForm.type == 1">Admin</span>
                        </div>
                        <div class="form_item">
                            <span class="laber">Company ID</span>
                            <el-input v-model="companyForm.companyId" placeholder=""></el-input>
                        </div>
                        <div class="form_item">
                            <span class="laber">company name</span>
                            <el-input v-model="companyForm.name" placeholder=""></el-input>
                        </div>
                        <div class="form_item">
                            <span class="laber">Abbreviation</span>
                            <el-input v-model="companyForm.no" placeholder=""></el-input>
                        </div>
                    </div>
                </div>
                <div class="btn_box">
                    <div class="btn" @click="companySave()">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:'companyManagement',
        data(){
            return{
                userId:'',
                userInfo:{
                    avatar:'',
                },
                userData:{},

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

                privilegeList: [],

                keyword:'',
                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:'',

                companyList:[],
                companyListArr:[],
                currentPage:1,
                pageSize:0,
                total:400,
                pageSizeArr:[{id:10,name:'10/page'},{id:20,name:'20/page'},{id:50,name:'50/page'},{id:100,name:'100/page'}],

                companyTkShowbg:false,
                companyTkShow:false,
                companyForm:{
                    id:'',
                    name:'',
                    companyId:'',
                    type:'',
                    no:'',
                },
                companyTkTitle:'Edit company',
                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:{
                    companyList:false,
                }
            }
        },
        // components:{sideBarIdcol},
        computed:{
            ...mapGetters({
                token:'token',
                client_key:'client_key',
                username:'username',
                version:'version',
                id:'id',
                role:'role',
                remRatio:'remRatio',
            }),
            role_Name(){
                let name;
                for(let d of this.role_Nav){
                    if(d.id == this.role_){
                        name = d.name;
                    }
                }
                return name;
            },
            companyFormRoleName(){
                let name;
                for(let d of this.roleList){
                    if(d.id == this.companyForm.type){
                        name = d.name;
                    }
                }
                return name;
            },
            pageSizeName(){
                let name;
                for(let d of this.pageSizeArr){
                    if(d.id == this.pageSize){
                        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.pageSize = 10;
            this.role_ = 0;
            this.companyListArr = [
                {prop:'type',label:'Type',minWidth:8*this.remRatio,type:1,align:'letf'},
                {prop:'name',label:'Name',minWidth:16*this.remRatio,align:'letf'},
                {prop:'no',label:'Abbreviation',minWidth:8*this.remRatio,align:'letf'},
                {prop:'companyId',label:'Company ID',minWidth:8*this.remRatio}
            ];
            this.getCompanyList();
        },
        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 == 'pageSize'||obj.key == 'role_'){
                    this.currentPage = 1;
                    this.getCompanyList();
                }
            },
            addCompanyFun(){
                this.companyTkTitle = 'Add company';
                for(let key in this.companyForm){
                    this.companyForm[key] = '';
                }
                this.companyForm.type = 2;
                let this_ = this;
                this.companyTkShowbg = true;
                setTimeout(function(){
                    this_.companyTkShow = true;
                },300)
            },
            editFun(data){
                this.companyTkTitle = 'Edit company';
                this.companyTkShowbg = true;

                for(let key in data){
                    this.companyForm[key] = data[key];
                }
                this.$nextTick(function(){
                    this.companyTkShow = true;
                })
            },
            companyTkClose(){
                let this_ = this;
                this.companyTkShow = false;
                setTimeout(function(){
                    this_.companyTkShowbg = false;
                },300)
            },
            companySave(){
                this.companyTkShow = false;
                base.ajax_post(
                    allUel.user.company_save,
                    {
                        username:this.username,
                        token:this.token,
                        client_key:this.client_key,
                        ...this.companyForm,
                    },
                    {},
                    data => {
                        this.$message({
                          showClose: true,
                          message: data.msg,
                          type: 'success'
                        });
                        this.companyTkShowbg = false;
                        this.getCompanyList();
                        if(this.companyForm.id == this.userInfo.id){
                            this.getUserInfo(this.userInfo.id,data=>{
                                this.userInfo = data.data;
                            });
                        }
                    },
                    this,()=>{
                        this.companyTkShow = 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.company_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.currentPage = 1;
                                this.getCompanyList();
                            },
                            this
                        )
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: 'Delete canceled'
                        });          
                    });
                }
            },

            handleCurrentChange(val){
                this.currentPage = val;
                this.getCompanyList();
            },
            /*列表*/
            getCompanyListKeyUp(e){
                if(e.key == 'Enter'){
                    this.getCompanyList();
                }
            },
            getCompanyList(){
                this.loading.companyList = true;
                base.ajax_post(
                    allUel.user.company_get_list,
                    {
                        username:this.username,
                        token:this.token,
                        client_key:this.client_key,
                        keyword:this.keyword,
                        type:this.role_,
                        page:this.currentPage,
                        count:this.pageSize,
                    },
                    {},
                    data => {
                        this.companyList = data.data.list;
                        let i = (this.currentPage - 1)*this.pageSize+1;
                        for(let d of this.companyList){
                            this.$set(d,'block_userLoading',false)
                            d.webIndex = i;
                            i++;
                        }
                        this.total = data.data.total;
                        this.count = data.data.count;
                        this.fault = data.data.fault;
                        this.loading.companyList = false;
                        this.$refs.companyList.doLayout();
                    },
                    this,()=>{
                        this.loading.companyList = false;
                    }
                )
            },
        }
    }
</script>
<style type="text/css" lang="less">
    .companyManagement_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;
                    }
                }
            }
        }
        .companyManagement_main{
            padding: 1.5rem 1.5rem 0;
            height:calc(100% - 4.8rem);
            .table_box{
                height:100%;
                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: left;
                        // 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;
                        display: flex;
                        align-items: center;
                        .circular{
                            max-height: 10rem;
                            height: 100%;
                            width: inherit;
                        }
                    }
                }
                .pagination_box{
                    height: 2.3rem;line-height: 2.3rem;
                    margin-top: 1.6rem;
                    margin-bottom: 1.6rem;
                    display: flex;
                    .left{
                        margin-left: auto;
                        display: flex;
                        align-items: center;
                        background:rgba(246,248,250,1);
                        border-radius:1.2rem;
                        padding: 0 1.2rem;
                        .totle{
                            font-size:1rem;
                            font-family:AlibabaPuHuiTiR;
                            color:rgba(51,51,51,1);
                            .span2{
                                margin-left: 0.2rem;
                                color: rgba(252, 132, 64, 1);
                            }
                        }
                        .line{
                            margin: 0 0.7rem;
                            width:0.08rem;
                            height:1rem;
                            background-color: rgba(235, 239, 242, 1);
                        }
                        .el-dropdown-link{
                            font-size:1rem;
                            font-family:AlibabaPuHuiTiR;
                            color:rgba(51,51,51,1);
                            cursor: pointer;
                        }
                    }
                    .el-pagination{
                        margin: 0 auto 0 0.8rem;
                        // border-radius:1.2rem;
                        padding: 0;
                        .btn-next,.btn-prev{
                            height: 2.3rem;line-height: 2.3rem;
                            background:rgba(246,248,250,1);
                            &:hover{
                                background:rgba(252,132,64,1);
                                font-family:AlibabaPuHuiTiM;
                                color:rgba(255,255,255,1);
                            }
                            &.active{
                                font-family:AlibabaPuHuiTiM;
                                color:rgba(255,255,255,1);
                                cursor: default;
                                background:rgba(252,132,64,1);
                            }
                        }
                        // button{
                        //     &:disabled{
                        //         background-color: initial;
                        //     }
                        // }
                        .btn-prev{
                            border-top-left-radius: 1.2rem;
                            border-bottom-left-radius: 1.2rem;
                        }
                        .btn-next{
                            border-top-right-radius: 1.2rem;
                            border-bottom-right-radius: 1.2rem;
                        }
                        .el-pager{
                            background:rgba(246,248,250,1);
                            li{
                                height: 2.3rem;line-height: 2.3rem;
                                background-color: initial;

                                font-size:1rem;
                                font-family:AlibabaPuHuiTiR;
                                color:rgba(51,51,51,1);
                                border-radius:0.25rem;
                                &:hover{
                                    background:rgba(252,132,64,1);
                                    font-family:AlibabaPuHuiTiM;
                                    color:rgba(255,255,255,1);
                                }
                                &.active{
                                    font-family:AlibabaPuHuiTiM;
                                    color:rgba(255,255,255,1);
                                    cursor: default;
                                    background:rgba(252,132,64,1);
                                }
                            }
                        }
                        .el-pagination__jump{
                            margin-left: 0.8rem;
                            height:2.3rem;line-height: 2.3rem;
                            background:rgba(246,248,250,1);
                            border-radius:1.2rem;
                            padding: 0 1.2rem;

                            font-size:1rem;
                            font-family:AlibabaPuHuiTiR;
                            color:rgba(51,51,51,1);
                            .el-input{
                                height:2.3rem;line-height: 2.3rem;
                                .el-input__inner{
                                    height:2.3rem;line-height: 2.3rem;
                                    border: none;
                                    background-color: #f6f8fa;
                                }
                            }
                        }
                    }
                }
            }
        }
        .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);
                    }
                }
            }
        }
        .company_wrap{
            position: fixed;
            top: 0;left: 0;right: 0;bottom: 0;
            z-index: 2000;
            .company_wrap_bg{
                position: absolute;
                top: 0;left: 0;width: 100%;height: 100%;
                background-color:rgba(57,57,57,0.3);
            }
            // overflow: hidden;
            .company_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;
                &.company_tk_show{
                    right: 0rem; 
                }
                .company_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;
                    .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;
                        }
                    }
                }
                .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>