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('listName')" prop="listName" label="榜单名称" />
        <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('missedClockTimes')" prop="missedClockTimes" label="允许缺卡次数" />
        <el-table-column v-if="columns.visible('integral')" prop="integral" label="奖惩积分" />
        <el-table-column label="操作" width="200px" align="center">
          <template slot-scope="scope">
            <el-button  size="mini" type="primary">
              <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" size="mini">删除</el-button>
          </el-popover>
          <el-button size="mini" type="primary" @click="seeMore(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
    <el-dialog
      title="榜单详情"
      width="75%"
      :visible.sync="showDetailDialog">
      <div>
        <el-date-picker 
          v-model="data.date" 
          @change="dateChange" 
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="date" 
          placeholder="选择打榜日期"> </el-date-picker>
        <div class="detail-box">
          <el-row>
            <el-col :span="8">
              <span>榜单名称：</span> <span>{{studyDetail.listName}}</span>
            </el-col>
            <el-col :span="8">
              <span>已打卡人数：</span> <span>{{studyDetail.listName}}</span>
            </el-col>
            <el-col :span="8" >
              <span>榜单分类：</span> <span>{{studyDetail.categoryName}}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <span>打榜时间：</span> <span>{{studyDetail.listStartTime}}</span>
            </el-col>
            <el-col :span="8">
              <span>签到时间：</span> <span>{{studyDetail.signStartTime}} ~ {{studyDetail.signEndTime}}</span>
            </el-col>
            <el-col :span="8">
              <span>截止时间：</span> <span>{{studyDetail.listEndTime}}</span>
            </el-col>
          </el-row>
        </div>
        <el-table :data="studyDetail.recordDtos" style="width: 100%" border>
          <el-table-column prop="realName" label="会员昵称">
          </el-table-column>
          <el-table-column prop="avatar" label="会员头像">
            <template slot-scope="scope">
              <a :href="scope.row.avatar" style="color: #42b983" target="_blank">
                <img :src="scope.row.avatar" alt="点击打开"  style="width:38px;height:38px;border-radius:4px;">
              </a>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="打卡内容"></el-table-column>
          <el-table-column prop="" label="内容图片">
            <template slot-scope="scope">
              <img :src="item" alt="" v-for="(item,index) in scope.row.imgPaths" :key="index"  style="width:38px;height:38px;border-radius:4px;">
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="showDetailDialog = false">确 定</el-button>
      </div>
    </el-dialog>
  </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";
// 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: {
      },
      showDetailDialog: false,
      studyId: '',
      studyDetail: [],
      data: {
        id: '',
        date: '',
      }
      
    }
  },
  watch: {
  },
  created(){
    var d = new Date();
    let y = d.getFullYear(),
        m = d.getMonth() < 10 ? '0' + d.getMonth() : d.getMonth(),
        day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate();
    this.date = y + '-' + m + '-' + day
    console.log(this.date)
  },
  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()
    },
    
    seeMore(item){
      this.showDetailDialog = true
      this.data.id = item.id
      this.getStudyDetail()
    },
    dateChange(){
      this.getStudyDetail()
    },
    getStudyDetail(){
      crudStudyList.get(this.data).then((res)=>{
        this.studyDetail = res
      })
    }
  }
}



</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;
  }
  .detail-box{
    width: 100%;
    font-size: 16px;
    padding: 24px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
    border-radius: 12px;
    margin: 20px 0;
  }
  .el-row{
    margin: 24px 0;
  }
  .title-w{
    font-size:19px;
    font-weight: bold;
    margin: 32px 0;
    color: #000;
  }
</style>