@@ -8,6 +8,15 @@
 | 
			
		||||
 | 
			
		||||
目前版本为 `v4.0+` 基于 `vue-cli` 进行构建,若你想使用旧版本,可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0),它不依赖 `vue-cli`。
 | 
			
		||||
 | 
			
		||||
<p align="center">
 | 
			
		||||
  <b>SPONSORED BY</b>
 | 
			
		||||
</p>
 | 
			
		||||
<p align="center">
 | 
			
		||||
   <a href="https://finclip.com?from=vue_element" title="FinClip" target="_blank">
 | 
			
		||||
      <img height="200px" src="https://gitee.com/panjiachen/gitee-cdn/raw/master/vue%E8%B5%9E%E5%8A%A9.png" title="FinClip">
 | 
			
		||||
   </a>
 | 
			
		||||
</p>
 | 
			
		||||
 | 
			
		||||
## Extra
 | 
			
		||||
 | 
			
		||||
如果你想要根据用户角色来动态生成侧边栏和 router,你可以使用该分支[permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)
 | 
			
		||||
 
 | 
			
		||||
@@ -9,6 +9,15 @@ English | [简体中文](./README-zh.md)
 | 
			
		||||
 | 
			
		||||
**The current version is `v4.0+` build on `vue-cli`. If you want to use the old version , you can switch branch to [tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0), it does not rely on `vue-cli`**
 | 
			
		||||
 | 
			
		||||
<p align="center">
 | 
			
		||||
  <b>SPONSORED BY</b>
 | 
			
		||||
</p>
 | 
			
		||||
<p align="center">
 | 
			
		||||
   <a href="https://finclip.com?from=vue_element" title="FinClip" target="_blank">
 | 
			
		||||
      <img height="200px" src="https://gitee.com/panjiachen/gitee-cdn/raw/master/vue%E8%B5%9E%E5%8A%A9.png" title="FinClip">
 | 
			
		||||
   </a>
 | 
			
		||||
</p>
 | 
			
		||||
 | 
			
		||||
## Build Setup
 | 
			
		||||
 | 
			
		||||
