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

<template>
    <div>
        <div class="tanchuang addspace" v-if="isadd">
            <div class="tc-conent"><img src="/static/img/qiye/dengji@1x.png" alt=""></div>
            <div class="tc-text"><span>添加企业成功</span></div>
        </div>
        <div>
            <div class="gs-worp qy-worp tj-up" @click="hieadlookup">
                <div class="qy-title" style="position: relative;">
                    <ul class="over">
                        <li class="left xs" v-for="(d, i) in tab" :key="i" :class= "{qyactive:nowindex == i}" @click="tabwatch(i)">{{d.name}}</li>
                    </ul>
                </div>
                <div class="qy-conent" :class= "{showqiye:nowindex == 0}" style="padding-top: 60px;">
                    <ul style="padding:0;text-align: center;">
                        <li>
                            <span class="qy-biaoti"><span class="xingxing">*</span>企业名称</span>
                            <input class="inpind" ref="qyname" @change= "spaceName" @focus="heidqyname1" @blur="showqyname1" type="text" :class= "{showborder:qymingzi&&isspaceName&&isspaceNameempty}" placeholder="请填写企业全称">
                            <div v-show="isqyname1" class="qy-Tips Tips-buttom"><span ref="qyno" style="color:red"></span></div>
                        </li>
                        <li>
                            <span class="qy-biaoti">所属行业</span>
                            <select @change="industry" @click="colors" ref="qyindustry" class="industry border" style="padding-left:5px;color: #BCC8D8;" name="selectAge" id="selectAge">    
                                <option value="" disabled selected hidden>请选择所属行业</option>
                                <option value="贸易零售">贸易零售</option>
                                <option value="制造加工">制造加工</option>
                                <option value="服务业">服务业</option>
                                <option value="教育">教育</option>
                                <option value="信息传媒">信息传媒</option>
                                <option value="金融">金融</option>
                                <option value="高新科技">高新科技</option>
                                <option value="电子商务">电子商务</option>
                                <option value="互联网">互联网</option>
                                <option value="医疗服务">医疗服务</option>
                                <option value="艺术娱乐">艺术娱乐</option>
                                <option value="地产建筑">地产建筑</option>
                                <option value="公共服务">公共服务</option>
                                <option value="开采冶金">开采冶金</option>
                                <option value="交通仓储">交通仓储</option>
                                <option value="农林牧渔">农林牧渔</option>
                                <option value="其他">其他</option>   
                            </select>
                        </li>
                        <li>
                            <span class="qy-biaoti"><span class="xingxing">*</span>企业地址</span>
                            <input ref="address" @blur="address" @focus="heidqyaddress" class="inpind" type="text" :class= "{showborder:isaddress&&isaddressname}" placeholder="输入企业详细地址">
                            <!-- <div class="addbiaoqian">
                                <v-distpicker @selected= 'selected' @province= 'qyprovince' :placeholders= 'placeholder'></v-distpicker>
                                <input ref="address" @change="address" class="qy-xiangxi" type="text" placeholder="输入企业详细地址">
                            </div> -->
                            <div v-show="isqyaddress" class="qy-Tips Tips-buttom">
                                <span ref="ress" style="color:red"></span>
                            </div>
                        </li>
                        <li>
                            <span class="qy-biaoti"><span class="xingxing">*</span>您的姓名</span>
                            <input class="inpind" @blur= "yzusername" @focus="heidyzusername" ref="name" :class= "{showborder:isname&&isnameempty}" type="text" value="" placeholder="请输入姓名">
                            <div v-show="isyzusername" class="qy-Tips Tips-buttom"><span ref="usname" style="color:red"></span></div>
                        </li>
                        <li><span class="qy-biaoti">手机号</span><span class="qy-mobile industry">{{mytoken.account.mobile}}</span></li>
                        <li style="margin-bottom: 64px;">
                            <span class="qy-biaoti">邮箱</span>
                            <input class="inpind" @blur="email" @focus="heidemail" ref="email" :class= "{showborder:isemail}" type="email" value="">
                            <div v-show="isheidemail" class="qy-Tips Tips-buttom"><span style="color:red" v-html="Email"></span></div>
                        </li>
                        <li>
                            <div class="qy-anniu">
                                <span @click= "Preservation" class="qy-xiugai dianji" style="left: 0;">保存</span>
                                <span @click= "tjquxiao" class="qy-quxiao xs">取消</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="qy-conent jr-conent" :class= "{showqiye:nowindex == 1}">
                    <ul style="padding:0;position: relative;">
                        <li>
                            <span class="qy-biaoti"><span class="xingxing marght">*</span>查找企业</span>
                            <input @click.stop @input="Testingqyname" @focus="Testingqyname" @blur="showwarning" ref="lookupqyname" class="inpind" :class= "{showborder:isgsname}" type="text"  placeholder="输入企业名称或管理员">
                            <span v-show="iswarning" class="warning" ref="warningqyname"></span>
                        </li>
                        <!-- 匹配企业后显示的内容 -->
                        <!-- <li v-if="isqylist" class="hied" :class= "{showlookup:islookup}"> -->
                            <div class="lookup hied" :class= "{showlookup:islookup}" @click.stop>
                                <ul>
                                    <li v-for="(d, i) in arr" :key="i" @click="qylist(i)" :class="{'hui':newindex === i}">
                                        <!-- <span>{{d.adminMobile}}</span> -->
                                        <span>{{d.admin}}</span>
                                        <span>{{d.name}}</span>
                                    </li>
                                </ul>
                            </div>
                        <!-- </li> -->
                        <li>
                            <span class="qy-biaoti"><span class="xingxing marght">*</span>姓<span style="width:2em;display: inline-block;"></span>名</span>
                            <input @blur.prevent="Testingname" @focus="showTestname" class="inpind" type="text" :class= "{showborder:isTestingname&&isregname}" ref="lookupname" placeholder="输入真实姓名，待管理员审核">
                            <span v-show="isTestname" class="warning" style="width:110px" ref="warningname"></span>
                        </li>
                        <li>
                            <div class="qy-anniu" style="margin-top: 90px;">
                                <span @click="Submission" class="qy-xiugai dianji" style="left: 0;">提交</span>
                                <span @click= "tjquxiao" class="qy-quxiao xs">取消</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Session from '@/utils/session'
