云尚办公前端

2023-03-06 22:25:03 +08:00
parent cc9c89ea11
commit 78c9e451b4
11 changed files with 396 additions and 375 deletions
--- a/package.json
+++ b/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",
--- a/src/api/system/sysRole.js
+++ b/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
-    })
-  }
 }
--- a/src/layout/components/Sidebar/index.vue
+++ b/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.concat(global.antRouter)
+      return this.$router.options.routes
    },
    activeMenu() {
      const route = this.$route
--- a/src/main.js
+++ b/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

--- a/src/permission.js
+++ b/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/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) // 获取组件的方法
+import NProgress from 'nprogress' // progress bar
+import 'nprogress/nprogress.css' // progress bar style
+import { getToken } from '@/utils/auth' // get token from cookie
+import getPageTitle from '@/utils/get-page-title'

 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')// 请求获取用户信息
-          if (store.getters.menus.length < 1) {
-            global.antRouter = []
+          await store.dispatch('user/getInfo')
+
          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
-}
+})
--- a/src/router/index.js
+++ b/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({
--- a/src/store/getters.js
+++ b/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,
-  // 新增
-  buttons: state => state.user.buttons,
-  menus: state => state.user.menus
+  name: state => state.user.name
 }
 export default getters
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -1,15 +1,12 @@
-import { getInfo, login, logout } from '@/api/user'
-import { getToken, removeToken, setToken } from '@/utils/auth'
+import { login, logout, getInfo } from '@/api/user'
+import { getToken, setToken, removeToken } from '@/utils/auth'
 import { resetRouter } from '@/router'

 const getDefaultState = () => {
  return {
    token: getToken(),
    name: '',
-    avatar: '',
-
-    buttons: [], // 新增
-    menus: '' // 新增
+    avatar: ''
  }
 }

@@ -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)
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,13 +1,6 @@
 <template>
  <div class="login-container">
-    <el-form
-      ref="loginForm"
-      :model="loginForm"
-      :rules="loginRules"
-      auto-complete="on"
-      class="login-form"
-      label-position="left"
-    >
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" 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
-        :loading="loading"
-        style="width:100%;margin-bottom:30px;"
-        type="primary"
-        @click.native.prevent="handleLogin"
-      >Login
-      </el-button>
+      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @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;
-$light_gray: #fff;
+$bg:#283443;
+$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;
-$dark_gray: #889aa4;
-$light_gray: #eee;
+$bg:#2d3a4b;
+$dark_gray:#889aa4;
+$light_gray:#eee;

 .login-container {
  min-height: 100%;
--- a/src/views/system/sysRole/list.vue
+++ b/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-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-row style="display: flex">
          <el-button
-            :disabled="$hasBP('bnt.sysRole.add') === false"
-            icon="el-icon-plus"
+            type="primary"
+            icon="el-icon-search"
            size="mini"
-            type="success"
-            @click="add"
-          >添 加
-          </el-button>
-          <el-button class="btn-add" size="mini" @click="batchRemove()">批量删除</el-button>
-          <!--          </div>-->
+            :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" @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
-        align="center"
-        label="序号"
-        width="70"
-      >
+      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

-      <el-table-column label="角色名称" prop="roleName" />
-      <el-table-column label="角色编码" prop="roleCode" />
-      <el-table-column label="创建时间" prop="createTime" width="160" />
-      <el-table-column align="center" label="操作" width="200">
+      <el-table-column prop="roleName" label="角色名称" />
+      <el-table-column prop="roleCode" label="角色编码" />
+      <el-table-column prop="createTime" label="创建时间" width="160" />
+      <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-form ref="dataForm" :model="sysRole" label-width="150px" size="small" style="padding-right: 40px;">
+    <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-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 icon="el-icon-check" size="small" type="primary" @click="saveOrUpdate()">确 定</el-button>
+        <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: [], // 角色列表
-      page: 1, // 当前页
-      limit: 10, // 每页显示记录数
+      list: [], // 列表
      total: 0, // 总记录数
-      searchObj: {}, // 条件对象
+      page: 1, // 页码
+      limit: 3, // 每页记录数
+      searchObj: {}, // 查询条件
+      sysRole: {}, //封装表单角色数据
+      multipleSelection: [], // 批量删除选中的记录列表
+      dialogVisible: false,
+    };
+  },
+  // 页面渲染成功后获取数据
+  created() {
+    this.fetchData();
+  },
+  // 定义方法
+  methods: {
+    edit(id) {
+      this.dialogVisible = true;
+      this.fetchDataById(id);
+    },

-      selections: [], // 多个复选框值
-      sysRole: {}, // 封装表单角色数据
-      dialogVisible: false// 是否弹框
+    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();
      }
    },
-  created() { // 渲染之前执行
-    this.fetchData()
+
+    // 新增
+    saveData() {
+      api.save(this.sysRole).then((response) => {
+        this.$message.success(response.message || "操作成功");
+        this.dialogVisible = false;
+        this.fetchData(this.page);
+      });
    },
-  methods: { // 操作方法
-    // 跳转分配菜单页面
-    showAssignAuth(row) {
-      this.$router.push('/system/assignAuth?id=' + row.id + '&roleName=' + row.roleName)
+    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(this.selections)
+      console.log(selection);
+      this.multipleSelection = selection;
    },
    // 批量删除
    batchRemove() {
-      // 判断
-      if (this.selections.length === 0) {
-        this.$message.warning('请选择要删除的记录！')
-        return
+      if (this.multipleSelection.length === 0) {
+        this.$message.warning("请选择要删除的记录！");
+        return;
      }
-      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        // [1,2,3]
-        var idList = []
-        // 选择复选框数据在数组里面 this.selections
-        this.selections.forEach(item => {
-          var id = item.id
-          idList.push(id)
+      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
      })
-        return api.batchRemove(idList)
-      }).then(response => {
-        this.$message.success(response.message)
-        this.fetchData()
+        .then(() => {
+          // 点击确定，远程调用ajax
+          // 遍历selection，将id取出放入id列表
+          var idList = [];
+          this.multipleSelection.forEach((item) => {
+            idList.push(item.id);
+          });
+          // 调用api
+          return api.batchRemove(idList);
        })
+        .then((response) => {
+          this.fetchData();
+          this.$message.success(response.message);
+        });
    },
-    // 点击修改，弹出框，根据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 || '删除成功')
-      })
-    }
-  }
-}
+};
 </script>