eep_page/src/views/home/index.vue

<template>
  <div class="home">
    <div class="home-title">
      <span>教材列表</span>
      <el-button type="primary" @click="createBook">创建教材</el-button>
    </div>

    <div class="home-tabs">
      <span
        v-for="{ label, value } in publishStatusList"
        :key="value"
        :class="['tab-item', value === publish_status ? 'active' : '']"
        @click="publish_status = value"
      >
        {{ label }}
      </span>
    </div>

    <div class="search">
      <span class="search-name">搜索</span>
      <el-input
        v-model="name"
        placeholder="全部"
        suffix-icon="el-icon-search"
        @keyup.enter.native="pageQueryBookList"
      />
      <span class="search-name">创建者</span>
      <el-select v-model="creator_id" placeholder="全部" @change="pageQueryBookList">
        <el-option label="-全部- " value="" />
        <el-option
          v-for="{ user_id, user_real_name } in user_list"
          :key="user_id"
          :label="user_real_name"
          :value="user_id"
        />
      </el-select>
    </div>

    <el-table :data="data" height="100%">
      <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-column prop="operation" label="操作" width="245" fixed="right">
        <template slot-scope="{ row }">
          <span class="link" @click="editBook(row.id)">编辑</span>
          <span
            :class="['link', { danger: row.publish_status === publishStatusList[0].value }]"
            @click="
              row.publish_status === publishStatusList[0].value ? setUnpublishForBook(row.id) : listingBook(row.id)
            "
          >
            {{ row.publish_status === publishStatusList[0].value ? '下架' : '上架' }}
          </span>
          <span class="link danger" @click="deleteBook(row.id)">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="cur_page"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="page_capacity"
      layout="total, prev, pager, next, sizes, jumper"
      :total="total_count"
      @prev-click="changePage"
      @next-click="changePage"
      @current-change="changePage"
      @size-change="changePageSize"
    />

    <ListingDialog :id="curId" :visible.sync="dialogVisible" @PublishSuccess="publishSuccess" />
  </div>
</template>

<script>
import ListingDialog from './components/ListingDialog.vue';

import { PageQueryBookList, GetBookCreatorList, SetPublishStatusForBook, DeleteBook } from '@/api/book';

export default {
  name: 'HomePage',
  components: {
    ListingDialog,
  },
  data() {
    return {
      data: undefined,
      name: '',
      creator_id: '',
      cur_page: 1,
      page_capacity: 10,
      total_count: 0,
      publish_status: 1,
      user_list: [],
      publishStatusList: [
        {
          label: '已上架',
          value: 1,
        },
        {
          label: '草稿',
          value: 0,
        },
      ],
      curId: '',
      dialogVisible: false,
    };
  },
  watch: {
    publish_status: {
      handler() {
        this.pageQueryBookList();
      },
    },
  },
  created() {
    GetBookCreatorList().then(({ user_list }) => {
      this.user_list = user_list;
    });
    this.pageQueryBookList();
  },
  methods: {
    createBook() {
      this.$router.push('/book/create');
    },
    changePage(number) {
      this.cur_page = number;
      this.pageQueryBookList();
    },
    changePageSize(size) {
      this.page_capacity = size;
      this.pageQueryBookList();
    },
    // 分页查询教材列表
    pageQueryBookList() {
      PageQueryBookList({
        name: this.name,
        creator_id: this.creator_id,
        cur_page: this.cur_page,
        page_capacity: this.page_capacity,
        sys_version_type: 1,
        publish_status: this.publish_status,
      }).then(({ book_list, total_count }) => {
        this.data = book_list;
        this.total_count = total_count;
      });
    },
    /**
     * 编辑教材
     * @param {string} book_id 教材id
     */
    editBook(book_id) {
      this.$router.push(`/book/create?book_id=${book_id}`);
    },
    /**
     * 上架教材
     * @param {string} id 教材id
     */
    listingBook(id) {
      this.dialogVisible = true;
      this.curId = id;
    },
    // 下架教材
    setUnpublishForBook(book_id) {
      SetPublishStatusForBook({ book_id, publish_status: 0, publish_scope: 0 }).then(() => {
        this.pageQueryBookList();
      });
    },
    /**
     * 上架成功事件
     */
    publishSuccess() {
      this.pageQueryBookList();

      const div = document.createElement('div');
      div.style.cssText = `
        width: 227px;
        height: 212px;
        border-radius: 12px;
        background-color: #4ABB38;
        position: fixed;
        top: 20%;
        left: calc(50% - 113px);
        display: flex;
        flex-direction: column;
        row-gap: 32px;
        justify-content: center;
        align-items: center;
        color: #fff;
      `;

      const check = document.createElement('div');
      check.style.cssText = `
        width: 50px;
        height: 25px;
        border-bottom: 4px solid #fff;
        border-left: 4px solid #fff;
        transform: rotate(-45deg);
      `;
      div.appendChild(check);

      const span = document.createElement('span');
      span.innerHTML = '上架成功';
      div.appendChild(span);
      document.body.appendChild(div);

      setTimeout(() => {
        document.body.removeChild(div);
      }, 1000);
    },
    /**
     * 删除教材
     * @param {string} id 教材id
     */
    deleteBook(id) {
      this.$confirm('是否删除该教材？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          DeleteBook({ id, is_force_delete: 'true' }).then(() => {
            this.pageQueryBookList();
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  min-height: calc(100% - 16px);
  padding: 24px;
  margin: 0 24px 16px;
  background-color: #fff;
  border-radius: 4px;

  &-title {
    display: flex;
    justify-content: space-between;

    &:first-child {
      font-size: 20px;
      font-weight: bold;
    }
  }

  &-tabs {
    display: flex;
    column-gap: 10px;

    .tab-item {
      padding: 5px 16px;
      font-size: 14px;
      cursor: pointer;
      border-radius: 16px;

      &.active {
        font-weight: bold;
        color: $main-color;
        background-color: $fill-color;
      }
    }
  }

  .search {
    display: grid;
    grid-template-rows: 30px 32px;
    grid-template-columns: repeat(2, 200px);
    grid-auto-flow: column;
    column-gap: 24px;

    &-name {
      font-size: 14px;
      color: $font-light-color;
    }
  }
}
</style>