```bash
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										116
									
								
								src/api/system/sysRole.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										116
									
								
								src/api/system/sysRole.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,116 @@
 | 
			
		||||
/*
 | 
			
		||||
角色管理相关的API请求函数
 | 
			
		||||
*/
 | 
			
		||||
import request from '@/utils/request'
 | 
			
		||||
 | 
			
		||||
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`,
 | 
			
		||||
      method: 'post',
 | 
			
		||||
      data: role
 | 
			
		||||
    })
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
  /**
 | 
			
		||||
   * 回显要修改的id信息
 | 
			
		||||
   *
 | 
			
		||||
   * @param id
 | 
			
		||||
   * @returns {*}
 | 
			
		||||
   */
 | 
			
		||||
  getById(id) {
 | 
			
		||||
    return request({
 | 
			
		||||
      url: `${api_name}/get/${id}`,
 | 
			
		||||
      method: 'get'
 | 
			
		||||
    })
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
  /** 修改
 | 
			
		||||
   *
 | 
			
		||||
   * @param role
 | 
			
		||||
   * @returns {*}
 | 
			
		||||
   */
 | 
			
		||||
  updateById(role) {
 | 
			
		||||
    return request({
 | 
			
		||||
      url: `${api_name}/update`,
 | 
			
		||||
      method: 'put',
 | 
			
		||||
      data: role
 | 
			
		||||
    })
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
  /**
 | 
			
		||||
   * 批量删除
 | 
			
		||||
   *
 | 
			
		||||
   * @param idList
 | 
			
		||||
   * @returns {*}
 | 
			
		||||
   */
 | 
			
		||||
  batchRemove(idList) {
 | 
			
		||||
    return request({
 | 
			
		||||
      url: `${api_name}/batchRemove`,
 | 
			
		||||
      method: `delete`,
 | 
			
		||||
      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
 | 
			
		||||
    })
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										49
									
								
								src/api/system/sysUser.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										49
									
								
								src/api/system/sysUser.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,49 @@
 | 
			
		||||
import request from '@/utils/request'
 | 
			
		||||
 | 
			
		||||
const api_name = '/admin/system/sysUser'
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
 | 
			
		||||
  getPageList(page, limit, searchObj) {
 | 
			
		||||
    return request({
 | 
			
		||||
      url: `${api_name}/${page}/${limit}`,
 | 
			
		||||
      method: 'get',
 | 
			
		||||
      params: searchObj // url查询字符串或表单键值对
 | 
			
		||||
    })
 | 
			
		||||
  },
 | 
			
		||||
  getById(id) {
 | 
			
		||||
    return request({
 | 
			
		||||
      url: `${api_name}/get/${id}`,
 | 
			
		||||
      method: 'get'
 | 
			
		||||
    })
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
  save(role) {
 | 
			
		||||
    return request({
 | 
			
		||||
      url: `${api_name}/save`,
 | 
			
		||||
      method: 'post',
 | 
			
		||||
      data: role
 | 
			
		||||
    })
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
  updateById(role) {
 | 
			
		||||
    return request({
 | 
			
		||||
      url: `${api_name}/update`,
 | 
			
		||||
      method: 'put',
 | 
			
		||||
      data: role
 | 
			
		||||
    })
 | 
			
		||||
  },
 | 
			
		||||
  removeById(id) {
 | 
			
		||||
    return request({
 | 
			
		||||
      url: `${api_name}/remove/${id}`,
 | 
			
		||||
      method: 'delete'
 | 
			
		||||
    })
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
  updateStatus(id, status) {
 | 
			
		||||
    return request({
 | 
			
		||||
      url: `${api_name}/updateStatus/${id}/${status}`,
 | 
			
		||||
      method: 'get'
 | 
			
		||||
    })
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
@@ -2,7 +2,7 @@ import request from '@/utils/request'
 | 
			
		||||
 | 
			
		||||
export function login(data) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/vue-admin-template/user/login',
 | 
			
		||||
    url: '/admin/system/index/login',
 | 
			
		||||
    method: 'post',
 | 
			
		||||
    data
 | 
			
		||||
  })
 | 
			
		||||
@@ -10,15 +10,15 @@ export function login(data) {
 | 
			
		||||
 | 
			
		||||
export function getInfo(token) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/vue-admin-template/user/info',
 | 
			
		||||
    url: '/admin/system/index/info',
 | 
			
		||||
    method: 'get',
 | 
			
		||||
    params: { token }
 | 
			
		||||
    params: {token}
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function logout() {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/vue-admin-template/user/logout',
 | 
			
		||||
    url: '/admin/system/index/logout',
 | 
			
		||||
    method: 'post'
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -1,11 +1,10 @@
 | 
			
		||||
import Vue from 'vue'
 | 
			
		||||
import Router from 'vue-router'
 | 
			
		||||
 | 
			
		||||
Vue.use(Router)
 | 
			
		||||
 | 
			
		||||
/* Layout */
 | 
			
		||||
import Layout from '@/layout'
 | 
			
		||||
 | 
			
		||||
Vue.use(Router)
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
 * 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
 | 
			
		||||
@@ -54,6 +53,34 @@ export const constantRoutes = [
 | 
			
		||||
      meta: { title: 'Dashboard', icon: 'dashboard' }
 | 
			
		||||
    }]
 | 
			
		||||
  },
 | 
			
		||||
  {
 | 
			
		||||
    path: '/system',
 | 
			
		||||
    component: Layout,
 | 
			
		||||
    meta: {
 | 
			
		||||
      title: '系统管理',
 | 
			
		||||
      icon: 'el-icon-s-tools'
 | 
			
		||||
    },
 | 
			
		||||
    alwaysShow: true,
 | 
			
		||||
    children: [
 | 
			
		||||
      {
 | 
			
		||||
        name: 'sysUser',
 | 
			
		||||
        path: 'sysUser',
 | 
			
		||||
        component: () => import('@/views/system/sysUser/list'),
 | 
			
		||||
        meta: {
 | 
			
		||||
          title: '用户管理',
 | 
			
		||||
          icon: 'el-icon-s-custom'
 | 
			
		||||
        }
 | 
			
		||||
      },
 | 
			
		||||
      {
 | 
			
		||||
        path: 'sysRole',
 | 
			
		||||
        component: () => import('@/views/system/sysRole/list'),
 | 
			
		||||
        meta: {
 | 
			
		||||
          title: '角色管理',
 | 
			
		||||
          icon: 'el-icon-s-help'
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    ]
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
  {
 | 
			
		||||
    path: '/example',
 | 
			
		||||
 
 | 
			
		||||
@@ -46,7 +46,7 @@ service.interceptors.response.use(
 | 
			
		||||
    const res = response.data
 | 
			
		||||
 | 
			
		||||
    // if the custom code is not 20000, it is judged as an error.
 | 
			
		||||
    if (res.code !== 20000) {
 | 
			
		||||
    if (res.code !== 200) {
 | 
			
		||||
      Message({
 | 
			
		||||
        message: res.message || 'Error',
 | 
			
		||||
        type: 'error',
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										230
									
								
								src/views/system/sysRole/list.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										230
									
								
								src/views/system/sysRole/list.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,230 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="app-container">
 | 
			
		||||
 | 
			
		||||
    <!--查询表单-->
 | 
			
		||||
    <div class="search-div">
 | 
			
		||||
      <el-form label-width="70px" size="small">
 | 
			
		||||
        <el-row>
 | 
			
		||||
          <el-col :span="24">
 | 
			
		||||
            <el-form-item label="角色名称">
 | 
			
		||||
              <el-input v-model="searchObj.roleName" placeholder="角色名称" style="width: 100%" />
 | 
			
		||||
            </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" style="padding-left: 15px">-->
 | 
			
		||||
          <el-button icon="el-icon-plus" size="mini" type="success" @click="add">添 加</el-button>
 | 
			
		||||
          <el-button class="btn-add" size="mini" @click="batchRemove()">批量删除</el-button>
 | 
			
		||||
          <!--          </div>-->
 | 
			
		||||
        </el-row>
 | 
			
		||||
      </el-form>
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
    <!-- 表格 -->
 | 
			
		||||
    <el-table
 | 
			
		||||
      v-loading="listLoading"
 | 
			
		||||
      :data="list"
 | 
			
		||||
      border
 | 
			
		||||
      stripe
 | 
			
		||||
      style="width: 100%;margin-top: 10px;"
 | 
			
		||||
      @selection-change="handleSelectionChange"
 | 
			
		||||
    >
 | 
			
		||||
 | 
			
		||||
      <el-table-column type="selection" />
 | 
			
		||||
 | 
			
		||||
      <el-table-column
 | 
			
		||||
        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 label="角色编码" prop="roleCode" />
 | 
			
		||||
      <el-table-column label="创建时间" prop="createTime" width="160" />
 | 
			
		||||
      <el-table-column align="center" label="操作" width="200">
 | 
			
		||||
        <template slot-scope="scope">
 | 
			
		||||
          <el-button icon="el-icon-edit" size="mini" title="修改" type="primary" @click="edit(scope.row.id)" />
 | 
			
		||||
          <el-button
 | 
			
		||||
            icon="el-icon-delete"
 | 
			
		||||
            size="mini"
 | 
			
		||||
            title="删除"
 | 
			
		||||
            type="danger"
 | 
			
		||||
            @click="removeDataById(scope.row.id)"
 | 
			
		||||
          />
 | 
			
		||||
        </template>
 | 
			
		||||
      </el-table-column>
 | 
			
		||||
    </el-table>
 | 
			
		||||
 | 
			
		||||
    <!-- 分页组件 -->
 | 
			
		||||
    <el-pagination
 | 
			
		||||
      :current-page="page"
 | 
			
		||||
      :page-size="limit"
 | 
			
		||||
      :total="total"
 | 
			
		||||
      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-form-item label="角色名称">
 | 
			
		||||
          <el-input v-model="sysRole.roleName" />
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
        <el-form-item label="角色编码">
 | 
			
		||||
          <el-input v-model="sysRole.roleCode" />
 | 
			
		||||
        </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>
 | 
			
		||||
      </span>
 | 
			
		||||
    </el-dialog>
 | 
			
		||||
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import api from '@/api/system/sysRole'
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  // 定义数据模型
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      list: [], // 列表
 | 
			
		||||
      total: 0, // 总记录数
 | 
			
		||||
      page: 1, // 页码
 | 
			
		||||
      limit: 10, // 每页记录数
 | 
			
		||||
      searchObj: {}, // 查询条件
 | 
			
		||||
      multipleSelection: [], // 批量删除选中的记录列表
 | 
			
		||||
      dialogVisible: false, // 是否弹框
 | 
			
		||||
      sysRole: {}, // 封装表单用户数据
 | 
			
		||||
      saveBtnDisabled: false
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  // 页面渲染成功后获取数据
 | 
			
		||||
  created() {
 | 
			
		||||
    this.fetchData()
 | 
			
		||||
  },
 | 
			
		||||
  // 定义方法
 | 
			
		||||
  methods: {
 | 
			
		||||
 | 
			
		||||
    // 当多选选项发生变化的时候调用
 | 
			
		||||
    handleSelectionChange(selection) {
 | 
			
		||||
      console.log(selection)
 | 
			
		||||
      this.multipleSelection = selection
 | 
			
		||||
    },
 | 
			
		||||
    // 批量删除
 | 
			
		||||
    batchRemove() {
 | 
			
		||||
      if (this.multipleSelection.length === 0) {
 | 
			
		||||
        this.$message.warning('请选择要删除的记录!')
 | 
			
		||||
        return
 | 
			
		||||
      }
 | 
			
		||||
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
 | 
			
		||||
        confirmButtonText: '确定',
 | 
			
		||||
        cancelButtonText: '取消',
 | 
			
		||||
        type: 'warning'
 | 
			
		||||
      }).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)
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    fetchDataById(id) {
 | 
			
		||||
      api.getById(id).then(response => {
 | 
			
		||||
        this.sysRole = response.data
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    // 点击添加弹框
 | 
			
		||||
    add() {
 | 
			
		||||
      this.dialogVisible = true
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    saveOrUpdate() {
 | 
			
		||||
      this.saveBtnDisabled = true // 防止表单重复提交
 | 
			
		||||
      // 根据id判断
 | 
			
		||||
      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
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    // 根据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 || '删除成功')
 | 
			
		||||
      })
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
							
								
								
									
										370
									
								
								src/views/system/sysUser/list.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										370
									
								
								src/views/system/sysUser/list.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,370 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="app-container">
 | 
			
		||||
 | 
			
		||||
    <div class="search-div">
 | 
			
		||||
      <el-form label-width="70px" size="small">
 | 
			
		||||
        <el-row>
 | 
			
		||||
          <el-col :span="8">
 | 
			
		||||
            <el-form-item label="关 键 字">
 | 
			
		||||
              <el-input v-model="searchObj.keyword" placeholder="用户名/姓名/手机号码" style="width: 95%" />
 | 
			
		||||
            </el-form-item>
 | 
			
		||||
          </el-col>
 | 
			
		||||
          <el-col :span="8">
 | 
			
		||||
            <el-form-item label="操作时间">
 | 
			
		||||
              <el-date-picker
 | 
			
		||||
                v-model="createTimes"
 | 
			
		||||
                end-placeholder="结束时间"
 | 
			
		||||
                range-separator="至"
 | 
			
		||||
                start-placeholder="开始时间"
 | 
			
		||||
                style="margin-right: 10px;width: 100%;"
 | 
			
		||||
                type="datetimerange"
 | 
			
		||||
                value-format="yyyy-MM-dd HH:mm:ss"
 | 
			
		||||
              />
 | 
			
		||||
            </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>
 | 
			
		||||
        </el-row>
 | 
			
		||||
      </el-form>
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
    <!-- 工具条 -->
 | 
			
		||||
    <div class="tools-div">
 | 
			
		||||
      <el-button icon="el-icon-plus" size="mini" type="success" @click="add">添 加</el-button>
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
    <!-- 列表 -->
 | 
			
		||||
    <el-table
 | 
			
		||||
      v-loading="listLoading"
 | 
			
		||||
      :data="list"
 | 
			
		||||
      border
 | 
			
		||||
      stripe
 | 
			
		||||
      style="width: 100%;margin-top: 10px;"
 | 
			
		||||
    >
 | 
			
		||||
 | 
			
		||||
      <el-table-column
 | 
			
		||||
        align="center"
 | 
			
		||||
        label="序号"
 | 
			
		||||
        width="70"
 | 
			
		||||
      >
 | 
			
		||||
        <template slot-scope="scope">
 | 
			
		||||
          {{ (page - 1) * limit + scope.$index + 1 }}
 | 
			
		||||
        </template>
 | 
			
		||||
      </el-table-column>
 | 
			
		||||
 | 
			
		||||
      <el-table-column label="用户名" prop="username" width="100" />
 | 
			
		||||
      <el-table-column label="姓名" prop="name" width="70" />
 | 
			
		||||
      <el-table-column label="手机" prop="phone" width="120" />
 | 
			
		||||
      <el-table-column label="岗位" prop="postName" width="100" />
 | 
			
		||||
      <el-table-column label="部门" prop="deptName" width="100" />
 | 
			
		||||
      <el-table-column label="所属角色" width="130">
 | 
			
		||||
        <template slot-scope="scope">
 | 
			
		||||
          <span v-for="item in scope.row.roleList" :key="item.id" style="margin-right: 10px;">{{ item.roleName }}</span>
 | 
			
		||||
        </template>
 | 
			
		||||
      </el-table-column>
 | 
			
		||||
      <el-table-column label="状态" width="80">
 | 
			
		||||
        <template slot-scope="scope">
 | 
			
		||||
          <el-switch
 | 
			
		||||
            v-model="scope.row.status === 1"
 | 
			
		||||
            @change="switchStatus(scope.row)"
 | 
			
		||||
          />
 | 
			
		||||
        </template>
 | 
			
		||||
      </el-table-column>
 | 
			
		||||
      <el-table-column label="创建时间" prop="createTime" width="160" />
 | 
			
		||||
 | 
			
		||||
      <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
 | 
			
		||||
            icon="el-icon-delete"
 | 
			
		||||
            size="mini"
 | 
			
		||||
            title="删除"
 | 
			
		||||
            type="danger"
 | 
			
		||||
            @click="removeDataById(scope.row.id)"
 | 
			
		||||
          />
 | 
			
		||||
          <el-button
 | 
			
		||||
            icon="el-icon-baseball"
 | 
			
		||||
            size="mini"
 | 
			
		||||
            title="分配角色"
 | 
			
		||||
            type="warning"
 | 
			
		||||
            @click="showAssignRole(scope.row)"
 | 
			
		||||
          />
 | 
			
		||||
        </template>
 | 
			
		||||
      </el-table-column>
 | 
			
		||||
    </el-table>
 | 
			
		||||
 | 
			
		||||
    <!-- 分页组件 -->
 | 
			
		||||
    <el-pagination
 | 
			
		||||
      :current-page="page"
 | 
			
		||||
      :page-size="limit"
 | 
			
		||||
      :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
 | 
			
		||||
      :total="total"
 | 
			
		||||
      layout="sizes, prev, pager, next, jumper, ->, total, slot"
 | 
			
		||||
      style="padding: 30px 0; text-align: center;"
 | 
			
		||||
      @current-change="fetchData"
 | 
			
		||||
      @size-change="changeSize"
 | 
			
		||||
    />
 | 
			
		||||
 | 
			
		||||
    <el-dialog :visible.sync="dialogVisible" title="添加/修改" width="40%">
 | 
			
		||||
      <el-form ref="dataForm" :model="sysUser" label-width="100px" size="small" style="padding-right: 40px;">
 | 
			
		||||
        <el-form-item label="用户名" prop="username">
 | 
			
		||||
          <el-input v-model="sysUser.username" />
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
        <el-form-item v-if="!sysUser.id" label="密码" prop="password">
 | 
			
		||||
          <el-input v-model="sysUser.password" type="password" />
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
        <el-form-item label="姓名" prop="name">
 | 
			
		||||
          <el-input v-model="sysUser.name" />
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
        <el-form-item label="手机" prop="phone">
 | 
			
		||||
          <el-input v-model="sysUser.phone" />
 | 
			
		||||
        </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>
 | 
			
		||||
      </span>
 | 
			
		||||
    </el-dialog>
 | 
			
		||||
 | 
			
		||||
    <el-dialog :visible.sync="dialogRoleVisible" title="分配角色">
 | 
			
		||||
      <el-form label-width="80px">
 | 
			
		||||
        <el-form-item label="用户名">
 | 
			
		||||
          <el-input :value="sysUser.username" disabled />
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
 | 
			
		||||
        <el-form-item label="角色列表">
 | 
			
		||||
          <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选
 | 
			
		||||
          </el-checkbox>
 | 
			
		||||
          <div style="margin: 15px 0;" />
 | 
			
		||||
          <el-checkbox-group v-model="userRoleIds" @change="handleCheckedChange">
 | 
			
		||||
            <el-checkbox v-for="role in allRoles" :key="role.id" :label="role.id">{{ role.roleName }}</el-checkbox>
 | 
			
		||||
          </el-checkbox-group>
 | 
			
		||||
        </el-form-item>
 | 
			
		||||
      </el-form>
 | 
			
		||||
      <div slot="footer">
 | 
			
		||||
        <el-button size="small" type="primary" @click="assignRole">保存</el-button>
 | 
			
		||||
        <el-button size="small" @click="dialogRoleVisible = false">取消</el-button>
 | 
			
		||||
      </div>
 | 
			
		||||
    </el-dialog>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import api from '@/api/system/sysUser'
 | 
			
		||||
import roleApi from '@/api/system/sysRole'
 | 
			
		||||
 | 
			
		||||
const defaultForm = {
 | 
			
		||||
  id: '',
 | 
			
		||||
  username: '',
 | 
			
		||||
  password: '',
 | 
			
		||||
  name: '',
 | 
			
		||||
  phone: '',
 | 
			
		||||
  status: 1
 | 
			
		||||
}
 | 
			
		||||
export default {
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      listLoading: true, // 数据是否正在加载
 | 
			
		||||
      list: null, // banner列表
 | 
			
		||||
      total: 0, // 数据库中的总记录数
 | 
			
		||||
      page: 1, // 默认页码
 | 
			
		||||
      limit: 10, // 每页记录数
 | 
			
		||||
      searchObj: {}, // 查询表单对象
 | 
			
		||||
 | 
			
		||||
      createTimes: [],
 | 
			
		||||
 | 
			
		||||
      dialogVisible: false,
 | 
			
		||||
      sysUser: defaultForm,
 | 
			
		||||
      saveBtnDisabled: false,
 | 
			
		||||
 | 
			
		||||
      dialogRoleVisible: false,
 | 
			
		||||
      allRoles: [], // 所有角色列表
 | 
			
		||||
      userRoleIds: [], // 用户的角色ID的列表
 | 
			
		||||
      isIndeterminate: false, // 是否是不确定的
 | 
			
		||||
      checkAll: false // 是否全选
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
  // 生命周期函数:内存准备完毕,页面尚未渲染
 | 
			
		||||
  created() {
 | 
			
		||||
    console.log('list created......')
 | 
			
		||||
    this.fetchData()
 | 
			
		||||
 | 
			
		||||
    roleApi.findAll().then(response => {
 | 
			
		||||
      this.roleList = response.data
 | 
			
		||||
    })
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
  // 生命周期函数:内存准备完毕,页面渲染成功
 | 
			
		||||
  mounted() {
 | 
			
		||||
    console.log('list mounted......')
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
  methods: {
 | 
			
		||||
    // 当页码发生改变的时候
 | 
			
		||||
    changeSize(size) {
 | 
			
		||||
      console.log(size)
 | 
			
		||||
      this.limit = size
 | 
			
		||||
      this.fetchData(1)
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    // 加载banner列表数据
 | 
			
		||||
    fetchData(page = 1) {
 | 
			
		||||
      debugger
 | 
			
		||||
      this.page = page
 | 
			
		||||
      console.log('翻页。。。' + this.page)
 | 
			
		||||
 | 
			
		||||
      if (this.createTimes && this.createTimes.length === 2) {
 | 
			
		||||
        this.searchObj.createTimeBegin = this.createTimes[0]
 | 
			
		||||
        this.searchObj.createTimeEnd = this.createTimes[1]
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      api.getPageList(this.page, this.limit, this.searchObj).then(
 | 
			
		||||
        response => {
 | 
			
		||||
          // this.list = response.data.list
 | 
			
		||||
          this.list = response.data.records
 | 
			
		||||
          this.total = response.data.total
 | 
			
		||||
 | 
			
		||||
          // 数据加载并绑定成功
 | 
			
		||||
          this.listLoading = false
 | 
			
		||||
        }
 | 
			
		||||
      )
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    // 重置查询表单
 | 
			
		||||
    resetData() {
 | 
			
		||||
      console.log('重置查询表单')
 | 
			
		||||
      this.searchObj = {}
 | 
			
		||||
      this.createTimes = []
 | 
			
		||||
      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 || '删除成功')
 | 
			
		||||
      }).catch(() => {
 | 
			
		||||
        this.$message.info('取消删除')
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    // -------------
 | 
			
		||||
    add() {
 | 
			
		||||
      this.dialogVisible = true
 | 
			
		||||
      this.sysUser = Object.assign({}, defaultForm)
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    edit(id) {
 | 
			
		||||
      this.dialogVisible = true
 | 
			
		||||
      this.fetchDataById(id)
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    fetchDataById(id) {
 | 
			
		||||
      api.getById(id).then(response => {
 | 
			
		||||
        this.sysUser = response.data
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    saveOrUpdate() {
 | 
			
		||||
      this.$refs.dataForm.validate(valid => {
 | 
			
		||||
        if (valid) {
 | 
			
		||||
          this.saveBtnDisabled = true // 防止表单重复提交
 | 
			
		||||
          if (!this.sysUser.id) {
 | 
			
		||||
            this.saveData()
 | 
			
		||||
          } else {
 | 
			
		||||
            this.updateData()
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    // 新增
 | 
			
		||||
    saveData() {
 | 
			
		||||
      api.save(this.sysUser).then(response => {
 | 
			
		||||
        this.$message.success('操作成功')
 | 
			
		||||
        this.dialogVisible = false
 | 
			
		||||
        this.fetchData(this.page)
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    // 根据id更新记录
 | 
			
		||||
    updateData() {
 | 
			
		||||
      api.updateById(this.sysUser).then(response => {
 | 
			
		||||
        this.$message.success(response.message || '操作成功')
 | 
			
		||||
        this.dialogVisible = false
 | 
			
		||||
        this.fetchData(this.page)
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    showAssignRole(row) {
 | 
			
		||||
      this.sysUser = row
 | 
			
		||||
      this.dialogRoleVisible = true
 | 
			
		||||
      this.getRoles()
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    getRoles() {
 | 
			
		||||
      roleApi.getRoles(this.sysUser.id).then(response => {
 | 
			
		||||
        const { allRolesList, assginRoleList } = response.data
 | 
			
		||||
        this.allRoles = allRolesList
 | 
			
		||||
        this.userRoleIds = assginRoleList.map(item => item.id)
 | 
			
		||||
        this.checkAll = allRolesList.length === assginRoleList.length
 | 
			
		||||
        this.isIndeterminate = assginRoleList.length > 0 && assginRoleList.length < allRolesList.length
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    /*
 | 
			
		||||
    全选勾选状态发生改变的监听
 | 
			
		||||
    */
 | 
			
		||||
    handleCheckAllChange(value) { // value 当前勾选状态true/false
 | 
			
		||||
      // 如果当前全选, userRoleIds就是所有角色id的数组, 否则是空数组
 | 
			
		||||
      this.userRoleIds = value ? this.allRoles.map(item => item.id) : []
 | 
			
		||||
      // 如果当前不是全选也不全不选时, 指定为false
 | 
			
		||||
      this.isIndeterminate = false
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    /*
 | 
			
		||||
    角色列表选中项发生改变的监听
 | 
			
		||||
    */
 | 
			
		||||
    handleCheckedChange(value) {
 | 
			
		||||
      const { userRoleIds, allRoles } = this
 | 
			
		||||
      this.checkAll = userRoleIds.length === allRoles.length && allRoles.length > 0
 | 
			
		||||
      this.isIndeterminate = userRoleIds.length > 0 && userRoleIds.length < allRoles.length
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    assignRole() {
 | 
			
		||||
      const assginRoleVo = {
 | 
			
		||||
        userId: this.sysUser.id,
 | 
			
		||||
        roleIdList: this.userRoleIds
 | 
			
		||||
      }
 | 
			
		||||
      roleApi.assignRoles(assginRoleVo).then(response => {
 | 
			
		||||
        this.$message.success(response.message || '分配角色成功')
 | 
			
		||||
        this.dialogRoleVisible = false
 | 
			
		||||
        this.fetchData(this.page)
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    switchStatus(row) {
 | 
			
		||||
      row.status = row.status === 1 ? 0 : 1
 | 
			
		||||
      api.updateStatus(row.id, row.status).then(response => {
 | 
			
		||||
        if (response.code) {
 | 
			
		||||
          this.$message.success(response.message || '操作成功')
 | 
			
		||||
          this.dialogVisible = false
 | 
			
		||||
          this.fetchData()
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
@@ -36,7 +36,16 @@ module.exports = {
 | 
			
		||||
      warnings: false,
 | 
			
		||||
      errors: true
 | 
			
		||||
    },
 | 
			
		||||
    before: require('./mock/mock-server.js')
 | 
			
		||||
    // before: require('./mock/mock-server.js')
 | 
			
		||||
    proxy: {
 | 
			
		||||
      '/dev-api': { // 匹配所有以 '/dev-api'开头的请求路径
 | 
			
		||||
        target: 'http://localhost:8800',
 | 
			
		||||
        changeOrigin: true, // 支持跨域
 | 
			
		||||
        pathRewrite: { // 重写路径: 去掉路径中开头的'/dev-api'
 | 
			
		||||
          '^/dev-api': ''
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  configureWebpack: {
 | 
			
		||||
    // provide the app's title in webpack's name field, so that
 | 
			
		||||
@@ -87,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',
 | 
			
		||||
              cacheGroups: {
 | 
			
		||||
                libs: {
 | 
			
		||||
                  name: 'chunk-libs',
 | 
			
		||||
                  test: /[\\/]node_modules[\\/]/,
 | 
			
		||||
                  priority: 10,
 | 
			
		||||
                  chunks: 'initial' // only package third parties that are initially dependent
 | 
			
		||||
                },
 | 
			
		||||
                elementUI: {
 | 
			
		||||
                  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
 | 
			
		||||
                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
 | 
			
		||||
                },
 | 
			
		||||
                commons: {
 | 
			
		||||
                  name: 'chunk-commons',
 | 
			
		||||
                  test: resolve('src/components'), // can customize your rules
 | 
			
		||||
                  minChunks: 3, //  minimum common number
 | 
			
		||||
                  priority: 5,
 | 
			
		||||
                  reuseExistingChunk: true
 | 
			
		||||
                }
 | 
			
		||||
            chunks: 'all',
 | 
			
		||||
            cacheGroups: {
 | 
			
		||||
              libs: {
 | 
			
		||||
                name: 'chunk-libs',
 | 
			
		||||
                test: /[\\/]node_modules[\\/]/,
 | 
			
		||||
                priority: 10,
 | 
			
		||||
                chunks: 'initial' // only package third parties that are initially dependent
 | 
			
		||||
              },
 | 
			
		||||
              elementUI: {
 | 
			
		||||
                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
 | 
			
		||||
                test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
 | 
			
		||||
              },
 | 
			
		||||
              commons: {
 | 
			
		||||
                name: 'chunk-commons',
 | 
			
		||||
                test: resolve('src/components'), // can customize your rules
 | 
			
		||||
                minChunks: 3, //  minimum common number
 | 
			
		||||
                priority: 5,
 | 
			
		||||
                reuseExistingChunk: true
 | 
			
		||||
              }
 | 
			
		||||
            })
 | 
			
		||||
            }
 | 
			
		||||
          })
 | 
			
		||||
          // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
 | 
			
		||||
          config.optimization.runtimeChunk('single')
 | 
			
		||||
        }
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user