用户编辑功能完善

src/api/user.js

@@ -32,7 +32,7 @@ export function fetchList(query) {
 
 export function getUser(id) {
   return request({
-    url: '/sys/menu/' + id,
+    url: '/sys/user/' + id,
     method: 'get'
   })
 }

src/router/modules/sys.js

@@ -81,21 +81,21 @@ const sysRouter = {
           path: 'list',
           hidden: true,
           component: () => import('@/views/sys/users/list.vue'),
-          name: 'SysUsersList',
+          name: 'SysUserList',
           meta: { title: '用户列表' }
         },
         {
           path: 'add',
           hidden: true,
           component: () => import('@/views/sys/users/form.vue'),
-          name: 'SysUsersEdit',
+          name: 'SysUserEdit',
           meta: { title: '添加用户' }
         },
         {
           path: 'edit',
           hidden: true,
           component: () => import('@/views/sys/users/form.vue'),
-          name: 'SysUsersEdit',
+          name: 'SysUserEdit',
           meta: { title: '编辑用户' }
         }
       ]

src/views/sys/users/form.vue

@@ -3,35 +3,35 @@
   <div class="app-container">
     <el-page-header :content="isEdit?'编辑用户':'添加用户'" @back="goBack" />
     <el-card class="form-container" shadow="never">
-      <el-form ref="usersFrom" :model="dusersFrom" :rules="rules" label-width="150px">
-        <el-form-item label="用户头像">
-          <single-upload v-model="dusersFrom.avatar" />
-        </el-form-item>
-        <el-form-item label="姓名：" prop="fullName">
-          <el-input v-model="dusersFrom.fullName" />
-        </el-form-item>
+      <el-form ref="sysUserForm" :model="sysUser" :rules="rules" label-width="150px">
         <el-form-item label="登录名：" prop="username">
-          <el-input v-model="dusersFrom.username" />
+          <el-input v-model="sysUser.username" />
         </el-form-item>
         <el-form-item label="密码：" prop="password">
-          <el-input v-model="dusersFrom.password" />
+          <el-input v-model="sysUser.password" />
+        </el-form-item>
+        <el-form-item label="姓名：" prop="fullName">
+          <el-input v-model="sysUser.fullName" />
         </el-form-item>
         <el-form-item label="手机：">
-          <el-input v-model="dusersFrom.phone" />
+          <el-input v-model="sysUser.phone" />
         </el-form-item>
         <el-form-item label="是否阻止登录：">
-          <el-radio-group v-model="dusersFrom.delFlag">
+          <el-radio-group v-model="sysUser.loginFlag">
             <el-radio :label="1">是</el-radio>
             <el-radio :label="0">否</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="用户角色：">
-          <el-checkbox-group v-model="checkRoles" @change="handleCheckedRoles">
-            <el-checkbox v-for="item in selectRolesList" :key="item.id" :label="item.id" class="littleMarginLeft">{{ item.roleDesc }}</el-checkbox>
+          <el-checkbox-group v-model="roleChecked" @change="handleCheckedRoles">
+            <el-checkbox v-for="item in roleSelect" :key="item.id" :label="item.id" class="littleMarginLeft">{{ item.roleDesc }}</el-checkbox>
           </el-checkbox-group>
         </el-form-item>
+        <el-form-item label="用户头像">
+          <single-upload v-model="sysUser.avatar" />
+        </el-form-item>
         <el-form-item>
-          <el-button type="primary" size="medium" @click="onSubmit('usersFrom')">保存</el-button>
+          <el-button type="primary" size="medium" @click="onSubmit('sysUserForm')">保存</el-button>
         </el-form-item>
       </el-form>
     </el-card>
@@ -40,32 +40,28 @@
 <script>
 import SingleUpload from '@/components/Upload/singleUpload'
 import { getUser, updateUser, createUser } from '@/api/user'
-import { fetchList } from '@/api/role'
+import { fetchList as fetchRoleList } from '@/api/role'
 
