新增学习打榜模块

src/api/StudyList.js

@@ -0,0 +1,34 @@
+import request from '@/utils/request'
+
+export function add(data) {
+  return request({
+    url: 'api/StudyList',
+    method: 'post',
+    data
+  })
+}
+
+export function del(ids) {
+  return request({
+    url: 'api/StudyList/',
+    method: 'delete',
+    data: ids
+  })
+}
+
+export function edit(data) {
+  return request({
+    url: 'api/StudyList',
+    method: 'put',
+    data
+  })
+}
+
+export function get(id) {
+  return request({
+    url: 'api/StudyList/info/?id=' + id,
+    method: 'get'
+  })
+}
+
+export default { add, edit, del, get }

src/views/course/addStudy.vue

@@ -0,0 +1,281 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="110px">
+      <el-form-item label="分类">
+        <el-cascader
+          v-model="form.categoryId"
+          :options="categoryList"
+          :show-all-levels="false"
+          :props="{ checkStrictly: true }"
+          @change="handleChange">
+        </el-cascader>
+      </el-form-item>
+      <el-form-item label="打榜时间">
+        <el-date-picker
+            v-model="form.listStartTime"
+            type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="请选择打榜开始时间"
+            :picker-options="listStart">
+          </el-date-picker>
+          <span>~</span>
+          <el-date-picker
+            v-model="form.listEndTime"
+            type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="请选择打榜结束时间"
+            :picker-options="listEnd">
+          </el-date-picker>
+      </el-form-item>
+      <el-form-item label="打卡时间">
+        <el-time-select
+          v-model="form.signStartTime"
+          :picker-options="{
+            start: '00:30',
+            step: '00:15',
+            end: '24:00'
+          }"
+          placeholder="请选择打卡开始时间">
+        </el-time-select>
+        <span>~</span>
+        <el-time-select
+          v-model="form.signEndTime"
+          :picker-options="{
+            start: form.signStartTime,
+            step: '00:15',
+            end: '24:00'
+          }"
+          placeholder="请选择打卡结束时间">
+        </el-time-select>
+      </el-form-item>
+      <el-form-item label="报名截止时间">
+        <el-date-picker
+            v-model="form.enterEndTime"
+            type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="请选择报名结束时间">
+          </el-date-picker>
+      </el-form-item>
+      <el-form-item label="要求打卡次数">
+        <el-input-number v-model="form.clockTimes" :min="1" label="请输入要求打卡次数"></el-input-number>
+      </el-form-item>
+      <el-form-item label="允许缺卡次数">
+        <el-input-number v-model="form.missedClockTimes" :min="1" label="请输入允许缺卡次数"></el-input-number>
+      </el-form-item>
+      <el-form-item label="榜单状态">
+        <el-radio-group v-model="form.listState">
+          <el-radio :label="0">未开始</el-radio>
+          <el-radio :label="1">打榜中</el-radio>
+          <el-radio :label="2">已完成</el-radio>
+          <el-radio :label="3">已取消</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="榜单介绍">
+        <!--<editor v-model="form.content" />-->
+        <ueditor-wrap v-model="form.content" :config="myConfig"  @beforeInit="addCustomDialog"  style="width: 90%;"></ueditor-wrap>
+      </el-form-item>
+      <el-form-item label="奖惩积分">
+        <el-input v-model="form.integral" style="width: 370px;" />
+      </el-form-item>
+      <el-form-item>
+        <!--<el-button type="text" @click="cancel">取消</el-button>-->
+        <el-button :loading="loading" type="primary" @click="doSubmit">保存</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import { add, edit, get } from '@/api/StudyList'
+import yamedit from '@/components/YamlEdit'
+import MaterialList from '@/components/material'
+import UeditorWrap from 'vue-ueditor-wrap';
+import { initData } from '@/api/data'
+export default {
+  components: { yamedit, MaterialList, UeditorWrap },
+  data() {
+    return {
+      loading: false, dialog: false,
+      form: {
+        id: null, 
+        categoryId: null, 
+        imgPath: null, 
+        content: null, 
+        listStartTime: null, 
+        listEndTime: null, 
+        signStartTime: null, 
+        signEndTime: null, 
+        enterStartTime: null, 
+        enterEndTime: null, 
+        clockTimes: null, 
+        missedClockTimes: null,
+        listState: null, 
+        createTime: null, 
+        updateTime: null, 
+        integral: null
+      },
+      rules: {
+      },
+      categoryList:[],  
+      listStart: {
+        disabledDate: time => {
+          const endDateVal = new Date(this.form.listEndTime).getTime()
+          if (endDateVal) {
+            return time.getTime() > endDateVal - 0
+          }
+        }
+      },
+      listEnd: {
+        disabledDate: time => {
+          const beginDateVal = new Date(this.form.listStartTime).getTime()
+          if (beginDateVal) {
+            return time.getTime() < beginDateVal - 0
+          }
+        }
+      },
+      myConfig: {
+        autoHeightEnabled: false, // 编辑器不自动被内容撑高
+        initialFrameHeight: 500, // 初始容器高度
+        initialFrameWidth: '100%', // 初始容器宽度
+        UEDITOR_HOME_URL: '/UEditor/',
+        serverUrl: ''
+      }
+    }
+  },
+  watch: {
+  },
+  created() {
+    this.getCategory();
+    this.form.id = this.$route.params.id
+    this.$nextTick(() => {
+      //this.init()
+      if(this.form.id){
+        console.log(this.form.id)
+        get(this.form.id).then(data => {
+          this.form = data
+        })
+      }
+    })
+  },
+  methods: {
+    getCategory(){
+      initData('/api/CourseCategory',this.getQueryParams()).then((res)=>{
+        // console.log(res)
+        res.content.forEach((item)=>{
+          item.label = item.categoryName
+          item.value = item.id
+          item.children = item.categoryList
+          item.categoryList.forEach((child)=>{
+            child.label = child.categoryName
+            child.value = child.id
+            child.children = child.categoryList
+          })
+        })
+        this.categoryList = res.content   
+      })
+    },
+    getQueryParams: function() {
+      return {
+        page: 1,
+        size: 10,
+        sort: ['id,desc'],
+      }
+    },
+    handleChange(value){
+      console.log(value)
+      this.form.categoryId = value[value.length-1];
+    },
+    addCustomDialog () {
+      window.UE.registerUI('yshop', function (editor, uiName) {
+        let dialog = new window.UE.ui.Dialog({
+          iframeUrl: '/yshop/materia/index',
+          editor: editor,
+          name: uiName,
+          title: '上传图片',
+          cssRules: 'width:1200px;height:500px;padding:20px;'
+        });
+        this.dialog = dialog;
+        var btn = new window.UE.ui.Button({
+          name: 'dialog-button',
+          title: '上传图片',
+          cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
+          onclick: function () {
+            dialog.render();
+            dialog.open();
+          }
+        });
+
+        return btn;
+      }, 37);
+    },
+    cancel() {
+      this.resetForm()
+    },
+    doSubmit() {
+      this.loading = true
+      if (!this.form.id) {
+        this.doAdd()
+      } else {
+        this.doEdit()
+      }
+    },
+    doAdd() {
+      add(this.form).then(res => {
+        this.resetForm()
+        this.$notify({
+          title: '添加成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.loading = false
+       // this.$parent.init()
+        setTimeout(() => {
+          this.$router.push({ path: '/course/studyList' });
+        }, 500);
+      }).catch(err => {
+        this.loading = false
+        console.log(err.response.data.message)
+      })
+    },
+    doEdit() {
+      edit(this.form).then(res => {
+        this.resetForm()
+        this.$notify({
+          title: '修改成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.loading = false
+       // this.$parent.init()
+        setTimeout(() => {
+          this.$router.push({ path: '/course/studyList' });
+        }, 500);
+      }).catch(err => {
+        this.loading = false
+        console.log(err.response.data.message)
+      })
+    },
+    resetForm() {
+      this.dialog = false
+      this.$refs['form'].resetFields()
+      this.form = {
+        id: '', 
+        categoryId: '', 
+        imgPath: '', 
+        content: '', 
+        listStartTime: '', 
+        listEndTime: '', 
+        signStartTime: '', 
+        signEndTime: '', 
+        enterStartTime: '', 
+        enterEndTime: '', 
+        clockTimes: '', 
+        missedClockTimes: '',
+        listState: '', 
+        createTime: '', 
+        updateTime: '', 
+        integral: ''
+      }
+    }
+  }
+}
+</script>

src/views/course/studyList.vue

@@ -0,0 +1,159 @@
+<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('clockTimes')" prop="clockTimes" 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="150px" 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-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, 
+  categoryId: null, 
+  imgPath: null, 
+  content: null, 
+  listStartTime: null, 
+  listEndTime: null, 
+  signStartTime: null, 
+  signEndTime: null, 
+  enterStartTime: null, 
+  enterEndTime: null, 
+  clockTimes: null, 
+  missedClockTimes: null,
+  listState: 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>