18231669351
/
reagent_manage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

个人中心页布局改动

Browse Source 
修复PopupManager引用路径错误问题
master
toesbieya 6 years ago
parent d7ecc39564
commit 522a3ea6c1
9 changed files with 144 additions and 129 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      vue/src/bizComponents/DialogForm/index.vue
  2. 4
      vue/src/components/Message/index.js
  3. 2
      vue/src/components/PuzzleVerify/index.js
  4. 51
      vue/src/views/userCenter/components/Account.vue
  5. 92
      vue/src/views/userCenter/components/Avatar.vue
  6. 6
      vue/src/views/userCenter/components/LoginHistory.vue
  7. 2
      vue/src/views/userCenter/components/UserAction.vue
  8. 98
      vue/src/views/userCenter/components/UserCard.vue
  9. 16
      vue/src/views/userCenter/index.vue

2
vue/src/bizComponents/DialogForm/index.vue
Unescape View File

@ -1,7 +1,7 @@
<template>
<el-dialog
v-drag-dialog
class="dialog-form"
custom-class="dialog-form"
:top="top"
:visible="value"
:width="width"

4
vue/src/components/Message/index.js
Unescape View File

@ -1,7 +1,7 @@
import Vue from 'vue'
import Main from './main.vue'
import {PopupManager} from 'element-ui/src/utils/popup'
import {isVNode} from 'element-ui/src/utils/vdom'
import {PopupManager} from 'element-ui/lib/utils/popup'
import {isVNode} from 'element-ui/lib/utils/vdom'
import {isEmpty} from "@/utils"
let MessageConstructor = Vue.extend(Main)

2
vue/src/components/PuzzleVerify/index.js
Unescape View File

@ -1,6 +1,6 @@
import Vue from 'vue'
import Main from './main.vue'
import {PopupManager} from 'element-ui/src/utils/popup'
import {PopupManager} from 'element-ui/lib/utils/popup'
let Constructor = Vue.extend(Main)

51
vue/src/views/userCenter/components/Account.vue
Unescape View File

