dy-admin-manager/src/views/resetTeaming/components/archicesComponents/trainPlan.vue

<template>
  <div>
    <el-alert
      title="训练规划"
      :closable="false"
      class="alert marginBtm22"
      type="info"
    >
      <template slot="title">
        <div class="alerTitle">
          <p>
            师资安排
            <span style="color: red; font-weight: bold"
              >该乐团声部课剩余 2 课时、合奏课 4 课时未进行教学规划</span
            >
          </p>
          <el-button type="text" @click="addPlan">+新增训练规划</el-button>
        </div>
      </template>
    </el-alert>
    <save-form
      :inline="true"
      class="searchForm"
      save-key="teamTrainPlan"
      ref="searchForm"
      @submit="search"
      @reset="onReSet"
      :model.sync="searchForm"
    >
      <el-form-item prop="year" label="年份">
        <el-date-picker
          style="width: 180px !important"
          v-model="searchForm.year"
          type="year"
          value-format="yyyy"
          placeholder="选择年"
          :clearable="false"
          @change="changeYear"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="term" label="学期">
        <el-select
          :disabled="!searchForm.year"
          class="multiple"
          filterable
          style="width: 180px !important"
          v-model.trim="searchForm.term"
          placeholder="请选择学期"
          @change="changeTerm"
        >
          <el-option value="0" label="上学期"></el-option>
          <el-option value="1" label="下学期"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="classGroupId" label="班级">
        <el-select
          :disabled="!searchForm.term || !searchForm.year"
          v-model.trim="searchForm.classGroupId"
          filterable
          placeholder="请选择班级"
        >
          <el-option
            v-for="(item, index) in classList"
            :key="index"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="课程类型"
        prop="courseType"
        :rules="[
          { required: true, message: '请选择课程类型', trigger: 'blur' },
        ]"
      >
        <el-select
          :disabled="
            !searchForm.term || !searchForm.year || !searchForm.classGroupId
          "
          style="width: 180px !important"
          class="multiple"
          v-model.trim="searchForm.courseScheduleType"
          filterable
          placeholder="课程类型"
        >
          <el-option
            v-for="(item, index) in courseTypeList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </save-form>
    <div class="timerWrap">
      <div class="timerList">
        <el-timeline>
          <!--   timestamp="2018/4/12"  :timestamp="item.timestamp" -->
          <!-- {timer:time,index:`第${index+1}次训练`,courseType:filterCourseType[val],timestamp:timestamp} -->
          <el-timeline-item
            v-for="item in planList"
            :key="item.timestamp"
            placement="top"
            :hide-timestamp="true"
          >
            {{ item.index }}
            <div class="timeline">
              <h4 class="time">{{ item.timer }}</h4>
              <p class="cuorseType">{{ item.courseType }}</p>
              <p class="concat"> <Tooltip :content="item.plan.value || '暂无规划'" /></p>
              <el-button
                class="button"
                :disabled="!item.plan.value || !item.timer"
                type="text"
                @click="resetPlan(item)"
                >修改</el-button
              >
              <el-button
                class="button"
                :disabled="Boolean(item.timer)"
                type="text"
                @click="detelePlan(item)"
                >删除</el-button
              >
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <el-dialog
      :title="planTitle"
      :visible.sync="planVisible"
      width="1100px"
      v-if="planVisible"
    >
      <addplan
        ref="addPlan"
        :form="searchForm"
        :planList="planList"
        :currentIndex="currentIndex"
        :maxPlansNum="maxPlansNum"
        :courseTypeList="courseTypeList"
        :classList="classList"
        :isAdd="isAdd"
        :activeItem="activeItem"
        @close="close"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="planVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitPlan">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getMusicGroupAllClass } from "@/api/buildTeam";
