lanan-system-vue/src/views/drivingSchool/DriveSchoolPay/form/assignmentCoach.vue

<template>
  <div class="app-container">
    <!-- 对话框(分配) -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="55%" v-dialogDrag append-to-body>
      <!--  表格    -->
      <el-table
        v-loading="formLoading"
        :data="process"
        border
        style="width: 100%"
      >
        <el-table-column label="科目" prop="subjectStr" align="center" width=""></el-table-column>
        <el-table-column label="教练" align="center" width="">
          <template slot-scope="scope">
            <el-select v-model="scope.row.coachId" placeholder="请选择" :disabled="scope.row.disable"
                       @change="handleChange(scope.row)">
              <el-option
                v-for="item in scope.row.coachList"
                :key="item.coachId"
                :label="item.coachName"
                :value="item.coachId"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
        <el-button @click="dialogVisible = false;">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as SchoolCourseOrderApi from '@/views/drivingSchool/DriveSchoolPay/api';
import {getCoachByCourseId} from "@/views/drivingSchool/schoolCoachCourse/api/achoolCoachCourse";
import {getAllByUserIdAndCourseId, saveProcess} from "@/views/drivingSchool/process/api";
import {nextTick} from "vue";

export default {
  name: "AssignmentCoach",
  components: {},
  data() {
    return {
      // 弹出层标题
      dialogTitle: "",
      // 是否显示弹出层
      dialogVisible: false,
      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
      formLoading: false,
      process: [],
      selectCoach: [],
      // 表单校验
      formRules: {},
      orderId: '',
    };
  },
  methods: {
    /** 打开弹窗 */
    async open(data) {
      this.dialogVisible = true;
      this.orderId = data.id
      await this.getAllByUserIdAndCourseId(data.userId, data.courseId)
      this.getData(data)
      this.reset();
    },
    /** 提交按钮 */
    async submitForm() {
      console.log('this.process', this.process)
      // 校验this.process中是否选择教练
      for (let i = 0; i < this.process.length; i++) {
        const item = this.process[i];
        if (!item.coachId) {
          this.$modal.msgError(`请选择${item.subjectStr}的教练`);
          return;
        }
      }
      this.formLoading = true

      const data = {
        "orderId": this.orderId,
        "processList": this.process
      }
      const res = await saveProcess(data)
      this.$modal.msgSuccess("分配成功");
      this.dialogVisible = false;
      this.$emit('success');
      this.formLoading = false;
    },
    // 获取科目信息
    async getData(data) {
      // 根据课程id查询课程信息
      const params = {
        courseId: data.courseId
      }
      const res = await getCoachByCourseId(params)

      if (res.data.length === 0) {
        this.$modal.msgError("该课程暂无教练");
        return
      }
      const subjectArr = ['科目一', '科目二', '科目三', '科目四']
      // 渲染科目一到科目四
      for (let i = 1; i <= 4; i++) {
        //根据res中subject判断与当前i相同的教练
        const coachArr = res.data.filter(item => item.subject === i + '')


        const item = {
          subject: i,
          subjectStr: subjectArr[i - 1],
          coachList: coachArr,
          selectedCoachId: '', // 初始化选择的值
          selectedCoachName: '', // 初始化选择的值
          courseId: data.courseId, //课程id
          courseName: data.courseName, //课程名称
          courseType: data.courseType, //课程类型
          userId: data.userId,
          userName: data.userName,
          userMobile: data.userPhone,
          status: 0,
          disable: false
        }

        //判断data中的教练id是否在coachArr中，如果在设置默认教练
        if (data.coachUserId) {
          const selectedCoach = coachArr.find(item => item.coachId == data.coachUserId);
          if (selectedCoach) {
            item.coachId = selectedCoach.coachId;
            item.coachName = selectedCoach.coachName;
          }
        }
        if (i === 1) {
          item.status = 1
        }

        //在this.selectCoach中是否i等于里面的subject
        if (this.selectCoach.some(item => item.subject == i)) {
          const selectedCoach = this.selectCoach.find(item => item.subject == i)
          const selectedCoachId = selectedCoach.coachId + ''
          const selectedCoachName = selectedCoach.coachName
          // 设置默认值
          item.coachId = selectedCoachId
          item.coachName = selectedCoachName
          item.disable = true
          //判断coachArr中是否有当前的id
          if (!coachArr.some(item => item.coachId == selectedCoachId)) {
            // 设置disable为true
            item.coachList.push(selectedCoach)
          }
        }
        nextTick(() => {
          this.$set(this.process, this.process.length, item)
        })
      }
    },
    async getAllByUserIdAndCourseId(userId, courseId) {
      const params = {
        userId: userId,
        courseId: courseId
      }
      const res = await getAllByUserIdAndCourseId(params)
      this.selectCoach = res.data
    },
    handleChange(row) {
      // 你可以在这里处理选择变化后的逻辑
      //找出该行的selectedCoachId对应的coachList中的name
      const selectedCoach = row.coachList.find(item => item.coachId === row.coachId);
      if (selectedCoach) {
        row.coachName = selectedCoach.coachName;
      } else {
        row.coachName = '';
      }
    },
    /** 表单重置 */
    reset() {
      this.process = []
      this.resetForm("assignmentCoachRef");
    }
  }
};
</script>