yoga-manager-ui/src/components/sc/claTime/changeClaTimeAttend.vue

<!-- 修改上课 -->
<template>
  <el-dialog title='上课记录详情' :visible.sync="open" class="compact" width="1000px" >
    <el-row v-loading="loadingClaDetail" class="cla-detail">
      <div class="cla-base-info" style="border-bottom-width: 2px;">
        <div class="item">
          <div class="item-name">校区:</div>
          <div class="item-value">{{ claInfo.deptName }}</div>
        </div>
        <div class="item">
          <div class="item-name">所属课程:</div>
          <div class="item-value">{{ claCourseInfo.courseName }}</div>
        </div>
        <div class="item">
          <div class="item-name">班级:</div>
          <div class="item-value">{{ claInfo.claName }}</div>
        </div>
        <div class="item">
          <div class="item-name required">上课教师:</div>
          <div class="item-value">
            <staff-select v-model="form.teacherId" :dept-id="claInfo.departId"  placeholder="请选择上课教师" />
          </div>
        </div>
        <div class="item">
          <div class="item-name required">上课教室:</div>
          <div class="item-value">
            <room-select v-model="form.roomId" :dept-id="claInfo.departId" placeholder="请选择上课教室" />
          </div>
        </div>
        <div class="item">
          <div class="item-name required">上课日期:</div>
          <div class="item-value">
            <el-date-picker
              v-model="form.claDate"
              clearable
              size="small"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="上课日期"
              style="width: 135px;"
              :picker-options="beginDatePickerOptions"
            />
          </div>
        </div>
        <div class="item">
          <div class="item-name required">
            <span>上课时间:</span>
          </div>
          <div class="item-value">
            <el-time-select
              v-model="form.startTime"
              size="small"
              :picker-options="{
                start: '08:00',
                step: '00:01',
                end: '20:00'
              }"
              style="width: 135px;"
              placeholder="上课时间"
            />
          </div>
        </div>
        <div class="item">
          <div class="item-name required">
            <span>下课时间:</span>
          </div>
          <div class="item-value">
            <el-time-select
              v-model="form.endTime"
              size="small"
              :picker-options="{
               start: '08:00',
                step: '00:01',
                end: '20:00'
              }"
              style="width: 135px;"
              placeholder="下课时间"
            />
          </div>
        </div>
        <div class="item">
          <div class="item-name required">上课主题:</div>
          <div class="item-value">
            <el-input v-model="form.classTheme" size="small" placeholder="输入上课主题" />
          </div>
        </div>
        <div class="item">
          <div class="item-name required">
            <span>备注:</span>
          </div>
          <div class="item-value">
            <el-input v-model="form.memo" size="small" placeholder="备注" />
          </div>
        </div>
      </div>
    </el-row>
    <el-row :gutter="10" class="mb8" style="margin-top: 10px;">
      <span style="color: #999; font-size: 12px; "> * 说明：会员签到的同时系统自动划扣会员卡内次数或金额 ； 先签到，后上课；</span>
    </el-row>
    <el-table ref="table" v-loading="loading" class="add-cla-time-attend-table" :height="500"
              :data="claStudentList" >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column align="center" prop="studentName" label="学员" fixed="left" />
      <el-table-column align="center" prop="sex" label="性别" :formatter="sexFormatter" />
      <el-table-column align="center" prop="phone" label="联系电话" width="120"/>
      <el-table-column align="center" prop="bookStatus" label="预约状态" :formatter="bookStatusFormatter" width="100" />
      <el-table-column align="center" prop="checkIn" label="是否签到" width="200" >
        <template slot-scope="scope">
          <el-radio-group v-model="scope.row.checkIn" >
            <el-radio  :label="0">未签到</el-radio>
            <el-radio  :label="1">已签到</el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="cardNo" label="会员卡号" width="100" />
      <el-table-column align="center" prop="cardTypeName" label="卡项名称" width="100" />
      <el-table-column align="center" prop="remainingCount" label="会员卡余次" width="100" />
      <el-table-column align="center" prop="remainingTotalFee" label="会员卡余额" width="100" />
      <el-table-column align="center" prop="expiryDate" label="会员卡到期日" width="100" />
      <el-table-column align="center" prop="chargeType" label="收费方式">
        <template slot-scope="scope">
          <span>{{ chargeTypeFormatter(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="deductCnt" label="划扣次数" width="100" />
      <el-table-column align="center" prop="deductFee" label="划扣金额" width="100" />

      <el-table-column align="center" prop="createTime" label="预约时间" width="100" />
      <el-table-column align="center" prop="checkInTime" label="签到时间" width="100" />
      <el-table-column align="center" prop="countBefore" label="划扣前次数" width="100" >
        <template slot-scope="scope">
          <span>{{ scope.row.countBefore==null?'-':scope.row.countBefore}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="countAfter" label="划扣后次数" width="100" >
        <template slot-scope="scope">
          <span>{{ scope.row.countAfter==null?'-':scope.row.countAfter}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="feeBefore" label="划扣前金额" width="100" >
        <template slot-scope="scope">
          <span>{{ scope.row.feeBefore==null?'-':scope.row.feeBefore}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="feeAfter" label="划扣后金额" width="100" >
        <template slot-scope="scope">
          <span>{{ scope.row.feeAfter==null?'-':scope.row.feeAfter}}</span>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
<script>
import { selectDictLabel } from '@/utils/commonUtils'
import staffSelect from '@/components/system/staff/staffSelect'
import roomSelect from '@/components/sc/base/roomSelect'
import { allDetailInfoById } from '@/api/school/sc/cla'
import { claTimeInfo as loadClaTimeInfo, } from '@/api/school/sc/cla/claTime'
import moment from 'moment'
import { searchCourseClaStudent } from '@/api/school/sc/cla/index'
export default {
  components: {
    staffSelect,
    roomSelect
  },
  props: {
    claId: {
      type: String,
      default: undefined
    },
    // 上课记录
    courseTimeId: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      title: '记上课',
      open: false,
      loading: false,
      loadingClaDetail: false,
      // 班级信息
      claInfo: {},
      // 课程信息
      claCourseInfo: {},
      // 排课信息
      claTimeInfo: {},
      form: {
        deptId: undefined,
        claId: undefined,
        claDate: '',
        startTime: '',
        endTime: '',
        teacherId: undefined,
        roomId: undefined,
        classTheme: undefined
      },
      beginDatePickerOptions: {
        disabledDate(time) {
          return moment(time).add(0, 'days').valueOf() > Date.now()
        }
      },
      claStudentList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 200,
        courseTimeId: this.courseTimeId,
        effect: true
      },
      chargeTypeOptions: [],
      sexOptions: [],
      // 选择上课的学员
      chooseStudentCourseIds: [],
      // 到课状态
      attendStatusOptions: [],
      // 每个学员 的到课状态
      studentAttendStatusForm: {},

      // 班级上课出席列表
      chooseBookIds:[],
      claTimeAttendList: []
    }
  },
  computed: {
    // 已记录出席情况
    claTimeAttendMap() {
      const claTimeAttendMap = {}
      this.claTimeAttendList.forEach(item => {
        claTimeAttendMap[item.studentCourseId] = item
      })
      return claTimeAttendMap
    }
  },
  watch: {
    open: {
      handler(newValue) {
        if (newValue === true) {
          this.resetData()
          this.loadClaAndClaTimeInfo()
        }
      },
      immediate: true
    }
  },
  created() {
    this.getDictListByDictType('charge_type').then(response => {
      this.chargeTypeOptions = response.data
    })
    this.getDictListByDictType('sys_user_sex').then(response => {
      this.sexOptions = response.data
    })
    this.getDictListByDictType('book_status').then(response => {
      this.bookStatusOptions = response.data
    })
  },
  methods: {
    resetData() {
      this.claInfo = {
        claName: '',
        deptName: '',
        departId: undefined
      }
      this.claCourseInfo = {
        courseName: ''
      }
      this.claTimeInfo = {}
      this.claStudentList = []
      this.claTimeAttendList = []
      this.studentAttendStatusForm = {}
    },
    // 加载班级 及 已上课信息
    loadClaAndClaTimeInfo() {
      if (this.courseTimeId) {
        this.loadingClaDetail = true
        loadClaTimeInfo(this.courseTimeId).then(response => {
          this.claTimeInfo = response.data
          // 自动设置表单信息
          this.autoSetFormByClaTimeInfo()
          return allDetailInfoById(this.claId)
        }).then(response => {
          this.loadingClaDetail = false
          this.claInfo = response.data.courseCla
          this.claCourseInfo = response.data.course
          this.loadCourseClaStudentAndAttendDetail()
        }).catch(() => {
          this.loadingClaDetail = false
        })
      }
    },
    // 自动设置 表单信息
    autoSetFormByClaTimeInfo() {
      this.form.teacherId = this.claTimeInfo.teacherId
      this.form.roomId = this.claTimeInfo.roomId
      this.form.claDate = this.claTimeInfo.realClaDate
      this.form.startTime = this.claTimeInfo.realStartTime.substr(0, 5)
      this.form.endTime = this.claTimeInfo.realEndTime.substr(0, 5)
      this.form.memo = this.claTimeInfo.memo
      this.form.classTheme = this.claTimeInfo.classTheme
    },
    // 选择计划排课日期变化
    handleClaDateChange(claTimeInfo) {
      this.claTimeInfo = claTimeInfo
      this.form.startTime = claTimeInfo.startTime.substr(0, 5)
      this.form.endTime = claTimeInfo.endTime.substr(0, 5)
      this.form.classTheme = claTimeInfo.classTheme
    },
    sexFormatter(row, column) {
      return selectDictLabel(this.sexOptions, row.sex)
    },
    chargeTypeFormatter(row, column) {
      return selectDictLabel(this.chargeTypeOptions, row.chargeType)
    },
    bookStatusFormatter(row, column) {
      return selectDictLabel(this.bookStatusOptions, row.bookStatus)
    },
    // 班级所有学员,及到课状态
    loadCourseClaStudentAndAttendDetail() {
      this.loading = true
      let claStudentList = []
      searchCourseClaStudent({courseTimeId: this.courseTimeId}).then(response => {
        claStudentList = response.data
        this.total = response.data.total

        this.claStudentList = claStudentList

        this.loading = false
      })
    },
  }
}
</script>
<style lang="scss" scoped src="@/styles/sc/cla/cla-detail.scss"></style>
<style rel="stylesheet/scss" lang="scss" scoped>
  .cla-detail .cla-base-info .item .item-name{
    width: 90px;
  }
</style>
<style rel="stylesheet/scss" lang="scss">
  .add-cla-time-attend-table .el-radio-button--mini .el-radio-button__inner {
    padding: 7px;
  }
</style>