云尚办公前端

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/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,29 +51,4 @@ 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`,
-      method: 'post',
-      data: assginRoleVo
-    })
-  }
 }

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>
@@ -31,8 +31,7 @@ export default {
       'sidebar'
     ]),
     routes() {
-      // return this.$router.options.routes
+      return this.$router.options.routes
-      return this.$router.options.routes.concat(global.antRouter)
     },
     activeMenu() {
       const route = this.$route

src/main.js

@@ -1,20 +1,19 @@
 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
@@ -30,9 +29,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

@@ -1,23 +1,25 @@
 import router from './router'
 import store from './store'
-import { getToken } from '@/utils/auth'
 import { Message } from 'element-ui'
-import NProgress from 'nprogress' // 水平进度条提示: 在跳转路由时使用
+import NProgress from 'nprogress' // progress bar
-import 'nprogress/nprogress.css' // 水平进度条样式
+import 'nprogress/nprogress.css' // progress bar style
-import getPageTitle from '@/utils/get-page-title' // 获取应用头部标题的函数
+import { getToken } from '@/utils/auth' // get token from cookie
-import Layout from '@/layout'
+import getPageTitle from '@/utils/get-page-title'
-import ParentView from '@/components/ParentView'
-
-const _import = require('./router/_import_' + process.env.NODE_ENV) // 获取组件的方法
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
+
 const whiteList = ['/login'] // no redirect whitelist
+
 router.beforeEach(async(to, from, next) => {
+  // start progress bar
   NProgress.start()
+
   // set page title
   document.title = getPageTitle(to.meta.title)
+
   // determine whether the user has logged in
   const hasToken = getToken()
+
   if (hasToken) {
     if (to.path === '/login') {
       // if is logged in, redirect to the home page
@@ -30,25 +32,11 @@ router.beforeEach(async(to, from, next) => {
       } else {
         try {
           // get user info
-          await store.dispatch('user/getInfo')// 请求获取用户信息
+          await store.dispatch('user/getInfo')
-          if (store.getters.menus.length < 1) {
+
-            global.antRouter = []
+          next()
-            next()
-          }
-          const menus = filterAsyncRouter(store.getters.menus)// 1.过滤路由
-          console.log(menus)
-          router.addRoutes(menus) // 2.动态添加路由
-          const lastRou = [{ path: '*', redirect: '/404', hidden: true }]
-          router.addRoutes(lastRou)
-          global.antRouter = menus // 3.将路由数据传递给全局变量，做侧边栏菜单渲染工作
-          next({
-            ...to,
-            replace: true
-          })
-          // next()
         } catch (error) {
           // remove token and go to login page to re-login
-          console.log(error)
           await store.dispatch('user/resetToken')
           Message.error(error || 'Has Error')
           next(`/login?redirect=${to.path}`)
@@ -56,7 +44,9 @@ router.beforeEach(async(to, from, next) => {
         }
       }
     }
-  } else { /* has no token*/
+  } else {
+    /* has no token*/
+
     if (whiteList.indexOf(to.path) !== -1) {
       // in the free login whitelist, go directly
       next()
@@ -68,32 +58,7 @@ router.beforeEach(async(to, from, next) => {
   }
 })
 
-router.afterEach(() => { // finish progress bar
+router.afterEach(() => {
+  // finish progress bar
   NProgress.done()
-}) // // 遍历后台传来的路由字符串，转换为组件对象
+})
-function filterAsyncRouter(asyncRouterMap) {
-  const accessedRouters = asyncRouterMap.filter(route => {
-    if (route.component) {
-      if (route.component === 'Layout') {
-        route.component = Layout
-      } else if (route.component === 'ParentView') {
-        route.component = ParentView
-      } else {
-        try {
-          route.component = _import(route.component)// 导入组件
-        } catch (error) {
-          // debugger
-          console.log(error)
-          route.component = _import('dashboard/index')// 导入组件
-        }
-      }
-    }
-    if (route.children && route.children.length > 0) {
-      route.children = filterAsyncRouter(route.children)
-    } else {
-      delete route.children
-    }
-    return true
-  })
-  return accessedRouters
-}

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,
@@ -45,7 +53,135 @@ export const constantRoutes = [
       component: () => import('@/views/dashboard/index'),
       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: '/example',
+    component: Layout,
+    redirect: '/example/table',
+    name: 'Example',
+    meta: { title: 'Example', icon: 'el-icon-s-help' },
+    children: [
+      {
+        path: 'table',
+        name: 'Table',
+        component: () => import('@/views/table/index'),
+        meta: { title: 'Table', icon: 'table' }
+      },
+      {
+        path: 'tree',
+        name: 'Tree',
+        component: () => import('@/views/tree/index'),
+        meta: { title: 'Tree', icon: 'tree' }
+      }
+    ]
+  },
+
+  {
+    path: '/form',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        name: 'Form',
+        component: () => import('@/views/form/index'),
+        meta: { title: 'Form', icon: 'form' }
+      }
+    ]
+  },
+
+  {
+    path: '/nested',
+    component: Layout,
+    redirect: '/nested/menu1',
+    name: 'Nested',
+    meta: {
+      title: 'Nested',
+      icon: 'nested'
+    },
+    children: [
+      {
+        path: 'menu1',
+        component: () => import('@/views/nested/menu1/index'), // Parent router-view
+        name: 'Menu1',
+        meta: { title: 'Menu1' },
+        children: [
+          {
+            path: 'menu1-1',
+            component: () => import('@/views/nested/menu1/menu1-1'),
+            name: 'Menu1-1',
+            meta: { title: 'Menu1-1' }
+          },
+          {
+            path: 'menu1-2',
+            component: () => import('@/views/nested/menu1/menu1-2'),
+            name: 'Menu1-2',
+            meta: { title: 'Menu1-2' },
+            children: [
+              {
+                path: 'menu1-2-1',
+                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
+                name: 'Menu1-2-1',
+                meta: { title: 'Menu1-2-1' }
+              },
+              {
+                path: 'menu1-2-2',
+                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
+                name: 'Menu1-2-2',
+                meta: { title: 'Menu1-2-2' }
+              }
+            ]
+          },
+          {
+            path: 'menu1-3',
+            component: () => import('@/views/nested/menu1/menu1-3'),
+            name: 'Menu1-3',
+            meta: { title: 'Menu1-3' }
+          }
+        ]
+      },
+      {
+        path: 'menu2',
+        component: () => import('@/views/nested/menu2/index'),
+        name: 'Menu2',
+        meta: { title: 'menu2' }
+      }
+    ]
+  },
+
+  {
+    path: 'external-link',
+    component: Layout,
+    children: [
+      {
+        path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
+        meta: { title: 'External Link', icon: 'link' }
+      }
+    ]
+  },
+
+  // 404 page must be placed at the end !!!
+  { path: '*', redirect: '/404', hidden: true }
 ]
 
 const createRouter = () => new Router({

src/store/getters.js

@@ -3,9 +3,6 @@ const getters = {
   device: state => state.app.device,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
-  name: state => state.user.name,
+  name: state => state.user.name
-  // 新增
-  buttons: state => state.user.buttons,
-  menus: state => state.user.menus
 }
 export default getters

src/store/modules/user.js

@@ -1,15 +1,12 @@
-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 = () => {
   return {
     token: getToken(),
     name: '',
-    avatar: '',
+    avatar: ''
-
-    buttons: [], // 新增
-    menus: '' // 新增
   }
 }
 
@@ -27,14 +24,6 @@ const mutations = {
   },
   SET_AVATAR: (state, avatar) => {
     state.avatar = avatar
-  },
-  // 新增
-  SET_BUTTONS: (state, buttons) => {
-    state.buttons = buttons
-  },
-  // 新增
-  SET_MENUS: (state, menus) => {
-    state.menus = menus
   }
 }
 
@@ -57,7 +46,7 @@ const actions = {
   // get user info
   getInfo({ commit, state }) {
     return new Promise((resolve, reject) => {
-      getInfo().then(response => {
+      getInfo(state.token).then(response => {
         const { data } = response
 
         if (!data) {
@@ -68,9 +57,6 @@ const actions = {
 
         commit('SET_NAME', name)
         commit('SET_AVATAR', avatar)
-
-        commit('SET_BUTTONS', data.buttons)
-        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,12 +53,13 @@
 </template>
 
 <script>
+import { validUsername } from '@/utils/validate'
 
 export default {
   name: 'Login',
   data() {
     const validateUsername = (rule, value, callback) => {
-      if (value.length < 4) {
+      if (!validUsername(value)) {
         callback(new Error('Please enter the correct user name'))
       } else {
         callback()
@@ -141,8 +129,8 @@ export default {
 /* 修复input 背景不协调 和光标变色 */
 /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 
-$bg: #283443;
+$bg:#283443;
-$light_gray: #fff;
+$light_gray:#fff;
 $cursor: #fff;
 
 @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
@@ -185,9 +173,9 @@ $cursor: #fff;
 </style>
 
 <style lang="scss" scoped>
-$bg: #2d3a4b;
+$bg:#2d3a4b;
-$dark_gray: #889aa4;
+$dark_gray:#889aa4;
-$light_gray: #eee;
+$light_gray:#eee;
 
 .login-container {
   min-height: 100%;

src/views/system/sysRole/list.vue

@@ -6,87 +6,96 @@
         <el-row>
           <el-col :span="24">
             <el-form-item label="角色名称">
-              <el-input v-model="searchObj.roleName" placeholder="角色名称" style="width: 100%" />
+              <el-input
+                style="width: 100%"
+                v-model="searchObj.roleName"
+                placeholder="角色名称"
+              ></el-input>
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row style="display:flex">
+        <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-plus"
+            icon="el-icon-search"
             size="mini"
-            type="success"
+            :loading="loading"
-            @click="add"
+            @click="fetchData()"
-          >添 加
+            >搜索</el-button
-          </el-button>
+          >
-          <el-button class="btn-add" size="mini" @click="batchRemove()">批量删除</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetData"
-          <!--          </div>-->
+            >重置</el-button
+          >
+          <el-button type="success" icon="el-icon-plus" size="mini" @click="add"
+            >添 加</el-button
+          >
+          <el-button class="btn-add" 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"
+            @click="edit(scope.row.id)"
+            title="修改"
+          />
+          <el-button
+            type="danger"
             icon="el-icon-delete"
             size="mini"
-            title="删除"
-            type="danger"
             @click="removeDataById(scope.row.id)"
+            title="删除"
           />
-          <el-button
-            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,146 +104,151 @@
         </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>
+          @click="dialogVisible = false"
+          size="small"
+          icon="el-icon-refresh-right"
+          >取 消</el-button
+        >
+        <el-button
+          type="primary"
+          icon="el-icon-check"
+          @click="saveOrUpdate()"
+          size="small"
+          >确 定</el-button
+        >
       </span>
     </el-dialog>
-
   </div>
 </template>
-
 <script>
-// 引入定义接口js文件
+import api from "@/api/system/sysRole";
-import api from '@/api/system/sysRole'
-
 export default {
-  // vue代码结构
+  // 定义数据模型
-  // 初始值
+  // 定义数据模型
+  // 定义数据模型
   data() {
     return {
-      list: [], // 角色列表
+      list: [], // 列表
-      page: 1, // 当前页
-      limit: 10, // 每页显示记录数
       total: 0, // 总记录数
-      searchObj: {}, // 条件对象
+      page: 1, // 页码
-
+      limit: 3, // 每页记录数
-      selections: [], // 多个复选框值
+      searchObj: {}, // 查询条件
-      sysRole: {}, // 封装表单角色数据
+      sysRole: {}, //封装表单角色数据
-      dialogVisible: false// 是否弹框
+      multipleSelection: [], // 批量删除选中的记录列表
-    }
+      dialogVisible: false,
+    };
   },
-  created() { // 渲染之前执行
+  // 页面渲染成功后获取数据
-    this.fetchData()
+  created() {
+    this.fetchData();
   },
-  methods: { // 操作方法
+  // 定义方法
-    // 跳转分配菜单页面
+  methods: {
-    showAssignAuth(row) {
+    edit(id) {
-      this.$router.push('/system/assignAuth?id=' + row.id + '&roleName=' + row.roleName)
+      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("请选择要删除的记录！");
-        this.$message.warning('请选择要删除的记录！')
+        return;
-        return
       }
-      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
+      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
-        confirmButtonText: '确定',
+        confirmButtonText: "确定",
-        cancelButtonText: '取消',
+        cancelButtonText: "取消",
-        type: 'warning'
+        type: "warning",
-      }).then(() => {
-        // [1,2,3]
-        var idList = []
-        // 选择复选框数据在数组里面 this.selections
-        this.selections.forEach(item => {
-          var id = item.id
-          idList.push(id)
-        })
-        return api.batchRemove(idList)
-      }).then(response => {
-        this.$message.success(response.message)
-        this.fetchData()
       })
-    },
+        .then(() => {
-    // 点击修改，弹出框，根据id查询数据显示
+          // 点击确定，远程调用ajax
-    edit(id) {
+          // 遍历selection，将id取出放入id列表
-      // 弹出框
+          var idList = [];
-      this.dialogVisible = true
+          this.multipleSelection.forEach((item) => {
-      // 根据id查询
+            idList.push(item.id);
-      this.fetchDataById(id)
+          });
-    },
+          // 调用api
-    // 根据id查询
+          return api.batchRemove(idList);
-    fetchDataById(id) {
-      api.getById(id)
-        .then(response => {
-          this.sysRole = response.data
         })
+        .then((response) => {
+          this.fetchData();
+          this.$message.success(response.message);
+        });
     },
-    // 点击添加弹出框
+  },
-    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 || '删除成功')
-      })
-    }
-  }
-}
 </script>

vue.config.js

@@ -96,34 +96,34 @@ module.exports = {
             .plugin('ScriptExtHtmlWebpackPlugin')
             .after('html')
             .use('script-ext-html-webpack-plugin', [{
-              // `runtime` must same as runtimeChunk name. default is `runtime`
+            // `runtime` must same as runtimeChunk name. default is `runtime`
               inline: /runtime\..*\.js$/
             }])
             .end()
           config
             .optimization.splitChunks({
-            chunks: 'all',
+              chunks: 'all',
-            cacheGroups: {
+              cacheGroups: {
-              libs: {
+                libs: {
-                name: 'chunk-libs',
+                  name: 'chunk-libs',
-                test: /[\\/]node_modules[\\/]/,
+                  test: /[\\/]node_modules[\\/]/,
-                priority: 10,
+                  priority: 10,
-                chunks: 'initial' // only package third parties that are initially dependent
+                  chunks: 'initial' // only package third parties that are initially dependent
-              },
+                },
-              elementUI: {
+                elementUI: {
-                name: 'chunk-elementUI', // split elementUI into a single package
+                  name: 'chunk-elementUI', // split elementUI into a single package
-                priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-                test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
+                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
-              },
+                },
-              commons: {
+                commons: {
-                name: 'chunk-commons',
+                  name: 'chunk-commons',
-                test: resolve('src/components'), // can customize your rules
+                  test: resolve('src/components'), // can customize your rules
-                minChunks: 3, //  minimum common number
+                  minChunks: 3, //  minimum common number
-                priority: 5,
+                  priority: 5,
-                reuseExistingChunk: true
+                  reuseExistingChunk: true
+                }
               }
-            }
+            })
-          })
           // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
           config.optimization.runtimeChunk('single')
         }