用户列表

src/api/menu.js

@@ -37,3 +37,10 @@ export function deleteMenu(id) {
     method: 'post'
   })
 }
+export function updateSelective(id, data) {
+  return request({
+    url: '/sys/menu/update/selective/' + id,
+    method: 'post',
+    data: data
+  })
+}

src/api/user.js

@@ -21,3 +21,41 @@ export function logout() {
     method: 'post'
   })
 }
+
+export function fetchList(query) {
+  return request({
+    url: '/sys/user/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getMenu(id) {
+  return request({
+    url: '/sys/menu/' + id,
+    method: 'get'
+  })
+}
+
+export function updateMenu(id, data) {
+  return request({
+    url: '/sys/menu/update/' + id,
+    method: 'post',
+    data: data
+  })
+}
+
+export function createMenu(data) {
+  return request({
+    url: '/sys/menu/create',
+    method: 'post',
+    data: data
+  })
+}
+
+export function deleteMenu(id) {
+  return request({
+    url: '/sys/menu/delete/' + id,
+    method: 'post'
+  })
+}

src/store/modules/user.js

@@ -103,6 +103,7 @@ const actions = {
     return new Promise(resolve => {
       commit('SET_TOKEN', '')
       commit('SET_ROLES', [])
+      resetRouter()
       removeToken()
       resolve()
     })

src/views/sys/menus/list.vue

@@ -10,42 +10,52 @@
       </el-button>
     </div>
     <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width:100%">
-      <el-table-column align="center" width="50">
+      <el-table-column label="序号" align="center" width="50">
+        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+      </el-table-column>
+      <el-table-column label="菜单ID" align="center" width="100">
         <template slot-scope="{row}">{{ row.id }}</template>
       </el-table-column>
-      <el-table-column label="菜单名称" align="center">
+      <el-table-column label="菜单名称" width="150" align="center">
         <template slot-scope="{row}">{{ row.title }}</template>
       </el-table-column>
       <el-table-column label="路由名称" align="center">
         <template slot-scope="{row}">{{ row.name }}</template>
       </el-table-column>
-      <el-table-column label="前端图标" width="100" align="center">
+      <el-table-column label="前端图标" width="150" align="center">
         <template slot-scope="{row}">
           <i v-if="isElementIcon(row.icon)" :class="row.icon" />
           <svg-icon v-else-if="row.icon" :icon-class="row.icon" />
         </template>
       </el-table-column>
-      <el-table-column label="状态" width="100" align="center">
+      <el-table-column label="状态" width="150" align="center">
         <template slot-scope="{row}">
           <el-switch
             v-model="row.status"
+            :active-value="0"
+            :inactive-value="1"
             active-color="#1890ff"
             inactive-color="#DCDFE6"
-            active-value="0"
-            inactive-value="1"
+            @change="handleHiddenChange($index, row)"
           />
         </template>
       </el-table-column>
-      <el-table-column label="排序" width="100" align="center">
-        <template slot-scope="{row}">{{ row.sort }}</template>
+      <el-table-column label="排序" width="150" align="center">
+        <template slot-scope="{row}">
+          <el-input v-model="row.sort" maxlength="4" minlength="1" @blur="handleOnInputBlur(row)" />
+        </template>
       </el-table-column>
-      <el-table-column label="操作" width="200" align="center">
+      <el-table-column label="设置" width="150" align="center">
         <template slot-scope="{row}">
-          <el-button size="mini" type="text" @click="handleUpdate(row)">编辑
+          <el-button plain size="mini" :disabled="row.childCount | disableNextLevel" @click="handleShowNextLevel(row)">查看子菜单
           </el-button>
-          <el-button size="mini" type="text" :disabled="row.childCount | disableNextLevel" @click="handleShowNextLevel(row)">子菜单
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="200" align="center">
+        <template slot-scope="{row}">
+          <el-button size="mini" type="primary" @click="handleUpdate(row)">编辑
           </el-button>
-          <el-button size="mini" type="text" @click="handleDelete(row)">删除
+          <el-button size="mini" type="danger" @click="handleDelete(row)">删除
           </el-button>
         </template>
       </el-table-column>
@@ -57,7 +67,7 @@
 </template>
 
 <script>
-import { fetchList, deleteMenu } from '@/api/menu'
+import { fetchList, deleteMenu, updateSelective } from '@/api/menu'
 import Pagination from '@/components/Pagination'
 
 export default {
@@ -169,6 +179,38 @@ export default {
           this.getList()
         })
       })
+    },
+    handleOnInputBlur(row) { // 更新排序
+      updateSelective(row.id, { sort: row.sort }).then(response => {
+        this.$message({
+          message: '操作成功',
+          type: 'success',
+          duration: 1000
+        })
+        this.getList()
+      })
+    },
+    handleHiddenChange(index, row) { // 操作开关
+      updateSelective(row.id, { status: row.status }).then(response => {
+        this.$message({
+          message: '操作成功',
+          type: 'success',
+          duration: 1000
+        })
+        this.getList()
+      })
+    },
+    handleFilterStatus(status) {
+      console.log('status', status)
+      const defObj = { msg: '', status: 0 }
+      if (status === 0) {
+        defObj.msg = '是否要停用该菜单?'
+        defObj.status = 1
+      } else {
+        defObj.msg = '是否要启用该菜单?'
+        defObj.status = 0
+      }
+      return defObj
     }
   }
 }

