08/26 20:03

src/api/table.js

@@ -3,13 +3,13 @@ import request from '@/utils/request'
 // 获取调剂课程选项
 export function getAllMajor (data) {
   return request({
-    headers:{
+    headers: {
       'Content-Type': 'application/x-www-form-urlencoded'
     },
     url: '/user/getCourses',
     method: 'POST',
     data,
-    
+
   })
 }
 
@@ -27,7 +27,7 @@ export function getBranches (data) {
   return request({
     url: '/user/getBranches',
     method: 'get',
-    params:data
+    params: data
   })
 }
 
@@ -43,7 +43,7 @@ export function getStudentList (data) {
 // 修改用户信息 /updateUser
 export function updateUser (data) {
   return request({
-    url: '/user/updateUser',
+    url: '/user/updateUserSub',
     method: 'post',
     data
   })

src/utils/request.js

@@ -1,53 +1,51 @@
 import axios from 'axios'
-import { MessageBox, Message,Loading } from 'element-ui'
+import { MessageBox, Message, Loading } from 'element-ui'
 import store from '@/store'
 // import { getToken } from '@/utils/auth'
 
 let loading        //定义loading变量
 
-function startLoading() {    //使用Element loading-start 方法
-    loading = Loading.service({
-        lock: true,
-        text: '加载中……',
-        background: 'rgba(0, 0, 0, 0.7)'
-    })
+function startLoading () {    //使用Element loading-start 方法
+  loading = Loading.service({
+    lock: true,
+    text: '加载中……',
+    background: 'rgba(0, 0, 0, 0.7)'
+  })
 }
-function endLoading() {    //使用Element loading-close 方法
-    loading.close()
+function endLoading () {    //使用Element loading-close 方法
+  loading.close()
 }
 //那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事儿就是将同一时刻的请求合并。
 //声明一个变量 needLoadingRequestCount，每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。
 //调用tryHideFullScreenLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount为 0 时，结束 loading。
 let needLoadingRequestCount = 0
-export function showFullScreenLoading() {
-    if (needLoadingRequestCount === 0) {
-        startLoading()
-    }
-    needLoadingRequestCount++
+export function showFullScreenLoading () {
+  if (needLoadingRequestCount === 0) {
+    startLoading()
+  }
+  needLoadingRequestCount++
 }
 
-export function tryHideFullScreenLoading() {
-    if (needLoadingRequestCount <= 0) return
-    needLoadingRequestCount--
-    if (needLoadingRequestCount === 0) {
-        endLoading()
-    }
+export function tryHideFullScreenLoading () {
+  if (needLoadingRequestCount <= 0) return
+  needLoadingRequestCount--
+  if (needLoadingRequestCount === 0) {
+    endLoading()
+  }
 }
 
 // create an axios instance
 const service = axios.create({
-  baseURL: '/api', // url = base url + request url
+  baseURL: '/user', // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
   timeout: 5000 // request timeout
 })
 
 // request interceptor
 service.interceptors.request.use(
-  
+
   config => {
-    // console.log(config);
     // do something before request is sent
-    console.log(config)
     // if (store.getters.token) {
     // let each request carry token
     // ['X-Token'] is a custom headers key
@@ -87,20 +85,20 @@ service.interceptors.response.use(
         duration: 5 * 1000
       })
 
-    //   // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
-    //   if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
-    //     // to re-login
-    //     MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
-    //       confirmButtonText: 'Re-Login',
-    //       cancelButtonText: 'Cancel',
-    //       type: 'warning'
-    //     }).then(() => {
-    //       store.dispatch('user/resetToken').then(() => {
-    //         location.reload()
-    //       })
-    //     })
-    //   }
-    //   return Promise.reject(new Error(res.message || 'Error'))
+      //   // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+      //   if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+      //     // to re-login
+      //     MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
+      //       confirmButtonText: 'Re-Login',
+      //       cancelButtonText: 'Cancel',
+      //       type: 'warning'
+      //     }).then(() => {
+      //       store.dispatch('user/resetToken').then(() => {
+      //         location.reload()
+      //       })
+      //     })
+      //   }
+      //   return Promise.reject(new Error(res.message || 'Error'))
     } else {
       tryHideFullScreenLoading()
       return res

src/views/dashboard/index.vue

@@ -2,113 +2,179 @@
   <div class="dashboard-container">
     <transition name="fade">
       <div class="left">
-        <el-form :inline="true" :model="sectionForm" class="sectionForm">
+        <el-form :inline="true"
+                 :model="sectionForm"
+                 class="sectionForm">
           <el-form-item>
-            <el-select v-model="sectionForm.section" placeholder="请选择分部" @change="chioseSection">
-              <el-option
-                v-for="(item,index) in brancheList"
-                :key="index"
-                :value="item.branchId"
-                :label="item.branchName"
-              ></el-option>
+            <el-select v-model="sectionForm.section"
+                       placeholder="请选择分部"
+                       @change="chioseSection">
+              <el-option v-for="(item,index) in brancheList"
+                         :key="index"
+                         :value="item.branchId"
+                         :label="item.branchName"></el-option>
             </el-select>
           </el-form-item>
         </el-form>
         <h2 v-if="MajorList.length > 0">所属乐团</h2>
         <ul>
           <!-- MajorList -->
-          <li
-            v-for="(item,index) in MajorList"
-            :key="index"
-            @click="chioseMajor(item.name,item.id,item.status)"
-          >{{ item.name }}</li>
+          <li v-for="(item,index) in MajorList"
+              :key="index"
+              @click="chioseMajor(item.name,item.id,item.status)">{{ item.name }}</li>
         </ul>
       </div>
     </transition>
     <div class="right">
       <!-- 顶部收索框 -->
-      <el-form :inline="true" class="topWrap" :model="topForm">
+      <el-form :inline="true"
+               class="topWrap"
+               :model="topForm">
         <el-form-item label="学生姓名">
-          <el-input v-model="topForm.team" placeholder="请输入学生名称" />
+          <el-input v-model="topForm.team"
+                    placeholder="请输入学生名称" />
+        </el-form-item>
+        <el-form-item label="学生专业">
+          <el-select v-model="topForm.major"
+                     placeholder="请输入学生专业">
+            <el-option v-for="(item,index) in chioseList"
+                       :key="index"
+                       :value="item.subId"
+                       :label="item.subName"></el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="学生状态">
-          <el-select v-model="topForm.status" placeholder="请选择学生状态" clearable>
+          <el-select v-model="topForm.status"
+                     placeholder="请选择学生状态"
+                     clearable>
             <!-- // 1报名中，2缴费中，3报名截止，4已开团 -->
-            <el-option :value="0" label="报名中"></el-option>
-            <el-option :value="1" label="报名完成"></el-option>
-            <el-option :value="2" label="报名失败"></el-option>
+            <el-option :value="0"
+                       label="报名中"></el-option>
+            <el-option :value="1"
+                       label="报名完成"></el-option>
+            <el-option :value="2"
+                       label="报名失败"></el-option>
           </el-select>
         </el-form-item>
         <!-- <el-form-item label="学生">
           <el-input v-model="topForm.student"
                     placeholder="请输入学生姓名" />
         </el-form-item>-->
-        <el-button type="primary" icon="el-icon-search" plain @click="getstudentList">搜索</el-button>
-        <el-button type="success" icon="el-icon-refresh" plain @click="resetStudentList">重置</el-button>
+        <el-button type="primary"
+                   icon="el-icon-search"
+                   plain
+                   @click="getstudentList">搜索</el-button>
+        <el-button type="success"
+                   icon="el-icon-refresh"
+                   plain
+                   @click="resetStudentList">重置</el-button>
+        <el-button icon="el-icon-refresh"
+                   plain
+                   @click="showFade('','','')">批量调剂</el-button>
       </el-form>
       <!-- 提示语 -->
-      <p class="subMsg" v-if="!majorId">请先选择分部和乐团后,再查看学生列表或者搜索学生~</p>
+      <p class="subMsg"
+         v-if="!majorId">请先选择分部和乐团后,再查看学生列表或者搜索学生~</p>
       <!-- 列表 -->
-      <div class="tableWrap" v-if="majorId">
-        <el-table :data="tableData" style="width: 100%">
-          <el-table-column prop="city" align="center" label="所属分部"></el-table-column>
-          <el-table-column prop="name" align="center" label="学生姓名"></el-table-column>
-          <el-table-column prop="sex" align="center" label="性别" :formatter="filterSex"></el-table-column>
-          <el-table-column prop="birthday" align="center" label="出生日期" :formatter="filterDate"></el-table-column>
-          <el-table-column prop="class" align="center" label="班级" :formatter="filterClass"></el-table-column>
-          <el-table-column prop="school" align="center" label="单位/学校"></el-table-column>
-          <el-table-column prop="patriarchPhone" align="center" label="联系方式"></el-table-column>
-          <el-table-column prop="subName" align="center" label="录取专业"></el-table-column>
-          <el-table-column prop="patriarchName" align="center" label="家长姓名"></el-table-column>
-          <el-table-column prop="patriarchUnit" align="center" label="家长工作单位"></el-table-column>
+      <div class="tableWrap"
+           v-if="majorId">
+        <el-table :data="tableData"
+                  style="width: 100%"
+                  @selection-change="handleSelectionChange">
+          <el-table-column type="selection"
+                           width="55">
+          </el-table-column>
+          <el-table-column prop="city"
+                           align="center"
+                           label="所属分部"></el-table-column>
+          <el-table-column prop="name"
+                           align="center"
+                           label="学生姓名"></el-table-column>
+          <el-table-column prop="sex"
+                           align="center"
+                           label="性别"
+                           :formatter="filterSex"></el-table-column>
+          <el-table-column prop="birthday"
+                           align="center"
+                           label="出生日期"
+                           :formatter="filterDate"></el-table-column>
+          <el-table-column prop="class"
+                           align="center"
+                           label="班级"
+                           :formatter="filterClass"></el-table-column>
+          <el-table-column prop="school"
+                           align="center"
+                           label="单位/学校"></el-table-column>
+          <el-table-column prop="patriarchPhone"
+                           align="center"
+                           label="联系方式"></el-table-column>
+          <el-table-column prop="subName"
+                           align="center"
+                           label="录取专业"></el-table-column>
+          <el-table-column prop="patriarchName"
+                           align="center"
+                           label="家长姓名"></el-table-column>
+          <el-table-column prop="patriarchUnit"
+                           align="center"
+                           label="家长工作单位"></el-table-column>
           <!-- <el-table-column prop="musical" align="center" label="乐器准备方式"></el-table-column> -->
           <!-- status -->
-          <el-table-column prop="status" align="center" label="状态" :formatter="filterStatus"></el-table-column>
-          <el-table-column prop="amount" align="center" label="实际缴费金额"></el-table-column>
-          <el-table-column align="center" label="操作">
+          <el-table-column prop="status"
+                           align="center"
+                           label="状态"
+                           :formatter="filterStatus"></el-table-column>
+          <el-table-column prop="amount"
+                           align="center"
+                           label="实际缴费金额"></el-table-column>
+          <el-table-column align="center"
+                           label="操作">
             <template slot-scope="scope">
               <div>
                 <!-- 学生id crouseId subId -->
-                <el-button
-                  type="primary"
-                  plain
-                  @click="showFade(scope.row.id,scope.row.courseId,scope.row.subId)"
-                >调剂</el-button>
+                <el-button type="primary"
+                           plain
+                           :disabled='!disabled'
+                           @click="showFade(scope.row.id,scope.row.courseId,scope.row.subId)">调剂</el-button>
               </div>
             </template>
           </el-table-column>
         </el-table>
         <!-- 调剂弹出层 -->
-        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
+        <el-dialog title="提示"
+                   :visible.sync="dialogVisible"
+                   width="30%">
           <span>请选择调剂乐团</span>
-          <el-select v-model="reviseMajor" placeholder="请选择调剂课程" @change="reviseMajors">
-            <el-option
-              v-for="(item,index) in chioseList"
-              :key="index"
-              :value="item.subId"
-              :label="item.subName"
-            ></el-option>
+          <el-select v-model="reviseMajor"
+                     placeholder="请选择调剂课程"
+                     @change="reviseMajors">
+            <el-option v-for="(item,index) in chioseList"
+                       :key="index"
+                       :value="item.subId+'-'+item.id"
+                       :label="item.subName"></el-option>
           </el-select>
-          <span slot="footer" class="dialog-footer">
+          <span slot="footer"
+                class="dialog-footer">
             <el-button @click="dialogVisible = false">取 消</el-button>
-            <el-button type="primary" @click="submitRe">确 定</el-button>
+            <el-button type="primary"
+                       @click="submitRe">确 定</el-button>
           </span>
         </el-dialog>
         <!-- 分页器 -->
         <div class="paginationWrap">
-          <el-pagination
-            background
-            class="pagination"
-            layout="prev, pager, next"
-            :total="total"
-            :current-page.sync="currentPage"
-            :page-size.sync="limit"
-            @current-change="handleCurrentChange"
-          ></el-pagination>
+          <el-pagination background
+                         class="pagination"
+                         layout="prev, pager, next"
+                         :total="total"
+                         :current-page.sync="currentPage"
+                         :page-size.sync="limit"
+                         @current-change="handleCurrentChange"></el-pagination>
         </div>
         <!-- 报名按钮 -->
         <!--   -->
-        <el-button type="danger" v-if="majorStatus == 1" class="joinBtn" @click="getMoney">开启缴费</el-button>
+        <el-button type="danger"
+                   v-if="majorStatus == 1"
+                   class="joinBtn"
+                   @click="getMoney">开启缴费</el-button>
       </div>
     </div>
   </div>
@@ -128,12 +194,14 @@ import {
 import { setTimeout } from "timers";
 export default {
   name: "Dashboard",
-  data() {
+  data () {
     return {
       topForm: {
         team: "",
         status: "",
-        student: ""
+        student: "",
+        major: ''
+
       },
       sectionForm: {
         section: ""
@@ -165,37 +233,38 @@ export default {
       chioseList: [], // 所有调剂科目的集合
       sessionId: "",
       brancheList: [], // 所有分部集合
-      limit : 20,
+      limit: 20,
       total: 0,
       page: 1,
       studentId: "", // 学生id
       courseId: "", // 当前选中的课程
-      subId: "" // 当前选中的项目
+      subId: "", // 当前选中的项目
+      disabled: true // 判断单个调剂按钮能否点击
     };
   },
   methods: {
-    showFade(id, courseId, subId) {
-      console.log(id, courseId, subId + "哈哈哈");
-      //scope.row.id,scope.row.crouseId,scope.row.subId
-      this.studentId = id;
-      this.courseId = courseId;
+    showFade (id, courseId, subId) {
+      if (id && courseId) {
+        this.studentId = id;
+        this.courseId = courseId;
+      }
       this.subId = subId;
       this.dialogVisible = true;
+
     },
     // 获取分类选项卡
-    getMajors() {
+    getMajors () {
       // classid  乐团id
-      console.log(this.majorId);
       getAllMajor(qs.stringify({ clazzId: this.majorId }))
         .then(res => {
           if (res.code == 200) {
             this.chioseList = res.data;
           }
         })
-        .catch(res => {});
+        .catch(res => { });
     },
     // 获取所有乐团列表
-    getMusicTeam(id, row) {
+    getMusicTeam (id, row) {
       getMusicTeams(qs.stringify({ branchId: id, row, page: this.page })).then(
         res => {
           if (res.code == 200) {
@@ -205,7 +274,7 @@ export default {
       );
     },
     // 获取所有分部
-    getBranches() {
+    getBranches () {
       getBranches().then(res => {
         if (res.code == 200) {
           this.brancheList = res.data;
@@ -213,14 +282,14 @@ export default {
       });
     },
     // 点击选择分部
-    chioseSection(id) {
+    chioseSection (id) {
       // 查询分部列表
       // console.log(id);
       this.sessionId = id;
       this.getMusicTeam(id, 50);
     },
     // 点击分部下的乐团
-    chioseMajor(name, id, status) {
+    chioseMajor (name, id, status) {
       this.actionTearm = name;
       this.majorStatus = status;
       this.majorId = id;
@@ -230,7 +299,7 @@ export default {
       this.getMajors();
     },
     // 获取学生列表(查询也用这个接口)
-    getstudentList() {
+    getstudentList () {
       if (!this.majorId) {
         this.$message.error("请先选择分部与乐团在搜索学生");
         return;
@@ -240,8 +309,9 @@ export default {
           musicTeamId: this.majorId,
           name: this.topForm.team,
           status: this.topForm.status,
-          page:this.page,
-          rows:this.limit
+          subId: this.topForm.major,
+          page: this.page,
+          rows: this.limit
         })
       ).then(res => {
         this.tableData = res.data.rows;
@@ -250,43 +320,50 @@ export default {
       });
     },
     // 重置搜索
-    resetStudentList() {
+    resetStudentList () {
       this.topForm.team = "";
       this.topForm.status = "";
+      this.topForm.major = "";
       this.page = 1;
       this.getstudentList();
     },
     // 性别分类过滤器
-    filterSex(val) {
+    filterSex (val) {
       let arr = ["男", "女"];
       return arr[val.sex];
     },
     // 时间格式化过滤器
-    filterDate(val) {
+    filterDate (val) {
       let str = "";
       val.birthday ? (str = val.birthday.split("T")[0]) : (str = "");
       return str;
     },
     // 格式化班级
-    filterClass(val) {
+    filterClass (val) {
       return val.grade + val.gclass;
     },
     // 格式化状态
-    filterStatus(val) {
+    filterStatus (val) {
       let arr = ["报名中", "报名完成", "报名失败"];
       return arr[val.status];
     },
     // 修改科目触发事件
-    reviseMajors(val) {
-      this.subId = val;
+    reviseMajors (val) {
+      // 这里切割字符串 拿到想要的数据
+      if (val) {
+        this.subId = val.split('-')[0];
+        this.crouseId = val.split('-')[1];
+      }
+      console.log(this.crouseId)
     },
     // 确认修改
-    submitRe() {
+    submitRe () {
+      // console.log(this.crouseId);
       updateUser(
         qs.stringify({
-          crouseId: this.courseId,
+          courseId: this.crouseId,
           subId: this.subId,
-          id: this.studentId
+          userId: this.studentId
         })
       ).then(res => {
         if (res.code == 200) {
@@ -299,7 +376,7 @@ export default {
       });
     },
     // 点击开始缴费 1报名中，2缴费中，3报名截止，4已开团
-    getMoney() {
+    getMoney () {
       updateClass(qs.stringify({ id: this.majorId, status: 2 })).then(res => {
         if (res.code == 200) {
           this.$message.success("乐团报名成功请尽快缴费");
@@ -311,26 +388,42 @@ export default {
         }
       });
     },
-    handleCurrentChange(val) {
+    handleCurrentChange (val) {
       this.page = val;
       // this.limit = pageSize;
-     this.getstudentList();
+      this.getstudentList();
       // if (this.autoScroll) {
-        scrollTo(0, 800);
+      scrollTo(0, 800);
       // }
+    },
+    handleSelectionChange (val) {
+      let str = '';
+      if (val.length >= 2) {
+        this.disabled = false;
+      } else {
+        this.disabled = true;
+      }
+      if (val.length > 0) {
+        val.forEach(item => {
+          str += item.id + ','
+        })
+      }
+      str = str.substring(0, str.length - 1);
+      this.studentId = str;
+
     }
   },
-   computed: {
+  computed: {
     currentPage: {
-      get() {
+      get () {
         return this.page
       },
-      set(val) {
+      set (val) {
         this.$emit('update:page', val)
       }
     },
   },
-  mounted() {
+  mounted () {
     // 获取所有分部
     this.getBranches();
     //  获取所有学生列表

vue.config.js

@@ -3,7 +3,7 @@ const path = require('path');
 const defaultSettings = require('./src/settings.js');
 
 function resolve (dir) {
-	return path.join(__dirname, dir);
+  return path.join(__dirname, dir);
 }
 
 const name = defaultSettings.title || '大雅报名管理'; // page title
@@ -24,114 +24,115 @@ module.exports = {
 	 * In most cases please use '/' !!!
 	 * Detail: https://cli.vuejs.org/config/#publicpath
 	 */
-	publicPath: './',
-	outputDir: 'dist',
-	assetsDir: 'static',
-	lintOnSave: false,
-	productionSourceMap: false,
-	devServer: {
-		// port: port,
-		open: true,
-		// overlay: {
-		// 	warnings: false,
-		// 	errors: true
-		// },
-		proxy: {
-			// change xxx-api/login => mock/login
-			// detail: https://cli.vuejs.org/config/#devserver-proxy
-			[process.env.VUE_APP_BASE_API]: {
-				target: `http://admin.dayaedu.com`,
-				changeOrigin: true,
-				pathRewrite: {
-					['^' + process.env.VUE_APP_BASE_API]: ''
-				}
-			}
-		},
-		// after: require('./mock/mock-server.js')
-	},
-	configureWebpack: {
-		// provide the app's title in webpack's name field, so that
-		// it can be accessed in index.html to inject the correct title.
-		name: name,
-		resolve: {
-			alias: {
-				'@': resolve('src')
-			}
-		}
-	},
-	chainWebpack (config) {
-		config.plugins.delete('preload'); // TODO: need test
-		config.plugins.delete('prefetch'); // TODO: need test
+  publicPath: './',
+  outputDir: 'dist',
+  assetsDir: 'static',
+  lintOnSave: false,
+  productionSourceMap: false,
+  devServer: {
+    // port: port,
+    open: true,
+    // overlay: {
+    // 	warnings: false,
+    // 	errors: true
+    // },
+    proxy: {
+      // change xxx-api/login => mock/login
+      // detail: https://cli.vuejs.org/config/#devserver-proxy
+      // http://admin.dayaedu.com
+      [process.env.VUE_APP_BASE_API]: {
+        target: `http://admin.dayaedu.com/api`,
+        changeOrigin: true,
+        pathRewrite: {
+          ['^' + process.env.VUE_APP_BASE_API]: ''
+        }
+      }
+    },
+    // after: require('./mock/mock-server.js')
+  },
+  configureWebpack: {
+    // provide the app's title in webpack's name field, so that
+    // it can be accessed in index.html to inject the correct title.
+    name: name,
+    resolve: {
+      alias: {
+        '@': resolve('src')
+      }
+    }
+  },
+  chainWebpack (config) {
+    config.plugins.delete('preload'); // TODO: need test
+    config.plugins.delete('prefetch'); // TODO: need test
 
-		// set svg-sprite-loader
-		config.module
-			.rule('svg')
-			.exclude.add(resolve('src/icons'))
-			.end();
-		config.module
-			.rule('icons')
-			.test(/\.svg$/)
-			.include.add(resolve('src/icons'))
-			.end()
-			.use('svg-sprite-loader')
-			.loader('svg-sprite-loader')
-			.options({
-				symbolId: 'icon-[name]'
-			})
-			.end();
+    // set svg-sprite-loader
+    config.module
+      .rule('svg')
+      .exclude.add(resolve('src/icons'))
+      .end();
+    config.module
+      .rule('icons')
+      .test(/\.svg$/)
+      .include.add(resolve('src/icons'))
+      .end()
+      .use('svg-sprite-loader')
+      .loader('svg-sprite-loader')
+      .options({
+        symbolId: 'icon-[name]'
+      })
+      .end();
 
-		// set preserveWhitespace
-		config.module
-			.rule('vue')
-			.use('vue-loader')
-			.loader('vue-loader')
-			.tap(options => {
-				options.compilerOptions.preserveWhitespace = true;
-				return options;
-			})
-			.end();
+    // set preserveWhitespace
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .loader('vue-loader')
+      .tap(options => {
+        options.compilerOptions.preserveWhitespace = true;
+        return options;
+      })
+      .end();
 
-		config
-			// https://webpack.js.org/configuration/devtool/#development
-			.when(process.env.NODE_ENV === 'development', config =>
-				config.devtool('cheap-source-map')
-			);
+    config
+      // https://webpack.js.org/configuration/devtool/#development
+      .when(process.env.NODE_ENV === 'development', config =>
+        config.devtool('cheap-source-map')
+      );
 
-		config.when(process.env.NODE_ENV !== 'development', config => {
-			config
-				.plugin('ScriptExtHtmlWebpackPlugin')
-				.after('html')
-				.use('script-ext-html-webpack-plugin', [
-					{
-						// `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
-					}
-				}
-			});
-			config.optimization.runtimeChunk('single');
-		});
-	}
+    config.when(process.env.NODE_ENV !== 'development', config => {
+      config
+        .plugin('ScriptExtHtmlWebpackPlugin')
+        .after('html')
+        .use('script-ext-html-webpack-plugin', [
+          {
+            // `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
+          }
+        }
+      });
+      config.optimization.runtimeChunk('single');
+    });
+  }
 };