|
|
<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>
|
