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

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,0 +1 @@
+<?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>

src/assets/icons/svg/run.svg

@@ -1 +0,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>

src/assets/icons/svg/running.svg

@@ -1 +0,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>

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">
+          <el-tabs v-model="activeName" @tab-click="handleClick">
-            <span>操作日志</span>
+            <el-tab-pane label="用户资料" name="first">
-            <div style="display:inline-block;float: right;cursor: pointer" @click="refresh"><i :class="ico" /></div>
+              <el-form ref="form" :model="form" :rules="rules" style="margin-top: 10px;" size="small" label-width="65px">
-          </div>
+                <el-form-item label="昵称" prop="nickName">
-          <div>
+                  <el-input v-model="form.nickName" style="width: 35%" />
-            <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
+                  <span style="color: #C0C0C0;margin-left: 10px;">用户昵称不作为登录使用</span>
-              <el-table-column prop="description" label="行为" />
+                </el-form-item>
-              <el-table-column prop="requestIp" label="IP" />
+                <el-form-item label="手机号" prop="phone">
-              <el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
+                  <el-input v-model="form.phone" style="width: 35%;" />
-              <el-table-column prop="browser" label="浏览器" />
+                  <span style="color: #C0C0C0;margin-left: 10px;">手机号码不能重复</span>
-              <el-table-column prop="time" label="请求耗时" align="center">
+                </el-form-item>
-                <template slot-scope="scope">
+                <el-form-item label="性别">
-                  <el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
+                  <el-radio-group v-model="form.sex" style="width: 178px">
-                  <el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
+                    <el-radio label="男">男</el-radio>
-                  <el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
+                    <el-radio label="女">女</el-radio>
-                </template>
+                  </el-radio-group>
-              </el-table-column>
+                </el-form-item>
-              <el-table-column prop="createTime" label="创建日期" width="180px">
+                <el-form-item label="">
-                <template slot-scope="scope">
+                  <el-button :loading="saveLoading" size="mini" type="primary" @click="doSubmit">保存配置</el-button>
-                  <span>{{ parseTime(scope.row.createTime) }}</span>
+                </el-form-item>
-                </template>
+              </el-form>
-              </el-table-column>
+            </el-tab-pane>
-            </el-table>
+            <!--    操作日志    -->
-            <!--分页组件-->
+            <el-tab-pane label="操作日志" name="second">
-            <el-pagination
+              <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
-              :total="total"
+                <el-table-column prop="description" label="行为" />
-              :current-page="page + 1"
+                <el-table-column prop="requestIp" label="IP" />
-              style="margin-top: 8px;"
+                <el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
-              layout="total, prev, pager, next, sizes"
+                <el-table-column prop="browser" label="浏览器" />
-              @size-change="sizeChange"
+                <el-table-column prop="time" label="请求耗时" align="center">
-              @current-change="pageChange"
+                  <template slot-scope="scope">
-            />
+                    <el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
-          </div>
+                    <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.form = { id: this.user.id, nickName: this.user.nickName, sex: this.user.sex, phone: this.user.phone }
-      this.init()
-    })
     store.dispatch('GetInfo').then(() => {})
   },
   methods: {
     parseTime,
-    formatEmail(mail) {
+    handleClick(tab, event) {
-      return regEmail(mail)
+      if (tab.name === 'second') {
+        this.init()
+      }
     },
     beforeInit() {
       this.url = 'api/logs/user'
@@ -142,13 +189,21 @@ export default {
         duration: 2500
       })
     },
-    // 刷新日志
+    doSubmit() {
-    refresh() {
+      if (this.$refs['form']) {
-      this.ico = 'el-icon-loading'
+        this.$refs['form'].validate((valid) => {
-      this.init()
+          if (valid) {
-      setTimeout(() => {
+            this.saveLoading = true
-        this.ico = 'el-icon-refresh'
+            editUser(this.form).then(() => {
-      }, 300)
+              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 0;
-      padding: 11px 0px;
       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 :show-overflow-tooltip="true" prop="username" label="用户名" />
-          <el-table-column prop="phone" label="电话" />
+          <el-table-column :show-overflow-tooltip="true" prop="nickName" label="昵称" />
-          <el-table-column :show-overflow-tooltip="true" prop="email" label="邮箱" />
+          <el-table-column prop="sex" label="性别" />
-          <el-table-column 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' }
         ]
       }
     }