|
|
|
|
@ -1,30 +1,64 @@ |
|
|
|
|
<script setup> |
|
|
|
|
<script setup lang="ts"> |
|
|
|
|
import { ElMessage } from 'element-plus' |
|
|
|
|
import { requiredNumber } from 'element-plus/es/components/table-v2/src/common.mjs' |
|
|
|
|
import { ref } from 'vue' |
|
|
|
|
import { ref, watch, onMounted } from 'vue' |
|
|
|
|
import { editCourseApi } from '../../../api/user/crouse' |
|
|
|
|
import { addCourseApi } from '../../../api/user/crouse' |
|
|
|
|
const formModel = ref({ |
|
|
|
|
id: '', |
|
|
|
|
import { getCourseListApi, getCourseDetailApi } from '../../../api/user/crouse' |
|
|
|
|
import request from '../../../utils/request' |
|
|
|
|
import { tool, client } from '../../../utils/alioss.js' |
|
|
|
|
// 绑定弹框 |
|
|
|
|
const visibleDrawer = ref(false) |
|
|
|
|
// 绑定图片 |
|
|
|
|
const imgUrl = ref('') |
|
|
|
|
// 绑定表单 |
|
|
|
|
const formRef = ref() |
|
|
|
|
// const uploadUrl = ref('') |
|
|
|
|
// const fileList = ref([]) |
|
|
|
|
// const handleAvatarSuccess = (res: any) => { |
|
|
|
|
// console.log(res) |
|
|
|
|
// formModel.value.img = res.data.url |
|
|
|
|
// } |
|
|
|
|
// const beforeAvatarUpload = (file: any) => {} |
|
|
|
|
const defaultForm = { |
|
|
|
|
teacher: '2140110334', |
|
|
|
|
img: '', |
|
|
|
|
name: '', |
|
|
|
|
category: '', |
|
|
|
|
nature: '', |
|
|
|
|
category: ref(''), |
|
|
|
|
nature: ref(''), |
|
|
|
|
code: '', |
|
|
|
|
credit: '', |
|
|
|
|
classhours: '', |
|
|
|
|
assessmenttype: '', |
|
|
|
|
assessmentway: '', |
|
|
|
|
assessmenttype: ref(''), |
|
|
|
|
assessmentway: ref(''), |
|
|
|
|
teachermethod: '', |
|
|
|
|
teacherway: '', |
|
|
|
|
description: '', |
|
|
|
|
file: null, |
|
|
|
|
} |
|
|
|
|
const formModel = ref({ |
|
|
|
|
...defaultForm, |
|
|
|
|
}) |
|
|
|
|
const rules = { |
|
|
|
|
img: [ |
|
|
|
|
{ |
|
|
|
|
required: true, |
|
|
|
|
message: '请上传课程封面', |
|
|
|
|
trigger: 'change', |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
name: [ |
|
|
|
|
{ |
|
|
|
|
required: true, |
|
|
|
|
message: '请输入课程名称', |
|
|
|
|
trigger: 'blur', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
pattern: /^[a-zA-Z\u4e00-\u9fa5A-Z0-9]*$/, |
|
|
|
|
message: '只能输入汉字或字母', |
|
|
|
|
trigger: 'blur', |
|
|
|
|
}, |
|
|
|
|
{ max: 10, message: '不能超过10个字符', trigger: 'blur' }, |
|
|
|
|
], |
|
|
|
|
category: [ |
|
|
|
|
{ |
|
|
|
|
@ -46,6 +80,12 @@ const rules = { |
|
|
|
|
message: '请输入课程编码', |
|
|
|
|
trigger: 'blur', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
pattern: /^[A-Z0-9]*$/, |
|
|
|
|
message: '只能输入数字或大写字母', |
|
|
|
|
trigger: 'blur', |
|
|
|
|
}, |
|
|
|
|
{ max: 10, message: '不能超过10个字符', trigger: 'blur' }, |
|
|
|
|
], |
|
|
|
|
credit: [ |
|
|
|
|
{ |
|
|
|
|
@ -53,11 +93,7 @@ const rules = { |
|
|
|
|
message: '请输入课程学分', |
|
|
|
|
trigger: 'blur', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
validator: requiredNumber, |
|
|
|
|
message: '请输入数字', |
|
|
|
|
trigger: 'blur', |
|
|
|
|
}, |
|
|
|
|
{ pattern: /^\d*$/, message: '只能输入数字', trigger: 'blur' }, |
|
|
|
|
], |
|
|
|
|
classhours: [ |
|
|
|
|
{ |
|
|
|
|
@ -65,11 +101,8 @@ const rules = { |
|
|
|
|
message: '请输入课程学时', |
|
|
|
|
trigger: 'blur', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
validator: requiredNumber, |
|
|
|
|
message: '请输入数字', |
|
|
|
|
trigger: 'blur', |
|
|
|
|
}, |
|
|
|
|
{ pattern: /^\d*$/, message: '只能输入数字', trigger: 'blur' }, |
|
|
|
|
{ max: 2, message: '不能超过2个字符', trigger: 'blur' }, |
|
|
|
|
], |
|
|
|
|
assessmenttype: [ |
|
|
|
|
{ |
|
|
|
|
@ -86,78 +119,255 @@ const rules = { |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
} |
|
|
|
|
const formRef = ref() |
|
|
|
|
const visibleDrawer = ref(false) |
|
|
|
|
|
|
|
|
|
const open = async (item) => { |
|
|
|
|
formModel.value = { ...item } |
|
|
|
|
// 图片上传 |
|
|
|
|
// const onSelectFile = (uploadFile) => { |
|
|
|
|
// // console.log(uploadFile) |
|
|
|
|
// imgUrl.value = URL.createObjectURL(uploadFile.raw) |
|
|
|
|
// formModel.value.img = uploadFile.raw |
|
|
|
|
// } |
|
|
|
|
// 按钮禁用 |
|
|
|
|
const nameDisabled = ref(false) |
|
|
|
|
const codeDisabled = ref(false) |
|
|
|
|
const open = async (item: any) => { |
|
|
|
|
visibleDrawer.value = true |
|
|
|
|
if (item.id) { |
|
|
|
|
// 编辑回显 |
|
|
|
|
// formModel.value = { ...item } |
|
|
|
|
// 获取课程详情 |
|
|
|
|
const res = await getCourseDetailApi(item.id) |
|
|
|
|
console.log(res) |
|
|
|
|
formModel.value = res.data |
|
|
|
|
imgUrl.value = formModel.value.img |
|
|
|
|
nameDisabled.value = true |
|
|
|
|
codeDisabled.value = true |
|
|
|
|
} else { |
|
|
|
|
nameDisabled.value = false |
|
|
|
|
codeDisabled.value = false |
|
|
|
|
// 重置表单 |
|
|
|
|
formModel.value = { ...defaultForm } |
|
|
|
|
formModel.value.category = '' |
|
|
|
|
formModel.value.nature = '' |
|
|
|
|
formModel.value.assessmenttype = '' |
|
|
|
|
formModel.value.assessmentway = '' |
|
|
|
|
imgUrl.value = '' |
|
|
|
|
} |
|
|
|
|
// 重置图片 |
|
|
|
|
} |
|
|
|
|
// 组件对外暴露一个open,基于open传过来的参数判断是添加还是编辑 |
|
|
|
|
defineExpose({ open }) |
|
|
|
|
// 新增数据子传父 |
|
|
|
|
const emit = defineEmits(['success']) |
|
|
|
|
|
|
|
|
|
const props = defineProps(['flog']) |
|
|
|
|
const onSubmit = async () => { |
|
|
|
|
console.log(formModel.value, 'formModel.value') |
|
|
|
|
formModel.value.classhours = formModel.value.classhours.toString() |
|
|
|
|
|
|
|
|
|
await formRef.value.validate() |
|
|
|
|
const isEdit = formModel.value.id |
|
|
|
|
if (isEdit) { |
|
|
|
|
await editCourseApi(formModel.value) |
|
|
|
|
ElMessage.success('编辑成功') |
|
|
|
|
ElMessage.success('修改成功') |
|
|
|
|
emit('CloseCouresNameChange') |
|
|
|
|
emit('success') |
|
|
|
|
} else { |
|
|
|
|
// console.log(formModel.value) |
|
|
|
|
await addCourseApi(formModel.value) |
|
|
|
|
ElMessage.success('添加成功') |
|
|
|
|
// 传递关闭抽屉事件 |
|
|
|
|
emit('CloseCouresNameChange') |
|
|
|
|
emit('ClosecreditChange') |
|
|
|
|
emit('CloseclasshoursChange') |
|
|
|
|
} |
|
|
|
|
visibleDrawer.value = false |
|
|
|
|
formModel.value = { ...defaultForm } |
|
|
|
|
imgUrl.value = '' |
|
|
|
|
emit('success') |
|
|
|
|
visibleDrawer.value = false |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// const fileList: any = ref([]) |
|
|
|
|
// function updHandle() { |
|
|
|
|
// updFile() |
|
|
|
|
// } |
|
|
|
|
// function updFile() { |
|
|
|
|
// const fileName = fileList.value[0]?.name |
|
|
|
|
// const file = fileList.value[0]?.raw |
|
|
|
|
|
|
|
|
|
// try { |
|
|
|
|
// client() |
|
|
|
|
// .multipartUpload(fileName, file) |
|
|
|
|
// .then((res) => { |
|
|
|
|
// console.log(res, '拿到图片url') |
|
|
|
|
// }) |
|
|
|
|
// } catch (error) { |
|
|
|
|
// console.log(error, 'error') |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// 新增数据子传父 |
|
|
|
|
const emit = defineEmits([ |
|
|
|
|
'success', |
|
|
|
|
// 课程名称改变 |
|
|
|
|
'couresNameChange', |
|
|
|
|
// 关闭课程名称改变 |
|
|
|
|
'CloseCouresNameChange', |
|
|
|
|
// // 学分改变 |
|
|
|
|
// 'creditChange', |
|
|
|
|
// // 学时改变 |
|
|
|
|
// 'classhoursChange', |
|
|
|
|
// 关闭 |
|
|
|
|
'closecreditChange', |
|
|
|
|
'closeclasshoursChange', |
|
|
|
|
]) |
|
|
|
|
// 新增时数据同步 |
|
|
|
|
const courseNameInput = () => { |
|
|
|
|
if (!props.flog) { |
|
|
|
|
emit('couresNameChange', formModel.value.name) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// const creditInput = () => { |
|
|
|
|
// if (!props.flog) { |
|
|
|
|
// emit('creditChange', formModel.value.credit) |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// const classhoursInput = () => { |
|
|
|
|
// if (!props.flog) { |
|
|
|
|
// emit('classhoursChange', formModel.value.classhours) |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// watch( |
|
|
|
|
// () => props.flog, |
|
|
|
|
// (newVal) => { |
|
|
|
|
// console.log(newVal) |
|
|
|
|
// }, |
|
|
|
|
// ) |
|
|
|
|
onMounted(() => { |
|
|
|
|
console.log(props.flog) |
|
|
|
|
}) |
|
|
|
|
const handleClose = () => { |
|
|
|
|
console.log('关闭') |
|
|
|
|
visibleDrawer.value = false |
|
|
|
|
emit('CloseCouresNameChange') |
|
|
|
|
// emit('ClosecreditChange') |
|
|
|
|
// emit('CloseclasshoursChange') |
|
|
|
|
} |
|
|
|
|
const upload = async (option: any) => { |
|
|
|
|
// console.log(option,) |
|
|
|
|
const res = await tool.oss.upload(option.file) |
|
|
|
|
// console.log(res.url) |
|
|
|
|
formModel.value.img = res.url |
|
|
|
|
imgUrl.value = formModel.value.img |
|
|
|
|
console.log(formModel.value.img) |
|
|
|
|
} |
|
|
|
|
// const uploadChange = (file: any) => { |
|
|
|
|
// console.log(file) |
|
|
|
|
// defaultForm.file = file |
|
|
|
|
// } |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
<el-drawer |
|
|
|
|
:before-close="handleClose" |
|
|
|
|
v-model="visibleDrawer" |
|
|
|
|
direction="rtl" |
|
|
|
|
:title="formModel.id ? '编辑课程' : '添加课程'" |
|
|
|
|
> |
|
|
|
|
<el-form :model="formModel" :rules="rules" ref="formRef"> |
|
|
|
|
<el-form-item label="课程封面" prop="img"> |
|
|
|
|
<el-upload |
|
|
|
|
v-model="formModel.img" |
|
|
|
|
class="avatar-uploader" |
|
|
|
|
:http-request="upload" |
|
|
|
|
:show-file-list="false" |
|
|
|
|
> |
|
|
|
|
<img v-if="imgUrl" :src="imgUrl" class="avatar" /> |
|
|
|
|
<el-icon v-else class="avatar-uploader-icon"> |
|
|
|
|
<Plus /> |
|
|
|
|
</el-icon> |
|
|
|
|
<template #tip> |
|
|
|
|
<div class="el-upload__tip">图片文件要为jpg/png格式，小于500kb</div> |
|
|
|
|
</template> |
|
|
|
|
</el-upload> |
|
|
|
|
<!-- <el-upload |
|
|
|
|
class="avatar-uploader" |
|
|
|
|
action="#" |
|
|
|
|
:show-file-list="false" |
|
|
|
|
v-model="defaultForm.file" |
|
|
|
|
@change="uploadChange" |
|
|
|
|
> |
|
|
|
|
<img v-if="imgUrl" :src="imgUrl" class="avatar" /> |
|
|
|
|
<el-icon v-else class="avatar-uploader-icon"> |
|
|
|
|
<Plus /> |
|
|
|
|
</el-icon> |
|
|
|
|
</el-upload> --> |
|
|
|
|
<!-- 关闭自动上传，无需在提交前上传，本地预览即可s |
|
|
|
|
URL.createObjectURL(...)创建本地预览的地址--> |
|
|
|
|
<!-- <el-upload |
|
|
|
|
v-model:flie-list="formModel.img" |
|
|
|
|
class="avatar-uploader" |
|
|
|
|
:show-file-list="false" |
|
|
|
|
:auto-upload="false" |
|
|
|
|
:http-request="upload" |
|
|
|
|
> |
|
|
|
|
<el-button> |
|
|
|
|
<img v-if="imgUrl" :src="imgUrl" class="avatar" /> |
|
|
|
|
<el-icon v-else class="avatar-uploader-icon"> |
|
|
|
|
<Plus /> |
|
|
|
|
</el-icon> |
|
|
|
|
</el-button> |
|
|
|
|
</el-upload> --> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="课程名称" prop="name"> |
|
|
|
|
<el-input style="width: 200px" v-model="formModel.name"></el-input> |
|
|
|
|
<el-input |
|
|
|
|
:disabled="nameDisabled" |
|
|
|
|
style="width: 200px" |
|
|
|
|
v-model="formModel.name" |
|
|
|
|
@input="courseNameInput" |
|
|
|
|
></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="课程类别" prop="category"> |
|
|
|
|
<el-radio-group v-model="formModel.category"> |
|
|
|
|
<el-radio value="major">专业教育</el-radio> |
|
|
|
|
<el-radio value="common">通识教育</el-radio> |
|
|
|
|
<el-radio value="1">专业教育</el-radio> |
|
|
|
|
<el-radio value="2">通识教育</el-radio> |
|
|
|
|
</el-radio-group> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="课程性质" prop="nature"> |
|
|
|
|
<el-radio-group v-model="formModel.nature"> |
|
|
|
|
<el-radio value="required">必修</el-radio> |
|
|
|
|
<el-radio value="elective">选修</el-radio> |
|
|
|
|
<el-radio value="optional">任修</el-radio> |
|
|
|
|
<el-radio value="1">必修</el-radio> |
|
|
|
|
<el-radio value="2">选修</el-radio> |
|
|
|
|
<el-radio value="3">任修</el-radio> |
|
|
|
|
</el-radio-group> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="课程编码" prop="code"> |
|
|
|
|
<el-input style="width: 200px" v-model="formModel.code"></el-input> |
|
|
|
|
<el-input |
|
|
|
|
style="width: 200px" |
|
|
|
|
v-model="formModel.code" |
|
|
|
|
:disabled="codeDisabled" |
|
|
|
|
></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="课程学分" prop="credit"> |
|
|
|
|
<el-input style="width: 200px" v-model="formModel.credit"></el-input> |
|
|
|
|
<el-input |
|
|
|
|
style="width: 200px" |
|
|
|
|
v-model="formModel.credit" |
|
|
|
|
@input="creditInput" |
|
|
|
|
></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="课程学时" prop="classhours"> |
|
|
|
|
<el-input |
|
|
|
|
style="width: 200px" |
|
|
|
|
v-model="formModel.classhours" |
|
|
|
|
@input="classhoursInput" |
|
|
|
|
></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="考核类型" prop="assessmenttype"> |
|
|
|
|
<el-radio-group v-model="formModel.assessmenttype"> |
|
|
|
|
<el-radio value="exam">考试</el-radio> |
|
|
|
|
<el-radio value="assessment">考察</el-radio> |
|
|
|
|
<el-radio value="1">考试</el-radio> |
|
|
|
|
<el-radio value="2">考察</el-radio> |
|
|
|
|
</el-radio-group> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="考核方式" prop="assessmentway"> |
|
|
|
|
<el-radio-group v-model="formModel.assessmentway"> |
|
|
|
|
<el-radio value="open">开卷</el-radio> |
|
|
|
|
<el-radio value="close">闭卷</el-radio> |
|
|
|
|
<el-radio value="other">其他</el-radio> |
|
|
|
|
<el-radio value="1">开卷</el-radio> |
|
|
|
|
<el-radio value="2">闭卷</el-radio> |
|
|
|
|
<el-radio value="3">其他</el-radio> |
|
|
|
|
</el-radio-group> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="教学方法" prop="teachermethod"> |
|
|
|
|
@ -173,12 +383,41 @@ const onSubmit = async () => { |
|
|
|
|
|
|
|
|
|
<template #footer> |
|
|
|
|
<span class="dialog-footer"> |
|
|
|
|
<el-button @click="visibleDrawer = false" size="large">取消</el-button> |
|
|
|
|
<el-button @click="handleClose" size="large">取消</el-button> |
|
|
|
|
<el-button type="primary" size="large" @click="onSubmit()"> |
|
|
|
|
确认 |
|
|
|
|
</el-button> |
|
|
|
|
<!-- <el-button @click="updHandle">上传</el-button> --> |
|
|
|
|
</span> |
|
|
|
|
</template> |
|
|
|
|
</el-drawer> |
|
|
|
|
</template> |
|
|
|
|
<style scoped></style> |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.avatar-uploader { |
|
|
|
|
:deep() { |
|
|
|
|
.avatar { |
|
|
|
|
width: 178px; |
|
|
|
|
height: 178px; |
|
|
|
|
display: block; |
|
|
|
|
} |
|
|
|
|
.el-upload { |
|
|
|
|
border: 1px dashed var(--el-border-color); |
|
|
|
|
border-radius: 6px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
position: relative; |
|
|
|
|
overflow: hidden; |
|
|
|
|
transition: var(--el-transition-duration-fast); |
|
|
|
|
} |
|
|
|
|
.el-upload:hover { |
|
|
|
|
border-color: var(--el-color-primary); |
|
|
|
|
} |
|
|
|
|
.el-icon.avatar-uploader-icon { |
|
|
|
|
font-size: 28px; |
|
|
|
|
color: #8c939d; |
|
|
|
|
width: 178px; |
|
|
|
|
height: 178px; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
lijiaqi