|
|
@@ -1,84 +1,47 @@
|
|
|
<template>
|
|
|
- <div class="personal-panel">
|
|
|
- <div class="personal-desc" :style="{ 'background': this.$store.state.app.themeColor }">
|
|
|
- <div class="avatar-container u-f u-f-ajc">
|
|
|
- <!-- <img class="avatar" :src="require('@/assets/user.png')" /> -->
|
|
|
- <img class="avatar" :src="user.headSculpture?user.headSculpture:avatar" />
|
|
|
+ <div style="width: 260px;">
|
|
|
+ <div class="clearfix">
|
|
|
+ <img style="float: left;" :src="user.headSculpture?user.headSculpture:avatar" />
|
|
|
+ <div style="float: left;">
|
|
|
+ <p>{{ user.roleName }} - {{ user.name }}</p>
|
|
|
+ <p>工号：{{ user.deptId }}</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <!-- <div class="name-role">
|
|
|
- <template v-if="user.name == 'admin'">
|
|
|
- <span class="sender">{{ user.name }}</span>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <span class="sender">{{ user.id }} - {{ user.name }}</span>
|
|
|
- </template>
|
|
|
- </div> -->
|
|
|
- <div class="name-role">
|
|
|
- <template >
|
|
|
- <span class="sender">{{ user.deptName }} - {{ user.roleName }}</span>
|
|
|
- </template>
|
|
|
- <!-- <template v-if="user.name == 'admin'">
|
|
|
- <span class="sender">超级管理员</span>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <span class="sender">{{ user.deptName }} - {{ user.jobName }}</span>
|
|
|
- </template> -->
|
|
|
- </div>
|
|
|
- <template v-if="user.name != 'admin'">
|
|
|
- <div class="registe-info">
|
|
|
- <span class="registe-info">
|
|
|
- <li class="fa fa-clock-o"></li>
|
|
|
- {{ user.createTime }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <!-- <div class="personal-relation">
|
|
|
- <span class="relation-item">followers</span>
|
|
|
- <span class="relation-item">watches</span>
|
|
|
- <span class="relation-item">friends</span>
|
|
|
- </div> -->
|
|
|
- <!-- <div class="main-operation">
|
|
|
- <span class="main-operation-item">
|
|
|
- <el-button size="small" icon="fa fa-male"> 个人中心</el-button>
|
|
|
- </span>
|
|
|
- <span class="main-operation-item">
|
|
|
- <el-button size="small" icon="fa fa-key" @click="showPsdDialog"> 修改密码</el-button>
|
|
|
- </span>
|
|
|
- </div> -->
|
|
|
- <div class="other-operation">
|
|
|
- <div class="other-operation-item" @click="clearCache">
|
|
|
- <li class="fa fa-eraser" ></li>
|
|
|
- 清除缓存
|
|
|
- </div>
|
|
|
- <div class="other-operation-item" @click="recruiting" v-if="user.roleId!=='20'">
|
|
|
- <li class="fa fa-user"></li>
|
|
|
- 闪电增员
|
|
|
- </div>
|
|
|
- <!-- <div class="other-operation-item">
|
|
|
- <li class="fa fa-bell"></li>
|
|
|
- 访问次数
|
|
|
- </div> -->
|
|
|
- <div class="other-operation-item" @click="showPsdDialog">
|
|
|
- <li class="fa fa-key"></li>
|
|
|
- 修改密码
|
|
|
- </div>
|
|
|
- <!-- <div class="other-operation-item" @click="showBackupDialog">
|
|
|
- <li class="fa fa-undo"></li>
|
|
|
- {{ $t("common.backupRestore") }}
|
|
|
- </div> -->
|
|
|
+ <div class="textItem" >
|
|
|
+ <li @click="personalInformation">
|
|
|
+ <img src="@/assets/image/个人信息.png" />
|
|
|
+ 个人信息
|
|
|
+ </li>
|
|
|
+ <li @click="notify">
|
|
|
+ <img src="@/assets/image/消息通知.png" />
|
|
|
+ 消息通知
|
|
|
+ </li>
|
|
|
+ <li @click="showPsdDialog">
|
|
|
+ <img src="@/assets/image/修改密码.png" />
|
|
|
+ 修改密码
|
|
|
+ </li>
|
|
|
+ <li @click="clearCache">
|
|
|
+ <img src="@/assets/image/清除缓存.png" />
|
|
|
+ 清除缓存
|
|
|
+ </li>
|
|
|
+ <li @click="recruiting" v-if="user.roleId!=='20'">
|
|
|
+ <img src="@/assets/image/闪电增员.png" />
|
|
|
+ 闪电增员
|
|
|
+ </li>
|
|
|
</div>
|
|
|
- <div class="personal-footer" @click="logout">
|
|
|
- <li class="fa fa-sign-out"></li>
|
|
|
- {{ $t("common.logout") }}
|
|
|
+ <div class="logout">
|
|
|
+ <el-button @click="logout" size="small" type="primary" plain>退出登录</el-button>
|
|
|
</div>
|
|
|
- <!--备份还原界面-->
|
|
|
+ <message-panel ref="messagePanel"></message-panel>
|
|
|
<backup ref="backupDialog" @afterRestore="afterRestore"></backup>
|
|
|
- <!-- 修改密码 -->
|
|
|
<psdreset ref="psdresetDialog" @afterRestore="afterReset"></psdreset>
|
|
|
- <!-- 闪电增员 -->
|
|
|
<Recruiting ref="recruitingDialog" ></Recruiting>
|
|
|
-
|
|
|
+ <el-dialog width="500px" :visible.sync="backupVisible" :close-on-click-modal="true" :modal=false>
|
|
|
+ <div slot="title" class="dialog-title">
|
|
|
+ <span>个人信息</span>
|
|
|
+ </div>
|
|
|
+ <templateForm :ruleForm="ruleForm" :formData="user" :labelWidth="labelWidth" :spanWidth="12"></templateForm>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -88,13 +51,18 @@ import QRCode from "qrcodejs2";
|
|
|
import Backup from "@/views/Backup/Backup"
|
|
|
import Psdreset from "@/views/Psdreset/Psdreset"
|
|
|
import Recruiting from "@/views/Sys/Recruiting"
|
|
|
+import MessagePanel from "@/views/Core/MessagePanel"
|
|
|
+import TemplateForm from "@/components/TemplateForm/index"
|
|
|
+
|
|
|
export default {
|
|
|
name: "qrCode",
|
|
|
name: 'PersonalPanel',
|
|
|
components: {
|
|
|
Backup,
|
|
|
Psdreset,
|
|
|
- Recruiting
|
|
|
+ Recruiting,
|
|
|
+ MessagePanel,
|
|
|
+ TemplateForm
|
|
|
},
|
|
|
props: {
|
|
|
user: {
|
|
|
@@ -121,11 +89,63 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ backupVisible:false,
|
|
|
avatar: require("@/assets/user.png"),
|
|
|
+ labelWidth:'80px',
|
|
|
+ ruleForm:[
|
|
|
+ {
|
|
|
+ label:'部门编码',
|
|
|
+ prop:'deptId',
|
|
|
+ type:'input',
|
|
|
+ disabled:true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label:'姓名',
|
|
|
+ prop:'name',
|
|
|
+ type:'input',
|
|
|
+ disabled:true
|
|
|
+ }, {
|
|
|
+ label:'机构名称',
|
|
|
+ prop:'pdeptName',
|
|
|
+ type:'input',
|
|
|
+ disabled:true
|
|
|
+ },{
|
|
|
+ label:'性别',
|
|
|
+ prop:'sex',
|
|
|
+ type:'select',
|
|
|
+ disabled:true,
|
|
|
+ options:JSON.parse(localStorage.getItem('sexOptions')),
|
|
|
+ }, {
|
|
|
+ label:'部门名称',
|
|
|
+ prop:'deptName',
|
|
|
+ type:'input',
|
|
|
+ disabled:true
|
|
|
+ },{
|
|
|
+ label:'联系电话',
|
|
|
+ prop:'mobile',
|
|
|
+ type:'input',
|
|
|
+ disabled:true
|
|
|
+ }, {
|
|
|
+ label:'工号',
|
|
|
+ prop:'id',
|
|
|
+ type:'input',
|
|
|
+ disabled:true
|
|
|
+ },{
|
|
|
+ label:'角色',
|
|
|
+ prop:'roleName',
|
|
|
+ type:'input',
|
|
|
+ disabled:true
|
|
|
+ },{
|
|
|
+ label:'创建时间',
|
|
|
+ prop:'createTime',
|
|
|
+ type:'input',
|
|
|
+ disabled:true
|
|
|
+ },],
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
created(){
|
|
|
- // if (Cookies.get("user") != 'admin') {
|
|
|
+ // if (Cookies.get("user") != 'admin') {
|
|
|
// this.userData.registeInfo = "入司时间：" + this.transformTime( this.userData.esmUserInternal.intime);
|
|
|
// this.$api.dept.getDeptById( this.user.deptId).then(deptRes => {
|
|
|
// this.user.deptName = deptRes.data.name;
|
|
|
@@ -136,7 +156,14 @@ export default {
|
|
|
this.user.createTime = this.user.createTime.substr(0,10)
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
+ // 个人中心
|
|
|
+ personalInformation(){
|
|
|
+ this.backupVisible=true
|
|
|
+ },
|
|
|
+ //消息通知
|
|
|
+ notify() {
|
|
|
+ this.$refs.messagePanel.setBackupVisible(true)
|
|
|
+ },
|
|
|
//闪电增员
|
|
|
recruiting() {
|
|
|
this.$refs.recruitingDialog.setBackupVisible(true)
|
|
|
@@ -207,93 +234,57 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-.personal-panel {
|
|
|
- font-size: 14px;
|
|
|
- width: 280px;
|
|
|
- text-align: center;
|
|
|
- border-color: rgba(180, 190, 190, 0.2);
|
|
|
- border-width: 1px;
|
|
|
- border-style: solid;
|
|
|
- background: rgba(182, 172, 172, 0.1);
|
|
|
- margin: -14px;
|
|
|
-}
|
|
|
-.personal-desc {
|
|
|
- padding: 15px;
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-.avatar {
|
|
|
- width: 80px;
|
|
|
- height: 80px;
|
|
|
- border-radius: 90px;
|
|
|
-}
|
|
|
-
|
|
|
-.name-role {
|
|
|
- font-size: 16px;
|
|
|
- padding: 5px;
|
|
|
-}
|
|
|
-
|
|
|
-.personal-relation {
|
|
|
- font-size: 16px;
|
|
|
- padding: 12px;
|
|
|
- margin-right: 1px;
|
|
|
- background: rgba(200, 209, 204, 0.3);
|
|
|
-}
|
|
|
-
|
|
|
-.relation-item {
|
|
|
- padding: 12px;
|
|
|
-}
|
|
|
-
|
|
|
-.relation-item:hover {
|
|
|
- cursor: pointer;
|
|
|
- color: rgb(19, 138, 156);
|
|
|
-}
|
|
|
-
|
|
|
-.main-operation {
|
|
|
- padding: 8px;
|
|
|
- margin-right: 1px;
|
|
|
- border-color: rgba(201, 206, 206, 0.2);
|
|
|
- border-top-width: 1px;
|
|
|
- border-top-style: solid;
|
|
|
-}
|
|
|
-
|
|
|
-.main-operation-item {
|
|
|
- margin: 15px;
|
|
|
-}
|
|
|
-
|
|
|
-.other-operation {
|
|
|
- padding: 15px;
|
|
|
- margin-right: 1px;
|
|
|
- text-align: left;
|
|
|
- border-color: rgba(180, 190, 190, 0.2);
|
|
|
- border-top-width: 1px;
|
|
|
- border-top-style: solid;
|
|
|
-}
|
|
|
-
|
|
|
-.other-operation-item {
|
|
|
- padding: 12px;
|
|
|
+<style scoped lang="scss">
|
|
|
+.clearfix{
|
|
|
+ img{
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin: 10px;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ display: block;
|
|
|
+ line-height: 0.8;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ p:last-child{
|
|
|
+ color: rgba(0, 0, 0, 0.5);
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ p:first-child{
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ overflow:hidden;
|
|
|
+ border-bottom: 1px solid #F1F3F6;
|
|
|
+ width: 260px;
|
|
|
}
|
|
|
-
|
|
|
-.other-operation-item:hover {
|
|
|
- cursor: pointer;
|
|
|
- background: #9e94941e;
|
|
|
- color: rgb(19, 138, 156);
|
|
|
+.textItem{
|
|
|
+ padding: 15px 0;
|
|
|
+ overflow: hidden;
|
|
|
+ border-bottom: 1px solid #F1F3F6;
|
|
|
+ li{
|
|
|
+ list-style: none;
|
|
|
+ width: 80px;
|
|
|
+ height: 70px;
|
|
|
+ text-align: center;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ img{
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
-.personal-footer {
|
|
|
- margin-right: 1px;
|
|
|
- font-size: 14px;
|
|
|
+.logout{
|
|
|
text-align: center;
|
|
|
padding-top: 10px;
|
|
|
- padding-bottom: 10px;
|
|
|
- border-color: rgba(180, 190, 190, 0.2);
|
|
|
- border-top-width: 1px;
|
|
|
- border-top-style: solid;
|
|
|
}
|
|
|
-
|
|
|
-.personal-footer:hover {
|
|
|
- cursor: pointer;
|
|
|
- color: rgb(19, 138, 156);
|
|
|
- background: #b1a6a61e;
|
|
|
+.dialog-title{
|
|
|
+ font-weight: bold;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ border-bottom: 1px solid #F1F3F6;
|
|
|
}
|
|
|
</style>
|
lihongxiao