import { getCourseType, getPlanCourseNum, getMusicGroupTrainPlan } from "./api";
import { filterCourseType } from "@/constant/index";
import addplan from "./modals/addPlan";
import Tooltip from '@/components/Tooltip/index'
export default {
  components: { addplan ,Tooltip},
  data() {
    return {
      searchForm: {
        year: "",
        classGroupId: "",
        term: "",
        courseScheduleType: "",
        musicGroupId: "",
      },
      classList: [],
      courseTypeList: [],
      planList: [],
      planTitle: "",
      planVisible: false,
      currentIndex: 0,
      addIndex:0,
      resetIndex:0,
      maxPlansNum: 0,
      isAdd: false,
      activeItem:null
    };
  },
  created() {
    let date = new Date();
    this.searchForm.year = String(date.getFullYear());
    // console.log('year',date.getFullYear())
    let month = date.getMonth() + 1;
    if (month > 3 && month < 8) {
      this.searchForm.term = "0";
    } else {
      this.searchForm.term = "1";
    }
  },
  mounted() {
    this.teamid = this.$route.query.id;
    this.getMusicClass();
  },
  methods: {
    search() {},
    onReSet() {},
    getMusicClass() {
      getMusicGroupAllClass({ musicGroupId: this.teamid }).then((res) => {
        if (res.code == 200) {
          this.classList = res.data;
          if (this.classList.length < 1) {
            this.$message.error("当前乐团暂无班级");
            return;
          }
          this.searchForm.classGroupId = this.classList[0].id;
        }
      });
    },
    async getCourseList(obj) {
      try {
        this.searchForm.courseScheduleType = "";
        const res = await getCourseType(obj);
        if (!res.data || res.data.length <= 0) {
          this.$message.error("当前学期暂无课程类型");
        } else {
          this.courseTypeList = [];
          res.data.forEach((course) => {
            if (filterCourseType[course]) {
              this.courseTypeList.push({
                label: filterCourseType[course],
                value: course,
              });
            }
          });
          this.searchForm.courseScheduleType = this.courseTypeList[0].value;
        }
      } catch (e) {
        console.log(e);
      }
    },
    changeYear(val) {
      if (val) {
        if (this.searchForm.classGroupId && this.searchForm.term) {
          let obj = {
            classGroupId: this.searchForm.classGroupId,
            musicGroupId: this.teamid,
            term: this.searchForm.term,
            year: val,
          };
          this.getCourseList(obj);
        }
      } else {
        this.searchForm.courseScheduleType = "";
      }
    },
    changeTerm(val) {
      if (val) {
        if (this.searchForm.classGroupId && this.searchForm.year) {
          let obj = {
            classGroupId: this.searchForm.classGroupId,
            musicGroupId: this.teamid,
            term: val,
            year: this.searchForm.year,
          };
          this.getCourseList(obj);
        }
      } else {
        this.searchForm.courseScheduleType = "";
      }
    },
    addPlan() {
      if (this.maxPlansNum > 0) {
        this.planTitle = "新增训练规划";
        this.isAdd = true;
        this.activeItem = null;
        this.planVisible = true;
        this.currentIndex = this.addIndex;
      } else {
        this.$message.error("已添加所有课时规划");
      }
    },
    submitPlan() {
      this.$refs.addPlan.submit();
    },
    close() {
      this.planVisible = false;
      let obj = {
        classGroupId: this.searchForm.classGroupId,
        musicGroupId: this.teamid,
        term: this.searchForm.term,
        year: this.searchForm.year,
        courseScheduleType: this.searchForm.courseScheduleType,
      };
      console.log(obj);
      this.getList(obj);
    },
    async getList(obj) {
      try {
        const res2 = await getMusicGroupTrainPlan(obj);
        let dayjs = this.$helpers.dayjs;
        let timestamp;
        // 判断 是规划多 还是课多
        let classDates = res2.data.classDates;
        let musicGroupTrainPlans = res2.data.musicGroupTrainPlans;
        if (classDates.length < 1) {
          this.$message.error("当前学期该班级暂无此类型课程");
          return;
        }
        if (classDates.length >= musicGroupTrainPlans.length) {
          this.planList = res2.data.classDates.map((time, index) => {
            let dayStr = time.substring(0, 19);
            timestamp = dayjs(dayStr).valueOf();

            return {
              num:index + 1,
              timer: time,
              index: `第${index + 1}次训练`,
              courseType: filterCourseType[this.searchForm.courseScheduleType],
              timestamp: timestamp,
              plan: null,
            };
          });
          this.addIndex = musicGroupTrainPlans.length + 1;
          this.maxPlansNum = classDates.length - musicGroupTrainPlans.length;
          this.planList.forEach((item, index) => {
            item.plan = {
              id: res2.data.musicGroupTrainPlans[index]?.id,
              value: res2.data.musicGroupTrainPlans[index]?.plan,
            };
          });
        } else {
          // 规划多 课少
          this.planList = res2.data.musicGroupTrainPlans.map((item, index) => {
            return {
              num:index + 1,
              timer: null,
              index: `第${index + 1}次训练`,
              courseType: filterCourseType[this.searchForm.courseScheduleType],
              timestamp: null,
              plan: { id: item.id, value: item.plan },
            };
          });

          this.planList.forEach((item, index) => {
            let time = res2.data?.classDates[index];
            let timestamp;
            if (time) {
              let dayStr = time.substring(0, 19);
              timestamp = dayjs(dayStr).valueOf();
            }

            item.timer = res2.data?.classDates[index];
            item.timestamp = timestamp;
          });
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 删除尚未接完
    detelePlan(item) {
      this.$confirm("确定删除该规划?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          orderDelete({ orderId: row.id }).then((res) => {
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.getList();
              // this.routeOrderStatus = false;
            }
          });
        })
        .catch();
    },
    // 修改
    resetPlan(item){
        this.planTitle = "修改训练规划";
        this.isAdd = false;
        this.activeItem = item;
        this.currentIndex = item.num;
        this.planVisible = true;

    }
  },
  watch: {
    "searchForm.classGroupId"(val) {
      if (val) {
        if (this.searchForm.year && this.searchForm.term) {
          let obj = {
            classGroupId: val,
            musicGroupId: this.teamid,
            term: this.searchForm.term,
            year: this.searchForm.year,
          };
          this.getCourseList(obj);
        }
      } else {
        this.searchForm.courseScheduleType = "";
      }
    },
    "searchForm.courseScheduleType": {
      immediate: true,
      async handler(val) {
        if (
          val &&
          this.teamid &&
          this.searchForm.term &&
          this.searchForm.year &&
          this.searchForm.classGroupId
        ) {
          // 请求列表接口
          let obj = {
            classGroupId: this.searchForm.classGroupId,
            musicGroupId: this.teamid,
            term: this.searchForm.term,
            year: this.searchForm.year,
            courseScheduleType: val,
          };
          this.getList(obj);
        }
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.marginBtm22 {
  margin-bottom: 22px;
}
.timerWrap {
  position: relative;

  // .topDot {
  //   width: 30px;
  //   height: 30px;
  //   background-color: red;
  //   position: absolute;
  //   top: 0;
  //   left: 50%;
  //   margin-left: -15px;
  // }
  // .bottomDot {
  //   position: absolute;
  //   width: 30px;
  //   height: 30px;
  //   background-color: blue;
  //   bottom: 0;
  //   left: 50%;
  //   margin-left: -15px;
  // }
  .timerList {
    padding: 30px 16px;
    overflow: auto;
    height: 300px;
    .timeline {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      .time {
        width: 200px;
      }
      .cuorseType {
        width: 120px;
        text-align: center;
      }
      .concat {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .button {
        width: 40px;
      }
    }
  }
}
/deep/.alerTitle {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .el-button {
    padding: 0 20px !important;
  }
}
/deep/.el-alert__content {
  flex: 1;
}
.searchForm {
  padding: 0 16px;
}
</style>