suojin
/
HIYL-localization-web
23
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

视频

Browse Source
main
SWX\10484 6 days ago
parent 9a6fb0894a
commit 1903730b04
1 changed files with 68 additions and 177 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 235
      src/views/knowledge/index.vue

235
src/views/knowledge/index.vue
Unescape View File

@ -5,49 +5,23 @@
<el-col :span="6">
<el-form @submit.native.prevent>
<el-form-item prop="name">
<el-input
v-model="queryRightParams.title"
placeholder="输入内容过滤"
clearable
size="small"
@keyup.enter.native="handleRightQuery"
>
<el-button
slot="prepend"
icon="el-icon-search"
@click="handleRightQuery"
/>
<el-button
slot="append"
icon="el-icon-refresh-right"
@click="resetRightQuery"
/>
<el-input v-model="queryRightParams.title" placeholder="输入内容过滤" clearable size="small"
@keyup.enter.native="handleRightQuery">
<el-button slot="prepend" icon="el-icon-search" @click="handleRightQuery" />
<el-button slot="append" icon="el-icon-refresh-right" @click="resetRightQuery" />
</el-input>
</el-form-item>
</el-form>
<el-menu :default-active="defaultActive" @select="handleSelect">
<!-- 自定义标签 -->
<el-menu-item
v-for="(item, index) in cateList"
:key="item.id"
:index="item.id"
class="custom-item"
>
<el-menu-item v-for="(item, index) in cateList" :key="item.id" :index="item.id" class="custom-item">
<div class="left">
<i :class="getBuiltInIcon(index) || 'el-icon-collection-tag'" />
<span>{{ item.name }}</span>
</div>
<div class="right" v-if="item.type == 'user'">
<el-button
type="text"
icon="el-icon-edit"
@click.stop="handleEditTag(item)"
/>
<el-button
type="text"
icon="el-icon-delete"
@click.stop="handleLeftDelete(item)"
/>
<el-button type="text" icon="el-icon-edit" @click.stop="handleEditTag(item)" />
<el-button type="text" icon="el-icon-delete" @click.stop="handleLeftDelete(item)" />
</div>
</el-menu-item>
<el-menu-item>
@ -64,136 +38,62 @@
<el-card shadow="never">
<div slot="header" class="clearfix">
<span>{{ queryRightParams.name }}</span>
<el-button
style="float: right; padding: 3px 0"
type="text"
icon="el-icon-upload2"
@click="openUploadTypeDialog"
v-if="!(cate_id == 0 && (is_mine == 0 || is_mine == 2))"
>
<el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-upload2"
@click="openUploadTypeDialog" v-if="!(cate_id == 0 && (is_mine == 0 || is_mine == 2))">
上传
</el-button>
</div>
<!-- 资源列表 -->
<el-table
:data="list"
height="calc(100vh - 280px)"
:show-header="false"
>
<el-table-column
label="内容"
prop="thumbnail_path"
align="left"
width="140"
>
<el-table :data="list" height="calc(100vh - 280px)" :show-header="false">
<el-table-column label="内容" prop="thumbnail_path" align="left" width="140">
<template slot-scope="scope">
<el-image
class="resource-thumb"
fit="contain"
:src="getFullFilePath(scope.row.thumbnail_path)"
@click="handlePlay(scope.row)"
>
<div
slot="error"
class="image-slot"
@click="handlePlay(scope.row)"
>
<el-image class="resource-thumb" fit="contain" :src="getFullFilePath(scope.row.thumbnail_path)"
@click="handlePlay(scope.row)">
<div slot="error" class="image-slot" @click="handlePlay(scope.row)">
<i :class="getFileIconClass(scope.row.file_type)" />
</div>
</el-image>
</template>
</el-table-column>
<el-table-column
label="标题"
align="left"
prop="title"
:show-overflow-tooltip="true"
/>
<el-table-column
label="更新时间"
align="left"
prop="update_time"
:show-overflow-tooltip="true"
>
<el-table-column label="标题" align="left" prop="title" :show-overflow-tooltip="true" />
<el-table-column label="更新时间" align="left" prop="update_time" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.update_time) }} 上传</span>
</template>
</el-table-column>
<el-table-column
label="文件大小"
align="center"
prop="file_size"
width="100"
>
<el-table-column label="文件大小" align="center" prop="file_size" width="100">
<template slot-scope="scope">
<span>{{ formatfile_size(scope.row.file_size) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
width="120"
>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
<template slot-scope="scope">
<el-button
type="text"
icon="el-icon-share"
@click="handleShare(scope.row)"
>
<el-button type="text" icon="el-icon-share" @click="handleShare(scope.row)">
<!-- 分享 -->
</el-button>
<el-button
v-if="scope.row.is_mine == 1"
type="text"
icon="el-icon-edit"
@click="handleUpdateFileName(scope.row)"
>
<el-button v-if="scope.row.is_mine == 1" type="text" icon="el-icon-edit"
@click="handleUpdateFileName(scope.row)">
<!-- 修改 -->
</el-button>
<el-button
v-if="scope.row.is_mine == 1"
type="text"
icon="el-icon-delete"
@click="handleRightDelete(scope.row)"
>
<el-button v-if="scope.row.is_mine == 1" type="text" icon="el-icon-delete"
@click="handleRightDelete(scope.row)">
<!-- 删除 -->
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<pagination
v-show="queryRightParams.total > 0"
:total="queryRightParams.total"
:page.sync="queryRightParams.page"
:limit.sync="queryRightParams.pageSize"
@pagination="getKnowledgeList"
/>
<pagination v-show="queryRightParams.total > 0" :total="queryRightParams.total"
:page.sync="queryRightParams.page" :limit.sync="queryRightParams.pageSize" @pagination="getKnowledgeList" />
</el-card>
</el-col>
</el-row>
<!-- 自定义标签弹窗 -->
<el-dialog
title="自定义标签名称"
:visible.sync="tagDialogVisible"
width="17%"
destroy-on-close
>
<el-form
:model="tagForm"
:rules="tagRules"
ref="tagFormRef"
label-width="80px"
>
<el-dialog title="自定义标签名称" :visible.sync="tagDialogVisible" width="17%" destroy-on-close>
<el-form :model="tagForm" :rules="tagRules" ref="tagFormRef" label-width="80px">
<el-form-item label="标签名称" prop="name">
<el-input
v-model="tagForm.name"
placeholder="请输入最多8个字符"
maxlength="8"
show-word-limit
/>
<el-input v-model="tagForm.name" placeholder="请输入最多8个字符" maxlength="8" show-word-limit />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@ -203,25 +103,10 @@
</el-dialog>
<!-- 修改文件名弹窗 -->
<el-dialog
title="修改"
:visible.sync="fileNameDialogVisible"
width="17%"
destroy-on-close
>
<el-form
:model="fileNameForm"
:rules="fileNameRules"
ref="fileNameFormRef"
label-width="70px"
>
<el-dialog title="修改" :visible.sync="fileNameDialogVisible" width="17%" destroy-on-close>
<el-form :model="fileNameForm" :rules="fileNameRules" ref="fileNameFormRef" label-width="70px">
<el-form-item label="标题" prop="title">
<el-input
v-model="fileNameForm.title"
placeholder="请输入标题"
show-word-limit
maxlength="8"
/>
<el-input v-model="fileNameForm.title" placeholder="请输入标题" show-word-limit maxlength="8" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@ -231,12 +116,7 @@
</el-dialog>
<!-- 选择上传类型弹窗 -->
<el-dialog
title="请选择上传文件类型"
:visible.sync="uploadTypeDialogVisible"
width="18%"
:show-footer="false"
>
<el-dialog title="请选择上传文件类型" :visible.sync="uploadTypeDialogVisible" width="18%" :show-footer="false">
<div class="upload-type-box">
<div class="type-item" @click="selectFileType('video')">
<img src="@/assets/images/knowledge/mp4.svg" alt="视频文件" />
@ -248,22 +128,11 @@
</el-dialog>
<!-- 隐藏的文件输入（用于触发上传） -->
<input
ref="fileInput"
type="file"
:accept="uploadAccept"
class="hidden-upload-input"
@change="handleFileSelect"
/>
<input ref="fileInput" type="file" :accept="uploadAccept" class="hidden-upload-input" @change="handleFileSelect" />
<!-- 上传进度弹窗 -->
<el-dialog
title="文件上传中"
:visible.sync="uploadProgressDialogVisible"
width="400px"
:close-on-click-modal="false"
:show-footer="false"
>
<el-dialog title="文件上传中" :visible.sync="uploadProgressDialogVisible" width="400px" :close-on-click-modal="false"
:show-footer="false">
<div class="progress-box">
<el-progress :percentage="uploadPercent" />
<p style="margin-top: 15px">资源上传中，请稍候...</p>
@ -271,12 +140,7 @@
</el-dialog>
<!-- 分享弹窗 - 选择联系人 -->
<CreateGroupDialog
ref="createGroupDialogRef"
title="选择人员"
:min-select-count="1"
@confirm="handleShareToContacts"
/>
<CreateGroupDialog ref="createGroupDialogRef" title="选择人员" :min-select-count="1" @confirm="handleShareToContacts" />
</div>
</template>
@ -562,9 +426,36 @@ export default {
},
// 知识库右侧-预览
handlePlay(row) {
const videoTypes = ["mp4", "avi", "wmv", "mov"];
const fileType = row.file_name ? row.file_name.split(".").pop().toLowerCase() : "";
if (videoTypes.includes(fileType)) {
// 视频：新窗口铺满全屏播放
const videoUrl = this.getFullFilePath(row.file_path);
const html = `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>${row.title || "视频播放"}</title>
<style>
*{margin:0;padding:0;}
html,body{width:100%;height:100%;background:#000;overflow:hidden;}
video{width:100%;height:100%;object-fit:cover;outline:none;}
</style>
</head>
<body>
<video src="${videoUrl}" controls autoplay></video>
</body>
</html>`;
const blob = new Blob([html], { type: "text/html;charset=utf-8" });
const blobUrl = URL.createObjectURL(blob);
postKnowledgePlay({ knowledge_id: row.id });
window.open(blobUrl, "_blank");
} else {
postKnowledgePlay({ knowledge_id: row.id }).then((res) => {
window.open(this.getFullFilePath(row.file_path), "_blank");
});
}
},
handleUpdateFileName(row) {
this.fileNameForm = { title: row.title, knowledge_id: row.id };

Write Preview
Loading…
Cancel
Save