课程管理页面功能样式调整

src/views/courseInformation/courseManagement/index.vue

 <template>
   <!-- 课程管理 -->
-  <div id="courseManage" v-loading.fullscreen.lock="fullscreenLoading">
+  <div id="courseManage">
     <div class="courseContent" v-show="showSwitch.courseContent">
       <div class="search" style="border-bottom: 14px solid #f4f4f4">
         <el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true">
@@ -18,15 +18,48 @@
             </el-select>
           </el-form-item>
           <el-form-item>
-            <el-button type="info" icon="search" class="boot" @click="loadData(1,8)">搜索</el-button>
+            <!--          //查询按钮-->
+            <el-button
+              :class="commonField.queryClass"
+              :type="commonField.typePrimary"
+              :icon="commonField.queryIcon"
+              :size="commonField.smallSize"
+              @click="loadData"
+            >{{ commonField.queryName }}</el-button>
+            <!--          //重置按钮-->
+            <el-button
+              :class="commonField.resetClass"
+              :icon="commonField.resetIcon"
+              :size="commonField.smallSize"
+              @click="resetQuery"
+            >{{ commonField.resetName }}</el-button>
           </el-form-item>
           <div style="float: right">
             <el-form-item>
-              <el-button type="info" @click="dialogFormVisible=true">+ 新增</el-button>
-              <el-button type="success" class="mould" @click="exportmould">下载模板<i class="el-icon-upload el-icon--right"></i>
-              </el-button>
-              <el-button type="success" class="mould" @click="importmould">导入课程信息<i class="el-icon-upload el-icon--right"></i>
-              </el-button>
+              <!--          //新增按钮-->
+              <el-button
+                :class="commonField.addClass"
+                :type="commonField.typePrimary"
+                :icon="commonField.addIcon"
+                :size="commonField.smallSize"
+                @click="dialogFormVisible=true"
+              >{{ commonField.addName }}</el-button>
+              <!--          //下载模板按钮-->
+              <el-button
+                :class="commonField.importClass"
+                :type="commonField.typeWarning"
+                :icon="commonField.importIcon"
+                :size="commonField.smallSize"
+                @click="exportmould"
+              >下载模板</el-button>
+              <!--          //导入按钮-->
+              <el-button
+                :class="commonField.importClass"
+                :type="commonField.typeWarning"
+                :icon="commonField.importIcon"
+                :size="commonField.smallSize"
+                @click="importmould"
+              >{{ commonField.importName }}</el-button>
               <input type="file" id="btn_file" style="display:none" @change="fileupload">
             </el-form-item>
           </div>
@@ -68,7 +101,7 @@
       <!--------------------------------------------------------课程功能块---------------------------------------------------->
       <div style="padding:5px 10px">
         <div class="tableTitle">课程管理列表</div>
-        <el-table :data="tableData" border sortable="true">
+        <el-table v-loading="fullscreenLoading" :data="tableData" border sortable="true">
           <span slot="empty">{{ tableDataTips }}</span>
           <el-table-column align="center" prop="id" label="序号" width="55px">
             <template slot-scope="scope">
@@ -125,7 +158,7 @@
           </el-table-column>
           <el-table-column align="center" label="封面"  prop="imageSrc">
             <template slot-scope="scope">
-              <img :src="scope.row.imageSrc" style="width:100%;height:100%;" @mouseover="justEnter($event)" @mouseout="justOut($event)"/>
+              <img :src="imageSrc" style="width:100%;height:100%;" @mouseover="justEnter($event)" @mouseout="justOut($event)"/>
             </template>
           </el-table-column>
           <el-table-column align="center" label="方向"  prop="directionName">
@@ -153,6 +186,13 @@
           </el-table-column>
         </el-table>
       </div>
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.page"
+        :limit.sync="queryParams.rows"
+        @pagination="loadData"
+      />
       <el-dialog
         title="提示"
         :visible.sync="dialogVisible"
@@ -174,15 +214,6 @@
           <el-button type="info" @click="confirm">保 存</el-button>
         </span>
       </el-dialog>
-      <!--------------------------------------------------------分页功能块---------------------------------------------------->
-      <div align="center" class="pages">
-        <div class="block">
-          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
-                         :current-page="currentPage" :page-size="pagesize" layout="total, prev, pager, next, jumper"
-                         :total="total" style="margin-bottom: 20px;">
-          </el-pagination>
-        </div>
-      </div>
       <footer></footer>
     </div>
     <!--------------------------------------------------------目录功能块(组件)---------------------------------------------------->
