This commit is contained in:
Soutfairy 2024-11-25 12:59:26 +08:00
commit 0f3a5de20e
12 changed files with 1774 additions and 0 deletions

View File

@ -0,0 +1,37 @@
import request from '/@/utils/request';
import { baseUrlHost } from '../baseUrlHost';
/**
* request.post(xxx) post params data
* get请求时paramsdata
*
* 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,
})
}
};
}

60
src/api/video/index.ts Normal file
View File

@ -0,0 +1,60 @@
import request from '/@/utils/request';
import { baseUrlHost } from '../baseUrlHost';
/**
* request.post(xxx) post params data
* get请求时paramsdata
*
* 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'}
})
}
};
}

View File

@ -16,6 +16,15 @@ export default {
articleDetail: 'articleDetail', articleDetail: 'articleDetail',
addArticle: 'addArticle', addArticle: 'addArticle',
editArticle: 'editArticle', editArticle: 'editArticle',
video: 'video',
videoDetail: 'videoDetail',
addVideo: 'addVideo',
editVideo: 'editVideo',
attachment: 'attachment',
attachmentDetail: 'attachmentDetail',
addAttachment: 'addAttachment',
editAttachment: 'editAttachment',
log:'log', log:'log',
limits: 'limits', limits: 'limits',
limitsFrontEnd: 'FrontEnd', limitsFrontEnd: 'FrontEnd',

View File

@ -16,6 +16,14 @@ export default {
articleDetail: '文章详情', articleDetail: '文章详情',
addArticle: '新增文章', addArticle: '新增文章',
editArticle: '编辑文章', editArticle: '编辑文章',
video: '视频管理',
videoDetail: '视频详情',
addVideo: '新增视频',
editVideo: '编辑视频',
attachment: '附件管理',
attachmentDetail: '附件详情',
addAttachment: '新增附件',
editAttachment: '编辑附件',
log:'系统日志', log:'系统日志',
limits: '权限管理', limits: '权限管理',
limitsFrontEnd: '前端控制', limitsFrontEnd: '前端控制',

View File

@ -16,6 +16,14 @@ export default {
articleDetail: '文章詳情', articleDetail: '文章詳情',
addArticle: '文章新增', addArticle: '文章新增',
editArticle: '文章編輯', editArticle: '文章編輯',
video: '視頻管理',
videoDetail: '視頻詳情',
addVideo: '視頻新增',
editVideo: '視頻編輯',
attachment: '附件管理',
attachmentDetail: '附件詳情',
addAttachment: '附件新增',
editAttachment: '附件編輯',
log:'系統日誌', log:'系統日誌',
limits: '許可權管理', limits: '許可權管理',
limitsFrontEnd: '前端控制', limitsFrontEnd: '前端控制',

View File

@ -295,6 +295,130 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
icon: 'iconfont icon-shuju', 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', path: '/limits',
name: 'limits', name: 'limits',

View File

@ -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>

View File

@ -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];
// 01truefalse
// 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;
// 01truefalse
// 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>

View File

@ -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>

View File

@ -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>

View File

@ -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];
// 01truefalse
// 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;
// 01truefalse
// 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>

240
src/views/video/index.vue Normal file
View File

@ -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>