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-input v-model="form.date" placeholder="请输入日期" clearable style="width: 100%;"></el-input>
          </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 v-model="form.period" placeholder="请输入时间" clearable style="width: 100%;"></el-input>
          </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 v-model="form.teacher_id" @change="changeTeacher" style="width:100%" placeholder="请选择授课老师"
              clearable>
              <el-option v-for="item in teacher_options" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </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: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: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>
  </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"
  export default {
    mixins: [myMixins],
    components: {},
    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',
        teacher_options: [],
        form: {
          date: '',
          period: '',
          teacher_id: "",
          theme: '',
          address: '',
          introduce: '',
          files: [], // 现有课件列表
        },
        rules: {

        },
        uploadAction: `${process.env.VUE_APP_UPLOAD_API}`, // 上传文件的URL
        uploadHeaders: {
          Authorization: `Bearer ${this.$store.getters.token}`
        }, // 上传文件时的请求头
        newFileList: [], // 新上传的文件列表
        removedFileIds: [], // 已删除的文件ID列表
      }
    },
    created() {},
    methods: {
      setTeachers(e) {
        this.teacher_options = e
      },
      changeTeacher(e) {
        if (e) {
          this.teacher_options.map(item => {
            if (e === item.id) {
              this.form.teacher_id = item.id
              this.form.introduce = item.introduce
            }
          })
        }
        console.log("e", e)
      },
      submit() {
        if (this.id) {
          this.form.id = this.id
        }else{
          this.form.id = ''
        }

        // 处理课件文件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
        };

        save(submitData).then(res => {
          this.$message({
            type: 'success',
            message: '保存课表成功'
          })
          saveTeacher({
            id: this.form.teacher_id,
            introduce: this.form.introduce
          }).then(res => {

          })
          this.isShow = false
          this.$emit('refresh')
          // this.active = 1
        })

      },
      getDetail() {
        show({
          id: this.id,
          show_relation: ['teacher']
        }).then(res => {
          this.form = this.base.deepCopy(res)
          this.form.introduce = res.teacher.introduce
        })
      },
      // 下载文件
      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) {
          if (this.type === 'editor') {
            this.getDetail()
          }
        } else {
          this.id = ''
          this.form = {
            date: '',
            period: '',
            teacher_id: "",
            theme: '',
            address: '',
            introduce: '',
            files: [], // 重置课件列表
          }
          this.newFileList = [] // 重置新上传文件列表
          this.removedFileIds = [] // 重置已删除文件ID列表
          this.$refs['dialog'].reset()
        }
      },
    }

  }
</script>

<style scoped lang="scss">
  .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>