Skip to content

F
front-backend
Commit a6643947 by dqjdda
Options

用户加入昵称与性别字段，个人中心优化，可修改基本资料

parent 071a3bc5
Showing with 147 additions and 72 deletions
src/api/system/user.js
......@@ -23,6 +23,14 @@ export function edit(data) {
})
}
export function editUser(data) {
return request({
url: 'api/users/center',
method: 'put',
data
})
}
export function updatePass(user) {
const data = {
oldPass: user.oldPass,
......
src/assets/icons/svg/login.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575115830633" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2251" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M409.002667 469.333333L300.8 361.130667 361.130667 300.8l211.2 211.2-211.2 211.2-60.330667-60.330667L409.002667 554.666667H128v-85.333334h281.002667zM469.333333 128h341.333334c46.933333 0 85.333333 38.4 85.333333 85.333333v597.333334c0 46.933333-38.4 85.333333-85.333333 85.333333h-341.333334v-85.333333h341.333334V213.333333h-341.333334V128z" fill="#cdcdcd" p-id="2252"></path></svg>
\ No newline at end of file
src/assets/icons/svg/run.svg deleted 100644 → 0
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="1314" t="1555468036837" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path fill="#e6e6e6" d="M977.066667 352 977.066667 352l-234.666667 213.333333 0 0C736 571.733333 725.333333 576 714.666667 576c-10.666667 0-19.2-4.266667-25.6-8.533333l0 0-192-149.333333 0 0c-10.666667-8.533333-17.066667-19.2-17.066667-34.133333 0-23.466667 19.2-42.666667 42.666667-42.666667 10.666667 0 19.2 4.266667 25.6 8.533333l0 0 164.266667 128 209.066667-189.866667 0 0c8.533333-6.4 17.066667-10.666667 27.733333-10.666667 23.466667 0 42.666667 19.2 42.666667 42.666667C992 332.8 985.6 343.466667 977.066667 352zM522.666667 256c-70.4 0-128-57.6-128-128 0-70.4 57.6-128 128-128s128 57.6 128 128C650.666667 198.4 593.066667 256 522.666667 256zM522.666667 85.333333c-23.466667 0-42.666667 19.2-42.666667 42.666667s19.2 42.666667 42.666667 42.666667 42.666667-19.2 42.666667-42.666667S546.133333 85.333333 522.666667 85.333333zM396.8 539.733333l234.666667 149.333333 0 0c12.8 8.533333 19.2 21.333333 19.2 36.266667 0 21.333333-17.066667 40.533333-38.4 42.666667l0 0-179.2 19.2L166.4 1013.333333l0 0C157.866667 1019.733333 149.333333 1024 138.666667 1024c-23.466667 0-42.666667-19.2-42.666667-42.666667 0-8.533333 2.133333-14.933333 6.4-21.333333l0 0 234.666667-405.333333 0 0c6.4-12.8 21.333333-21.333333 36.266667-21.333333C381.866667 533.333333 390.4 535.466667 396.8 539.733333L396.8 539.733333zM298.666667 789.333333l89.6-76.8 0 0c6.4-4.266667 14.933333-8.533333 23.466667-8.533333l0 0 72.533333-8.533333-96-59.733333L298.666667 789.333333zM302.933333 360.533333 302.933333 360.533333 138.666667 426.666667l78.933333 128 0 0c4.266667 6.4 6.4 14.933333 6.4 23.466667 0 23.466667-19.2 42.666667-42.666667 42.666667-14.933333 0-27.733333-8.533333-36.266667-19.2l0 0-106.666667-170.666667 0 0c-4.266667-6.4-6.4-14.933333-6.4-23.466667 0-17.066667 10.666667-34.133333 27.733333-40.533333l0 0 213.333333-85.333333c0 0 0 0 0 0l0 0 0 0c4.266667-2.133333 10.666667-2.133333 14.933333-2.133333 23.466667 0 42.666667 19.2 42.666667 42.666667C330.666667 337.066667 320 354.133333 302.933333 360.533333z" p-id="1315"/></svg>
\ No newline at end of file
src/assets/icons/svg/running.svg deleted 100644 → 0
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="icon" p-id="1499" t="1555466208830" version="1.1" viewBox="0 0 1024 1024"><defs><style type="text/css"/></defs><path fill="#8a8a8a" d="M640 192c53.02 0 96-42.98 96-96S693.02 0 640 0s-96 42.98-96 96 42.98 96 96 96zM323.38 634.94l-29.6 69.04H160c-35.34 0-64 28.66-64 64s28.66 64 64 64h154.9c38.5 0 73.16-22.88 88.22-58.18l17.58-41.04-21.34-12.6c-34.64-20.46-60.12-50.74-75.98-85.22zM864 447.98h-88.06l-52.12-106.5c-25-51.1-70.9-88.46-123.56-101.88l-142.16-42.28c-56.6-13.6-115.54-1.1-161.68 34.28l-79.34 60.82c-28.06 21.5-33.38 61.66-11.84 89.72s61.68 33.32 89.72 11.84l79.38-60.82c15.34-11.78 34.88-16 50.54-12.28l29.4 8.74-74.92 174.78c-25.24 58.96-2.62 128.02 52.6 160.62l169.96 100.34-54.94 175.46c-10.56 33.72 8.22 69.62 41.94 80.18 6.38 2 12.82 2.96 19.16 2.96 27.22 0 52.46-17.54 61.04-44.9l63.28-202.12c11.82-41.54-5.78-86.16-43.28-108.78l-122.48-72.28 62.62-156.56 40.54 82.86c16 32.68 49.84 53.78 86.22 53.78H864c35.34 0 64-28.66 64-64s-28.66-63.98-64-63.98z" p-id="1500"/></svg>
\ No newline at end of file
src/views/monitor/online/index.vue
......@@ -16,6 +16,7 @@
<!--表格渲染-->
<el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
<el-table-column prop="userName" label="用户名" />
<el-table-column prop="nickName" label="用户昵称" />
<el-table-column prop="job" label="岗位" />
<el-table-column prop="ip" label="登录IP" />
<el-table-column :show-overflow-tooltip="true" prop="address" label="登录地点" />
......
src/views/system/user/center.vue
......@@ -20,11 +20,11 @@
</el-upload>
</div>
<ul class="user-info">
<li><svg-icon icon-class="user1" /> 用户名称 <div class="user-right">{{ user.username }}</div></li>
<li><div style="height: 100%"><svg-icon icon-class="login" /> 登录账号<div class="user-right">{{ user.username }}</div></div></li>
<li><svg-icon icon-class="user1" /> 用户昵称 <div class="user-right">{{ user.nickName }}</div></li>
<li><svg-icon icon-class="phone" /> 手机号码 <div class="user-right">{{ user.phone }}</div></li>
<li><svg-icon icon-class="email" /> 用户邮箱 <div class="user-right">{{ user.email }}</div></li>
<li><svg-icon icon-class="dept" /> 所属部门 <div class="user-right"> {{ user.dept }} / {{ user.job }}</div></li>
<li><svg-icon icon-class="date" /> 创建日期 <div class="user-right">{{ parseTime(user.createTime) }}</div></li>
<li>
<svg-icon icon-class="anq" /> 安全设置
<div class="user-right">
......@@ -36,42 +36,67 @@
</div>
</el-card>
</el-col>
<!-- 用户日志 -->
<el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="19">
<!-- 用户资料 -->
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>操作日志</span>
<div style="display:inline-block;float: right;cursor: pointer" @click="refresh"><i :class="ico" /></div>
</div>
<div>
<el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
<el-table-column prop="description" label="行为" />
<el-table-column prop="requestIp" label="IP" />
<el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
<el-table-column prop="browser" label="浏览器" />
<el-table-column prop="time" label="请求耗时" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
<el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
<el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建日期" width="180px">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<el-pagination
:total="total"
:current-page="page + 1"
style="margin-top: 8px;"
layout="total, prev, pager, next, sizes"
@size-change="sizeChange"
@current-change="pageChange"
/>
</div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用户资料" name="first">
<el-form ref="form" :model="form" :rules="rules" style="margin-top: 10px;" size="small" label-width="65px">
<el-form-item label="昵称" prop="nickName">
<el-input v-model="form.nickName" style="width: 35%" />
<span style="color: #C0C0C0;margin-left: 10px;">用户昵称不作为登录使用</span>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="form.phone" style="width: 35%;" />
<span style="color: #C0C0C0;margin-left: 10px;">手机号码不能重复</span>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.sex" style="width: 178px">
<el-radio label="男">男</el-radio>
<el-radio label="女">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="">
<el-button :loading="saveLoading" size="mini" type="primary" @click="doSubmit">保存配置</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<!-- 操作日志 -->
<el-tab-pane label="操作日志" name="second">
<el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
<el-table-column prop="description" label="行为" />
<el-table-column prop="requestIp" label="IP" />
<el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
<el-table-column prop="browser" label="浏览器" />
<el-table-column prop="time" label="请求耗时" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
<el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
<el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
</template>
</el-table-column>
<el-table-column
align="right"
>
<template slot="header">
<div style="display:inline-block;float: right;cursor: pointer" @click="init">创建日期<i class="el-icon-refresh" style="margin-left: 40px" /></div>
</template>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<el-pagination
:total="total"
:current-page="page + 1"
style="margin-top: 8px;"
layout="total, prev, pager, next, sizes"
@size-change="sizeChange"
@current-change="pageChange"
/>
</el-tab-pane>
</el-tabs>
</el-card>
</el-col>
</el-row>
......@@ -82,24 +107,46 @@
<script>
import { mapGetters } from 'vuex'
import { regEmail } from '@/utils/index'
import updatePass from './center/updatePass'
import updateEmail from './center/updateEmail'
import { getToken } from '@/utils/auth'
import store from '@/store'
import { isvalidPhone } from '@/utils/validate'
import { parseTime } from '@/utils/index'
import crud from '@/mixins/crud'
import { editUser } from '@/api/system/user'
import Avatar from '@/assets/images/avatar.png'
export default {
name: 'Center',
components: { updatePass, updateEmail },
mixins: [crud],
data() {
// 自定义验证
const validPhone = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入电话号码'))
} else if (!isvalidPhone(value)) {
callback(new Error('请输入正确的11位手机号码'))
} else {
callback()
}
}
return {
Avatar: Avatar,
ico: 'el-icon-refresh',
activeName: 'first',
saveLoading: false,
headers: {
'Authorization': getToken()
},
form: {},
rules: {
nickName: [
{ required: true, message: '请输入用户昵称', trigger: 'blur' },
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
],
phone: [
{ required: true, trigger: 'blur', validator: validPhone }
]
}
}
},
......@@ -111,15 +158,15 @@ export default {
])
},
created() {
this.$nextTick(() => {
this.init()
})
this.form = { id: this.user.id, nickName: this.user.nickName, sex: this.user.sex, phone: this.user.phone }
store.dispatch('GetInfo').then(() => {})
},
methods: {
parseTime,
formatEmail(mail) {
return regEmail(mail)
handleClick(tab, event) {
if (tab.name === 'second') {
this.init()
}
},
beforeInit() {
this.url = 'api/logs/user'
......@@ -142,13 +189,21 @@ export default {
duration: 2500
})
},
// 刷新日志
refresh() {
this.ico = 'el-icon-loading'
this.init()
setTimeout(() => {
this.ico = 'el-icon-refresh'
}, 300)
doSubmit() {
if (this.$refs['form']) {
this.$refs['form'].validate((valid) => {
if (valid) {
this.saveLoading = true
editUser(this.form).then(() => {
this.editSuccessNotify()
store.dispatch('GetInfo').then(() => {})
this.saveLoading = false
}).catch(() => {
this.saveLoading = false
})
}
})
}
}
}
}
......@@ -170,12 +225,11 @@ export default {
border-radius: 50%
}
.user-info {
padding-left: 0px;
padding-left: 0;
list-style: none;
li{
border-bottom: 1px solid #F0F3F4;
border-top: 1px solid #F0F3F4;
padding: 11px 0px;
padding: 11px 0;
font-size: 13px;
}
.user-right {
......
src/views/system/user/index.vue
......@@ -53,20 +53,20 @@
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" />
</el-form-item>
<el-form-item label="状态" prop="enabled">
<el-radio v-for="item in dict.user_status" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model.number="form.phone" />
</el-form-item>
<el-form-item label="昵称" prop="nickName">
<el-input v-model="form.nickName" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" style="width: 191px" />
<el-input v-model="form.email" />
</el-form-item>
<el-form-item label="部门" prop="dept.id">
<treeselect v-model="form.dept.id" :options="depts" style="width: 178px" placeholder="选择部门" @select="selectFun" />
</el-form-item>
<el-form-item label="岗位" prop="job.id">
<el-select v-model="form.job.id" placeholder="请先选择部门">
<el-select v-model="form.job.id" style="width: 178px" placeholder="请先选择部门">
<el-option
v-for="(item, index) in jobs"
:key="item.name + index"
......@@ -75,8 +75,19 @@
/>
</el-select>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.sex" style="width: 178px">
<el-radio label="男">男</el-radio>
<el-radio label="女">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="状态">
<el-radio-group v-model="form.enabled">
<el-radio v-for="item in dict.user_status" :key="item.id" :label="item.value">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item style="margin-bottom: 0;" label="角色" prop="roles">
<el-select v-model="form.roles" style="width: 450px;" multiple placeholder="请选择">
<el-select v-model="form.roles" style="width: 437px" multiple placeholder="请选择">
<el-option
v-for="item in roles"
:key="item.name"
......@@ -94,10 +105,12 @@
</el-dialog>
<!--表格渲染-->
<el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
<el-table-column prop="username" label="用户名" />
<el-table-column prop="phone" label="电话" />
<el-table-column :show-overflow-tooltip="true" prop="email" label="邮箱" />
<el-table-column label="部门 / 岗位">
<el-table-column :show-overflow-tooltip="true" prop="username" label="用户名" />
<el-table-column :show-overflow-tooltip="true" prop="nickName" label="昵称" />
<el-table-column prop="sex" label="性别" />
<el-table-column :show-overflow-tooltip="true" prop="phone" width="120" label="电话" />
<el-table-column :show-overflow-tooltip="true" width="135" prop="email" label="邮箱" />
<el-table-column :show-overflow-tooltip="true" width="120" label="部门 / 岗位">
<template slot-scope="scope">
<div>{{ scope.row.dept.name }} / {{ scope.row.job.name }}</div>
</template>
......@@ -112,7 +125,7 @@
/>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期">
<el-table-column :show-overflow-tooltip="true" prop="createTime" width="150" label="创建日期">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
......@@ -188,21 +201,22 @@ export default {
{ key: 'true', display_name: '激活' },
{ key: 'false', display_name: '锁定' }
],
form: { username: null, email: null, enabled: 'false', roles: [], job: { id: null }, dept: { id: null }, phone: null },
form: { username: null, nickName: null, sex: '男', email: null, enabled: 'false', roles: [], job: { id: null }, dept: { id: null }, phone: null },
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
],
nickName: [
{ required: true, message: '请输入用户昵称', trigger: 'blur' },
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
],
phone: [
{ required: true, trigger: 'blur', validator: validPhone }
],
enabled: [
{ required: true, message: '状态不能为空', trigger: 'blur' }
]
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment