课程基本信息跳转课程目标

develoop
lijiaqi 5 months ago
parent 3944b4caaf
commit 93a89c6fa9
  1. 5
      mock/user.ts
  2. 45
      src/api/user/crouse.js
  3. 12
      src/utils/alioss.js
  4. 2
      src/views/course/CourseObjectives.vue
  5. 422
      src/views/course/basicCourseInformation.vue
  6. 61
      src/views/course/components/KnowledgeEdit.vue
  7. 321
      src/views/course/components/courseEdit.vue
  8. 114
      src/views/course/knowledgePoints.vue
  9. 1
      src/views/home/components/Status.vue

@ -10,7 +10,6 @@ function createUserList() {
desc: '平台管理员', desc: '平台管理员',
roles: ['平台管理员'], roles: ['平台管理员'],
buttons: ['cuser.detail'], buttons: ['cuser.detail'],
<<<<<<< HEAD
routes: [ routes: [
'Home', 'Home',
'Course', 'Course',
@ -22,10 +21,8 @@ function createUserList() {
'CourseChapters', 'CourseChapters',
'KnowledgePoints', 'KnowledgePoints',
'CurriculumMap', 'CurriculumMap',
'knowledgeAtlas',
], //老师权限 ], //老师权限
=======
routes: ['Home', 'Course', 'Student', 'Group', 'Message','BasicCourseInformation','CourseObjectives','CourseChapters','KnowledgePoints','CurriculumMap','knowledgeAtlas'], //老师权限
>>>>>>> c410b660ea058afeb8db74ec244fc38f8928cf30
token: 'Admin Token', token: 'Admin Token',
}, },
{ {

@ -1,28 +1,33 @@
import request from '@/utils/request' import request from '@/utils/request'
export const getCourseListApi = () => { // 获取课程列表
return request.get('/coursesteacher/page?teacherId=2140110334') export const getCourseListApi = (params) => {
return request.get('/coursesteacher/page', {
params,
})
} }
export const editCourseApi = () => { // 编辑课程
return request.put('/coursesTeacher') export const editCourseApi = (params) => {
return request.put('/coursesteacher', params)
} }
// 添加课程
export const addCourseApi = (data) => { export const addCourseApi = (data) => {
return request.post('/courseTeacher/addCourse', data) return request.post(`/coursesteacher/addcourse`, data)
} }
export const fnName = (data) => { // 获取课程详情
return request({ export const getCourseDetailApi = (id) => {
url: 'xxxxx', return request.get(`/coursesteacher/${id}`)
method: 'POST',
data
})
} }
export const fnNameGet = (params) => {
return request({ // 删除课程
url: 'xxxxx', export const deleteCourseApi = (id) => {
method: 'get', return request.delete(`/coursesteacher/${id}`)
params }
}) // 获取课程id
export const getCourseObjectApi = (id) => {
return request.get(`/course_objectives/list/${id}`)
}
// 获取教师列表
export const getTeacherListApi = () => {
return request.get('/user/get_teacherinf_list')
} }
// {id:1}
// http://127.0.0.1/getlist?id=1
// http://127.0.0.1/setuser 载荷 body

@ -12,13 +12,19 @@ export const tool = {
oss: { oss: {
async upload(file) { async upload(file) {
// // console.log(11, file, client) // // console.log(11, file, client)
// 文件名 // 文件名
const uuid = nanoid() // 文件后缀名 const uuid = nanoid()
// 文件后缀名
const index = file.name.lastIndexOf('.') const index = file.name.lastIndexOf('.')
const suffix = file.name.substring(index + 1) const suffix = file.name.substring(index + 1)
let fileName = uuid + '.' + suffix let fileName = uuid + '.' + suffix
console.log(uuid, file, suffix) // return await client.multipartUpload(fileName, file, { console.log(uuid, file, suffix)
// return await client.multipartUpload(fileName, file, {
// progress: function (p) {
// console.log('进度', p)
// },
// })
return await client.put(fileName, file) return await client.put(fileName, file)
}, },
}, },

@ -31,7 +31,7 @@ import {} from 'vue'
</el-row> </el-row>
</template> </template>
<style> <style scoped>
.el-row { .el-row {
margin-bottom: 20px; margin-bottom: 20px;
} }

@ -1,184 +1,262 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import axios from 'axios' // import axios from 'axios'
import courseEdit from './components/courseEdit.vue' import courseEdit from './components/courseEdit.vue'
import { getCourseListApi } from '../../api/user/crouse.js' import { Plus, Search } from '@element-plus/icons-vue'
const courseList = ref([ import {
// id: 1, getCourseListApi,
// category: '', deleteCourseApi,
// nature: '', getCourseObjectApi,
// code: '', getTeacherListApi,
// assessmenttype: '', } from '../../api/user/crouse'
// assessmentway: '', import { ElMessageBox, ElMessage } from 'element-plus'
// teachermethod: '', // import router from '@/router'
// teacherway: '', import { useRouter, useRoute } from 'vue-router'
// description: '', const router = useRouter()
// name: '', // const route = useRoute()
// credit: '', // console.log(route)
// classhours: '',
]) // import { client } from '@/utils/alioss.js'
//
const courseList = ref([])
//
const teacherList = ref([])
const getTeacherList = async () => {
const res = await getTeacherListApi()
console.log(res)
teacherList.value = res.data
console.log(teacherList.value)
}
const total = ref(0)
const params = ref({
pageNo: 1,
pageSize: 7,
username: 'qiu',
assessmenttype: '',
category: '',
nature: '',
teacher: '',
})
const loading = ref(false)
//
const getCourseList = async () => { const getCourseList = async () => {
const res = await getCourseListApi() loading.value = true
courseList.value = res.result.list const res = await getCourseListApi(params.value)
// console.log(res)
courseList.value = res.data.list
total.value = res.data.total
console.log(res.data.list)
loading.value = false
} }
//
onMounted(() => { onMounted(() => {
getCourseList() getCourseList()
getTeacherList()
}) })
//
const onSearch = () => {
params.value.pageNo = 1
getCourseList()
}
const onReset = () => {
params.value.pageNo = 1
params.value.assessmenttype = ''
params.value.teacher = ''
params.value.category = ''
params.value.nature = ''
getCourseList()
}
//
const handleSizeChange = (size: any) => {
// loading.value = true
// console.log(size)
params.value.pageNo = 1
params.value.pageSize = size
//
getCourseList()
}
const handleCurrentChange = (page: any) => {
console.log(page)
params.value.pageNo = page
//
getCourseList()
}
// const courseList = ref([ //
// {
// id: 1,
// category: '1',
// nature: '1',
// code: '1',
// assessmenttype: '1',
// assessmentway: '1',
// teachermethod: '',
// teacherway: '',
// description: '',
// name: '',
// credit: '',
// classhours: '',
// },
// {
// id: 2,
// category: '1',
// nature: '1',
// code: '1',
// assessmenttype: '1',
// assessmentway: '1',
// teachermethod: '',
// teacherway: '',
// description: '',
// name: '',
// credit: '',
// classhours: '',
// },
// {
// id: 3,
// category: '1',
// nature: '1',
// code: '1',
// assessmenttype: '1',
// assessmentway: '1',
// teachermethod: '',
// teacherway: '',
// description: '',
// name: '',
// credit: '',
// classhours: '',
// },
// {
// id: 4,
// category: '1',
// nature: '1',
// code: '1',
// assessmenttype: '1',
// assessmentway: '1',
// teachermethod: '',
// teacherway: '',
// description: '',
// name: '',
// credit: '',
// classhours: '',
// },
// {
// id: 5,
// category: '1',
// nature: '1',
// code: '1',
// assessmenttype: '1',
// assessmentway: '1',
// teachermethod: '',
// teacherway: '',
// description: '',
// name: '',
// credit: '',
// classhours: '',
// },
// {
// id: 6,
// category: '1',
// nature: '1',
// code: '1',
// assessmenttype: '1',
// assessmentway: '1',
// teachermethod: '',
// teacherway: '',
// description: '',
// name: '',
// credit: '',
// classhours: '',
// },
// {
// id: 7,
// category: '1',
// nature: '1',
// code: '1',
// assessmenttype: '1',
// assessmentway: '1',
// teachermethod: '',
// teacherway: '',
// description: '',
// name: '',
// credit: '',
// classhours: '',
// },
// ])
const drawer = ref() const drawer = ref()
//
const onAddCourse = () => { const onAddCourse = () => {
flog.value = false
drawer.value.open({}) drawer.value.open({})
} }
const onEditCourse = (item) => { const flog = ref(false)
//
const onEditCourse = (item: any) => {
flog.value = true
console.log(item)
drawer.value.open(item) drawer.value.open(item)
} }
//
const onSuccess = () => { const onSuccess = () => {
// loading.value = true
getCourseList() getCourseList()
// loading.value = false
} }
//
const onDeleteCourse = async (id: any) => {
await ElMessageBox.confirm('您确定删除这条课程信息吗', '温馨提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
await deleteCourseApi(id)
.then(() => {
ElMessage.success('删除成功')
// console.log(res)
})
.catch((err: any) => {
ElMessage.error(err.response.data.message)
})
getCourseList()
}
// id
const onGetCourseObject = async (id: any) => {
// const res = await getCourseObjectApi(id)
router.push({
path: '/curriculumCenter/CourseObjectives',
query: {
id: id,
},
})
// console.log(res)
}
const course_name = ref('点击添加课程')
// const credit_name = ref('32')
// const classhours_name = ref('2.0')
// const creditChangeEvent = (credit: any) => {
// credit_name.value = credit
// }
// const ClosecreditChangeEvent = () => {
// credit_name.value = '32'
// }
const couresNameChangeEvent = (name: any) => {
// console.log(name, 'name')
course_name.value = name
}
const CloseCouresNameChangeEvent = () => {
course_name.value = '点击添加课程'
}
// const classhoursChangeEvent = (classhours: any) => {
// classhours_name.value = classhours
// }
// const CloseclasshoursChangeEvent = () => {
// classhours_name.value = '2.0'
// }
// const goToObject = () => {
// this.$route.push('/curriculumCenter/CourseObjectives')
// }
</script> </script>
<template> <template>
<div class="main-content" v-loading="loading">
<div class="header"> <div class="header">
<div class="btn"> <div class="btn">
<el-button type="primary" round size="large">全部课程</el-button> <!-- <el-button type="primary" round size="large">全部课程</el-button>
<el-button type="primary" round plain size="large">我的文件夹</el-button> <el-button type="primary" round plain size="large">我的文件夹</el-button> -->
</div>
<div class="search"> <el-form inline>
<input type="text" placeholder="搜索课程" /> <el-form-item label="课程教师:" class="short-form-item">
<i class="el-icon-search"></i> <el-select v-model="params.teacher">
</div> <el-option v-for="teachers in teacherList" :key="teachers.username" :value="teachers.username"
</div> :label="teachers.name"></el-option>
</el-select>
</el-form-item>
<el-form-item label="课程类别:" class="short-form-item">
<el-select v-model="params.category">
<el-option label="专业教育" value="1"></el-option>
<el-option label="通识教育" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="课程性质" class="short-form-item">
<el-select v-model="params.nature">
<el-option label="必修" value="1"></el-option>
<el-option label="选修" value="2"></el-option>
<el-option label="任修" value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="考核类型:" class="short-form-item">
<el-select v-model="params.assessmenttype">
<el-option label="考试" value="1"></el-option>
<el-option label="考察" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch">搜索</el-button>
<el-button type="primary" plain @click="onReset">重置</el-button>
</el-form-item>
</el-form>
<div class="course"> <div class="course">
<ul class="course_list"> <ul class="course_list">
<li @click="onAddCourse()"> <li @click="onAddCourse()">
<img src="" alt="" /> <div class="plus">
<h2 class="course_name">点击添加课程</h2> <el-icon class="avatar-uploader-icon">
<p class="teacher_name">讲师王兴</p> <Plus />
</el-icon>
</div>
<h2 class="course_name">{{ course_name }}</h2>
<!-- <p class="teacher_name">讲师{{ courseList.teacher }}</p>
<p class="credit"> <p class="credit">
<span>32</span> <span>{{ credit_name }}</span>
学时| 学时|
<span>2.0</span> <span>{{ classhours_name }}</span>
学分 学分
</p> </p> -->
</li> </li>
<li v-for="item in courseList" :key="item.id" @click="onEditCourse(item)"> <li v-for="item in courseList" :key="item.id">
<img src="" alt="" /> <img :src="item.img" alt="" />
<h2 class="course_name">{{ item.name }}</h2> <h2 class="course_name" @click="onEditCourse(item)">
<p class="teacher_name">讲师王兴</p> {{ item.name }}
</h2>
<p class="teacher_name">讲师{{ item.teacher }}</p>
<p class="credit"> <p class="credit">
<span>{{ item.classhours }}</span> <span>{{ item.classhours }}</span>
学时| 学时|
<span>{{ item.credit }}</span> <span>{{ item.credit }}</span>
学分 学分
</p> </p>
<el-icon class="del" @click="onDeleteCourse(item.id)">
<Delete />
</el-icon>
<el-button class="object" round plain @click="onGetCourseObject(item.id)">
查看课程目标
</el-button>
</li> </li>
</ul> </ul>
</div> </div>
<course-edit ref="drawer" @success="onSuccess"></course-edit> <el-pagination v-model:current-page="params.pageNo" v-model:page-size="params.pageSize"
:page-sizes="[2, 5, 7, 10]" :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>
<course-edit ref="drawer" @success="onSuccess" @couresNameChange="couresNameChangeEvent"
@CloseCouresNameChange="CloseCouresNameChangeEvent" @creditChange="creditChangeEvent"
@classhoursChange="classhoursChangeEvent" @ClosecreditChange="ClosecreditChangeEvent"
@CloseclasshoursChange="CloseclasshoursChangeEvent" :flog="flog"></course-edit>
</div>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.main-content {
width: 1440px;
margin: 0 auto;
}
.header { .header {
width: 100%; width: 100%;
// height: 100px; // height: 100px;
@ -186,22 +264,22 @@ const onSuccess = () => {
flex-direction: row; flex-direction: row;
} }
.btn { // .btn {
// display: flex; // // display: flex;
width: 50%; // width: 50%;
height: 100%; // height: 100%;
padding: 10px 45px; // padding: 10px 0;
// display: inline; // // display: inline;
// height: 40px; // // height: 40px;
// margin: 20px; // // margin: 20px;
// padding-left: 50px; // // padding-left: 50px;
} // }
.search { .search {
width: 50%; width: 50%;
display: flex; display: flex;
height: 100%; height: 100%;
padding: 10px 0 0 630px; justify-content: flex-end;
// flex-direction: row-reverse; // flex-direction: row-reverse;
// padding: 0 40px 0; // padding: 0 40px 0;
@ -215,6 +293,7 @@ const onSuccess = () => {
} }
.course { .course {
// display: flex; // display: flex;
// flex: 0 0 25%; // flex: 0 0 25%;
// justify-content: space-between; // justify-content: space-between;
@ -234,15 +313,15 @@ const onSuccess = () => {
width: 349px; width: 349px;
width: 100%; width: 100%;
height: 297px; height: 297px;
background: white; background: rgb(255, 255, 255);
transition: all 0.5s; transition: all 0.5s;
border-radius: 6px; border-radius: 6px;
position: relative;
// flex: 1; /* */ // flex: 1; /* */
&:hover { &:hover {
transform: translate3d(0, -3px, 0); transform: translate3d(0, -3px, 0);
box-shadow: 0 3px 8px rgb(0 0 0 / 20%); box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
cursor: pointer;
} }
.course_name { .course_name {
@ -282,7 +361,44 @@ const onSuccess = () => {
margin-left: 30px; margin-left: 30px;
margin-top: 10px; margin-top: 10px;
font-weight: bold; font-weight: bold;
&:hover {
cursor: pointer;
}
} }
} }
.del {
position: absolute;
margin-left: 302px;
margin-top: -90px;
color: #0052ff;
cursor: pointer;
}
.object {
position: absolute;
margin-left: 204px;
margin-top: -24px;
}
}
.plus {
width: 100%;
height: 178px;
// background-position: center center;
.el-icon.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100%;
height: 178px;
text-align: center;
}
}
.short-form-item {
width: 250px;
margin-right: 65px;
} }
</style> </style>

@ -1,61 +0,0 @@
<script setup>
import { ref, defineExpose } from 'vue'
import { ElMessage } from 'element-plus'
const dialogVisible = ref(false)
const formModel = ref({
name: '',
desc: '',
})
const formRef = ref()
const rules = {
name: [{ required: true, message: '请输入知识点名称', trigger: 'blur' }],
desc: [{ required: true, message: '请输入知识点简介', trigger: 'blur' }],
}
// open,open
const open = (row) => {
// console.log(row)
formModel.value = { ...row }
dialogVisible.value = true
}
defineExpose({ open })
//
const onSubmit = async () => {
//
await formRef.value.validate()
// formModelid
const isEdit = formModel.value.id
if (isEdit) {
ElMessage.success('编辑成功')
} else {
ElMessage.success('添加成功')
}
dialogVisible.value = false
}
</script>
<template>
<el-dialog
v-model="dialogVisible"
:title="formModel.id ? '编辑知识点' : '新增知识点'"
width="500"
>
<el-form :model="formModel" :rules="rules" ref="formRef">
<el-form-item label="知识点名称" prop="name">
<el-input v-model="formModel.name" placeholder="请输入知识点名称" />
</el-form-item>
<el-form-item label="知识点简介" prop="desc">
<el-input
v-model="formModel.desc"
type="textarea"
placeholder="请输入知识点简介"
/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="onSubmit">确认</el-button>
</div>
</template>
</el-dialog>
</template>

@ -1,30 +1,64 @@
<script setup> <script setup lang="ts">
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { requiredNumber } from 'element-plus/es/components/table-v2/src/common.mjs' 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 { editCourseApi } from '../../../api/user/crouse'
import { addCourseApi } from '../../../api/user/crouse' import { addCourseApi } from '../../../api/user/crouse'
const formModel = ref({ import { getCourseListApi, getCourseDetailApi } from '../../../api/user/crouse'
id: '', 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: '', name: '',
category: '', category: ref(''),
nature: '', nature: ref(''),
code: '', code: '',
credit: '', credit: '',
classhours: '', classhours: '',
assessmenttype: '', assessmenttype: ref(''),
assessmentway: '', assessmentway: ref(''),
teachermethod: '', teachermethod: '',
teacherway: '', teacherway: '',
description: '', description: '',
file: null,
}
const formModel = ref({
...defaultForm,
}) })
const rules = { const rules = {
img: [
{
required: true,
message: '请上传课程封面',
trigger: 'change',
},
],
name: [ name: [
{ {
required: true, required: true,
message: '请输入课程名称', message: '请输入课程名称',
trigger: 'blur', trigger: 'blur',
}, },
{
pattern: /^[a-zA-Z\u4e00-\u9fa5A-Z0-9]*$/,
message: '只能输入汉字或字母',
trigger: 'blur',
},
{ max: 10, message: '不能超过10个字符', trigger: 'blur' },
], ],
category: [ category: [
{ {
@ -46,6 +80,12 @@ const rules = {
message: '请输入课程编码', message: '请输入课程编码',
trigger: 'blur', trigger: 'blur',
}, },
{
pattern: /^[A-Z0-9]*$/,
message: '只能输入数字或大写字母',
trigger: 'blur',
},
{ max: 10, message: '不能超过10个字符', trigger: 'blur' },
], ],
credit: [ credit: [
{ {
@ -53,11 +93,7 @@ const rules = {
message: '请输入课程学分', message: '请输入课程学分',
trigger: 'blur', trigger: 'blur',
}, },
{ { pattern: /^\d*$/, message: '只能输入数字', trigger: 'blur' },
validator: requiredNumber,
message: '请输入数字',
trigger: 'blur',
},
], ],
classhours: [ classhours: [
{ {
@ -65,11 +101,8 @@ const rules = {
message: '请输入课程学时', message: '请输入课程学时',
trigger: 'blur', trigger: 'blur',
}, },
{ { pattern: /^\d*$/, message: '只能输入数字', trigger: 'blur' },
validator: requiredNumber, { max: 2, message: '不能超过2个字符', trigger: 'blur' },
message: '请输入数字',
trigger: 'blur',
},
], ],
assessmenttype: [ 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 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 // open,open
defineExpose({ open }) defineExpose({ open })
//
const emit = defineEmits(['success']) const props = defineProps(['flog'])
const onSubmit = async () => { const onSubmit = async () => {
console.log(formModel.value, 'formModel.value')
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) {
await editCourseApi(formModel.value) await editCourseApi(formModel.value)
ElMessage.success('编辑成功') ElMessage.success('修改成功')
emit('CloseCouresNameChange')
emit('success')
} else { } else {
// console.log(formModel.value)
await addCourseApi(formModel.value) await addCourseApi(formModel.value)
ElMessage.success('添加成功') ElMessage.success('添加成功')
//
emit('CloseCouresNameChange')
emit('ClosecreditChange')
emit('CloseclasshoursChange')
} }
visibleDrawer.value = false formModel.value = { ...defaultForm }
imgUrl.value = ''
emit('success') 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> </script>
<template> <template>
<el-drawer <el-drawer
:before-close="handleClose"
v-model="visibleDrawer" v-model="visibleDrawer"
direction="rtl" direction="rtl"
:title="formModel.id ? '编辑课程' : '添加课程'" :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-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-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>
<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">
<el-radio value="major">专业教育</el-radio> <el-radio value="1">专业教育</el-radio>
<el-radio value="common">通识教育</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="nature"> <el-form-item label="课程性质" prop="nature">
<el-radio-group v-model="formModel.nature"> <el-radio-group v-model="formModel.nature">
<el-radio value="required">必修</el-radio> <el-radio value="1">必修</el-radio>
<el-radio value="elective">选修</el-radio> <el-radio value="2">选修</el-radio>
<el-radio value="optional">任修</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="code"> <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>
<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"
@input="creditInput"
></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" style="width: 200px"
v-model="formModel.classhours" v-model="formModel.classhours"
@input="classhoursInput"
></el-input> ></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="exam">考试</el-radio> <el-radio value="1">考试</el-radio>
<el-radio value="assessment">考察</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">
<el-radio-group v-model="formModel.assessmentway"> <el-radio-group v-model="formModel.assessmentway">
<el-radio value="open">开卷</el-radio> <el-radio value="1">开卷</el-radio>
<el-radio value="close">闭卷</el-radio> <el-radio value="2">闭卷</el-radio>
<el-radio value="other">其他</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">
@ -173,12 +383,41 @@ const onSubmit = async () => {
<template #footer> <template #footer>
<span class="dialog-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 type="primary" size="large" @click="onSubmit()">
确认 确认
</el-button> </el-button>
<!-- <el-button @click="updHandle">上传</el-button> -->
</span> </span>
</template> </template>
</el-drawer> </el-drawer>
</template> </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>

@ -1,114 +1,6 @@
<script setup> <script setup></script>
import { ref } from 'vue'
import { Delete, Edit } from '@element-plus/icons-vue'
import PageContainer from './components/PageContainer.vue'
import KnowledgeEdit from './components/KnowledgeEdit.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// const loading = ref(false)
const knowledgeList = [
{
id: '1',
name: '数学',
desc: '数学简介',
},
{
id: '1',
name: '物理',
desc: '物理简介',
},
{
id: '1',
name: '语文',
desc: '语文简介',
},
{
id: '1',
name: '英语',
desc: '英语简介',
},
]
// ref
const dialog = ref()
const onEditKnowledge = (row) => {
dialog.value.open(row)
}
const onAddKnowledge = () => {
dialog.value.open({})
}
const onDelKnowledge = async () => {
// console.log('1')
await ElMessageBox.confirm('你确认删除该知识点信息吗?', '温馨提示', {
type: 'warning',
confirmButtonText: '确认',
cancelButtonText: '取消',
})
ElMessage({ type: 'success', message: '删除成功' })
}
const params = ref({
pagenum: 1,
pagesize: 2,
})
</script>
<template> <template>
<page-container title="知识点分类"> <dev>知识点</dev>
<!-- v-slot可以替换为# -->
<template #extra>
<el-button type="primary" @click="onAddKnowledge()">新增</el-button>
<el-button type="primary">导出Excel</el-button>
</template>
<el-table
:data="knowledgeList"
style="width: 100%; height: 100%"
:header-cell-style="{ textAlign: 'center' }"
>
<el-table-column align="center" type="index" label="编号" width="100" />
<el-table-column align="center" label="名称" prop="name" />
<el-table-column align="center" label="简介" prop="desc" />
<el-table-column align="center" label="操作">
<!-- 作用域插槽 -->
<!-- rowknowledgeList的每一项 &index下标 -->
<template #default="{ row }">
<el-button
:icon="Edit"
circle
plain
type="primary"
@click="onEditKnowledge(row)"
></el-button>
<el-button
:icon="Delete"
circle
plain
type="danger"
@click="onDelKnowledge(row)"
></el-button>
</template>
</el-table-column>
<template #empty>
<el-empty description="暂无数据"></el-empty>
</template>
</el-table>
<el-pagination
v-model:current-page="params.pagenum"
v-model:page-size="params.pagesize"
:page-sizes="[2, 3, 5, 10]"
:small="small"
:background="true"
layout=" jumper,total, sizes, prev, pager, next"
:total="knowledgeList.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
style="margin-top: 20px; justify-content: flex-end"
/>
<knowledge-edit ref="dialog"></knowledge-edit>
</page-container>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped></style>
.el-table {
overflow: hidden;
}
</style>

@ -2,7 +2,6 @@
import add from '@/assets/images/add.png' import add from '@/assets/images/add.png'
// import { Plus } from '@element-plus/icons-vue' // import { Plus } from '@element-plus/icons-vue'
import { userChangeService } from '@/api/user/user.js' import { userChangeService } from '@/api/user/user.js'
import { tool } from '@/utils/img'
const dialogFormVisible = ref(false) const dialogFormVisible = ref(false)
import { ref } from 'vue' import { ref } from 'vue'
const props = defineProps({ const props = defineProps({

Loading…
Cancel
Save