frame/layout/register/teaRegister.vue

<template>
  <div id="teaRegister">
    <el-row>
      <el-col :span="24" class="style">
        <el-col :span="24" class="top">
          <el-image style="float:left;width:70px;height:70px;" :src="logoUrl"></el-image>
          <span>教师甄选系统-注册用户</span>
        </el-col>
        <el-col class="info">
          <div class="w_1200">
            <el-col :span="24" style="background:#fff;">
              <el-form ref="form" :model="form" :rules="rules" label-width="110px" class="demo-ruleForm">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="idnumber">
                  <el-input v-model="form.idnumber"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                  <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                  <el-input v-model="form.gender"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                  <el-input v-model="form.age"></el-input>
                </el-form-item>
                <el-form-item label="出生年月" prop="birthday">
                  <el-date-picker v-model="form.birthday" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="学校" prop="schname" :required="true">
                  <el-select v-model="form.schname" filterable placeholder="请选择学校" value-key="code">
                    <el-option v-for="item in schnameList" :key="item.code" :label="item.name" :value="item"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="职业资格证号" prop="zynumber">
                  <el-input v-model="form.zynumber"></el-input>
                </el-form-item>
                <el-form-item label="职业资格证图片" prop="zynumberfile">
                  <upload :limit="1" :data="form.zynumberfile" type="zynumberfile" :url="`/files/cms/upload`" @upload="uploadSuccess"></upload>
                </el-form-item>
                <el-form-item label="入职时间" prop="entrydate">
                  <el-date-picker v-model="form.entrydate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="职务" prop="job">
                  <el-input v-model="form.job"></el-input>
                </el-form-item>
                <el-form-item label="专业" prop="major">
                  <el-input v-model="form.major"></el-input>
                </el-form-item>
                <el-form-item label="科目" prop="subid">
                  <el-select v-model="form.subid" filterable placeholder="请选择科目" value-key="code">
                    <el-option v-for="item in subList" :key="item.code" :label="item.name" :value="item"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="是否可讲礼仪课" prop="islyteacher">
                  <el-radio v-model="form.islyteacher" label="0">否</el-radio>
                  <el-radio v-model="form.islyteacher" label="1">是</el-radio>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">注册</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import upload from '../../components/upload';
import { createNamespacedHelpers, mapGetters } from 'vuex';
const { mapActions: school } = createNamespacedHelpers('school');
const { mapActions: subject } = createNamespacedHelpers('subject');
const { mapActions: teacher } = createNamespacedHelpers('teacher');

import _ from 'lodash';
export default {
  name: 'teaRegister',
  metaInfo: { title: '注册' },
  props: {},
  components: {
    upload, //上传图片
  },
  data: () => ({
    logoUrl: require('../../assets/logo.png'),
    form: {},
    rules: {
      name: [{ required: true, message: '请输入教师姓名', trigger: 'blur' }],
      idnumber: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
      phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
    },
    schnameList: [],
    subList: [],
  }),
  created() {
    this.searchInfo();
  },
  computed: {
    keyWord() {
      let meta = this.$route.meta;
      let main = meta.title || '';
      return main;
    },
  },
  methods: {
    ...school(['query']),
    ...subject({ subQuery: 'query' }),
    ...teacher({ teaCreate: 'create' }),
    async searchInfo({ ...info } = {}) {
      let res = await this.query({ ...info });
      if (`${res.errcode}` === '0') {
        //给this=>vue的实例下在中的list属性，赋予result。data的值
        this.$set(this, `schnameList`, res.data);
      } else {
        this.$message.error(res.errmsg ? res.errmsg : 'error');
      }
      res = await this.subQuery({ ...info });
      if (`${res.errcode}` === '0') {
        //给this=>vue的实例下在中的list属性，赋予result。data的值
        this.$set(this, `subList`, res.data);
      } else {
        this.$message.error(res.errmsg ? res.errmsg : 'error');
      }
    },
    async onSubmit() {
      let data = this.form;
      let res = await this.teaCreate(data);
      let msg = `${this.keyWord}注册成功`;
      if (this.$checkRes(res, msg)) console.log('成功');
    },
    uploadSuccess({ type, data }) {
      if (type !== 'zynumberfile') {
        let arr = _.get(this.form, type);
        if (arr !== undefined) {
          this.form[type].push({ name: data.name, uri: data.uri });
        } else {
          let newArr = [{ name: data.name, uri: data.uri }];
          this.$set(this.form, `${type}`, newArr);
        }
      } else {
        this.$set(this.form, `${type}`, data.uri);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.style {
  width: 100%;
  height: 100%;
  background: #ccc;
}
.top {
  padding: 0 100px;
  background-color: #ffffff;
  border-top: 4px solid #44b549;
}
.top span {
  padding: 22px;
  float: left;
  font-size: 20px;
}
.info {
  padding: 20px 0;
}
.el-form {
  margin: 50px 200px;
}
</style>