@ -1,23 +1,35 @@
<template>
<el-form ref="form" :model="form" :rules="rules" size="small" label-position="right" label-width="100px"
status-icon>
<el-form-item label="旧密码：" prop="old_pwd">
<el-input v-model.trim="form.old_pwd" autocomplete="off" maxlength="100" type="password"/>
</el-form-item>
<el-form-item label="新密码：" prop="new_pwd">
<el-input v-model.trim="form.new_pwd" autocomplete="off" maxlength="100" type="password"/>
</el-form-item>
<el-form-item>
<el-button :loading="loading" type="primary" @click="submit">确认修改</el-button>
</el-form-item>
</el-form>
<dialog-form :loading="loading" title="修改密码" :value="value" width="30%" @close="cancel">
<el-form
ref="form"
:model="form"
:rules="rules"
size="small"
label-position="right"
label-width="100px"
status-icon
>
<el-form-item label="旧密码：" prop="old_pwd">
<el-input v-model.trim="form.old_pwd" maxlength="100" type="password"/>
</el-form-item>
<el-form-item label="新密码：" prop="new_pwd">
<el-input v-model.trim="form.new_pwd" maxlength="100" type="password"/>
</el-form-item>
</el-form>
<template v-slot:footer>
<el-button plain size="small" @click="cancel">取 消</el-button>
<el-button size="small" type="primary" @click="confirm">确 定</el-button>
</template>
</dialog-form>
</template>
<script>
import DialogForm from '@/bizComponents/DialogForm'
import {updateUserPwd} from "@/api/system/user"
import {elSuccess} from "@/utils/message"
export default {
components: {DialogForm},
data() {
return {
loading: false,
@ -30,9 +42,7 @@
new_pwd: [
{required: true, message: '请输入新密码', trigger: 'change'},
{
validator: (r, v, c) => {
v !== this.form.old_pwd ? c() : c('新密码不得与旧密码相同')
},
validator: (r, v, c) => v !== this.form.old_pwd ? c() : c('新密码不得与旧密码相同'),
trigger: 'change'
},
{
@ -45,13 +55,16 @@
}
}
},
props: {
value: Boolean
},
methods: {
clearForm() {
this.form.old_pwd = null
this.form.new_pwd = null
this.$nextTick(() => this.$refs.form.clearValidate())
},
submit() {
confirm() {
if (this.loading) return
this.$refs.form.validate(v => {
if (!v) return
@ -60,9 +73,13 @@
.then(() => elSuccess('修改成功'))
.finally(() => {
this.loading = false
this.clearForm()
this.cancel()
})
})
},
cancel() {
this.$emit('input', false)
this.clearForm()
}
}
}

92
vue/src/views/userCenter/components/Avatar.vue
Unescape View File

@ -1,52 +1,60 @@
<template>
<el-row class="avatar-cropper" type="flex">
<div class="img-wrapper">
<vue-cropper
ref="cropper"
:img="img"
:info="false"
autoCrop
autoCropHeight="200px"
autoCropWidth="200px"
centerBox
fixedBox
full
outputType="png"
@realTime="previews=$event"
@wheel.native.prevent="scale"
/>
</div>
<div class="operate-wrapper">
<div class="preview-container">
<div :style="previews.div">
<img :src="previews.url" :style="previews.img">
<dialog-form :loading="loading" title="上传头像" :value="value" width="50%" @close="cancel">
<el-row class="avatar-cropper" type="flex">
<div class="img-wrapper">
<vue-cropper
ref="cropper"
:img="img"
:info="false"
autoCrop
autoCropHeight="200px"
autoCropWidth="200px"
centerBox
fixedBox
full
outputType="png"
@realTime="previews=$event"
@wheel.native.prevent="scale"
/>
</div>
<div class="operate-wrapper">
<div class="preview-container">
<div :style="previews.div">
<img :src="previews.url" :style="previews.img">
</div>
</div>
<el-button size="small" type="primary" @click="$refs.input.click()">
选择图片
<input
ref="input"
accept="image/png, image/jpeg, image/gif, image/jpg"
style="display: none"
type="file"
@change="chooseImage"
>
</el-button>
</div>
<el-button size="small" type="primary" @click="$refs.input.click()">
选择图片
<input
ref="input"
accept="image/png, image/jpeg, image/gif, image/jpg"
style="display: none"
type="file"
@change="chooseImage"
>
</el-button>
<el-button :loading="loading" size="small" type="primary" @click="upload">上 传</el-button>
<el-button plain size="small" @click="!loading&&clear()">取 消</el-button>
</div>
</el-row>
</el-row>
<template v-slot:footer>
<el-button plain size="small" @click="cancel">取 消</el-button>
<el-button size="small" type="primary" @click="confirm">确 定</el-button>
</template>
</dialog-form>
</template>
<script>
import {VueCropper} from 'vue-cropper'
import DialogForm from '@/bizComponents/DialogForm'
import {elError, elSuccess} from "@/utils/message"
import {autoCompleteUrl, upload} from "@/utils/file"
import {updateAvatar} from "@/api/system/user"
export default {
name: "Avatar",
components: {VueCropper},
components: {VueCropper, DialogForm},
props: {
value: Boolean
},
data() {
return {
loading: false,
@ -74,7 +82,7 @@
reader.readAsArrayBuffer(file)
},
upload() {
confirm() {
if (!this.img) return elError('请先上传图片')
if (this.loading) return
this.loading = true
@ -86,7 +94,7 @@
this.$store.dispatch('user/refresh')
elSuccess(msg)
})
.finally(() => this.clear())
.finally(() => this.cancel())
})
},
@ -101,10 +109,12 @@
scale(e) {
const eventDelta = e.wheelDelta || -(e.detail || 0) * 40
this.$refs.cropper.changeScale(eventDelta / 120)
},
cancel() {
this.$emit('input', false)
this.clear()
}
},
beforeDestroy() {
this.clear()
}
}
</script>

6
vue/src/views/userCenter/components/LoginHistory.vue
Unescape View File

@ -11,7 +11,7 @@
</el-table-column>
<el-table-column align="center" label="说明" width="80">
<template v-slot="{row}">
<el-tag :type="row.type===1?'success':'danger'" effect="dark">
<el-tag :type="row.type===1?'success':'danger'" size="small" effect="dark">
{{getInfo(row.type)}}
</el-tag>
</template>
@ -67,9 +67,9 @@
getInfo(type) {
switch (type) {
case 0:
return '登录'
case 1:
return '登出'
case 1:
return '登陆'
}
return null
}

2
vue/src/views/userCenter/components/UserAction.vue
Unescape View File

@ -17,7 +17,7 @@
<p>{{row.error}}</p>
</el-scrollbar>
</div>
<el-tag :type="row.type===1?'success':'danger'" effect="dark">
<el-tag :type="row.type===1?'success':'danger'" size="small" effect="dark">
{{getInfo(row.type)}}
</el-tag>
</el-tooltip>

