live-cms/src/layout/user/mainForm.vue

<template>
  <div id="mainForm">
    <el-row>
      <el-col :span="24" class="linksForm">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="用户状态" v-if="form.role !== '1' && !isNew">
            <el-radio-group v-model="form.status" @change="setIsQy">
              <el-radio label="0" disabled>已注册</el-radio>
              <el-radio label="1">审核成功</el-radio>
              <el-radio label="2">拒绝审核</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="用户名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入用户名称"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号" :minlength="11" :maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="登录密码" prop="password">
            <el-input v-model="form.password" placeholder="请输入登录密码" show-password></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="cardnumber">
            <el-input v-model="form.cardnumber" placeholder="请输入身份证号" :minlength="18" :maxlength="18"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="addr">
            <el-input v-model="form.addr" placeholder="请输入地址"></el-input>
          </el-form-item>
          <el-form-item label="头像图片" prop="img_path">
            <upload :limit="1" :data="form.img_path" type="img_path" :url="'/files/imgpath/upload'" @upload="uploadSuccess"></upload>
          </el-form-item>
          <el-form-item label="用户类别" prop="role">
            <el-radio-group v-model="form.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>
          <el-form-item label="身份证正面" v-if="form.role == '4' || form.role == '5'" prop="cardfile_a">
            <upload :limit="1" :data="form.cardfile_a" type="cardfile_a" :url="'/files/cardfilea/upload'" @upload="uploadSuccess"></upload>
          </el-form-item>
          <el-form-item label="身份证背面" v-if="form.role == '4' || form.role == '5'" prop="cardfile_b">
            <upload :limit="1" :data="form.cardfile_b" type="cardfile_b" :url="'/files/cardfileb/upload'" @upload="uploadSuccess"></upload>
          </el-form-item>
          <el-form-item label="组织机构图片" v-if="form.role == '5'" prop="img_qy">
            <upload :limit="1" :data="form.img_qy" type="img_qy" :url="'/files/imgqy/upload'" @upload="uploadSuccess"></upload>
          </el-form-item>
          <template v-if="form.role == '5'">
            <el-form-item label="机构类型" prop="institution_type">
              <el-input v-model="form.institution_type" placeholder="请输入机构类型"></el-input>
            </el-form-item>
            <el-form-item label="机构名称" prop="institution_name">
              <el-input v-model="form.institution_name" placeholder="请输入机构名称"></el-input>
            </el-form-item>
            <el-form-item label="机构代码" prop="institution_code">
              <el-input v-model="form.institution_code" placeholder="请输入机构代码"></el-input>
            </el-form-item>
            <el-form-item label="机构性质" prop="institution_nature">
              <el-input v-model="form.institution_nature" placeholder="请输入机构性质"></el-input>
            </el-form-item>
          </template>
          <el-form-item label="办公电话" v-if="form.role == '4' || form.role == '5'" prop="office_phone">
            <el-input v-model="form.office_phone" placeholder="请输入办公电话"></el-input>
          </el-form-item>
          <el-form-item label="所属行业" v-if="form.role == '4' || form.role == '5'" prop="profession">
            <el-input v-model="form.profession" placeholder="请输入所属行业"></el-input>
          </el-form-item>
          <el-form-item label="性别" v-if="form.role == '6'" prop="gender">
            <el-select v-model="form.gender" placeholder="请选择民性别">
              <el-option v-for="(item, index) in gender_list" :key="index" :label="item.name" :value="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出生日期" v-if="form.role == '6'" prop="birthday">
            <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
          </el-form-item>
          <el-form-item label="职称级别" v-if="form.role == '6'" prop="level">
            <el-input v-model="form.level" placeholder="请输入职称级别"></el-input>
          </el-form-item>
          <el-form-item label="职称" v-if="form.role == '6'" prop="levelname">
            <el-input v-model="form.levelname" placeholder="请输入职称"></el-input>
          </el-form-item>
          <el-form-item label="职务" v-if="form.role == '6'" prop="position">
            <el-input v-model="form.position" placeholder="请输入职务"></el-input>
          </el-form-item>
          <el-form-item label="院校" v-if="form.role == '6'" prop="school">
            <el-input v-model="form.school" placeholder="请输入院校"></el-input>
          </el-form-item>
          <el-form-item label="学历" v-if="form.role == '6'" prop="xl">
            <el-select v-model="form.xl" placeholder="请选择学历要求">
              <el-option v-for="(item, index) in edu_list" :key="index" :label="item.name" :value="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学位" v-if="form.role == '6'" prop="xw">
            <el-select v-model="form.xw" placeholder="请选择学位">
              <el-option v-for="(item, index) in degree_list" :key="index" :label="item.name" :value="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="专业" v-if="form.role == '6'" prop="major">
            <el-input v-model="form.major" placeholder="请输入专业"></el-input>
          </el-form-item>
          <el-form-item label="从事专业" v-if="form.role == '6'" prop="professional">
            <el-input v-model="form.professional" placeholder="请输入从事专业"></el-input>
          </el-form-item>
          <el-form-item label="个人简历" v-if="form.role == '4' || form.role == '6'" prop="resume">
            <el-input type="textarea" v-model="form.resume" placeholder="请输入个人简介"></el-input>
          </el-form-item>
          <el-form-item label="项目" v-if="form.role == '6'" prop="project">
            <el-input v-model="form.project" placeholder="请输入项目"></el-input>
          </el-form-item>
          <el-form-item label="学术成就" v-if="form.role == '6'" prop="academic">
            <el-input v-model="form.academic" placeholder="请输入学术成就"></el-input>
          </el-form-item>
          <el-form-item label="论文" v-if="form.role == '6'" prop="paper">
            <el-input v-model="form.paper" placeholder="请输入论文"></el-input>
          </el-form-item>
          <el-form-item label="备注" v-if="form.role == '6'" prop="remark">
            <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleCancel">返回</el-button>
            <el-button type="primary" @click="handleSave()">提交</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import upload from '@/components/upload.vue';