// import VDistpicker from 'v-distpicker'
import { setTimeout, clearTimeout } from 'timers';
    export default {
        data(){
            return {
                // province:'',//省
                // city:'',//市
                // area:'',//区
                qymingzi: false,//企业名是否注册
                Email: '',
                mytoken: Session.get(),//本地储存的用户信息
                reg: new RegExp(/[\@\#\$\%\&\*!！\￥]/),//非法字符
                regname:new RegExp(/[\@\#\$\%\&\*!！\￥0-9]/),//非法字符加数字
                isaddress: false,//公司地址验证
                isaddressname: false,//公司地址是否为空
                isname: true,//姓名验证
                isnameempty:false,//姓名是否为空
                isspaceName: false,//公司名验证
                isspaceNameempty:false,//公司名是否为空
                isemail: true,//验证邮箱
                // disabled: true,
                isadd: false,//添加成功弹窗
                // placeholder:{province:"省", city:"市", area:"区"},
                // placeholde:{province:"", city:"", area:""},
                tab:[
                    {name:'创建新企业'},
                    {name:'加入企业'},
                ],
                nowindex:0,
                newindex:'',
                islookup:false,
                isTestingname:false,
                isregname:false,
                companyId:null,
                admin:null,
                isgsname:false,
                arr:[],
                times:null,
                iswarning:false,//加入企业提示语
                isTestname:false,//加入企业姓名提示音
                isqyname1:false,
                isqyaddress:false,//地址
                isyzusername:false,
                isheidemail:false,
                iscompanyname:false,
            }
        },
        components:{
            // VDistpicker
        },
        mounted(){
            if (this.mytoken.account.realname) {
                this.$refs.name.value = this.mytoken.account.realname;
                this.isnameempty = true;
            } else {
                this.$refs.name.value = '';
            };
            if (this.mytoken.account.email) {
                this.$refs.email.value = this.mytoken.account.email;
            } else {
                this.$refs.email.value = '';
            }
        },
        methods: {
            tabwatch(i){
                this.nowindex = i;
            },
            colors(){
                this.$refs.qyindustry.style.color = 'black'
            },
            // 行业
            industry(){
                this.$refs.qyindustry.style.border = '1px solid #1E88F5'
            },
            //取消添加企业
            tjquxiao(){
                document.documentElement.scrollTop = 0;
                this.$router.push({name:'company',}); 
            },
            //检测企业名称1
            spaceName(){
                let qyname = this.$refs.qyname.value.replace(/\s+/g, "");//公司名字过滤空格
                if(qyname == ''){
                    this.$refs.qyno.innerHTML = ' <img style="width:14px" src="/static/img/warning.png" alt=""> 企业名称不能为空';
                    this.isspaceNameempty = false;
                } else {
                    this.isspaceNameempty = true;
                    if (this.reg.test(qyname)) {
                        this.$refs.qyno.innerHTML = ' <img style="width:14px" src="/static/img/warning.png" alt=""> 不能包含符号等非法字符';
                        this.isspaceName = false;
                    } else {
                        this.$refs.qyno.innerHTML = '';
                        this.isspaceName = true;
                        let token = this.mytoken.token;
                        this.$ajax({
                            url: this.$url.api+"/api/account/accountCenter/checkSpaceName"+`?spaceName=${qyname}`,
                            method :'get',
                            headers: {
                                "Authorization":token
                            }
                        })
                        .then(res=>{
                            if (res.data.data.success) {
                                this.qymingzi = true;
                                this.$refs.qyno.innerHTML = '<span style="color:green"><img style="width:14px" src="/static/img/ok.png" alt=""></span>';
                            } else {
                                this.$refs.qyno.innerHTML = ' <img style="width:14px" src="/static/img/warning.png" alt=""> 该企业已在优软云注册';
                                this.qymingzi = false;
                            }
                        })
                    }
                }
            },
            //隐藏企业1提示语
            heidqyname1(){
                this.isqyname1 = false;
            },
            showqyname1(){
                let qyname = this.$refs.qyname.value.replace(/\s+/g, "");//公司名字过滤空格
                if(qyname == ''){
                    this.$refs.qyno.innerHTML = ' <img style="width:14px" src="/static/img/warning.png" alt=""> 企业名称不能为空';
                };
                this.isqyname1 = true;
            },
            //检测企业名称2
            Testingqyname(){
                this.iswarning = false;//提示语隐藏
                let qyname = this.$refs.lookupqyname.value.replace(/\s+/g, "");//企业名字
                let token = this.mytoken.token;
                clearTimeout(this.times);
                if(qyname == ''){
                    this.$refs.warningqyname.innerHTML = '<img style="width:14px" src="/static/img/warning.png" alt=""> 企业或管理员不能为空';
                    this.islookup = false;
                } else {
                    this.times = setTimeout(()=>{
                        this.$ajax({
                            url: this.$url.api+"/api/account/accountCenter/company/isOpen",//http://192.168.253.41:8560
                            method:'GET',
                            params: {
                                companyName: qyname
                            },
                            headers:{
                                "Authorization":token,
                            }
                        })
                        .then(res=>{
                            if (res.data.success) {
                                this.newindex = '';
                                this.arr = res.data.data;
                                this.$refs.warningqyname.innerHTML = '';
                                this.islookup = true;
                                this.companyId = null;
                                this.isgsname = true;//公司是否存在
                            } else if (res.data.success == false && res.data.message == '公司不存在') {
                                this.$refs.warningqyname.innerHTML = '<img style="width:14px" src="/static/img/warning.png" alt=""> 企业或管理员不存在';
                                this.islookup = false;
                                this.isgsname = false;//公司是否存在 
                            } else {
                                this.$message.error('请求失败，请重试');
                                this.islookup = false; 
                                this.$refs.warningqyname.innerHTML = '<img style="width:14px" src="/static/img/warning.png" alt="">'
                            }
                        })
                    },500)
                }
            },
            //企业名称2提示语显示
            showwarning(){
                let qyname = this.$refs.lookupqyname.value.replace(/\s+/g, "");//企业名字
                if (!this.companyId && qyname!='') {
                    this.$refs.warningqyname.innerHTML = '<img style="width:14px" src="/static/img/warning.png" alt=""> 请选择要加入的企业';
                } else {
                    this.$refs.warningqyname.innerHTML = '<img style="width:14px" src="/static/img/ok.png" alt="">'
                }
                setTimeout(()=>{
                    this.iswarning = true;
                },100)
            },
            //验证个人姓名1
            yzusername(){
                this.isyzusername = true;
                let name = this.$refs.name.value.replace(/\s+/g, "");//姓名过滤空格
                if (name == '') {
                    this.$refs.usname.innerHTML = '<img style="width:14px" src="/static/img/warning.png" alt=""> 个人姓名不能为空';
                    this.isnameempty = false;
                } else {
                    this.isnameempty = true;
                    if (this.reg.test(name)) {
                        this.$refs.usname.innerHTML = '<img style="width:14px" src="/static/img/warning.png" alt=""> 不能包含符号等非法字符';
                        this.isname = false;
                    } else {
                        this.$refs.usname.innerHTML = '<img style="width:14px" src="/static/img/ok.png" alt="">';
                        this.isname = true;
                    }
                }
            },
            heidyzusername(){
                this.isyzusername = false;
            },
            //验证个人姓名2
            Testingname(){
                this.isTestname = true;
                let name = this.$refs.lookupname.value.replace(/\s+/g, "");//姓名过滤空格
                if (name == '') {
                    this.$refs.warningname.innerHTML = '<img style="width:14px" src="/static/img/warning.png" alt=""> 姓名不能为空';
                    this.isTestingname = false;
                } else {
                    this.isTestingname = true;
                    if (this.regname.test(name)) {
                        this.$refs.warningname.innerHTML = '<img style="width:14px" src="/static/img/warning.png" alt=""> 姓名不能包含符号、数字等非法字符';
                        this.isregname = false;
                    } else {
                        this.$refs.warningname.innerHTML = '<img style="width:14px" src="/static/img/ok.png" alt="">';
                        this.isregname = true;
                    }
                }
            },
            //个人姓名2提示语隐藏
            showTestname(){
                this.isTestname = false;
            },
            // 选择要加入的企业
            qylist(i){
                let companyName = JSON.parse(window.sessionStorage.getItem("companyname"));
                this.companyId = this.arr[i].id;
                this.admin = this.arr[i].admin;
                this.newindex = i;
                this.$refs.lookupqyname.value = this.arr[i].name;
                this.islookup = false;
                for (let j = 0; j < companyName.length; j++) {
                    if (this.arr[i].name == companyName[j]) {
                        this.iscompanyname = true
                        break
                    } else {
                        this.iscompanyname = false
                    }
                }
                if (this.iscompanyname || this.admin == this.mytoken.account.realname) {
                    this.$refs.warningqyname.innerHTML = '<img style="width:14px" src="/static/img/warning.png" alt=""> 您的账户已在企业服务中，请勿重复加入';
                } else {
                    this.$refs.warningqyname.innerHTML = '<img style="width:14px" src="/static/img/ok.png" alt="">';
                    // this.$refs.lookupqyname.style.border = '1px solid #1E88F5';
                }
            },
            //隐藏企业列表
            hieadlookup(){
                this.islookup = false;
            },
            //加入企业提交按钮
            Submission(){
                let token = this.mytoken.token;
                let qyname = this.$refs.lookupqyname.value.replace(/\s+/g, "");//企业名字
                let username = this.$refs.lookupname.value.replace(/\s+/g, "");//姓名过滤空格
                if (qyname == '') {
                    this.$message.error('企业或管理员不能为空');
                } else if(!this.isgsname) {
                    this.$message.error('企业或管理员不存在');
                } else if (!this.companyId) {
                    this.$message.error('请选择要加入的企业');
                } else if (this.admin == this.mytoken.account.realname || this.iscompanyname) {
                    this.$message.error('您的账户已在企业服务中，请勿重复加入');
                } else if (!this.isTestingname) {
                    this.$message.error('姓名不能为空');
                } else if (!this.isregname) {
                    this.$message.error('姓名不能包含符号、数字等非法字符');
                } else {
                    this.$store.state.isloading = true;
                    this.$ajax({
                        url: this.$url.api+'/api/account/accountCenter/company/join',
                        method:'POST',
                        data:{
                            username:username,
                            accountId:this.mytoken.account.id,
                            companyId:this.companyId,
                        },
                        headers:{
                            "Authorization":token,
                        }
                    })
                    .then(res=>{
                        this.$store.state.isloading = false;
                        if (res.data.success) {
                            this.$message.success('提交成功，待管理员批准加入');
                            // this.$store.state.ishongdian = true;//显示红点
                            setTimeout(()=>{
                                this.$router.push({name:'company'});
                                document.documentElement.scrollTop = 0;
                            },3000)
                        } else {
                            this.$message.error(res.data.message);
                        }
                    })
                }
            },
            //验证公司详细地址
            address(){
                this.isqyaddress = true;
                let address = this.$refs.address.value.replace(/\s+/g, "");//过滤空格
                if (address == '') {
                    this.$refs.ress.innerHTML = '<img style="width:14px" src="/static/img/warning.png" alt=""> 企业地址不能为空';
                    this.isaddressname = false;
                } else {
                    this.isaddressname = true;
                    if (this.reg.test(address)) {
                        this.$refs.ress.innerHTML = '<img style="width:14px" src="/static/img/warning.png" alt=""> 不能包含符号等非法字符';
                        this.isaddress = false;
                    } else {
                        this.$refs.ress.innerHTML = '<img style="width:14px" src="/static/img/ok.png" alt="">';
                        this.isaddress = true;
                    }
                }
            },
            //地址提示隐藏
            heidqyaddress(){
                this.isqyaddress = false;
            },
            email(){
                this.isheidemail = true;
                let reg = new RegExp("^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$"); 
                let email = this.$refs.email.value;//邮箱
                if (email == '') {
                    this.isemail = true;
                    this.Email = '';
                } else {
                    if (!reg.test(email)) {
                        this.Email = '<img style="width:14px" src="/static/img/warning.png" alt=""> 请填写正确的邮箱';
                        this.isemail = false;
                    } else {
                        this.Email = '<img style="width:14px" src="/static/img/ok.png" alt="">';
                        this.isemail = true;
                    }
                }
            },
            heidemail(){
                this.isheidemail = false;
            },
            //保存
            Preservation(){
                this.listLoading = true;
                let qyname = this.$refs.qyname.value.replace(/\s+/g, "");//公司名字
                let qyindustry = this.$refs.qyindustry.value;//所属行业
                let address = this.$refs.address.value.replace(/\s+/g, "");//公司详细地址
                let name = this.$refs.name.value.replace(/\s+/g, "");//个人姓名
                let email = this.$refs.email.value;//邮箱
                let token = this.mytoken.token;
                let uu = this.mytoken.account.uu;
                let mobile = this.mytoken.account.mobile;//手机号
                let company = {'name':qyname,'address':address,'type':qyindustry};
                let account = {'realname':name,'email':email,'mobile':mobile, 'uu':uu};
                // console.log('姓名',name)//个人姓名
                // console.log('企业',qyname)//企业姓名
                // console.log('企业名字',this.qymingzi)//企业有没有注册
                // console.log('企业地址',this.isaddress)//企业地址
                // console.log('姓名',this.isname)//个人姓名正则
                // console.log('企业名字',this.isspaceName)//企业名字正则
                // console.log('邮箱',this.isemail)//邮箱正则
                if (name == '') {
                    this.$message.error('个人姓名不能为空');
                } else if (qyname == '') {
                    this.$message.error('企业名称不能为空');
                } else {
                    switch (this.isspaceName && this.isaddress && this.isname && this.qymingzi && this.isemail && this.isaddressname) {
                        case this.isspaceName:
                        if (this.isspaceName) {
                            this.$ajax({
                                url: this.$url.api+"/api/account/accountCenter/companyAccount/save",//http://192.168.253.31:8560
                                method: 'post',
                                data: {
                                    companyRegDTO:company,
                                    accountRegDTO:account,
                                    type: 0
                                },
                                headers: {
                                    "Authorization":token,
                                }
                            })
                            .then(res=>{
                                this.isadd = true;//添加成功弹窗
                                setTimeout(()=>{
                                    document.documentElement.scrollTop = 0;
                                    let session = Session.get();
                                    session.account.realname = name;
                                    session.account.email = email;
                                    Session.set(session);
                                    // this.$router.push({name:'company'})
                                    this.$router.push({path: '/enterprise'});
                                },3000)
                            })
                        } else {
                            this.$message.error('企业名称不能包含符号等非法字符');
                        }
                        break;
                        case this.qymingzi:
                        this.$message.error('该企业已在优软云注册');
                        break;
                        case this.isaddressname:
                        this.$message.error('企业地址不能为空');
                        break;
                        case this.isaddress:
                        this.$message.error('企业地址不能包含符号等非法字符');
                        break;
                        case this.isname:
                        this.$message.error('个人姓名不能包含符号等非法字符');
                        break;
                        case this.isemail:
                        this.$message.error('请填写正确的邮箱');
                        break;
                    }
                }
                this.listLoading = false;
            },
            //获取省市区
            // selected(data){
            //     this.province = data.province.value;
            //     this.city = data.city.value;
            //     this.area = data.area.value;
            //     this.disabled= false
            // },
            // qyprovince(){
            //     this.placeholder = this.placeholde
            // },
        }
    }
</script>

<style scoped>
.addspace {
    height: 200px;
    border: 1px solid #cccccc
}
.tj-up {
    width: 100%;
    margin-bottom: 0px;
    padding-bottom: 1px;
    border-radius: 4px 4px 0 0;
    /* margin-top: -30px; */
    border: 1px solid #EEEEEE;
    box-shadow: 0 20px 60px 10px rgba(13,37,62,0.05);
    border-radius: 4px;
}
.tj-up li {
    margin-bottom: 26px;
}
.tj-down {
    width: 100%;
    border-top: 0;
    margin-bottom: 100px;
}
.tj-down li {
    margin-bottom: 26px;
}
.tj-down div:nth-child(2) {
    margin-bottom: 70px;
}
.addbiaoqian>>>.distpicker-address-wrapper select {
    height: 30px;
}
.addbiaoqian>>>.distpicker-address-wrapper {
    width: 130%;
    margin-bottom: 10px;
}
.qy-Tips {
    margin: 0;
    text-align: left;
    height: 26px;
    display: inline-block;
    position: absolute;
    margin-left: 10px;
}
.Tips-buttom {
    /* margin-left: 22%; */
}
.inpind {
    padding-left: 10px;
}
.qyactive {
    border-bottom: 3px solid  #1E88F5;
    color: #243A52;
}
.qy-conent {
    display: none;
}
.showqiye {
    display: block !important;
}
.warning {
    color: red;
    margin-left: 25px;
    font-size: 12px;
    position: absolute;
    display: inline-block;
    width: 150px;
    text-align: left;
    text-indent: -16px;
}
.warning img {
    width: 14px;
}
.marght {
    margin-right: 5px;
}
.hui {
    background: #c5c5c5 !important;
}
.lookup > ul > li:hover {
    background: #f5f4f4
}
.lookup > ul {
    max-height: 140px;
    overflow-y: auto;
}
.qy-mobile {
    display: inline-block;
    text-align: left;
}
.qy-anniu > span {
    margin-left: 40px;
}
</style>