增加修改密码和编辑个人信息界面

src/api/admins.ts

@@ -1,4 +1,5 @@
 import request from '@/utils/request'
+import { UserModule } from '@/store/modules/user'
 export interface IAdmin {
   id: string
   username: string
@@ -74,3 +75,17 @@ export const getUsers = (params: any) =>
     method: 'get',
     params
   })
+
+export const changePass = (params: any) =>
+  request({
+    url: '/admin/passwd',
+    method: 'post',
+    data: params
+  })
+
+export const changeInfo = (params: any) =>
+  request({
+    url: '/admin/update_info',
+    method: 'post',
+    data: params
+  })

src/lang/en.ts

@@ -87,7 +87,8 @@ export default {
     game_edit: 'Game Info',
     activity_list: 'Activity List',
     create_activity: 'New Activity',
-    edit_activity: 'Edit Activity'
+    edit_activity: 'Edit Activity',
+    password: 'Password'
   },
   navbar: {
     logOut: 'Log Out',
@@ -95,7 +96,8 @@ export default {
     github: 'Github',
     theme: 'Theme',
     size: 'Global Size',
-    profile: 'Profile'
+    profile: 'Profile',
+    password: 'Password'
   },
   login: {
     title: 'Login Form',

src/lang/zh.ts

@@ -87,7 +87,8 @@ export default {
     game_edit: '编辑游戏',
     activity_list: '活动列表',
     create_activity: '新建活动',
-    edit_activity: '编辑活动'
+    edit_activity: '编辑活动',
+    password: '修改密码'
   },
   navbar: {
     logOut: '退出登录',
@@ -95,7 +96,8 @@ export default {
     github: '项目地址',
     theme: '换肤',
     size: '布局大小',
-    profile: '个人中心'
+    profile: '个人信息',
+    password: '修改密码'
   },
   login: {
     title: '系统登录',

src/layout/components/Navbar/index.vue

@@ -36,30 +36,21 @@
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
-          <router-link to="/profile/">
-            <el-dropdown-item>
-              {{ $t('navbar.profile') }}
-            </el-dropdown-item>
-          </router-link>
           <router-link to="/">
             <el-dropdown-item>
               {{ $t('navbar.dashboard') }}
             </el-dropdown-item>
           </router-link>
-          <a
-              target="_blank"
-              href="https://github.com/armour/vue-typescript-admin-template/"
-          >
+          <router-link to="/profile/">
             <el-dropdown-item>
-              {{ $t('navbar.github') }}
+              {{ $t('navbar.profile') }}
             </el-dropdown-item>
-          </a>
-          <a
-              target="_blank"
-              href="https://armour.github.io/vue-typescript-admin-docs/"
-          >
-            <el-dropdown-item>Docs</el-dropdown-item>
-          </a>
+          </router-link>
+          <router-link to="/password">
+          <el-dropdown-item>
+            {{ $t('navbar.password') }}
+          </el-dropdown-item>
+          </router-link>
           <el-dropdown-item
               divided
               @click.native="logout"

src/layout/components/Sidebar/SidebarItem.vue

@@ -81,7 +81,6 @@ export default class extends Vue {
   @Prop({ default: '' }) private basePath!: string
 
   get alwaysShowRootMenu() {
-    console.log('alwaysShowRootMenu', this.item)
     if (this.item.meta && this.item.meta.alwaysShow) {
       return true
     }

src/router/index.ts

@@ -101,15 +101,33 @@ export const constantRoutes: RouteConfig[] = [
     children: [
       {
         path: 'index',
-        component: () => import(/* webpackChunkName: "profile" */ '@/views/profile/index.vue'),
+        component: () => import(/* webpackChunkName: "profile" */ '@/views/profile/info.vue'),
         name: 'Profile',
         meta: {
           title: 'profile',
           icon: 'user',
           noCache: true
         }
+      },
+      {
+        path: 'password',
+        component: () => import(/* webpackChunkName: "profile" */ '@/views/profile/password.vue'),
+        name: 'Password',
+        meta: {
+          title: 'password',
+          icon: 'user',
+          noCache: true
+        }
       }
     ]
+  },
+  {
+    path: '/password',
+    component: Layout,
+    redirect: '/profile/password',
+    meta: { hidden: true },
+    children: [
+    ]
   }
 ]
 

src/store/modules/user.ts

@@ -23,6 +23,7 @@ export interface IUserState {
   department?: string
   deptname?: string
   level: number
+  sex?: string
 }
 
 @Module({ dynamic: true, store, name: 'user' })
@@ -37,6 +38,7 @@ class User extends VuexModule implements IUserState {
   public department = ''
   public deptname = ''
   public level = 999
+  public sex = '0'
 
   @Action
   public async Login(userInfo: { username: string, password: string }) {
@@ -64,7 +66,7 @@ class User extends VuexModule implements IUserState {
     if (!data) {
       throw Error('Verification failed, please Login again.')
     }
-    const { roles, showname, avatar, introduction, permissions, department, level, deptname } = data
+    const { roles, showname, avatar, introduction, permissions, department, level, deptname, sex } = data
     // roles must be a non-empty array
     if (!roles || roles.length <= 0) {
       throw Error('GetUserInfo: roles must be a non-null array!')
@@ -77,6 +79,15 @@ class User extends VuexModule implements IUserState {
     this.SET_DEPARTMENT(department)
     this.SET_LEVEL(level)
     this.SET_DEPTNAME(deptname)
+    this.SET_SEX(sex)
+  }
+
+  @Action
+  public async UpdateInfo(data: any) {
+    const { showname, sex, avatar } = data
+    this.SET_NAME(showname)
+    this.SET_SEX(sex)
+    this.SET_AVATAR(avatar)
   }
 
   @Action
@@ -143,6 +154,11 @@ class User extends VuexModule implements IUserState {
     this.deptname = deptname
   }
 
+  @Mutation
+  private SET_SEX(sex: string) {
+    this.sex = sex
+  }
+
   @Mutation
   private SET_LEVEL(level: number) {
     this.level = level

src/views/dashboard/index.vue

@@ -16,6 +16,9 @@
     <div class="dashboard-text">
       店铺:{{ deptname }}
     </div>
+    <div class="dashboard-text">
+      将来这里会有很多东西
+    </div>
   </div>
 </template>
 

src/views/profile/info.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="app-container">
+    <el-form
+        ref="postForm"
+        :model="postForm"
+        :rules="rules"
+        label-width="200px"
+        label-position="left"
+    >
+      <el-form-item label="显示名" prop="showname">
+        <el-input
+            v-model="postForm.showname"
+            placeholder="显示名"
+        />
+      </el-form-item>
+      <el-form-item label="性别">
+        <el-radio-group size='small' v-model="postForm.sex">
+          <el-radio-button label="0">未指定</el-radio-button>
+          <el-radio-button label="1">男</el-radio-button>
+          <el-radio-button label="2">女</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+          prop="avatar"
+          label="头像"
+      >
+        <upload-image v-model="postForm.avatar" />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+            type="primary"
+            v-loading="loading"
+            @click="save"
+        >
+          保存
+        </el-button>
+        <el-button @click="onCancel">
+          取消
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import UploadImage from '@/components/UploadImage/index.vue'
+import { changeInfo } from '@/api/admins'
+import { UserModule } from '@/store/modules/user'
+
+@Component({
+  name: 'InfoChange',
+  components: {
+    UploadImage
+  }
+})
+export default class extends Vue {
+  private loading = false
+  private postForm = {
+    showname: UserModule.name,
+    sex: UserModule.sex,
+    avatar: UserModule.avatar
+  }
+
+  $refs!: {
+    postForm: HTMLFormElement
+  }
+
+  private rules = {
+    showname: [{ required: true, message: '请输入显示名', trigger: 'blur' },
+      { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
+      {
+        required: true,
+        pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
+        message: '显示名不支持特殊字符',
+        trigger: 'blur'
+      }]
+  }
+
+  private async save() {
+    try {
+      this.loading = true
+      await this.$refs.postForm.validate()
+      const { data } = await changeInfo(this.postForm)
+      await UserModule.UpdateInfo(data)
+      this.loading = false
+      this.$notify({
+        title: 'Success',
+        message: '信息修改成功',
+        type: 'success',
+        duration: 2000
+      })
+    } catch (err) {
+      console.log(err)
+    }
+    this.loading = false
+  }
+
+  private async onCancel() {
+    try {
+      await this.$confirm('确认不保存当前信息?', 'Warning', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+      this.$store.dispatch('delView', this.$route)
+      this.$router.go(-1)
+    } catch (e) {
+
+    }
+  }
+}
+</script>

src/views/profile/password.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="app-container">
+    <el-form
+        ref="postForm"
+        :model="postForm"
+        :rules="rules"
+        label-width="200px"
+        label-position="left"
+    >
+      <el-form-item label="原密码" prop="passwordOld" >
+        <el-input
+            type="password"
+            v-model="postForm.passwordOld"
+            name="passwordOld"
+            placeholder=""
+        />
+      </el-form-item>
+      <el-form-item label="新密码" prop="password" >
+        <el-input
+            type="password"
+            v-model="postForm.password"
+            name="password"
+            placeholder=""
+        />
+      </el-form-item>
+      <el-form-item label="确认密码" prop="password2" >
+        <el-input
+            type="password"
+            v-model="postForm.password2"
+            name="password2"
+            placeholder=""
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+            type="primary"
+            v-loading="loading"
+            @click="save"
+        >
+          保存
+        </el-button>
+        <el-button @click="onCancel">
+          取消
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { changePass } from '@/api/admins'
+
+@Component({
+  name: 'PasswordChange',
+  components: {
+  }
+})
+export default class extends Vue {
+  private loading = false
+  private postForm = {
+    password: '',
+    passwordOld: '',
+    password2: ''
+  }
+
+  $refs!: {
+    postForm: HTMLFormElement
+  }
+
+  private rules = {
+    password: [{ required: true, message: '请输入新密码', trigger: 'blur' },
+      { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
+      { validator: this.validateNewPassword, trigger: 'blur' },
+      {
+        required: true,
+        pattern: /^[_a-zA-Z0-9.·-]+$/,
+        message: '密码不支持特殊字符',
+        trigger: 'blur'
+      }],
+    password2: [{ required: true, message: '请输入确认密码', trigger: 'blur' },
+      { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
+      { validator: this.validateNewPassword2, trigger: 'blur' }
+    ],
+    passwordOld: [{ required: true, message: '请输入原密码', trigger: 'blur' },
+      { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
+      {
+        required: true,
+        pattern: /^[_a-zA-Z0-9.·-]+$/,
+        message: '密码不支持特殊字符',
+        trigger: 'blur'
+      }]
+
+  }
+
+  private validateNewPassword(rule, value, callback) {
+    if (value === this.postForm.passwordOld) {
+      callback(new Error('不能与旧密码一致!'))
+    } else {
+      callback()
+    }
+  }
+
+  private validateNewPassword2(rule, value, callback) {
+    if (value !== this.postForm.password) {
+      callback(new Error('与新密码不一致!'))
+    } else {
+      callback()
+    }
+  }
+
+  private async save() {
+    try {
+      this.loading = true
+      await this.$refs.postForm.validate()
+      await changePass({
+        passwordOld: this.postForm.passwordOld,
+        passwordNew: this.postForm.password
+      })
+      this.loading = false
+      this.$notify({
+        title: 'Success',
+        message: '修改密码成功',
+        type: 'success',
+        duration: 2000
+      })
+    } catch (err) {
+      console.log(err)
+    }
+    this.loading = false
+  }
+
+  private async onCancel() {
+    try {
+      await this.$confirm('确认不保存当前信息?', 'Warning', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+      this.$store.dispatch('delView', this.$route)
+      this.$router.go(-1)
+    } catch (e) {
+
+    }
+  }
+}
+</script>