update

src/api/user.js

@@ -69,3 +69,12 @@ export function userDel(id) {
   })
 }
 
+export function uploadFile(parameter) {
+  return request({
+    url: '/files',
+    method: 'post',
+    data: parameter
+
+  })
+}
+

src/router/config.js

@@ -2,6 +2,6 @@
 export const constantRouterComponents = {
   // 权限管理
   'role': () => import('@/views/system/power/role/index'),
-  'user': () => import('@/views/system/power/user/index.vue'),
+  'user': () => import('@/views/system/power/user/index'),
   'menu': () => import('@/views/system/power/menu/index')
 }

src/store/getters.js

 const getters = {
   sidebar: state => state.app.sidebar,
   size: state => state.app.size,
+  domain: state => state.app.domain,
   device: state => state.app.device,
   visitedViews: state => state.tagsView.visitedViews,
   cachedViews: state => state.tagsView.cachedViews,

src/store/modules/app.js

@@ -6,6 +6,7 @@ const state = {
     withoutAnimation: false
   },
   device: 'desktop',
+  domain: 'www.oa.com',
   size: Cookies.get('size') || 'medium'
 }
 

src/store/modules/user.js

@@ -53,10 +53,10 @@ const actions = {
           return reject('Verification failed, please Login again.')
         }
 
-        const { name, avatar } = data
+        const { name, avatar_full_url } = data
 
         commit('SET_NAME', name)
