<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>
<div style="display: flex; width: 100%">
<el-form-item label="添加课程" prop="classIdList" />
<el-button
type="primary"
class="top-left-btn"
icon="el-icon-plus"
@click="addClick"
>
添加课程
</el-button>
</div>
<div
v-for="item in courseList"
:key="item.index"
style="display: flex"
class="course-item"
>
<!-- <div class="course-index">{{ index + 1 }}</div> -->
<div>{{ item.section }}</div>
<div
style="display: flex; align-items: center; gap: 10px"
class="cover-container"
>
<div class="">
<img :src="item.img" alt="课程封面" class="cover-img" />
</div>
<div style="width: 300px">{{ item.name }}</div>
<span>
<el-button
type="text"
size="small"
icon="el-icon-rank"
class="add-btn"
@click="handleAdd(item)"
/>
<span>
<el-button
type="text"
size="small"
icon="el-icon-delete"
class="add-btn"
@click="handleAdd(item)"
/>
</span>
</span>
</div>
</div>
</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>
<div>
<!-- 表格 -->
<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"
/>
<!-- <el-button
type="primary"
style="margin-left: 10px"
@click="handleSearch"
>
搜索
</el-button> -->
</div>
<el-table
:data="pageInfo.list"
:height="$baseTableHeight()"
max-height="500px"
>
<!-- 复选框列 -->
<el-table-column type="selection" width="55" />
<el-table-column
label="ID"
prop="id"
min-width="100"
show-overflow-tooltip
:formatter="$formatCell"
/>
<el-table-column
label="分类"
prop="typeName"
min-width="200"
show-overflow-tooltip
:formatter="(row) => row.groupName + row.typeName"
/>
<el-table-column
label="课程标题"
prop="title"
min-width="150"
show-overflow-tooltip
/>
<el-table-column label="封面图" width="100">
<template #default="{ row }">
<span v-if="!row.videoCover">-</span>
<el-image
v-else
style="width: 34px; height: 19px"
:preview-src-list="[$imageSrc(row.videoCover, 2)]"
:src="$imageSrc(row.videoCover)"
/>
</template>
</el-table-column>
<el-table-column
label="作者"
prop="lecturerUser"
min-width="200"
show-overflow-tooltip
>
<template #default="{ row }">
<div class="flex-center">
<div>
<el-image
v-if="row.lecturerUser"
style="width: 30px; height: 30px"
:preview-src-list="[
$imageSrc(row.lecturerUser.userIcon, 2),
]"
:src="$imageSrc(row.lecturerUser.userIcon)"
/>
<span v-else>-</span>
</div>
<div style="margin-left: 10px">
<div>{{ row.lecturerUser.nickName || '' }}</div>
<div>{{ row.lecturerUser.phone || '' }}</div>
</div>
</div>
</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="saveCourse">确 定</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import ImgUpload from '@/components/imgUpload/imgUpload'
export default {
name: 'NodesAdd',
components: { ImgUpload },
props: {
dialogVisible: {
type: Boolean,
default: false,
},
type: {
type: String,
default: '',
},
rowData: {
type: Object,
default: () => {},
},
},
data() {
return {
addEditData: {
name: '', // 标题
img: '', // 插图
classIdList: [], // 课程id列表
},
searchText: '', // 搜索内容
hasSearched: false, // 弹窗
dialogCourse: false, // 课程弹窗
courseList: [
{
id: 1,
section: '第一讲',
name: '课程介绍与环境搭建去去去去去去去去去去七七七七七七七七七七七七七七七七七七七七七七七七七七七七',
img: 'https://picsum.photos/seed/course1/200/150',
},
{
id: 2,
section: '第二讲',
name: 'Vue 2 基础语法与响应式原理',
img: 'https://picsum.photos/seed/course2/200/150',
},
{
id: 3,
section: '第三讲',
name: '组件化开发与通信机制',
img: 'https://picsum.photos/seed/course3/200/150',
},
{
id: 4,
section: '第四讲',
name: 'Vue Router 与状态管理',
img: 'https://picsum.photos/seed/course4/200/150',
},
{
id: 5,
section: '第五讲',
name: '构建工具与生产部署',
img: 'https://picsum.photos/seed/course5/200/150',
},
],
rules: {
name: [{ required: true, message: '请输入标题', trigger: 'blur' }],
img: [{ required: true, message: '请上传插图', trigger: 'blur' }],
classIdList: [
{ required: true, message: '请添加课程', trigger: 'blur' },
],
},
// ****** 列表相关 ******
pageNum: 1, // 页码
pageSize: 10, // 分页条数
total: 0, // 总数
listTable: [], // 列表list
reqCond: {
// 请求参数
pageNum: 1,
pageSize: 20,
},
pageInfo: {
list: [],
},
}
},
watch: {
dialogVisible(val) {
if (val) {
if (this.type === 'edit') {
this.addEditData = {
...this.rowData,
}
this.getUserList(this.rowData.createUserName)
} else {
this.getUserList()
}
}
},
},
created() {
this.getUserList()
this.listPage()
},
methods: {
handleSearch() {
this.hasSearched = true
// 模拟搜索请求(实际项目中应调用 API)
setTimeout(() => {
// 模拟搜索结果过滤逻辑
const mockResults = [
{
id: 321,
title: 'Vue3 实战教程:从入门到精通',
category: '前端开发',
author: '技术大牛',
publishTime: '2025.06.15 20:34:34',
isNew: true,
},
{
id: 320,
title: 'Element UI 组件库高级应用',
category: 'UI框架',
author: 'UI专家',
publishTime: '2025.06.12 20:12:31',
isNew: false,
},
{
id: 319,
title: 'JavaScript 性能优化技巧大全',
category: '前端开发',
author: '性能大师',
publishTime: '2025.06.10 15:45:22',
isNew: false,
},
]
// 根据搜索词和搜索类型过滤结果
if (!this.searchText) {
this.searchResults = mockResults
} else {
this.searchResults = mockResults.filter((item) => {
if (this.searchType === 'all') {
return (
item.title.includes(this.searchText) ||
item.author.includes(this.searchText) ||
item.category.includes(this.searchText)
)
} else if (this.searchType === 'title') {
return item.title.includes(this.searchText)
} else if (this.searchType === 'author') {
return item.author.includes(this.searchText)
} else if (this.searchType === 'category') {
return item.category.includes(this.searchText)
}
return false
})
}
}, 500)
},
addClick() {
this.dialogCourse = true
},
closeCourse() {
this.dialogCourse = false
},
saveCourse() {
this.dialogCourse = false
},
// 课程分页列表查询
async listPage(pageNum) {
pageNum > 0 && (this.reqCond.pageNum = pageNum)
const { data } = await this.$http.get(
this.$api.classInfo.listPageClassInfo,
this.reqCond
)
this.pageInfo = data
},
setPageSize(pageSize) {
this.reqCond.pageSize = pageSize
this.listPage()
},
// 关闭弹窗
close() {
this.addEditData = {}
this.$refs.addEditDataRef.resetFields()
this.$emit('update:dialogVisible', false)
},
// 保存
save() {
this.$refs.addEditDataRef.validate(async (valid) => {
if (valid) {
let text = this.type === 'add' ? '新增' : '修改'
let param = {}
const {
title,
insertImage,
id,
mainContent,
qrCodeUrl,
createUser,
status,
releaseTime,
} = this.addEditData
param = {
title,
insertImage,
mainContent,
qrCodeUrl,
createUser,
status,
releaseTime,
}
if (this.type === 'edit') {
param.id = id
}
this.$baseConfirm(`你确定是否${text}这条数据吗?`, async () => {
await this.$http.post(this.$api.newsNote.addOrUpdate, {
...param,
})
this.$baseMessage(`操作成功`)
this.$emit('queryPage')
this.close()
})
}
})
},
// 获取作者下拉列表
async getUserList(key) {
const { data } = await this.$http.get(this.$api.user.searchUser, {
key,
})
this.userList = data
},
},
}
</script>
<style lang="scss" scoped>
.c-ml-10 {
margin-left: 10px;
}
::v-deep .el-dialog__body {
height: 650px;
overflow-y: auto;
}
.cover-img {
width: 60px; /* 设置图片宽度 */
height: 60px; /* 设置图片高度 */
object-fit: cover; /* 保持图片比例并覆盖容器 */
border-radius: 4px; /* 圆角 */
}
.course-item {
// width: 100%;
margin-top: 10px;
margin-left: 100px;
height: 84px;
}
.cover-container {
width: 80%;
border: 1px solid #ccc;
padding: 10px;
border-radius: 4px; /* 圆角 */
margin-left: 10px;
}
</style>
完善代码
最新发布