saas-platform/frontend/saas-portal-web/src/components/conenter/company.vue

<template>
  <div>
    <!-- 遮罩 -->
    <div class="zhezhao" v-if="issetDefault || isOpensaas || isNoopen || isokopensaas"></div>
    <!-- 设置默认弹窗 -->
    <div class="tanchuang szmoren" v-if="issetDefault">
      <div class="over"><img @click="guanbitc" class="right xs" src="/static/img/qiye/chahao.png" alt=""></div>
      <div v-if="isDefault">
        <div class="tc-text tc-queren"><span>是否确认设为默认企业？</span></div>
        <div class="tc-anniu">
          <button @click="setDefault">确认</button>
          <button @click="guanbitc">取消</button>
        </div>
      </div>
      <div v-else>
        <div class="tc-conent"><img src="/static/img/qiye/dengji@1x.png" alt=""></div>
        <div class="tc-text"><span>已设为默认企业</span></div>
      </div>
    </div>
    <!-- 开通sass服务弹窗 -->
    <div class="tanchuang ktsass" v-if="isOpensaas">
      <div class="over"><img @click="guanbitc" class="right xs" src="/static/img/qiye/chahao.png" alt=""></div>
      <div v-if="ktsass">
        <div class="tc-text tc-queren"><span>是否确认开通saas服务？</span></div>
        <div class="tc-anniu">
          <button @click="confirmSaas">确认</button>
          <button @click="guanbitc">取消</button>
        </div>
      </div>
      <div v-else>
        <div class="tc-text tc-conent"><span>开通成功</span></div>
        <div style="margin-top: 40px;"><span @click="showServeWin" class="gs-btn1 dianji">进入服务</span></div>
      </div>
    </div>
    <!-- 该企业已开通服务弹窗 -->
    <div class="tanchuang qy-yikaitong" v-if="isokopensaas" style="width: 493px;height: 264px;">
      <div class="over"><img @click="guanbitc" class="right xs" src="/static/img/qiye/chahao.png" alt=""></div>
      <div>
        <div class="tc-okkaitong"><span>该企业已开通服务</span></div>
        <div class="tc-context">
            <p>进入服务方式一：可通过添加企业中加入企业申请，待管理员批准通过</p>
            <p>进入服务方式二：联系管理员邀请加入</p>
            <p><span>saas服务管理员：</span><span>{{admin}}</span></p>
            <p><span>saas服务管理员手机号：</span><span>{{adminMobile}}</span></p>
            <p><span>saas服务管理员邮箱：</span><span></span></p>
        </div>
      </div>
    </div>
    <!-- 开通10个不能继续开通 -->
    <div class="tanchuang nokaitong" v-if="isNoopen">
      <div class="over"><img @click="guanbitc" class="right xs" src="/static/img/qiye/chahao.png" alt=""></div>
      <div>
        <div class="tc-conent"><img src="/static/img/qiye/buneng kaitong@1x.png" alt=""></div>
        <div class="tc-text">
          <p>您已开通了10个企业服务</p>
          <p>不能再继续开通服务</p>
        </div>
      </div>
    </div>

        <div class="gs-qiyebox over" ref="qiyebox" :class="isheigh ? 'heigh' : ''" style="padding-bottom: 50px;">
            <div class="gs-xiangqing dotted">
                <router-link to="/addenterprise">
                    <div class="gs-tianja" @click= "addEnterprise">
                        <img src="/static/img/Fill 1.png" alt="">
                        <p>添加企业</p>
                    </div>
                </router-link>
            </div>
            <div v-for="(d , i) in arr " :key="i" class="gs-xiangqing gs-list">
                <!-- 上 -->
                <div class="gs-shang">
                    <el-dropdown v-if= "d.saas_" trigger="hover" size="mini" placement='bottom-start'>
                        <img  class="shezhi xs" src="/static/img/shezhi.png" alt="设置">
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-if = "d.default_">
                                <span @click="hideDefaultWin(i)">取消默认</span>
                            </el-dropdown-item>
                            <el-dropdown-item v-else>
                                <span @click="showDefaultWin(i)">设为默认</span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <img v-if = "d.default_" class="gs-morenimg" src="/static/img/moren2x.png" alt="">
                </div>
                <!-- 中 -->
                <div class="gs-xqleft">
                    <!-- 点击查看企业详情 -->
                    <p class="gs-qynema"><span @click= "getEnterpriseInfo(d)" class="xs">{{d.name}}</span></p>
                </div>
                <!-- 下 -->
                <div class="gs-xqright over">
                    <div v-if= "d.saas_" class="gs-xqright-left left" style="margin-top: 5%;width:67%">
                        <p><span>管理员：</span>{{d.admin}}</p>
                        <p><span>联系方式：</span>{{d.adminMobile}}</p>
                        <!-- <p><span>开通日期：</span></p> -->
                    </div>
                    <div class="gs-border gs-xqright-right right">
                        <span v-if= "d.saas_" class="gs-btn1 xs green" @click="selectServe(d.id)">进入服务</span>
                        <span v-else @click="showOpenServeWin(d.id , i)" class="gs-btn1 kaitong xs blue">开通服务</span>
                    </div>
                </div>
            </div>
        </div>
        <div style="text-align: center;">
            <el-pagination
                background
                :page-size= size
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total= list.length>
            </el-pagination>
        </div>
    </div>
