<think>我们有一个
Vue组件，它包含两个对话框：一个用于添加/编辑合集，另一个用于选择课程。我们需要完善这个
组件的代码，特别是处理课程选择、保存合集以及样式调整。主要问题：1
.在“添加课程”部分，目前是静态数据，需要改为从第二个对话框中选择课程并添加到课程列表中。2
.第二个对话框（选择课程）中，我们需要实现多选课程，并能在点击确定后将选中的课程添加到第一个对话框的课程列表中。3
.在课程列表中，每个课程项需要显示序号（如第一讲、第二讲等），并且能够删除和调整顺序（上移下移）。4
.保存合集时，需要将课程列表的数据（包括课程ID和顺序）提交到后端。5
.样式调整：课程列表项的样式需要优化，包括
布局、边框、图片大小等。我们将逐步解决这些问题。步骤：1
.在第二个对话框（选择课程）中，我们需要使用多选表格。因此，我们需要在表格中记录选中的课程。2
.在第二个对话框中，当点击确定时，将选中的课程添加到第一个对话框的课程列表中，并按照选中的顺序（或按某种规则）生成序号（如第一讲、第二讲等）。3
.在课程列表项中，提供删除按钮和上下移动按钮。4
.在保存合集时，将课程列表中的课程ID按顺序组成数组，作为`classIdList`提交。具体修改：1
.数据部分：
-在data中，我们需要一个数组`selectedCourses`来存储第二个对话框中选中的课程（用于多选）。
-修改`courseList`为动态数组，初始为空数组（或者从传入的编辑数据中初始化）。2
.第二个对话框（选择课程）：
-在el
-table上添加`@selection
-change`事件，将选中的行赋值给`selectedCourses`。
-在`saveCourse`方法中，将`selectedCourses`中的课程添加到`courseList`中，并生成序号（如第1讲、第2讲等）。注意：需要去重，避免重复添加同一课程。
-添加序号时，可以按照当前课程列表的长度+1开始。3
.课程列表项：
-为每个课程项添加删除按钮，点击删除按钮从`courseList`中移除该项，并重新计算序号（因为移除后序号会变）。
-添加上移和下移按钮（或者使用上下箭头），调整课程顺序，同时更新序号。4
.保存合集：
-在保存时，将`courseList`中的课程ID按顺序提取出来，赋值给`addEditData
.classIdList`。5
.样式调整：
-调整课程列表项的样式，使其更美观。代码修改如下：</think>我将分析并提供代码完善方案，主要解决以下问题：课程选择功能实现、课程列表管理、数据绑定与提交逻辑。以下是完善后的代码：
```
vue
<template>
<div>
<el
-dialog
:title="type === 'add' ? '新增合集'
: '修改合集'"
:visible="dialogVisible"
width="570px"
top="20px"
@close="close"
>
<el
-form
ref="addEditDataRef"
:model="addEditData"
:rules="rules"
label
-width="140px"
>
<!
-- 合集名称
-->
<el
-form
-item label="合集名称" prop="name">
<el
-input
v
-model="addEditData
.name"
placeholder="请输入课程合集名称"
clearable
maxlength="50"
show
-word
-limit
/>
</el
-form
-item>
<!
-- 插图上传
-->
<el
-form
-item prop="img" label="插图">
<img
-upload
:img
.sync="addEditData
.img"
accept="jpg,png,jpeg"
tips="上传插图"
:scale="[670, 500]"
is
-style
/>
</el
-form
-item>
<!
-- 课程列表管理
-->
<el
-form
-item label="课程列表" prop="classIdList">
<div class="course
-list
-header">
<span>已添加课程 ({{ courseList
.length }})</span>
<el
-button
type="primary"
icon="el
-icon
-plus"
size="small"
@click="addClick"
>
添加课程
</el
-button>
</div>
<!
-- 课程列表展示
-->
<draggable
v
-model="courseList"
handle="
.drag
-handle"
@end="updateOrder"
>
<transition
-group name="list" tag="div">
<div
v
-for="(item, index) in courseList"
:key="item
.id"
class="course
-item"
>
<div class="course
-index">{{ index + 1 }}</div>
<div class="course
-info">
<img
:src="item
.videoCover | imageSrc" alt="课程封面" class="cover
-img">
<div class="course
-details">
<div class="course
-title">{{ item
.title }}</div>
<div class="course
-author">{{ item
.lecturerUser?
.nickName || '未知作者' }}</div>
</div>
</div>
<div class="course
-actions">
<i class="el
-icon
-rank drag
-handle"></i>
<el
-button
type="text"
icon="el
-icon
-delete"
@click="removeCourse(index)"
/>
</div>
</div>
</transition
-group>
</draggable>
</el
-form
-item>
</el
-form>
<!
-- 弹窗底部按钮
-->
<div slot="footer" class="dialog
-footer">
<el
-button @click="close">取 消</el
-button>
<el
-button type="primary" @click="save">确 定</el
-button>
</div>
</el
-dialog>
<!
-- 课程选择弹窗
-->
<el
-dialog
title="选择课程"
:visible="dialogCourse"
width="1600px"
top="20px"
@close="closeCourse"
>
<div class="search
-group mb
-20">
<el
-input
v
-model="searchText"
placeholder="请输入课程标题/作者"
suffix
-icon="el
-icon
-search"
clearable
style="width
: 300px; float
: right; margin
: 10px 0"
@keyup
.enter
.native="handleSearch"
/>
</div>
<!
-- 课程表格
-->
<el
-table
ref="courseTable"
:data="pageInfo
.list"
:height="$baseTableHeight()"
max
-height="500px"
@selection
-change="handleSelectionChange"
>
<el
-table
-column type="selection" width="55" />
<el
-table
-column
label="ID"
prop="id"
min
-width="100"
show
-overflow
-tooltip
/>
<el
-table
-column
label="分类"
min
-width="200"
show
-overflow
-tooltip
>
<template #default="{ row }">
{{ row
.groupName }}/{{ row
.typeName }}
</template>
</el
-table
-column>
<el
-table
-column
label="课程标题"
prop="title"
min
-width="150"
show
-overflow
-tooltip
/>
<el
-table
-column label="封面图" width="100">
<template #default="{ row }">
<el
-image
v
-if="row
.videoCover"
style="width
: 34px; height
: 19px"
:src="$imageSrc(row
.videoCover)"
:preview
-src
-list="[$imageSrc(row
.videoCover, 2)]"
/>
<span v
-else>
-</span>
</template>
</el
-table
-column>
<el
-table
-column
label="作者"
min
-width="200"
show
-overflow
-tooltip
>
<template #default="{ row }">
<div v
-if="row
.lecturerUser" class="flex
-center">
<el
-image
style="width
: 30px; height
: 30px"
:src="$imageSrc(row
.lecturerUser
.userIcon)"
:preview
-src
-list="[$imageSrc(row
.lecturerUser
.userIcon, 2)]"
/>
<div style="margin
-left
: 10px">
<div>{{ row
.lecturerUser
.nickName }}</div>
<div>{{ row
.lecturerUser
.phone }}</div>
</div>
</div>
<span v
-else>
-</span>
</template>
</el
-table
-column>
<el
-table
-column label="发布时间" prop="pushTime" width="170" />
</el
-table>
<!
-- 分页
组件 -->
<el
-pagination
class="pagination"
:current
-page="pageInfo
.pageNum"
:page
-sizes="[10, 20, 50, 100]"
:page
-size="pageInfo
.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageInfo
.total"
@size
-change="setPageSize"
@current
-change="listPage"
/>
<!
-- 弹窗底部按钮
-->
<div slot="footer" class="dialog
-footer">
<el
-button @click="closeCourse">取 消</el
-button>
<el
-button type="primary" @click="confirmSelectedCourses">确 定</el
-button>
</div>
</el
-dialog>
</div>
</template>
<script>
import ImgUpload from '@/components/imgUpload/imgUpload'
import draggable from '
vuedraggable'
export default {
name
: 'CollectionEditDialog',
components
: { ImgUpload, draggable },
props
: {
dialogVisible
: Boolean,
type
: String, // 'add' 或 'edit'
rowData
: Object // 编辑时的初始数据
},
data() {
return {
addEditData
: {
id
: null,
name
: '',
img
: '',
classIdList
: []
},
rules
: {
name
: [{ required
: true, message
: '请输入标题', trigger
: 'blur' }],
img
: [{ required
: true, message
: '请上传插图', trigger
: 'blur' }],
classIdList
: [
{
required
: true,
validator
: (rule, value, callback) => {
if (this
.courseList
.length === 0) {
callback(new Error('请添加至少一门课程'));
} else {
callback();
}
},
trigger
: 'blur'
}
]
},
// 课程选择相关
dialogCourse
: false,
searchText
: '',
pageInfo
: {
list
: [],
pageNum
: 1,
pageSize
: 20,
total
: 0
},
selectedCourses
: [], // 表格中选中的课程
courseList
: [] // 已添加的课程列表
}
},
watch
: {
dialogVisible(val) {
if (val && this
.type === 'edit') {
this
.initEditData()
}
}
},
created() {
if (this
.type === 'edit' && this
.dialogVisible) {
this
.initEditData()
}
},
methods
: {
// 初始化编辑数据
initEditData() {
this
.addEditData = {
...this
.rowData }
// 将编辑数据中的课程转换为列表
if (this
.rowData
.courses) {
this
.courseList = this
.rowData
.courses
.map(course => ({
id
: course
.id,
title
: course
.title,
videoCover
: course
.videoCover,
lecturerUser
: course
.lecturerUser
}))
}
},
// 打开课程选择弹窗
addClick() {
this
.dialogCourse = true
this
.listPage()
},
// 关闭课程选择弹窗
closeCourse() {
this
.dialogCourse = false
this
.searchText = ''
this
.selectedCourses = []
},
// 处理表格选择变化
handleSelectionChange(selection) {
this
.selectedCourses = selection
},
// 确认选择的课程
confirmSelectedCourses() {
// 过滤已存在的课程
const newCourses = this
.selectedCourses
.filter(course =>
!this
.courseList
.some(item => item
.id === course
.id)
)
// 添加新课程到列表
this
.courseList = [
...this
.courseList,
...newCourses
.map(course => ({
id
: course
.id,
title
: course
.title,
videoCover
: course
.videoCover,
lecturerUser
: course
.lecturerUser
}))
]
this
.closeCourse()
},
// 移除课程
removeCourse(index) {
this
.courseList
.splice(index, 1)
},
// 更新拖拽后的顺序
updateOrder() {
// 这里可以添加顺序变更后的逻辑
console
.log('课程顺序已更新
:', this
.courseList)
},
// 搜索课程
handleSearch() {
this
.listPage(1) // 从第一页开始搜索
},
// 获取课程分页数据
async listPage(pageNum) {
const params = {
pageNum
: pageNum || this
.pageInfo
.pageNum,
pageSize
: this
.pageInfo
.pageSize,
title
: this
.searchText
}
try {
const { data } = await this
.$http
.get(
this
.$api
.classInfo
.listPageClassInfo,
{ params }
)
this
.pageInfo = data
} catch (error) {
console
.error('获取课程列表失败
:', error)
this
.$message
.error('获取课程列表失败')
}
},
// 设置分页大小
setPageSize(pageSize) {
this
.pageInfo
.pageSize = pageSize
this
.listPage(1)
},
// 关闭弹窗
close() {
this
.resetForm()
this
.$emit('update
:dialogVisible', false)
},
// 重置表单
resetForm() {
this
.$refs
.addEditDataRef?
.resetFields()
this
.courseList = []
this
.addEditData = {
id
: null,
name
: '',
img
: '',
classIdList
: []
}
},
// 保存合集
save() {
this
.$refs
.addEditDataRef
.validate(async (valid) => {
if (valid) {
// 准备提交数据
const submitData = {
...this
.addEditData,
// 提取课程ID列表
classIdList
: this
.courseList
.map(course => course
.id)
}
try {
const api = this
.type === 'add'
? this
.$api
.collection
.addCollection
: this
.$api
.collection
.updateCollection
const { code, message } = await this
.$http
.post(api, submitData)
if (code === 200) {
this
.$message
.success(`${this
.type === 'add' ? '添加'
: '更新'}成功`)
this
.$emit('refresh') // 通知父
组件刷新数据
this
.close()
} else {
this
.$message
.error(message || '操作失败')
}
} catch (error) {
console
.error('保存失败
:', error)
this
.$message
.error('保存失败，请稍后重试')
}
}
})
}
}
}
</script>
<style lang="scss" scoped>
::v
-deep
.el
-dialog__body {
max
-height
: 70vh;
overflow
-y
: auto;
}
.course
-list
-header {
display
: flex;
justify
-content
: space
-between;
align
-items
: center;
margin
-bottom
: 10px;
}
.course
-item {
display
: flex;
align
-items
: center;
padding
: 10px;
margin
-bottom
: 8px;
border
: 1px solid #ebeef5;
border
-radius
: 4px;
background
-color
: #fafafa;
transition
: all 0
.3s;
&
:hover {
background
-color
: #f0f7ff;
border
-color
: #c6e2ff;
}
}
.course
-index {
min
-width
: 40px;
text
-align
: center;
font
-weight
: bold;
color
: #409eff;
}
.course
-info {
display
: flex;
align
-items
: center;
flex
: 1;
overflow
: hidden;
}
.cover
-img {
width
: 60px;
height
: 45px;
object
-fit
: cover;
border
-radius
: 4px;
margin
-right
: 10px;
}
.course
-details {
flex
: 1;
min
-width
: 0;
}
.course
-title {
font
-size
: 14px;
font
-weight
: 500;
overflow
: hidden;
text
-overflow
: ellipsis;
white
-space
: nowrap;
}
.course
-author {
font
-size
: 12px;
color
: #909399;
}
.course
-actions {
display
: flex;
align
-items
: center;
.drag
-handle {
cursor
: move;
color
: #c0c4cc;
margin
-right
: 8px;
font
-size
: 16px;
&
:hover {
color
: #409eff;
}
}
}
.list
-move {
transition
: transform 0
.3s;
}
</style>
```
### 主要改进点：
1
. **课程选择功能**：
- 使用`el
-table`的`selection
-change`事件处理多选
- 添加去重逻辑防止重复选择课程
- 实现课程搜索功能（按标题/作者）
2
. **课程列表管理**：
- 引入`
vuedraggable`实现拖拽排序功能
- 添加删除课程功能
- 显示序号、课程封面、标题和作者信息
- 添加课程数量统计
3
. **数据绑定与验证**：
- 自定义验证规则确保至少添加一门课程
- 将课程列表映射为ID数组提交
- 编辑模式初始化数据
4
. **API集成**：
- 添加保存合集的API调用
- 错误处理和用户反馈
5
. **UI/UX优化**：
- 优化课程项
布局和样式
- 添加悬停效果提高交互体验
- 响应式设计确保不同屏幕适配
### 使用说明：
1
. 点击"添加课程"按钮打开课程选择弹窗
2
. 在表格中多选课程后点击确定
3
. 使用拖拽图标调整课程顺序
4
. 点击删除图标移除课程
5
. 填写合集信息后保存
### 依赖安装：
```bash
npm install
vuedraggable
```
超级会员免费看
订阅专栏 解锁全文
扫一扫
1055
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
