hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-06 17:36:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(course): implement video selection and management features

Browse Source 
- Added AddVideo component for video selection with preview and settings
- Implemented BasicTable component for displaying paginated data with custom rendering
- Created course file API module for managing course materials
- Enhanced dragTable component with edit, preview, and delete functionalities
- Added comprehensive styling utilities for margins, paddings, and dimensions
- Integrated video selection dialog in course creation workflow
- Added support for video drag-and-drop and completion rule configuration
- Implemented reusable course data management hook with icon support
- Added chapter and section management capabilities
- Enhanced course operation mapping for various content types
This commit is contained in:
陈昱达
2025-11-20 17:28:23 +08:00
parent 740ad58897
commit 8ebca12470
8 changed files with 1018 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/api/modules/courseFile.js Normal file
View File

@@ -0,0 +1,92 @@
/**
* 课件文件内容的相关处理，当前只是业务管理员和教师功能使用<br/>
* 下载课件，一期是直接在新的窗口打开文件的地址就可以了。不采用流的方式下载
*/
import ajax from "./xajax.js";
/**
* 分页查询，课件的管理列表
* @param {Object} data
* {
name:查询的名称的关键字
self:true/false,默认是true,是否只查询自己上传的课件
resOwner1:资源归属一级的id
resOwner2:资源归属二级的id
resOwner3:资源归属三级的id
resType: 文件类型,10视频，20音频，30图片， 40 文档，41表图文，50表scrom包,90表其它
}
*/
const pageList = function (data) {
return ajax.post("/systemapi/xboe/m/course/file/pagelist", data);
};
/**
* 选择课件的查询，这里也是分页查询，只是返回的内容，字段会很少，用于课件制作那选择已有课件内容。
*
* @param {Object} data
* 查询参数如上面pageList方法
*/
const findList = function (data) {
//一期返回内容就对象，之后优化只是返回需要的几字段，不是全部
return ajax.post("/systemapi/xboe/m/course/file/pagelist", data);
};
/**
* 上传保存，上传课件成功后，再调用此接口，保存上传的文件信息。
* 接口返回课件记录（json对象）,直接追加到列表中。
* @param {Object} data
* {
fileName:上传文件的名称
fileType: 文件的后缀名，比如：.mp4
filePath: 文件的保存路径
resOwner1:资源归属一级的id
resOwner2:资源归属二级的id
resOwner3:资源归属三级的id
resType: 文件类型,10视频，20音频，30图片， 40 文档，50表图文，60表scrom包,90表其它，
remark: 备注说明，可以为空，不填
}
*/
const saveUpload = function (data) {
return ajax.post("/systemapi/xboe/m/course/file/upload/save", data, {
timeout: 60000,
});
};
/**
* 批量更新，上传时，一个一个上传，下面的列表的保存，使用此方法
* @param {Object} data list集合
*saveUpload方法返回的对象
*/
const batchUpdate = function (data) {
return ajax.postJson("/systemapi/xboe/m/course/file/batch/update", data);
};
/**
* 删除一个课件文件
* @param {Object} data
* {
id:删除记录的id,
filePath: 文件的路径
flag: true/false, 是否是物理删除，在上传那是物理删除，在列表中是逻辑删除
}
*/
const delFile = function (data) {
return ajax.post("/systemapi/xboe/m/course/file/delete", data);
};
/**
* 根据id获取详细信息，用于显示课件内容时，播放时
* @param {Object} id
*/
const detail = function (id) {
return ajax.get("/systemapi/xboe/m/course/file/detail?id=" + id);
};
export default {
pageList,
saveUpload,
batchUpdate,
detail,
delFile,
};

50
src/assets/scss/common.scss
View File

