3 changed files with 474 additions and 0 deletions
@ -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 } |
||||||
@ -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> |
||||||
@ -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> |
||||||
Loading…
Reference in new issue