-        commit('SET_AVATAR', avatar)
+        commit('SET_AVATAR', avatar_full_url)
         resolve(data)
       }).catch(error => {
         reject(error)

src/utils/request.js

@@ -62,8 +62,9 @@ service.interceptors.response.use(
         Message.error('无权操作')
         break
       case 401:
-        Message.error('登录已过期')
+        Message.error('请先登录')
         if (token) {
+          Message.error('登录已过期')
           store.dispatch('user/resetToken')
         }
         break

src/views/system/power/menu/index.vue

@@ -4,10 +4,11 @@
       <el-tree
         :data="treeData"
         node-key="id"
+        default-expand-all
         :expand-on-click-node="false"
       >
         <span slot-scope="{ node, data }" class="custom-tree-node">
-          <span>{{ node.label }}</span>
+          <span>{{ node.label }} </span>
           <span>
             <el-button
               type="text"

src/views/system/power/user/index.vue

@@ -25,7 +25,9 @@
       </el-table-column>
       <el-table-column align="header-center" label="头像">
         <template slot-scope="scope">
-          {{ scope.row.avatar }}
+          <el-avatar :size="60" :src="scope.row.avatar_full_url">
+            <img :src="scope.row.avatar_full_url">
+          </el-avatar>
         </template>
       </el-table-column>
       <el-table-column align="header-center" label="创建时间">
@@ -52,6 +54,20 @@
         <el-form-item v-if="dialogType==='edit'" label="密码">
           <el-input v-model="user.password" placeholder="为空不修改" />
         </el-form-item>
+        <el-form-item label="头像">
+          <el-upload
+            ref="uploader"
+            class="avatar-uploader"
+            action=""
+            :http-request="upload"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
+          >
+            <img v-if="user.avatar_full_url" alt="" :src="user.avatar_full_url" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon" />
+          </el-upload>
+        </el-form-item>
         <el-form-item label="名称">
           <el-input v-model="user.name" placeholder="名称" />
         </el-form-item>
@@ -75,7 +91,7 @@
 </template>
 
 <script>
-import { userAdd, userDel, userEdit, userList } from '@/api/user'
+import { userAdd, userDel, userEdit, userList, uploadFile } from '@/api/user'
 import { deepClone } from '@/utils/util'
 import { Message } from 'element-ui'
 import { roleList } from '@/api/role'
@@ -89,8 +105,10 @@ export default {
         password: '',
         name: '',
         avatar: '',
+        avatar_full_url: '',
         role_id: 1,
-        is_admin: false
+        is_admin: false,
+        created_at: null
       },
       data: [],
       roleData: [],
@@ -104,7 +122,9 @@ export default {
     }
   },
   computed: {
-
+    domain() {
+      return this.$store.state.app.domain
+    }
   },
   created() {
     this.getRoles()
@@ -130,14 +150,17 @@ export default {
       this.dialogVisible = true
       const row = deepClone(scope.row)
       // this.user = row
+      // this.user.role_id = row.roles.data.id
       this.user = {
         id: row.id,
         username: row.username,
         password: '',
         name: row.name,
         avatar: row.avatar,
+        avatar_full_url: row.avatar_full_url,
         role_id: row.roles.data.id,
-        is_admin: row.is_admin
+        is_admin: row.is_admin,
+        created_at: row.created_at
       }
     },
     handleDelete({ $index, row }) {
@@ -189,6 +212,29 @@ export default {
         Message.success('已添加')
       }
       this.dialogVisible = false
+    },
+    async upload(file) {
+      const formData = new FormData()
+      formData.append('file', file.file)
+      formData.append('type', 'avatar')
+      const res = await uploadFile(formData)
+      this.user.avatar = res.data.path
+      return res
+    },
+    handleAvatarSuccess(res, file) {
+      this.user.avatar_full_url = URL.createObjectURL(file.raw)
+    },
+    beforeAvatarUpload(file) {
+      // const isJPG = file.type === 'image/jpeg'
+      // const isLt2M = file.size / 1024 / 1024 < 2
+      //
+      // if (!isJPG) {
+      //   this.$message.error('上传头像图片只能是 JPG 格式!')
+      // }
+      // if (!isLt2M) {
+      //   this.$message.error('上传头像图片大小不能超过 2MB!')
+      // }
+      // return isJPG && isLt2M
     }
   }
 }

src/views/system/power/user/list.vue

+<template>
+  <div class="app-container">
+    <el-button type="primary" @click="handleAddRole">添加</el-button>
+
+    <el-table :data="data" style="width: 100%;margin-top:30px;" border>
+      <el-table-column align="center" label="ID" width="220">
+        <template slot-scope="scope">
+          {{ scope.row.id }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="用户名" width="220">
+        <template slot-scope="scope">
+          {{ scope.row.username }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="名称" width="220">
+        <template slot-scope="scope">
+          {{ scope.row.name }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="角色" width="220">
+        <template slot-scope="scope">
+          {{ scope.row.roles.data.name }}
+        </template>
+      </el-table-column>
+      <el-table-column align="header-center" label="头像">
+        <template slot-scope="scope">
+          {{ scope.row.avatar }}
+        </template>
+      </el-table-column>
+      <el-table-column align="header-center" label="创建时间">
+        <template slot-scope="scope">
+          {{ scope.row.created_at }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="操作">
+        <template slot-scope="scope">
+          <el-button type="primary" size="small" @click="handleEdit(scope)">编辑</el-button>
+          <el-button v-if="!scope.row.is_admin" type="danger" size="small" @click="handleDelete(scope)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑':'添加'">
+      <el-form :model="user" label-width="80px" label-position="left">
+        <el-form-item label="用户名">
+          <el-input v-model="user.username" placeholder="用户名" />
+        </el-form-item>
+        <el-form-item v-if="dialogType==='new'" label="密码">
+          <el-input v-model="user.password" placeholder="不填默认123456" />
+        </el-form-item>
+        <el-form-item v-if="dialogType==='edit'" label="密码">
+          <el-input v-model="user.password" placeholder="为空不修改" />
+        </el-form-item> 
+        <el-form-item label="头像">
+          <el-upload
+            class="avatar-uploader"
+            action="https://jsonplaceholder.typicode.com/posts/"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
+          >
+            <img v-if="imageUrl" alt="" :src="imageUrl" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon" />
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="名称">
+          <el-input v-model="user.name" placeholder="名称" />
+        </el-form-item>
+        <el-form-item v-if="!user.is_admin" label="角色">
+          <el-select v-model="user.role_id" placeholder="请选择">
+            <el-option
+              v-for="item in roleData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div style="text-align:right;">
+        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
+        <el-button type="primary" @click="confirmRole">提交</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { userAdd, userDel, userEdit, userList } from '@/api/user'
+import { deepClone } from '@/utils/util'
+import { Message } from 'element-ui'
+import { roleList } from '@/api/role'
+
+export default {
+  data() {
+    return {
+      imageUrl: '',
+      user: {
+        username: '',
+        password: '',
+        name: '',
+        avatar: '',
+        role_id: 1,
+        is_admin: false
+      },
+      data: [],
+      roleData: [],
+      dialogVisible: false,
+      dialogType: 'new',
+      checkStrictly: false,
+      defaultProps: {
+        children: 'children',
+        label: 'title'
+      }
+    }
+  },
+  computed: {
+
+  },
+  created() {
+    this.getRoles()
+    this.getUsers()
+  },
+  methods: {
+    async getRoles() {
+      const res = await roleList()
+      this.roleData = res.data
+    },
+    async getUsers() {
+      const res = await userList({ include: 'roles' })
+      this.data = res.data
+    },
+
+    handleAddRole() {
+      this.user = Object.assign({})
+      this.dialogType = 'new'
+      this.dialogVisible = true
+    },
+    handleEdit(scope) {
+      this.dialogType = 'edit'
+      this.dialogVisible = true
+      const row = deepClone(scope.row)
+      // this.user = row
+      this.user = {
+        id: row.id,
+        username: row.username,
+        password: '',
+        name: row.name,
+        avatar: row.avatar,
+        role_id: row.roles.data.id,
+        is_admin: row.is_admin
+      }
+    },
+    handleDelete({ $index, row }) {
+      this.$confirm('确定要删除嘛?', '删除', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async() => {
+          await userDel(row.id)
+          this.data.splice($index, 1)
+          this.$message({
+            type: 'success',
+            message: '已删除'
+          })
+        })
+        .catch(err => { console.error(err) })
+    },
+    async confirmRole() {
+      const isEdit = this.dialogType === 'edit'
+      if (isEdit) {
+        await userEdit(this.user.id, this.user)
+        const newData = this.user
+        newData.roles = {
+          data: {
+            id: this.user.role_id,
+            name: this.roleData.find(item => item.id === this.user.role_id).name
+          }
+        }
+        for (let index = 0; index < this.data.length; index++) {
+          if (this.data[index].id === this.user.id) {
+            this.data.splice(index, 1, Object.assign({}, newData))
+            break
+          }
+        }
+        Message.success('已修改')
+      } else {
+        const { data } = await userAdd(this.user)
+        this.user.id = data.id
+        const newData = this.user
+        newData.create_at = data.create_at
+        newData.roles = {
+          data: {
+            id: data.role.id,
+            name: data.role.name
+          }
+        }
+        this.data.push(newData)
+        Message.success('已添加')
+      }
+      this.dialogVisible = false
+    },
+    handleAvatarSuccess(res, file) {
+      this.imageUrl = URL.createObjectURL(file.raw)
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isLt2M = file.size / 1024 / 1024 < 2
+
+      if (!isJPG) {
+        this.$message.error('上传头像图片只能是 JPG 格式!')
+      }
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!')
+      }
+      return isJPG && isLt2M
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  .roles-table {
+    margin-top: 30px;
+  }
+  .permission-tree {
+    margin-bottom: 30px;
+  }
+}
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>