update

src/api/role.js

@@ -1,9 +1,17 @@
 import request from '@/utils/request'
 
 export function findPage(data) {
-    return request({
-        url: '/user/role/findPage',
-        method: 'post',
-        data
-    })
-}
+  return request({
+    url: '/user/role/findPage',
+    method: 'post',
+    data
+  })
+}
+
+export function deleteByIds(ids) {
+  return request({
+    url: '/user/role/deleteByIds',
+    method: 'post',
+    data: ids
+  })
+}

src/api/userInfo.js

@@ -1,9 +1,33 @@
 import request from '@/utils/request'
 
 export function findPage(data) {
-    return request({
-        url: '/user/findPage',
-        method: 'post',
-        data
-    })
-}
+  return request({
+    url: '/user/findPage',
+    method: 'post',
+    data
+  })
+}
+
+export function enabledByIds(ids) {
+  return request({
+    url: '/user/enabledByIds',
+    method: 'post',
+    data: ids
+  })
+}
+
+export function disableByIds(ids) {
+  return request({
+    url: '/user/disableByIds',
+    method: 'post',
+    data: ids
+  })
+}
+
+export function resetLoginPasswordByIds(ids) {
+  return request({
+    url: '/user/resetLoginPasswordByIds',
+    method: 'post',
+    data: ids
+  })
+}

src/layout/components/Navbar.vue

@@ -6,20 +6,19 @@
       @toggleClick="toggleSideBar"
     />
 
-    <breadcrumb class="breadcrumb-container" />
+    <breadcrumb class="breadcrumb-container"/>
 
     <div class="right-menu">
       <el-dropdown class="right-container" trigger="click">
         <a>
           {{ oauthInfo.nickName }}
-          <i class="el-icon-caret-bottom" />
+          <i class="el-icon-caret-bottom"/>
         </a>
 
         <el-dropdown-menu slot="dropdown" class="user-dropdown">
           <router-link to="/">
-            <el-dropdown-item> 首页 </el-dropdown-item>
+            <el-dropdown-item> 首页</el-dropdown-item>
           </router-link>
-          
           <el-button type="text">
             <el-dropdown-item>修改登录密码</el-dropdown-item>
           </el-button>
@@ -33,28 +32,28 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
-import Breadcrumb from "@/components/Breadcrumb";
-import Hamburger from "@/components/Hamburger";
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
 
 export default {
   components: {
     Breadcrumb,
-    Hamburger,
+    Hamburger
   },
   computed: {
-    ...mapGetters(["sidebar", "oauthInfo"]),
+    ...mapGetters(['sidebar', 'oauthInfo'])
   },
   methods: {
     toggleSideBar() {
-      this.$store.dispatch("app/toggleSideBar");
+      this.$store.dispatch('app/toggleSideBar')
     },
     async logout() {
-      await this.$store.dispatch("user/logout");
-      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
-    },
-  },
-};
+      await this.$store.dispatch('user/logout')
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>

src/permission.js

