<template> <div class="app-content"> <a-spin :spinning="loading" style="width: 100%;height: 100%;"> <div style="min-width:910px;width:100%;height: 100%;"> <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-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'"> <info-edit :formData.sync="formData" @load="onLoad" ref="infoEdit" /> <a-row> <a-col style="text-align: center;width:100%;"> <a-button type="primary" style="width:80px;" @click="submit">保存</a-button> </a-col> </a-row> </div> </div> </div> </a-spin> </div> </template> <script> import infoEdit from '@/views/basicSetting/person/components/infoEdit' import moment from 'moment' export default { name: 'perInfoEdit', components: { infoEdit }, 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, spec: null, degree: null, duty: null, telephone: null, fax: null, email: null, address: null, }, loading: false } }, created () { this.getUserInfo() }, methods: { moment, tabclick (key) { this.tabsActive = key }, getUserInfo () { this.loading = true this.$api.person.getUserInfo().then(({ data = {} }) => { if (data) { this.personInfo = data Object.assign(this.formData, data) this.personInfo.birthday = moment(this.personInfo.birthday).format('YYYY-MM-DD') } this.loading = false }).catch(() => { this.loading = false }) }, submit () { this.$refs.infoEdit.submit() }, onLoad (value) { this.loading = value this.personInfo.email = this.formData.email }, } } </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; } } </style>