GCLS_Page_Learn/src/components/select/SelectTeacher.vue

<template>
  <el-dialog class="select-teacher" :visible="dialogVisible" width="900px" :title="$t('Key344')" @close="dialogClose">
    <!--查询条件-->
    <el-form :inline="true" :model="searchForm" size="mini">
      <el-form-item :label="$t('Key25')">
        <el-input v-model="searchForm.user_name" @keyup.enter.native="getTeacherUserList" />
      </el-form-item>
      <el-form-item :label="$t('Key27')">
        <el-input v-model="searchForm.user_real_name" @keyup.enter.native="getTeacherUserList" />
      </el-form-item>

      <el-form-item class="search-button">
        <el-button type="primary" @click="getTeacherUserList">
          <i class="el-icon-search" /> {{ $t('Key131') }}
        </el-button>
      </el-form-item>
    </el-form>

    <!--表格-->
    <el-table ref="teacherTable" :data="teacherList" height="35vh" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="user_name" :label="$t('Key191')" width="120" />
      <el-table-column prop="user_real_name" :label="$t('Key27')" width="120" />
      <el-table-column prop="org_name" :label="$t('Key204')" />
    </el-table>

    <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"
    />

    <div slot="footer">
      <el-button size="mini" @click="dialogClose">
        {{ $t('Key83') }}
      </el-button>
      <el-button type="primary" size="mini" @click="confirmTeacher">
        {{ $t('Key94') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { PageQueryOrgTeacherUserList } from '@/api/list';

export default {
  name: 'SelectTeacher',
  props: {
    dialogVisible: {
      default: false,
      type: Boolean
    },
    orgId: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      cur_page: 1,
      total_count: 0,
      page_capacity: 10,
      teacherList: [],
      orgList: [],
      searchForm: {
        user_name: '',
        user_real_name: ''
      }
    };
  },
  created() {
    this.getTeacherUserList();
    this.updateWordPack({
      word_key_list: ['Key344', 'Key25', 'Key27', 'Key131', 'Key191', 'Key204', 'Key94', 'Key83']
    });
  },
  methods: {
    getTeacherUserList() {
      let data = {
        org_id: this.orgId,
        user_name: this.searchForm.user_name,
        user_real_name: this.searchForm.user_real_name,
        page_capacity: this.page_capacity,
        cur_page: this.cur_page,
        is_valid: true,
        is_audited: true
      };

      PageQueryOrgTeacherUserList(data).then(({ cur_page, total_count, org_teacher_user_list }) => {
        this.cur_page = cur_page;
        this.total_count = total_count;
        this.teacherList = org_teacher_user_list;
      });
    },
    dialogClose() {
      this.$emit('dialogClose');
      this.$refs.teacherTable.clearSelection();
    },
    handleSelectionChange(arr) {
      this.orgList = arr.map(({ user_id }) => user_id);
    },
    changePage(newPage) {
      this.cur_page = newPage;
      this.getTeacherUserList();
    },
    changePageSize(pageSize) {
      this.page_capacity = pageSize;
      this.getTeacherUserList();
    },
    confirmTeacher() {
      this.$emit('selectTeaher', this.orgList);
    }
  }
};
</script>

<style lang="scss">
.select-teacher {
  .el-dialog__body {
    padding: 15px 20px 0;
  }

  .el-input {
    width: 100px;
  }

  .search-button {
    float: right;
  }

  .el-pagination {
    margin-top: 15px;
  }
}
</style>