</template>

<script>
 import Session from '@/utils/session'
    export default {
        data(){
            return {
                issetDefault: false,//设置默认
                isOpensaas: false,//开通saas弹窗
                isNoopen: false,//开通10个不能继续开通
                isokopensaas: false,//已开通服务
                index:0,
                saasid:null,
                saasindex:0,
                ktsass: true,//开通saas
                isDefault: true,//开通默认
                isAutoLogin: this.$store.state.isAutoLogin,
                mytoken: Session.get(),//本地储存的用户信息
                list: [],//企业列表信息
                arr:[],
                isheigh:false,//是否添加默认高度
                admin: '',
                adminMobile: '',
                size:11,
            }
        },
        computed :{
            setTokenPage() {
                return this.$url.web + '/set-token.html'
            },
        },
        watch:{
            list:function(){
                this.$nextTick(function(){
                    this.boxheight();
                })
            }
        },
        created(){
            let mytoken = Session.get();
            let token = String(mytoken.token);
            //企业列表
            this.$store.state.isloading = true;
            this.$ajax({
                    url: this.$url.api+"/api/account/accountCenter/company/list",//http://192.168.253.41:8560
                    method: 'get',
                    params: {
                        mobile: mytoken.account.mobile
                    },
                    headers: {
                        "Authorization":token,
                        "Content-Type":"application/x-www-form-urlencoded"
                    }
                })
                .then(res=>{
                    this.$store.state.isloading = false;
                    if (res.data.success) {
                        const frame = window.frames[window.frames.length - 1];
                        this.list = res.data.data.spaces;
                        this.pagingtion(1,this.size);
                        let enterprise = [];
                        let qyname = [];
                        for (let i = 0; i < this.list.length; i++) {
                            qyname.push(this.list[i].name);
                            window.sessionStorage.setItem('companyname',JSON.stringify(qyname))
                            if (this.list[i].saas_) {
                                let addenterprise = {'id':'', 'logoUrl': '', 'name': '','dcName':''};
                                addenterprise.id = this.list[i].id;
                                addenterprise.logoUrl = this.list[i].logoUrl || null;
                                addenterprise.name = this.list[i].name;
                                addenterprise.dcName = this.list[i].dcName || null;
                                enterprise.push(addenterprise)
                            }
                        };
                        let session = Session.get();
                        if (enterprise.length != session.account.companies.length) {
                            session.account.companies = enterprise;
                            Session.set(session);
                        };
                        let hasCompany = res.data.data.hasDefaultCompany;
                        let companyId = res.data.data.defaultCompanyId;
                        let token = res.data.data.token.token;
                        if (this.isAutoLogin) {
                            if (hasCompany) {
                                let session = Session.get();
                                session.account.companyId=companyId;
                                session.span = session.timestamp - new Date().getTime();
                                session.token=token;
                                frame.postMessage(JSON.stringify(session), '*');
                                window.location.href = this.$url.web
                            }
                        }
                        this.$store.commit('Loginfalse')
                    } else {
                        this.$message.error('获取企业列表信息失败，请重试');
                    }
                })
                .catch(err=>{
                    // console.log("请求失败",err)
                })
        },
        mounted(){
            this.boxheight();
        },
        methods: {
            //分页
            handleCurrentChange(val){
                document.documentElement.scrollTop = 0;
                this.pagingtion(val,this.size);
            },
            //分页函数
            pagingtion(min,max){
                //定义一个空数组存放分割的数据
                this.arr = [];
                //对源数组进行分割
                let list = this.list.concat().splice(min * max - max, max);
                //循环插入新数组中进行展示
                for (let i = 0; i < list.length; i++) {
                    this.arr.push(list[i]);
                }
            },
            //设置默认企业
            showDefaultWin(i){
                this.index = i;
                this.issetDefault = true;
            },
            //确认默认企业
            setDefault(){
                let i = this.index;
                let token = this.mytoken.token;
                this.$ajax({
                    url: this.$url.api+'/api/account/accountCenter/bind/defaultCompany',
                    method: 'post',
                    data:{
                        companyId: this.list[i].id,
                        accountId: this.mytoken.account.id
                    },
                    headers: {
                        "Authorization":token,
                    }
                })
                .then(res=>{
                    // console.log('请求成功',res);
                    this.isDefault = false;
                    this.$router.go(0);
                })
            },
            // 取消默认企业
            hideDefaultWin(i){
                this.$store.state.isloading = true;
                let token = this.mytoken.token;
                this.$ajax({
                    url: this.$url.api+'/api/account/accountCenter/unBind/defaultCompany',
                    method: 'post',
                    data:{
                        companyId: this.list[i].id,
                        accountId: this.mytoken.account.id
                    },
                    headers: {
                        "Authorization":token,
                    }
                })
                .then(res=>{
                    // this.$store.state.isloading = false;
                    if (res.data.success) {
                        this.$router.go(0);
                    }
                })
                .catch(err=>{
                    // console.log('请求失败',err);
                });
            },
            //进入服务
            selectServe(id){
                let token1 = this.mytoken.token;
                const frame = window.frames[window.frames.length - 1];
                this.$ajax({
                    url: this.$url.api+'/api/auth/switch/company?companyId='+id,
                    method :'get',
                    headers: {
                        "Authorization":token1
                    }
                })
                .then(res=>{
                    let mytoken = res.data.data.token;
                    let session = Session.get();
                    session.account.companyId=id;
                    session.span = session.timestamp - new Date().getTime();
                    session.token=mytoken;
                    frame.postMessage(JSON.stringify(session), '*');
                    window.location.href = this.$url.web
                })
                .catch(err=>{
                    // console.log('请求失败',err)
                })
            
            },
            //开通saas服务开通数量达到10的时候禁止开通
            showOpenServeWin(id , i){
                let saasNum = [];
                let list = this.list;
                for (let j = 0; j < list.length; j++) {
                    if (list[j].saas_) {
                        saasNum.push(list[j].saas_)
                    }
                }
                if (saasNum.length >= 10) {
                    this.isNoopen = true;
                } else {
                    this.isOpensaas = true;
                }
                this.saasindex = i;
                this.saasid = id;
            },
            confirmSaas(){//确认saas开通
                let i = this.saasindex;
                let token = this.mytoken.token;
                let qyname = this.list[i].name;//公司名字
                let address = this.list[i].address;//公司详细地址
                let name = this.list[i].realname;//名字
                let email = this.list[i].email;//邮箱
                let mobile = this.mytoken.account.mobile;//手机号
                let uu = this.list[i].uu;
                let company = {'name':qyname,'address':address};
                let account = {'realname':name,'email':email,'mobile':mobile, 'uu':uu}
                this.$ajax({
                    url: this.$url.api+"/api/account/accountCenter/companyAccount/save",
                    method: 'post',
                    data: {
                        companyRegDTO:company,
                        accountRegDTO:account,
                        type:1
                    },
                    headers: {
                        "Authorization":token
                    }
                })
                .then(res=>{
                    // console.log('请求成功',res)
                    if (res.data.success) {
                        this.saasid = res.data.data;
                        this.ktsass = false;
                        let id = res.data.data;
                        let name = qyname;
                        let logoUrl = null;
                        let addenterprise = {'id':id, 'logoUrl': logoUrl, 'name': name};
                        let session = Session.get();
                        session.account.companies.push(addenterprise);
                        Session.set(session);
                        this.$router.go(0);
                    } else {
                        let msg = res.data.message;
                        let name = msg.split(" ")[1];
                        this.admin = name.split('(')[0];
                        this.adminMobile = name.split('(')[1].split(')')[0];
                        this.isokopensaas = true;
                    }
                })
                .catch(err=>{
                    // console.log('请求失败',err)
                })
            },
            //进入saas服务
            showServeWin(){
                let id = this.saasid;
                this.isOpensaas = false;
                this.selectServe(id)
            },
            //查看企业详情
            getEnterpriseInfo(d){
                document.documentElement.scrollTop = 0;
                window.sessionStorage.setItem('content',JSON.stringify(d))
                this.$router.push({path:'/details'});
            },
             //添加企业
            addEnterprise(){
                document.documentElement.scrollTop = 0;
            },
            //关闭弹窗
            guanbitc(){
                this.issetDefault = false;
                this.isOpensaas = false;
                this.isNoopen = false;
                this.isokopensaas = false
            },
            //没有内容也要有一定的高度
            boxheight(){
                let H = this.$refs.qiyebox.offsetHeight;
                if (H < 500) {
                    this.isheigh = true
                } else {
                    this.isheigh = false
                }
            },
        }
    }
</script>

<style scoped>
.heigh {
    height: 500px;
}
.gs-xqright {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.gs-morentop {
    position: absolute;
    margin-top: 0px;
    left: 5px;
    display: none;
}
.gs-list {
    background-image: url(/static/img/list.png);
    background-position-x: 50%;
    background-position-y: 84%;
    background-size: 157%;
}
.green:hover {
    background: #2da74a;
}
.blue:hover {
    background: #0f6fd2;
}
.tc-context > p {
    font-size: 14px;
}
.el-dropdown {
    line-height: 25px;
}
</style>