init

2026-08-12 17:19:37 +08:00
commit e73d22744e
131 changed files with 66997 additions and 0 deletions
@@ -0,0 +1,187 @@
+<template>
+  <div class="page-wrap">
+    <!-- 顶部搜索区域 -->
+    <div class="top-search-bar">
+      <div class="placeholder-left"></div>
+      <Input
+        v-model="searchKey"
+        placeholder="账号、姓名、联系电话、变动详情"
+        style="width: 360px"
+        suffix="ios-search"
+        @on-search="handleSearch"
+        clearable
+      ></Input>
+    </div>
+
+    <!-- 核心：表格自适应滚动容器 -->
+    <div class="table-scroll-box">
+      <Table
+        border
+        stripe
+        :columns="tableColumns"
+        :data="tableData"
+        class="teacher-table"
+        @on-selection-change="selectionChange"
+        :height="useTableHeight()-12"
+      ></Table>
+    </div>
+
+    <!-- 分页栏：固定在底部，不会滚动 -->
+    <div class="page-fixed-bottom">
+      <span class="total-text">共 {{ total }} 条</span>
+      <Page
+        :current.sync="pageNum"
+        :total="total"
+        :page-size="pageSize"
+        :page-size-opts="[10,20,50]"
+        show-sizer
+        @on-change="pageChange"
+        @on-page-size-change="sizeChange"
+      ></Page>
+    </div>
+  </div>
+</template>
+
+<script>
+import { self_viewport } from "@/mixins/self_viewport";
+export default {
+  name: 'TeacherChangeRecord',
+  data() {
+    return {
+      searchKey: '',
+      pageNum: 1,
+      pageSize: 10,
+      total: 52,
+      selectedRows: [],
+
+      tableColumns: [
+        {
+          title: '序号',
+          align: 'center',
+          width: 70,
+          render: (h, params) => {
+            const num = (this.pageNum - 1) * this.pageSize + params.index + 1
+            return h('span', num)
+          }
+        },
+        {
+          title: '教师账号',
+          key: 'account',
+          align: 'center'
+        },
+        {
+          title: '教师姓名',
+          key: 'name',
+          align: 'center'
+        },
+        {
+          title: '联系电话',
+          key: 'phone',
+          align: 'center'
+        },
+        {
+          title: '变动详情',
+          key: 'changeInfo',
+          align: 'center'
+        },
+        {
+          title: '变动日期',
+          key: 'changeDate',
+          align: 'center'
+        }
+      ],
+
+      tableData: [
+        { account: '13761014664', name: '郭秀丽', phone: '13761014664', changeInfo: '从上海市进才中学北校转出', changeDate: '2020-04-01' },
+        { account: '13761040842', name: '刘莉', phone: '13761040842', changeInfo: '从上海市进才中学北校转出', changeDate: '2020-07-08' },
+        { account: '13482212686', name: '万凤翠', phone: '13482212686', changeInfo: '从上海市进才中学北校转出', changeDate: '2020-07-08' },
+        { account: '13681943351', name: '许娟', phone: '13681943351', changeInfo: '从上海市进才中学北校转出', changeDate: '2020-07-08' },
+        { account: '18816921752', name: '许曼', phone: '18816921752', changeInfo: '从上海市进才中学北校转出', changeDate: '2020-07-08' },
+        { account: '18017500305', name: '龚庆', phone: '18017500305', changeInfo: '从上海市进才中学北校转出', changeDate: '2020-07-08' },
+        { account: '13901923389', name: '俞胜', phone: '13901923389', changeInfo: '从上海市进才中学北校转出', changeDate: '2020-08-30' },
+        { account: '13371935731', name: '刘涵', phone: '13371935731', changeInfo: '从上海市进才中学北校教辅转出', changeDate: '2021-06-01' }
+      ]
+    }
+  },
+  mixins: [self_viewport],
+  mounted() {
+    this.loadData()
+  },
+  methods: {
+    selectionChange(rows) {
+      this.selectedRows = rows
+    },
+    loadData() {
+      console.log('分页参数', this.pageNum, this.pageSize, this.searchKey)
+      // 接口请求示例
+      // this.$axios.get('/api/teacher/changeList', { params: { pageNum, pageSize, keyword: searchKey } }).then(res => {
+      //   this.tableData = res.data.records
+      //   this.total = res.data.total
+      // })
+    },
+    handleSearch() {
+      this.pageNum = 1
+      this.loadData()
+    },
+    pageChange(p) {
+      this.pageNum = p
+      this.loadData()
+    },
+    sizeChange(size) {
+      this.pageSize = size
+      this.pageNum = 1
+      this.loadData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 页面根容器：占满父高度，纵向弹性布局 */
+.page-wrap {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 12px;
+}
+
+/* 顶部搜索栏 固定高度不压缩 */
+.top-search-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 14px;
+  background: #f7f7f7;
+  border-radius: 4px;
+  margin-bottom: 12px;
+  flex-shrink: 0;
+}
+.placeholder-left {
+  flex: 1;
+}
+
+/* 表格区域：自动填充剩余高度，内容超出滚动 */
+.table-scroll-box {
+  flex: 1;
+  min-height: 0;
+}
+.table-scroll-box >>> .teacher-table {
+  height: 100%;
+}
+
+/* 分页容器：固定在底部，禁止被压缩、不会随表格滚动 */
+.page-fixed-bottom {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-top: 12px;
+  gap: 12px;
+  flex-shrink: 0;
+}
+.total-text {
+  font-size: 14px;
+  color: #333;
+}
+</style>