@@ -18,7 +18,7 @@ router.beforeEach(async(to, from, next) => {
 
   // determine whether the user has logged in
   // const hasToken = getToken()
-  const accessToken = localStorage.getItem('x-access-token') || undefined;
+  const accessToken = localStorage.getItem('x-access-token') || undefined
 
   if (accessToken) {
     if (to.path === '/login') {

src/styles/index.scss

@@ -63,3 +63,8 @@ div:focus {
 .app-container {
   padding: 20px;
 }
+
+.pagination-container{
+  margin-top: 15px;
+  text-align: right;
+}

src/views/login/index.vue

@@ -66,82 +66,82 @@
         type="primary"
         style="width: 100%; margin-bottom: 30px"
         @click.native.prevent="handleLogin"
-        >立即登录</el-button
+      >立即登录
+      </el-button
       >
     </el-form>
   </div>
 </template>
 
 <script>
-import { getCaptcha } from "@/api/oauth";
+import { getCaptcha } from '@/api/oauth'
 
 export default {
-  name: "Login",
+  name: 'Login',
   data() {
     return {
       loginForm: {
-        username: "",
-        password: "",
-        captcha: "",
+        username: '',
+        password: '',
+        captcha: ''
       },
       loading: false,
-      passwordType: "password",
+      passwordType: 'password',
       redirect: undefined,
-      token: "",
-      captcha: "",
-    };
+      token: '',
+      captcha: ''
+    }
   },
   created() {
-    this.refreshCaptcha();
+    this.refreshCaptcha()
   },
   watch: {
     $route: {
-      handler: function (route) {
-        this.redirect = route.query && route.query.redirect;
+      handler: function(route) {
+        this.redirect = route.query && route.query.redirect
       },
-      immediate: true,
-    },
+      immediate: true
+    }
   },
   methods: {
     refreshCaptcha() {
-      let _this = this;
       getCaptcha().then((v) => {
-        console.log(v);
-        this.token = v.token;
-        this.captcha = v.captcha;
-      });
+        console.log(v)
+        this.token = v.token
+        this.captcha = v.captcha
+      })
     },
     showPwd() {
-      if (this.passwordType === "password") {
-        this.passwordType = "";
+      if (this.passwordType === 'password') {
+        this.passwordType = ''
       } else {
-        this.passwordType = "password";
+        this.passwordType = 'password'
       }
       this.$nextTick(() => {
-        this.$refs.password.focus();
-      });
+        this.$refs.password.focus()
+      })
     },
     handleLogin() {
       this.$refs.loginForm.validate((valid) => {
         if (valid) {
-          this.loading = true;
+          this.loading = true
           this.$store
-            .dispatch("user/login", { ...this.loginForm, token: this.token })
+            .dispatch('user/login', { ...this.loginForm, token: this.token })
             .then(() => {
-              this.$router.push({ path: this.redirect || "/" });
-              this.loading = false;
+              this.$router.push({ path: this.redirect || '/' })
+              this.loading = false
             })
             .catch(() => {
-              this.loading = false;
-            });
+              this.loading = false
+            })
         } else {
-          console.log("error submit!!");
-          return false;
+          console.log('error submit!!')
+          return false
         }
-      });
-    },
-  },
-};
+      })
+    }
+  }
+}
 </script>
 
 <style lang="scss">

src/views/user/info/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="app-container">
     <el-table
-      v-loading="listLoading"
-      :data="list"
+      v-loading="isLoading"
+      :data="pageData.data"
       element-loading-text="Loading"
       border
       fit
@@ -42,55 +42,109 @@
           <el-tag>{{ scope.row.state.text }}</el-tag>
         </template>
       </el-table-column>
-      
-
-      <el-table-column label="注册时间">
+      <el-table-column label="注册时间" width="160">
         <template slot-scope="scope">
           {{ scope.row.registerTime }}
         </template>
       </el-table-column>
-
       <el-table-column label="角色">
         <template slot-scope="scope">
