lijiaqi 4 months ago
parent be30aa3792
commit 780823ce9b
  1. 54
      src/views/course/basicCourseInformation.vue
  2. 58
      src/views/course/components/courseEdit.vue

@ -110,7 +110,7 @@ const onSuccess = () => {
getCourseList() getCourseList()
loading.value = false loading.value = false
} }
// //
const onDeleteCourse = async (id: any) => { const onDeleteCourse = async (id: any) => {
await ElMessageBox.confirm('您确定删除这条课程信息吗', '温馨提示', { await ElMessageBox.confirm('您确定删除这条课程信息吗', '温馨提示', {
confirmButtonText: '确认', confirmButtonText: '确认',
@ -174,12 +174,8 @@ const CloseCouresNameChangeEvent = () => {
<el-form inline v-if="userStore.userInfo.roleId[0] === '1'"> <el-form inline v-if="userStore.userInfo.roleId[0] === '1'">
<el-form-item label="课程教师:" class="short-form-item"> <el-form-item label="课程教师:" class="short-form-item">
<el-select v-model="params.teacher"> <el-select v-model="params.teacher">
<el-option <el-option v-for="teachers in teacherList" :key="teachers.username" :value="teachers.username"
v-for="teachers in teacherList" :label="teachers.name"></el-option>
:key="teachers.username"
:value="teachers.username"
:label="teachers.name"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="课程类别:" class="short-form-item"> <el-form-item label="课程类别:" class="short-form-item">
@ -208,11 +204,7 @@ const CloseCouresNameChangeEvent = () => {
</el-form> </el-form>
<div class="course"> <div class="course">
<ul class="course_list"> <ul class="course_list">
<li <li v-if="userStore.userInfo.roleId[0] === '1'" @click="onAddCourse()" class="add_course">
v-if="userStore.userInfo.roleId === 1"
@click="onAddCourse()"
class="add_course"
>
<div class="plus"> <div class="plus">
<el-icon class="avatar-uploader-icon"> <el-icon class="avatar-uploader-icon">
<Plus /> <Plus />
@ -242,36 +234,19 @@ const CloseCouresNameChangeEvent = () => {
<el-icon class="del" @click="onDeleteCourse(item.id)"> <el-icon class="del" @click="onDeleteCourse(item.id)">
<Delete /> <Delete />
</el-icon> </el-icon>
<el-button <el-button class="object" round plain @click="onGetCourseObject(item.id)">
class="object"
round
plain
@click="onGetCourseObject(item.id)"
>
查看课程目标 查看课程目标
</el-button> </el-button>
</li> </li>
</ul> </ul>
</div> </div>
<el-pagination <el-pagination v-model:current-page="params.pageNo" v-model:page-size="params.pageSize"
v-model:current-page="params.pageNo" :page-sizes="[2, 5, 7, 10]" :background="true" layout="jumper,total, sizes, prev, pager, next " :total="total"
v-model:page-size="params.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"
:page-sizes="[2, 5, 7, 10]" style="margin-top: 10px; justify-content: center" />
:background="true"
layout="jumper,total, sizes, prev, pager, next "
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
style="margin-top: 10px; justify-content: center"
/>
</div> </div>
<course-edit <course-edit ref="drawer" @success="onSuccess" @couresNameChange="couresNameChangeEvent"
ref="drawer" @CloseCouresNameChange="CloseCouresNameChangeEvent" :flog="flog"></course-edit>
@success="onSuccess"
@couresNameChange="couresNameChangeEvent"
@CloseCouresNameChange="CloseCouresNameChangeEvent"
:flog="flog"
></course-edit>
</div> </div>
</div> </div>
</template> </template>
@ -317,6 +292,7 @@ const CloseCouresNameChangeEvent = () => {
} }
.course { .course {
// display: flex; // display: flex;
// flex: 0 0 25%; // flex: 0 0 25%;
// justify-content: space-between; // justify-content: space-between;
@ -354,6 +330,7 @@ const CloseCouresNameChangeEvent = () => {
margin-left: 30px; margin-left: 30px;
margin-top: 10px; margin-top: 10px;
font-weight: bold; font-weight: bold;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
@ -399,6 +376,7 @@ const CloseCouresNameChangeEvent = () => {
.plus { .plus {
width: 100%; width: 100%;
height: 178px; height: 178px;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
@ -413,8 +391,10 @@ const CloseCouresNameChangeEvent = () => {
text-align: center; text-align: center;
} }
} }
.add_course { .add_course {
border: 2px dashed rgb(143, 139, 139); border: 2px dashed rgb(143, 139, 139);
h2 { h2 {
font-size: 40px; font-size: 40px;
text-align: center; text-align: center;
@ -422,11 +402,13 @@ const CloseCouresNameChangeEvent = () => {
color: #535050; color: #535050;
font-weight: bold; font-weight: bold;
margin-top: 20px; margin-top: 20px;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
} }
} }
.short-form-item { .short-form-item {
width: 250px; width: 250px;
margin-right: 65px; margin-right: 65px;

@ -164,7 +164,6 @@ const props = defineProps(['flog'])
const onSubmit = async () => { const onSubmit = async () => {
// console.log(formModel.value, 'formModel.value') // console.log(formModel.value, 'formModel.value')
formModel.value.classhours = formModel.value.classhours.toString() formModel.value.classhours = formModel.value.classhours.toString()
await formRef.value.validate() await formRef.value.validate()
const isEdit = formModel.value.id const isEdit = formModel.value.id
if (isEdit) { if (isEdit) {
@ -172,6 +171,7 @@ const onSubmit = async () => {
ElMessage.success('修改成功') ElMessage.success('修改成功')
emit('CloseCouresNameChange') emit('CloseCouresNameChange')
emit('success') emit('success')
console.log(formModel.value, 'formModel.value')
} else { } else {
console.log(formModel.value, 'formModel.value') console.log(formModel.value, 'formModel.value')
// console.log(formModel.value) // console.log(formModel.value)
@ -211,22 +211,7 @@ const courseNameInput = () => {
emit('couresNameChange', formModel.value.name) 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(() => { onMounted(() => {
console.log(props.flog) console.log(props.flog)
}) })
@ -252,20 +237,11 @@ const upload = async (option: any) => {
</script> </script>
<template> <template>
<el-drawer <el-drawer :before-close="handleClose" v-model="visibleDrawer" direction="rtl"
:before-close="handleClose" :title="formModel.id ? '编辑课程' : '添加课程'">
v-model="visibleDrawer"
direction="rtl"
:title="formModel.id ? '编辑课程' : '添加课程'"
>
<el-form :model="formModel" :rules="rules" ref="formRef"> <el-form :model="formModel" :rules="rules" ref="formRef">
<el-form-item label="课程封面" prop="img"> <el-form-item label="课程封面" prop="img">
<el-upload <el-upload v-model="formModel.img" class="avatar-uploader" :http-request="upload" :show-file-list="false">
v-model="formModel.img"
class="avatar-uploader"
:http-request="upload"
:show-file-list="false"
>
<img v-if="imgUrl" :src="imgUrl" class="avatar" /> <img v-if="imgUrl" :src="imgUrl" class="avatar" />
<el-icon v-else class="avatar-uploader-icon"> <el-icon v-else class="avatar-uploader-icon">
<Plus /> <Plus />
@ -304,12 +280,8 @@ const upload = async (option: any) => {
</el-upload> --> </el-upload> -->
</el-form-item> </el-form-item>
<el-form-item label="课程名称" prop="name"> <el-form-item label="课程名称" prop="name">
<el-input <el-input :disabled="nameDisabled" style="width: 200px" v-model="formModel.name"
:disabled="nameDisabled" @input="courseNameInput"></el-input>
style="width: 200px"
v-model="formModel.name"
@input="courseNameInput"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="课程类别" prop="category"> <el-form-item label="课程类别" prop="category">
<el-radio-group v-model="formModel.category"> <el-radio-group v-model="formModel.category">
@ -325,20 +297,13 @@ const upload = async (option: any) => {
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="课程编码" prop="code"> <el-form-item label="课程编码" prop="code">
<el-input <el-input style="width: 200px" v-model="formModel.code" :disabled="codeDisabled"></el-input>
style="width: 200px"
v-model="formModel.code"
:disabled="codeDisabled"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="课程学分" prop="credit"> <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"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="课程学时" prop="classhours"> <el-form-item label="课程学时" prop="classhours">
<el-input <el-input style="width: 200px" v-model="formModel.classhours"></el-input>
style="width: 200px"
v-model="formModel.classhours"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="考核类型" prop="assessmenttype"> <el-form-item label="考核类型" prop="assessmenttype">
<el-radio-group v-model="formModel.assessmenttype"> <el-radio-group v-model="formModel.assessmenttype">
@ -365,7 +330,7 @@ const upload = async (option: any) => {
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer" v-if="userStore.userInfo.roleId === 1"> <span class="dialog-footer" v-if="userStore.userInfo.roleId[0] === '1'">
<el-button @click="handleClose" size="large">取消</el-button> <el-button @click="handleClose" size="large">取消</el-button>
<el-button type="primary" size="large" @click="onSubmit()"> <el-button type="primary" size="large" @click="onSubmit()">
确认 确认
@ -383,6 +348,7 @@ const upload = async (option: any) => {
height: 178px; height: 178px;
display: block; display: block;
} }
.el-upload { .el-upload {
border: 1px dashed var(--el-border-color); border: 1px dashed var(--el-border-color);
border-radius: 6px; border-radius: 6px;
@ -391,9 +357,11 @@ const upload = async (option: any) => {
overflow: hidden; overflow: hidden;
transition: var(--el-transition-duration-fast); transition: var(--el-transition-duration-fast);
} }
.el-upload:hover { .el-upload:hover {
border-color: var(--el-color-primary); border-color: var(--el-color-primary);
} }
.el-icon.avatar-uploader-icon { .el-icon.avatar-uploader-icon {
font-size: 28px; font-size: 28px;
color: #8c939d; color: #8c939d;

Loading…
Cancel
Save