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>
        <span class="tjtishi" ref="tjtishi"></span>
        <div>
            <div class="gs-worp qy-worp tj-up">
                <div class="qy-title" style="position: relative;">
                    <span>完善企业信息</span>
                    <div class="qy-anniu">
                        <span @click= "Preservation" class="qy-xiugai dianji" style="left: -2px">保存</span>
                        <span @click= "tjquxiao" class="qy-quxiao xs">取消</span>
                    </div>
                </div>
                <div class="qy-conent">
                    <ul>
                        <li style="margin: 0">
                            <span class="qy-biaoti"><span class="xingxing">*</span>公司名称</span>
                            <input class="inpind" ref="qyname" @change= "spaceName" type="text">
                            <dir class="qy-Tips"><span ref="qyno" style="color:red"></span></dir>
                        </li>
                        <li>
                            <span class="qy-biaoti">所属行业</span>
                            <select ref="qyindustry" style="width:59%;height: 30px;padding-left:5px" name="selectAge" id="selectAge">   
                                <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>
                                <option value="其他">其他</option>   
                            </select>
                        </li>
                        <li style="height:70px;">
                            <span class="qy-biaoti left"><span class="xingxing">*</span>公司地址</span>
                            <div class="addbiaoqian">
                                <!-- <v-distpicker @province= 'qyprovince' @city= 'qycity' @area= 'qyarea'></v-distpicker> -->
                                <v-distpicker @selected= 'selected'></v-distpicker>
                                <input ref="address" @change="address" :disabled="disabled" class="qy-xiangxi" type="text" placeholder="输入企业详细地址">
                                
                            </div>
                            <div class="qy-Tips left">
                                <span ref="ress" style="color:red;margin-left:40px;"></span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="gs-worp qy-worp tj-down">
                <div class="qy-title">
                    <span>完善个人信息</span>
                </div>
                <div class="qy-conent">
                    <ul>
                        <li style="margin:0">
                            <span class="qy-biaoti"><span class="xingxing">*</span>姓名</span>
                            <input class="inpind" @change= "yzusername" ref="name" type="text" value="">
                            <div class="qy-Tips Tips-buttom"><span ref="usname" style="color:red"></span></div>
                        </li>
                        <li><span class="qy-biaoti">手机号</span><span>{{mytoken.account.mobile}}</span></li>
                        <li style='margin:0'>
                            <span class="qy-biaoti">邮箱</span>
                            <input class="inpind" @change="email" ref="email" type="email" value="">
                            <div class="qy-Tips Tips-buttom"><span style="color:red">{{Email}}</span></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Session from '@/utils/session'
