dy-admin-manager/src/views/teamDetail/componentCourse/addCompound.vue

<template>
  <div class="fixedBox">
    <el-card>
      <div class="boxWrap">
        <p>临时合课列表<span style="color:red;"> {{compoundList.length}} </span></p>
        <el-popover placement="top"
                    v-model='isLook'
                    trigger="click">
          <div>
            <p class="title">临时合课列表 <i class="el-icon-minus minus"
                 @click="isLook=false"></i></p>

            <el-divider></el-divider>
          </div>
          <el-button type="text"
                     style="float:right"
                     @click="clearCom">清空列表</el-button>
          <div>
            <el-radio-group v-model="radio">
              <el-table :data="dataList"
                        height='300px'
                        :header-cell-style="{background:'#EDEEF0',color:'#444'}">
                <el-table-column align='center'
                                 label="主课"
                                 width="110">
                  <template slot-scope="scope">

                    <el-radio :label="scope.row.id"></el-radio>

                  </template>
                </el-table-column>
                <el-table-column align='center'
                                 width="180px"
                                 label="课程名称"
                                 prop="name"></el-table-column>
                <el-table-column align="center"
                                 label="课程类型">
                  <template slot-scope="scope">
                    <div>{{ scope.row.type | coursesType}}</div>
                  </template>
                </el-table-column>
                <el-table-column align="center"
                                 width="180px"
                                 prop="teacherName"
                                 label="指导老师">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.teacherName}}({{scope.row.actualTeacherId}})
                    </div>
                  </template>
                </el-table-column>
                <el-table-column align="center"
                                 width="200px"
                                 label="上课时间">
                  <template slot-scope="scope">{{ scope.row.startClassTime ? scope.row.startClassTime.substr(0, 16) : '' }}-{{ scope.row.endClassTime ? scope.row.endClassTime.substr(11,5) : ''}}</template>
                </el-table-column>
                <el-table-column align="center"
                                 label="操作">
                  <template slot-scope="scope">
                    <el-button type="text"
                               @click="cancleCom(scope.row)">取消</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-radio-group>
          </div>
          <el-button type="primary"
                     size="mini"
                     style="float:right;margin-top:20px;"
                     @click="submitClass">确定</el-button>
          <i class="el-icon-copy-document"
             slot="reference"></i>
        </el-popover>

      </div>
    </el-card>
    <el-dialog :visible.sync="show"
               title="临时合课信息"
               append-to-body
               width="800px">
      <compoundClass :show="show"
                     v-if="show"
                     @closeReset='closeReset'
                     :isDisabled='true'
                     @getList='getList'
                     :idList='idList'
                     :id='radio' />
    </el-dialog>
  </div>
</template>
<script>
import compoundClass from './compoundClass'
export default {
  props: ['compoundList'],
  components: { compoundClass },
  data () {
    return {
      radio: '',
      dataList: this.compoundList,
      isLook: false,
      show: false,
      idList:''
    }
  },
  methods: {
    cancleCom (row) {
      this.$emit('cancleCompound', row)
    },
    clearCom () {
      this.$emit('clearCom')
    },
    submitClass () {
      if (!this.radio) {
        this.$message.error('请选择一节主课')
        return
      }
      let arr = []
      let idList = []
      this.dataList.forEach(com => {
        arr.push(com.type)
            idList.push(com.id)
      })
      arr = [... new Set(arr)]
      if (arr.length != 1) {
        this.$message.error('请选择相同的课程类型')
        return
      }
      if (this.dataList.length <= 1) {
        this.$message.error('请至少选择2节课程')
        return
      }
      // 做判断
      this.idList = idList.join(',')
      this.show = true;
      this.isLook = false

    },
    getList () {

    },
    closeReset () {
      this.clearCom()
      this.show = false
      this.$emit('getList')
     }
  },
  watch: {
    compoundList (val) {
      console.log(val)
      this.dataList = val

    }
  }
}
</script>
<style lang="scss" scoped>
.title {
  line-height: 44px;
}
.fixedBox {
  position: fixed;
  bottom: 20px;
  right: 10px;
  z-index: 100;
  width: 200px;
  background-color: #fff;
  font-size: 14px;

  .boxWrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    i {
      font-size: 18px;
      cursor: pointer;
    }
  }
}
/deep/.el-divider--horizontal {
  margin: 0 !important;
}
.minus {
  float: right;
  line-height: 44px;
  padding-right: 20px;
  font-size: 20px;
  cursor: pointer;
}
</style>