新增菜单

src/views/practice/jt/profile/index.vue

+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="6" :xs="24">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>个人信息</span>
+          </div>
+          <div>
+            <div class="text-center">
+              <userAvatar :user="user" />
+            </div>
+            <ul class="list-group list-group-striped">
+              <li class="list-group-item">
+                <svg-icon icon-class="user" />用户名称
+                <div class="pull-right">{{ user.userName }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="phone" />手机号码
+                <div class="pull-right">{{ user.phonenumber }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="email" />用户邮箱
+                <div class="pull-right">{{ user.email }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="tree" />所属部门
+                <div v-if="user.dept" class="pull-right">{{ user.dept.deptName }} / {{ postGroup }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="peoples" />所属角色
+                <div class="pull-right">{{ roleGroup }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="date" />创建时间
+                <div class="pull-right">{{ user.createTime }}</div>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="18" :xs="24">
+        <el-card>
+          <div slot="header" class="clearfix">
+            <span>基本资料</span>
+          </div>
+          <el-tabs v-model="activeTab">
+            <el-tab-pane label="基本资料" name="userinfo">
+              <userInfo :user="user" />
+            </el-tab-pane>
+            <el-tab-pane label="修改密码" name="resetPwd">
+              <resetPwd :user="user" />
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import userAvatar from './userAvatar'
+import userInfo from './userInfo'
+import resetPwd from './resetPwd'
+import { getUserProfile } from '@/api/system/user'
+
+export default {
+  name: 'Profile',
+  components: { userAvatar, userInfo, resetPwd },
+  data() {
+    return {
+      user: {},
+      roleGroup: {},
+      postGroup: {},
+      activeTab: 'userinfo'
+    }
+  },
+  created() {
+    this.getUser()
+  },
+  methods: {
+    getUser() {
+      getUserProfile().then(response => {
+        this.user = response.data
+        this.roleGroup = response.roleGroup
+        this.postGroup = response.postGroup
+      })
+    }
+  }
+}
+</script>

src/views/practice/jt/profile/resetPwd.vue

+<template>
+  <el-form ref="form" :model="user" :rules="rules" label-width="4.2vw">
+    <el-form-item label="旧密码" prop="oldPassword">
+      <el-input v-model.trim="user.oldPassword" placeholder="请输入旧密码" type="password" />
+    </el-form-item>
+    <el-form-item label="新密码" prop="newPassword">
+      <el-input v-model.trim="user.newPassword" placeholder="请输入新密码" type="password" />
+    </el-form-item>
+    <el-form-item label="确认密码" prop="confirmPassword">
+      <el-input v-model.trim="user.confirmPassword" placeholder="请确认密码" type="password" />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" size="mini" @click="submit">确 定</el-button>
+      <el-button type="danger" size="mini" @click="close">关闭</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { updateUserPwd } from '@/api/system/user'
+
+export default {
+  data() {
+    const equalToPassword = (rule, value, callback) => {
+      if (this.user.newPassword !== value) {
+        callback(new Error('两次输入的密码不一致'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      test: '1test',
+      user: {
+        oldPassword: undefined,
+        newPassword: undefined,
+        confirmPassword: undefined
+      },
+      // 表单校验
+      rules: {
+        oldPassword: [
+          { required: true, message: '旧密码不能为空', trigger: 'blur' }
+        ],
+        newPassword: [
+          { required: true, message: '新密码不能为空', trigger: 'blur' },
+          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
+        ],
+        confirmPassword: [
+          { required: true, message: '确认密码不能为空', trigger: 'blur' },
+          { required: true, validator: equalToPassword, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    submit() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(
+            response => {
+              if (response.code === 200) {
+                this.$message({
+                  message: '修改成功',
+                  type: 'success'
+                })
+              }
+            }
+          )
+        }
+      })
+    },
+    close() {
+      this.$store.dispatch('tagsView/delView', this.$route)
+      this.$router.push({ path: '/index' })
+    }
+  }
+}
+</script>

src/views/practice/jt/profile/userAvatar.vue

+<template>
+  <div>
+    <img :src="options.img" title="点击上传头像" class="img-circle img-lg" @click="editCropper()">
+    <el-dialog title="头像信息" :visible.sync="open" width="41.3vw" append-to-body>
+      <el-row>
+        <el-col :xs="24" :md="12" :style="{height: '32.4vh'}">
+          <vue-cropper
+            ref="cropper"
+            :img="options.img"
+            :info="true"
+            :auto-crop="options.autoCrop"
+            :auto-crop-width="options.autoCropWidth"
+            :auto-crop-height="options.autoCropHeight"
+            :fixed-box="options.fixedBox"
+            @realTime="realTime"
+          />
+        </el-col>
+        <el-col :xs="24" :md="12" :style="{height: '32.4vh'}">
+          <div class="avatar-upload-preview">
+            <img :src="previews.url" :style="previews.img">
+          </div>
+        </el-col>
+      </el-row>
+      <br>
+      <el-row>
+        <el-col :lg="2" :md="2">
+          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
+            <el-button size="small">
+              上传
+              <i class="el-icon-upload el-icon--right" />
+            </el-button>
+          </el-upload>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 2}" :md="2">
+          <el-button icon="el-icon-plus" size="small" @click="changeScale(1)" />
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :md="2">
+          <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)" />
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :md="2">
+          <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()" />
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :md="2">
+          <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()" />
+        </el-col>
+        <el-col :lg="{span: 2, offset: 6}" :md="2">
+          <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import store from '@/store'
+import { VueCropper } from 'vue-cropper'
+import { uploadAvatar } from '@/api/system/user'
+
+export default {
+  components: { VueCropper },
+  props: {
+    user: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      // 是否显示弹出层
+      open: false,
+      // 弹出层标题
+      title: '修改头像',
+      options: {
+        img: store.getters.avatar, // 裁剪图片的地址
+        autoCrop: true, // 是否默认生成截图框
+        autoCropWidth: 200, // 默认生成截图框宽度
+        autoCropHeight: 200, // 默认生成截图框高度
+        fixedBox: true // 固定截图框大小 不允许改变
+      },
+      previews: {}
+    }
+  },
+  methods: {
+    // 修改头像
+    editCropper() {
+      this.open = true
+    },
+    // 覆盖默认的上传行为
+    requestUpload() {
+    },
+    // 向左旋转
+    rotateLeft() {
+      this.$refs.cropper.rotateLeft()
+    },
+    // 向右旋转
+    rotateRight() {
+      this.$refs.cropper.rotateRight()
+    },
+    // 图片缩放
+    changeScale(num) {
+      num = num || 1
+      this.$refs.cropper.changeScale(num)
+    },
+    // 上传预处理
+    beforeUpload(file) {
+      if (file.type.indexOf('image/') == -1) {
+        this.msgError('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。')
+      } else {
+        const reader = new FileReader()
+        reader.readAsDataURL(file)
+        reader.onload = () => {
+          this.options.img = reader.result
+        }
+      }
+    },
+    // 上传图片
+    uploadImg() {
+      this.$refs.cropper.getCropBlob(data => {
+        const formData = new FormData()
+        formData.append('avatarfile', data)
+        uploadAvatar(formData).then(response => {
+          if (response.code === 200) {
+            this.open = false
+            this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl
+            this.$message({
+              message: '修改成功',
+              type: 'success'
+            })
+          }
+          this.$refs.cropper.clearCrop()
+        })
+      })
+    },
+    // 实时预览
+    realTime(data) {
+      this.previews = data
+    }
+  }
+}
+</script>

src/views/practice/jt/profile/userInfo.vue

+<template>
+  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
+    <el-form-item label="用户昵称" prop="nickName">
+      <el-input v-model="user.nickName" />
+    </el-form-item>
+    <el-form-item label="手机号码" prop="phonenumber">
+      <el-input v-model="user.phonenumber" maxlength="11" />
+    </el-form-item>
+    <el-form-item label="邮箱" prop="email">
+      <el-input v-model="user.email" maxlength="50" />
+    </el-form-item>
+    <el-form-item label="性别">
+      <el-radio-group v-model="user.sex">
+        <el-radio label="0">男</el-radio>
+        <el-radio label="1">女</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="danger" size="mini" @click="close">关闭</el-button>
+      <el-button type="primary" size="mini" @click="submit">保存</el-button>
+
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { updateUserProfile } from '@/api/system/user'
+
+export default {
+  props: {
+    user: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      // 表单校验
+      rules: {
+        nickName: [
+          { required: true, message: '用户昵称不能为空', trigger: 'blur' }
+        ],
+        email: [
+          { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
+          {
+            type: 'email',
+            message: "'请输入正确的邮箱地址",
+            trigger: ['blur', 'change']
+          }
+        ],
+        phonenumber: [
+          { required: true, message: '手机号码不能为空', trigger: 'blur' },
+          {
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: '请输入正确的手机号码',
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    submit() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          updateUserProfile(this.user).then(response => {
+            if (response.code === 200) {
+              this.$message({
+                message: '修改成功',
+                type: 'success'
+              })
+            }
+          })
+        }
+      })
+    },
+    close() {
+      this.$store.dispatch('tagsView/delView', this.$route)
+      this.$router.push({ path: '/index' })
+    }
+  }
+}
+</script>

src/views/practice/lms/profile/index.vue

+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="6" :xs="24">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>个人信息</span>
+          </div>
+          <div>
+            <div class="text-center">
+              <userAvatar :user="user" />
+            </div>
+            <ul class="list-group list-group-striped">
+              <li class="list-group-item">
+                <svg-icon icon-class="user" />用户名称
+                <div class="pull-right">{{ user.userName }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="phone" />手机号码
+                <div class="pull-right">{{ user.phonenumber }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="email" />用户邮箱
+                <div class="pull-right">{{ user.email }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="tree" />所属部门
+                <div v-if="user.dept" class="pull-right">{{ user.dept.deptName }} / {{ postGroup }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="peoples" />所属角色
+                <div class="pull-right">{{ roleGroup }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="date" />创建时间
+                <div class="pull-right">{{ user.createTime }}</div>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="18" :xs="24">
+        <el-card>
+          <div slot="header" class="clearfix">
+            <span>基本资料</span>
+          </div>
+          <el-tabs v-model="activeTab">
+            <el-tab-pane label="基本资料" name="userinfo">
+              <userInfo :user="user" />
+            </el-tab-pane>
+            <el-tab-pane label="修改密码" name="resetPwd">
+              <resetPwd :user="user" />
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import userAvatar from './userAvatar'
+import userInfo from './userInfo'
+import resetPwd from './resetPwd'
+import { getUserProfile } from '@/api/system/user'
+
+export default {
+  name: 'Profile',
+  components: { userAvatar, userInfo, resetPwd },
+  data() {
+    return {
+      user: {},
+      roleGroup: {},
+      postGroup: {},
+      activeTab: 'userinfo'
+    }
+  },
+  created() {
+    this.getUser()
+  },
+  methods: {
+    getUser() {
+      getUserProfile().then(response => {
+        this.user = response.data
+        this.roleGroup = response.roleGroup
+        this.postGroup = response.postGroup
+      })
+    }
+  }
+}
+</script>

src/views/practice/lms/profile/resetPwd.vue

+<template>
+  <el-form ref="form" :model="user" :rules="rules" label-width="4.2vw">
+    <el-form-item label="旧密码" prop="oldPassword">
+      <el-input v-model.trim="user.oldPassword" placeholder="请输入旧密码" type="password" />
+    </el-form-item>
+    <el-form-item label="新密码" prop="newPassword">
+      <el-input v-model.trim="user.newPassword" placeholder="请输入新密码" type="password" />
+    </el-form-item>
+    <el-form-item label="确认密码" prop="confirmPassword">
+      <el-input v-model.trim="user.confirmPassword" placeholder="请确认密码" type="password" />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" size="mini" @click="submit">确 定</el-button>
+      <el-button type="danger" size="mini" @click="close">关闭</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { updateUserPwd } from '@/api/system/user'
+
+export default {
+  data() {
+    const equalToPassword = (rule, value, callback) => {
+      if (this.user.newPassword !== value) {
+        callback(new Error('两次输入的密码不一致'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      test: '1test',
+      user: {
+        oldPassword: undefined,
+        newPassword: undefined,
+        confirmPassword: undefined
+      },
+      // 表单校验
+      rules: {
+        oldPassword: [
+          { required: true, message: '旧密码不能为空', trigger: 'blur' }
+        ],
+        newPassword: [
+          { required: true, message: '新密码不能为空', trigger: 'blur' },
+          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
+        ],
+        confirmPassword: [
+          { required: true, message: '确认密码不能为空', trigger: 'blur' },
+          { required: true, validator: equalToPassword, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    submit() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(
+            response => {
+              if (response.code === 200) {
+                this.$message({
+                  message: '修改成功',
+                  type: 'success'
+                })
+              }
+            }
+          )
+        }
+      })
+    },
+    close() {
+      this.$store.dispatch('tagsView/delView', this.$route)
+      this.$router.push({ path: '/index' })
+    }
+  }
+}
+</script>

src/views/practice/lms/profile/userAvatar.vue

+<template>
+  <div>
+    <img :src="options.img" title="点击上传头像" class="img-circle img-lg" @click="editCropper()">
+    <el-dialog title="头像信息" :visible.sync="open" width="41.3vw" append-to-body>
+      <el-row>
+        <el-col :xs="24" :md="12" :style="{height: '32.4vh'}">
+          <vue-cropper
+            ref="cropper"
+            :img="options.img"
+            :info="true"
+            :auto-crop="options.autoCrop"
+            :auto-crop-width="options.autoCropWidth"
+            :auto-crop-height="options.autoCropHeight"
+            :fixed-box="options.fixedBox"
+            @realTime="realTime"
+          />
+        </el-col>
+        <el-col :xs="24" :md="12" :style="{height: '32.4vh'}">
+          <div class="avatar-upload-preview">
+            <img :src="previews.url" :style="previews.img">
+          </div>
+        </el-col>
+      </el-row>
+      <br>
+      <el-row>
+        <el-col :lg="2" :md="2">
+          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
+            <el-button size="small">
+              上传
+              <i class="el-icon-upload el-icon--right" />
+            </el-button>
+          </el-upload>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 2}" :md="2">
+          <el-button icon="el-icon-plus" size="small" @click="changeScale(1)" />
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :md="2">
+          <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)" />
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :md="2">
+          <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()" />
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :md="2">
+          <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()" />
+        </el-col>
+        <el-col :lg="{span: 2, offset: 6}" :md="2">
+          <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import store from '@/store'
+import { VueCropper } from 'vue-cropper'
+import { uploadAvatar } from '@/api/system/user'
+
+export default {
+  components: { VueCropper },
+  props: {
+    user: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      // 是否显示弹出层
+      open: false,
+      // 弹出层标题
+      title: '修改头像',
+      options: {
+        img: store.getters.avatar, // 裁剪图片的地址
+        autoCrop: true, // 是否默认生成截图框
+        autoCropWidth: 200, // 默认生成截图框宽度
+        autoCropHeight: 200, // 默认生成截图框高度
+        fixedBox: true // 固定截图框大小 不允许改变
+      },
+      previews: {}
+    }
+  },
+  methods: {
+    // 修改头像
+    editCropper() {
+      this.open = true
+    },
+    // 覆盖默认的上传行为
+    requestUpload() {
+    },
+    // 向左旋转
+    rotateLeft() {
+      this.$refs.cropper.rotateLeft()
+    },
+    // 向右旋转
+    rotateRight() {
+      this.$refs.cropper.rotateRight()
+    },
+    // 图片缩放
+    changeScale(num) {
+      num = num || 1
+      this.$refs.cropper.changeScale(num)
+    },
+    // 上传预处理
+    beforeUpload(file) {
+      if (file.type.indexOf('image/') == -1) {
+        this.msgError('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。')
+      } else {
+        const reader = new FileReader()
+        reader.readAsDataURL(file)
+        reader.onload = () => {
+          this.options.img = reader.result
+        }
+      }
+    },
+    // 上传图片
+    uploadImg() {
+      this.$refs.cropper.getCropBlob(data => {
+        const formData = new FormData()
+        formData.append('avatarfile', data)
+        uploadAvatar(formData).then(response => {
+          if (response.code === 200) {
+            this.open = false
+            this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl
+            this.$message({
+              message: '修改成功',
+              type: 'success'
+            })
+          }
+          this.$refs.cropper.clearCrop()
+        })
+      })
+    },
+    // 实时预览
+    realTime(data) {
+      this.previews = data
+    }
+  }
+}
+</script>

src/views/practice/lms/profile/userInfo.vue

+<template>
+  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
+    <el-form-item label="用户昵称" prop="nickName">
+      <el-input v-model="user.nickName" />
+    </el-form-item>
+    <el-form-item label="手机号码" prop="phonenumber">
+      <el-input v-model="user.phonenumber" maxlength="11" />
+    </el-form-item>
+    <el-form-item label="邮箱" prop="email">
+      <el-input v-model="user.email" maxlength="50" />
+    </el-form-item>
+    <el-form-item label="性别">
+      <el-radio-group v-model="user.sex">
+        <el-radio label="0">男</el-radio>
+        <el-radio label="1">女</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="danger" size="mini" @click="close">关闭</el-button>
+      <el-button type="primary" size="mini" @click="submit">保存</el-button>
+
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { updateUserProfile } from '@/api/system/user'
+
+export default {
+  props: {
+    user: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      // 表单校验
+      rules: {
+        nickName: [
+          { required: true, message: '用户昵称不能为空', trigger: 'blur' }
+        ],
+        email: [
+          { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
+          {
+            type: 'email',
+            message: "'请输入正确的邮箱地址",
+            trigger: ['blur', 'change']
+          }
+        ],
+        phonenumber: [
+          { required: true, message: '手机号码不能为空', trigger: 'blur' },
+          {
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: '请输入正确的手机号码',
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    submit() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          updateUserProfile(this.user).then(response => {
+            if (response.code === 200) {
+              this.$message({
+                message: '修改成功',
+                type: 'success'
+              })
+            }
+          })
+        }
+      })
+    },
+    close() {
+      this.$store.dispatch('tagsView/delView', this.$route)
+      this.$router.push({ path: '/index' })
+    }
+  }
+}
+</script>

src/views/practice/qzy/profile/index.vue

+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="6" :xs="24">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>个人信息</span>
+          </div>
+          <div>
+            <div class="text-center">
+              <userAvatar :user="user" />
+            </div>
+            <ul class="list-group list-group-striped">
+              <li class="list-group-item">
+                <svg-icon icon-class="user" />用户名称
+                <div class="pull-right">{{ user.userName }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="phone" />手机号码
+                <div class="pull-right">{{ user.phonenumber }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="email" />用户邮箱
+                <div class="pull-right">{{ user.email }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="tree" />所属部门
+                <div v-if="user.dept" class="pull-right">{{ user.dept.deptName }} / {{ postGroup }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="peoples" />所属角色
+                <div class="pull-right">{{ roleGroup }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="date" />创建时间
+                <div class="pull-right">{{ user.createTime }}</div>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="18" :xs="24">
+        <el-card>
+          <div slot="header" class="clearfix">
+            <span>基本资料</span>
+          </div>
+          <el-tabs v-model="activeTab">
+            <el-tab-pane label="基本资料" name="userinfo">
+              <userInfo :user="user" />
+            </el-tab-pane>
+            <el-tab-pane label="修改密码" name="resetPwd">
+              <resetPwd :user="user" />
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import userAvatar from './userAvatar'
+import userInfo from './userInfo'
+import resetPwd from './resetPwd'
+import { getUserProfile } from '@/api/system/user'
+
+export default {
+  name: 'Profile',
+  components: { userAvatar, userInfo, resetPwd },
+  data() {
+    return {
+      user: {},
+      roleGroup: {},
+      postGroup: {},
+      activeTab: 'userinfo'
+    }
+  },
+  created() {
+    this.getUser()
+  },
+  methods: {
+    getUser() {
+      getUserProfile().then(response => {
+        this.user = response.data
+        this.roleGroup = response.roleGroup
+        this.postGroup = response.postGroup
+      })
+    }
+  }
+}
+</script>

src/views/practice/qzy/profile/resetPwd.vue

+<template>
+  <el-form ref="form" :model="user" :rules="rules" label-width="4.2vw">
+    <el-form-item label="旧密码" prop="oldPassword">
+      <el-input v-model.trim="user.oldPassword" placeholder="请输入旧密码" type="password" />
+    </el-form-item>
+    <el-form-item label="新密码" prop="newPassword">
+      <el-input v-model.trim="user.newPassword" placeholder="请输入新密码" type="password" />
+    </el-form-item>
+    <el-form-item label="确认密码" prop="confirmPassword">
+      <el-input v-model.trim="user.confirmPassword" placeholder="请确认密码" type="password" />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" size="mini" @click="submit">确 定</el-button>
+      <el-button type="danger" size="mini" @click="close">关闭</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { updateUserPwd } from '@/api/system/user'
+
+export default {
+  data() {
+    const equalToPassword = (rule, value, callback) => {
+      if (this.user.newPassword !== value) {
+        callback(new Error('两次输入的密码不一致'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      test: '1test',
+      user: {
+        oldPassword: undefined,
+        newPassword: undefined,
+        confirmPassword: undefined
+      },
+      // 表单校验
+      rules: {
+        oldPassword: [
+          { required: true, message: '旧密码不能为空', trigger: 'blur' }
+        ],
+        newPassword: [
+          { required: true, message: '新密码不能为空', trigger: 'blur' },
+          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
+        ],
+        confirmPassword: [
+          { required: true, message: '确认密码不能为空', trigger: 'blur' },
+          { required: true, validator: equalToPassword, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    submit() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(
+            response => {
+              if (response.code === 200) {
+                this.$message({
+                  message: '修改成功',
+                  type: 'success'
+                })
+              }
+            }
+          )
+        }
+      })
+    },
+    close() {
+      this.$store.dispatch('tagsView/delView', this.$route)
+      this.$router.push({ path: '/index' })
+    }
+  }
+}
+</script>

src/views/practice/qzy/profile/userAvatar.vue

+<template>
+  <div>
+    <img :src="options.img" title="点击上传头像" class="img-circle img-lg" @click="editCropper()">
+    <el-dialog title="头像信息" :visible.sync="open" width="41.3vw" append-to-body>
+      <el-row>
+        <el-col :xs="24" :md="12" :style="{height: '32.4vh'}">
+          <vue-cropper
+            ref="cropper"
+            :img="options.img"
+            :info="true"
+            :auto-crop="options.autoCrop"
+            :auto-crop-width="options.autoCropWidth"
+            :auto-crop-height="options.autoCropHeight"
+            :fixed-box="options.fixedBox"
+            @realTime="realTime"
+          />
+        </el-col>
+        <el-col :xs="24" :md="12" :style="{height: '32.4vh'}">
+          <div class="avatar-upload-preview">
+            <img :src="previews.url" :style="previews.img">
+          </div>
+        </el-col>
+      </el-row>
+      <br>
+      <el-row>
+        <el-col :lg="2" :md="2">
+          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
+            <el-button size="small">
+              上传
+              <i class="el-icon-upload el-icon--right" />
+            </el-button>
+          </el-upload>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 2}" :md="2">
+          <el-button icon="el-icon-plus" size="small" @click="changeScale(1)" />
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :md="2">
+          <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)" />
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :md="2">
+          <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()" />
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :md="2">
+          <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()" />
+        </el-col>
+        <el-col :lg="{span: 2, offset: 6}" :md="2">
+          <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import store from '@/store'
+import { VueCropper } from 'vue-cropper'
+import { uploadAvatar } from '@/api/system/user'
+
+export default {
+  components: { VueCropper },
+  props: {
+    user: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      // 是否显示弹出层
+      open: false,
+      // 弹出层标题
+      title: '修改头像',
+      options: {
+        img: store.getters.avatar, // 裁剪图片的地址
+        autoCrop: true, // 是否默认生成截图框
+        autoCropWidth: 200, // 默认生成截图框宽度
+        autoCropHeight: 200, // 默认生成截图框高度
+        fixedBox: true // 固定截图框大小 不允许改变
+      },
+      previews: {}
+    }
+  },
+  methods: {
+    // 修改头像
+    editCropper() {
+      this.open = true
+    },
+    // 覆盖默认的上传行为
+    requestUpload() {
+    },
+    // 向左旋转
+    rotateLeft() {
+      this.$refs.cropper.rotateLeft()
+    },
+    // 向右旋转
+    rotateRight() {
+      this.$refs.cropper.rotateRight()
+    },
+    // 图片缩放
+    changeScale(num) {
+      num = num || 1
+      this.$refs.cropper.changeScale(num)
+    },
+    // 上传预处理
+    beforeUpload(file) {
+      if (file.type.indexOf('image/') == -1) {
+        this.msgError('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。')
+      } else {
+        const reader = new FileReader()
+        reader.readAsDataURL(file)
+        reader.onload = () => {
+          this.options.img = reader.result
+        }
+      }
+    },
+    // 上传图片
+    uploadImg() {
+      this.$refs.cropper.getCropBlob(data => {
+        const formData = new FormData()
+        formData.append('avatarfile', data)
+        uploadAvatar(formData).then(response => {
+          if (response.code === 200) {
+            this.open = false
+            this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl
+            this.$message({
+              message: '修改成功',
+              type: 'success'
+            })
+          }
+          this.$refs.cropper.clearCrop()
+        })
+      })
+    },
+    // 实时预览
+    realTime(data) {
+      this.previews = data
+    }
+  }
+}
+</script>

src/views/practice/qzy/profile/userInfo.vue

+<template>
+  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
+    <el-form-item label="用户昵称" prop="nickName">
+      <el-input v-model="user.nickName" />
+    </el-form-item>
+    <el-form-item label="手机号码" prop="phonenumber">
+      <el-input v-model="user.phonenumber" maxlength="11" />
+    </el-form-item>
+    <el-form-item label="邮箱" prop="email">
+      <el-input v-model="user.email" maxlength="50" />
+    </el-form-item>
+    <el-form-item label="性别">
+      <el-radio-group v-model="user.sex">
+        <el-radio label="0">男</el-radio>
+        <el-radio label="1">女</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="danger" size="mini" @click="close">关闭</el-button>
+      <el-button type="primary" size="mini" @click="submit">保存</el-button>
+
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { updateUserProfile } from '@/api/system/user'
+
+export default {
+  props: {
+    user: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      // 表单校验
+      rules: {
+        nickName: [
+          { required: true, message: '用户昵称不能为空', trigger: 'blur' }
+        ],
+        email: [
+          { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
+          {
+            type: 'email',
+            message: "'请输入正确的邮箱地址",
+            trigger: ['blur', 'change']
+          }
+        ],
+        phonenumber: [
+          { required: true, message: '手机号码不能为空', trigger: 'blur' },
+          {
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: '请输入正确的手机号码',
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    submit() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          updateUserProfile(this.user).then(response => {
+            if (response.code === 200) {
+              this.$message({
+                message: '修改成功',
+                type: 'success'
+              })
+            }
+          })
+        }
+      })
+    },
+    close() {
+      this.$store.dispatch('tagsView/delView', this.$route)
+      this.$router.push({ path: '/index' })
+    }
+  }
+}
+</script>