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

<template>
  <div>
    <el-alert title="" :closable="false" class="alert marginBtm22" type="info">
      <template slot="title">
        <div class="shapeWrap">
          <span class="shape"></span>
          <p style="margin-right: 5px">训练时长</p>
          <!-- <el-tooltip placement="top" popper-class="mTooltip">
            <div slot="content">
              声部课包括:声部课、集训声部课;合奏课包括:合奏课、集训合奏课
            </div>
            <i
              class="el-icon-question micon el-tooltip"
              style="font-size: 18px; color: #f56c6c"
            ></i>
          </el-tooltip> -->
        </div>
      </template>
    </el-alert>
    <!-- 周期选择 -->
    <save-form
      :inline="true"
      class="searchForm"
      save-key="teamTrainTimer"
      ref="searchForm"
      :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>
    </save-form>
    <div v-if="dataList.length >= 4">
      <!--  {{ item.name }}{{item.type | classType}}: -->
      <!-- <el-row class="row">
        <el-col
          class="col"
          :span="6"
          v-for="(item, index) in dataList"
          :key="index"
        >

          <span class="col-title">
             <overflow-text :text="item.name+':'" width="100%"></overflow-text
      >
           </span>
          <span> {{ item.currentClassTimes }}/{{item.totalClassTimes}}课时</span>
        </el-col>
      </el-row> -->
      <descriptions :column="4">
        <descriptions-item
          :label="item.name"
          :key="index"
          v-for="(item, index) in dataList"
        >
        <div v-if="item.id">
           {{ item.currentClassTimes }}/{{ item.totalClassTimes }}课时
        </div>

        </descriptions-item>
      </descriptions>
    </div>
     <div
      v-else-if="dataList.length > 0 && dataList.length < 4"
      class="descriptions"
    >
      <div
        class="descriptionItem"
        :style="`width:${100 / 4}%`"
        :key="index"
        v-for="(item, index) in dataList"
      >
        <div class="descriptionItemLabel">
          {{item.name}}
        </div>
        <div
          class="descriptionItemConcat"
        >
         {{ item.currentClassTimes }}/{{ item.totalClassTimes }}课时
        </div>
      </div>
    </div>
    <div v-else>
      <empty desc="暂无数据" />
    </div>
  </div>
</template>
<script>
import { getPlanCourseNum } from "./api";
export default {
  data() {
    return {
      searchForm: {
        year: "",
        term: "",
      },
      dataList: [],
    };
  },
  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.getList();
  },
  methods: {
    changeYear(val) {
      this.getList();
    },
    changeTerm(val) {
      this.getList();
    },
    async getList() {
      try {
        const res = await getPlanCourseNum({
          musicGroupId: this.$route.query.id,
          year: this.searchForm.year,
          term: this.searchForm.term,
        });
        this.dataList = res.data;
        // if(this.dataList.length > 0&&this.dataList.length<4){
        //   // 样式丑 至少对齐一排
        //   for(let i=0;i<=4-this.dataList.length;i++){
        //     this.dataList.push({name:null,totalClassTimes:null,currentClassTimes:null})
        //   }
        // }
        // console.log(this.dataList )
      } catch (e) {}
    },
  },
};
</script>
<style lang="scss" scoped>
.divider {
  margin-top: 0 !important;
}
.marginBtm22 {
  margin-bottom: 22px;
}
.row {
  padding: 8px 16px;
  margin-bottom: 30px;
  .col {
    margin-bottom: 20px;
    line-height: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    .col-title {
      display: inline-block;
      width: 150px;
      text-align: right;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .col-value {
      display: inline-block;
      // color: #14928a;
      // cursor: pointer;
    }
  }
}
.shapeWrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  .shape {
    position: relative;
    top: -1px;
    display: block;
    margin-right: 10px;
    height: 14px;
    width: 4px;
    background-color: #14928a;
    z-index: 500;
  }
}
.descriptions {
    margin-bottom: 30px;
  display: flex;
  flex-direction: row;
    .col-value {
    color: #14928a;
    cursor: pointer;
  }
  .descriptionItem {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    height: 46px;
    line-height: 46px;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    &:first-child {
      border-left: 1px solid #e8e8e8;
    }
    .descriptionItemLabel {
      border-right: 1px solid #e8e8e8;
      background-color: #fafafa;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 400;
      font-size: 14px;
      width: 50%;
      text-align: center;
    }
    .descriptionItemConcat {
      .col-value {
        color: #14928a;
        cursor: pointer;
      }
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-right: 1px solid #e8e8e8;
      font-size: 14px;
      line-height: 1.5;
      padding: 12px 16px;
      color: rgba(0, 0, 0, 0.65);
      display: table-cell;
      width: 50%;
    }
  }
}
</style>