guosen-activity-web/src/views/bussiness/comps/bussinessinfo-add.vue

<template>
    <basic-container>
        <el-dialog title="商户进件信息" :append-to-body="true" :visible.sync="dialogFormVisible" top="1vh" @close="dialogClose" @open="openDialog">
            <!-- 步骤条 -->
            <div class="steps">
                <el-steps :active="active" process-status="finish" align-center>
                    <el-step title="商户主体信息"></el-step>
                    <el-step title="商户法人信息"></el-step>
                    <el-step title="商户联系人信息"></el-step>
                </el-steps>
            </div>
            <!-- 商户主体信息 -->
            <el-card style="margin-top: 40px;" v-if="active==0">
                <div style="margin-top:10px;">
                    <el-form  :model="form1" :rules="rules1" ref="form1" label-width="120px" label-position="right" size="small">
                        <el-form-item label="商户类型" prop="signType">
                            <el-select v-model="form1.signType" placeholder="请输入商户类型" clearable="true">
                                <el-option v-for="item in signTypeOptions" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="商户证件编号" prop="licenceNo">
                            <el-input v-model="form1.licenceNo" placeholder="请输入商户证件编号"></el-input>
                        </el-form-item>
                        <el-form-item label="开户许可证编号" prop="openAccountLicenceNo">
                            <el-input v-model="form1.openAccountLicenceNo" placeholder="请输入开户许可证编号"></el-input>
                        </el-form-item>
                        <el-form-item label="商户签约名称" prop="signName">
                            <el-input v-model="form1.signName" placeholder="请输入商户签约名称"></el-input>
                        </el-form-item>
                        <el-form-item label="商户简称" prop="shortName">
                            <el-input v-model="form1.shortName" placeholder="请输入商户简称"></el-input>
                        </el-form-item>
                        <el-row>
                            <el-col span="8">
                                <el-form-item label="经营地所在省" prop="province">
                                    <el-select v-model="form1.province" placeholder="请选择经营地所在省" clearable @change="loadCity">
                                        <el-option
                                                v-for="item in provinceOptions"
                                                :key="item.provinceCode"
                                                :label="item.provinceName"
                                                :value="item.provinceCode">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col span="8">
                                <el-form-item label="经营地所在市" prop="city">
                                    <el-select v-model="form1.city" placeholder="请选择经营地所在市" clearable @change="loadDistrict">
                                        <el-option
                                                v-for="item in cityOptions"
                                                :key="item.cityCode"
                                                :label="item.cityName"
                                                :value="item.cityCode">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col span="8">
                                <el-form-item label="经营地所在区" prop="district">
                                    <el-select v-model="form1.district" placeholder="请选择经营地所在区" clearable>
                                        <el-option
                                                v-for="item in districtOptions"
                                                :key="item.districtCode"
                                                :label="item.districtName"
                                                :value="item.districtCode">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="经营地址" prop="address">
                            <el-input v-model="form1.address" placeholder="请输入经营地址"></el-input>
                        </el-form-item>
                        <el-row>
                            <el-col span="12">
                                <el-form-item prop="licenceUrl" label="商户证件照片" style="width: 45%;">
                                    <el-upload class="avatar-uploader" action="/api/putObject" :show-file-list="false"
                                               :on-success="uploadLicenceUrl">
                                        <img v-if="form1.licenceUrl" :src="form1.licenceUrl" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                            <el-col span="12">
                                <el-form-item prop="handLicenceUrl" label="手持营业执照在经营场所的照片" style="width: 45%;">
                                    <el-upload class="avatar-uploader" action="/api/putObject" :show-file-list="false"
                                               :on-success="uploadHandLicenceUrl">
                                        <img v-if="form1.handLicenceUrl" :src="form1.handLicenceUrl" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item prop="openAccountLicenceUrl" label="开户许可证照片" style="width: 45%;">
                            <el-upload class="avatar-uploader" action="/api/putObject" :show-file-list="false"
                                       :on-success="uploadOpenAccountLicenceUrl">
                                <img v-if="form1.openAccountLicenceUrl" :src="form1.openAccountLicenceUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <span style="color: red">如无开户许可证，请上传基本存款账户信息表照片</span>
                    </el-form>
                </div>
            </el-card>

            <!-- 商户法人信息 -->
            <div style="margin-top: 40px;" v-if="active==1">
                <el-card style="margin-top: 10px;">
                    <el-form ref="form2"  :model="form2" :rules="rules2">
                        <el-form-item label="法人姓名" prop="legalName">
                            <el-input v-model="form2.legalName" placeholder="请输入法人姓名"></el-input>
                        </el-form-item>
                        <el-row>
                            <el-col span="8">
                                <el-form-item label="法人证件类型" prop="legalLicenceType">
                                    <el-select v-model="form2.legalLicenceType" placeholder="请输入法人证件类型" clearable="true">
                                        <el-option v-for="item in legalLicenceTypeOptions" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col span="16">
                                <el-form-item label="法人证件号码" prop="legalLicenceNo">
                                    <el-input v-model="form2.legalLicenceNo" placeholder="请输入法人证件号码"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col span="12">
                                <el-form-item prop="legalLicenceFrontUrl" label="请上传法人证件正面照片" style="width: 45%;">
                                    <el-upload class="avatar-uploader" action="/api/putObject" :show-file-list="false"
                                               :on-success="uploadLegalLicenceFrontUrl">
                                        <img v-if="form2.legalLicenceFrontUrl" :src="form2.legalLicenceFrontUrl" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                            <el-col span="12">
                                <el-form-item prop="legalLicenceBackUrl" label="法人证件反面照片" style="width: 45%;">
                                    <el-upload class="avatar-uploader" action="/api/putObject" :show-file-list="false"
                                               :on-success="uploadLegalLicenceBackUrl">
                                        <img v-if="form2.legalLicenceBackUrl" :src="form2.legalLicenceBackUrl" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-card>
            </div>

            <!-- 商户联系人信息 -->
            <div style="margin-top: 40px;" v-if="active==2">
                <el-card style="margin-top: 10px;">
                    <el-form ref="form3" :model="form3" :rules="rules3"  label-width="120px">
                        <el-form-item label="联系人姓名" prop="contactName">
                            <el-input v-model="form3.contactName" placeholder="请输入联系人姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="联系人证件号" prop="contactLicenceNo">
                            <el-input v-model="form3.contactLicenceNo" placeholder="请输入联系人证件号码"></el-input>
                        </el-form-item>
                        <el-form-item label="联系人手机号" prop="contactMobile">
                            <el-input v-model="form3.contactMobile" placeholder="请输入联系人手机号"></el-input>
                        </el-form-item>
                        <el-form-item label="联系人邮箱" prop="contactEmail">
                            <el-input v-model="form3.contactEmail" placeholder="请输入联系人邮箱"></el-input>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>

            <div slot="footer" class="dialog-footer">
                <div v-if="curEvent === 'add'">
                    <el-button v-if="active!=0" @click="active--">上一步</el-button>
                    <el-button v-if="active!=2" type="primary" @click="next">保存</el-button>
                    <el-button v-if="active==2" type="primary" @click="submit()">提交申请</el-button>
                </div>
                <div v-if="curEvent === 'edit'">
                    <el-button v-if="active!=0" @click="active--">上一步</el-button>
                    <el-button type="primary" @click="handelNext">下一步</el-button>
                    <el-button type="primary" @click="next">保存</el-button>
                    <el-button v-if="active==2" type="primary" @click="submit()">提交申请</el-button>
                </div>
            </div>
        </el-dialog>
    </basic-container>