-const defaultUsersFrom = {
-  avatar: '',
-  fullName: '',
+const defaultSysUser = {
+  id: 0,
   username: '',
-  phone: '',
   password: '',
+  fullName: '',
+  phone: '',
+  avatar: '',
   roleIds: '',
-  delFlag: 0,
-  id: 0
+  loginFlag: 0
 }
 export default {
-  name: 'UsersFromDetail',
+  name: 'SysUsersForm',
   components: { SingleUpload },
-  filters: {
-
-  },
+  filters: {},
   data() {
     return {
-      dusersFrom: Object.assign({}, defaultUsersFrom),
+      sysUser: Object.assign({}, defaultSysUser),
+      roleSelect: [],
+      roleChecked: [],
       rules: {
-        fullName: [
-          { required: true, message: '请输入姓名', trigger: 'blur' },
-          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
-        ],
         username: [
           { required: true, message: '请输入登录名', trigger: 'blur' },
           { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
@@ -73,50 +69,54 @@ export default {
         password: [
           { required: true, message: '请输入密码', trigger: 'blur' },
           { min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur' }
+        ],
+        fullName: [
+          { required: true, message: '请输入姓名', trigger: 'blur' },
+          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
         ]
-      },
-      listQuery: {
-        pageNum: 1,
-        pageSize: 50
-      },
-      selectRolesList: [],
-      checkRoles: []
+      }
     }
   },
   watch: {
     $route(route) {
       this.getFormData()
-      this.getRolesList()
+      this.getRoleList()
     }
   },
   created() {
     this.getFormData()
-    this.getRolesList()
+    this.getRoleList()
   },
   methods: {
     getFormData() {
       if (this.$route.query.id) {
-        this.dusersFrom.id = this.$route.query.id
+        this.sysUser.id = this.$route.query.id
         this.isEdit = true
-        getUser(this.role.id).then(response => {
-          this.dusersFrom.fullName = response.data
-          if (response.data.menuIds) {
-            const keys = []
-            response.data.menuIds.split(',').forEach(element => {
-              keys.push(element * 1)
+        getUser(this.sysUser.id).then(response => {
+          this.sysUser.username = response.data.username
+          this.sysUser.password = response.data.password
+          this.sysUser.fullName = response.data.fullName
+          this.sysUser.phone = response.data.phone
+          this.sysUser.avatar = response.data.avatar
+          this.sysUser.roleIds = response.data.roleIds
+          this.sysUser.loginFlag = response.data.loginFlag
+          if (response.data.roleIds) {
+            this.roleChecked = []
+            response.data.roleIds.split(',').forEach(element => {
+              this.roleChecked.push(element * 1)
+              console.log(this.roleChecked)
             })
-            console.log(keys)
           }
         })
       } else {
-        this.dusersFrom.id = ''
+        this.sysUser.id = ''
         this.isEdit = false
-        this.dusersFrom = Object.assign({}, defaultUsersFrom)
+        this.sysUser = Object.assign({}, defaultSysUser)
       }
     },
-    getRolesList() {
-      fetchList(this.listQuery).then(response => {
-        this.selectRolesList = response.data.results
+    getRoleList() {
+      fetchRoleList({ pageNum: 1, pageSize: 100 }).then(response => {
+        this.roleSelect = response.data.results
       })
     },
     onSubmit(formName) {
@@ -128,7 +128,7 @@ export default {
             type: 'warning'
           }).then(() => {
             if (this.isEdit) {
-              updateUser(this.$route.query.id, this.dusersFrom).then(response => {
+              updateUser(this.$route.query.id, this.sysUser).then(response => {
                 this.$message({
                   message: '修改成功',
                   type: 'success',
@@ -137,7 +137,7 @@ export default {
                 this.$router.back()
               })
             } else {
-              createUser(this.dusersFrom).then(response => {
+              createUser(this.sysUser).then(response => {
                 this.$refs[formName].resetFields()
                 this.resetForm(formName)
                 this.$message({
@@ -158,14 +158,14 @@ export default {
         }
       })
     },
-    handleCheckedRoles() { // 选择角色
-      this.dusersFrom.roleIds = this.checkRoles.join(',')
-      console.log('=======>', this.dusersFrom.roleIds)
+    handleCheckedRoles() {
+      // 选择角色
+      this.sysUser.roleIds = this.roleChecked.join(',')
     },
     resetForm(formName) {
       this.$refs[formName].resetFields()
-      this.dusersFrom = Object.assign({}, defaultUsersFrom)
-      this.getSelectdusersFromList()
+      this.sysUser = Object.assign({}, defaultSysUser)
+      this.getSelectsysUserList()
       this.filterProductAttrList = [
         {
           value: []

src/views/sys/users/list.vue

@@ -25,9 +25,9 @@
       </el-table-column>
       <el-table-column label="操作" width="200" align="center">
         <template slot-scope="scope">
-          <el-button size="mini" type="primary" @click="handleUpdate(scope.$index, scope.row)">修改
+          <el-button size="mini" type="primary" @click="handleUpdate(scope.row)">修改
           </el-button>
-          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
+          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除
           </el-button>
         </template>
       </el-table-column>
@@ -94,9 +94,9 @@ export default {
       this.$router.push({ path: '/sys/users/add' })
     },
     handleUpdate(row) {
-      this.$router.push({ path: '/sys/users/edit', query: { id: row.id }})
+      this.$router.push({ path: '/sys/users/edit', query: { id: row.id } })
     },
-    handleDelete(index, row) {
+    handleDelete(row) {
       this.$confirm('是否要删除该用户', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',