yunshengtai-admin/src/views/course/studyList.vue

<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- 新增 -->
      <div style="display: inline-block;margin: 0px 2px;">
        <el-button
          v-permission="['admin','YXARTICLE_ALL','YXARTICLE_CREATE']"
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-plus">
          <router-link :to="'/course/addStudy'"> 新增 </router-link>
        </el-button>
      </div>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column v-if="columns.visible('id')" prop="id" label="id" />
        <el-table-column v-if="columns.visible('categoryName')" prop="categoryName" label="课程分类" />
        <el-table-column v-if="columns.visible('courseStartTime')" prop="courseStartTime" label="打榜时间" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.listStartTime)}} ~ {{parseTime(scope.row.listEndTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('listEndTime')" prop="listEndTime" label="打榜结束时间" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.listEndTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('signStartTime')" prop="signStartTime" label="签到时间" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ scope.row.signStartTime }} ~ {{scope.row.signEndTime}}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('enterStartTime')" prop="enterStartTime" label="报名时间" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.enterEndTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('listName')" prop="listName" label="榜单名称" />
        <el-table-column v-if="columns.visible('missedClockTimes')" prop="missedClockTimes" label="允许缺卡次数" />
        <!-- <el-table-column v-if="columns.visible('listState')" prop="listState" label="榜单状态">
          <template slot-scope="scope">
            <span v-if="scope.row.listState ==  0">未开始</span>
            <span v-if="scope.row.listState ==  1">打榜中</span>
            <span v-if="scope.row.listState ==  2">已完成</span>
            <span v-if="scope.row.listState ==  3">已取消</span>
          </template>
        </el-table-column> -->
        <el-table-column v-if="columns.visible('integral')" prop="integral" label="奖惩积分" />
        <el-table-column label="操作" width="170px" align="center">
          <template slot-scope="scope">
            <el-button  size="mini" type="primary" icon="el-icon-edit">
              <router-link :to="'/course/addStudy/'+scope.row.id">编辑</router-link>
            </el-button>
            <el-popover
              :ref="scope.row.id"
              placement="top"
              width="180"
            >
            <p>确定删除本条数据吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
              <el-button type="primary" size="mini" @click="crud.doDelete(scope.row)">确定</el-button>
            </div>
            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini">删除</el-button>
          </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudStudyList from '@/api/StudyList'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import MaterialList from "@/components/material";
import { del } from '@/api/StudyList'
import initData from '@/mixins/crud'
// crud交由presenter持有
const defaultCrud = CRUD({ title: '学习榜', url: 'api/StudyList', sort: 'id,desc', crudMethod: { ...crudStudyList }})
const defaultForm = { 
  id: null, 
  listName: null, 
  categoryId: null, 
  imgPath: null, 
  content: null, 
  listStartTime: null, 
  listEndTime: null, 
  signStartTime: null, 
  signEndTime: null, 
  enterStartTime: null, 
  enterEndTime: null, 
  clockTimes: null, 
  missedClockTimes: null,
  createTime: null, 
  updateTime: null, 
  integral: null }
export default {
  name: 'StudyList',
  components: { pagination, crudOperation, rrOperation, udOperation ,MaterialList},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    return {
      loading: false, dialog: false,
      permission: {
        add: ['admin', 'StudyList:add'],
        edit: ['admin', 'StudyList:edit'],
        del: ['admin', 'StudyList:del']
      },
      rules: {
      },
    }
  },
  watch: {
  },
  created(){
  },
  methods: {
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      return true
    }, // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
    },
    [CRUD.HOOK.afterDelete](crud, data) {
      console.log('data',data)
      this.$refs[data.id].doClose()
    },
  }
}



</script>

<style scoped>
  .table-img {
    display: inline-block;
    text-align: center;
    background: #ccc;
    color: #fff;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
</style>