课表页面开发

黄何裕

2024-08-08 54e06ab83d8fbebf91f8e0c3a621da743ac5af26

 src/views/curriculum/index.vue

@@ -1,131 +1,271 @@
<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="课程" name="first" />
      <el-tab-pane label="教师" name="fourth" />
      <el-tab-pane label="场地" name="xxx" />
  <div style="padding: 20px">
    <el-tabs v-model="activeName" @tab-click="getCourses">
      <el-tab-pane label="课程" name="course" />
      <el-tab-pane label="教师" name="teacher" />
      <el-tab-pane label="场地" name="site" />
    </el-tabs>
    <div>
      <div style="width: 300px">
        <el-date-picker v-model="timeData" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>
      <div style="display: flex">
        <div class="timetable-b w100">
          <table class="timetable-content w100">
            <thead>
              <tr>
                <th></th>
                <th v-for="(item1, index1) in weeks" :key="index1">
                  xxx
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item2, index2) in maxCourseLength" :key="index2">
                <td>
                  <p>{{ xxx }}</p>
                </td>
                <template v-for="(item3, index3) in weeks">
                  <td
                    :key="index3"
                    :rowspan="
                      showData(index3, index2 + 1).subject &&
                      showData(index3, index2).subject ===
                        showData(index3, index2 + 1).subject
                        ? 2
                        : ''
                    "
                    :style="[
                      {
                        display:
                          showData(index3, index2 - 1).subject &&
                          showData(index3, index2 - 1).subject ===
                            showData(index3, index2).subject
                            ? 'none'
                            : '',
                      },
                    ]"
                  >
                    <div
                      class="dmsjandjs-b"
                      :style="[
                        {
                          background: showData(index3, index2).index
                            ? getRandomColor()
                            : '#FFFFFF',
                        },
                        { color: '#fff' },
                        { borderRadius: '15px' },
                        { padding: '12px' },
                        { height: '100%' },
                      ]"
                    >
                      <p>
                        {{ showData(index3, index2).startTime }}
                        {{ showData(index3, index2).startTime ? "-" : "" }}
                        {{ showData(index3, index2).endTime }}
                      </p>
                      <p>{{ showData(index3, index2).subject }}</p>
                      <p>{{ showData(index3, index2).major }}</p>
                      <p>{{ showData(index3, index2).class }}</p>
                    </div>
                  </td>
                </template>
              </tr>
            </tbody>
          </table>
    <div style="margin-bottom: 20px">
      <el-date-picker
        v-model="time"
        type="date"
        size="small"
        placeholder="选择日期"
        @change="getCourses"
      >
      </el-date-picker>
    </div>
    <el-row>
      <el-col :span="1" style="margin-top: 7px"
        ><div
          class=""
          v-for="i in tiemData"
          :key="i"
          style="display: flex; flex-direction: row-reverse; margin: 32px 10px"
        >
          {{ i }}
        </div></el-col
      >
      <el-col :span="23">
        <div class="table_box">
          <div
            :style="{ display: 'flex', width: dataList.length * 200 + 'px' }"
          >
            <div
              v-for="(i, index) in dataList"
              :key="i.id"
              class="header_box"
              :id="0 < index ? 'header_boxA' : ''"
            >
              {{ i.name }}
            </div>
          </div>
          <div style="display: flex; position: relative">
            <div v-for="(i, index) in dataList" :key="i.id">
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div
                v-for="(j, index) in i.sessions"
                :key="index"
                :style="{
                  width: '200px',
                  backgroundColor: j.color,
                  position: 'absolute',
                  top: getTop(j.beginTime),
                  height: getHeight(j.beginTime, j.endTime),
                  borderRadius: '5px',
                  fontSize: '15px',
                }"
                @click="lookDetails(j)"
              >
                <div>{{ j.staffNames }}</div>
                <span>{{ j.placeNames }}</span>
                <div>
                  学员：{{ j.playerCount }}人 请假：{{ j.placeCount }}人
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-drawer :title="drawerTime" :visible.sync="drawer" direction="rtl">
      <div v-if="drawerIf">
        <div style="display: flex; justify-content: center">
          <i class="el-icon-time"></i> {{ headerTime }}
        </div>
        <div>
          <el-form ref="form" label-width="80px">
            <el-form-item label="课程">
              <span>{{ formData.courseName }}</span>
            </el-form-item>
            <el-form-item label="老师">
              <span>{{ formData.staffNames }}</span>
            </el-form-item>
            <el-form-item label="场地">
              <span>{{ formData.placeNames }}</span>
            </el-form-item>
            <el-form-item label="学员">
              <div style="display: flex; align-items: center;">
                <el-progress
                  style="width: 300px"
                  :percentage="
                    Math.floor(
                      (formData.playerCount / formData.playerMax) * 100
                    )
                  "
                ></el-progress>
                <span
                  >学员{{ formData.playerCount }}人/上限{{
                    formData.playerMax
                  }}人</span
                >
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    </el-drawer>
  </div>
