<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>