@@ -766,3 +766,53 @@ textarea {
// }
// }
//}
//循环 生成 mt mb 从 5 10 20 30
@for $i from 1 through 100 {
.mt#{$i} {
margin-top: $i * 1px;
}
.mb#{$i} {
margin-bottom: $i * 1px;
}
.ml#{$i} {
margin-left: $i * 1px;
}
.mr#{$i} {
margin-right: $i * 1px;
}
.mv#{$i} {
margin-top: $i * 1px;
margin-bottom: $i * 1px;
}
.mh#{$i} {
margin-left: $i * 1px;
margin-right: $i * 1px;
}
.fs#{$i} {
font-size: $i * 1px;
}
.pt#{$i} {
padding-top: $i * 1px;
}
.pb#{$i} {
padding-bottom: $i * 1px;
}
.pl#{$i} {
padding-left: $i * 1px;
}
.pr#{$i} {
padding-right: $i * 1px;
}
.pv#{$i} {
padding-top: $i * 1px;
padding-bottom: $i * 1px;
}
.ph#{$i} {
padding-left: $i * 1px;
padding-right: $i * 1px;
}
.w#{$i} {
width: $i * 1px;
}
}

87
src/components/BasicElTable/BasicTable.vue Normal file
View File

@@ -0,0 +1,87 @@
<script setup>
// import { ElTable, ElTableColumn } from "element-plus";
import { computed } from "vue";
const props = defineProps({
data: {
type: Array,
default: () => [],
},
columns: {
type: Array,
default: () => [],
},
pagination: {
type: Object,
default: () => {
return {
pageSize: 10,
total: 0,
pageIndex: 1,
};
},
},
loading: {
type: Boolean,
default: false,
},
});
console.log(props);
const paginationCopy = computed(() => {
return {
pageSize: props.pagination.pageSize,
total: props.pagination.total,
current: props.pagination.pageIndex,
pageSizeOptions: ["10", "20", "50", "100"],
};
});
const emit = defineEmits(["change"]);
const change = (tablePage) => {
emit("changePage", tablePage);
};
</script>
<template>
<a-table
:data-source="data"
:columns="columns"
:pagination="paginationCopy.pageSize ? paginationCopy : false"
class="tableBox"
@change="change"
align="center"
:loading="loading"
bordered
>
<template #bodyCell="{ text, record, index, column }">
<div v-if="column.render" style="text-align: center">
<component :is="column.render({ row: record, index })"></component>
</div>
<div v-else style="text-align: center">
{{ record[column.key] }}
</div>
</template>
</a-table>
<!-- <el-table :data="data">-->
<!-- <el-table-column-->
<!-- v-for="(column, index) in columns"-->
<!-- :key="index"-->
<!-- :label="column.title"-->
<!-- :width="column.width"-->
<!-- >-->
<!-- <template #default="{ row }">-->
<!-- <div v-if="column.render">-->
<!-- <component :is="column.render({ row })"></component>-->
<!-- </div>-->
<!-- <div v-else>-->
<!-- {{ row[column.key] }}-->
<!-- </div>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
</template>
<style scoped lang="scss">
// 样式已移除，使用项目中全局定义的 .tableBox 样式
</style>

225
src/components/CreatedCourse/AddVideo.vue Normal file
View File

