vue element组件实现步骤条形式的复杂表单信息的注册

灰太狼 2022-02-02 12:41 433阅读 0赞

### 我的qq  2038373094 ###

### ***实际效果如下*** ###

![20190511181859323.gif][]

### ***vue代码如下*** ###

<template>
      <div id="bdy">
          <Head/>
        <div class="tbody">  
    <el-steps :active="active" finish-status="success">
      <el-step title="上传头像"></el-step>
      <el-step title="个人信息"></el-step>
      <el-step title="专业信息"></el-step>
       <el-step title="证书信息"></el-step>
    </el-steps>
    
     <el-form ref="form" :model="form" label-width="80px">
    <div class="info" v-if="active==1">
      <el-form-item label="上传头像" prop="imageUrl">
                <el-upload
      class="avatar-uploader"
      action="https://jsonplaceholder.typicode.com/posts/"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload" >
      <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
     </el-form-item>
    </div>
    <div class="info" v-if="active==2">
    <el-form-item label="真实姓名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="tell">
        <el-input type="text" v-model="form.tell" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="身份证" prop="indentity">
        <el-input type="text" v-model="form.indentity" autocomplete="off"></el-input>
      </el-form-item>
    </div>
    <div class="info" v-if="active==3">
    
      <el-form-item label="专长领域:" prop="area">
          <br>
       <el-checkbox-group v-model="form.area" @change="handleCheckedCitiesChange" >
        <el-checkbox v-for="city in form.cities" :label="city" :key="city">{
       {city}}</el-checkbox>
      </el-checkbox-group>
      </el-form-item>
      <el-form-item label="从业资质:" prop="quality">
          <br>
        <el-radio-group v-model="form.quality">
        <el-radio :label="0">国家二级咨询师</el-radio>
        <el-radio :label="1">国家三级咨询师</el-radio>
        <el-radio :label="2">注册系统咨询师</el-radio>
         <el-radio :label="3">注册系统督导师</el-radio>
          <el-radio :label="4">其他</el-radio>
      </el-radio-group>
    </el-form-item>
    </div>
    <div class="info" v-if="active==4">
    <el-form-item label="证书编号" prop="number">
        <el-input type="text" v-model="form.number" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="从业年限" prop="time">
        <el-input type="text" v-model="form.time" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="个人简介" prop="instroduce">
        <el-input type="text" v-model="form.instroduce" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">申请入驻</el-button>
      </el-form-item>
    </div>
    <el-button style="margin-top: 12px;" @click="next" v-if="active<4">下一步</el-button>  
    <el-button style="margin-top: 12px;" @click="pre" v-if="active>1">上一步</el-button> 
    </el-form> 
    </div>
    </div>
    </template>
    <style>
    .tbody{
        width:80%;
        margin-left:10%;
        margin-top: 2%;
    }
    /* 表单 */
    .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>
    <script>
    //表单js代码
    import Head from "../../components/common/Head";
    import axios from "axios";
    import Qs from "qs";
    import router from "../../router/router.js";
     const cityOptions = ['婚姻家庭', '情绪管理', '恋爱心理', '个人成长','人际关系','心理健康','职场心理','亲子教育','性心理'];
      export  default{
        components: {
        Head
      },
        data() {
          return {
             active: 1,
             form: {
             area: ['个人成长'],
             checkAll: false,
             cities: cityOptions,
             isIndeterminate: true,
             quality: 0,
             imageUrl: '',
             username : '',
             tell: '',
             indentity: '',
             number:'',
             instroduce:'',
             time:''
            }
          }
        },
        methods: {
          onSubmit() {
              //this.form.checkedCities获取多选框的内容   zxs[this.form.radio]  this.form.imageUrl
           //开始提交 在这里进行跨域请求   
              this.axios({
                method: "post",
                url: "/api/PsychoSys/tuser.action",
                data: Qs.stringify(this.form)
              })
                .then(res => {
                   this.$router.push("/tinfo");
                })
                .catch(function(err) {
                  console.log(err);
                });
              /*在这里进行跨域请求*/
            //开始提交
          },
            handleAvatarSuccess(res, file) {
            this.form.imageUrl = URL.createObjectURL(file.raw);
          },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
              this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
          },
           handleCheckAllChange(val) {
            this.form.area = val ? cityOptions : [];
            this.isIndeterminate = false;
          },
          handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.form.cities.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.form.cities.length;
          }, next() {
            if (this.active++ > 3) this.active = 1;
          },
           pre() {
            if (this.active-- < 2) this.active = 1;
          }
        }
      } 
    //表单js代码
    </script>

### ***后台是用java的ssh框架做的*** ###

package cn.com.service;
    import java.io.IOException;
    import java.util.List;
    
    import javax.servlet.http.HttpServletResponse;
    
    import org.apache.struts2.ServletActionContext;
    import org.hibernate.Query;
    import org.hibernate.Session;
    import org.hibernate.SessionFactory;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.context.annotation.Scope;
    import org.springframework.stereotype.Repository;
    import org.springframework.transaction.annotation.Transactional;
    
    import cn.com.bean.Teacher;
    
    import com.opensymphony.xwork2.ModelDriven;
    @Repository(value="teacherUser")
    @Scope("prototype")
    public class TeacherUser implements ModelDriven<Teacher>{
    	@Autowired
    	private SessionFactory sf;
    	@Autowired
    	private Teacher tea;
    	private List<String> area;
    	public List<String> getArea() {
    		return area;
    	}
    	public void setArea(List<String> area) {
    		this.area = area;
    	}
    	@Transactional
    	public String regedit_user(){
             //普通用户注册   ,用户名不能重复
    		Session session=sf.getCurrentSession();
    		//查询是否重复
    		String sql="from Teacher where username=?";
    		Query query=session.createQuery(sql);
    		query.setString(0, tea.getUsername());
    		Teacher t=(Teacher)query.uniqueResult();
    		 String toast="";
    		 String [] zxs ={"国家二级咨询师","国家三级咨询师","注册系统咨询师","注册系统督导师","其他"};
    		 String q="";
    		 if(t!=null){
    			 toast="fail"; 
    		 }else{
    			 //处理数据
    			 Integer o=Integer.parseInt(tea.getQuality());
    			 tea.setQuality(zxs[o]);
    			 tea.setAreas(area.toString());
    			 toast="success";
    			 session.save(tea); 
    		 }
    		 HttpServletResponse response = ServletActionContext.getResponse();
    			response.setCharacterEncoding("utf-8");
    			try {
    				response.getWriter().write(toast);
    			} catch (IOException e) {
    				// TODO Auto-generated catch block
    				e.printStackTrace();
    			}
    		return null; 
    	}
    	
    	public Teacher getModel() {
    		return tea;
    	}
    
    }

[20190511181859323.gif]: /images/20220202/6d0080a79d194de086bd74e536c91ab9.png