@@ -198,11 +229,17 @@
 <script>
 import CurCat from '../courseManagement/courseCatalogues.vue'
 import {queryBLessonsByPagination} from '@/api/courseManagement/indexApi'
+import commonField from "@/utils/commonField";
 export default {
   name: "index",
   components:{
     CurCat
   },
+  computed: {
+    commonField() {
+      return commonField
+    }
+  },
   data() {
     var checkid = (rule, value, callback) => {
       if (!value) {
@@ -254,6 +291,7 @@ export default {
       }
     };
     return {
+      imageSrc: require('@/assets/image/test.png'),
       //显示开关
       showSwitch: {
         courseContent: true,
@@ -298,12 +336,12 @@ export default {
       coursename: '',
 
       queryParams: {
+        page: 1,
+        rows: 10,
         coursekey:'',
         searchByDirection:'',
       },
       //pagination
-      currentPage: 1,
-      pagesize: 8,
       total: 0,
 
       actionUrl: '',
@@ -355,7 +393,7 @@ export default {
   created() {
   },
   mounted: function () {
-    this.loadData(this.currentPage, this.pagesize);
+    this.loadData();
   },
   methods: {
     // 获取课程方向
@@ -381,7 +419,17 @@ export default {
         }
       )
     },
-    loadData(page, rows) {
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams = {
+        page: 1,
+        rows: 10,
+        coursekey:'',
+        searchByDirection:'',
+      }
+      this.loadData()
+    },
+    loadData() {
       //列表渲染数据
       var data = [];
       let url = 'BLesson/queryBLessonsByPagination';
@@ -389,8 +437,8 @@ export default {
       this.tableData = [];
       _this.fullscreenLoading = true;
       const params = {
-        page: page,
-        rows: rows,
+        page: _this.queryParams.page,
+        rows: _this.queryParams.rows,
         condition: _this.queryParams.coursekey,
         directionId: _this.queryParams.searchByDirection,
         sort: 'create_date desc'
@@ -459,7 +507,7 @@ export default {
               });
               that.fullscreenLoading = false;
               if(type=='success') {
-                that.loadData(that.currentPage, that.pagesize);
+                that.loadData();
               }
 
             }, function (err) {
@@ -472,7 +520,7 @@ export default {
           return false;
         }
       });
-      this.loadData(this.currentPage, this.pagesize);
+      this.loadData();
     },
     callOf(formName) {
       this.dialogFormVisible = false;
@@ -525,7 +573,7 @@ export default {
                 message: res.message,
                 type: 'success'
               });
-              _this.loadData(_this.currentPage, _this.pagesize);
+              _this.loadData();
             }else{
               _this.$notify({
                 title: '失败',
@@ -595,7 +643,7 @@ export default {
             message: '您已恢复默认封面',
             type: 'success'
           });
-          that.loadData(that.currentPage, that.pagesize);
+          that.loadData();
         } else {
           that.$notify({
             title: '提示',
@@ -643,7 +691,7 @@ export default {
             message: message,
             type: type
           });
-          _this.loadData(_this.currentPage, _this.pagesize);
+          _this.loadData();
           _this.filelist = [];
 
         }, err => {
@@ -700,7 +748,7 @@ export default {
                   message: message,
                   type: type
                 });
-                that.loadData(that.currentPage, that.pagesize);
+                that.loadData();
                 $('.el-popover').css("display", "none");
               })
               , (function (err) {
@@ -728,11 +776,11 @@ export default {
     //打印页
     handleSizeChange(val) {
       this.pagesize = val;
-      this.loadData(this.currentPage, this.pagesize);
+      this.loadData();
     },
     handleCurrentChange(val) {
       this.currentPage = val;
-      this.loadData(this.currentPage, this.pagesize);
+      this.loadData();
     },
     //search
     removeCourse(index) {
@@ -760,7 +808,7 @@ export default {
               message: message,
               type: type
             });
-            that.loadData(that.currentPage, that.pagesize);
+            that.loadData();
           })
           , (function (err) {
             that.fullscreenLoading = false;
@@ -856,7 +904,6 @@ export default {
 #courseManage .breadNav{margin-left:0;}
 #courseManage .search_area{margin:1em 0;}
 #courseManage .info_change{margin-left:0;}
-#courseManage .boot{margin:0 1em;}
 #courseManage .search_area div{width:190px;}
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {-webkit-appearance: none;}