</template>

<script>
import { getList } from "@/api/table";

import {
  getBySessionExistsOfDay,
  getSubjectByCourseAndDateRange,
} from "@/api/curriculum";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
  props: {
    // 下午节次数
    afternoonLength: {
      type: [String, Number],
      default: 6,
    },
    // 总节次
    length: {
      type: [String, Number],
      default: 14,
    },
    // 课表数据
    // events: {
    //   type: Array,
    //   default: this.events1,
    // },
  },
  data() {
    return {
      list: null,
      listLoading: true,
      activeName: "first",
      timeData: new Date(),
      // 课程表数据
      tiemData: [
        "07:00",
        "08:00",
        "09:00",
        "10:00",
        "11:00",
        "12:00",
        "13:00",
        "14:00",
        "15:00",
        "16:00",
        "17:00",
        "18:00",
        "19:00",
        "20:00",
      ],
      time: new Date(),
      dataList: [],
      drawerTime: new Date(),
      drawerIf: true,
      drawer: false,
      headerTime: "",
      formData: {},
      activeName:'course'
    };
  },
  mounted() {
    this.mergeData();
  },
  watch: {
    events: {
      handler(newVal, oldVal) {
        this.mergeData();
      },
      deep: true,
    },
  },
  created() {
    this.fetchData();
    this.getCourses();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getList().then((response) => {
        this.list = response.data.items;
        this.listLoading = false;
    getCourses() {
      let data = {
        staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
        day: this.getYMD(this.time),
      };
      getBySessionExistsOfDay(data).then((res) => {
        let courseIds = [];
        res.data.findBySessionExistsOfDay.map((i) => {
          courseIds.push(i.id);
        });
        let params = {
          staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
          beginDate: this.getYMD(this.time),
          endDate: this.getYMD(this.time),
          courseIds: courseIds,
        };
        getSubjectByCourseAndDateRange(params).then((res) => {
          this.dataList = res.data.findSubjectByCourseAndDateRange[0].subjects;
        });
      });
    },
     //随机获取颜色
     getRandomColor() {
      let colorList = this.colorList;
      let colorRandom = Math.floor(Math.random() * colorList.length + 1) - 1;
      let color;
      for (let i = 0; colorList.length > i; i++) {
        if (i == colorRandom) {
          color = colorList[i];
        }
      }
      return color;
    getYMD(time) {
      const year = time.getFullYear();
      const month = (time.getMonth() + 1).toString().padStart(2, "0");
      const day = time.getDate().toString().padStart(2, "0");
      return `${year}/${month}/${day}`;
    },
    getTop(time) {
      let tiemData = new Date(time);
      return (tiemData.getHours() - 7 + tiemData.getMinutes() / 60) * 50 + "px";
    },
    getHeight(beginTime, endTime) {
      let time = new Date(beginTime);
      let timeA = new Date(endTime);
      return ((timeA - time) / 1000 / 60 / 60) * 50 + "px";
    },
    lookDetails(i) {
      const month = (this.time.getMonth() + 1).toString().padStart(2, "0");
      const day = this.time.getDate().toString().padStart(2, "0");
      this.drawerTime = `${month}/${day}(${this.getDayOfWeek(this.time)})`;
      this.headerTime =
        new Date(i.beginTime).getHours().toString().padStart(2, "0") +
        ":" +
        new Date(i.beginTime).getMinutes().toString().padStart(2, "0") +
        "-" +
        new Date(i.endTime).getHours().toString().padStart(2, "0") +
        ":" +
        new Date(i.endTime).getMinutes().toString().padStart(2, "0");
      this.formData = i;
      this.drawer = true;
    },
    getDayOfWeek(timestamp) {
      const days = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      const date = new Date(timestamp);
      return days[date.getDay()];
    },
  },
};
</script>
<style scoped>
.table_box {
  overflow-x: auto;
  white-space: nowrap;
}
.header_box {
  height: 50px;
  width: 200px;
  border: 2px solid rgb(165, 165, 165);
  background-color: rgb(212, 241, 255);
  display: flex;
  align-items: center;
  justify-content: center;
}
#header_boxA {
  border-left: none;
}
.body_box {
  height: 50px;
  width: 200px;
  border: 2px solid rgb(165, 165, 165);
  border-top: none;
}
</style>