import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: users } = createNamespacedHelpers('users');
const { mapActions: exportuser } = createNamespacedHelpers('exportuser');
export default {
  name: 'mainForm',
  props: {},
  components: { upload },
  data: () => ({
    form: {},
    // 性别
    gender_list: [
      {
        name: '男',
      },
      {
        name: '女',
      },
    ],
    // 学历
    edu_list: [
      {
        name: '中专及以上',
      },
      {
        name: '大专及以上',
      },
      {
        name: '本科及以上',
      },
      {
        name: '研究生及以上',
      },
    ],
    // 学位
    degree_list: [
      {
        name: '学士',
      },
      {
        name: '博士',
      },
      {
        name: '其他',
      },
    ],
  }),
  created() {},
  methods: {
    ...users(['fetch', 'create', 'update']),
    ...exportuser({ exportuserFetch: 'fetch', exportuserCreate: 'create', exportuserUpdate: 'update' }),
    async search() {
      if (this.role == '4' || this.role == '5') {
        const res = await this.fetch(this.id);
        if (this.$checkRes(res)) this.$set(this, `form`, res.data);
      } else if (this.role == '6') {
        const res = await this.exportuserFetch(this.id);
        if (this.$checkRes(res)) this.$set(this, `form`, res.data);
      }
    },
    async handleSave() {
      let res;
      let msg;
      let data = this.form;
      if (this.isNew) {
        data.status = '1';
        data.code = this.user.code;
        if (data.role == '4' || data.role == '5') {
          res = await this.create(data);
          msg = '用户创建成功';
        } else if (data.role == '6') {
          res = await this.exportuserCreate(data);
          msg = '用户创建成功';
        }
      } else {
        if (this.form.role == '4' || this.form.role == '5') {
          res = await this.update(data);
          msg = '用户审核成功';
        } else if (this.form.role == '6') {
          res = await this.exportuserUpdate(data);
          msg = '用户审核成功';
        }
      }
      if (this.$checkRes(res, msg)) {
        this.handleCancel();
      }
    },
    handleCancel() {
      this.$router.push({ path: '/user/index' });
    },
    setIsQy(data) {
      let val = '0';
      data == '2' ? (val = '0') : (val = '1');
      this.$set(this.form, `is_qy`, val);
    },
    uploadSuccess({ type, data }) {
      this.$set(this.form, `${type}`, data.uri);
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
    role() {
      return this.$route.query.role;
    },
    isNew() {
      return this.$route.query.id ? false : true;
    },
  },
  watch: {
    isNew: {
      handler(val) {
        if (!val) {
          console.log('in function:');
          this.search();
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.linksForm {
  margin: 20px 0 0 0;
}
.el-form {
  padding: 0 200px;
}
</style>