Merge pull request #1 from yovinchen/cloud

Cloud

package.json

@@ -23,7 +23,8 @@
     "path-to-regexp": "2.4.0",
     "vue": "2.6.10",
     "vue-router": "3.0.6",
-    "vuex": "3.1.0"
+    "vuex": "3.1.0",
+    "webpack-dev-server": "^2.9.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.4",

src/api/system/sysMenu.js

@@ -1,21 +1,15 @@
 import request from '@/utils/request'
 
-/**
+/*
- * 菜单管理相关的API请求函数
+菜单管理相关的API请求函数
- *
- * @type {string}
 */
-
 const api_name = '/admin/system/sysMenu'
 
 export default {
 
-  /**
+  /*
-   * 获取权限(菜单/功能)列表
+  获取权限(菜单/功能)列表
-   *
-   * @returns {AxiosPromise}
   */
-
   findNodes() {
     return request({
       url: `${api_name}/findNodes`,
@@ -23,56 +17,41 @@ export default {
     })
   },
 
-  /**
+  /*
-   * 删除一个权限项
+  删除一个权限项
-   *
-   * @param id
-   * @returns {AxiosPromise}
   */
-
   removeById(id) {
     return request({
       url: `${api_name}/remove/${id}`,
-      method: 'delete'
+      method: "delete"
     })
   },
 
-  /**
+  /*
-   * 保存一个权限项
+  保存一个权限项
-   *
-   * @param sysMenu
-   * @returns {AxiosPromise}
   */
-
   save(sysMenu) {
     return request({
       url: `${api_name}/save`,
-      method: 'post',
+      method: "post",
       data: sysMenu
     })
   },
 
-  /**
+  /*
-   * 更新一个权限项
+  更新一个权限项
-   *
-   * @param sysMenu
-   * @returns {AxiosPromise}
   */
-
   updateById(sysMenu) {
     return request({
       url: `${api_name}/update`,
-      method: 'put',
+      method: "put",
       data: sysMenu
     })
   },
-  /**
-   * 查看某个角色的权限列表
-   *
-   * @param roleId
-   * @returns {AxiosPromise}
-   */
 
+  /*
+查看某个角色的权限列表
+*/
   toAssign(roleId) {
     return request({
       url: `${api_name}/toAssign/${roleId}`,
@@ -80,18 +59,14 @@ export default {
     })
   },
 
-  /**
+  /*
-   * 给某个角色授权
+  给某个角色授权
-   *
-   * @param assignMenuVo
-   * @returns {AxiosPromise}
   */
-
+  doAssign(assginMenuVo) {
-  doAssign(assignMenuVo) {
     return request({
       url: `${api_name}/doAssign`,
-      method: 'post',
+      method: "post",
-      data: assignMenuVo
+      data: assginMenuVo
     })
   }
 }

src/api/system/sysRole.js

@@ -1,48 +1,28 @@
+/*
+角色管理相关的API请求函数
+*/
 import request from '@/utils/request'
 
-/**
- * 角色管理相关的API请求函数
- *
- * @type {string}
- */
 const api_name = '/admin/system/sysRole'
 
 export default {
 
-  /**
+  /*
-   * 获取角色分页列表(带搜索)
+  获取角色分页列表(带搜索)
-   * @param {*} page
-   * @param {*} limit
-   * @param {*} searchObj
-   * @returns
   */
   getPageList(page, limit, searchObj) {
     return request({
       url: `${api_name}/${page}/${limit}`,
       method: 'get',
-      // 如果是普通对象参数写法，params:对象参数名
-      // 如果是使用json格式传递，data:对象参数名
       params: searchObj
     })
   },
-
-  /**
-   * 角色删除
-   * @param {*} id
-   * @returns
-   */
   removeById(id) {
     return request({
       url: `${api_name}/remove/${id}`,
       method: 'delete'
     })
   },
-
-  /**
-   * 角色添加
-   * @param {*} role
-   * @returns
-   */
   save(role) {
     return request({
       url: `${api_name}/save`,
@@ -50,13 +30,6 @@ export default {
       data: role
     })
   },
-
-  /**
-   * 回显要修改的id信息
-   *
-   * @param id
-   * @returns {*}
-   */
   getById(id) {
     return request({
       url: `${api_name}/get/${id}`,
@@ -64,11 +37,6 @@ export default {
     })
   },
 
-  /** 修改
-   *
-   * @param role
-   * @returns {*}
-   */
   updateById(role) {
     return request({
       url: `${api_name}/update`,
@@ -76,13 +44,6 @@ export default {
       data: role
     })
   },
-
-  /**
-   * 批量删除
-   *
-   * @param idList
-   * @returns {*}
-   */
   batchRemove(idList) {
     return request({
       url: `${api_name}/batchRemove`,
@@ -90,24 +51,12 @@ export default {
       data: idList
     })
   },
-  /**
-   * 根据用户获取角色数据
-   *
-   * @param adminId
-   * @returns {*}
-   */
   getRoles(adminId) {
     return request({
       url: `${api_name}/toAssign/${adminId}`,
       method: 'get'
     })
   },
-  /**
-   * 为用户分配角色
-   *
-   * @param assginRoleVo
-   * @returns {*}
-   */
   assignRoles(assginRoleVo) {
     return request({
       url: `${api_name}/doAssign`,

src/api/system/sysUser.js

@@ -1,21 +1,9 @@
 import request from '@/utils/request'
 
-/**
- * 用户管理相关的API请求函数
- *
- * @type {string}
- */
 const api_name = '/admin/system/sysUser'
 
 export default {
-  /**
+
-   * 用户条件分页查询
-   *
-   * @param page
-   * @param limit
-   * @param searchObj
-   * @returns {AxiosPromise}
-   */
   getPageList(page, limit, searchObj) {
     return request({
       url: `${api_name}/${page}/${limit}`,
@@ -23,24 +11,13 @@ export default {
       params: searchObj // url查询字符串或表单键值对
     })
   },
-  /**
-   * 获取用户
-   *
-   * @param id
-   * @returns {AxiosPromise}
-   */
   getById(id) {
     return request({
       url: `${api_name}/get/${id}`,
       method: 'get'
     })
   },
-  /**
+
-   * 保存用户
-   *
-   * @param role
-   * @returns {AxiosPromise}
-   */
   save(role) {
     return request({
       url: `${api_name}/save`,
@@ -48,12 +25,7 @@ export default {
       data: role
     })
   },
-  /**
+
-   * 更新用户
-   *
-   * @param role
-   * @returns {AxiosPromise}
-   */
   updateById(role) {
     return request({
       url: `${api_name}/update`,
@@ -61,29 +33,17 @@ export default {
       data: role
     })
   },
-  /**
-   * 删除用户
-   *
-   * @param id
-   * @returns {AxiosPromise}
-   */
   removeById(id) {
     return request({
       url: `${api_name}/remove/${id}`,
       method: 'delete'
     })
   },
-  /**
-   * 更新用户状态
-   *
-   * @param id
-   * @param status
-   * @returns {AxiosPromise}
-   */
   updateStatus(id, status) {
     return request({
       url: `${api_name}/updateStatus/${id}/${status}`,
       method: 'get'
     })
   }
+
 }

src/layout/components/Sidebar/index.vue

@@ -3,16 +3,16 @@
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
-        :active-text-color="variables.menuActiveText"
-        :background-color="variables.menuBg"
-        :collapse="isCollapse"
-        :collapse-transition="false"
         :default-active="activeMenu"
+        :collapse="isCollapse"
+        :background-color="variables.menuBg"
         :text-color="variables.menuText"
         :unique-opened="false"
+        :active-text-color="variables.menuActiveText"
+        :collapse-transition="false"
         mode="vertical"
       >
-        <sidebar-item v-for="route in routes" :key="route.path" :base-path="route.path" :item="route" />
+        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
   </div>

src/main.js

@@ -1,21 +1,23 @@
 import Vue from 'vue'
 
 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
+
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import locale from 'element-ui/lib/locale/lang/en' // lang i18n
+
 import '@/styles/index.scss' // global css
+
 import App from './App'
 import store from './store'
 import router from './router'
 
 import '@/icons' // icon
 import '@/permission' // permission control
+
 //新增
 import hasBtnPermission from '@/utils/btn-permission'
-
 Vue.prototype.$hasBP = hasBtnPermission
-
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api
@@ -30,9 +32,9 @@ if (process.env.NODE_ENV === 'production') {
 }
 
 // set ElementUI lang to EN
-// Vue.use(ElementUI, { locale })
+Vue.use(ElementUI, { locale })
 // 如果想要中文版 element-ui，按如下方式声明
-Vue.use(ElementUI)
+// Vue.use(ElementUI)
 
 Vue.config.productionTip = false
 

src/permission.js

@@ -7,7 +7,6 @@ import 'nprogress/nprogress.css' // 水平进度条样式
 import getPageTitle from '@/utils/get-page-title' // 获取应用头部标题的函数
 import Layout from '@/layout'
 import ParentView from '@/components/ParentView'
-
 const _import = require('./router/_import_'+process.env.NODE_ENV) // 获取组件的方法
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
@@ -38,7 +37,7 @@ router.beforeEach(async(to, from, next) => {
           const menus = filterAsyncRouter(store.getters.menus)// 1.过滤路由
           console.log(menus)
           router.addRoutes(menus) // 2.动态添加路由
-          const lastRou = [{ path: '*', redirect: '/404', hidden: true }]
+          let lastRou = [{ path: '*', redirect: '/404', hidden: true }]
           router.addRoutes(lastRou)
           global.antRouter = menus // 3.将路由数据传递给全局变量，做侧边栏菜单渲染工作
           next({
@@ -82,7 +81,7 @@ function filterAsyncRouter(asyncRouterMap) {
         try {
           route.component = _import(route.component)// 导入组件
         } catch (error) {
-          // debugger
+          debugger
           console.log(error)
           route.component = _import('dashboard/index')// 导入组件
         }

src/router/index.js

@@ -1,10 +1,11 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-/* Layout */
-import Layout from '@/layout'
 
 Vue.use(Router)
 
+/* Layout */
+import Layout from '@/layout'
+
 /**
  * Note: sub-menu only appear when route children.length >= 1
  * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
@@ -35,6 +36,13 @@ export const constantRoutes = [
     component: () => import('@/views/login/index'),
     hidden: true
   },
+
+  // {
+  //   path: '/404',
+  //   component: () => import('@/views/404'),
+  //   hidden: true
+  // },
+
   {
     path: '/',
     component: Layout,
@@ -46,6 +54,60 @@ export const constantRoutes = [
       meta: { title: 'Dashboard', icon: 'dashboard' }
     }]
   }
+
+
+  //添加我们的路由
+  // {
+  //   path: '/system',
+  //   component: Layout,
+  //   meta: {
+  //     title: '系统管理',
+  //     icon: 'el-icon-s-tools'
+  //   },
+  //   alwaysShow: true,
+  //   children: [
+  //     {
+  //       path: 'sysRole',
+  //       component: () => import('@/views/system/sysRole/list'),
+  //       meta: {
+  //         title: '角色管理',
+  //         icon: 'el-icon-s-help'
+  //       },
+  //     },
+  //     {
+  //       path: 'sysUser',
+  //       component: () => import('@/views/system/sysUser/list'),
+  //       meta: {
+  //         title: '用户管理',
+  //         icon: 'el-icon-s-help'
+  //       },
+  //     },
+
+  //     {
+  //       name: 'sysMenu',
+  //       path: 'sysMenu',
+  //       component: () => import('@/views/system/sysMenu/list'),
+  //       meta: {
+  //         title: '菜单管理',
+  //         icon: 'el-icon-s-unfold'
+  //       },
+  //     },
+
+  //     {
+  //       path: 'assignAuth',
+  //       component: () => import('@/views/system/sysRole/assignAuth'),
+  //       meta: {
+  //         activeMenu: '/system/sysRole',
+  //         title: '角色授权'
+  //       },
+  //       hidden: true,
+  //     }
+  //   ]
+  // },
+
+
+  // 404 page must be placed at the end !!!
+  // { path: '*', redirect: '/404', hidden: true }
 ]
 
 const createRouter = () => new Router({

src/store/getters.js

@@ -4,6 +4,7 @@ const getters = {
   token: state => state.user.token,
   avatar: state => state.user.avatar,
   name: state => state.user.name,
+
   //新增
   buttons: state => state.user.buttons,
   menus: state => state.user.menus

src/store/modules/user.js

@@ -1,5 +1,5 @@
-import { getInfo, login, logout } from '@/api/user'
+import { login, logout, getInfo } from '@/api/user'
-import { getToken, removeToken, setToken } from '@/utils/auth'
+import { getToken, setToken, removeToken } from '@/utils/auth'
 import { resetRouter } from '@/router'
 
 const getDefaultState = () => {
@@ -69,8 +69,8 @@ const actions = {
         commit('SET_NAME', name)
         commit('SET_AVATAR', avatar)
 
-        commit('SET_BUTTONS', data.buttons)
+        commit("SET_BUTTONS", data.buttons)
-        commit('SET_MENUS', data.routers)
+        commit("SET_MENUS", data.routers)
         resolve(data)
       }).catch(error => {
         reject(error)

src/views/login/index.vue

@@ -1,13 +1,6 @@
 <template>
   <div class="login-container">
-    <el-form
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
-      ref="loginForm"
-      :model="loginForm"
-      :rules="loginRules"
-      auto-complete="on"
-      class="login-form"
-      label-position="left"
-    >
 
       <div class="title-container">
         <h3 class="title">Login Form</h3>
@@ -20,11 +13,11 @@
         <el-input
           ref="username"
           v-model="loginForm.username"
-          auto-complete="on"
-          name="username"
           placeholder="Username"
-          tabindex="1"
+          name="username"
           type="text"
+          tabindex="1"
+          auto-complete="on"
         />
       </el-form-item>
 
@@ -37,10 +30,10 @@
           ref="password"
           v-model="loginForm.password"
           :type="passwordType"
-          auto-complete="on"
-          name="password"
           placeholder="Password"
+          name="password"
           tabindex="2"
+          auto-complete="on"
           @keyup.enter.native="handleLogin"
         />
         <span class="show-pwd" @click="showPwd">
@@ -48,13 +41,7 @@
         </span>
       </el-form-item>
 
-      <el-button
+      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
-        :loading="loading"
-        style="width:100%;margin-bottom:30px;"
-        type="primary"
-        @click.native.prevent="handleLogin"
-      >Login
-      </el-button>
 
       <div class="tips">
         <span style="margin-right:20px;">username: admin</span>
@@ -66,6 +53,7 @@
 </template>
 
 <script>
+import { validUsername } from '@/utils/validate'
 
 export default {
   name: 'Login',

src/views/system/sysMenu/list.vue

@@ -3,7 +3,14 @@
 
     <!-- 工具条 -->
     <div class="tools-div">
-      <el-button icon="el-icon-plus" size="mini" type="success" @click="add()">添 加</el-button>
+      <el-button
+        :disabled="$hasBP('bnt.sysMenu.add') === false"
+        icon="el-icon-plus"
+        size="mini"
+        type="success"
+        @click="add()"
+      >添 加
+      </el-button>
     </div>
     <el-table
       :data="sysMenuList"
@@ -43,9 +50,16 @@
             type="success"
             @click="add(scope.row)"
           />
-          <el-button icon="el-icon-edit" size="mini" title="修改" type="primary" @click="edit(scope.row)" />
           <el-button
-            :disabled="scope.row.children.length > 0"
+            :disabled="$hasBP('bnt.sysMenu.update') === false"
+            icon="el-icon-edit"
+            size="mini"
+            title="修改"
+            type="primary"
+            @click="edit(scope.row)"
+          />
+          <el-button
+            :disabled="(scope.row.children.length > 0) || !$hasBP('bnt.sysMenu.remove')"
             icon="el-icon-delete"
             size="mini"
             title="删除"
@@ -255,7 +269,7 @@ export default {
 
     // -------------
     add(row) {
-      // debugger
+      debugger
       this.typeDisabled = false
       this.dialogTitle = '添加下级节点'
       this.dialogVisible = true
@@ -286,7 +300,7 @@ export default {
     },
 
     edit(row) {
-      // debugger
+      debugger
       this.dialogTitle = '修改节点'
       this.dialogVisible = true
 

src/views/system/sysRole/assignAuth.vue

@@ -4,25 +4,24 @@
       授权角色：{{ $route.query.roleName }}
     </div>
     <el-tree
+      style="margin: 20px 0"
       ref="tree"
       :data="sysMenuList"
-      :props="defaultProps"
-      default-expand-all
       node-key="id"
       show-checkbox
-      style="margin: 20px 0"
+      default-expand-all
+      :props="defaultProps"
     />
     <div style="padding: 20px 20px;">
-      <el-button :loading="loading" icon="el-icon-check" size="mini" type="primary" @click="save">保存</el-button>
+      <el-button :loading="loading" type="primary" icon="el-icon-check" size="mini" @click="save">保存</el-button>
-      <el-button icon="el-icon-refresh-right" size="mini" @click="$router.push('/system/sysRole')">返回</el-button>
+      <el-button @click="$router.push('/system/sysRole')" size="mini" icon="el-icon-refresh-right">返回</el-button>
     </div>
   </div>
 </template>
 <script>
 import api from '@/api/system/sysMenu'
-
 export default {
-  name: 'RoleAuth',
+  name: 'roleAuth',
 
   data() {
     return {
@@ -31,8 +30,8 @@ export default {
       defaultProps: {
         children: 'children',
         label: 'name'
-      }
+      },
-    }
+    };
   },
 
   created() {
@@ -72,13 +71,14 @@ export default {
     保存权限列表
     */
     save() {
+      debugger
       //获取到当前子节点
       //const checkedNodes = this.$refs.tree.getCheckedNodes()
       //获取到当前子节点及父节点
-      const allCheckedNodes = this.$refs.tree.getCheckedNodes(false, true)
+      const allCheckedNodes = this.$refs.tree.getCheckedNodes(false, true);
-      const idList = allCheckedNodes.map(node => node.id)
+      let idList = allCheckedNodes.map(node => node.id);
       console.log(idList)
-      const assginMenuVo = {
+      let assginMenuVo = {
         roleId: this.$route.query.id,
         menuIdList: idList
       }
@@ -86,9 +86,9 @@ export default {
       api.doAssign(assginMenuVo).then(result => {
         this.loading = false
         this.$message.success(result.$message || '分配权限成功')
-        this.$router.push('/system/sysRole')
+        this.$router.push('/system/sysRole');
       })
     }
   }
-}
+};
 </script>

src/views/system/sysRole/list.vue

@@ -6,87 +6,113 @@
         <el-row>
           <el-col :span="24">
             <el-form-item label="角色名称">
-              <el-input v-model="searchObj.roleName" placeholder="角色名称" style="width: 100%" />
+              <el-input
+                v-model="searchObj.roleName"
+                style="width: 100%"
+                placeholder="角色名称"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row style="display: flex">
-          <el-button :loading="loading" icon="el-icon-search" size="mini" type="primary" @click="fetchData()">搜索
-          </el-button>
-          <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
-          <!-- 工具条 -->
-          <!--          <div class="tools-div">-->
           <el-button
-            :disabled="$hasBP('bnt.sysRole.add') === false"
+            type="primary"
+            icon="el-icon-search"
+            size="mini"
+            :loading="loading"
+            @click="fetchData()"
+          >搜索</el-button>
+          <el-button
+            icon="el-icon-refresh"
+            size="mini"
+            @click="resetData"
+          >重置</el-button>
+          <el-button
+            type="success"
             icon="el-icon-plus"
             size="mini"
-            type="success"
+            :disabled="$hasBP('bnt.sysRole.add') === false"
             @click="add"
-          >添 加
+          >添 加</el-button>
-          </el-button>
+          <el-button
-          <el-button class="btn-add" size="mini" @click="batchRemove()">批量删除</el-button>
+            class="btn-add"
-          <!--          </div>-->
+            size="mini"
+            @click="batchRemove()"
+          >批量删除</el-button>
         </el-row>
       </el-form>
     </div>
+    <!-- 工具条 -->
+    <!-- <div class="tools-div">
+      <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添 加</el-button>
+    </div> -->
     <!-- 表格 -->
     <el-table
       v-loading="listLoading"
       :data="list"
-      border
       stripe
-      style="width: 100%;margin-top: 10px;"
+      border
+      style="width: 100%; margin-top: 10px"
       @selection-change="handleSelectionChange"
     >
-
       <el-table-column type="selection" />
 
-      <el-table-column
+      <el-table-column label="序号" width="70" align="center">
-        align="center"
-        label="序号"
-        width="70"
-      >
         <template slot-scope="scope">
           {{ (page - 1) * limit + scope.$index + 1 }}
         </template>
       </el-table-column>
 
-      <el-table-column label="角色名称" prop="roleName" />
+      <el-table-column prop="roleName" label="角色名称" />
-      <el-table-column label="角色编码" prop="roleCode" />
+      <el-table-column prop="roleCode" label="角色编码" />
-      <el-table-column label="创建时间" prop="createTime" width="160" />
+      <el-table-column prop="createTime" label="创建时间" width="160" />
-      <el-table-column align="center" label="操作" width="200">
+      <el-table-column label="操作" width="200" align="center">
         <template slot-scope="scope">
-          <el-button icon="el-icon-edit" size="mini" title="修改" type="primary" @click="edit(scope.row.id)" />
           <el-button
+            type="primary"
+            icon="el-icon-edit"
+            size="mini"
+            :disabled="$hasBP('bnt.sysRole.update') === false"
+            title="修改"
+            @click="edit(scope.row.id)"
+          />
+          <el-button
+            type="danger"
             icon="el-icon-delete"
+            :disabled="$hasBP('bnt.sysRole.remove') === false"
             size="mini"
             title="删除"
-            type="danger"
             @click="removeDataById(scope.row.id)"
           />
           <el-button
+            type="warning"
+            :disabled="$hasBP('bnt.sysRole.assignAuth') === false"
             icon="el-icon-baseball"
             size="mini"
             title="分配权限"
-            type="warning"
             @click="showAssignAuth(scope.row)"
           />
-
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页组件 -->
     <el-pagination
       :current-page="page"
-      :page-size="limit"
       :total="total"
+      :page-size="limit"
+      style="padding: 30px 0; text-align: center"
       layout="total, prev, pager, next, jumper"
-      style="padding: 30px 0; text-align: center;"
       @current-change="fetchData"
     />
 
-    <el-dialog :visible.sync="dialogVisible" title="添加/修改" width="40%">
+    <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%">
-      <el-form ref="dataForm" :model="sysRole" label-width="150px" size="small" style="padding-right: 40px;">
+      <el-form
+        ref="dataForm"
+        :model="sysRole"
+        label-width="150px"
+        size="small"
+        style="padding-right: 40px"
+      >
         <el-form-item label="角色名称">
           <el-input v-model="sysRole.roleName" />
         </el-form-item>
@@ -95,51 +121,129 @@
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
-        <el-button icon="el-icon-refresh-right" size="small" @click="dialogVisible = false">取 消</el-button>
+        <el-button
-        <el-button icon="el-icon-check" size="small" type="primary" @click="saveOrUpdate()">确 定</el-button>
+          size="small"
+          icon="el-icon-refresh-right"
+          @click="dialogVisible = false"
+        >取 消</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-check"
+          size="small"
+          @click="saveOrUpdate()"
+        >确 定</el-button>
       </span>
     </el-dialog>
-
   </div>
 </template>
-
 <script>
-// 引入定义接口js文件
 import api from '@/api/system/sysRole'
-
 export default {
-  // vue代码结构
+  // 定义数据模型
-  // 初始值
+  // 定义数据模型
+  // 定义数据模型
   data() {
     return {
-      list: [], // 角色列表
+      list: [], // 列表
-      page: 1, // 当前页
-      limit: 10, // 每页显示记录数
       total: 0, // 总记录数
-      searchObj: {}, // 条件对象
+      page: 1, // 页码
-
+      limit: 10, // 每页记录数
-      selections: [], // 多个复选框值
+      searchObj: {}, // 查询条件
       sysRole: {}, // 封装表单角色数据
-      dialogVisible: false// 是否弹框
+      multipleSelection: [], // 批量删除选中的记录列表
+      dialogVisible: false
     }
   },
-  created() { // 渲染之前执行
+  // 页面渲染成功后获取数据
+  created() {
     this.fetchData()
   },
-  methods: { // 操作方法
+  // 定义方法
-    // 跳转分配菜单页面
+  methods: {
     showAssignAuth(row) {
       this.$router.push('/system/assignAuth?id=' + row.id + '&roleName=' + row.roleName)
     },
-    // 选择复选框，把复选框所在行内容传递
+    edit(id) {
+      this.dialogVisible = true
+      this.fetchDataById(id)
+    },
+
+    fetchDataById(id) {
+      api.getById(id).then((response) => {
+        this.sysRole = response.data
+      })
+    },
+
+    add() {
+      this.dialogVisible = true
+    },
+
+    saveOrUpdate() {
+      this.saveBtnDisabled = true // 防止表单重复提交
+      if (!this.sysRole.id) {
+        this.saveData()
+      } else {
+        this.updateData()
+      }
+    },
+
+    // 新增
+    saveData() {
+      api.save(this.sysRole).then((response) => {
+        this.$message.success(response.message || '操作成功')
+        this.dialogVisible = false
+        this.fetchData(this.page)
+      })
+    },
+    updateData() {
+      api.updateById(this.sysRole).then((response) => {
+        this.$message.success(response.message || '操作成功')
+        this.dialogVisible = false
+        this.fetchData(this.page)
+      })
+    },
+    fetchData(current = 1) {
+      this.page = current
+      // 调用api
+      api
+        .getPageList(this.page, this.limit, this.searchObj)
+        .then((response) => {
+          this.list = response.data.records
+          this.total = response.data.total
+        })
+    },
+    // 重置表单
+    resetData() {
+      console.log('重置查询表单')
+      this.searchObj = {}
+      this.fetchData()
+    },
+    // 根据id删除数据
+    removeDataById(id) {
+      // debugger
+      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          // promise
+          // 点击确定，远程调用ajax
+          return api.removeById(id)
+        })
+        .then((response) => {
+          this.fetchData(this.page)
+          this.$message.success(response.message || '删除成功')
+        })
+    },
+    // 当多选选项发生变化的时候调用
     handleSelectionChange(selection) {
-      this.selections = selection
+      console.log(selection)
-      console.log(this.selections)
+      this.multipleSelection = selection
     },
     // 批量删除
     batchRemove() {
-      // 判断
+      if (this.multipleSelection.length === 0) {
-      if (this.selections.length === 0) {
         this.$message.warning('请选择要删除的记录！')
         return
       }
@@ -147,92 +251,20 @@ export default {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-      }).then(() => {
+      })
-        // [1,2,3]
+        .then(() => {
+          // 点击确定，远程调用ajax
+          // 遍历selection，将id取出放入id列表
           var idList = []
-        // 选择复选框数据在数组里面 this.selections
+          this.multipleSelection.forEach((item) => {
-        this.selections.forEach(item => {
+            idList.push(item.id)
-          var id = item.id
-          idList.push(id)
           })
+          // 调用api
           return api.batchRemove(idList)
-      }).then(response => {
+        })
+        .then((response) => {
+          this.fetchData()
           this.$message.success(response.message)
-        this.fetchData()
-      })
-    },
-    // 点击修改，弹出框，根据id查询数据显示
-    edit(id) {
-      // 弹出框
-      this.dialogVisible = true
-      // 根据id查询
-      this.fetchDataById(id)
-    },
-    // 根据id查询
-    fetchDataById(id) {
-      api.getById(id)
-        .then(response => {
-          this.sysRole = response.data
-        })
-    },
-    // 点击添加弹出框
-    add() {
-      this.dialogVisible = true
-    },
-    // 添加或者修改
-    saveOrUpdate() {
-      // 根据id判断
-      if (!this.sysRole.id) { // 添加
-        this.save()
-      } else { // 修改
-        this.update()
-      }
-    },
-    save() { // 添加
-      api.saveRole(this.sysRole)
-        .then(response => {
-          // 提示
-          this.$message.success(response.message || '操作成功')
-          // 关闭弹框
-          this.dialogVisible = false
-          // 刷新页面
-          this.fetchData()
-        })
-    },
-    update() { // 修改
-      api.updateById(this.sysRole)
-        .then(response => {
-          // 提示
-          this.$message.success(response.message || '操作成功')
-          // 关闭弹框
-          this.dialogVisible = false
-          // 刷新页面
-          this.fetchData()
-        })
-    },
-    // 条件分页查询
-    fetchData(current = 1) {
-      this.page = current
-      api.getPageList(this.page, this.limit, this.searchObj)
-        .then(response => {
-          this.list = response.data.records
-          this.total = response.data.total
-        })
-    },
-    // 删除
-    removeDataById(id) {
-      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        // 调用
-        return api.removeById(id)
-      }).then(response => {
-        // 刷新页面
-        this.fetchData()
-        // 提示信息
-        this.$message.success(response.message || '删除成功')
         })
     }
   }

src/views/system/sysUser/list.vue

@@ -27,14 +27,23 @@
           <el-button :loading="loading" icon="el-icon-search" size="mini" type="primary" @click="fetchData()">搜索
           </el-button>
           <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
-          <!-- 工具条 -->
+          <el-button
-          <!--          <div class="tools-div">-->
+            :disabled="$hasBP('bnt.sysUser.add') === false"
-          <el-button icon="el-icon-plus" size="mini" type="success" @click="add">添 加</el-button>
+            icon="el-icon-plus"
-          <!--          </div>-->
+            size="mini"
+            type="success"
+            @click="add"
+          >添 加
+          </el-button>
         </el-row>
       </el-form>
     </div>
 
+    <!-- 工具条 -->
+    <!--    <div class="tools-div">-->
+    <!--      <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添 加</el-button>-->
+    <!--    </div>-->
+
     <!-- 列表 -->
     <el-table
       v-loading="listLoading"
@@ -76,8 +85,16 @@
 
       <el-table-column align="center" fixed="right" label="操作" width="180">
         <template slot-scope="scope">
-          <el-button icon="el-icon-edit" size="mini" title="修改" type="primary" @click="edit(scope.row.id)" />
           <el-button
+            :disabled="$hasBP('bnt.sysUser.update') === false"
+            icon="el-icon-edit"
+            size="mini"
+            title="修改"
+            type="primary"
+            @click="edit(scope.row.id)"
+          />
+          <el-button
+            :disabled="$hasBP('bnt.sysUser.remove') === false"
             icon="el-icon-delete"
             size="mini"
             title="删除"
@@ -85,6 +102,7 @@
             @click="removeDataById(scope.row.id)"
           />
           <el-button
+            :disabled="$hasBP('bnt.sysUser.assignRole') === false"
             icon="el-icon-baseball"
             size="mini"
             title="分配角色"
@@ -212,11 +230,11 @@ export default {
 
     // 加载banner列表数据
     fetchData(page = 1) {
-      // debugger
+      debugger
       this.page = page
       console.log('翻页。。。' + this.page)
 
-      if (this.createTimes && this.createTimes.length === 2) {
+      if (this.createTimes && this.createTimes.length == 2) {
         this.searchObj.createTimeBegin = this.createTimes[0]
         this.searchObj.createTimeEnd = this.createTimes[1]
       }
@@ -252,7 +270,7 @@ export default {
         // 点击确定，远程调用ajax
         return api.removeById(id)
       }).then((response) => {
-        this.fetchData(this.page)
+        this.fetchData()
         this.$message.success(response.message || '删除成功')
       }).catch(() => {
         this.$message.info('取消删除')

vue.config.js

@@ -27,7 +27,7 @@ module.exports = {
   publicPath: '/',
   outputDir: 'dist',
   assetsDir: 'static',
-  lintOnSave: process.env.NODE_ENV === 'development',
+  lintOnSave: false,// process.env.NODE_ENV === 'development',
   productionSourceMap: false,
   devServer: {
     port: port,