FE_occupationlab_server/src/pages/match/add/set.vue

<template>
  <div>
    <el-card shadow="hover" class="m-b-20">
      <div>
        <p class="m-b-20">比赛名称</p>
        {{ form.stageName }}
      </div>
    </el-card>
    <el-card shadow="hover" class="m-b-20">
      <div>
        <p class="m-b-20">比赛时间</p>
        <div class="date-inputs">
          起止时间：
          <div style="display: inline-flex;align-items: center;">
            <el-date-picker v-model="form.time" type="datetimerange" range-separator="~" start-placeholder="开始日期"
              end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
              @change="timeChange">
            </el-date-picker>
            <el-alert style="width: auto;padding: 4px 16px;margin-left: 10px;"
              :title="'(请设置在 ' + step1.playStartTime + ' ~ ' + step1.playEndTime + '间)'" type="error" :closable="false"
              effect="dark">
            </el-alert>
          </div>
        </div>
      </div>
    </el-card>
    <el-card shadow="hover" class="mgr20 m-b-20">
      <div>
        <p class="m-b-20">课程</p>
        <div class="inline-input">
          <el-cascader v-model="mallIds" :options="curs" :props="{ checkStrictly: true, value: 'id' }"
            popper-class="course-cas" @expand-change="curChange" @change="curChange"></el-cascader>
        </div>
      </div>
    </el-card>
    <el-card shadow="hover" class="m-b-20">
      <div class="flex-between m-b-20">
        <span>实训项目</span>
        <div style="display: inline-flex;">
          <div>
            <el-input placeholder="请输入项目名称" prefix-icon="el-icon-search" v-model.trim="keyword" clearable></el-input>
          </div>
          <el-button style="margin-left: 5px" type="primary" round @click="toProject">自定义实验项目</el-button>
        </div>
      </div>
      <!-- 实训项目表格 -->
      <el-table :data="projects" class="table" header-align="center">
        <el-table-column width="60" label="选择" align="center">
          <template slot-scope="scope">
            <el-radio v-model="form.projectId" :label="scope.row.projectId">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="projectName" label="项目名称" align="center"></el-table-column>
        <el-table-column prop="auth" label="项目权限" align="center">
          <template slot-scope="scope">
            {{ permissionsKeys[scope.row.permissions] }}
          </template>
        </el-table-column>
        <el-table-column prop="founder" label="创建人" align="center">
          <template slot-scope="scope">
            {{ scope.row.founder ? '老师创建' : '系统内置' }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
        <!-- <el-table-column label="操作" align="center">
								<template slot-scope="scope">
										<el-button type="text" @click="showProject(scope.row)">查看</el-button>
								</template>
						</el-table-column>  -->
      </el-table>
      <div class="pagination">
        <el-pagination background :page-size="pageSize" @current-change="handleCurrentChange"
          layout="total,prev, pager, next" :total="total"></el-pagination>
      </div>
    </el-card>

    <div style="text-align: center">
      <el-button @click="back">返回</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </div>
</template>

<script>
import util from "@/libs/util";
import { Loading } from 'element-ui'
export default {
  props: ['form', 'step1'],
  data () {
    return {
      loadIns: null,
      curriculumList: [],
      curs: [],
      mallIds: [],
      keyword: '',
      projects: [],
      page: 1,
      pageSize: 5,
      total: 0,
      sysId: '',
      permissionsKeys: ['练习', '考核', '竞赛'],
      timeInvalid: false
    };
  },
  watch: {
    // 监听信息是否有更改,有的话页面离开的时候要询问是否要保存
    form: {
      handler () {
        this.updateTime++
      },
      deep: true
    },
    keyword: function (val) {
      clearTimeout(this.searchTimer);
      this.searchTimer = setTimeout(() => {
        this.initData();
      }, 500);
    }
  },
  mounted () {
    this.getSystemData()
  },
  methods: {
    // 获取课程
    async getSystemData () {
      const { data } = await this.$get(this.api.getSystemIdBySchool)
      const res = await this.$get(this.api.getSchoolEffectiveCourse)
      const { mallId, cid, systemId } = this.form
      if (res.data.length) {
        res.data.map(e => {
          e.id = e.mallId
          e.label = e.curriculumName
          e.children = data.filter(n => e.systemId.split(',').includes(n.id + '')) // 筛选出该课程下的系统
        })
        this.curs = res.data

        // 查询项目
        const first = res.data[0]
        this.mallIds = [mallId || first.mallId, systemId || data[0].id]
        this.form.mallId = mallId || first.mallId
        this.form.cid = cid || first.cid
        this.sysId = systemId || first.systemId
        this.loadIns = Loading.service()
        this.getProject()
      }
    },
    // 课程选择回调
    curChange (val) {
      const id = val[0]
      const item = this.curs.find(e => e.id == id)
      if (val.length === 1) {
        // 如果选择的是课程，则默认选中下面第一个系统
        this.mallIds = [id, item.children[0].id]
      }
      this.form.mallId = id
      this.form.cid = item.cid
      this.sysId = this.mallIds[1]
      this.loadIns = Loading.service()
      this.getProject()
    },


    // 查询项目
    getProject () {
      this.$post(this.api.getProjectAssessmentByCompetition, {
        pageNum: this.page,
        pageSize: this.pageSize,
        cid: this.form.cid,
        projectName: this.keyword,
        systemId: this.sysId,
        permissions: 2
      }).then(({ data }) => {
        this.projects = data.records
        this.total = data.total
        this.loadIns.close()
      }).catch(err => {
        this.loadIns.close()
      });
    },
    initData () {
      this.page = 1;
      this.getProject();
    },
    handleCurrentChange (val) {
      this.page = val;
      this.getProject();
    },
    // 自定义项目
    toProject () {
      const { form, curStep } = this.$parent
      form[curStep] = this.form
      this.$parent.pass = 1
      this.$store.commit('match/setCache', {
        form,
        curStep
      })
      this.$router.push(`/project/list?show=1`)
    },
    // 时间选择回调
    timeChange (val) {
      if (val.length) {
        const startTime = new Date(val[0])
        const endTime = new Date(val[1])
        const { playStartTime, playEndTime } = this.step1
        if (startTime < new Date(playStartTime) || endTime > new Date(playEndTime)) {
          this.timeInvalid = true
          return util.warningMsg('设置的阶段比赛时间必须要在第一步设置的竞赛时间范围内，请重新设置。')
        }
        this.timeInvalid = false
        const { form, curStep } = this.$parent
        for (const i in form) {
          // 判断其他阶段的时间跟当前选的时间是否重叠
          if (i !== curStep) {
            const time1 = new Date(form[i].startTime)
            const time2 = new Date(form[i].endTime)
            if ((startTime >= time1 && startTime <= time2) || (endTime >= time1 && endTime <= time2)) {
              util.warningMsg('请注意，所设置的时间与已设置的阶段时间重合。')
              break
            }
          }
        }
      }
    },
    // 提交
    save () {
      const { form } = this
      if (!form.time.length) return util.warningMsg('请选择比赛时间')
      const { playStartTime, playEndTime } = this.step1
      if (new Date(form.time[0]) < new Date(playStartTime) || new Date(form.time[1]) > new Date(playEndTime)) return util.warningMsg('设置的阶段比赛时间必须要在第一步设置的竞赛时间范围内，请重新设置。')
      if (!form.cid) return util.warningMsg('请选择课程')
      if (!form.projectId) return util.warningMsg('请选择项目')
      const { systemId, systemName, projectName } = this.projects.find(e => e.projectId == form.projectId)
      if (systemId) form.systemId = systemId
      if (projectName) form.projectName = projectName
      if (systemName) form.systemName = systemName
      form.startTime = form.time[0]
      form.endTime = form.time[1]
      this.$emit('hideSet', this.form)
    },
    // 返回
    back () {
      this.$emit('update:form', this.$parent.curOriginForm)
      this.$emit('hideSet')
    }
  }
};
</script>

<style scoped lang="scss"></style>