@@ -0,0 +1,225 @@
<script setup>
import { reactive, onMounted, ref, h } from "vue";
import {
ElButton,
ElInput,
ElDialog,
ElForm,
ElFormItem,
ElRadioGroup,
ElRadio,
ElInputNumber,
} from "element-plus";
import BasicTable from "@/components/BasicElTable/BasicTable.vue";
import { getPageListByType } from "@/hooks/useCreateCourseMaps";
const tableData = ref([]);
const form = reactive({
name: "",
resType: 10,
});
let pagination = reactive({
pageSize: 10,
current: 1,
total: 0,
});
const dialogVideoForm = ref({
name: "",
isDrag: false,
completeSetup: 0,
setupTage: "",
});
const loading = ref(false);
const showDialog = ref(false);
const emit = defineEmits(["saveContent"]);
const columns = [
{
title: "序号",
render: (params) => {
return h("span", {}, params.index + 1);
},
},
{
title: "名称",
key: "name",
dataIndex: "name",
},
{
title: "创建人",
key: "sysCreateBy",
dataIndex: "sysCreateBy",
},
{
title: "创建时间",
key: "sysCreateTime",
dataIndex: "sysCreateTime",
},
{
title: "操作",
key: "action",
dataIndex: "action",
width: 150,
render: (params) => {
return h("div", [
h(
ElButton,
{
type: "primary",
size: "small",
onClick: () => {
console.log(params);
showDialog.value = true;
dialogVideoForm.value = {
...dialogVideoForm.value,
...params.row,
};
},
},
"选择"
),
]);
},
},
];
const changePagination = (PAGINATION) => {
pagination = PAGINATION;
getVideoList();
};
const getVideoList = () => {
loading.value = true;
let paramsData = {
...form,
pageSize: pagination.pageSize,
pageIndex: pagination.current,
self: true,
};
getPageListByType(paramsData).then((res) => {
loading.value = false;
tableData.value = res.result.list;
pagination.total = res.result.count;
});
};
const saveContent = (type) => {
showDialog.value = false;
emit("saveContent", {
...dialogVideoForm,
type: 10,
});
// postData.content=this.cware.content;
// this.cwareChange.content = deepClone(this.cware.content)
// if(this.cware.content.contentType==52){
// if(this.cware.linkInfo.url==''){
// this.$message.error("请填写外连URL地址");
// return;
// }
// postData.content.content=JSON.stringify(this.cware.linkInfo);
// this.cwareChange.linkInfo = deepClone(this.cware.linkInfo)
// }else if(this.cware.content.contentType==10 || this.cware.content.contentType==20){
// if(this.cware.curriculumData.url==''){
// this.$message.error("请选择课件");
// return;
// }
// postData.content.content=JSON.stringify(this.cware.curriculumData);
// this.cwareChange.curriculumData = deepClone(this.cware.curriculumData)
// }
};
onMounted(() => {
getVideoList();
});
</script>
<template>
<div class="add-video">
<div class="add-vide-header">
<div>
<el-button>上传新视频</el-button>
<span class="desc ml10">文件大小限制：1G,支持的文件类型:mp4 </span>
</div>
<div>
<el-input
style="width: 150px"
placeholder="请输入视频名称"
v-model="form.name"
clearable
></el-input>
<el-button class="ml10" @click="getVideoList">查询</el-button>
</div>
</div>
<div class="mt10">
<BasicTable
:columns="columns"
:data="tableData"
:pagination="pagination"
@changePage="changePagination"
:loading="loading"
></BasicTable>
</div>
</div>
<el-dialog v-model="showDialog" title="视频">
<el-form>
<el-form-item label="视频名称">
<el-input v-model="dialogVideoForm.name"></el-input>
</el-form-item>
<video
controls
style="width: 100%; max-height: 400px"
class="mb10"
v-if="showDialog"
>
<source
:src="'http://home.hzer.xyz:9960/upload/' + dialogVideoForm.filePath"
type="video/mp4"
/>
您的浏览器不支持video
</video>
<el-form-item label="是否允许拖拽">
<el-radio-group v-model="dialogVideoForm.isDrag" size="small">
<el-radio :label="true" border>是</el-radio>
<el-radio :label="false" border>否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="完成规则设置">
<el-radio-group v-model="dialogVideoForm.completeSetup">
<el-radio :label="0">默认(系统自动控制)</el-radio>
<el-radio :label="1"
>按进度
<el-input-number
:disabled="dialogVideoForm.completeSetup === 0"
v-model="dialogVideoForm.setupTage"
size="mini"
:min="0"
:max="100"
label="描述文字"
controls-position="right"
></el-input-number>
%</el-radio
>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="saveContent(1)"> 保存 </el-button>
</div>
</template>
</el-dialog>
</template>
<style scoped lang="scss">
.add-video {
.add-vide-header {
display: flex;
justify-content: space-between;
.desc {
font-size: 12px;
color: #999;
}
}
}
</style>

265
src/hooks/useCourseData.js
View File

