|
|
@@ -1,199 +1,291 @@
|
|
|
+<style lang="scss" scoped>
|
|
|
+.blue {
|
|
|
+ background: red !important;
|
|
|
+}
|
|
|
+</style>
|
|
|
<template>
|
|
|
- <section class="content">
|
|
|
- <h4>赛事管理</h4>
|
|
|
- <el-divider></el-divider>
|
|
|
- <el-form label-width="80px" class="filter-form">
|
|
|
- <el-row>
|
|
|
- <el-col :span="6">
|
|
|
- <el-form-item label="赛事名称">
|
|
|
- <el-input @clear="getData()" clearable v-model="queryParams.name" placeholder="请输入赛事名称" size="mini"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="4">
|
|
|
- <el-form-item label-width="10" style='margin-left:10px'>
|
|
|
- <el-button type="primary" @click="getData" size="mini">筛选</el-button>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- plain
|
|
|
- icon="el-icon-plus"
|
|
|
- size="mini"
|
|
|
- @click="handleAdd"
|
|
|
- >新增赛事</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- <el-table v-loading='loading' :data="list" style="width: 100%;margin-top:10px;" height="50vh">
|
|
|
- <el-table-column align="center" prop="name" label="赛事名称"/>
|
|
|
- <el-table-column align="center" prop="join_count" label="参赛人数"/>
|
|
|
- <el-table-column align="center" prop="out_count" label="退赛人数"/>
|
|
|
- <el-table-column align="center" prop="groups" label="比赛分组"/>
|
|
|
- <el-table-column align="center" prop="start_time" label="开始时间"/>
|
|
|
- <el-table-column align="center" prop="end_time" label="结束时间"/>
|
|
|
- <el-table-column align="center" prop="date" label="操作">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button @click="title='编辑赛事',open=true,form=scope.row" size="mini" type="warning">编辑</el-button>
|
|
|
- <el-button @click="del(scope.row.id)" size="mini" type="danger">删除</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <Page
|
|
|
- ref="pageButton"
|
|
|
- :current="form.page"
|
|
|
- :page_size="form.page_size"
|
|
|
- :total="total"
|
|
|
- @pageChange="gopage"
|
|
|
- />
|
|
|
- <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
|
|
|
- <el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
|
- <el-form-item label="比赛名称" prop="name">
|
|
|
- <el-input clearable v-model="form.name" placeholder="请输入比赛名称"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="开始时间" prop="start_time">
|
|
|
- <el-date-picker
|
|
|
- v-model="form.start_time"
|
|
|
- type="date"
|
|
|
- placeholder="选择日期"
|
|
|
- format="yyyy-MM-dd"
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
- size="mini"
|
|
|
- >
|
|
|
- </el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="结束时间" prop="end_time">
|
|
|
- <el-date-picker
|
|
|
- v-model="form.end_time"
|
|
|
- type="date"
|
|
|
- placeholder="选择日期"
|
|
|
- format="yyyy-MM-dd"
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
- size="mini"
|
|
|
- >
|
|
|
- </el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="报单日历">
|
|
|
- <el-calendar :range="dateRange">
|
|
|
- <template
|
|
|
- slot="dateCell"
|
|
|
- slot-scope="{date, data}">
|
|
|
- <p :class="data.isSelected ? 'is-selected' : ''">
|
|
|
- {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
|
|
|
- </p>
|
|
|
- </template>
|
|
|
- </el-calendar>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
- <el-button @click="open=false">取 消</el-button>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- </section>
|
|
|
+ <section class="content">
|
|
|
+ <h4>赛事管理</h4>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <el-form label-width="80px" class="filter-form">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="赛事名称">
|
|
|
+ <el-input
|
|
|
+ @clear="getData()"
|
|
|
+ clearable
|
|
|
+ v-model="queryParams.name"
|
|
|
+ placeholder="请输入赛事名称"
|
|
|
+ size="mini"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-form-item label-width="10" style="margin-left: 10px">
|
|
|
+ <el-button type="primary" @click="getData" size="mini"
|
|
|
+ >筛选</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ icon="el-icon-plus"
|
|
|
+ size="mini"
|
|
|
+ @click="handleAdd"
|
|
|
+ >新增赛事</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <el-table
|
|
|
+ v-loading="loading"
|
|
|
+ :data="list"
|
|
|
+ style="width: 100%; margin-top: 10px"
|
|
|
+ height="50vh"
|
|
|
+ >
|
|
|
+ <el-table-column align="center" prop="name" label="赛事名称" />
|
|
|
+ <el-table-column align="center" prop="join_count" label="参赛人数" />
|
|
|
+ <el-table-column align="center" prop="out_count" label="退赛人数" />
|
|
|
+ <el-table-column align="center" prop="groups" label="比赛分组" />
|
|
|
+ <el-table-column align="center" prop="start_time" label="开始时间" />
|
|
|
+ <el-table-column align="center" prop="end_time" label="结束时间" />
|
|
|
+ <el-table-column align="center" prop="date" label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button @click="edit(scope.row)" size="mini" type="warning"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-button @click="del(scope.row.id)" size="mini" type="danger"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <Page
|
|
|
+ ref="pageButton"
|
|
|
+ :current="form.page"
|
|
|
+ :page_size="form.page_size"
|
|
|
+ :total="total"
|
|
|
+ @pageChange="gopage"
|
|
|
+ />
|
|
|
+ <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
|
+ <el-form-item label="比赛名称" prop="name">
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ v-model="form.name"
|
|
|
+ placeholder="请输入比赛名称"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="开始时间" prop="start_time">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.start_time"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ format="yyyy-MM-dd"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ size="mini"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="结束时间" prop="end_time">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.end_time"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ format="yyyy-MM-dd"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ size="mini"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="报单日历" prop="calendar">
|
|
|
+ <full-calendar
|
|
|
+ :events="monthData"
|
|
|
+ class="test-fc"
|
|
|
+ first-day="1"
|
|
|
+ locale="fr"
|
|
|
+ @changeMonth="changeMonth"
|
|
|
+ @eventClick="eventClick"
|
|
|
+ @dayClick="dayClick"
|
|
|
+ @moreClick="moreClick"
|
|
|
+ lang="zh"
|
|
|
+ >
|
|
|
+ </full-calendar>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
+ <el-button @click="open = false">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </section>
|
|
|
</template>
|
|
|
<script>
|
|
|
import Page from "../../components/Page";
|
|
|
+import { FullCalendar } from "vue-fullcalendar";
|
|
|
export default {
|
|
|
- components: {
|
|
|
- Page,
|
|
|
+ components: {
|
|
|
+ Page,
|
|
|
+ "full-calendar": require("vue-fullcalendar"),
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ monthData: [],
|
|
|
+ dateRange: ["2021-12-01", "2022-01-02"],
|
|
|
+ loading: false,
|
|
|
+ queryParams: {
|
|
|
+ page: 1,
|
|
|
+ },
|
|
|
+ form: {monthData:[]},
|
|
|
+ list: [{}, {}],
|
|
|
+ total: 0,
|
|
|
+ title: "新增赛事",
|
|
|
+ open: false,
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: "请输入比赛名称", trigger: "blur" }],
|
|
|
+ start_time: [
|
|
|
+ { required: true, message: "请输入开始时间", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ end_time: [
|
|
|
+ { required: true, message: "请输入结束时间", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ matchList: [],
|
|
|
+ groupList: [],
|
|
|
+ userList: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ del(id) {
|
|
|
+ this.$confirm("确定删除吗?", "提示", {
|
|
|
+ type: "warning",
|
|
|
+ }).then(() => {
|
|
|
+ this.$api.delMatch({ id: id }).then((res) => {
|
|
|
+ this.$message({
|
|
|
+ message: "删除成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.getData();
|
|
|
+ });
|
|
|
+ });
|
|
|
},
|
|
|
- data(){
|
|
|
- return{
|
|
|
- dateRange:[
|
|
|
- "2021-12-01",
|
|
|
- "2022-01-02"
|
|
|
- ],
|
|
|
- loading:false,
|
|
|
- queryParams:{
|
|
|
- page:1
|
|
|
- },
|
|
|
- form:{},
|
|
|
- list:[{},{}],
|
|
|
- total:0,
|
|
|
- title:'新增赛事',
|
|
|
- open:false,
|
|
|
- rules:{
|
|
|
- name: [
|
|
|
- { required: true, message: '请输入比赛名称', trigger: 'blur' }
|
|
|
- ],
|
|
|
- start_time: [
|
|
|
- { required: true, message: '请输入开始时间', trigger: 'blur' }
|
|
|
- ],
|
|
|
- end_time: [
|
|
|
- { required: true, message: '请输入结束时间', trigger: 'blur' }
|
|
|
- ]
|
|
|
- },
|
|
|
- matchList:[],
|
|
|
- groupList:[],
|
|
|
- userList:[]
|
|
|
- }
|
|
|
+ edit(row) {
|
|
|
+ this.open = true;
|
|
|
+ this.form = row;
|
|
|
+ this.monthData = JSON.parse(row.calendar);
|
|
|
+ },
|
|
|
+ gopage(size) {
|
|
|
+ if (size) {
|
|
|
+ this.queryParams.page_size = size;
|
|
|
+ }
|
|
|
+ this.queryParams.page = this.$refs.pageButton.page;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ this.loading = true;
|
|
|
+ this.$api.getMatchList().then((res) => {
|
|
|
+ this.matchList = res.data.data;
|
|
|
+ });
|
|
|
+ this.$api.getGroupList().then((res) => {
|
|
|
+ this.groupList = res.data.data;
|
|
|
+ });
|
|
|
+ this.$api.getUserSearch().then((res) => {
|
|
|
+ this.userList = res.data.data;
|
|
|
+ });
|
|
|
+ //
|
|
|
+ this.$api.getMatchs(this.queryParams).then((res) => {
|
|
|
+ this.list = res.data.data.list;
|
|
|
+ this.total = res.data.data.total;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
},
|
|
|
- methods:{
|
|
|
- del(id) {
|
|
|
- this.$confirm("确定删除吗?", "提示", {
|
|
|
- type: "warning",
|
|
|
- }).then(() => {
|
|
|
- this.$api.delMatch({ id: id }).then((res) => {
|
|
|
- this.$message({
|
|
|
- message: "删除成功",
|
|
|
- type: "success",
|
|
|
+ handleAdd() {
|
|
|
+ this.open = true;
|
|
|
+ this.title = "新增赛事";
|
|
|
+ this.form = {};
|
|
|
+ },
|
|
|
+ /** 提交按钮 */
|
|
|
+ submitForm() {
|
|
|
+ this.$refs["form"].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (this.monthData.length == 0) {
|
|
|
+ this.$message.error("请设置报单日历!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.form.calendar = JSON.stringify(this.monthData);
|
|
|
+ let valid_dates = [];
|
|
|
+ this.monthData.forEach((item) => {
|
|
|
+ valid_dates.push(item.start);
|
|
|
+ });
|
|
|
+ this.form.valid_dates = valid_dates;
|
|
|
+ this.valid_dates = JSON.stringify(valid_dates);
|
|
|
+ if (this.form.id != null) {
|
|
|
+ this.$api.updateMatch(this.form).then((response) => {
|
|
|
+ this.msgSuccess("修改成功");
|
|
|
+ this.open = false;
|
|
|
+ this.getData();
|
|
|
});
|
|
|
- this.getData();
|
|
|
+ } else {
|
|
|
+ this.$api.addMatch(this.form).then((response) => {
|
|
|
+ this.msgSuccess("新增成功");
|
|
|
+ this.open = false;
|
|
|
+ this.getData();
|
|
|
});
|
|
|
- });
|
|
|
- },
|
|
|
- gopage(size) {
|
|
|
- if (size) {
|
|
|
- this.queryParams.page_size = size;
|
|
|
- }
|
|
|
- this.queryParams.page = this.$refs.pageButton.page;
|
|
|
- this.getData();
|
|
|
- },
|
|
|
- getData(){
|
|
|
- this.loading = true;
|
|
|
- this.$api.getMatchList().then(res=>{
|
|
|
- this.matchList=res.data.data
|
|
|
- })
|
|
|
- this.$api.getGroupList().then(res=>{
|
|
|
- this.groupList=res.data.data
|
|
|
- })
|
|
|
- this.$api.getUserSearch().then(res=>{
|
|
|
- this.userList=res.data.data
|
|
|
- })
|
|
|
- //
|
|
|
- this.$api.getMatchs(this.queryParams).then(res=>{
|
|
|
- this.list=res.data.data.list
|
|
|
- this.total = res.data.data.total;
|
|
|
- this.loading = false;
|
|
|
- })
|
|
|
- },
|
|
|
- handleAdd(){
|
|
|
- this.open=true;
|
|
|
- this.title='新增赛事';
|
|
|
- this.form={}
|
|
|
- },
|
|
|
- /** 提交按钮 */
|
|
|
- submitForm() {
|
|
|
- this.$refs["form"].validate(valid => {
|
|
|
- if (valid) {
|
|
|
- if (this.form.id != null) {
|
|
|
- this.$api.updateMatch(this.form).then(response => {
|
|
|
- this.msgSuccess("修改成功");
|
|
|
- this.open = false;
|
|
|
- this.getData();
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.$api.addMatch(this.form).then(response => {
|
|
|
- this.msgSuccess("新增成功");
|
|
|
- this.open = false;
|
|
|
- this.getData();
|
|
|
- });
|
|
|
- }
|
|
|
+ }
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+ formatDate(date) {
|
|
|
+ var y = date.getFullYear();
|
|
|
+ var m = date.getMonth() + 1;
|
|
|
+ m = m < 10 ? "0" + m : m;
|
|
|
+ var d = date.getDate();
|
|
|
+ d = d < 10 ? "0" + d : d;
|
|
|
+ return y + "-" + m + "-" + d;
|
|
|
},
|
|
|
- created(){
|
|
|
- this.getData()
|
|
|
- }
|
|
|
-}
|
|
|
+ // 选择月份
|
|
|
+ changeMonth(start, end, current) {
|
|
|
+ console.log("changeMonth", start, end, current);
|
|
|
+ },
|
|
|
+ // 点击事件
|
|
|
+ eventClick(event, jsEvent, pos) {
|
|
|
+ console.log("eventClick", event, jsEvent, pos);
|
|
|
+ },
|
|
|
+ // 点击当天
|
|
|
+ dayClick(day, jsEvent) {
|
|
|
+ let curDate = this.formatDate(new Date(day));
|
|
|
+ let selDate = { title: "报单", start: curDate, end: curDate };
|
|
|
+ if (this.monthData.filter((item) => item.start == curDate).length == 0) {
|
|
|
+ this.monthData.push(selDate);
|
|
|
+ } else {
|
|
|
+ this.removeAaary(this.monthData,selDate)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 查看更多
|
|
|
+ moreClick(day, events, jsEvent) {
|
|
|
+ console.log("moreCLick", day, events, jsEvent);
|
|
|
+ },
|
|
|
+ removeAaary(_arr, _obj) {
|
|
|
+ var length = _arr.length;
|
|
|
+ for (var i = 0; i < length; i++) {
|
|
|
+
|
|
|
+ if (_arr[i].start === _obj.start) {
|
|
|
+ if (i == 0) {
|
|
|
+ _arr.shift(); //删除并返回数组的第一个元素
|
|
|
+ return _arr;
|
|
|
+ } else if (i == length - 1) {
|
|
|
+ _arr.pop(); //删除并返回数组的最后一个元素
|
|
|
+ return _arr;
|
|
|
+ } else {
|
|
|
+ _arr.splice(i, 1); //删除下标为i的元素
|
|
|
+ return _arr;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
xjc