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. 41
      vue/src/views/userCenter/components/Account.vue
  5. 24
      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. 96
      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> <template>
<el-dialog <el-dialog
v-drag-dialog v-drag-dialog
class="dialog-form" custom-class="dialog-form"
:top="top" :top="top"
:visible="value" :visible="value"
:width="width" :width="width"

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

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

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

@ -1,6 +1,6 @@
import Vue from 'vue' import Vue from 'vue'
import Main from './main.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) let Constructor = Vue.extend(Main)

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

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

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

@ -1,4 +1,5 @@
<template> <template>
<dialog-form :loading="loading" title="上传头像" :value="value" width="50%" @close="cancel">
<el-row class="avatar-cropper" type="flex"> <el-row class="avatar-cropper" type="flex">
<div class="img-wrapper"> <div class="img-wrapper">
<vue-cropper <vue-cropper
@ -32,21 +33,28 @@
@change="chooseImage" @change="chooseImage"
> >
</el-button> </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> </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> </template>
<script> <script>
import {VueCropper} from 'vue-cropper' import {VueCropper} from 'vue-cropper'
import DialogForm from '@/bizComponents/DialogForm'
import {elError, elSuccess} from "@/utils/message" import {elError, elSuccess} from "@/utils/message"
import {autoCompleteUrl, upload} from "@/utils/file" import {autoCompleteUrl, upload} from "@/utils/file"
import {updateAvatar} from "@/api/system/user" import {updateAvatar} from "@/api/system/user"
export default { export default {
name: "Avatar", name: "Avatar",
components: {VueCropper}, components: {VueCropper, DialogForm},
props: {
value: Boolean
},
data() { data() {
return { return {
loading: false, loading: false,
@ -74,7 +82,7 @@
reader.readAsArrayBuffer(file) reader.readAsArrayBuffer(file)
}, },
upload() { confirm() {
if (!this.img) return elError('请先上传图片') if (!this.img) return elError('请先上传图片')
if (this.loading) return if (this.loading) return
this.loading = true this.loading = true
@ -86,7 +94,7 @@
this.$store.dispatch('user/refresh') this.$store.dispatch('user/refresh')
elSuccess(msg) elSuccess(msg)
}) })
.finally(() => this.clear()) .finally(() => this.cancel())
}) })
}, },
@ -101,12 +109,14 @@
scale(e) { scale(e) {
const eventDelta = e.wheelDelta || -(e.detail || 0) * 40 const eventDelta = e.wheelDelta || -(e.detail || 0) * 40
this.$refs.cropper.changeScale(eventDelta / 120) this.$refs.cropper.changeScale(eventDelta / 120)
}
}, },
beforeDestroy() {
cancel() {
this.$emit('input', false)
this.clear() this.clear()
} }
} }
}
</script> </script>
<style lang="scss"> <style lang="scss">

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

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

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

@ -17,7 +17,7 @@
<p>{{row.error}}</p> <p>{{row.error}}</p>
</el-scrollbar> </el-scrollbar>
</div> </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)}} {{getInfo(row.type)}}
</el-tag> </el-tag>
</el-tooltip> </el-tooltip>

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

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

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

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

Write Preview
Loading…
Cancel
Save