table 做成通用的

package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "axios": "^0.27.2",
-    "core-js": "^3.23.2",
+    "core-js": "^3.23.3",
     "element-ui": "^2.15.9",
     "js-cookie": "^3.0.1",
     "md5": "^2.3.0",
@@ -42,7 +42,7 @@
     "postcss": "^8.4.14",
     "postcss-html": "^1.4.1",
     "prettier": "2.7.1",
-    "sass": "^1.52.3",
+    "sass": "^1.53.0",
     "sass-loader": "^10.2.1",
     "script-ext-html-webpack-plugin": "^2.1.5",
     "stylelint": "^14.9.1",

src/components/common/CommonTable.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="common-table">
+    <div class="common-table-list" :style="{ 'min-height': `${minHeight}px` }">
+      <div class="common-table-list-title">
+        <div>{{ name }}</div>
+        <slot name="button"></slot>
+      </div>
+      <slot></slot>
+    </div>
+    <!-- v-bind="$attrs" https://cn.vuejs.org/v2/api/#vm-attrs -->
+    <!-- v-on="$listeners" https://cn.vuejs.org/v2/api/#vm-listeners -->
+    <el-pagination
+      background
+      :page-sizes="[10, 20, 30, 40, 50]"
+      v-bind="$attrs"
+      layout="prev, pager, next, total, sizes, jumper"
+      v-on="$listeners"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    minHeight: {
+      type: Number,
+      default: 594
+    }
+  },
+  data() {
+    return {};
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~@/styles/mixin';
+
+.common-table {
+  @include pagination;
+
+  &-list {
+    @include list;
+
+    &-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      &:first-child {
+        font-size: 20px;
+        font-weight: bold;
+      }
+
+      .el-button {
+        height: 40px;
+        padding: 6px 20px;
+      }
+    }
+  }
+}
+</style>

src/views/account_manager/index.vue

@@ -21,40 +21,37 @@
       </el-row>
     </div>
     <!--表格-->
-    <div class="account-manager-list">
-      <div class="account-manager-list-title">
-        <div>账户管理</div>
-      </div>
-      <el-table :data="user_list">
-        <el-table-column prop="user_name" label="用户名" width="180" />
-        <el-table-column prop="real_name" label="姓名" width="180" />
-        <el-table-column prop="user_type_name" label="用户类型" width="120" />
-        <el-table-column prop="org_name_desc" label="加入机构名称" width="400" />
-        <el-table-column prop="email" label="邮箱" />
-      </el-table>
-    </div>
-    <el-pagination
-      background
-      :page-sizes="[10, 20, 30, 40, 50]"
+    <CommonTable
+      name="账户管理"
       :page-size="page_capacity"
-      layout="prev, pager, next, total, sizes, jumper"
       :total="total_count"
       :current-page="cur_page"
       @prev-click="changePage"
       @next-click="changePage"
       @current-change="changePage"
       @size-change="changePageSize"
-    />
+    >
+      <el-table :data="user_list">
+        <el-table-column prop="user_name" label="用户名" width="180" />
+        <el-table-column prop="real_name" label="姓名" width="180" />
+        <el-table-column prop="user_type_name" label="用户类型" width="120" />
+        <el-table-column prop="org_name_desc" label="加入机构名称" width="400" />
+        <el-table-column prop="email" label="邮箱" />
+      </el-table>
+    </CommonTable>
   </div>
 </template>
 
 <script>
 import { pageQueryUserList } from '@/api/list';
+import CommonTable from '@/components/common/CommonTable.vue';
 
 export default {
   name: 'AccountManager',
+  components: { CommonTable },
   data() {
     return {
+      // 搜索选项
       org_id: '',
       user_type: '',
       userTypeList: [
@@ -76,9 +73,7 @@ export default {
       user_list: [],
       page_capacity: 10,
       total_count: 0,
-      cur_page: 1,
-      userId: '',
-      curUserName: ''
+      cur_page: 1
     };
   },
   created() {
@@ -106,14 +101,6 @@ export default {
         this.user_list = user_list;
         this.total_count = total_count;
       });
-    },
-    handleShow(i, row) {
-      console.log(i, row);
-    },
-
-    orgListClose() {
-      this.userId = '';
-      this.curUserName = '';
     }
   }
 };
