获取最新

develoop
lijiaqi 3 months ago
parent 0cf6e42287
commit 21e0ad0d13
  1. 4
      .env.development
  2. 62
      src/views/course/basicCourseInformation.vue
  3. 39
      src/views/course/components/course-brief.vue
  4. 6
      src/views/course/components/course-object.vue
  5. 61
      src/views/course/components/courseEdit.vue

@ -1,5 +1,5 @@
# 变量必须以 VITE_ 为前缀才能暴露给外部读取 # 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development' NODE_ENV = 'development'
VITE_APP_TITLE = '无糖运营平台' VITE_APP_TITLE = '无糖运营平台'
VITE_APP_BASE_API = 'http://127.0.0.1:8080' # VITE_APP_BASE_API = 'http://127.0.0.1:8080'
# VITE_APP_BASE_API = 'http://39.106.16.162:8080' VITE_APP_BASE_API = 'http://39.106.16.162:8080'

@ -209,11 +209,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[0] === '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 />
@ -222,17 +218,8 @@ const CloseCouresNameChangeEvent = () => {
<h2 class="course_name">{{ course_name }}</h2> <h2 class="course_name">{{ course_name }}</h2>
</li> </li>
<li v-for="item in courseList" :key="item.id"> <li v-for="item in courseList" :key="item.id">
<img <img title="点击查看课程详情" :src="item.img" alt="" @click="onGetCourseObject(item.id)" />
title="点击查看课程详情" <h2 title="点击查看课程基本信息" class="course_name">
:src="item.img"
alt=""
@click="onGetCourseObject(item.id)"
/>
<h2
title="点击查看课程基本信息"
class="course_name"
@click="onEditCourse(item)"
>
{{ item.name }} {{ item.name }}
</h2> </h2>
<p class="teacher_name">讲师{{ item.teacher }}</p> <p class="teacher_name">讲师{{ item.teacher }}</p>
@ -245,36 +232,22 @@ 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 </el-button>
plain <el-button class="object1" round plain @click="onEditCourse(item)">
@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>
@ -320,6 +293,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;
@ -399,6 +373,12 @@ const CloseCouresNameChangeEvent = () => {
margin-left: 180px; margin-left: 180px;
margin-top: -29px; margin-top: -29px;
} }
.object1 {
position: absolute;
margin-left: 250px;
margin-top: -29px;
}
} }
.plus { .plus {

@ -26,20 +26,25 @@ onMounted(() => {
</script> </script>
<template> <template>
<div class="grid-content course-brief" style="height: 350px"> <div class="grid-content course-brief" style="height: 350px">
<h1 style="text-align:">课程基本信息</h1> <h1 style="text-align:">
{{ courseDetails.name }}
<span>主讲教师{{ courseDetails.teacher }}</span>
</h1>
<div class="box"> <div class="box">
<div class="image"> <div class="image">
<img :src="courseDetails.img" alt="" /> <img :src="courseDetails.img" alt="" />
</div> </div>
<div class="text"> <div class="text">
<h2 class="title"> <!-- <h2 class="title">
{{ courseDetails.name }} {{ courseDetails.name }}
<span>主讲教师{{ courseDetails.teacher }}</span> <span>主讲教师{{ courseDetails.teacher }}</span>
</h2> </h2> -->
<div> <div>
<h3> <h3>
课程简介: 课程简介:
<el-scrollbar height="70px"> <el-scrollbar height="143px">
<p class="pp">{{ courseDetails.description }}</p> <p class="pp">{{ courseDetails.description }}</p>
</el-scrollbar> </el-scrollbar>
<!-- <textarea name="" id=""></textarea> --> <!-- <textarea name="" id=""></textarea> -->
@ -87,9 +92,16 @@ onMounted(() => {
// display: block; // display: block;
padding-top: 20px; padding-top: 20px;
text-align: center; text-align: center;
font-size: 24px; font-size: 26px;
font-weight: 700; font-weight: 700;
color: #333333ff; color: #333333ff;
span {
margin-left: 40px;
font-size: 18px;
line-height: 30px;
color: #8a8b99;
}
} }
.box { .box {
@ -136,12 +148,7 @@ onMounted(() => {
font-family: Inter, Inter; font-family: Inter, Inter;
color: #333333ff; color: #333333ff;
span {
margin-left: 40px;
font-size: 18px;
line-height: 30px;
color: #8a8b99;
}
} }
h3 { h3 {
@ -161,23 +168,27 @@ onMounted(() => {
.brief { .brief {
border-radius: 4px; border-radius: 4px;
width: 100%; width: 100%;
height: 50%; height: 80%;
.ull { .ull {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 10px; margin-top: 10px;
align-content: space-around;
justify-content: space-between;
} }
li { li {
// margin-top: 10px; // margin-top: 10px;
// padding-left: 10px;
margin-right: 80px; margin-right: 80px;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
margin-bottom: 15px; margin-bottom: 10px;
p { p {
margin-top: 10px; margin-top: 6px;
font-size: 16px; font-size: 16px;
} }

@ -10,15 +10,15 @@ import {
getObjectContent, getObjectContent,
} from '@/api/user/object' } from '@/api/user/object'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults.mjs' // import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults.mjs'
const route = useRoute() const route = useRoute()
// const router = useRouter() // const router = useRouter()
const courseId = ref(0) const courseId = ref()
// //
const data = ref({}) const data = ref({})
// //
const params = ref({ const params = ref({
content: '', content: '请添加整体目标',
id: '', id: '',
objectiveId: '', objectiveId: '',
}) })

@ -127,6 +127,13 @@ const rules = {
trigger: 'change', trigger: 'change',
}, },
], ],
description: [
{
required: true,
message: '请输入课程简介',
trigger: 'blur',
},
]
} }
// //
@ -243,20 +250,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 />
@ -295,12 +293,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">
@ -316,25 +310,18 @@ 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">
<el-radio value="1">考试</el-radio> <el-radio value="1">考试</el-radio>
<el-radio value="2"></el-radio> <el-radio value="2"></el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="考核方式" prop="assessmentway"> <el-form-item label="考核方式" prop="assessmentway">
@ -344,14 +331,15 @@ const upload = async (option: any) => {
<el-radio value="3">其他</el-radio> <el-radio value="3">其他</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="教学方法" prop="teachermethod"> <!-- <el-form-item label="教学方法" prop="teachermethod">
<el-input type="textarea" v-model="formModel.teachermethod" /> <el-input type="textarea" v-model="formModel.teachermethod" />
</el-form-item> </el-form-item>
<el-form-item label="教学方式" prop="teacherway"> <el-form-item label="教学方式" prop="teacherway">
<el-input type="textarea" v-model="formModel.teacherway" /> <el-input type="textarea" v-model="formModel.teacherway" />
</el-form-item> </el-form-item> -->
<el-form-item label="课程简介" prop="description"> <el-form-item label="课程简介" prop="description">
<el-input type="textarea" v-model="formModel.description" /> <textarea name="" id="" v-model="formModel.description"></textarea>
<!-- <el-input class="brief_text" type="textarea" /> -->
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -367,6 +355,17 @@ const upload = async (option: any) => {
</el-drawer> </el-drawer>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
textarea {
width: 400px;
height: 180px;
resize: none;
border: 1px solid #dcdfe6;
color: #606266;
line-height: 1.3;
letter-spacing: 1px;
border-radius: 6px;
}
.avatar-uploader { .avatar-uploader {
:deep() { :deep() {
.avatar { .avatar {

Loading…
Cancel
Save