| | |
| | | <template> |
| | | |
| | | <div class="user-info-new"> |
| | | <div class="titleBoxs"> |
| | | <div |
| | | class="titleItem" |
| | | :class="index === checked ? 'activeItem' : ''" |
| | | v-for="(item, index) in titleList" |
| | | :key="index" |
| | | @click="titleClick(item, index)" |
| | | > |
| | | {{ item }} |
| | | </div> |
| | | </div> |
| | | <!-- 个人信息 --> |
| | | <div class="message" v-if="checked === 0"> |
| | | <div class="info"> |
| | | <div class="section"> |
| | | <el-form label-width="120px"> |
| | | <el-form-item label="头像:"> |
| | | <el-upload |
| | | class="avatar-uploader" |
| | | :http-request="customUpload" |
| | | :show-file-list="false" |
| | | :before-upload="beforeAvatarUpload" |
| | | :disabled="uploadLoading" |
| | | action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" |
| | | > |
| | | <img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar" /> |
| | | <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> |
| | | <div> |
| | | <basic-container> |
| | | <avue-form |
| | | ref="form" |
| | | :option="option" |
| | | v-model="form" |
| | | @tab-click="handleTabClick" |
| | | @submit="handleSubmit" |
| | | |
| | | <template #tip> |
| | | <div class="upload-tip">只能上传jpg/png用户头像,且不超过500kb</div> |
| | | </template> |
| | | </el-upload> |
| | | <!-- <el-dialog v-model="dialogVisible"> |
| | | <img w-full :src="dialogImageUrl" alt="Preview Image" /> |
| | | </el-dialog> --> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | |
| | | <div class="section"> |
| | | <el-form :model="userInfo" label-width="120px"> |
| | | <el-form-item label="姓名:"> |
| | | <el-input class="ztzf-input" :style="{ width: pxToRem(230) }" v-model="userInfo.realName" disabled /> |
| | | </el-form-item> |
| | | <!-- <el-form-item label="昵称:"> |
| | | <el-input class="ztzf-input" v-model="userInfo.name" /> |
| | | </el-form-item>--> |
| | | <el-form-item label="所属单位:"> |
| | | <el-input class="ztzf-input" v-model="userInfo.deptName" disabled /> |
| | | </el-form-item> |
| | | <el-form-item label="手机号:"> |
| | | <el-input class="ztzf-input" v-model="userInfo.phone" /> |
| | | </el-form-item> |
| | | <el-form-item label="邮箱:"> |
| | | <el-input class="ztzf-input" v-model="userInfo.email" /> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | </div> |
| | | <div class="butn"> |
| | | <!-- <img @click="reset" :style="{ marginRight: pxToRem(23) }" :src="cancel1" alt="" /> |
| | | <img @click="submit" :style="{ marginRight: pxToRem(23) }" :src="publish1" alt="" /> --> |
| | | <el-button type="primary" @click="submit" style="margin-right: 10px;">提交</el-button> |
| | | <el-button @click="reset">重置</el-button> |
| | | </div> |
| | | </div> |
| | | <!-- 修改密码 --> |
| | | <div class="passwordBox" v-else-if="checked === 1"> |
| | | <div class="password"> |
| | | <el-form :model="passwordForm" label-width="120px"> |
| | | <el-form-item label="原始密码:" prop="oldPassword"> |
| | | <el-input class="ztzf-input" v-model="passwordForm.oldPassword" type="password" show-password /> |
| | | </el-form-item> |
| | | <el-form-item label="新密码:" prop="newPassword"> |
| | | <el-input class="ztzf-input" v-model="passwordForm.newPassword" type="password" show-password /> |
| | | </el-form-item> |
| | | <el-form-item label="确认密码:" prop="newPassword1"> |
| | | <el-input class="ztzf-input" v-model="passwordForm.newPassword1" type="password" show-password /> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <div class="butn"> |
| | | <!-- <img @click="reset" :style="{ marginRight: pxToRem(23) }" :src="cancel1" alt="" /> |
| | | <img @click="submit" :style="{ marginRight: pxToRem(23) }" :src="publish1" alt="" /> --> |
| | | <el-button type="primary" @click="submit" style="margin-right: 10px;">提交</el-button> |
| | | <el-button @click="reset">重置</el-button> |
| | | </div> |
| | | </div> |
| | | <!-- 密钥上传 --> |
| | | <div class="upload-file" v-else-if="checked === 2"> |
| | | <img v-if="isSuccess === 'success'" :src="uploadSuccess" alt="" /> |
| | | <img v-if="isSuccess === 'error'" :src="uploadError" alt="" /> |
| | | <el-upload action="/upload" accept=".lic" :show-file-list="false" :before-upload="handleUpload"> |
| | | <div class="upload-btn">密钥上传</div> |
| | | </el-upload> |
| | | <div class="password-time">密钥有效期:{{ passwordTime || '永久有效' }}</div> |
| | | </div> |
| | | </div> |
| | | > |
| | | <template #email="{ disabled, size }"> |
| | | <el-input |
| | | id="adfsdafdsf" |
| | | type="text" |
| | | :disabled="disabled" |
| | | :size="size" |
| | | v-model="form.email" |
| | | placeholder="请输入邮箱" |
| | | :readonly="readonly" |
| | | @focus="readonly = false" |
| | | > |
| | | </el-input> |
| | | </template> |
| | | </avue-form> |
| | | </basic-container> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { pxToRem } from '@/utils/rem' |
| | | import { useStore } from 'vuex' |
| | | import { ElMessage } from 'element-plus' |
| | | import { getToken } from '@/utils/auth' |
| | | import md5 from 'js-md5' |
| | | import request from '@/axios' |
| | | import { getUserInfo, updateInfo, updatePassword } from '@/api/system/user' |
| | | import { findLicenseDate } from '@/api/system/dict' |
| | | import { uploadLicense } from '@/api/license/uploadLicense'; |
| | | <script> |
| | | import option from '@/option/user/info'; |
| | | import { getUserInfo, updateInfo, updatePassword } from '@/api/system/user'; |
| | | import md5 from 'js-md5'; |
| | | import func from '@/utils/func'; |
| | | import { validatenull } from '@/utils/validate'; |
| | | import defaultAva from '@/assets/images/defaultava.png'; |
| | | export default { |
| | | data() { |
| | | return { |
| | | index: 0, |
| | | option: option, |
| | | form: { }, |
| | | readonly: true |
| | | }; |
| | | }, |
| | | created() { |
| | | this.handleWitch(); |
| | | }, |
| | | methods: { |
| | | handleSubmit(form, done) { |
| | | if (this.index === 0) { |
| | | form.name = form.realName; |
| | | updateInfo(form).then( |
| | | res => { |
| | | if (res.data.success) { |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '修改信息成功!', |
| | | }); |
| | | } else { |
| | | this.$message({ |
| | | type: 'error', |
| | | message: res.data.msg, |
| | | }); |
| | | } |
| | | done(); |
| | | }, |
| | | error => { |
| | | window.console.log(error); |
| | | done(); |
| | | } |
| | | ); |
| | | } else { |
| | | updatePassword(md5(form.oldPassword), md5(form.newPassword), md5(form.newPassword1)).then( |
| | | res => { |
| | | if (res.data.success) { |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '修改密码成功,请重新登录!', |
| | | }); |
| | | this.$store.dispatch('LogOut').then(() => { |
| | | this.$router.push({ path: '/login' }) |
| | | }) |
| | | } else { |
| | | this.$message({ |
| | | type: 'error', |
| | | message: res.data.msg, |
| | | }); |
| | | } |
| | | done(); |
| | | }, |
| | | error => { |
| | | window.console.log(error); |
| | | done(); |
| | | } |
| | | ); |
| | | } |
| | | }, |
| | | handleWitch() { |
| | | if (this.index === 0) { |
| | | getUserInfo().then(res => { |
| | | const user = res.data.data; |
| | | this.form = { |
| | | id: user.id, |
| | | avatar: user.avatar ? user.avatar :defaultAva, |
| | | name: user.name, |
| | | realName: user.realName, |
| | | phone: user.phone, |
| | | email: user.email, |
| | | }; |
| | | |
| | | }); |
| | | } |
| | | }, |
| | | |
| | | import uploadSuccess from '@/assets/images/uoload-success.png'; |
| | | import uploadError from '@/assets/images/upload-error.png'; |