GCLS_Page_Learn/src/components/select/SelectTemplate.vue

<template>
  <el-dialog
    :visible="dialogVisible"
    width="900px"
    :title="$t('Key288')"
    :close-on-click-modal="false"
    @close="dialogClose"
  >
    <!-- 查询条件 -->
    <div class="query-criteria">
      <el-form :inline="true" :model="searchForm" size="mini">
        <el-form-item :label="$t('Key339')">
          <el-input v-model.trim="searchForm.name" @keyup.enter.native="queryCourseList" />
        </el-form-item>

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

    <el-table
      ref="templateTable"
      :data="courseList"
      height="40vh"
      highlight-current-row
      @current-change="handleCurrentChange"
    >
      <el-table-column prop="name" :label="$t('Key191')" width="320" />
      <el-table-column :label="$t('Key250')">
        <template slot-scope="{ row }">
          <i class="el-icon-date" /> {{ row.begin_date }} - {{ row.end_date }}
        </template>
      </el-table-column>
    </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="confirmTemplate">
        {{ $t('Key94') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { PageQueryCourseList } from '@/api/table';

export default {
  props: {
    dialogVisible: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      cur_page: 1,
      total_count: 0,
      page_capacity: 10,
      searchForm: {
        name: ''
      },
      courseList: [],
      currentRow: null
    };
  },
  created() {
    this.queryCourseList();
    this.updateWordPack({
      word_key_list: ['Key288', 'Key339', 'Key131', 'Key191', 'Key250', 'Key83', 'Key94', 'Key340']
    });
  },
  methods: {
    queryCourseList() {
      const queryCriteria = {
        is_template: true,
        name: this.searchForm.name,
        page_capacity: this.page_capacity,
        cur_page: this.cur_page,
        release_status: 1
      };
      PageQueryCourseList(queryCriteria).then(({ course_list, total_count }) => {
        this.courseList = course_list;
        this.total_count = total_count;
      });
    },
    changePage(newPage) {
      this.cur_page = newPage;
      this.queryCourseList();
    },
    changePageSize(pageSize) {
      this.page_capacity = pageSize;
      this.queryCourseList();
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    dialogClose() {
      this.$emit('dialogClose');
      this.$refs.templateTable.clearSelection();
    },
    confirmTemplate() {
      if (!this.currentRow) {
        return this.$message.warning(this.$i18n.t('Key340'));
      }
      this.$emit('confirmTemplate', this.currentRow.id);
    }
  }
};
</script>

<style lang="scss">
@import '~@/styles/mixin';

@include dialog;
@include pagination;

.query-criteria .el-form {
  display: flex;
  justify-content: space-between;
}
</style>