From f239994af618d4e3de9ae449de213124658bc61c Mon Sep 17 00:00:00 2001
From: hr121 <568127468@qq.com>
Date: Sun, 24 Nov 2024 23:28:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=A7=86=E9=A2=91=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=92=8C=E9=99=84=E4=BB=B6=E7=AE=A1=E7=90=86=EF=BC=8C?=
 =?UTF-8?q?=E9=99=84=E4=BB=B6=E7=AE=A1=E7=90=86=E6=89=B9=E9=87=8F=E4=B8=8B?=
 =?UTF-8?q?=E8=BD=BD=E7=94=B1=E4=BA=8E=E4=BC=A0=E5=85=A5=E5=8F=82=E6=95=B0?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E8=BF=98=E6=9C=89=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/attachment/index.ts               |  37 +++
 src/api/video/index.ts                    |  60 ++++
 src/i18n/lang/en.ts                       |   9 +
 src/i18n/lang/zh-cn.ts                    |   8 +
 src/i18n/lang/zh-tw.ts                    |   8 +
 src/router/route.ts                       | 124 ++++++++
 src/views/attachment/component/detail.vue | 212 ++++++++++++++
 src/views/attachment/component/upload.vue | 341 ++++++++++++++++++++++
 src/views/attachment/index.vue            | 231 +++++++++++++++
 src/views/video/component/detail.vue      | 163 +++++++++++
 src/views/video/component/upload.vue      | 341 ++++++++++++++++++++++
 src/views/video/index.vue                 | 240 +++++++++++++++
 12 files changed, 1774 insertions(+)
 create mode 100644 src/api/attachment/index.ts
 create mode 100644 src/api/video/index.ts
 create mode 100644 src/views/attachment/component/detail.vue
 create mode 100644 src/views/attachment/component/upload.vue
 create mode 100644 src/views/attachment/index.vue
 create mode 100644 src/views/video/component/detail.vue
 create mode 100644 src/views/video/component/upload.vue
 create mode 100644 src/views/video/index.vue