src/views/sys/users/list.vue

@@ -6,31 +6,28 @@
       </el-button>
     </div>
     <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width:100%">
-      <el-table-column align="center" width="50">
+      <el-table-column label="序号" align="center" width="50">
         <template slot-scope="scope">{{ scope.$index + 1 }}</template>
       </el-table-column>
-      <el-table-column label="头像" align="center">
+      <el-table-column label="头像" align="center" width="100">
         <template slot-scope="scope">
           <img :src="scope.row.avatar" alt="" width="50" height="50">
         </template>
       </el-table-column>
       <el-table-column label="登录名" align="center">
-        <template slot-scope="scope">{{ scope.row.name }}</template>
+        <template slot-scope="scope">{{ scope.row.username }}</template>
       </el-table-column>
-      <el-table-column label="姓名" width="100" align="center">
-        <template slot-scope="scope">{{ scope.row.desc }}</template>
+      <el-table-column label="姓名" align="center">
+        <template slot-scope="scope">{{ scope.row.fullName }}</template>
       </el-table-column>
-      <el-table-column label="创建时间" align="center">
-        <template slot-scope="scope">{{ scope.row.creatTime }}</template>
-      </el-table-column>
-      <el-table-column label="更新时间" align="center">
-        <template slot-scope="scope">{{ scope.row.updateTime }}</template>
+      <el-table-column label="手机号" align="center">
+        <template slot-scope="scope">{{ scope.row.phone }}</template>
       </el-table-column>
       <el-table-column label="操作" width="200" align="center">
         <template slot-scope="scope">
-          <el-button size="mini" type="text" @click="handleUpdate(scope.$index, scope.row)">修改
+          <el-button size="mini" type="primary" @click="handleUpdate(scope.$index, scope.row)">修改
           </el-button>
-          <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除
+          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
           </el-button>
         </template>
       </el-table-column>
@@ -42,11 +39,11 @@
 </template>
 
 <script>
-import { fetchList, deleteMenu } from '@/api/menu'
+import { fetchList, deleteMenu } from '@/api/user'
 import Pagination from '@/components/Pagination'
 
 export default {
-  name: 'MenuList',
+  name: 'UserList',
   components: { Pagination },
   filters: {
     levelFilter(value) {
@@ -77,34 +74,9 @@ export default {
   data() {
     return {
       tableKey: 0,
-      list: [
-        {
-          id: 1,
-          avatar: 'https://www.caimei365.com/favicon.png?imageView2/1/w/80/h/80',
-          name: 'admin',
-          desc: '超超',
-          creatTime: '2021-12-16 16:15:52',
-          updateTime: '2021-12-16 16:15:52'
-        },
-        {
-          id: 2,
-          avatar: 'https://www.caimei365.com/favicon.png?imageView2/1/w/80/h/80',
-          name: 'zhengjigyi',
-          desc: '翼翼',
-          creatTime: '2021-12-16 16:15:52',
-          updateTime: '2021-12-16 16:15:52'
-        },
-        {
-          id: 3,
-          avatar: 'https://www.caimei365.com/favicon.png?imageView2/1/w/80/h/80',
-          name: 'wuxiaoyan',
-          desc: 'yanyan',
-          creatTime: '2021-12-16 16:15:52',
-          updateTime: '2021-12-16 16:15:52'
-        }
-      ],
+      list: [],
       total: 5,
-      listLoading: false,
+      listLoading: true,
       listQuery: {
         pageNum: 1,
         pageSize: 10,
@@ -115,12 +87,12 @@ export default {
   watch: {
     $route(route) {
       this.resetParentId()
-      // this.getList()
+      this.getList()
     }
   },
   created() {
     this.resetParentId()
-    // this.getList()
+    this.getList()
   },
   methods: {
     isElementIcon(value) {