import VDistpicker from 'v-distpicker'
import { setTimeout } from 'timers';
    export default {
        data(){
            return {
                province:'',//省
                city:'',//市
                area:'',//区
                qymingzi: false,//企业名是否注册
                Email: '',
                mytoken: JSON.parse(localStorage.getItem('app-state-session')),//本地储存的用户信息
                reg: new RegExp(/[\@\#\$\%\&\*!\￥]/),//非法字符
                isaddress: false,//公司地址验证
                isaddressname: false,//公司地址是否为空
                isname: true,//姓名验证
                isspaceName: false,//公司名验证
                isemail: true,//验证邮箱
                disabled: true,
                isadd: false,//添加成功弹窗
            }
        },
        components:{
            VDistpicker
        },
        mounted(){
            this.$refs.name.value = this.mytoken.account.realname == this.mytoken.account.mobile ? '' : this.mytoken.account.realname
            this.$refs.email.value = this.mytoken.account.email
        },
        methods: {
            //取消添加企业
            tjquxiao(){
                document.documentElement.scrollTop = 0;
                this.$router.push({name:'company',}); 
            },
            //检测企业名称
            spaceName(){
                let qyname = this.$refs.qyname.value.replace(/\s+/g, "");//公司名字过滤空格
                if(qyname == ''){
                    this.$refs.qyno.innerHTML = '企业名不能为空';
                } else {
                    if (this.reg.test(qyname)) {
                        this.$refs.qyno.innerHTML = '不能包含非法字符';
                        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;
                            } else {
                                this.$refs.qyno.innerHTML = '该企业已在优软云注册';
                                this.qymingzi = false
                            }
                        })
                        .catch(err=>{
                            // console.log("请求错误",err);
                        })
                    }
                }
            },
            //验证个人姓名
            yzusername(){
                let name = this.$refs.name.value.replace(/\s+/g, "");//姓名过滤空格
                if (name == '') {
                    this.$refs.usname.innerHTML = '姓名不能为空'
                } else {
                    if (this.reg.test(name)) {
                        this.$refs.usname.innerHTML = '不能包含非法字符'
                        this.isname = false
                    } else {
                        this.$refs.usname.innerHTML = ''
                        this.isname = true
                    }
                }
            },
            //验证公司详细地址
            address(){
                let address = this.$refs.address.value.replace(/\s+/g, "");//过滤空格
                if (address == '') {
                    this.$refs.ress.innerHTML = '地址不能为空'
                    this.isaddressname = false
                } else {
                    this.isaddressname = true
                    if (this.reg.test(address)) {
                        this.$refs.ress.innerHTML = '不能包含非法字符'
                        this.isaddress = false
                    } else {
                        this.$refs.ress.innerHTML = ''
                        this.isaddress = true
                    }
                }
            },
            email(){
                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 = '请填写正确的邮箱';
                        this.isemail = false
                    } else {
                        this.Email = '';
                        this.isemail = true;
                    }
                }
            },
            //保存
            Preservation(){
                let qyname = this.$refs.qyname.value.replace(/\s+/g, "");//公司名字
                let qyindustry = this.$refs.qyindustry.value;//所属行业
                let address = this.province+this.city+this.area+this.$refs.address.value.replace(/\s+/g, "");//公司详细地址
                let name = this.$refs.name.value.replace(/\s+/g, "");//个人姓名
                let email = this.$refs.email.value;//邮箱
                let mytoken = JSON.parse(localStorage.getItem('app-state-session'));
                let token = String(mytoken.token);
                let uu = mytoken.account.uu;
                let mobile = 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.$refs.tjtishi.innerHTML = '个人姓名不能为空';
                } else if (qyname == '') {
                    this.$refs.tjtishi.innerHTML = '企业名字不能为空';
                } else {
                    switch (this.qymingzi && this.isaddress && this.isname && this.isspaceName && this.isemail && this.isaddressname) {
                        case this.qymingzi:
                        if (this.qymingzi) {
                            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=>{
                                let id = res.data.data;
                                let logoUrl = null;
                                let name = qyname;
                                let addenterprise = {'id':id, 'logoUrl': logoUrl, 'name': name};
                                let session = JSON.parse(window.localStorage.getItem('app-state-session'));
                                session.account.companies.push(addenterprise);
                                Session.set(session);
                                this.isadd = true;
                                setTimeout(()=>{
                                    document.documentElement.scrollTop = 0;
                                    this.$router.push({name:'company'})
                                },1000)
                            })
                            this.$refs.tjtishi.innerHTML = '';
                        } else {
                            this.$refs.tjtishi.innerHTML = '企业名字已在优软云注册';
                        }
                        break;
                        case this.isaddressname:
                        this.$refs.tjtishi.innerHTML = '企业地址不能为空';
                        break;
                        case this.isaddress:
                        this.$refs.tjtishi.innerHTML = '企业地址不能包含非法字符';
                        break;
                        case this.isname:
                        this.$refs.tjtishi.innerHTML = '个人姓名不能包含非法字符';
                        break;
                        case this.isspaceName:
                        this.$refs.tjtishi.innerHTML = '企业名字不能包含非法字符';
                        break;
                        case this.isemail:
                        this.$refs.tjtishi.innerHTML = '请输入正确邮箱';
                        break;
                    }
                }
            },
            //获取省市区
            selected(data){
                this.province = data.province.value;
                this.city = data.city.value;
                this.area = data.area.value;
                this.disabled= false
            },
        }
    }
</script>

<style scoped>
.tjtishi {
    color: red;
    display: block;
    text-align: center;
    height: 20px;
}
.addspace {
    height: 200px;
    border: 1px solid #cccccc
}
.tj-up {
    width: 100%;
    margin-bottom: 0px;
    border-bottom: 0;
    padding-bottom: 1px;
    border-radius: 4px 4px 0 0;
    /* margin-top: -30px; */
}
.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: 110%
}
.qy-Tips {
    margin: 0;
    text-align: left;
    height: 26px;
    margin-left: 16%;
}
.Tips-buttom {
    margin-left: 22%;
}
.inpind {
    padding-left: 10px;
}
</style>