@@ -1,6 +1,21 @@
import { ref, reactive } from "vue";
import { message } from "ant-design-vue";
// import { message } from "ant-design-vue";
import {
SettingOutlined,
EyeOutlined,
DeleteOutlined,
MenuOutlined,
VideoCameraOutlined,
AudioOutlined,
FileTextOutlined,
PictureOutlined,
LinkOutlined,
FolderOpenOutlined,
BankOutlined,
EditOutlined,
} from "@ant-design/icons-vue";
import { createVNode, h } from "vue";
import { getType } from "@/hooks/useCreateCourseMaps";
/**
* 课程数据管理hook
* @returns
@@ -10,44 +25,247 @@ export function useCourseData() {
const courseMetadata = reactive({
courseName: "",
createTime: "",
chooseIndex: "",
sectionIndex: "",
});
const tableColumns = [
{
title: "序号",
key: "index",
width: 100,
customRender: ({ index }) => {
return h(
"span",
{
style: {
display: "flex",
justifyContent: "space-between",
},
},
[
h("span", { class: "drag-handle" }, [
createVNode(MenuOutlined, {
style: { fontSize: "14px", color: "#666" },
}),
]),
h("span", {}, index + 1),
]
);
},
},
{
title: "节名称",
key: "name",
dataIndex: "name",
customRender: ({ record }) => {
// 检查当前行是否处于编辑状态
if (record._value.isEdit) {
return h(
"span",
{ style: { display: "flex", alignItems: "center", gap: "8px" } },
[
h("input", {
value: record._value.copyName,
onInput: (e) => {
record._value.copyName = e.target.value;
},
style: {
border: "1px solid #d9d9d9",
borderRadius: "4px",
padding: "4px 11px",
width: "200px",
},
}),
h(
"a",
{
href: "javascript:void(0)",
style: { fontSize: "16px", color: "#52c41a" },
onClick: () => {
record._value.name = record._value.copyName;
record._value.copyName = null;
record._value.isEdit = false;
},
},
"✓"
),
]
);
}
// 否则显示正常文本和编辑图标
const getIconComponent = (type) => {
switch (type) {
case "视频":
return VideoCameraOutlined;
case "音频":
return AudioOutlined;
case "文档":
return FileTextOutlined;
case "图文":
return PictureOutlined;
case "链接":
return LinkOutlined;
case "SCORM":
return FolderOpenOutlined;
case "考试":
return BankOutlined;
case "作业":
return EditOutlined;
case "评估":
return BankOutlined;
default:
return FileTextOutlined;
}
};
const Icon = getIconComponent(getType(record._value.resType));
return h(
"span",
{ style: { display: "flex", alignItems: "center", gap: "8px" } },
[
createVNode(Icon, { style: { color: "#1890ff" } }),
h("span", {}, record._value.name),
h(
"a",
{
href: "javascript:void(0)",
style: { marginLeft: "4px", fontSize: "12px" },
onClick: () => {
record._value.copyName = record._value.name;
record._value.isEdit = true;
},
},
"✎"
),
]
);
},
},
{
title: "类型",
key: "resType",
dataIndex: "resType",
align: "center",
customRender: ({ record }) => {
return h(
"span",
{
style: {
display: "block",
textAlign: "center",
},
},
getType(record._value.resType)
);
},
},
{
title: "操作",
key: "action",
width: 220,
align: "center",
customRender: ({ record, index, data }) => {
return h(
"span",
{
style: { display: "flex", justifyContent: "center", gap: "12px" },
},
[
// 设置
h(
"a",
{
href: "javascript:void(0)",
onClick: () => {
console.log("设置:", record);
// 在这里添加设置功能，比如打开设置弹窗
},
},
[
createVNode(SettingOutlined, {
style: {
fontSize: "14px",
color: "#1890ff",
paddingRight: "10px",
},
}),
h(
"span",
{ style: { marginLeft: "4px", fontSize: "12px" } },
"设置"
),
]
),
// 预览
h(
"a",
{
href: "javascript:void(0)",
onClick: () => {
console.log("预览:", record);
// 在这里添加预览功能
},
},
[
createVNode(EyeOutlined, {
style: { fontSize: "14px", color: "#1890ff" },
}),
h(
"span",
{ style: { marginLeft: "4px", fontSize: "12px" } },
"预览"
),
]
),
// 删除
h(
"a",
{
href: "javascript:void(0)",
onClick: () => {
console.log("删除:", record, "索引:", index);
// 执行删除操作
data.splice(index, 1);
},
},
[
createVNode(DeleteOutlined, {
style: { fontSize: "14px", color: "red" },
}),
h(
"span",
{ style: { marginLeft: "4px", fontSize: "12px" } },
"删除"
),
]
),
]
);
},
},
];
// 课程列表数据
const courseList = ref([
{
title: "课程1",
data: [
{ key: "1-1", name: "视频课件名称", type: "视频" },
{ key: "1-2", name: "音频课件名称", type: "音频" },
{ key: "1-3", name: "文档课件名称", type: "文档" },
],
data: [],
},
{
title: "课程2",
data: [
{ key: "2-1", name: "图文课件名称", type: "图文" },
{ key: "2-2", name: "外部链接", type: "链接" },
],
data: [],
},
{
title: "课程3",
data: [
{ key: "3-1", name: "SCORM", type: "SCORM" },
{ key: "3-2", name: "考试名称", type: "考试" },
{ key: "3-3", name: "自定义考试名称", type: "考试" },
{ key: "3-4", name: "作业名称", type: "作业" },
],
data: [],
},
]);
// 课程操作映射
const courseOperations = {
addVideo: (index) => {
message.error("功能开发中");
console.log("添加视频功能调用，索引:", index);
if (index !== undefined && courseList.value[index]) {
courseList.value[index].title = "课程4";
}
courseMetadata.chooseIndex = index;
},
addAudio: () => {
console.log("添加音频功能调用");
@@ -137,6 +355,7 @@ export function useCourseData() {
courseMetadata,
courseList,
courseActionButtons,
executeCourseOperation
executeCourseOperation,
tableColumns,
};
}

36
src/hooks/useCreateCourseMaps.js Normal file
View File

@@ -0,0 +1,36 @@
import apiCourseFile from "@/api/modules/courseFile";
const contentTypeMaps = {
10: "视频",
20: "音频",
30: "图片",
40: "文档",
41: "图文",
50: "scorm",
52: "外链",
60: "作业",
61: "考试",
62: "评估",
90: "其它",
};
export function getType(type) {
return contentTypeMaps[type];
}
// 根据不同type 类型查询 媒体 视频等列表
export function getPageListByType(params) {
return new Promise((resolve, reject) => {
apiCourseFile
.pageList(params)
.then((res) => {
if (res.status === 200) {
resolve(res);
} else {
reject(res.message);
}
})
.catch((err) => {
reject(err);
});
});
}

118
src/views/courselibrary/components/createCourse.vue
View File

@@ -1,44 +1,94 @@
<script setup>
import dragCollapse from "./dragCollapse.vue";
import { ElButton, ElCheckbox } from "element-plus";
import { ElButton, ElCheckbox, ElDialog } from "element-plus";
import dragTable from "./dragTable.vue";
import { message } from "ant-design-vue";
import { ref } from "vue";
defineOptions({
name: "CreateCourse",
});
import { ref, reactive, watch, toRaw, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useCourseData } from "@/hooks/useCourseData";
import AddVideoComp from "@/components/CreatedCourse/AddVideo.vue";
// 使用课程数据hook
const { courseMetadata, courseList, courseActionButtons, executeCourseOperation } = useCourseData();
const { courseMetadata, courseList, courseActionButtons } = useCourseData();
// 定义表格列
const tableColumns = [
{
title: "序号",
key: "index",
width: 80,
align: "center",
// 添加章
const addChapter = () => {
courseList.value.push({
title: "视频课程名称",
data: [],
});
};
const showDialog = ref(false);
// 课程操作映射
const courseOperations = {
addVideo: (index) => {
showDialog.value = true;
},
{
title: "节名称",
key: "name",
dataIndex: "name",
addAudio: () => {
console.log("添加音频功能调用");
},
{
title: "类型",
key: "type",
dataIndex: "type",
align: "center",
addDocument: () => {
console.log("添加文档功能调用");
},
{
title: "操作",
key: "action",
width: 220,
align: "center",
addImageText: () => {
console.log("添加图文功能调用");
},
];
addExternalLink: () => {
console.log("添加外部链接功能调用");
},
addScorm: () => {
console.log("添加SCORM功能调用");
},
addExam: () => {
console.log("添加考试功能调用");
},
addHomework: () => {
console.log("添加作业功能调用");
},
addAssessment: () => {
console.log("添加评估功能调用");
},
};
// 执行课程操作
const executeCourseOperation = (operationName, data) => {
courseMetadata.chooseIndex = data;
courseMetadata.selectionIndex = null;
if (courseOperations[operationName]) {
courseOperations[operationName](data);
} else {
console.warn(`未找到操作: ${operationName}`);
}
};
const isSetting = ref(false);
const saveVideo = (data) => {
showDialog.value = false;
if (isSetting.value) {
} else {
courseList.value[courseMetadata.chooseIndex].data.push(data);
}
};
const deleteRow = (data) => {
console.log(data);
courseMetadata.chooseIndex = data.index;
courseMetadata.selectionIndex = data.selectionIndex;
};
const settingRow = (data) => {
courseMetadata.chooseIndex = data.index;
courseMetadata.selectionIndex = data.selectionIndex;
};
const previewRow = (data) => {
courseMetadata.chooseIndex = data.index;
courseMetadata.selectionIndex = data.selectionIndex;
};
</script>
<template>
@@ -49,7 +99,7 @@ const tableColumns = [
</div>
<div class="course-content">
<div style="padding: 10px">
<el-button>添加章</el-button>
<el-button @click="addChapter">添加章</el-button>
<el-checkbox style="margin-left: 10px">顺序学习</el-checkbox>
</div>
@@ -74,15 +124,23 @@ const tableColumns = [
<!-- 修改：添加 groupId 和 tableId 属性以支持跨表格拖拽 -->
<dragTable
:data="course.data"
:columns="tableColumns"
:group-id="'course-chapters'"
:table-id="'chapter-' + index"
:index="index"
@delete="deleteRow"
@setting="settingRow"
@preview="previewRow"
></dragTable>
</div>
</template>
</dragCollapse>
</div>
</div>
<!-- 课程按钮弹窗-->
<el-dialog v-model="showDialog" title="请选择操作">
<AddVideoComp @saveContent="saveVideo"></AddVideoComp>
</el-dialog>
</div>
</template>
@@ -93,6 +151,10 @@ const tableColumns = [
.course-header {
display: flex;
justify-content: space-between;
.title {
font-size: 16px;
font-weight: 600;
}
}
.drag-course-btn-content {

277
src/views/courselibrary/components/dragTable.vue
View File

@@ -29,7 +29,7 @@ import {
EyeOutlined,
SettingOutlined,
} from "@ant-design/icons-vue";
import { getType } from "@/hooks/useCreateCourseMaps";
// 定义 props
const props = defineProps({
data: {
@@ -60,8 +60,14 @@ const props = defineProps({
type: Boolean,
default: true,
},
index: {
type: Number,
default: 0,
},
});
// 设置 预览 删除 三个按钮emit 事件
const emit = defineEmits(["setting", "preview", "delete"]);
// 根据类型返回对应图标组件
const getIconComponent = (type) => {
switch (type) {
@@ -95,37 +101,31 @@ const editValue = ref("");
// 开始编辑
const startEdit = (record) => {
editingKey.value = record.key;
editValue.value = record.name;
record._value.copyName = record._value.name;
record._value.isEdit = true;
};
// 保存编辑
const saveEdit = (record) => {
record.name = editValue.value;
editingKey.value = "";
editValue.value = "";
record._value.name = record._value.copyName;
record._value.copyName = null;
record._value.isEdit = false;
};
// 删除处理函数
const handleDelete = (key) => {
const index = props.data.findIndex((item) => item.key === key);
if (index > -1) {
props.data.splice(index, 1);
console.log("删除了:", key);
}
const handleDelete = (index) => {
emit("delete", { index: props.index, selectionIndex: index });
};
const handleSetting = (index) => {
emit("setting", { index: props.index, selectionIndex: index });
};
const handlePreview = (index) => {
emit("preview", { index: props.index, selectionIndex: index });
};
// 处理列定义，添加自定义渲染逻辑
const processedColumns = computed(() => {
// 如果传入了 columns prop，则使用它并添加自定义渲染
if (props.columns && props.columns.length > 0) {
return props.columns.map((col) => {
// 克隆列对象以避免修改原始 props
const processedCol = { ...col };
// 为序号列添加自定义渲染
if (col.key === "index") {
processedCol.customRender = ({ index }) => {
// 渲染序号列
const renderIndexColumn = () => {
return ({ index }) => {
return h(
"span",
{
@@ -144,24 +144,21 @@ const processedColumns = computed(() => {
]
);
};
}
// 为节名称列添加自定义渲染
if (col.key === "name") {
processedCol.customRender = ({ record }) => {
// 检查当前行是否处于编辑状态
const isEditing = record.key === editingKey.value;
};
// 渲染名称列
const renderNameColumn = () => {
return ({ record }) => {
// 如果处于编辑状态，显示输入框和确认按钮
if (isEditing) {
if (record._value.isEdit) {
return h(
"span",
{ style: { display: "flex", alignItems: "center", gap: "8px" } },
[
h("input", {
value: editValue.value,
value: record._value.copyName,
onInput: (e) => {
editValue.value = e.target.value;
record._value.copyName = e.target.value;
},
style: {
border: "1px solid #d9d9d9",
@@ -175,7 +172,9 @@ const processedColumns = computed(() => {
{
href: "javascript:void(0)",
style: { fontSize: "16px", color: "#52c41a" },
onClick: () => saveEdit(record),
onClick: () => {
saveEdit(record);
},
},
"✓"
),
@@ -184,30 +183,48 @@ const processedColumns = computed(() => {
}
// 否则显示正常文本和编辑图标
const Icon = getIconComponent(record.type);
const Icon = getIconComponent(getType(record._value.resType));
return h(
"span",
{ style: { display: "flex", alignItems: "center", gap: "8px" } },
[
createVNode(Icon, { style: { color: "#1890ff" } }),
h("span", {}, record.name),
h("span", {}, record._value.name),
h(
"a",
{
href: "javascript:void(0)",
style: { marginLeft: "4px", fontSize: "12px" },
onClick: () => startEdit(record),
onClick: () => {
startEdit(record);
},
},
"✎"
),
]
);
};
}
};
// 为操作列添加自定义渲染
if (col.key === "action") {
processedCol.customRender = ({ record }) => {
// 渲染资源类型列
const renderResTypeColumn = () => {
return ({ record }) => {
return h(
"span",
{
style: {
display: "block",
textAlign: "center",
},
},
getType(record._value.resType)
);
};
};
// 渲染操作列
const renderActionColumn = () => {
return ({ record, index }) => {
return h(
"span",
{
@@ -215,7 +232,10 @@ const processedColumns = computed(() => {
},
[
// 设置
h("a", { href: "javascript:void(0)" }, [
h(
"a",
{ href: "javascript:void(0)", onClick: () => handleSetting(index) },
[
createVNode(SettingOutlined, {
style: {
fontSize: "14px",
@@ -228,9 +248,13 @@ const processedColumns = computed(() => {
{ style: { marginLeft: "4px", fontSize: "12px" } },
"设置"
),
]),
]
),
// 预览
h("a", { href: "javascript:void(0)" }, [
h(
"a",
{ href: "javascript:void(0)", onClick: () => handlePreview(index) },
[
createVNode(EyeOutlined, {
style: { fontSize: "14px", color: "#1890ff" },
}),
@@ -239,13 +263,14 @@ const processedColumns = computed(() => {
{ style: { marginLeft: "4px", fontSize: "12px" } },
"预览"
),
]),
]
),
// 删除
h(
"a",
{
href: "javascript:void(0)",
onClick: () => handleDelete(record.key),
onClick: () => handleDelete(index),
},
[
createVNode(DeleteOutlined, {
@@ -261,6 +286,33 @@ const processedColumns = computed(() => {
]
);
};
};
// 处理列定义，添加自定义渲染逻辑
const processedColumns = computed(() => {
// 如果传入了 columns prop，则使用它并添加自定义渲染
if (props.columns && props.columns.length > 0) {
return props.columns.map((col) => {
// 克隆列对象以避免修改原始 props
const processedCol = { ...col };
// 为序号列添加自定义渲染
if (col.key === "index") {
processedCol.customRender = renderIndexColumn();
}
// 为节名称列添加自定义渲染
if (col.key === "name") {
processedCol.customRender = renderNameColumn();
}
if (col.key === "resType") {
processedCol.customRender = renderResTypeColumn();
}
// 为操作列添加自定义渲染
if (col.key === "action") {
processedCol.customRender = renderActionColumn();
}
return processedCol;
@@ -274,85 +326,13 @@ const processedColumns = computed(() => {
key: "index",
width: 80,
align: "center",
customRender: ({ index }) => {
return h(
"span",
{
style: {
display: "flex",
justifyContent: "space-between",
},
},
[
h("span", { class: "drag-handle" }, [
createVNode(MenuOutlined, {
style: { fontSize: "14px", color: "#666" },
}),
]),
h("span", {}, index + 1),
]
);
},
customRender: renderIndexColumn(),
},
{
title: "节名称",
key: "name",
dataIndex: "name",
customRender: ({ record }) => {
// 检查当前行是否处于编辑状态
const isEditing = record.key === editingKey.value;
// 如果处于编辑状态，显示输入框和确认按钮
if (isEditing) {
return h(
"span",
{ style: { display: "flex", alignItems: "center", gap: "8px" } },
[
h("input", {
value: editValue.value,
onInput: (e) => {
editValue.value = e.target.value;
},
style: {
border: "1px solid #d9d9d9",
borderRadius: "4px",
padding: "4px 11px",
width: "200px",
},
}),
h(
"a",
{
href: "javascript:void(0)",
style: { fontSize: "16px", color: "#52c41a" },
onClick: () => saveEdit(record),
},
"✓"
),
]
);
}
// 否则显示正常文本和编辑图标
const Icon = getIconComponent(record.type);
return h(
"span",
{ style: { display: "flex", alignItems: "center", gap: "8px" } },
[
createVNode(Icon, { style: { color: "#1890ff" } }),
h("span", {}, record.name),
h(
"a",
{
href: "javascript:void(0)",
style: { marginLeft: "4px", fontSize: "12px" },
onClick: () => startEdit(record),
},
"✎"
),
]
);
},
customRender: renderNameColumn(),
},
{
title: "类型",
@@ -365,58 +345,7 @@ const processedColumns = computed(() => {
key: "action",
width: 220,
align: "center",
customRender: ({ record }) => {
return h(
"span",
{ style: { display: "flex", justifyContent: "center", gap: "12px" } },
[
// 设置
h("a", { href: "javascript:void(0)" }, [
createVNode(SettingOutlined, {
style: {
fontSize: "14px",
color: "#1890ff",
paddingRight: "10px",
},
}),
h(
"span",
{ style: { marginLeft: "4px", fontSize: "12px" } },
"设置"
),
]),
// 预览
h("a", { href: "javascript:void(0)" }, [
createVNode(EyeOutlined, {
style: { fontSize: "14px", color: "#1890ff" },
}),
h(
"span",
{ style: { marginLeft: "4px", fontSize: "12px" } },
"预览"
),
]),
// 删除
h(
"a",
{
href: "javascript:void(0)",
onClick: () => handleDelete(record.key),
},
[
createVNode(DeleteOutlined, {
style: { fontSize: "14px", color: "red" },
}),
h(
"span",
{ style: { marginLeft: "4px", fontSize: "12px" } },
"删除"
),
]
),
]
);
},
customRender: renderActionColumn(),
},
];
});
@@ -440,10 +369,6 @@ const components = {
pull: props.allowDragOut,
put: props.allowDragIn,
},
onStart: () => {},
onEnd: (evt) => {
console.log("拖拽结束，新顺序:", props.data);
},
},
{
item: ({ element, index }) =>