优化

package.json

@@ -6,8 +6,8 @@
   "license": "MIT",
   "scripts": {
     "dev": "vue-cli-service serve",
-    "build-prod": "vue-cli-service build",
-    "build": "vue-cli-service build --mode staging",
+    "build": "vue-cli-service build",
+    "build-stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",
     "lint": "eslint --ext .js,.vue src",
     "test:unit": "jest --clearCache && vue-cli-service test:unit",

src/layout/components/AppMain.vue

@@ -20,7 +20,7 @@ export default {
 <style scoped>
 .app-main {
   /*50 = navbar  */
-  min-height: calc(100vh - 50px);
+  min-height: calc(100vh - 85px);
   width: 100%;
   position: relative;
   overflow: hidden;

src/store/getters.js

@@ -8,9 +8,13 @@ const getters = {
   cachedViews: state => state.tagsView.cachedViews,
   getScheduleData: state => state.schoolTimetable.getScheduleData,
   getScheduleWareData: state => state.schoolTimetable.getScheduleWareData,
+  getScheduleWareDataLength: state => state.schoolTimetable.getScheduleWareDataLength,
   getBlockData: state => state.dashboard.getBlockData,
+  getBlockDataLength: state => state.dashboard.getBlockDataLength,
   getBlockRowData: state => state.dashboard.getBlockRowData,
+  getBlockRowDataLength: state => state.dashboard.getBlockRowDataLength,
   getRowItemData: state => state.dashboard.getRowItemData,
+  getRowItemDataLength: state => state.dashboard.getRowItemDataLength,
   getTempateData: state => state.dashboard.getTempateData,
   getCategoryData: state => state.categoryList.getCategoryData
 }

src/store/modules/dashboard.js

@@ -2,8 +2,11 @@ import { getBlock, getBlockRow, getRowItem, setBlockRow, addBlockRow, setRowItem
 
 const state = {
   getBlockData: [],
+  getBlockDataLength: 0,
   getBlockRowData: [],
+  getBlockRowDataLength: 0,
   getRowItemData: [],
+  getRowItemDataLength: 0,
   getTempateData: []
 }
 
@@ -11,12 +14,21 @@ const mutations = {
   GET_BLOCK: (state, data) => {
     state.getBlockData = data
   },
+  GET_BLOCK_LENGTH: (state, length) => {
+    state.getBlockDataLength = length
+  },
   GET_BLOCK_ROW: (state, data) => {
     state.getBlockRowData = data
   },
+  BLOCK_ROW_LENGTH: (state, length) => {
+    state.getBlockRowDataLength = length
+  },
   GET_ROW_ITEM: (state, data) => {
     state.getRowItemData = data
   },
+  ROW_ITEM__LENGTH: (state, length) => {
+    state.getRowItemDataLength = length
+  },
   GET_TEMPATE: (state, data) => {
     state.getTempateData = data
   }
@@ -24,11 +36,13 @@ const mutations = {
 
 const actions = {
   // 获取课程表列表
-  getBlockList({ commit, state }) {
+  getBlockList({ commit, state }, obj) {
+    const page = (obj.page - 1) * 10
     return new Promise((resolve, reject) => {
       getBlock().then((res) => {
         const list = res.data
-        commit('GET_BLOCK', list)
+        commit('GET_BLOCK_LENGTH', list.length)
+        commit('GET_BLOCK', list.splice(page, 10))
         resolve()
       }).catch(error => {
         reject(error)
@@ -38,11 +52,13 @@ const actions = {
   // 获取课程表行列表
   getBlockRowList({ commit, state }, obj) {
     const id = obj.id
+    const page = (obj.page - 1) * 10
     return new Promise((resolve, reject) => {
       getBlockRow(id).then((res) => {
         console.log(res)
         const list = res.data
-        commit('GET_BLOCK_ROW', list)
+        commit('BLOCK_ROW_LENGTH', list.length)
+        commit('GET_BLOCK_ROW', list.splice(page, 10))
         resolve()
       }).catch(error => {
         reject(error)
@@ -52,11 +68,13 @@ const actions = {
   // 获取首页项列表
   getRowItemList({ commit, state }, obj) {
     const id = obj.id
+    const page = (obj.page - 1) * 10
     return new Promise((resolve, reject) => {
       getRowItem(id).then((res) => {
         console.log(res)
         const list = res.data
-        commit('GET_ROW_ITEM', list)
+        commit('ROW_ITEM__LENGTH', list.length)
+        commit('GET_ROW_ITEM', list.splice(page, 10))
         resolve()
       }).catch(error => {
         reject(error)

src/store/modules/schoolTimetable.js

@@ -2,7 +2,8 @@ import { getSchedule, getScheduleWare, setSchedule, setScheduleWare } from '@/ap
 
 const state = {
   getScheduleData: [],
-  getScheduleWareData: []
+  getScheduleWareData: [],
+  getScheduleWareDataLength: 0
 }
 
 const mutations = {
@@ -10,7 +11,11 @@ const mutations = {
     state.getScheduleData = data
   },
   GET_SCHEDULE_WARE: (state, data) => {
+    console.log(data)
     state.getScheduleWareData = data
+  },
+  SCHEDULE_WARE_LENGTH: (state, length) => {
+    state.getScheduleWareDataLength = length
   }
 }
 
@@ -33,12 +38,14 @@ const actions = {
   },
   // 获取课程表详情
   getScheduleWare({ commit, state }, obj) {
+    const page = (obj.page - 1) * 10
     return new Promise((resolve, reject) => {
       getScheduleWare({
         scheduleId: obj.id
       }).then((res) => {
         const data = res.data
-        commit('GET_SCHEDULE_WARE', data)
+        commit('SCHEDULE_WARE_LENGTH', data.length)
+        commit('GET_SCHEDULE_WARE', data.splice(page, 10))
         resolve()
       }).catch(error => {
         reject(error)

src/views/dashboard/index.vue

@@ -43,15 +43,17 @@
           <template slot-scope="scope">
             <el-button
               size="mini"
-              @click="handleEdit(scope.$index, scope.row)"
-            >修改</el-button>
-            <el-button
-              size="mini"
               @click="handleDetail(scope.$index, scope.row)"
             >详情</el-button>
           </template>
         </el-table-column>
       </el-table>
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="getBlockDataLength"
+        @current-change="handleCurrentChange"
+      />
     </div>
   </div>
 </template>
@@ -61,22 +63,27 @@ import { mapGetters } from 'vuex'
 
 export default {
   name: 'Dashboard',
+  data() {
+    return {
+      page: 1
+    }
+  },
   created() {
-    this.$store.dispatch('dashboard/getBlockList')
+    this.$store.dispatch('dashboard/getBlockList', {
+      page: this.page
+    })
   },
   // eslint-disable-next-line vue/order-in-components
   computed: {
     ...mapGetters([
-      'getBlockData'
+      'getBlockData',
+      'getBlockDataLength'
     ])
   },
   methods: {
     newDate(date) {
       return new Date(date).toLocaleString()
     },
-    handleEdit(index, row) {
-      console.log(index, row)
-    },
     handleDetail(index, row) {
       console.log(index, row)
       this.$router.push({
@@ -85,6 +92,13 @@ export default {
           id: row.id
         }
       })
+    },
+    handleCurrentChange(val) {
+      console.log(val)
+      this.page = val
+      this.$store.dispatch('dashboard/getBlockList', {
+        page: this.page
+      })
     }
   }
 }
@@ -100,4 +114,8 @@ export default {
     line-height: 46px;
   }
 }
+.el-pagination {
+  text-align: center;
+  margin-top: 20px;
+}
 </style>

src/views/dashboardBlockRow/index.vue

@@ -103,6 +103,12 @@
           <el-button type="primary" @click="handOk">确 定</el-button>
         </div>
       </el-dialog>
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="getBlockRowDataLength"
+        @current-change="handleCurrentChange"
+      />
     </div>
   </div>
 </template>
@@ -128,18 +134,21 @@ export default {
         sort: [
           { required: true, message: '请输入排序', trigger: 'blur' }
         ]
-      }
+      },
+      page: 1
     }
   },
   created() {
     this.$store.dispatch('dashboard/getBlockRowList', {
-      id: this.$route.query.id
+      id: this.$route.query.id,
+      page: this.page
     })
   },
   // eslint-disable-next-line vue/order-in-components
   computed: {
     ...mapGetters([
-      'getBlockRowData'
+      'getBlockRowData',
+      'getBlockRowDataLength'
     ])
   },
   methods: {
@@ -217,7 +226,8 @@ export default {
       this.form.status = row.status === 'NOT_ON_STOCK' ? 'HAS_ON_STOCK' : 'NOT_ON_STOCK'
       this.$store.dispatch('dashboard/setBlockRowList', this.form).then(() => {
         this.$store.dispatch('dashboard/getBlockRowList', {
-          id: this.$route.query.id
+          id: this.$route.query.id,
+          page: this.page
         })
       })
     },
@@ -236,14 +246,16 @@ export default {
         this.$store.dispatch('dashboard/setBlockRowList', this.form).then(() => {
           this.dialogFormVisible = false
           this.$store.dispatch('dashboard/getBlockRowList', {
-            id: this.$route.query.id
+            id: this.$route.query.id,
+            page: this.page
           })
         })
       } else if (this.form.templateCode !== '' && this.form.status !== '' && this.form.sort !== '') {
         this.$store.dispatch('dashboard/addBlockRowList', this.form).then(() => {
           this.dialogFormVisible = false
           this.$store.dispatch('dashboard/getBlockRowList', {
-            id: this.$route.query.id
+            id: this.$route.query.id,
+            page: this.page
           })
         })
       }
@@ -258,6 +270,14 @@ export default {
         sort: ''
       }
     },
+    handleCurrentChange(val) {
+      console.log(val)
+      this.page = val
+      this.$store.dispatch('dashboard/getBlockRowList', {
+        id: this.$route.query.id,
+        page: this.page
+      })
+    },
     setForm(data) {
       this.form.id = data.id
       this.form.blockId = data.blockId
@@ -285,4 +305,8 @@ export default {
   .el-select>.el-input {
     width: 300px;
   }
+  .el-pagination {
+    text-align: center;
+    margin-top: 20px;
+  }
 </style>

src/views/dashboardRowItem/index.vue

@@ -106,6 +106,12 @@
           <el-button type="primary" @click="handOk">确 定</el-button>
         </div>
       </el-dialog>
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="getRowItemDataLength"
+        @current-change="handleCurrentChange"
+      />
     </div>
   </div>
 </template>
@@ -120,7 +126,8 @@ export default {
       form: {},
       dialogFormVisible: false,
       type: '',
-      formLabelWidth: '120px'
+      formLabelWidth: '120px',
+      page: 1
     }
   },
   created() {
@@ -131,7 +138,8 @@ export default {
   // eslint-disable-next-line vue/order-in-components
   computed: {
     ...mapGetters([
-      'getRowItemData'
+      'getRowItemData',
+      'getRowItemDataLength'
     ])
   },
   methods: {
@@ -268,6 +276,14 @@ export default {
         })
       }
     },
+    handleCurrentChange(val) {
+      console.log(val)
+      this.page = val
+      this.$store.dispatch('dashboard/getRowItemList', {
+        id: this.$route.query.id,
+        page: this.page
+      })
+    },
     setForm(data) {
       this.form = {
         'id': data.id,
@@ -300,4 +316,8 @@ export default {
   .el-select>.el-input {
     width: 300px;
   }
+  .el-pagination {
+    text-align: center;
+    margin-top: 20px;
+  }
 </style>

src/views/schoolDetail/index.vue

@@ -101,6 +101,12 @@
           <el-button type="primary" @click="handOk">确 定</el-button>
         </div>
       </el-dialog>
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="getScheduleWareDataLength"
+        @current-change="handleCurrentChange"
+      />
     </div>
   </div>
 </template>
@@ -120,20 +126,23 @@ export default {
         free: ''
       },
       formLabelWidth: '120px',
-      sheduleId: ''
+      sheduleId: '',
+      page: 1
     }
   },
   created() {
     console.log(this.$route.query.id)
     this.sheduleId = this.$route.query.id
     this.$store.dispatch('schoolTimetable/getScheduleWare', {
-      id: this.$route.query.id
+      id: this.$route.query.id,
+      page: this.page
     })
   },
   // eslint-disable-next-line vue/order-in-components
   computed: {
     ...mapGetters([
-      'getScheduleWareData'
+      'getScheduleWareData',
+      'getScheduleWareDataLength'
     ])
   },
   methods: {
@@ -213,7 +222,8 @@ export default {
       if (this.form.title !== '' || this.form.subTitle !== '' || this.form.url !== '' || this.form.free !== '') {
         this.$store.dispatch('schoolTimetable/setScheduleWare', this.form).then(() => {
           this.$store.dispatch('schoolTimetable/getScheduleWare', {
-            id: this.sheduleId
+            id: this.sheduleId,
+            page: this.page
           })
         })
       }
@@ -223,11 +233,20 @@ export default {
         this.$store.dispatch('schoolTimetable/setScheduleWare', this.form).then(() => {
           this.dialogFormVisible = false
           this.$store.dispatch('schoolTimetable/getScheduleWare', {
-            id: this.sheduleId
+            id: this.sheduleId,
+            page: this.page
           })
         })
       }
     },
+    handleCurrentChange(val) {
+      console.log(val)
+      this.page = val
+      this.$store.dispatch('schoolTimetable/getScheduleWare', {
+        id: this.sheduleId,
+        page: this.page
+      })
+    },
     setForm(data) {
       this.form.id = data.id
       this.form.url = data.url
@@ -255,4 +274,8 @@ export default {
 .el-select>.el-input {
   width: 300px;
 }
+.el-pagination {
+  text-align: center;
+  margin-top: 20px;
+}
 </style>

src/views/schoolTimetable/index.vue

@@ -162,7 +162,12 @@ export default {
     handleEdit(index, row) {
       console.log(index, row)
       this.dialogFormVisible = true
-      this.form.id = row.id
+      this.form = {
+        id: row.id,
+        title: row.title,
+        code: row.code,
+        weekSeq: row.weekSeq
+      }
     },
     handleDetail(index, row) {
       console.log(index, row)