sz-kjsxy-web/src/views/course/components/editClass.vue

<template>
  <div>
    <xy-dialog ref="dialog" :width="70" :is-show.sync="isShow" :type="'form'" :title="type === 'add' ? '新增课表' : '编辑课表'"
      :form="form" :rules='rules' @submit="submit">
      <template v-slot:date>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>日期：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker  style="width: 100%;" v-model="form.date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择日期">
            </el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:period>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>上课时间：
          </div>
          <div class="xy-table-item-content">
            <el-input style="width: 100%;" v-model="form.period" placeholder="请输入上课时间" clearable></el-input>
          </div>
        </div>
      </template>
      <!-- <template v-slot:timeRange>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>上课时间：
          </div>
          <div class="xy-table-item-content">
            <el-time-picker @change="changeTime" style="width: 100%;" format="HH:mm" value-format="HH:mm" is-range
              v-model="form.timeRange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
              placeholder="选择时间范围">
            </el-time-picker>
          </div>
        </div>
      </template> -->
      <template v-slot:teacher_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>授课老师：
          </div>
          <div class="xy-table-item-content">
            <el-select filterable v-model="form.teacher_id" @change="changeTeacher" style="width:60%" placeholder="请选择授课老师"
              clearable>
              <el-option v-for="item in teacher_options" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
            <el-button type="primary" size="small" @click="addTeacher" style="margin-left: 10px;">新增授课老师</el-button>
          </div>
        </div>
      </template>
      <template v-slot:teacher_introduce>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>授课老师简介：
          </div>
          <div class="xy-table-item-content">
            <el-input type="textarea" :rows="3" style="width: 100%;" v-model="form.teacher_introduce" placeholder="请输入授课老师简介" clearable></el-input>
          </div>
        </div>
      </template>
      <template v-slot:theme>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>课程主题：
          </div>
          <div class="xy-table-item-content">
            <el-input style="width: 100%;" v-model="form.theme" placeholder="请输入课程主题" clearable></el-input>
          </div>
        </div>
      </template>
      <template v-slot:direction>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>课程方向：
          </div>
          <div class="xy-table-item-content">
            <el-select filterable v-model="form.direction" style="width:100%" placeholder="请选择课程方向" clearable>
              <el-option v-for="item in direction_options" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:address>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>上课地点：
          </div>
          <div class="xy-table-item-content">
            <el-input style="width: 100%;" v-model="form.address" placeholder="请输入上课地点" clearable></el-input>
          </div>
        </div>
      </template>
      <template v-slot:address_detail>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>签到地点：
          </div>
          <div class="xy-table-item-content">
            <avue-input-map v-model="mapform" :params="mapparams" style="width:100%" placeholder="请选择地图" />
          </div>
        </div>
      </template>

      <template v-slot:remark>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>备注：
          </div>
          <div class="xy-table-item-content">
            <el-input type="textarea" :rows="3" style="width: 100%;" v-model="form.remark" placeholder="请输入备注信息" clearable></el-input>
          </div>
        </div>
      </template>
      <!-- <template v-slot:introduce>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>老师简介：
          </div>
          <div class="xy-table-item-content">
            <el-input style="width: 100%;" v-model="form.introduce" placeholder="请输入老师简介" clearable></el-input>
          </div>
        </div>
      </template> -->
      <template v-slot:files>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>课件管理：
          </div>
          <div class="xy-table-item-content">
            <!-- 现有课件列表 -->
            <div v-if="form.files && form.files.length > 0" class="existing-files">
              <h5>现有课件</h5>
              <div v-for="file in form.files" :key="file.id" class="file-item">
                <el-link type="primary" @click="downloadFile(file)" :underline="false">
                  <i class="el-icon-document"></i>
                  {{ file.original_name }}
                </el-link>
                <el-button type="danger" size="mini" @click="removeFile(file)" style="margin-left: 10px;">
                  <i class="el-icon-delete"></i> 删除
                </el-button>
              </div>
            </div>

            <!-- 上传新课件 -->
            <div class="upload-section">
              <h5>上传新课件</h5>
              <el-upload ref="fileUpload" :action="uploadAction" :headers="uploadHeaders" :file-list="newFileList"
                :on-success="handleFileUploadSuccess" :on-remove="handleFileUploadRemove"
                :on-error="handleFileUploadError" :before-upload="beforeFileUpload" multiple
                accept=".pdf,.doc,.docx,.ppt,.pptx,.xls,.xlsx,.zip,.rar,.txt,.jpg,.jpeg,.png,.gif">
                <el-button size="small" type="primary">
                  <i class="el-icon-upload"></i> 点击上传
                </el-button>
                <div slot="tip" class="el-upload__tip">
                  支持 PDF、Word、PPT、Excel、压缩包、图片等格式，单个文件不超过50MB
                </div>
              </el-upload>
            </div>
          </div>
        </div>
      </template>
    </xy-dialog>
    <addTeacher ref="addTeacher" @refresh="refreshTeacherList"></addTeacher>
  </div>