-            <el-tag v-for="role in scope.row.listRoles" :key="role.id">{{ role.name }}</el-tag>
+          <el-tag v-for="role in scope.row.listRoles" :key="role.id">{{ role.name }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="70" fixed="right">
+        <template slot-scope="scope">
+          <el-dropdown>
+            <el-button type="text">
+              操作<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>编辑</el-dropdown-item>
+              <el-dropdown-item @click.native="enabledByIds([scope.row.id])">启用</el-dropdown-item>
+              <el-dropdown-item @click.native="disableByIds([scope.row.id])">禁用</el-dropdown-item>
+              <el-dropdown-item @click.native="resetLoginPasswordByIds([scope.row.id])">重置登录密码</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
         </template>
       </el-table-column>
     </el-table>
+    <el-pagination
+      class="pagination-container"
+      background
+      layout="prev, pager, next"
+      :total="pageData.total"
+      :page-size="pageData.pageSize"
+      @current-change="handleCurrentChange"
+    >
+    </el-pagination>
   </div>
 </template>
 
 <script>
-import { findPage } from "@/api/userInfo";
+import { findPage, enabledByIds, disableByIds, resetLoginPasswordByIds } from '@/api/userInfo'
 
 export default {
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: "success",
-        draft: "gray",
-        deleted: "danger",
-      };
-      return statusMap[status];
-    },
-  },
   data() {
     return {
-      list: null,
-      listLoading: true,
-    };
+      isLoading: true,
+      pageData: {},
+      currentPage: 1
+    }
   },
   created() {
-    this.fetchData();
+    this.fetchData()
   },
   methods: {
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.currentPage = val
+      this.fetchData()
+    },
+    enabledByIds(ids) {
+      console.log(`当前页: ${ids}`)
+      this.$confirm('确认要启用吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        enabledByIds(ids).then(() => {
+          this.fetchData()
+        })
+      })
+    },
+    disableByIds(ids) {
+      console.log(`当前页: ${ids}`)
+      this.$confirm('确认要禁用吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        disableByIds(ids).then(() => {
+          this.fetchData()
+        })
+      })
+    },
+    resetLoginPasswordByIds(ids) {
+      this.$confirm('确认要重置吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        resetLoginPasswordByIds(ids).then((newPasswd) => {
+          this.$alert('新的登录密码为：' + newPasswd + '，请妥善保管', '登录密码重置成功', {
+            confirmButtonText: '确定'
+          })
+        })
+      })
+    },
     fetchData() {
-      this.listLoading = true;
-      findPage({})
+      this.isLoading = true
+      findPage({ current: this.currentPage })
         .then((response) => {
-          this.list = response.data;
+          this.pageData = response
         })
-        .finally(() => (this.listLoading = false));
-    },
-  },
-};
+        .finally(() => (this.isLoading = false))
+    }
+  }
+}
 </script>

src/views/user/role/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="app-container">
     <el-table
-      v-loading="listLoading"
-      :data="list"
+      v-loading="isLoading"
+      :data="pageData.data"
       element-loading-text="Loading"
       border
       fit
@@ -30,42 +30,75 @@
           {{ scope.row.listAuthorities.length }}个
         </template>
       </el-table-column>
+
+      <el-table-column label="操作" width="70" fixed="right">
+        <template slot-scope="scope">
+          <el-dropdown>
+            <el-button type="text">
+              操作<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>编辑</el-dropdown-item>
+              <el-dropdown-item @click.native="deleteByIds([scope.row.id])">删除</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
     </el-table>
+
+    <el-pagination
+      class="pagination-container"
+      background
+      layout="prev, pager, next"
+      :total="pageData.total"
+      :page-size="pageData.pageSize"
+      @current-change="handleCurrentChange"
+    >
+    </el-pagination>
   </div>
 </template>
 
 <script>
-import { findPage } from "@/api/role";
+import { findPage, deleteByIds } from '@/api/role'
 
 export default {
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: "success",
-        draft: "gray",
-        deleted: "danger",
-      };
-      return statusMap[status];
-    },
-  },
   data() {
     return {
-      list: null,
-      listLoading: true,
-    };
+      isLoading: true,
+      pageData: {},
+      currentPage: 1
+    }
   },
   created() {
-    this.fetchData();
+    this.fetchData()
   },
   methods: {
+    deleteByIds(ids) {
+      console.log(`当前页: ${ids}`)
+      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteByIds(ids).then(() => {
+          this.fetchData()
+        })
+      })
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.fetchData()
+    },
     fetchData() {
-      this.listLoading = true;
-      findPage({})
+      this.isLoading = true
+      findPage({ current: this.currentPage })
         .then((response) => {
-          this.list = response.data;
+          this.pageData = response
         })
-        .finally(() => (this.listLoading = false));
-    },
-  },
-};
+        .finally(
+          () => (this.isLoading = false)
+        )
+    }
+  }
+}
 </script>