webnew-count/src/views/pcenter/pinfo.vue

<template>
  <div id="pinfo">
    <el-row>
      <el-col :span="24">
        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
          <el-form-item label="用户名" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone"></el-input
            ><span style="color:red;"
              ><i class="el-icon-warning" style="margin-right:5px;"></i>如果您修改手机号，那么登录时使用的手机号也会发生变更，请谨慎修改！</span
            >
          </el-form-item>
          <el-form-item v-if="this.user.type != '3'" label="身份证号" prop="id_number">
            <el-input v-model="form.id_number" @input="inputIdnumber()"></el-input>
          </el-form-item>
          <el-form-item v-if="this.user.type != '3'" label="出生年月" prop="birthday">
            <el-date-picker disabled 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 v-if="this.user.type != '3'" label="性别" prop="gender">
            <el-radio-group disabled v-model="form.gender">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="this.user.type != '3'" label="家庭住址">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item v-if="this.user.type === '0' || this.user.type === '1' || this.user.type === '4'" label="部门">
            <el-select v-model="form.dept_id" filterable placeholder="请选择部门" @change="selectChild">
              <el-option v-for="(item, index) in deptList" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="this.user.type === '0' || this.user.type === '1' || this.user.type === '4'" label="职务">
            <el-select v-model="form.level_id" filterable placeholder="请选择职务">
              <el-option v-for="(item, index) in levelList" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="this.user.type === '2'" label="邮箱" prop="email">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item v-if="this.user.type === '2'" label="头像" prop="img_url">
            <upload :limit="1" :data="form.img_url" type="img_url" :url="'/files/count/upload'" @upload="uploadSuccess"></upload>
          </el-form-item>
          <el-form-item v-if="this.user.type === '2'" label="职称级别">
            <el-input v-model="form.level"></el-input>
          </el-form-item>
          <el-form-item v-if="this.user.type === '2'" label="职称名称">
            <el-input v-model="form.levelname"></el-input>
          </el-form-item>
          <el-form-item v-if="this.user.type === '2'" label="院校">
            <el-input v-model="form.school"></el-input>
          </el-form-item>
          <el-form-item v-if="this.user.type === '2'" label="学历">
            <el-select v-model="form.education" placeholder="请选择学历">
              <el-option v-for="(item, index) in educationList" :key="index" :label="item.name" :value="item.name"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="this.user.type === '2'" label="学位">
            <el-select v-model="form.degree" placeholder="请选择学位">
              <el-option v-for="(item, index) in degreeList" :key="index" :label="item.name" :value="item.name"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="this.user.type === '2'" label="专业">
            <el-input v-model="form.major"></el-input>
          </el-form-item>
          <el-form-item v-if="this.user.type === '2'" label="从事专业">
            <el-input v-model="form.profession"></el-input>
          </el-form-item>
          <el-form-item v-if="this.user.type === '2'" label="工作简历">
            <el-input v-model="form.resume" type="textarea"></el-input>
          </el-form-item>
          <el-form-item v-if="this.user.type === '2'" label="项目">
            <el-input v-model="form.project" type="textarea"></el-input>
          </el-form-item>
          <el-form-item v-if="this.user.type === '2'" label="学术成就">
            <el-input v-model="form.academic" type="textarea"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit()">提交</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import upload from '@/components/uploadone.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: staff } = createNamespacedHelpers('staff');
