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

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' }
         ]
       }
     }