diff --git a/src/api/attachment/index.ts b/src/api/attachment/index.ts
new file mode 100644
index 0000000..ea69638
--- /dev/null
+++ b/src/api/attachment/index.ts
@@ -0,0 +1,37 @@
+import request from '/@/utils/request';
+import { baseUrlHost } from '../baseUrlHost';
+
+/**
+ * （不建议写成 request.post(xxx)，因为这样 post 时，无法 params 与 data 同时传参）
+ * 注意在写get请求时，参数是params，而不是data，要标注好
+ * 
+ * 登录api接口集合
+ * @method getAttachmentList 分页查询附件
+ * @method getAttachmentDetail 查看单个附件
+ * @method downloadFiles 批量文件下载
+ */
+
+export function attachmentApi() {
+	return {
+		getAttachmentList: (params: object) => {
+			return request({
+				url: baseUrlHost + '/enAttachment',
+				method: 'get',
+				params,
+			});
+		},
+		getAttachmentDetail: (id: Number) => {
+			return request({
+				url: baseUrlHost + `/enAttachment/${id}`,
+				method: 'get',
+			});
+		},
+		downloadFiles: (ids: object) => {
+			return request({
+				url: baseUrlHost + '/enAttachment/uploadByType',
+				method: 'get',
+				ids,
+			})
+		}
+	};
+}
diff --git a/src/api/video/index.ts b/src/api/video/index.ts
new file mode 100644
index 0000000..b0cdc95
--- /dev/null
+++ b/src/api/video/index.ts
@@ -0,0 +1,60 @@
+import request from '/@/utils/request';
+import { baseUrlHost } from '../baseUrlHost';
+
+/**
+ * （不建议写成 request.post(xxx)，因为这样 post 时，无法 params 与 data 同时传参）
+ * 注意在写get请求时，参数是params，而不是data，要标注好
+ * 
+ * 登录api接口集合
+ * @method getVideoList 分页查询视频
+ * @method deleteVideo 删除视频
+ * @method getVideoDetail 获取视频详情
+ * @method saveVideo 保存视频
+ * @method updateVideo 更新视频
+ */
+
+export function videoApi() {
+	return {
+		getVideoList: (params: object) => {
+			return request({
+				url: baseUrlHost + '/cpVideo',
+				method: 'get',
+				params,
+			});
+		},
+		deleteVideo: (id: Number) => {
+			return request({
+				url: baseUrlHost + `/cpVideo/${id}`,
+				method: 'delete',
+			});
+		},
+		getVideoDetail: (id: Number) => {
+			return request({
+				url: baseUrlHost + `/cpVideo/${id}`,
+				method: 'get',
+			});
+		},
+		saveVideo: (data: object) => {
+			return request({
+				url: baseUrlHost + '/cpVideo',
+				method: 'post',
+				data,
+			})
+		},
+		updateVideo: (data: object) => {
+			return request({
+				url: baseUrlHost + '/cpVideo',
+				method: 'put',
+				data,
+			})
+		},
+		uploadFileType: (data: object) => {
+			return request({
+				url: baseUrlHost + '/enAttachment/uploadByType',
+				method: 'post',
+				data,
+				headers: { 'Content-Type': 'multipart/form-data'}
+			})
+		}
+	};
+}
diff --git a/src/i18n/lang/en.ts b/src/i18n/lang/en.ts
index e4a69cc..0651556 100644
--- a/src/i18n/lang/en.ts
+++ b/src/i18n/lang/en.ts
@@ -14,6 +14,15 @@ export default {
 		articleDetail: 'articleDetail',
 		addArticle: 'addArticle',
 		editArticle: 'editArticle',
+		video: 'video',
+		videoDetail: 'videoDetail',
+		addVideo: 'addVideo',
+		editVideo: 'editVideo',
+		attachment: 'attachment',
+		attachmentDetail: 'attachmentDetail',
+		addAttachment: 'addAttachment',
+		editAttachment: 'editAttachment',
+
 		log:'log',
 		limits: 'limits',
 		limitsFrontEnd: 'FrontEnd',
diff --git a/src/i18n/lang/zh-cn.ts b/src/i18n/lang/zh-cn.ts
index 650be90..49b8fbf 100644
--- a/src/i18n/lang/zh-cn.ts
+++ b/src/i18n/lang/zh-cn.ts
@@ -14,6 +14,14 @@ export default {
 		articleDetail: '文章详情',
 		addArticle: '新增文章',
 		editArticle: '编辑文章',
+		video: '视频管理',
+		videoDetail: '视频详情',
+		addVideo: '新增视频',
+		editVideo: '编辑视频',
+		attachment: '附件管理',
+		attachmentDetail: '附件详情',
+		addAttachment: '新增附件',
+		editAttachment: '编辑附件',
 		log:'系统日志',
 		limits: '权限管理',
 		limitsFrontEnd: '前端控制',
diff --git a/src/i18n/lang/zh-tw.ts b/src/i18n/lang/zh-tw.ts
index 2576d77..a75aefb 100644
--- a/src/i18n/lang/zh-tw.ts
+++ b/src/i18n/lang/zh-tw.ts
@@ -14,6 +14,14 @@ export default {
 		articleDetail: '文章詳情',
 		addArticle: '文章新增',
 		editArticle: '文章編輯',
+		video: '視頻管理',
+		videoDetail: '視頻詳情',
+		addVideo: '視頻新增',
+		editVideo: '視頻編輯',
+		attachment: '附件管理',
+		attachmentDetail: '附件詳情',
+		addAttachment: '附件新增',
+		editAttachment: '附件編輯',
 		log:'系統日誌',
 		limits: '許可權管理',
 		limitsFrontEnd: '前端控制',
diff --git a/src/router/route.ts b/src/router/route.ts
index 9a5f7a3..85cd7cb 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -262,6 +262,130 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 					icon: 'iconfont icon-shuju', 
 				},
 			},
+			{
+				path: '/video',
+				name: 'video',
+				component: () => import('/@/views/video/index.vue'),
+				meta: {
+					title: 'message.router.video',
+					isLink: '',
+					isHide: false,
+					isKeepAlive: true,
+					isAffix: false,
+					isIframe: false,
+					roles: ['admin', 'common'],
+					icon: 'iconfont icon-jiliandongxuanzeqi',
+				},
+				children: [
+					{
+						path: '/video/detail',
+						name: 'videoDetail',
+						component: () => import('/@/views/video/component/detail.vue'),
+						meta: {
+							title: 'message.router.videoDetail',
+							isLink: '',
+							isHide: true,
+							isKeepAlive: false,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin','common'],
+							icon: 'ele-Document',
+						},
+					},
+					{
+						path: '/video/add',
+						name: 'addVideo',
+						component: () => import('/@/views/video/component/upload.vue'),
+						meta: {
+							title: 'message.router.addVideo',
+							isLink: '',
+							isHide: true,
+							isKeepAlive: false,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin','common'],
+							icon: 'ele-Document',
+						},
+					},
+					{
+						path: '/video/edit',
+						name: 'editVideo',
+						component: () => import('/@/views/video/component/upload.vue'),
+						meta: {
+							title: 'message.router.editVideo',
+							isLink: '',
+							isHide: true,
+							isKeepAlive: false,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin','common'],
+							icon: 'ele-Document',
+						},
+					}
+				]
+			},
+			{
+				path: '/attachment',
+				name: 'attachment',
+				component: () => import('/@/views/attachment/index.vue'),
+				meta: {
+					title: 'message.router.attachment',
+					isLink: '',
+					isHide: false,
+					isKeepAlive: true,
+					isAffix: false,
+					isIframe: false,
+					roles: ['admin', 'common'],
+					icon: 'iconfont icon-jiliandongxuanzeqi',
+				},
+				children: [
+					{
+						path: '/attachment/detail',
+						name: 'attachmentDetail',
+						component: () => import('/@/views/attachment/component/detail.vue'),
+						meta: {
+							title: 'message.router.attachmentDetail',
+							isLink: '',
+							isHide: true,
+							isKeepAlive: false,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin','common'],
+							icon: 'ele-Document',
+						},
+					},
+					{
+						path: '/attachment/add',
+						name: 'addVideo',
+						component: () => import('/@/views/attachment/component/upload.vue'),
+						meta: {
+							title: 'message.router.addVideo',
+							isLink: '',
+							isHide: true,
+							isKeepAlive: false,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin','common'],
+							icon: 'ele-Document',
+						},
+					},
+					{
+						path: '/attachment/edit',
+						name: 'editVideo',
+						component: () => import('/@/views/attachment/component/upload.vue'),
+						meta: {
+							title: 'message.router.editVideo',
+							isLink: '',
+							isHide: true,
+							isKeepAlive: false,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin','common'],
+							icon: 'ele-Document',
+						},
+					}
+				]
+			},
 			{
 				path: '/limits',
 				name: 'limits',
diff --git a/src/views/attachment/component/detail.vue b/src/views/attachment/component/detail.vue
new file mode 100644
index 0000000..2c76646
--- /dev/null
+++ b/src/views/attachment/component/detail.vue
@@ -0,0 +1,212 @@
+<template>
+	<div class="layout-pd">
+		<el-card v-loading="state.loading" shadow="hover" header="附件详情">
+			<el-form :model="state.data" size="large" label-width="100px" class="mt20 mb20">
+				<el-row :gutter="35">
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="模块名称：">
+							{{ state.data.moduleName }}
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="标签名称：">
+							{{ state.data.labelName }}
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="附件名称：">
+							{{ state.data.name }}
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="附件：">
+							<div v-if="fileType === 'video'">
+								<video
+									style="width: 100%; height: auto; border-radius: 4px"
+									:src="encodeURI(viteUrl + state.data.path)"
+									controls
+								>
+									您的浏览器不支持 video 标签。
+								</video>
+							</div>
+							<div v-else-if="fileType === 'image'">
+								<img
+									:src="encodeURI(viteUrl + state.data.path)"
+									alt="附件图片"
+									style="width: 100%; height: auto; border-radius: 4px"
+								/>
+							</div>
+							<div v-else-if="fileType === 'text'">
+								<Editor v-model:get-html="textContent" :disabled="true" />
+							</div>
+							<div v-else>
+								<span>未知文件类型，无法预览。</span>
+							</div>
+						</el-form-item>
+					</el-col>
+				</el-row>
+				<el-row class="flex mt15">
+					<div class="flex-margin" style="width: 100%; display: flex; justify-content: flex-end">
+						<el-button size="larger" type="info" @click="cancel">
+							<SvgIcon name="ele-RefreshLeft" />
+							取消
+						</el-button>
+					</div>
+				</el-row>
+			</el-form>
+		</el-card>
+	</div>
+</template>
+
+<script setup lang="ts" name="attachmentDetail">
+import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
+import { articleApi } from '/@/api/article';
+import { attachmentApi } from '/@/api/attachment';
+import { useRoute, useRouter } from 'vue-router';
+import { ElMessage } from 'element-plus';
+import mittBus from '/@/utils/mitt';
+
+// 引入组件
+const Editor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));
+
+// 封面基本路径
+const viteUrl = import.meta.env.VITE_API_URL;
+
+// 引入 api 请求接口
+const artApi = articleApi();
+const atcmApi = attachmentApi();
+
+// 模块列表
+const moduleList = ref([]);
+
+// 获取模块名称和标签名称
+const route = useRoute();
+const router = useRouter();
+const moduleName: any = route.query.moduleName;
+const labelName: any = route.query.labelName;
+const id: any = route.query.id;
+
+const state = reactive({
+	data: {
+		labelName: '',
+		moduleName: '',
+		name: '',
+		createtime: '',
+		path: '',
+	},
+	loading: false,
+});
+
+// 文件类型
+const fileType = ref<string>('unknown');
+const textContent = ref<string>('');
+
+// 根据文件后缀判断文件类型
+const determineFileType = async () => {
+	console.log(state.data);
+	if (!state.data.path) return;
+	const normalizedPath = state.data.path.replace(/\\/g, '/'); // 替换反斜杠为正斜杠
+	const extension = normalizedPath.split('.').pop()?.toLowerCase();
+	console.log(extension);
+	if (['mp4', 'avi', 'mov'].includes(extension || '')) {
+		fileType.value = 'video';
+	} else if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(extension || '')) {
+		fileType.value = 'image';
+	} else if (['txt', 'log', 'md'].includes(extension || '')) {
+		fileType.value = 'text';
+		try {
+			const response = await fetch(viteUrl + normalizedPath);
+			textContent.value = await response.text();
+		} catch {
+			textContent.value = '加载文本内容失败';
+		}
+	} else {
+		fileType.value = 'unknown';
+	}
+};
+
+// 获取附件详情
+const getAttachmentDetail = async () => {
+	try {
+		state.loading = true;
+		let res = await atcmApi.getAttachmentList({
+			moduleName: moduleName,
+			labelName: labelName,
+			size: 1,
+			current: 1,
+		});
+		if (res?.success) {
+			state.data = res.data.records[0];
+		}
+	} catch (error) {
+		ElMessage.error('获取附件详情失败');
+		console.log(error)
+	} finally {
+		state.loading = false;
+	}
+};
+
+// 获取附件详情-根据id
+const getAttachmentDetailById = async (id: number) => {
+	try {
+		state.loading = true;
+		// 由于模块和标签为空，导致没吊用此函数
+		let res = await atcmApi.getAttachmentDetail(id);
+		if (res?.success) {
+			state.data = res.data;
+			state.data.moduleName = moduleName;
+			state.data.labelName = labelName;
+			await determineFileType(); // 更新类型判断
+		}
+	} catch (error) {
+		ElMessage.error('获取附件详情失败');
+		console.log(error);
+	} finally {
+		state.loading = false;
+	}
+};
+
+// 获取模块列表
+const getModuleList = async () => {
+	try {
+		let res = await artApi.getModuleList();
+		if (res?.success) {
+			moduleList.value = res.data;
+		} else {
+			ElMessage.error('模块列表获取失败！');
+		}
+	} catch (error) {
+		ElMessage.error('模块列表获取失败！');
+	} finally {
+	}
+};
+
+// 返回
+const cancel = () => {
+	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
+	router.push('/attachment');
+};
+
+// 日期格式化
+function dateFormatter() {
+	if (!state.data.createtime) return '';
+	let date = new Date(state.data.createtime);
+	return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+}
+
+onMounted(() => {
+	getAttachmentDetailById(id);
+
+	// if (moduleName) {
+	// 	getAttachmentDetailById(id);
+	// } else {
+	// 	getAttachmentDetail();
+	// }
+	getModuleList();
+});
+</script>
+<style scoped>
+.el-upload-list--picture-card .el-upload-list__item{
+	width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/attachment/component/upload.vue b/src/views/attachment/component/upload.vue
new file mode 100644
index 0000000..774e1ed
--- /dev/null
+++ b/src/views/attachment/component/upload.vue
@@ -0,0 +1,341 @@
+<template>
+	<div class="layout-pd">
+		<el-card v-loading="state.loading" shadow="hover" header="附件详情">
+			<el-form ref="videoFormRef" :model="state.data" :rules="state.rules" size="large" label-width="100px" class="mt20 mb20">
+				<el-row :gutter="35">
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="模块名称：" prop="moduleName">
+							<el-select size="default" @change="handleChangeModule" v-model="state.data.moduleName" placeholder="请选择模块" clearable>
+								<el-option
+									:data-op="item.id"
+									v-for="(item, index) in moduleList"
+									:key="index"
+									:label="item.moduleName"
+									:value="item.moduleName"
+								></el-option>
+							</el-select>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="标签名称：" prop="labelName">
+							<el-select size="default" v-model="state.data.labelName" placeholder="请选择标签" clearable class="ml10">
+								<el-option v-for="(item, index) in labelList" :key="index" :label="item.name" :value="item.name"></el-option>
+							</el-select>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="附件名称：" prop="name">
+							<el-input v-model="state.data.name" placeholder="请输入标题" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="附件：" prop="path" class="coverImg">
+							<!-- 上传文件 -->
+							<el-upload
+								ref="uploadRef"
+								class="h100 personal-user-left-upload"
+								action="#"
+								list-type="picture-card"
+								:file-list="state.fileArray"
+								:auto-upload="false"
+								:limit="1"
+								:class="{ hide: state.coverHide }"
+								@change="handleUploadChange"
+								accept="video/*"
+							>
+								<template #default>
+									<el-icon><Plus /></el-icon>
+								</template>
+								<template #file="{ file }">
+									<div>
+										<!-- class="el-upload-list__item-thumbnail"  -->
+										<video style="width: 100%; height: auto; border-radius: 4px" :src="file.url"></video>
+										<span class="el-upload-list__item-actions">
+											<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+												<el-icon><zoom-in /></el-icon>
+											</span>
+											<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+												<el-icon><Delete /></el-icon>
+											</span>
+										</span>
+									</div>
+								</template>
+							</el-upload>
+						</el-form-item>
+					</el-col>
+				</el-row>
+				<el-row class="flex mt15">
+					<div class="flex-margin" style="width: 100%; display: flex; justify-content: flex-end">
+						<el-button size="larger" type="info" @click="cancel">
+							<SvgIcon name="ele-RefreshLeft" />
+							取消
+						</el-button>
+						<el-button size="larger" type="primary" @click="onSubmitForm">
+							<SvgIcon name="iconfont icon-shuxing" />
+							保存
+						</el-button>
+					</div>
+				</el-row>
+			</el-form>
+		</el-card>
+		<!-- 附件预览弹窗 -->
+		<el-dialog v-model="dialogVisible">
+			<video style="width: 100%; height: auto; border-radius: 4px" :src="dialogVideoUrl" controls></video>
+		</el-dialog>
+	</div>
+</template>
+
+<script setup lang="ts" name="attachmentDetail">
+import { onMounted, reactive, ref } from 'vue';
+import { articleApi } from '/@/api/article';
+import { videoApi } from '/@/api/video';
+import { useRoute, useRouter } from 'vue-router';
+import { ElMessage, UploadFile, UploadFiles } from 'element-plus';
+import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
+import mittBus from '/@/utils/mitt';
+
+// 附件基本路径
+const viteUrl = import.meta.env.VITE_API_URL;
+
+// 引入 api 请求接口
+const artApi = articleApi();
+const vidApi = videoApi();
+
+// 模块列表
+const moduleList = ref<{ id: number; moduleName: string }[]>([]);
+
+// 标签列表
+const labelList = ref<{ name: string }[]>([]);
+
+// 获取附件id
+const route = useRoute();
+const router = useRouter();
+const moduleName: any = route.query.moduleName;
+const labelName: any = route.query.labelName;
+const id: any = route.query.id;
+
+const state = reactive({
+	data: {
+		labelName: '',
+		moduleName: '',
+		name: '',
+		path: '',
+	},
+	loading: false,
+	rules: {
+		moduleName: { required: true, message: '请选择模块', trigger: 'blur' },
+		labelName: { required: true, message: '请输入标签名称', trigger: 'blur' },
+		name: { required: true, message: '请输入标题', trigger: 'blur' },
+		path: { required: true, message: '请上传附件', trigger: 'blur' },
+	},
+	fileArray: [], // 编辑进来时，如果已经上传了附件，则保存附件地址
+	coverFile: {},
+	coverHide: false,
+});
+
+// 模块选择
+const handleChangeModule = async (val: any) => {
+	try {
+		state.data.labelName = '';
+		if (!val) {
+			labelList.value = [];
+			return;
+		}
+		const op: any = event?.currentTarget;
+		let res = await artApi.getLabelList(op.dataset.op);
+		if (res?.success) {
+			labelList.value = res.data;
+		} else {
+			ElMessage.error('标签列表获取失败！');
+		}
+	} catch (error) {
+		ElMessage.error('标签列表获取失败！');
+	} finally {
+	}
+};
+
+// 获取附件详情
+const getVideoDetail = async () => {
+	try {
+		state.loading = true;
+		let res = await vidApi.getVideoList({
+			moduleName: moduleName,
+			labelName: labelName,
+			size: 1,
+			current: 1,
+		});
+		if (res?.success) {
+			state.data = res.data.records[0];
+			// 下面这里处理一下，因为后端返回的是0和1，而前端需要的是true和false，到时候提交的时候再转换回来
+			// 这个报错没关系的，只是ts的语法检查，不影响运行
+			if (state.data.path) {
+				const never: any = [{ name: state.data.name, url: viteUrl + state.data.path }];
+				state.fileArray = never;
+				state.coverHide = true;
+			}
+		}
+	} catch (error) {
+		ElMessage.error('获取附件详情失败');
+	} finally {
+		state.loading = false;
+	}
+};
+
+// 获取附件详情-根据id
+const getVideoDetailById = async (id: number) => {
+	try {
+		state.loading = true;
+		let res = await vidApi.getVideoDetail(id);
+		if (res?.success) {
+			state.data = res.data;
+			// 下面这里处理一下，因为后端返回的是0和1，而前端需要的是true和false，到时候提交的时候再转换回来
+			// 这个报错没关系的，只是ts的语法检查，不影响运行
+			state.data.moduleName = moduleName;
+			state.data.labelName = labelName;
+			if (state.data.path) {
+				const never: any = [{ name: state.data.name, url: viteUrl + state.data.path }];
+				state.fileArray = never;
+				state.coverHide = true;
+			}
+		}
+	} catch (error) {
+		ElMessage.error('获取附件详情失败');
+	} finally {
+		state.loading = false;
+	}
+};
+
+// 获取模块列表
+const getModuleList = async () => {
+	try {
+		let res = await artApi.getModuleList();
+		if (res?.success) {
+			moduleList.value = res.data;
+		} else {
+			ElMessage.error('模块列表获取失败！');
+		}
+	} catch (error) {
+		ElMessage.error('模块列表获取失败！');
+	} finally {
+	}
+};
+
+const videoFormRef = ref();
+
+// 保存附件，在新增附件时不会调用以下函数
+const onSubmitForm = () => {
+	videoFormRef.value.validate((valid: boolean) => {
+		if (valid && state.coverHide) {
+			const form = { ...state.data };
+			if (state.coverFile.type === undefined) {
+				realSubmit(form);
+			} else {
+				uploadFile(state.coverFile, form);
+			}
+		} else {
+			ElMessage.error('请完善信息！');
+		}
+	});
+};
+
+// 返回
+const cancel = () => {
+	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
+	router.push('/video');
+};
+
+// 上传文件
+const uploadFile = async (file: any, form: any) => {
+	try {
+		state.loading = true;
+		const formdata = new FormData();
+		formdata.append('file', file);
+		formdata.append('type', 'video');
+
+		let res = await vidApi.uploadFileType(formdata);
+		if (res?.success) {
+			form.path = res.data;
+			realSubmit(form);
+		} else {
+			ElMessage.error('附件上传失败！');
+		}
+	} catch (error) {
+		state.loading = false;
+		ElMessage.error('附件上传失败！');
+	}
+};
+
+// 附件上传-真正的上传操作
+const realSubmit = async (form: any) => {
+	try {
+		state.loading = true;
+		let res = route.path == '/video/add' ? await vidApi.saveVideo(form) : await vidApi.updateVideo(form);
+		if (res?.success) {
+			ElMessage.success('附件保存成功！');
+			cancel();
+		} else {
+			ElMessage.error('附件保存失败！');
+		}
+	} catch (error) {
+		ElMessage.error('处理失败！');
+	} finally {
+		state.loading = false;
+	}
+};
+
+// 附件上传禁用
+const disabled = ref(false);
+// 附件弹窗
+const dialogVideoUrl = ref('');
+const dialogVisible = ref(false);
+
+const uploadRef = ref();
+
+// 附件删除
+const handleRemove = (file: UploadFile) => {
+	state.coverFile = {};
+	uploadRef.value.clearFiles();
+	state.coverHide = false;
+};
+
+// 附件预览
+const handlePictureCardPreview = (file: UploadFile) => {
+	dialogVideoUrl.value = file.url!;
+	dialogVisible.value = true;
+};
+
+// 附件更改
+const handleUploadChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+	if (uploadFile.raw && uploadFile.raw.type.includes('video')) {
+		const file: any = uploadFile.raw;
+		state.coverFile = file;
+		state.data.path = file.name;
+		state.coverHide = true;
+	} else {
+		ElMessage.error('请上传附件文件！');
+		uploadRef.value.clearFiles();
+	}
+};
+
+onMounted(() => {
+	if (moduleName && labelName && route.path == '/video/edit') {
+		if (moduleName && moduleName !== '人才模块' && moduleName !== '简历模块') {
+			getVideoDetailById(id);
+		} else {
+			getVideoDetail();
+		}
+	}
+	getModuleList();
+});
+</script>
+
+<style scoped lang="scss">
+.coverImg :deep(.hide .el-upload--picture-card) {
+	display: none;
+}
+
+:deep(.el-upload-list--picture-card .el-upload-list__item){
+	width: 100%;
+}
+</style>
+
diff --git a/src/views/attachment/index.vue b/src/views/attachment/index.vue
new file mode 100644
index 0000000..52ac4f4
--- /dev/null
+++ b/src/views/attachment/index.vue
@@ -0,0 +1,231 @@
+<template>
+	<div class="system-dept-container layout-padding">
+		<el-card shadow="hover" class="layout-padding-auto">
+			<div class="system-dept-search mb15">
+				<el-select
+					@change="handleChangeModule"
+					size="default"
+					v-model="state.tableData.param.moduleName"
+					placeholder="请选择模块"
+					clearable
+					style="max-width: 180px"
+				>
+					<el-option
+						:data-op="item.id"
+						v-for="(item, index) in moduleList"
+						:key="index"
+						:label="item.moduleName"
+						:value="item.moduleName"
+					></el-option>
+				</el-select>
+				<el-select size="default" v-model="state.tableData.param.labelName" placeholder="请选择标签" clearable class="ml10" style="max-width: 180px">
+					<el-option v-for="(item, index) in labelList" :key="index" :label="item.name" :value="item.name"></el-option>
+				</el-select>
+				<el-input size="default" placeholder="请输入附件名称" v-model="state.tableData.param.name" class="ml10" style="max-width: 180px"> </el-input>
+				<el-button @click="getTableData" size="default" type="primary" class="ml10">
+					<el-icon>
+						<ele-Search />
+					</el-icon>
+					查询
+				</el-button>
+				<el-button @click="downloadSelected" size="default" type="primary" class="ml10">
+					<el-icon>
+						<ele-FolderAdd />
+					</el-icon>
+					批量下载
+				</el-button>
+			</div>
+			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%" @selection-change="handleSelectionChange"
+			ref="tableRef">
+				<el-table-column type="selection" width="55" />
+				<el-table-column prop="name" label="附件名称" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="moduleName" label="模块" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="labelName" label="标签" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="name" label="上传者" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="createtime" label="创建时间" :formatter="dateFormatter" show-overflow-tooltip></el-table-column>
+				<el-table-column label="操作">
+					<template #default="scope">
+						<el-button size="small" text type="primary" @click="toShowDetail(scope.row)">查看详情</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<el-pagination
+				@size-change="onHandleSizeChange"
+				@current-change="onHandleCurrentChange"
+				class="mt15"
+				:pager-count="5"
+				:page-sizes="[10, 20, 30]"
+				v-model:current-page="state.tableData.param.current"
+				background
+				v-model:page-size="state.tableData.param.size"
+				layout="total, sizes, prev, pager, next, jumper"
+				:total="state.tableData.total"
+			>
+			</el-pagination>
+		</el-card>
+	</div>
+</template>
+
+<script setup lang="ts" name="attachmentIndex">
+import { onMounted, reactive, ref } from 'vue';
+import { articleApi } from '/@/api/article';
+import { attachmentApi } from '/@/api/attachment';
+import { ElMessage, TableColumnCtx } from 'element-plus';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+// 表格数据
+const state = reactive({
+	tableData: {
+		data: [],
+		total: 0,
+		loading: false,
+		param: {
+			labelName: '',
+			moduleName: '',
+			name: '',
+			current: 1,
+			size: 10,
+		},
+	},
+	selectedRows: [] as any[], // 用于存储选中的附件
+});
+
+// 模块列表
+interface Module {
+  id: number;
+  moduleName: string;
+}
+
+const moduleList = ref<Module[]>([]);
+
+// 标签列表
+interface Label {
+  name: string;
+}
+
+const labelList = ref<Label[]>([]);
+
+// 引入 api 请求接口
+const artApi = articleApi();
+const atcmApi = attachmentApi();
+
+// 获取表格数据
+const getTableData = async () => {
+	try {
+		state.tableData.loading = true;
+		let res = await atcmApi.getAttachmentList(state.tableData.param);
+		if (res?.success) {
+			state.tableData.data = res.data.records;
+			state.tableData.total = res.data.total;
+		} else {
+			ElMessage.error('附件列表获取失败！');
+		}
+	} catch (error) {
+		ElMessage.error('数据加载失败！');
+	} finally {
+		state.tableData.loading = false;
+	}
+};
+
+// 处理多选
+const handleSelectionChange = (selection: any[]) => {
+	state.selectedRows = selection;
+};
+
+// 批量下载
+const downloadSelected = () => {
+	if (!state.selectedRows.length) {
+		ElMessage.warning('请先选择附件！');
+		return;
+	}
+	state.selectedRows.forEach((file) => {
+		// 假设提供了 API 或工具进行文件下载
+		// 示例：使用 Blob URL 或直接调用下载 API
+		console.log(`下载文件: ${file.id}`);
+	});
+
+	// 需要传给后端ids的数据
+	const ids = state.selectedRows.map((item) => item.id);
+	console.log(ids);
+	atcmApi.downloadFiles(ids);
+};
+
+const getModuleList = async () => {
+	try {
+		let res = await artApi.getModuleList();
+		if (res?.success) {
+			moduleList.value = res.data;
+		} else {
+			ElMessage.error('模块列表获取失败！');
+		}
+	} catch (error) {
+		ElMessage.error('模块列表获取失败！');
+	} finally {
+	}
+};
+
+// 模块选择
+const handleChangeModule = async (val: any) => {
+	try {
+		state.tableData.param.labelName = '';
+		if (!val) {
+			labelList.value = [];
+			return;
+		}
+		const op: any = event?.currentTarget;
+		let res = await artApi.getLabelList(op.dataset.op);
+		if (res?.success) {
+			labelList.value = res.data;
+		} else {
+			ElMessage.error('标签列表获取失败！');
+		}
+	} catch (error) {
+		ElMessage.error('标签列表获取失败！');
+	} finally {
+	}
+};
+
+// 附件详情
+const toShowDetail = (row: any) => {
+	router.push({ path: '/attachment/detail', query: { id: row.id, moduleName: row.moduleName, labelName: row.labelName } });
+};
+
+// 日期格式化
+const dateFormatter = (row: any, column: TableColumnCtx<String>) => {
+	let date = new Date(row.createtime);
+	return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+};
+
+// 分页改变
+const onHandleSizeChange = (val: number) => {
+	state.tableData.param.size = val;
+	getTableData();
+};
+
+// 分页改变
+const onHandleCurrentChange = (val: number) => {
+	state.tableData.param.current = val;
+	getTableData();
+};
+
+onMounted(() => {
+	getTableData();
+	getModuleList();
+});
+</script>
+
+<style scoped lang="scss">
+.system-dept-container {
+	:deep(.el-card__body) {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		overflow: auto;
+		.el-table {
+			flex: 1;
+		}
+	}
+}
+</style>
diff --git a/src/views/video/component/detail.vue b/src/views/video/component/detail.vue
new file mode 100644
index 0000000..b8cb41a
--- /dev/null
+++ b/src/views/video/component/detail.vue
@@ -0,0 +1,163 @@
+<template>
+	<div class="layout-pd">
+		<el-card v-loading="state.loading" shadow="hover" header="视频详情">
+			<el-form :model="state.data" size="large" label-width="100px" class="mt20 mb20">
+				<el-row :gutter="35">
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="模块名称：">
+							{{ state.data.moduleName }}
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="标签名称：">
+							{{ state.data.labelName }}
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="视频名称：">
+							{{ state.data.name }}
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="视频：">
+							<video
+								style="width: 100%; height: auto; border-radius: 4px"
+								:src="encodeURI(viteUrl + state.data.path)"
+								controls
+							>
+								您的浏览器不支持 video 标签。
+							</video>
+						</el-form-item>
+					</el-col>
+				</el-row>
+				<el-row class="flex mt15">
+					<div class="flex-margin" style="width: 100%; display: flex; justify-content: flex-end">
+						<el-button size="larger" type="info" @click="cancel">
+							<SvgIcon name="ele-RefreshLeft" />
+							取消
+						</el-button>
+					</div>
+				</el-row>
+			</el-form>
+		</el-card>
+	</div>
+</template>
+
+<script setup lang="ts" name="videoDetail">
+import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
+import { articleApi } from '/@/api/article';
+import { videoApi } from '/@/api/video';
+import { useRoute, useRouter } from 'vue-router';
+import { ElMessage } from 'element-plus';
+import mittBus from '/@/utils/mitt';
+
+// 引入组件
+const Editor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));
+
+// 封面基本路径
+const viteUrl = import.meta.env.VITE_API_URL;
+
+// 引入 api 请求接口
+const artApi = articleApi();
+const vidApi = videoApi();
+
+// 模块列表
+const moduleList = ref([]);
+
+// 获取模块名称和标签名称
+const route = useRoute();
+const router = useRouter();
+const moduleName: any = route.query.moduleName;
+const labelName: any = route.query.labelName;
+const id: any = route.query.id;
+
+const state = reactive({
+	data: {
+		labelName: '',
+		moduleName: '',
+		name: '',
+		createtime: '',
+		path: '',
+	},
+	loading: false,
+});
+
+// 获取视频详情
+const getVideoDetail = async () => {
+	try {
+		state.loading = true;
+		let res = await artApi.getVideoList({
+			moduleName: moduleName,
+			labelName: labelName,
+			size: 1,
+			current: 1,
+		});
+		if (res?.success) {
+			state.data = res.data.records[0];
+		}
+	} catch (error) {
+		ElMessage.error('获取视频详情失败');
+	} finally {
+		state.loading = false;
+	}
+};
+
+// 获取视频详情-根据id
+const getVideoDetailById = async (id: number) => {
+	try {
+		state.loading = true;
+		let res = await vidApi.getVideoDetail(id);
+		if (res?.success) {
+			state.data = res.data;
+			state.data.moduleName = moduleName;
+			state.data.labelName = labelName;
+		}
+	} catch (error) {
+		ElMessage.error('获取视频详情失败');
+	} finally {
+		state.loading = false;
+	}
+};
+
+// 获取模块列表
+const getModuleList = async () => {
+	try {
+		let res = await artApi.getModuleList();
+		if (res?.success) {
+			moduleList.value = res.data;
+		} else {
+			ElMessage.error('模块列表获取失败！');
+		}
+	} catch (error) {
+		ElMessage.error('模块列表获取失败！');
+	} finally {
+	}
+};
+
+// 返回
+const cancel = () => {
+	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
+	router.push('/video');
+};
+
+// 日期格式化
+function dateFormatter() {
+	if (!state.data.createtime) return '';
+	let date = new Date(state.data.createtime);
+	return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+}
+
+onMounted(() => {
+	if (moduleName) {
+		getVideoDetailById(id);
+	} else {
+		getVideoDetail();
+	}
+	getModuleList();
+});
+</script>
+<style scoped>
+.el-upload-list--picture-card .el-upload-list__item{
+	width: 100%;
+}
+</style>
diff --git a/src/views/video/component/upload.vue b/src/views/video/component/upload.vue
new file mode 100644
index 0000000..ff35c8f
--- /dev/null
+++ b/src/views/video/component/upload.vue
@@ -0,0 +1,341 @@
+<template>
+	<div class="layout-pd">
+		<el-card v-loading="state.loading" shadow="hover" header="视频详情">
+			<el-form ref="videoFormRef" :model="state.data" :rules="state.rules" size="large" label-width="100px" class="mt20 mb20">
+				<el-row :gutter="35">
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="模块名称：" prop="moduleName">
+							<el-select size="default" @change="handleChangeModule" v-model="state.data.moduleName" placeholder="请选择模块" clearable>
+								<el-option
+									:data-op="item.id"
+									v-for="(item, index) in moduleList"
+									:key="index"
+									:label="item.moduleName"
+									:value="item.moduleName"
+								></el-option>
+							</el-select>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="标签名称：" prop="labelName">
+							<el-select size="default" v-model="state.data.labelName" placeholder="请选择标签" clearable class="ml10">
+								<el-option v-for="(item, index) in labelList" :key="index" :label="item.name" :value="item.name"></el-option>
+							</el-select>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="视频名称：" prop="name">
+							<el-input v-model="state.data.name" placeholder="请输入标题" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="视频：" prop="path" class="coverImg">
+							<!-- 上传文件 -->
+							<el-upload
+								ref="uploadRef"
+								class="h100 personal-user-left-upload"
+								action="#"
+								list-type="picture-card"
+								:file-list="state.fileArray"
+								:auto-upload="false"
+								:limit="1"
+								:class="{ hide: state.coverHide }"
+								@change="handleUploadChange"
+								accept="video/*"
+							>
+								<template #default>
+									<el-icon><Plus /></el-icon>
+								</template>
+								<template #file="{ file }">
+									<div>
+										<!-- class="el-upload-list__item-thumbnail"  -->
+										<video style="width: 100%; height: auto; border-radius: 4px" :src="file.url"></video>
+										<span class="el-upload-list__item-actions">
+											<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+												<el-icon><zoom-in /></el-icon>
+											</span>
+											<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+												<el-icon><Delete /></el-icon>
+											</span>
+										</span>
+									</div>
+								</template>
+							</el-upload>
+						</el-form-item>
+					</el-col>
+				</el-row>
+				<el-row class="flex mt15">
+					<div class="flex-margin" style="width: 100%; display: flex; justify-content: flex-end">
+						<el-button size="larger" type="info" @click="cancel">
+							<SvgIcon name="ele-RefreshLeft" />
+							取消
+						</el-button>
+						<el-button size="larger" type="primary" @click="onSubmitForm">
+							<SvgIcon name="iconfont icon-shuxing" />
+							保存
+						</el-button>
+					</div>
+				</el-row>
+			</el-form>
+		</el-card>
+		<!-- 视频预览弹窗 -->
+		<el-dialog v-model="dialogVisible">
+			<video style="width: 100%; height: auto; border-radius: 4px" :src="dialogVideoUrl" controls></video>
+		</el-dialog>
+	</div>
+</template>
+
+<script setup lang="ts" name="videoDetail">
+import { onMounted, reactive, ref } from 'vue';
+import { articleApi } from '/@/api/article';
+import { videoApi } from '/@/api/video';
+import { useRoute, useRouter } from 'vue-router';
+import { ElMessage, UploadFile, UploadFiles } from 'element-plus';
+import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
+import mittBus from '/@/utils/mitt';
+
+// 视频基本路径
+const viteUrl = import.meta.env.VITE_API_URL;
+
+// 引入 api 请求接口
+const artApi = articleApi();
+const vidApi = videoApi();
+
+// 模块列表
+const moduleList = ref<{ id: number; moduleName: string }[]>([]);
+
+// 标签列表
+const labelList = ref<{ name: string }[]>([]);
+
+// 获取视频id
+const route = useRoute();
+const router = useRouter();
+const moduleName: any = route.query.moduleName;
+const labelName: any = route.query.labelName;
+const id: any = route.query.id;
+
+const state = reactive({
+	data: {
+		labelName: '',
+		moduleName: '',
+		name: '',
+		path: '',
+	},
+	loading: false,
+	rules: {
+		moduleName: { required: true, message: '请选择模块', trigger: 'blur' },
+		labelName: { required: true, message: '请输入标签名称', trigger: 'blur' },
+		name: { required: true, message: '请输入标题', trigger: 'blur' },
+		path: { required: true, message: '请上传视频', trigger: 'blur' },
+	},
+	fileArray: [], // 编辑进来时，如果已经上传了视频，则保存视频地址
+	coverFile: {},
+	coverHide: false,
+});
+
+// 模块选择
+const handleChangeModule = async (val: any) => {
+	try {
+		state.data.labelName = '';
+		if (!val) {
+			labelList.value = [];
+			return;
+		}
+		const op: any = event?.currentTarget;
+		let res = await artApi.getLabelList(op.dataset.op);
+		if (res?.success) {
+			labelList.value = res.data;
+		} else {
+			ElMessage.error('标签列表获取失败！');
+		}
+	} catch (error) {
+		ElMessage.error('标签列表获取失败！');
+	} finally {
+	}
+};
+
+// 获取视频详情
+const getVideoDetail = async () => {
+	try {
+		state.loading = true;
+		let res = await vidApi.getVideoList({
+			moduleName: moduleName,
+			labelName: labelName,
+			size: 1,
+			current: 1,
+		});
+		if (res?.success) {
+			state.data = res.data.records[0];
+			// 下面这里处理一下，因为后端返回的是0和1，而前端需要的是true和false，到时候提交的时候再转换回来
+			// 这个报错没关系的，只是ts的语法检查，不影响运行
+			if (state.data.path) {
+				const never: any = [{ name: state.data.name, url: viteUrl + state.data.path }];
+				state.fileArray = never;
+				state.coverHide = true;
+			}
+		}
+	} catch (error) {
+		ElMessage.error('获取视频详情失败');
+	} finally {
+		state.loading = false;
+	}
+};
+
+// 获取视频详情-根据id
+const getVideoDetailById = async (id: number) => {
+	try {
+		state.loading = true;
+		let res = await vidApi.getVideoDetail(id);
+		if (res?.success) {
+			state.data = res.data;
+			// 下面这里处理一下，因为后端返回的是0和1，而前端需要的是true和false，到时候提交的时候再转换回来
+			// 这个报错没关系的，只是ts的语法检查，不影响运行
+			state.data.moduleName = moduleName;
+			state.data.labelName = labelName;
+			if (state.data.path) {
+				const never: any = [{ name: state.data.name, url: viteUrl + state.data.path }];
+				state.fileArray = never;
+				state.coverHide = true;
+			}
+		}
+	} catch (error) {
+		ElMessage.error('获取视频详情失败');
+	} finally {
+		state.loading = false;
+	}
+};
+
+// 获取模块列表
+const getModuleList = async () => {
+	try {
+		let res = await artApi.getModuleList();
+		if (res?.success) {
+			moduleList.value = res.data;
+		} else {
+			ElMessage.error('模块列表获取失败！');
+		}
+	} catch (error) {
+		ElMessage.error('模块列表获取失败！');
+	} finally {
+	}
+};
+
+const videoFormRef = ref();
+
+// 保存视频，在新增视频时不会调用以下函数
+const onSubmitForm = () => {
+	videoFormRef.value.validate((valid: boolean) => {
+		if (valid && state.coverHide) {
+			const form = { ...state.data };
+			if (state.coverFile.type === undefined) {
+				realSubmit(form);
+			} else {
+				uploadFile(state.coverFile, form);
+			}
+		} else {
+			ElMessage.error('请完善信息！');
+		}
+	});
+};
+
+// 返回
+const cancel = () => {
+	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
+	router.push('/video');
+};
+
+// 上传文件
+const uploadFile = async (file: any, form: any) => {
+	try {
+		state.loading = true;
+		const formdata = new FormData();
+		formdata.append('file', file);
+		formdata.append('type', 'video');
+
+		let res = await vidApi.uploadFileType(formdata);
+		if (res?.success) {
+			form.path = res.data;
+			realSubmit(form);
+		} else {
+			ElMessage.error('视频上传失败！');
+		}
+	} catch (error) {
+		state.loading = false;
+		ElMessage.error('视频上传失败！');
+	}
+};
+
+// 视频上传-真正的上传操作
+const realSubmit = async (form: any) => {
+	try {
+		state.loading = true;
+		let res = route.path == '/video/add' ? await vidApi.saveVideo(form) : await vidApi.updateVideo(form);
+		if (res?.success) {
+			ElMessage.success('视频保存成功！');
+			cancel();
+		} else {
+			ElMessage.error('视频保存失败！');
+		}
+	} catch (error) {
+		ElMessage.error('处理失败！');
+	} finally {
+		state.loading = false;
+	}
+};
+
+// 视频上传禁用
+const disabled = ref(false);
+// 视频弹窗
+const dialogVideoUrl = ref('');
+const dialogVisible = ref(false);
+
+const uploadRef = ref();
+
+// 视频删除
+const handleRemove = (file: UploadFile) => {
+	state.coverFile = {};
+	uploadRef.value.clearFiles();
+	state.coverHide = false;
+};
+
+// 视频预览
+const handlePictureCardPreview = (file: UploadFile) => {
+	dialogVideoUrl.value = file.url!;
+	dialogVisible.value = true;
+};
+
+// 视频更改
+const handleUploadChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+	if (uploadFile.raw && uploadFile.raw.type.includes('video')) {
+		const file: any = uploadFile.raw;
+		state.coverFile = file;
+		state.data.path = file.name;
+		state.coverHide = true;
+	} else {
+		ElMessage.error('请上传视频文件！');
+		uploadRef.value.clearFiles();
+	}
+};
+
+onMounted(() => {
+	if (moduleName && labelName && route.path == '/video/edit') {
+		if (moduleName && moduleName !== '人才模块' && moduleName !== '简历模块') {
+			getVideoDetailById(id);
+		} else {
+			getVideoDetail();
+		}
+	}
+	getModuleList();
+});
+</script>
+
+<style scoped lang="scss">
+.coverImg :deep(.hide .el-upload--picture-card) {
+	display: none;
+}
+
+:deep(.el-upload-list--picture-card .el-upload-list__item){
+	width: 100%;
+}
+</style>
+
diff --git a/src/views/video/index.vue b/src/views/video/index.vue
new file mode 100644
index 0000000..20f8ed8
--- /dev/null
+++ b/src/views/video/index.vue
@@ -0,0 +1,240 @@
+<template>
+	<div class="system-dept-container layout-padding">
+		<el-card shadow="hover" class="layout-padding-auto">
+			<div class="system-dept-search mb15">
+				<el-select
+					@change="handleChangeModule"
+					size="default"
+					v-model="state.tableData.param.moduleName"
+					placeholder="请选择模块"
+					clearable
+					style="max-width: 180px"
+				>
+					<el-option
+						:data-op="item.id"
+						v-for="(item, index) in moduleList"
+						:key="index"
+						:label="item.moduleName"
+						:value="item.moduleName"
+					></el-option>
+				</el-select>
+				<el-select size="default" v-model="state.tableData.param.labelName" placeholder="请选择标签" clearable class="ml10" style="max-width: 180px">
+					<el-option v-for="(item, index) in labelList" :key="index" :label="item.name" :value="item.name"></el-option>
+				</el-select>
+				<el-input size="default" placeholder="请输入视频名称" v-model="state.tableData.param.name" class="ml10" style="max-width: 180px"> </el-input>
+				<el-button @click="getTableData" size="default" type="primary" class="ml10">
+					<el-icon>
+						<ele-Search />
+					</el-icon>
+					查询
+				</el-button>
+				<el-button @click="toAddArticle" size="default" type="success" class="ml10">
+					<el-icon>
+						<ele-FolderAdd />
+					</el-icon>
+					新增视频
+				</el-button>
+			</div>
+			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
+				<el-table-column type="index" label="序号" width="100" />
+				<el-table-column prop="name" label="视频名称" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="moduleName" label="模块" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="labelName" label="标签" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="name" label="上传者" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="createtime" label="创建时间" :formatter="dateFormatter" show-overflow-tooltip></el-table-column>
+				<el-table-column label="操作" width="200">
+					<template #default="scope">
+						<el-button size="small" text type="primary" @click="toShowDetail(scope.row)">查看</el-button>
+						<el-button size="small" text type="primary" @click="toEditArticle(scope.row)">编辑</el-button>
+						<el-button size="small" text type="primary" @click="deleteArticle(scope.row.id)">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<el-pagination
+				@size-change="onHandleSizeChange"
+				@current-change="onHandleCurrentChange"
+				class="mt15"
+				:pager-count="5"
+				:page-sizes="[10, 20, 30]"
+				v-model:current-page="state.tableData.param.current"
+				background
+				v-model:page-size="state.tableData.param.size"
+				layout="total, sizes, prev, pager, next, jumper"
+				:total="state.tableData.total"
+			>
+			</el-pagination>
+		</el-card>
+		<!-- <DeptDialog ref="deptDialogRef" @refresh="getTableData()" /> -->
+	</div>
+</template>
+
+<script setup lang="ts" name="videoIndex">
+import { onMounted, reactive, ref } from 'vue';
+import { articleApi } from '/@/api/article';
+import { videoApi } from '/@/api/video';
+import { ElMessage, ElMessageBox, TableColumnCtx } from 'element-plus';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+// 表格数据
+const state = reactive({
+	tableData: {
+		data: [],
+		total: 0,
+		loading: false,
+		param: {
+			labelName: '',
+			moduleName: '',
+			name: '',
+			current: 1,
+			size: 10,
+		},
+	},
+});
+
+// 模块列表
+interface Module {
+  id: number;
+  moduleName: string;
+}
+
+const moduleList = ref<Module[]>([]);
+
+// 标签列表
+interface Label {
+  name: string;
+}
+
+const labelList = ref<Label[]>([]);
+
+// 引入 api 请求接口
+const artApi = articleApi();
+const vidApi = videoApi();
+
+// 获取表格数据
+const getTableData = async () => {
+	try {
+		state.tableData.loading = true;
+		let res = await vidApi.getVideoList(state.tableData.param);
+		if (res?.success) {
+			state.tableData.data = res.data.records;
+			state.tableData.total = res.data.total;
+		} else {
+			ElMessage.error('视频列表获取失败！');
+		}
+	} catch (error) {
+	} finally {
+		state.tableData.loading = false;
+	}
+};
+
+const getModuleList = async () => {
+	try {
+		let res = await artApi.getModuleList();
+		if (res?.success) {
+			moduleList.value = res.data;
+		} else {
+			ElMessage.error('模块列表获取失败！');
+		}
+	} catch (error) {
+		ElMessage.error('模块列表获取失败！');
+	} finally {
+	}
+};
+
+// 模块选择
+const handleChangeModule = async (val: any) => {
+	try {
+		state.tableData.param.labelName = '';
+		if (!val) {
+			labelList.value = [];
+			return;
+		}
+		const op: any = event?.currentTarget;
+		let res = await artApi.getLabelList(op.dataset.op);
+		if (res?.success) {
+			labelList.value = res.data;
+		} else {
+			ElMessage.error('标签列表获取失败！');
+		}
+	} catch (error) {
+		ElMessage.error('标签列表获取失败！');
+	} finally {
+	}
+};
+
+// 添加视频
+const toAddArticle = () => {
+	router.push({ path: '/video/add' });
+};
+
+// 添加视频
+const toEditArticle = (row: any) => {
+	router.push({ path: '/video/edit', query: { id: row.id, moduleName: row.moduleName, labelName: row.labelName } });
+};
+
+// 视频详情
+const toShowDetail = (row: any) => {
+	router.push({ path: '/video/detail', query: { id: row.id, moduleName: row.moduleName, labelName: row.labelName } });
+};
+
+// 视频删除
+const deleteArticle = (id: number) => {
+	ElMessageBox.confirm('确定要删除该视频吗?', '提示', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning',
+	}).then(async () => {
+		try {
+			state.tableData.loading = true;
+			let res = await vidApi.deleteVideo(id);
+			if (res?.success) {
+				await getTableData();
+				ElMessage.success('视频删除成功！');
+			} else ElMessage.error('视频删除失败！');
+		} catch (e) {
+			ElMessage.error('处理失败！');
+		} finally {
+			state.tableData.loading = false;
+		}
+	});
+};
+
+// 日期格式化
+const dateFormatter = (row: any, column: TableColumnCtx<String>) => {
+	let date = new Date(row.createtime);
+	return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+};
+
+// 分页改变
+const onHandleSizeChange = (val: number) => {
+	state.tableData.param.size = val;
+	getTableData();
+};
+
+// 分页改变
+const onHandleCurrentChange = (val: number) => {
+	state.tableData.param.current = val;
+	getTableData();
+};
+
+onMounted(() => {
+	getTableData();
+	getModuleList();
+});
+</script>
+
+<style scoped lang="scss">
+.system-dept-container {
+	:deep(.el-card__body) {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		overflow: auto;
+		.el-table {
+			flex: 1;
+		}
+	}
+}
+</style>