</template>

<script>
  import myMixins from "@/mixin/selectMixin.js";
  import {
    show,
    save
  } from '@/api/course/courseContent.js'
  import {
    save as saveTeacher
  } from "@/api/info/teachers.js"
  import { index as teacherIndex } from "@/api/info/teachers.js";
  import addTeacher from '@/views/config/components/addTeacher.vue'
  import {
    getparameteritem
} from "@/api/system/dictionary.js"
  export default {
    mixins: [myMixins],
    components: {
      addTeacher
    },
    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',
        teacher_options: [],
        isAddress:false,
        mapparams: {
          zoom: 11
        },
        direction_options:[],
        mapform: [],
        form: {
          date: '',
          // timeRange: [],
          period:'',
          teacher_id: "",
          teacher_introduce: '', // 授课老师简介
          theme: '',
          direction: '', // 课程方向
          address: '',
          address_detail: '',
          latitude: '',
          longitude: '',
          course_id: '', // 添加课程ID字段
          
          remark: '', // 备注
          // introduce: '',
          files: [], // 现有课件列表
        },
        rules: {
          date: [{
            required: true,
            message: '请选择上课日期'
          }]
        },
        uploadAction: `${process.env.VUE_APP_UPLOAD_API}`, // 上传文件的URL
        uploadHeaders: {
          Authorization: `Bearer ${this.$store.getters.token}`
        }, // 上传文件时的请求头
        newFileList: [], // 新上传的文件列表
        removedFileIds: [], // 已删除的文件ID列表
      }
    },
    created() {
      this.getAllPara()
    },
    methods: {
      getAllPara() {
        getparameteritem('course_direction').then(res => {
          console.log("res", res)
          this.direction_options = res.detail
        })
      },
      setTeachers(e) {
        this.teacher_options = e
      },
      async getTeachers() {
        try {
          const res = await teacherIndex({
            page: 1,
            page_size: 999,
          });
          this.teacher_options = res.data;
        } catch (error) {
          console.error('获取授课老师列表失败:', error);
          this.$message.error('获取授课老师列表失败');
        }
      },
      changeTeacher(e) {
        if (e) {
          this.teacher_options.map(item => {
            if (e === item.id) {
              this.form.teacher_id = item.id
              // 自动填充授课老师简介
              this.form.teacher_introduce = item.introduce || ''
              // this.form.introduce = item.introduce
            }
          })
        }
        console.log("e", e)
      },
      addTeacher() {
        this.$refs.addTeacher.isShow = true
      },
      refreshTeacherList() {
        // 刷新授课老师列表，这里需要调用父组件的方法来重新获取授课老师列表
        this.getTeachers().then(() => {
          // 获取最新的授课老师列表后，自动选中新增的授课老师
          if (this.teacher_options && this.teacher_options.length > 0) {
            // 获取最新添加的授课老师（假设最新添加的授课老师在数组的最后）
            const latestTeacher = this.teacher_options[0];
            if (latestTeacher) {
              this.form.teacher_id = latestTeacher.id;
              // this.$message.success(`已自动选中新增的授课老师：${latestTeacher.name}`);
            }
          }
        });
      },
      changeTime(e) {
        console.log("eeee", e)
        if (e) {
          this.form.start_time = e[0]
          this.form.end_time = e[1]
        } else {
          this.form.start_time = ''
          this.form.end_time = ''
        }
      },
      submit() {
        // 编辑时需要id，新增时不需要
        if (this.type === 'editor') {
          if (this.id) {
            this.form.id = this.id
          } else {
            this.$message.error('编辑时课程内容ID不能为空')
            return
          }
        } else {
          // 新增时，清空id
          this.form.id = ''
        }

        // 新增时，确保course_id字段存在
        if (this.type === 'add' && !this.form.course_id) {
          this.$message.error('课程ID不能为空')
          return
        }

        // 检查授课老师简介是否发生变化，如果变化了则同时更新授课老师信息
        let needUpdateTeacher = false
        if (this.form.teacher_id && this.form.teacher_introduce !== undefined) {
          // 找到当前选中的授课老师
          const selectedTeacher = this.teacher_options.find(item => item.id === this.form.teacher_id)
          if (selectedTeacher && selectedTeacher.introduce !== this.form.teacher_introduce) {
            needUpdateTeacher = true
          }
        }

        // 处理课件文件ID
        const existingFileIds = this.form.files.map(file => file.id);
        const newFileIds = this.newFileList.map(file => {
          return file.response ? file.response.id : file.id;
        });

        // 合并现有文件ID和新上传的文件ID，排除已删除的文件ID
        const finalFileIds = [...existingFileIds, ...newFileIds].filter(id =>
          !this.removedFileIds.includes(id)
        );

        const submitData = {
          ...this.form,
          file_ids: finalFileIds
        };
        
        console.log('提交数据:', submitData) // 添加日志查看提交的数据
        
        // 先保存课表信息
        save(submitData).then(async (res) => {
          this.$message({
            type: 'success',
            message: this.type === 'add' ? '新增课表成功' : '编辑课表成功'
          })
          
          // 如果授课老师简介发生变化，则同时更新授课老师信息
          if (needUpdateTeacher) {
            try {
              await saveTeacher({
                id: this.form.teacher_id,
                introduce: this.form.teacher_introduce
              })
              this.$message.success('授课老师简介更新成功')
            } catch (error) {
              console.error('更新授课老师简介失败:', error)
              this.$message.warning('课表保存成功，但授课老师简介更新失败')
            }
          }
          
          this.isShow = false
          this.$emit('refresh')
          // this.active = 1
        }).catch(error => {
          console.error('保存课表失败:', error)
          this.$message.error('保存课表失败')
        })
      },
      getDetail() {
        show({
          id: this.id,
          show_relation: ['teacher']
        }).then(res => {
          this.form = this.base.requestToForm(res, this.form)
          this.form.files = res.files ? res.files : []
          // 获取授课老师简介
          this.form.teacher_introduce = res.teacher ? res.teacher.introduce || '' : ''
          // this.form.timeRange = [this.form.start_time ? this.form.start_time : '', this.form.end_time ? this.form
          //   .end_time : ''
          // ]
          // this.form.introduce = res.teacher.introduce
          this.mapform = [res.longitude, res.latitude, res.address_detail]
        })
      },
      // 下载文件
      downloadFile(file) {
        const link = document.createElement('a');
        link.href = file.url;
        link.download = file.original_name;
        link.target = '_blank';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      },
      // 删除现有文件
      removeFile(file) {
        this.$confirm(`确定要删除课件"${file.original_name}"吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 从现有文件列表中移除
          this.form.files = this.form.files.filter(f => f.id !== file.id);
          // 添加到已删除文件ID列表
          this.removedFileIds.push(file.id);
          this.$message.success('课件删除成功');
        }).catch(() => {
          // 用户取消删除
        });
      },
      // 文件上传成功
      handleFileUploadSuccess(response, file, fileList) {
        this.$message.success('课件上传成功');
        this.newFileList = fileList;
      },
      // 文件上传移除
      handleFileUploadRemove(file, fileList) {
        this.newFileList = fileList;
      },
      // 文件上传错误
      handleFileUploadError(err, file, fileList) {
        this.$message.error('课件上传失败: ' + err);
      },
      // 文件上传前验证
      beforeFileUpload(file) {
        const isLt50M = file.size / 1024 / 1024 < 50;
        if (!isLt50M) {
          this.$message.error('上传文件大小不能超过 50MB!');
        }
        return isLt50M;
      },


    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          // 每次打开对话框时获取最新的授课老师列表
          this.getTeachers()
          // 只有编辑时才获取详情
          if (this.type === 'editor') {
            this.getDetail()
          }
        } else {
          this.id = ''
          this.type = 'add' // 重置为新增状态
          this.isAddress = false
          this.mapform = []
          this.form = {
            date: '',
            // timeRange: [],
            period:'',
            teacher_id: "",
            teacher_introduce: '', // 重置授课老师简介
            theme: '',
            address: '',
            address_detail: '',
            latitude: '',
            longitude: '',
            course_id: '', // 重置课程ID字段
            direction: '', // 重置课程方向
            remark: '', // 重置备注
            files: [], // 重置课件列表
          }
          this.newFileList = [] // 重置新上传文件列表
          this.removedFileIds = [] // 重置已删除文件ID列表
          this.$refs['dialog'].reset()
        }
      },
      mapform(newVal, oldVal) {
        console.log(newVal)
        this.form.longitude = newVal[0]
        this.form.latitude = newVal[1]
        this.form.address_detail = newVal[2]
      }
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .files {
    flex-basis: 100%;
  }

  .existing-files {
    margin-bottom: 20px;

    h5 {
      margin: 0 0 10px 0;
      color: #303133;
      font-size: 14px;
    }

    .file-item {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      padding: 8px;
      background: #f5f7fa;
      border-radius: 4px;

      &:last-child {
        margin-bottom: 0;
      }

      .el-link {
        flex: 1;
        font-size: 12px;

        i {
          margin-right: 4px;
        }
      }
    }
  }

  .upload-section {
    h5 {
      margin: 0 0 10px 0;
      color: #303133;
      font-size: 14px;
    }

    .el-upload__tip {
      font-size: 12px;
      color: #909399;
      margin-top: 5px;
    }
  }
</style>