视频

src/views/knowledge/index.vue

@@ -5,49 +5,23 @@
       <el-col :span="6">
         <el-form @submit.native.prevent>
           <el-form-item prop="name">
-            <el-input
+            <el-input v-model="queryRightParams.title" placeholder="输入内容过滤" clearable size="small"
-              v-model="queryRightParams.title"
+              @keyup.enter.native="handleRightQuery">
-              placeholder="输入内容过滤"
+              <el-button slot="prepend" icon="el-icon-search" @click="handleRightQuery" />
-              clearable
+              <el-button slot="append" icon="el-icon-refresh-right" @click="resetRightQuery" />
-              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
+          <el-menu-item v-for="(item, index) in cateList" :key="item.id" :index="item.id" class="custom-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
+              <el-button type="text" icon="el-icon-edit" @click.stop="handleEditTag(item)" />
-                type="text"
+              <el-button type="text" icon="el-icon-delete" @click.stop="handleLeftDelete(item)" />
-                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
+            <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-upload2"
-              style="float: right; padding: 3px 0"
+              @click="openUploadTypeDialog" v-if="!(cate_id == 0 && (is_mine == 0 || is_mine == 2))">
-              type="text"
-              icon="el-icon-upload2"
-              @click="openUploadTypeDialog"
-              v-if="!(cate_id == 0 && (is_mine == 0 || is_mine == 2))"
-            >
               上传
             </el-button>
           </div>
           <!-- 资源列表 -->
-          <el-table
+          <el-table :data="list" height="calc(100vh - 280px)" :show-header="false">
-            :data="list"
+            <el-table-column label="内容" prop="thumbnail_path" align="left" width="140">
-            height="calc(100vh - 280px)"
-            :show-header="false"
-          >
-            <el-table-column
-              label="内容"
-              prop="thumbnail_path"
-              align="left"
-              width="140"
-            >
               <template slot-scope="scope">
-                <el-image
+                <el-image class="resource-thumb" fit="contain" :src="getFullFilePath(scope.row.thumbnail_path)"
-                  class="resource-thumb"
+                  @click="handlePlay(scope.row)">
-                  fit="contain"
+                  <div slot="error" class="image-slot" @click="handlePlay(scope.row)">
-                  :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
+            <el-table-column label="标题" align="left" prop="title" :show-overflow-tooltip="true" />
-              label="标题"
+            <el-table-column label="更新时间" align="left" prop="update_time" :show-overflow-tooltip="true">
-              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
+            <el-table-column label="文件大小" align="center" prop="file_size" width="100">
-              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
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
-              label="操作"
-              align="center"
-              class-name="small-padding fixed-width"
-              width="120"
-            >
               <template slot-scope="scope">
-                <el-button
+                <el-button type="text" icon="el-icon-share" @click="handleShare(scope.row)">
-                  type="text"
-                  icon="el-icon-share"
-                  @click="handleShare(scope.row)"
-                >
                   <!-- 分享 -->
                 </el-button>
-                <el-button
+                <el-button v-if="scope.row.is_mine == 1" type="text" icon="el-icon-edit"
-                  v-if="scope.row.is_mine == 1"
+                  @click="handleUpdateFileName(scope.row)">
-                  type="text"
-                  icon="el-icon-edit"
-                  @click="handleUpdateFileName(scope.row)"
-                >
                   <!-- 修改 -->
                 </el-button>
-                <el-button
+                <el-button v-if="scope.row.is_mine == 1" type="text" icon="el-icon-delete"
-                  v-if="scope.row.is_mine == 1"
+                  @click="handleRightDelete(scope.row)">
-                  type="text"
-                  icon="el-icon-delete"
-                  @click="handleRightDelete(scope.row)"
-                >
                   <!-- 删除 -->
                 </el-button>
               </template>
             </el-table-column>
           </el-table>
           <!-- 分页 -->
-          <pagination
+          <pagination v-show="queryRightParams.total > 0" :total="queryRightParams.total"
-            v-show="queryRightParams.total > 0"
+            :page.sync="queryRightParams.page" :limit.sync="queryRightParams.pageSize" @pagination="getKnowledgeList" />
-            :total="queryRightParams.total"
-            :page.sync="queryRightParams.page"
-            :limit.sync="queryRightParams.pageSize"
-            @pagination="getKnowledgeList"
-          />
         </el-card>
       </el-col>
     </el-row>
 
     <!-- 自定义标签弹窗 -->
-    <el-dialog
+    <el-dialog title="自定义标签名称" :visible.sync="tagDialogVisible" width="17%" destroy-on-close>
-      title="自定义标签名称"
+      <el-form :model="tagForm" :rules="tagRules" ref="tagFormRef" label-width="80px">
-      :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
+          <el-input v-model="tagForm.name" placeholder="请输入最多8个字符" maxlength="8" show-word-limit />
-            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
+    <el-dialog title="修改" :visible.sync="fileNameDialogVisible" width="17%" destroy-on-close>
-      title="修改"
+      <el-form :model="fileNameForm" :rules="fileNameRules" ref="fileNameFormRef" label-width="70px">
-      :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
+          <el-input v-model="fileNameForm.title" placeholder="请输入标题" show-word-limit maxlength="8" />
-            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
+    <el-dialog title="请选择上传文件类型" :visible.sync="uploadTypeDialogVisible" width="18%" :show-footer="false">
-      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
+    <input ref="fileInput" type="file" :accept="uploadAccept" class="hidden-upload-input" @change="handleFileSelect" />
-      ref="fileInput"
-      type="file"
-      :accept="uploadAccept"
-      class="hidden-upload-input"
-      @change="handleFileSelect"
-    />
 
     <!-- 上传进度弹窗 -->
-    <el-dialog
+    <el-dialog title="文件上传中" :visible.sync="uploadProgressDialogVisible" width="400px" :close-on-click-modal="false"
-      title="文件上传中"
+      :show-footer="false">
-      :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
+    <CreateGroupDialog ref="createGroupDialogRef" title="选择人员" :min-select-count="1" @confirm="handleShareToContacts" />
-      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 };