GCLS_Page_Exercise/src/views/home/personal_question/index.vue

<!-- 个人题库 -->
<template>
  <div class="personal">
    <HomeCommon ref="common" :data="exercise_list" :total="total_count" @getList="pageQueryExerciseList">
      <template #default>
        <el-table-column prop="index" label="序号" width="65">
          <template slot-scope="{ $index }">{{ $index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="name" label="练习名称" width="180" />
        <el-table-column prop="tag" label="标签" width="120">
          <template slot-scope="{ row }">
            <span v-for="(item, i) in row.label_list" :key="i" class="tag">{{ item }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator_name" label="创建者" width="120" />
        <el-table-column prop="create_time" label="创建时间" width="140" />
        <el-table-column prop="last_modifier_name" label="最近编辑" width="100" />
        <el-table-column prop="last_modify_time" label="最近编辑时间" width="140" />
        <el-table-column prop="intro" label="简介" width="200" />
        <el-table-column label="状态" width="90">
          <template slot-scope="{ row }">
            <span :class="statusList[row.status].class">{{ statusList[row.status].name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作">
          <template slot-scope="{ row }">
            <span class="link" @click="$router.push({ path: '/exercise', query: { id: row.id } })">编辑</span>
            <span class="link">分享</span>
            <span class="link">公开</span>
            <span class="link danger" @click="deleteExercise(row.id)">删除</span>
          </template>
        </el-table-column>
      </template>

      <template #operation>
        <el-button type="primary" @click="createExercise">创建练习</el-button>
      </template>

      <template #search>
        <span class="search-name">搜索</span>
        <el-input
          v-model="searchData.search_content"
          placeholder="全部"
          suffix-icon="el-icon-search"
          @keyup.enter.native="getPageList"
        />

        <span class="search-name">创建者</span>
        <el-input v-model="searchData.creator_name" placeholder="请输入内容" @keyup.enter.native="getPageList" />

        <span class="search-name">状态</span>
        <el-select v-model="searchData.status_list" multiple placeholder="全部" @change="getPageList">
          <el-option v-for="{ label, value } in statusType" :key="value" :label="label" :value="value" />
        </el-select>
      </template>
    </HomeCommon>

    <CreateExercise :dialog-visible.sync="dialogVisible" />
  </div>
</template>

<script>
import { PageQueryExerciseList, DeleteExercise } from '@/api/exercise';

import HomeCommon from '../common.vue';
import CreateExercise from './CreateExercise.vue';

export default {
  name: 'PersonalQuestion',
  components: {
    HomeCommon,
    CreateExercise
  },
  data() {
    return {
      // 搜索数据
      searchData: {
        search_content: '',
        creator_name: '',
        status_list: []
      },
      statusType: [
        { label: '未发布', value: 0 },
        { label: '已发布', value: 1 }
      ],
      statusList: [
        { name: '未发布', class: 'unpublished' },
        { name: '已发布', class: 'published' }
      ],
      // 表格数据
      exercise_list: [],
      total_count: 0, // 总条数
      dialogVisible: false
    };
  },
  methods: {
    getPageList() {
      this.$refs.common.getList();
    },
    pageQueryExerciseList(data) {
      PageQueryExerciseList({ ...data, store_type: 1, ...this.searchData }).then(({ total_count, exercise_list }) => {
        this.total_count = total_count;
        this.exercise_list = exercise_list;
      });
    },
    deleteExercise(exercise_id) {
      DeleteExercise({ exercise_id })
        .then(() => {
          this.$message.success('删除成功');
          this.getPageList();
        })
        .catch(() => {
          this.$message.error('删除失败');
        });
    },

    createExercise() {
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.personal {
  height: 100%;

  .unpublished,
  .published {
    display: flex;
    align-items: center;

    &::before {
      display: inline-block;
      width: 6px;
      height: 6px;
      margin-right: 8px;
      content: '';
      border-radius: 50%;
    }
  }

  .published {
    &::before {
      background-color: $main-color;
    }
  }

  .unpublished {
    &::before {
      background-color: $danger-color;
    }
  }
}
</style>