@@ -124,7 +111,6 @@ export default {
 
 .account-manager {
   @include container;
-  @include pagination;
 
   padding: 24px 0 46px;
 
@@ -152,19 +138,5 @@ export default {
       float: right;
     }
   }
-
-  &-list {
-    @include list;
-
-    &-title {
-      font-size: 20px;
-      font-weight: 400;
-    }
-
-    .link {
-      color: #409eff;
-      cursor: pointer;
-    }
-  }
 }
 </style>

src/views/org_manager/AddOrg.vue

@@ -22,23 +22,18 @@
             <el-input
               v-model="form.max_count_student"
               @input="form.max_count_student = form.max_count_student.replace(/[^\d]/g, '')"
-            ></el-input>
+            />
           </el-form-item>
 
           <el-form-item label="教师限额">
             <el-input
               v-model="form.max_count_teacher"
               @input="form.max_count_teacher = form.max_count_teacher.replace(/[^\d]/g, '')"
-            ></el-input>
+            />
           </el-form-item>
 
           <el-form-item label="到期日期">
-            <el-date-picker
-              v-model="form.due_date"
-              type="date"
-              value-format="yyyy-MM-dd"
-              placeholder="选择日期"
-            ></el-date-picker>
+            <el-date-picker v-model="form.due_date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
           </el-form-item>
 
           <el-form-item label="管理员用户名" prop="admin_user_name">
@@ -90,7 +85,7 @@
           accept="image/*"
         >
           <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
-          <i v-else class="el-icon-plus avatar-uploader-icon" />
+          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
       </div>
     </main>

src/views/org_manager/index.vue

@@ -3,13 +3,20 @@
     <el-input v-model="search" type="text" prefix-icon="el-icon-search" @keyup.enter.native="queryOrgList">
       <el-button slot="append" icon="el-icon-search" @click="queryOrgList" />
     </el-input>
-    <div class="org-manager-list">
-      <div class="org-manager-list-title">
-        <div>机构管理</div>
-        <div>
-          <el-button icon="el-icon-plus" @click="$router.push('/add_org')">创建机构</el-button>
-        </div>
-      </div>
+    <CommonTable
+      name="机构管理"
+      :page-size="page_capacity"
+      :total="total_count"
+      :current-page="cur_page"
+      @prev-click="changePage"
+      @next-click="changePage"
+      @current-change="changePage"
+      @size-change="changePageSize"
+    >
+      <template #button>
+        <el-button icon="el-icon-plus" @click="$router.push('/add_org')">创建机构</el-button>
+      </template>
+
       <el-table :data="org_list">
         <el-table-column prop="name" label="名称" width="240" />
         <el-table-column prop="teacher_count" label="注册教师人数" width="110" />
@@ -49,19 +56,7 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
-    <el-pagination
-      background
-      :page-sizes="[10, 20, 30, 40, 50]"
-      :page-size="page_capacity"
-      layout="prev, pager, next, total, sizes, jumper"
-      :total="total_count"
-      :current-page="cur_page"
-      @prev-click="changePage"
-      @next-click="changePage"
-      @current-change="changePage"
-      @size-change="changePageSize"
-    />
+    </CommonTable>
 
     <reset-password ref="reset" :user-id="curUserId" />
     <show-org ref="showOrg" :org-id="curOrgId" />
@@ -73,6 +68,7 @@
 import ResetPassword from '@/components/ResetPassword.vue';
 import ShowOrg from './ShowOrg.vue';
 import UpdateOrg from './UpdateOrg.vue';
+import CommonTable from '@/components/common/CommonTable.vue';
 import { pageQueryOrgList } from '@/api/list';
 import { GetDistributablePopedomList_OrgManager, SetDistributablePopedom_OrgManager } from '@/api/org';
 
