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">
      <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><span>saas服务管理员：</span><span>{{arr[0].admin}}</span></p>
          <p><span>saas服务管理员手机号：</span><span>{{mytoken.account.mobile}}</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" ref="qiyebox" style="margin-top: 70px;" :class="isheigh ? 'heigh' : ''">
            <!-- 点击查看企业详情 -->
            <div v-for="(d , i) in arr " :key="i" class="gs-xiangqing xs">
                <div class="left gs-xqleft" @click= "getEnterpriseInfo(d)">
                    <div class="gs-lefttext">
                        <p class="gs-qynema"><span>企业名称：</span>{{d.name}}</p>
                        <p v-if= "d.saas_" ><span>saas服务管理员：</span>{{d.admin}}</p>
                        <p v-if= "d.time"><span>开通日期：</span>{{d.time}}</p>
                    </div>
                </div>
                <div class="right gs-xqright">
                    <div class="gs-border">
                        <span v-if= "d.saas_" class="gs-btn1 dianji" @click="selectServe(d.id)">进入服务</span>
                        <span v-else @click="showOpenServeWin(d.id , i)" class="gs-btn1 kaitong xs">开通服务</span>
                    </div>
                    <div>
                        <span v-if = "d.default_" class="gs-btn2 gs-btn3">默认企业</span>
                        <span v-if="d.saas_" @click="showDefaultWin(i)" class="gs-btn2 xs">设为默认</span>
                    </div>
                </div>
            </div>
            <div class="gs-xiangqing dotted">
                <p class="gs-tianja">
                    <span @click= "addEnterprise"><router-link to="/addenterprise">+添加企业</router-link></span>
                </p>
            </div>
        </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: JSON.parse(localStorage.getItem('app-state-session')),//本地储存的用户信息
                arr: [],//企业列表信息
                isheigh:true//是否添加默认高度
            }
        },
        computed :{
            setTokenPage() {
                return this.$url.web + '/set-token.html'
            }
        },
        watch:{
            arr:function(){
                this.$nextTick(function(){
                    this.boxheight();
                })
            }
        },
        mounted(){
            let mytoken = JSON.parse(localStorage.getItem('app-state-session'));
            let token = String(mytoken.token);
            //企业列表
            this.$ajax({
                    url: this.$url.api+"/api/account/accountCenter/company/list",//http://192.168.253.31:8560
                    method: 'get',
                    params: {
                        mobile: mytoken.account.mobile
                    },
                    headers: {
                        "Authorization":token,
                        "Content-Type":"application/x-www-form-urlencoded"
                    }
                })
                .then(res=>{
                    const frame = window.frames[window.frames.length - 1];
                    this.arr = res.data.data.spaces;
                    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=JSON.parse(localStorage.getItem('app-state-session'));
                            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')
                    this.$store.state.email = res.data.data.spaces[0].adminEmail
                })
                .catch(err=>{
                    // console.log("请求失败",err)
                })
            this.boxheight();
        },
        methods: {
            //设置默认企业
            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.arr[i].id,
                        accountId: this.mytoken.account.id
                    },
                    headers: {
                        "Authorization":token,
                    }
                })
                .then(res=>{
                    // console.log('请求成功',res);
                    this.isDefault = false;
                    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=JSON.parse(localStorage.getItem('app-state-session'));
                    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 arr = this.arr;
                for (let j = 0; j < arr.length; j++) {
                    if (arr[j].saas_) {
                        saasNum.push(arr[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.arr[i].name;//公司名字
                let address = this.arr[i].address;//公司详细地址
                let name = this.arr[i].realname;//名字
                let email = this.arr[i].email;//邮箱
                let mobile = this.mytoken.account.mobile;//手机号
                let uu = this.arr[i].uu;
                let company = {'name':qyname,'address':address};
                let account = {'realname':name,'email':email,'mobile':mobile, 'uu':uu}
                // let id = this.saasid;
                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;
                    } else {
                        this.isokopensaas = true;
                    }
                })
                .catch(err=>{
                    // console.log('请求失败',err)
                })
            },
            //进入saas服务
            showServeWin(){
                let id = this.saasid;
                this.isOpensaas = false;
                // this.$options.methods.selectServe(id);
                this.selectServe(id)
            },
            //查看企业详情
            getEnterpriseInfo(d){
                document.documentElement.scrollTop = 0;
                this.$router.push({path:'/details'});
                window.sessionStorage.setItem('content',JSON.stringify(d))
            },
             //添加企业
            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 < 400) {
                    this.isheigh = true
                } else {
                    this.isheigh = false
                }
            },
        }
    }
</script>

<style scoped>
.heigh {
    height: 500px;
}
</style>