98
vue/src/views/userCenter/components/UserCard.vue
Unescape View File

@ -1,28 +1,37 @@
<template>
<el-card class="user-card" header="用户信息">
<div class="user-profile">
<div class="box-center">
<el-avatar :size="200" :src="avatar" icon="el-icon-user-solid"/>
<div class="user-name text-center">{{name}}</div>
<div class="user-role text-center text-muted">{{role_name}}</div>
</div>
</div>
<el-card class="user-card" header="个人信息">
<el-avatar :size="200" :src="avatar" icon="el-icon-user-solid" @click.native="uploadAvatarDialog=true"/>
<!--<div class="user-bio">
<div class="user-bio-section">
<div class="user-bio-section-header">
<i class="el-icon-lock"/>
<span>修改锁屏密码</span>
</div>
</div>
</div>-->
<ul class="user-info">
<li>登录账号
<div class="user-right">{{ name }}</div>
</li>
<li>用户角色
<div class="user-right">{{ role_name }}</div>
</li>
<li>安全设置
<div class="user-right"><a @click="modifyPasswordDialog=true">修改密码</a></div>
</li>
</ul>
<user-account v-model="modifyPasswordDialog"/>
<upload-avatar v-model="uploadAvatarDialog"/>
</el-card>
</template>
<script>
import UserAccount from './Account'
import UploadAvatar from './Avatar'
import {mapState} from 'vuex'
export default {
components: {UserAccount, UploadAvatar},
data() {
return {
modifyPasswordDialog: false,
uploadAvatarDialog: false
}
},
computed: {
...mapState('user', {
name: state => state.name,
@ -30,56 +39,39 @@
role_name: state => state.role_name,
admin: state => state.admin
})
}
},
methods: {}
}
</script>
<style lang="scss">
.user-card {
.el-avatar i {
line-height: 180px;
font-size: 150px;
}
.text-muted {
color: #777;
}
.user-profile {
.user-name {
font-weight: bold;
}
.box-center {
margin: 0 auto;
display: table;
padding-top: 10px;
}
.el-avatar {
margin: 0 auto;
display: block;
cursor: pointer;
.user-role {
padding-top: 10px;
font-weight: 400;
font-size: 14px;
i {
line-height: 180px;
font-size: 150px;
}
}
.user-bio {
margin-top: 20px;
color: #606266;
.user-info {
padding-left: 0;
list-style: none;
span {
padding-left: 4px;
li {
border-bottom: 1px solid #F0F3F4;
padding: 11px 0;
font-size: 13px;
}
.user-bio-section {
font-size: 14px;
padding: 15px 0;
.user-right {
float: right;
.user-bio-section-header {
border-bottom: 1px solid #dfe6ec;
padding-bottom: 10px;
margin-bottom: 10px;
font-weight: bold;
a {
color: #317EF3;
}
}
}

16
vue/src/views/userCenter/index.vue
Unescape View File

@ -1,9 +1,9 @@
<template>
<el-row :gutter="20">
<el-col :span="6">
<el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="5" style="margin-bottom: 10px">
<user-card/>
</el-col>
<el-col :span="18">
<el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="19">
<el-card>
<el-tabs v-model="activeTab">
<el-tab-pane v-for="i in tabs" v-once :key="i.label" :name="i.name">
@ -27,22 +27,18 @@
<script>
import UserCard from './components/UserCard'
import UserAvatar from "@/views/userCenter/components/Avatar"
import UserAccount from './components/Account'
import LoginHistory from './components/LoginHistory'
import UserAction from './components/UserAction'
export default {
name: 'userCenter',
components: {UserCard, UserAvatar, UserAccount, LoginHistory, UserAction},
components: {UserCard, LoginHistory, UserAction},
data() {
return {
activeTab: 'user-avatar',
activeTab: 'login-history',
tabs: [
{label: '上传头像', name: 'user-avatar'},
{label: '修改密码', name: 'user-account'},
{label: '登录历史', name: 'login-history', intro: '只保留最近7天的记录，想查询全部请联系管理员'},
{label: '操作记录', name: 'user-action', intro: '只保留最近7天的记录，想查询全部请联系管理员'},
{label: '登录历史', name: 'login-history', intro: '只保留最近7天的记录'},
{label: '操作记录', name: 'user-action', intro: '只保留最近7天的记录'},
]
}
}

Write Preview
Loading…
Cancel
Save