GCLS_Page_BMS/src/views/oboc/SelectBook.vue

<template>
  <el-dialog width="1000px" title="选择教材" :visible="visible" :before-close="close" :close-on-click-modal="false">
    <div class="book-search">
      <el-input v-model="name" placeholder="教材名称" @keyup.enter.native="pageQueryBookList" />
      <el-button type="primary" @click="pageQueryBookList">搜索</el-button>
    </div>
    <CommonTable
      :page-size="page_capacity"
      :min-height="350"
      :total="total_count"
      :current-page="cur_page"
      @prev-click="changePage($event, pageQueryBookList)"
      @next-click="changePage($event, pageQueryBookList)"
      @current-change="changePage($event, pageQueryBookList)"
      @size-change="changePageSize($event, pageQueryBookList)"
    >
      <el-table :data="list" max-height="400px" highlight-current-row @current-change="handleCurrentChange">
        <el-table-column label="序号" width="64">
          <template slot-scope="{ $index }">
            <span>{{ $index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="教材名称" width="248" />
        <el-table-column prop="label_name_list_desc" label="标签" width="124" />
        <el-table-column prop="creator_name" label="创建者" width="160" />
        <el-table-column prop="create_time" label="创建时间" width="180" />
        <el-table-column prop="last_modifier_name" label="最近编辑" width="180" />
        <el-table-column prop="last_modify_time" label="最近编辑时间" width="180" />
        <el-table-column prop="description" label="简介" />
      </el-table>
    </CommonTable>
    <div slot="footer">
      <el-button type="primary" @click="confirm">确定</el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'SelectBook'
};
</script>

<script setup>
import { ref, defineEmits } from 'vue';

import { useList } from '@/utils/list';
import { PageQueryBookList } from '@/api/list';
import { MessageBox } from 'element-ui';

import CommonTable from '@/components/common/CommonTable.vue';

defineProps({
  visible: Boolean
});

const emits = defineEmits(['confirm', 'close']);

const { page_capacity, cur_page, total_count, list, changePage, changePageSize } = useList();

let name = ref('');
function pageQueryBookList() {
  PageQueryBookList({
    name: name.value,
    org_id: '',
    publish_status: 1,
    creator_id: '',
    sys_version_type: -1,
    page_capacity: page_capacity.value,
    cur_page: cur_page.value
  }).then(({ book_list, total_count: total, cur_page: page }) => {
    list.value = book_list;
    total_count.value = total;
    cur_page.value = page;
  });
}
pageQueryBookList();

let book = ref({
  book_id: '',
  book_name: ''
});
function handleCurrentChange(curRow) {
  if (curRow === null) {
    book.value = { book_id: '', book_name: '' };
    return;
  }

  const { id, name } = curRow;
  book.value = { book_id: id, book_name: name };
}

function confirm() {
  if (!book.value.book_id) {
    MessageBox.alert('请先选择教材', '提示', {
      confirmButtonText: '确定',
      type: 'warning'
    });
    return;
  }
  emits('confirm', book.value.book_id, book.value.book_name);
}

function close() {
  emits('close');
}
</script>

<style lang="scss" scoped>
.book-search {
  display: flex;
  align-items: center;

  .el-input {
    width: 200px;
    margin-right: 20px;
  }
}
</style>