userjuris-cms/src/views/register.vue

<template>
  <div id="register" class="w_1200">
    <div style="height:90vh;overflow-y:auto">
      <el-form ref="forms" :model="forms" :rules="rules" label-width="140px">
        <el-form-item label="用户名称" prop="name">
          <el-input v-model="forms.name" placeholder="请输入用户名称"></el-input>
        </el-form-item>

        <el-form-item label="手机号" prop="phone">
          <el-input v-model="forms.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>

        <el-form-item label="登录密码" prop="password">
          <el-input v-model="forms.password" placeholder="请输入登录密码" show-password></el-input>
        </el-form-item>

        <el-form-item label="机构代码或邀请码" prop="code" class="cs">
          <el-input v-model="forms.code" placeholder="请输入邀请码"></el-input>
        </el-form-item>

        <el-form-item label="用户类别" prop="role">
          <el-radio-group v-model="forms.role">
            <el-radio label="4">个人</el-radio>

            <el-radio label="5">机构管理员</el-radio>

            <el-radio label="6">专家</el-radio>
          </el-radio-group>
        </el-form-item>

        <span v-if="forms.role == '4' || forms.role == '5'">
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="forms.email" placeholder="请输入电子邮箱"></el-input>
          </el-form-item>

          <el-form-item label="联系地址" prop="addr">
            <el-input v-model="forms.addr" placeholder="请输入联系地址"></el-input>
          </el-form-item>

          <el-form-item label="办公电话" prop="office_phone">
            <el-input v-model="forms.office_phone" placeholder="请输入办公电话"></el-input>
          </el-form-item>

          <el-form-item label="所属行业" prop="profession">
            <el-input v-model="forms.profession" placeholder="请输入所属行业"></el-input>
          </el-form-item>
        </span>

        <span v-if="forms.role == '5'">
          <el-form-item label="统一社会信用代码" prop="institution_code">
            <el-input v-model="forms.institution_code" placeholder="请输入统一社会信用代码"></el-input>

            <el-link type="danger" :underline="false">统一社会信用代码作为机构用户登录平台唯一凭证</el-link>
          </el-form-item>

          <el-form-item label="注册类型">
            <el-input v-model="forms.companytype" placeholder="请输入注册类型"></el-input>
          </el-form-item>

          <el-form-item label="注册时间">
            <el-date-picker v-model="forms.companydate" placeholder="请选择" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date"> </el-date-picker>
          </el-form-item>

          <el-form-item label="注册资金">
            <el-input v-model="forms.companycapital" placeholder="请输入注册资金"></el-input>
          </el-form-item>

          <el-form-item label="企业法人">
            <el-input v-model="forms.companyperson" placeholder="请输入企业法人"></el-input>
          </el-form-item>

          <el-form-item label="上年度企业总收入">
            <el-input v-model="forms.sndqyzsr" placeholder="请输入上年度企业总收入"></el-input>
          </el-form-item>

          <el-form-item label="上年度研发费用">
            <el-input v-model="forms.sndyffy" placeholder="请输入上年度研发费用"></el-input>
          </el-form-item>

          <el-form-item label="企业总人数">
            <el-input v-model="forms.companytotal" placeholder="请输入企业总人数"></el-input>
          </el-form-item>

          <el-form-item label="企业简介">
            <el-input
              v-model="forms.companybrief"
              type="textarea"
              maxlength="300"
              show-word-limit
              :autosize="{ minRows: 4, maxRows: 5 }"
              placeholder="请输入企业简介"
            ></el-input>
          </el-form-item>

          <el-form-item label="主要产品">
            <el-input
              v-model="forms.mainproduct"
              type="textarea"
              maxlength="300"
              show-word-limit
              :autosize="{ minRows: 4, maxRows: 5 }"
              placeholder="请输入主要产品"
            ></el-input>
          </el-form-item>

          <el-form-item label="企业资质/荣誉">
            <el-input
              v-model="forms.qualifications"
              type="textarea"
              maxlength="300"
              show-word-limit
              :autosize="{ minRows: 4, maxRows: 5 }"
              placeholder="请输入企业资质/荣誉"
            ></el-input>
          </el-form-item>
        </span>

        <span v-else-if="forms.role == '6'">
          <el-form-item label="头像">
            <upload :limit="1" :data="forms.expertimage" type="expertimage" :url="'/files/userjuriscms_user/upload'" @upload="uploadSuccess"></upload>
          </el-form-item>

          <el-form-item label="最高学历">
            <el-input v-model="forms.education" placeholder="请输入最高学历"></el-input>
          </el-form-item>

          <el-form-item label="毕业院校">
            <el-input v-model="forms.school" placeholder="请输入毕业院校"></el-input>
          </el-form-item>

          <el-form-item label="出生日期">
            <el-date-picker v-model="forms.birthDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
          </el-form-item>

          <el-form-item label="QQ/微信">
            <el-input v-model="forms.qqwx" placeholder="请输入QQ/微信"></el-input>
          </el-form-item>

          <el-form-item label="电子邮箱">
            <el-input v-model="forms.email" placeholder="请输入电子邮箱"></el-input>
          </el-form-item>

          <el-form-item label="工作单位">
            <el-input v-model="forms.company" placeholder="请输入工作单位"></el-input>
          </el-form-item>

          <el-form-item label="职务职称">
            <el-input v-model="forms.zwzc" placeholder="请输入职务职称"></el-input>
          </el-form-item>

          <el-form-item label="擅长领域">
            <el-input v-model="forms.expertise" placeholder="请输入擅长领域"></el-input>
          </el-form-item>

          <el-form-item label="工作经历">
            <el-input
              v-model="forms.workexperience"
              type="textarea"
              maxlength="300"
              show-word-limit
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="请输入工作经历"
            ></el-input>
          </el-form-item>

          <el-form-item label="科研综述">
            <el-input
              v-model="forms.scientific"
              type="textarea"
              maxlength="300"
              show-word-limit
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="请输入科研综述"
            ></el-input>
          </el-form-item>

          <el-form-item label="承担项目">
            <el-input
              v-model="forms.undertakingproject"
              type="textarea"
              maxlength="300"
              show-word-limit
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="请输入承担项目"
            ></el-input>
          </el-form-item>

          <el-form-item label="科技奖励">
            <el-input
              v-model="forms.scienceaward"
              type="textarea"
              maxlength="300"
              show-word-limit
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="请输入科技奖励"
            ></el-input>
          </el-form-item>

          <el-form-item label="社会任职">
            <el-input
              v-model="forms.social"
              type="textarea"
              maxlength="300"
              show-word-limit
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="请输入社会任职"
            ></el-input>
          </el-form-item>
        </span>

        <el-col :span="24" class="loginSubmit"><el-button type="primary" @click="registerSubmit()">注册</el-button></el-col>
      </el-form>
    </div>
  </div>
</template>

<script>
import upload from '@/components/frame/uploadone.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
// const { mapActions: user } = createNamespacedHelpers('user');

export default {
  name: 'register',
  props: {},
  components: { upload },
  data: function() {
    return {
      forms: {},
      rules: {
        name: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号/统一社会信用代码', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入邀请码', trigger: 'blur' }],
        institution_code: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }],
      },
    };
  },
  created() {},
  methods: {
    // ...user(['create']),
    async toSave() {
      let duplicate = _.cloneDeep(this.forms);
      const res = await this.create(duplicate);
      if (this.$checkRes(res, '注册成功', res.errmsg || '注册失败')) {
        // TODO 跳转路由
      }
    },

    registerSubmit() {
      this.$refs['forms'].validate(valid => {
        if (valid) {
          this.toSave();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    uploadSuccess({ type, data }) {
      this.$set(this.forms, `${type}`, data.uri);
    },
  },
  computed: {
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
</style>