You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
278 lines
10 KiB
278 lines
10 KiB
<template> |
|
<div class="page"> |
|
<h6 class="p-title">筛选</h6> |
|
<div class="tool mul"> |
|
<ul class="filter"> |
|
<li> |
|
<label>创建时间：</label> |
|
<div class="single-choice"> |
|
<dl> |
|
<dd> |
|
<el-radio-group size="small" v-model="form.month" @change="changeType"> |
|
<el-radio v-for="(item,index) in dateList" :key="index" :label="item.id" border>{{ item.name }}</el-radio> |
|
</el-radio-group> |
|
</dd> |
|
</dl> |
|
</div> |
|
</li> |
|
<li> |
|
<label>创建区间：</label> |
|
<el-date-picker v-model="date" align="right" unlink-panels size="small" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable></el-date-picker> |
|
</li> |
|
<li> |
|
<label>搜索：</label> |
|
<el-input placeholder="请输入竞赛名称/创建人" suffix-icon="el-icon-search" v-model="keyword" clearable size="small"></el-input> |
|
</li> |
|
</ul> |
|
<div> |
|
<el-button type="primary" size="small" round @click="add" v-auth>创建竞赛</el-button> |
|
</div> |
|
</div> |
|
|
|
<el-table ref="table" :data="matchData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
|
<el-table-column type="index" width="60" label="序号" align="center"> |
|
<template slot-scope="scope"> |
|
{{ scope.$index + (pageNo - 1) * pageSize + 1 }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="name" label="竞赛名称" align="center"></el-table-column> |
|
<el-table-column prop="applicantNum" label="报名人数" align="center" width="150"> |
|
<template slot-scope="scope"> |
|
{{ scope.row.applicantNum ? scope.row.applicantNum : 0 }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="status" label="状态" align="center" width="150"> |
|
<template slot-scope="scope"> |
|
{{ transferPublishStatus[scope.row.publishStatus] }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="time" label="竞赛时间" align="center" width="300"> |
|
<template slot-scope="scope"> |
|
{{ scope.row.playStartTime }} ~ {{ scope.row.playEndTime }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="gmtCreate" label="创建时间" align="center" width="200"></el-table-column> |
|
<el-table-column prop="founder" label="创建人" align="center" width="200"></el-table-column> |
|
<el-table-column label="操作" align="center" width="100"> |
|
<template slot-scope="scope"> |
|
<el-button type="text" @click="manage(scope.row)" v-auth>管理</el-button> |
|
<el-divider direction="vertical"></el-divider> |
|
<el-button type="text" @click="delData(scope.row)" v-auth>删除</el-button> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="发布状态" align="center" width="120"> |
|
<template slot-scope="scope"> |
|
<el-switch |
|
v-model="scope.row.publishStatus" |
|
:active-value="0" |
|
:inactive-value="1" |
|
style="margin: 0 10px 0 5px" |
|
:active-text="scope.row.publishStatus ? '关' : '开'" |
|
@change="switchOff($event,scope.row,scope.$index)" |
|
v-auth="'match:禁用'" |
|
></el-switch> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<div class="pagination"> |
|
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo"> |
|
</el-pagination> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import util from "@/libs/util"; |
|
|
|
export default { |
|
name: "match", |
|
data() { |
|
return { |
|
keyword: "", |
|
statusList: [ |
|
{ |
|
value: "", |
|
name: "不限" |
|
}, |
|
{ |
|
value: 1, |
|
name: "待发布" |
|
}, |
|
{ |
|
value: 0, |
|
name: "已发布" |
|
} |
|
], |
|
matchData: [], |
|
form: { |
|
month: "", |
|
publishStatus: "", |
|
startTime: "", |
|
endTime: "" |
|
}, |
|
multipleSelection: [], |
|
dateList: [ |
|
{ |
|
id: "", |
|
name: "不限" |
|
}, |
|
{ |
|
id: 1, |
|
name: "近一个月" |
|
}, |
|
{ |
|
id: 3, |
|
name: "近三个月" |
|
}, |
|
{ |
|
id: 6, |
|
name: "近六个月" |
|
} |
|
], |
|
date: [], |
|
pageNo: 1, |
|
pageSize: 10, |
|
totals: 0, |
|
transferPublishStatus: ["已发布", "未发布"] |
|
}; |
|
}, |
|
watch: { |
|
"form.month": function(val) { |
|
if (val) { |
|
let unit = 24 * 60 * 60 * 1000; |
|
this.date = [util.formatDate("yyyy-MM-dd", new Date(new Date().getTime() - unit * 30 * val)), util.formatDate("yyyy-MM-dd", new Date(new Date().getTime() + unit))]; |
|
} else { |
|
this.date = []; |
|
} |
|
}, |
|
date: function(val) { |
|
if (val) { |
|
this.form.startTime = val[0]; |
|
this.form.endTime = val[1]; |
|
} else { |
|
this.form.startTime = ""; |
|
this.form.endTime = ""; |
|
} |
|
this.initData(); |
|
}, |
|
keyword: function(val) { |
|
clearTimeout(this.searchTimer); |
|
this.searchTimer = setTimeout(() => { |
|
this.initData(); |
|
}, 500); |
|
} |
|
}, |
|
mounted() { |
|
this.getData(); |
|
}, |
|
methods: { |
|
getData() { |
|
let data = {}; |
|
if (this.form.month) data.month = this.form.month; |
|
if (this.keyword) data.name = this.keyword; |
|
if (this.form.publishStatus !== "") data.publishStatus = this.form.publishStatus; |
|
if (this.form.startTime) data.startTime = this.form.startTime; |
|
if (this.form.endTime) data.endTime = this.form.endTime; |
|
this.$get(`${this.api.queryContestByCondition}/${this.pageNo}/${this.pageSize}`, data).then(res => { |
|
this.matchData = res.contestList; |
|
this.totals = res.total; |
|
this.$refs.table.clearSelection(); |
|
if (!this.matchData.length && this.totals) { |
|
this.pageNo--; |
|
this.getData(); |
|
} |
|
}).catch(res => { |
|
}); |
|
}, |
|
initData() { |
|
this.pageNo = 1; |
|
this.getData(); |
|
}, |
|
add() { |
|
this.$router.push("add"); |
|
}, |
|
manage(row) { |
|
this.$router.push(`manage?id=${row.id}`); |
|
}, |
|
|
|
changeType() { |
|
this.$refs.table.clearSelection(); |
|
this.initData(); |
|
}, |
|
delData(row) { |
|
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
|
type: "warning" |
|
}) |
|
.then(() => { |
|
this.$del(`${this.api.deleteContest}/${row.id}`).then(res => { |
|
util.successMsg("删除成功"); |
|
this.getData(); |
|
}).catch(res => { |
|
}); |
|
}) |
|
.catch(() => { |
|
}); |
|
}, |
|
delAllData() { |
|
if (this.multipleSelection.length != "") { |
|
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
|
type: "warning" |
|
}).then(() => { |
|
let delList = this.multipleSelection.map(item => { |
|
return item.id; |
|
}); |
|
this.$post(this.api.deleteContest, delList).then(res => { |
|
this.multipleSelection = []; |
|
this.$refs.table.clearSelection(); |
|
util.successMsg("删除成功"); |
|
this.getData(); |
|
}).catch(res => {}); |
|
}).catch(() => {}); |
|
} else { |
|
util.errorMsg("请先选择数据 ！"); |
|
} |
|
}, |
|
handleSelectionChange(val) { |
|
this.multipleSelection = val; |
|
}, |
|
handleCurrentChange(val) { |
|
this.pageNo = val; |
|
this.getData(); |
|
}, |
|
transferTime(date, type) { |
|
if (date == "0000-00-00 00:00:00") return "---"; |
|
return date; |
|
}, |
|
switchOff(val, row, index) { |
|
this.$put(`${this.api.publishContest}/${row.id}/${val}`) |
|
.then(res => { |
|
val == 1 ? util.warningMsg("该赛事信息已隐藏对学生端用户不可见") : util.successMsg("该赛事信息已对学生端用户公开"); |
|
}) |
|
.catch(err => { |
|
}); |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
/deep/ .tool { |
|
.filter { |
|
.el-input { |
|
min-width: 190px; |
|
} |
|
} |
|
} |
|
|
|
@media(max-width: 1640px) { |
|
.page .page-content .tool .filter { |
|
flex-wrap: wrap; |
|
margin-bottom: -15px; |
|
|
|
li { |
|
min-width: 34%; |
|
margin-bottom: 15px; |
|
} |
|
} |
|
} |
|
</style> |