wanzb_admin/src/views/match/index.vue

<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" :inline="true">
          <el-form-item label="赛事名称">
            <el-input
              @clear="getData()"
              clearable
              v-model="queryParams.name"
              placeholder="请输入赛事名称"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item label-width="10" >
            <el-button type="primary" @click="getData" size="mini"
              >筛选</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              >新增赛事</el-button
            >
          </el-form-item>
    </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 label="赛事状态">
        <template slot-scope="scope">
            <span v-if="scope.row.match_status==1">待发布</span>
            <span v-if="scope.row.match_status==2">开始报名</span>
            <span v-if="scope.row.match_status==3">比赛中</span>
            <span v-if="scope.row.match_status==4">比赛结束</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="start_time" label="比赛开始时间" />
      <el-table-column align="center" prop="end_time" label="比赛结束时间" />
      <el-table-column align="center" prop="signup_start_time" label="报名开始时间" />
      <el-table-column align="center" prop="signup_end_time" label="报名结束时间" />
      <el-table-column align="center" prop="player_price" label="选手价格" />
      <el-table-column align="center" prop="viewer_price" label="游客价格" />
      <el-table-column align="center" prop="date" label="操作" width="150">
        <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="signup_start_time">
          <el-date-picker
            v-model="form.signup_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="signup_end_time">
          <el-date-picker
            v-model="form.signup_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="post_start_time">
          <el-date-picker
            v-model="form.post_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="player_price">
          <el-input
            clearable
            v-model="form.player_price"
            placeholder="请输入选手报名价格"
          ></el-input>
        </el-form-item>
        <el-form-item label="游客价格" prop="viewer_price">
          <el-input
            clearable
            v-model="form.viewer_price"
            placeholder="请输入游客报名价格"
          ></el-input>
        </el-form-item>
        <el-form-item label="赛事状态" prop="match_status">
          <el-select v-model="form.match_status" placeholder="">
            <el-option
              v-for="item in matchStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="奖项内容">
          <el-input type="textarea" v-model="form.awards_content"></el-input>
        </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,
    "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" },
        ],
        player_price: [
          { required: true, message: "请输入选手报名价格", trigger: "blur" },
        ],
        viewer_price: [
          { required: true, message: "请输入游客报名价格", trigger: "blur" },
        ],
      },
      matchList: [],
      groupList: [],
      userList: [],
      matchStatus:[{
        label:"待发布",
        value:1,
      },{
        label:"开始报名",
        value:2,
      },{
        label:"比赛中",
        value:3,
      },{
        label:"已结束",
        value:4,
      }]
    };
  },
  methods: {
    del(id) {
      this.$confirm("确定删除吗?", "提示", {
        type: "warning",
      }).then(() => {
        this.$api.delMatch({ id: id }).then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getData();
        });
      });
    },
    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;
      });
    },
    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();
            });
          } 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;
    },
    // 选择月份
    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>