const { mapActions: expert } = createNamespacedHelpers('expert');
const { mapActions: user } = createNamespacedHelpers('user');
const { mapActions: department } = createNamespacedHelpers('department');
const { mapActions: level } = createNamespacedHelpers('level');
const { mapActions: login } = createNamespacedHelpers('login');
export default {
  name: 'pinfo',
  props: {},
  components: { upload },
  data: () => ({
    form: {},
    deptList: [],
    levelList: [],
    educationList: [{ name: '中专及以上' }, { name: '大专及以上' }, { name: '本科及以上' }, { name: '研究生及以上' }],
    degreeList: [{ name: '博士学位' }, { name: '硕士学位' }, { name: '学士学位' }, { name: '其他' }],
    rules: {
      name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
      id_number: [
        { required: true, message: '请输入身份证号', trigger: 'blur' },
        {
          pattern: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
          message: '请输入有效的身份证号',
        },
      ],
      phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1\d{10}$/, message: '请输入有效的手机号' },
      ],
      gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
      birthday: [{ required: true, message: '请选择出生年月', trigger: 'blur' }],
      email: [{ required: false }, { pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/, message: '请输入有效的邮箱' }],
    },
  }),
  created() {
    this.search();
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...user(['update', 'fetch']),
    ...staff({ staffQuery: 'query', staffUpdate: 'update', staffFetch: 'fetch' }),
    ...expert({ expertQuery: 'query', expertUpdate: 'update', expertFetch: 'fetch' }),
    ...department({ departmentQuery: 'query', departmentFetch: 'fetch' }),
    ...level({ levelQuery: 'query', levelFetch: 'fetch' }),
    ...login({ logout: 'logout' }),
    async search() {
      this.searchInfo();
      this.selectChild();
      if (this.user.type === '3') {
        const user = await this.fetch(this.user.uid);
        this.$set(this, `form`, user.data);
      } else if (this.user.type === '2') {
        const expert = await this.expertFetch(this.user.userid);
        this.$set(this, `form`, expert.data);
      } else if (this.user.type === '1' || this.user.type === '0' || this.user.type === '4') {
        const staff = await this.staffFetch(this.user.userid);
        this.$set(this, `form`, staff.data);
      }
    },
    // 部门
    async searchInfo() {
      let res = await this.departmentQuery();
      if (this.$checkRes(res)) {
        this.$set(this, `deptList`, res.data);
      }
    },
    // 职务
    async selectChild(dept_id) {
      this.$set(this.form, `level_id`, undefined);
      let res = await this.levelQuery({ dept_id });
      if (this.$checkRes(res)) {
        this.$set(this, `levelList`, res.data);
      }
    },
    inputIdnumber() {
      let card = this.form.id_number;
      if (card.length == 18) {
        let birth = card.substring(6, 10) + '-' + card.substring(10, 12) + '-' + card.substring(12, 14);
        let gender = parseInt(card.substr(16, 1)) % 2 == 1 ? '男' : '女';
        let myDate = new Date();
        let month = myDate.getMonth() + 1;
        let day = myDate.getDate();
        let age = myDate.getFullYear() - card.substring(6, 10) - 1;
        if (card.substring(10, 12) < month || (card.substring(10, 12) == month && card.substring(12, 14) <= day)) {
          age++;
        }
        this.form.birthday = birth;
        this.form.gender = gender;
      }
    },
    async onSubmit() {
      let res = {};
      let data = JSON.parse(JSON.stringify(this.form));
      if (this.user.type === '3') {
        data.id = this.user.uid;
        res = await this.update(data);
      } else if (this.user.type === '2') {
        data.id = this.user.userid;
        res = await this.expertUpdate(data);
      } else if (this.user.type === '1' || this.user.type === '0') {
        data.id = this.user.userid;
        res = await this.staffUpdate(data);
      }
      if (res.errcode === 0) {
        this.$message({
          message: '信息修改成功',
          type: 'success',
        });
      } else {
        this.$message.error('信息修改失败');
      }
      if (data.phone != this.user.phone) {
        this.logoutBtn();
      }
    },
    uploadSuccess({ type, data }) {
      this.$set(this.form, `${type}`, data.uri);
    },
    // 退出登录
    logoutBtn() {
      this.logout();
      this.$router.push({ path: '/' });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-input__inner {
  width: 600px;
}
/deep/ .el-textarea__inner {
  width: 600px;
}
</style>