Index.vue

<template>
  <div class="app-content">
    <div class="card-left border-style">
      <div class="holder-photo"><img alt="" src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png">
        <div class="holder-name">
          <!-- <a title="修改" style="text-decoration:none;" href="#">[修改]</a> -->
        </div>
      </div>
      <div class="holder-info">
        <a-row>
          <a-col :span="6" class="title">
            邮 箱
          </a-col>
          <a-col :span="18">
            {{personInfo.email}}
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6" class="title">
            手机号
          </a-col>
          <a-col :span="18">
            {{personInfo.mobile}}
            <!-- <a title="修改" style="text-decoration:none;" href="#">[修改]</a> -->
          </a-col>
        </a-row>
        <a-divider dashed />
        <a-row>
          <a-col :span="6" class="title">
            姓 名
          </a-col>
          <a-col :span="18">
            {{personInfo.personName}}
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6" class="title">
            性 别
          </a-col>
          <a-col :span="18">
            {{personInfo.sex}}
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6" class="title">
            生 日
          </a-col>
          <a-col :span="18">
            {{personInfo.birthday}}
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6" class="title">
            证件号
          </a-col>
          <a-col :span="18">
            {{personInfo.certId}}
          </a-col>
        </a-row>
      </div>
    </div>
    <div class="card-right border-style">
      <a-spin :spinning="loading" style="width: 100%;height: 100%;">
        <a-tabs :activeKey="tabsActive" @tabClick="tabclick">
          <a-tab-pane key="1" tab="设置">
          </a-tab-pane>
          <a-tab-pane key="2" tab="消息" force-render>
          </a-tab-pane>
        </a-tabs>
        <div v-show="tabsActive!='1'">
          <a-empty />
        </div>
        <div v-show="tabsActive=='1'">
          <a-form-model ref="form" :model="formData" :rules="rules">
            <a-form-model-item label="姓 名" prop="personName">
              <a-input v-model="formData.personName" :maxLength="30" style="width:180px;" />
            </a-form-model-item>
            <a-form-model-item label="民 族" prop="nation">
              <para-select v-model="formData.nation" :width="180" :typeId="11" />
            </a-form-model-item>
            <a-form-model-item label="学 历" prop="education">
              <para-select v-model="formData.education" :width="180" :typeId="8" />
            </a-form-model-item>
            <a-form-model-item label="职 称" prop="title">
              <para-multi-select :width="180" v-model="formData.title" :typeId="7" />
            </a-form-model-item>
            <a-form-model-item label="专 业" prop="spec">
              <para-multi-select :width="180" v-model="formData.spec" :typeId="57" />
            </a-form-model-item>
            <a-form-model-item label="邮 箱" prop="email">
              <a-input v-model="formData.email" :maxLength="30" style="width:180px;" />
            </a-form-model-item>
            <a-row>
              <a-col style="text-align: center;width:100%;">
                <a-button type="primary" style="width:50%;" @click="submit">保存</a-button>
              </a-col>
            </a-row>
          </a-form-model>
        </div>
      </a-spin>
    </div>
  </div>
</template>

<script>
import { isEmptyParams, hideIdCard, hidePhone, checkEmail } from "@/views/utils/common"
import paraMultiSelect from '@/views/components/common/paraMultiSelect'
import paraSelect from '@/views/components/common/paraSelect'
import moment from 'moment'

export default {
  name: 'personInfo',
  components: {
    paraMultiSelect, paraSelect
  },
  data () {
    return {
      tabsActive: '1',
      personInfo: {
        id: null, certId: null, personName: null, sex: null, birthday: null, nation: null, title: null, education: null, spec: null, mobile: null, email: null,
      },
      formData: {
        id: null, personName: null, nation: null, title: null, education: null, spec: null, email: null,
      },
      rules: {
        personName: [{ required: true, message: '请输入姓名', trigger: 'blur' },],
        nation: [{ required: false, message: '请选择民族', trigger: 'change' }],
        title: [{ required: false, message: '请选择职称', trigger: 'change' }],
        education: [{ required: false, message: '请选择学历', trigger: 'change' }],
        spec: [{ required: false, message: '请选择专业', trigger: 'change' }],
        email: [{ required: false, validator: checkEmail, trigger: 'blur' }],
      },
      loading: false
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    moment,
    tabclick (key) {
      this.tabsActive = key
    },
    getUserInfo () {
      this.$api.person.getUserInfo().then(({ data = {} }) => {
        if (data) {
          this.personInfo = data
          this.personInfo.birthday = moment(this.personInfo.birthday).format('YYYY-MM-DD')
          this.initformData()
        }
      }).catch(() => { })
    },
    submit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          let pars = isEmptyParams(this.formData)
          let par = { ...pars }
          this.$api.person.updatePerson(par).then(({ data = {} }) => {
            if (data) {
              this.$message.success('修改成功！')
              this.getCurrentPersonInfo()
            }
            this.loading = false
          }).catch(() => { this.loading = false })
        } else {
          return false;
        }
      });
    },
    initformData () {
      this.formData = {
        id: this.personInfo.id,
        personName: this.personInfo.personName,
        nation: this.personInfo.nation,
        title: this.personInfo.title,
        education: this.personInfo.education,
        spec: this.personInfo.spec,
        email: this.personInfo.email,
      }
    },
    getCurrentPersonInfo () {
      Object.assign(this.personInfo, this.formData)
    }
  }
}
</script>
<style scoped lang="less">
.app-content {
  padding: 10px 8px 10px 8px;
  min-width: 920px;
  .border-style {
    border-radius: 4px;
    border: 1px solid #e6ebf5;
    background-color: #ffffff;
    overflow: hidden;
    color: #303133;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  .card-left {
    float: left;
    width: 300px;
    height: 600px;
    margin-right: 6px;
    .holder-photo {
      margin: 20px 0px 10px 0px;
      text-align: center;
    }
    .holder-photo > img {
      width: 104px;
      height: 104px;
      margin-bottom: 10px;
    }
    .holder-info {
      padding: 0px 10px 0px 10px;
      .ant-row .ant-col {
        padding: 3px 5px 3px 5px;
      }
    }
    .title {
      text-align: right;
    }
  }
  .card-right {
    float: left;
    width: calc(100% - 320px);
    min-width: 600px;
    min-height: 200px;
    padding: 0px 15px 15px 15px;
    .ant-form-item {
      margin-bottom: 6px;
    }
    ::v-deep .ant-row {
      .ant-col {
        display: inline-block;
      }
      .ant-form-item-label {
        width: 70px;
      }
      .ant-form-item-control-wrapper {
        width: calc(100% - 70px);
      }
      .ant-form-explain {
        margin-left: 5px;
        display: inline-block;
      }
    }
  }
}
</style>