</template>


<script>
    import {
        getProvinceList,
        getCityList,
        getDistrictList
    } from "@/api/bussinessregion/bussinessregion";
    import {getDictionary} from "@/api/system/dictbiz";
    import {add as saveBussInfo, update as updateBussInfo} from "@/api/bussiness/bussinessinfo"
    import {add as saveContactInfo, update as updateContactInfo} from "@/api/bussiness/bussinesscontactinfo"
    import {isvalidatemobile, isEmail} from "@/util/validate"
    export default {
        props:{
            form1:Object,
            form2:Object,
            form3:Object,
            curEvent: 'add'
        },
        data() {
            var validatemobile = (rule, value, callback) => {
                let isPhone = /^0\d{2,3}-?\d{7,8}$/;
                if (value.length == 11) {
                    if (isPhone.test(value)) {
                        callback(new Error('手机号码格式不正确'));
                    } else {
                        callback();
                    }
                } else {
                    callback(new Error('手机号码长度不为11位'));
                }

            };
            var validateEmail = (rule, value, callback) => {
                let result = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)
                if(!result){
                    callback(new Error("邮箱为空或邮箱格式有误！"));
                }else{
                    callback();
                }
            };
            return {
                form:{bussinessInfoId: null},
                provinceOptions:[],
                cityOptions:[],
                districtOptions:[],
                provinceProps: {
                    lazy: true,
                    label: 'provinceName',
                    value: 'provinceCode',
                },
                cityProps: {
                    label: 'cityName',
                    value: 'cityCode',
                    children: 'children'
                },
                districtProps: {
                    label: 'cityName',
                    value: 'cityCode',
                },
                signTypeOptions: [],
                legalLicenceTypeOptions: [],
                dialogFormVisible: false,
                //步骤条
                active: 0,
                //表单
                rules1:{
                    signType: [
                        { required: true, message: '请输入商户类型', trigger: 'blur' },
                    ],
                    licenceNo: [
                        { required: true, message: '请输入商户证件编号', trigger: 'blur' },
                    ],
                    signName: [
                        { required: true, message: '请输入商户签约名称', trigger: 'blur' },
                    ],
                    shortName: [
                        { required: true, message: '请输入商户简称', trigger: 'blur' },
                    ],
                    province: [
                        { required: true, message: '请选择商户实际经营地所在省', trigger: 'blur' },
                    ],
                    city: [
                        { required: true, message: '请选择商户实际经营地所在市', trigger: 'blur' },
                    ],
                    district: [
                        { required: true, message: '请选择商户实际经营地所在区', trigger: 'blur' },
                    ],
                    address: [
                        { required: true, message: '请输入经营地址', trigger: 'blur' },
                    ],
                    openAccountLicenceNo: [
                        { required: true, message: '请输入开户许可证编号', trigger: 'blur' },
                    ],
                    licenceUrl: [
                        { required: false, message: '请上传商户证件照片', trigger: 'blur' },
                    ],
                    openAccountLicenceUrl: [
                        { required: false, message: '请上传法人证件照正面照片', trigger: 'blur' },
                    ],
                    handLicenceUrl: [
                        { required: false, message: '请上传法人证件照反面照片', trigger: 'blur' },
                    ],
                },
                rules2:{
                    legalName:[
                        {required: true, message: '请输入法人姓名', trigger: 'blur' },
                    ],
                    legalLicenceType:[
                        {required: true, message: '请选择法人证件类型', trigger: 'blur' },
                    ],
                    legalLicenceNo:[
                        {required: true, message: '请输入法人证件号码', trigger: 'blur' },
                    ],
                    legalLicenceFrontUrl:[
                        {required: false, message: '请上传法人证件正面照片', trigger: 'blur' },
                    ],
                    legalLicenceBackUrl:[
                        {required: false, message: '请上传法人证件反面照片', trigger: 'blur' },
                    ]
                },
                rules3:{
                    contactName:[
                        {required: true, message: '请输入联系人姓名', trigger: 'blur' },
                    ],
                    contactMobile: [
                        { required: true, trigger: 'blur', validator: validatemobile, min: 11, max: 11},
                    ],
                    contactEmail:[
                        {required: true, trigger: 'blur', validator: validateEmail },
                    ]
                },
                //勋章配置
                medalList:[],
            }
        },
        created() {
            this.loadProvince();
            this.loadSignTypeList("business_sign_type");
            this.loadLegalLicenceTypeList("legal_licence_type");
        },
        methods: {
            openDialog(){
                if(this.curEvent == 'edit'){
                    this.loadCity(this.form1.province);
                    this.loadDistrict(this.form1.city);
                }
            },
            loadSignTypeList(code){
                getDictionary({"code":code}).then(res =>{
                    this.signTypeOptions = res.data.data;
                })
            },
            loadLegalLicenceTypeList(code){
                getDictionary({"code":code}).then(res =>{
                    this.legalLicenceTypeOptions = res.data.data;
                })
            },
            loadProvince(){
                getProvinceList().then(res =>{
                    this.provinceOptions = res.data.data;
                })
            },
            loadCity(provinceCode){
                getCityList(provinceCode).then(res =>{
                    this.cityOptions = res.data.data;
                })
            },
            loadDistrict(cityCode){
                getDistrictList(cityCode).then(res =>{
                    this.districtOptions = res.data.data;
                })
            },
            open() {
                this.dialogFormVisible = true
            },
            close() {
                this.dialogFormVisible = false;
                this.active = 0;
            },
            // confirm() {
            //     let validForm3 = this.validForm('form3');
            //     if(validForm3){
            //         let contactBody = {};
            //         saveContactInfo(Object.assign(contactBody, this.form2, this.form3)).then(res =>{
            //             this.handelNext();
            //         })
            //     }
            // },
            //上传商户证件照片
            uploadLicenceUrl(res) {
                this.form1.licenceUrl=res.data
            },
            //上传手持照片
            uploadHandLicenceUrl(res){
                this.form1.handLicenceUrl=res.data
            },
            //上传开户凭证图片
            uploadOpenAccountLicenceUrl(res){
                this.form1.openAccountLicenceUrl=res.data
            },
            //上传法人证件正面照片
            uploadLegalLicenceFrontUrl(res) {
                this.form2.legalLicenceFrontUrl = res.data
            },
            //上传法人证件反面照片
            uploadLegalLicenceBackUrl(res) {
                this.form2.legalLegalLicenceBackUrl = res.data
            },
            next(){
                switch (this.active){
                    case 0:
                        let validForm1 = this.validForm('form1');
                        if(validForm1){
                            if(this.curEvent == "add"){
                                saveBussInfo(this.form1).then(res => {
                                    this.$message({
                                        type: "success",
                                        message: res.data.msg
                                    });
                                    this.form.bussinessInfoId = res.data.data.id;
                                    this.form2.bussinessInfoId = res.data.data.id;
                                    this.form3.bussinessInfoId = res.data.data.id;
                                    this.handelNext()
                                });
                            }else if(this.curEvent == "edit" && this.form1.id != null){
                                updateBussInfo(this.form1).then(res => {
                                    this.$message({
                                        type: "success",
                                        message: res.data.msg
                                    });
                                    this.form.bussinessInfoId = res.data.data.id;
                                    this.form2.bussinessInfoId = res.data.data.id;
                                    this.form3.bussinessInfoId = res.data.data.id;
                                    this.handelNext()
                                });
                            }
                        }
                        break;
                    case 1:
                        let validForm2 = this.validForm('form2');
                        if(validForm2){
                            if(this.curEvent == "add"){
                                this.form2.contactType = 10;
                                saveContactInfo(this.form2).then(res => {
                                    this.$message({
                                        type: "success",
                                        message: res.data.msg
                                    });
                                    this.form2.id = res.data.data.id;
                                    this.handelNext()
                                });
                            }else if(this.curEvent == "edit" && this.form2.id != null){
                                this.form2.contactType = 10;
                                updateContactInfo(this.form2).then(res => {
                                    this.$message({
                                        type: "success",
                                        message: res.data.msg
                                    });
                                    this.form2.id = res.data.data.id;
                                    this.handelNext()
                                });
                            }
                        }
                        break;
                    case 2:
                        let validForm3 = this.validForm('form3');
                        if(validForm3){
                            if(this.curEvent == "add"){
                                this.form3.contactType = 11;
                                saveContactInfo(this.form3).then(res => {
                                    this.$message({
                                        type: "success",
                                        message: res.data.msg
                                    });
                                    this.form3.id = res.data.data.id;
                                    this.handelNext()
                                });
                            }else if(this.curEvent == "edit" && this.form3.id != null){
                                this.form3.contactType = 11;
                                updateContactInfo(this.form3).then(res => {
                                    this.$message({
                                        type: "success",
                                        message: res.data.msg
                                    });
                                    this.form3.id = res.data.data.id;
                                    this.handelNext()
                                });
                            }
                        }
                        break;
                    default:
                        break;
                }
            },
            validForm(formName) {
                let result = false;
                this.$refs[formName].validate((valid) => {
                    if (!valid) {
                        result = false;
                        return false;
                    }else{
                        result = true;
                        return true;
                    }
                });
                return result;
            },
            handelNext(){
                if (this.active==2) {

                }else{
                    this.active++
                }
            },
            submit(){
                this.form.bussinessInfoId = this.form1.id;
                this.$emit('submit', this.form)
                this.active = 0;
            },
            dialogClose(){
                this.active = 0;
                this.dialogFormVisible = false;
                this.$emit('closeDialog', null)
            }
        }

    }
</script>

<style lang="scss">
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>