@@ -81,7 +77,8 @@ export default {
   components: {
     ResetPassword,
     ShowOrg,
-    UpdateOrg
+    UpdateOrg,
+    CommonTable
   },
   data() {
     return {
@@ -163,27 +160,12 @@ export default {
 
 .org-manager {
   @include container;
-  @include pagination;
 
   padding: 24px 0 46px;
 
   > .el-input {
     width: 528px;
   }
-
-  &-list {
-    @include list;
-
-    &-title {
-      display: flex;
-      justify-content: space-between;
-
-      &:first-child {
-        font-size: 24px;
-        font-weight: 700;
-      }
-    }
-  }
 }
 </style>
 

src/views/student_manager/index.vue

@@ -34,10 +34,17 @@
       </el-row>
     </div>
     <!-- 表格 -->
-    <div class="student-manager-list">
-      <div class="student-manager-list-title">
-        <div>学生列表</div>
-      </div>
+    <CommonTable
+      name="学生列表"
+      :min-height="554"
+      :page-size="page_capacity"
+      :total="total_count"
+      :current-page="cur_page"
+      @prev-click="changePage"
+      @next-click="changePage"
+      @current-change="changePage"
+      @size-change="changePageSize"
+    >
       <el-table :data="org_student_user_list">
         <el-table-column prop="user_name" label="用户名" width="180" />
         <el-table-column prop="user_real_name" label="姓名" width="180" />
@@ -70,29 +77,18 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
-    <el-pagination
-      background
-      :page-sizes="[10, 20, 30, 40, 50]"
-      :page-size="page_capacity"
-      layout="prev, pager, next, total, sizes, jumper"
-      :total="total_count"
-      :current-page="cur_page"
-      @prev-click="changePage"
-      @next-click="changePage"
-      @current-change="changePage"
-      @size-change="changePageSize"
-    />
+    </CommonTable>
   </div>
 </template>
 
 <script>
+import CommonTable from '@/components/common/CommonTable.vue';
 import { PageQueryOrgStudentUserList } from '@/api/list';
 import { AuditOrgStudentUser } from '@/api/student';
 import DateSearch from '@/components/common/DateSearch.vue';
 
 export default {
-  components: { DateSearch },
+  components: { DateSearch, CommonTable },
   data() {
     return {
       user_name: '',
@@ -180,7 +176,6 @@ export default {
 
 .student-manager {
   @include container;
-  @include pagination;
 
   padding: 24px 0 46px;
 
@@ -202,16 +197,5 @@ export default {
       align-items: center;
     }
   }
-
-  &-list {
-    @include list;
-
-    min-height: 554px;
-
-    &-title {
-      font-size: 20px;
-      font-weight: 400;
-    }
-  }
 }
 </style>

src/views/teacher_manager/index.vue

@@ -30,10 +30,17 @@
       </el-row>
     </div>
     <!-- 表格 -->
-    <div class="teacher-manager-list">
-      <div class="teacher-manager-list-title">
-        <div>教师列表</div>
-      </div>
+    <CommonTable
+      name="教师列表"
+      :min-height="554"
+      :page-size="page_capacity"
+      :total="total_count"
+      :current-page="cur_page"
+      @prev-click="changePage"
+      @next-click="changePage"
+      @current-change="changePage"
+      @size-change="changePageSize"
+    >
       <el-table :data="org_teacher_user_list">
         <el-table-column prop="user_name" label="用户名" width="180" />
         <el-table-column prop="user_real_name" label="姓名" width="180" />
@@ -74,19 +81,7 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
-    <el-pagination
-      background
-      :page-sizes="[10, 20, 30, 40, 50]"
-      :page-size="page_capacity"
-      layout="prev, pager, next, total, sizes, jumper"
-      :total="total_count"
-      :current-page="cur_page"
-      @prev-click="changePage"
-      @next-click="changePage"
-      @current-change="changePage"
-      @size-change="changePageSize"
-    />
+    </CommonTable>
   </div>
 </template>
 
@@ -94,11 +89,13 @@
 import { pageQueryOrgTeacherUserList } from '@/api/list';
 import { auditOrgTeacherUser, getPopedomList_OrgTeacherUse, setPopedom_OrgTeacherUser } from '@/api/teacher';
 import DateSearch from '@/components/common/DateSearch.vue';
+import CommonTable from '@/components/common/CommonTable.vue';
 
 export default {
   name: 'TeacherManager',
   components: {
-    DateSearch
+    DateSearch,
+    CommonTable
   },
   data() {
     return {
@@ -220,17 +217,6 @@ export default {
       float: right;
     }
   }
-
-  &-list {
-    @include list;
-
-    min-height: 554px;
-
-    &-title {
-      font-size: 20px;
-      font-weight: 400;
-    }
-  }
 }
 
 // 权限管理