视频库文件上传小窗化

src/components/MinimizableDialog/index.vue

@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <!-- 正常弹窗 -->
+    <el-dialog
+      v-show="!minimized"
+      :visible.sync="visibleSync"
+      :title="title"
+      v-bind="$attrs"
+      v-on="$listeners"
+      :before-close="handleClose"
+    >
+      <template #title>
+        <span>{{ title }}</span>
+        <i
+          class="el-icon-minus"
+          style="cursor:pointer;float:right;margin-right:35px;"
+          @click.stop="minimize"
+        ></i>
+      </template>
+      <slot />
+      <template #footer>
+        <slot name="footer" />
+      </template>
+    </el-dialog>
+
+    <!-- 最小化悬浮卡片 -->
+    <div
+      v-show="minimized"
+      class="minimized-dialog"
+      ref="minCard"
+      @click="restore"
+    >
+      <i :class="minIcon"></i>
+      <span>{{ minTitle || title }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MinimizableDialog",
+  props: {
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    minTitle: {
+      type: String,
+      default: ""
+    },
+    minIcon: {
+      type: String,
+      default: "el-icon-files"
+    }
+  },
+  data() {
+    return {
+      minimized: false,
+      visibleSync: this.visible
+    };
+  },
+  watch: {
+    visible(val) {
+      this.visibleSync = val;
+      if (val) this.minimized = false;
+    },
+    visibleSync(val) {
+      this.$emit("update:visible", val);
+    }
+  },
+  mounted() {
+    this.moveMinCardToBody();
+  },
+  beforeDestroy() {
+    this.removeMinCardFromBody();
+  },
+  methods: {
+    moveMinCardToBody() {
+      if (this.$refs.minCard && typeof window !== 'undefined') {
+        document.body.appendChild(this.$refs.minCard);
+      }
+    },
+    removeMinCardFromBody() {
+      if (this.$refs.minCard && this.$refs.minCard.parentNode) {
+        this.$refs.minCard.parentNode.removeChild(this.$refs.minCard);
+      }
+    },
+    minimize() {
+      this.minimized = true;
+      this.visibleSync = false;
+      this.$emit("minimize");
+    },
+    restore() {
+      this.minimized = false;
+      this.visibleSync = true;
+      this.$emit("restore");
+    },
+    handleClose(done) {
+      this.$emit("close");
+      done();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.minimized-dialog {
+  position: fixed;
+  right: 30px;
+  bottom: 30px;
+  background: #409EFF;
+  color: #fff;
+  padding: 10px 18px;
+  border-radius: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  cursor: pointer;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  font-size: 15px;
+}
+.minimized-dialog:hover {
+  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
+}
+.minimized-dialog i {
+  margin-right: 8px;
+  font-size: 18px;
+}
+</style>

src/views/course/videoResource/index.vue

@@ -52,6 +52,7 @@
           icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
+          :disabled="hasMinimizableDialog"
           v-hasPermi="['course:videoResource:add']"
         >新增</el-button>
       </el-col>
@@ -61,6 +62,7 @@
           icon="el-icon-plus"
           size="mini"
           @click="handleBatchAdd"
+          :disabled="hasMinimizableDialog"
           v-hasPermi="['course:videoResource:add']"
         >批量新增</el-button>
       </el-col>
@@ -155,6 +157,7 @@
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
+            :disabled="hasMinimizableDialog"
             v-hasPermi="['course:videoResource:edit']"
           >修改</el-button>
           <el-button
@@ -177,7 +180,8 @@
     />
 
     <!-- 添加或修改视频素材库对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body :before-close="cancel">
+    <minimizable-dialog :title="title" :visible.sync="open" width="700px" append-to-body :before-close="cancel"
+    @minimize="hasMinimizableDialog = true" @restore="hasMinimizableDialog = false">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="素材名称" prop="resourceName" style="margin-top: 20px">
           <el-input v-model="form.resourceName" placeholder="请输入" />
@@ -286,7 +290,7 @@
         <el-button @click="cancel">取消</el-button>
         <el-button type="primary" @click="submitForm">保存</el-button>
       </div>
-    </el-dialog>
+    </minimizable-dialog>
 
     <el-dialog
       title="视频预览"
@@ -301,7 +305,8 @@
     </el-dialog>
 
     <!-- 批量选择视频弹窗 -->
-    <el-dialog :title="'选择视频'" :visible.sync="batchAddVisible" width="1200px" append-to-body class="batch-dialog" :close-on-click-modal="false" :before-close="cancelBeforeBatch">
+    <minimizable-dialog :title="'选择视频'" :visible.sync="batchAddVisible" width="1200px" append-to-body class="batch-dialog" :close-on-click-modal="false" :before-close="cancelBeforeBatch"
+    @minimize="hasMinimizableDialog = true" @restore="hasMinimizableDialog = false">
       <div class="filter-container">
         <el-button type="primary" icon="el-icon-plus" size="small" @click="showUploadPanel">上传视频</el-button>
       </div>
@@ -492,7 +497,7 @@
         </div>
       </el-dialog>
 
-    </el-dialog>
+    </minimizable-dialog>
 
     <!-- 项目选择弹窗 -->
     <el-dialog
@@ -644,9 +649,13 @@ import {getByIds, listCourseQuestionBank} from '@/api/course/courseQuestionBank'
 import {getThumbnail} from "@/api/course/userVideo";
 import {uploadObject} from "@/utils/cos.js";
 import {uploadToOBS} from "@/utils/obs.js";
+import MinimizableDialog from "@/components/MinimizableDialog"
 
 export default {
   name: 'VideoResource',
+  components: {
+    MinimizableDialog
+  },
   data() {
     return {
       // 遮罩层
@@ -769,6 +778,8 @@ export default {
           ]
         },
       },
+      // 是否存在最小化窗口
+      hasMinimizableDialog: false,
     }
   },
   watch: {