front/src/views/elective/dispatch/components/set-classcount.vue

<template>
  <el-dialog
    title="设定人数"
    :visible.sync="setShow"
    :close-on-click-modal="false"
    width="50%"
  >
    <div>
      <p style="margin-bottom: 10px;">组合人数为:{{roundGroup.number}}</p>
      <el-table
        :data="formatSetting"
        style="width: 100%"
      >
        <el-table-column
          prop="className"
          label="组合"
          width="180"
        >
          <template>
            {{roundGroup.groupName}}
          </template>
        </el-table-column>
        <el-table-column
          prop="className"
          label="班级名称"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          label="人数"
        >
          <template slot-scope="scope">
            <el-input-number :min="0" :max="roundGroup.number?setPubMax(scope.$index):Infinity" v-model="scope.row.actualCount" @change="countEdit(scope.row,scope.$index)" ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-popover
              placement="bottom"
              title="标题"
              width="200"
              trigger="click"
              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
              <el-switch
                v-model="scope.row.active"
                active-color=""
                active-text="按排名"
                inactive-text="随机"
                inactive-color="#ff4949"
                slot="reference">
              </el-switch>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="setShow = false">取 消</el-button>
    <el-button type="primary" @click="setShow = false">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
import MxClassTreeTranslateMixin from '@/components/Cache/modules/mx-classTree-translate-mixin.js'
export default {
  name: 'set-classcount',
  mixins: [MxClassTreeTranslateMixin],
  data() {
    return {
      setShow: false,
      settingContainer: [],
      roundGroup: {}
    }
  },
  computed: {
    // input-number设置公用max
    setPubMax() {
      return (data) => {
        let allSelect = 0
        let maxQuantit = this.roundGroup.number
        this.settingContainer.forEach((item, index) => {
          if (index !== data) {
            allSelect += item.actualCount
          }
        })
        return maxQuantit-allSelect
      }
    },
    formatSetting() {
      return this.settingContainer.map(item => {
        return {
          actualCount: item.actualCount,
          classId: item.classId,
          className: this.getClassName(item.classId),
        }
      })
    },
  },
  methods: {
    open(roundGroup, settingContainer) {
      console.log(roundGroup)
      console.log(settingContainer)
      this.setShow = true
      this.roundGroup = roundGroup
      this.settingContainer = settingContainer.filter(item => item.groupId == roundGroup.groupId)
    },
    countEdit(newVal,index){
      console.log(newVal)
      console.log(index)
      this.settingContainer[index].actualCount = newVal.actualCount
    },
    confirm() {
      this.show = false
      // int groupId; // 组合ID
      // int classId; // 班级
    },
  }
}
</script>

<style scoped>

</style>