视屏库

src/views/course/videoResource/index.vue

@@ -186,25 +186,20 @@
         </el-form-item>
 
         <el-form-item label="关联题目" prop="projectIds">
-          <div @click="openProjectDialog(form.projectIds, 0)" class="custom-select-wrapper">
-            <el-select
-              v-model="form.projectIds"
-              v-prevent-dropdown
-              multiple
-              collapse-tags
-              :popper-class="'project-select-dropdown'"
-              placeholder="请选择关联题目"
-              disabled
-              style="width: 100%;">
-              <el-option
-                v-for="item in projectShowList"
-                :key="item.id"
-                :label="item.title"
-                :value="item.id">
-              </el-option>
-            </el-select>
-            <div class="custom-select-mask"></div>
-          </div>
+          <el-select
+            ref="customSelect"
+            v-model="form.projectIds"
+            multiple
+            placeholder="请选择关联题目"
+            @click.native.stop="openProjectDialog(form.projectIds, 0)"
+            style="width: 100%;">
+            <el-option
+              v-for="item in projectShowList"
+              :key="item.id"
+              :label="item.title"
+              :value="item.id">
+            </el-option>
+          </el-select>
         </el-form-item>
 
         <el-form-item label="上传视频" prop="videoUrl" required>
@@ -393,25 +388,20 @@
           </el-form-item>
 
           <el-form-item label="关联题目" prop="projectIds">
-            <div @click="openProjectDialog(batchUploadForm.projectIds, 1)" class="custom-select-wrapper">
-              <el-select
-                v-model="batchUploadForm.projectIds"
-                v-prevent-dropdown
-                multiple
-                collapse-tags
-                :popper-class="'project-select-dropdown'"
-                placeholder="请选择关联题目"
-                disabled
-                style="width: 100%;">
-                <el-option
-                  v-for="item in projectShowList"
-                  :key="item.id"
-                  :label="item.title"
-                  :value="item.id">
-                </el-option>
-              </el-select>
-              <div class="custom-select-mask"></div>
-            </div>
+            <el-select
+              ref="customSelect"
+              v-model="batchUploadForm.projectIds"
+              multiple
+              placeholder="请选择关联题目"
+              @click.native.stop="openProjectDialog(batchUploadForm.projectIds, 1)"
+              style="width: 100%;">
+              <el-option
+                v-for="item in projectShowList"
+                :key="item.id"
+                :label="item.title"
+                :value="item.id">
+              </el-option>
+            </el-select>
           </el-form-item>
 
           <el-form-item label="上传视频" prop="files">
@@ -442,25 +432,20 @@
           </el-form-item>
 
           <el-form-item label="关联题目" prop="projectIds">
-            <div @click="openProjectDialog(batchEditDialog.form.projectIds, 2)" class="custom-select-wrapper">
-              <el-select
-                v-model="batchEditDialog.form.projectIds"
-                v-prevent-dropdown
-                multiple
-                collapse-tags
-                :popper-class="'project-select-dropdown'"
-                placeholder="请选择关联题目"
-                disabled
-                style="width: 100%;">
-                <el-option
-                  v-for="item in projectShowList"
-                  :key="item.id"
-                  :label="item.title"
-                  :value="item.id">
-                </el-option>
-              </el-select>
-              <div class="custom-select-mask"></div>
-            </div>
+            <el-select
+              ref="customSelect"
+              v-model="batchEditDialog.form.projectIds"
+              multiple
+              placeholder="请选择关联题目"
+              @click.native.stop="openProjectDialog(batchEditDialog.form.projectIds, 2)"
+              style="width: 100%;">
+              <el-option
+                v-for="item in projectShowList"
+                :key="item.id"
+                :label="item.title"
+                :value="item.id">
+              </el-option>
+            </el-select>
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
@@ -540,7 +525,7 @@
             <el-pagination
               style="text-align: right"
               v-show="projectListTotal>0"
-              pager-count="5"
+              :pager-count="5"
               background
               @size-change="handleProjectPageSizeChange"
               @current-change="handleProjectPageChange"
@@ -623,38 +608,6 @@ import {uploadToOBS} from "@/utils/obs.js";
 
 export default {
   name: 'VideoResource',
-  directives: {
-    // 自定义指令：阻止下拉框展开
-    preventDropdown: {
-      // 指令绑定到元素时
-      bind(el) {
-        // 找到下拉箭头元素
-        const arrow = el.querySelector('.el-input__suffix');
-        if (arrow) {
-          // 阻止点击事件
-          arrow.addEventListener('click', (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-          }, true);
-        }
-
-        // 找到输入框元素
-        const input = el.querySelector('.el-input__inner');
-        if (input) {
-          // 覆盖原生的focus事件
-          const originalFocus = input.focus;
-          input.focus = function() {
-            // 调用原始方法以确保其他功能正常工作
-            originalFocus.apply(this, arguments);
-            // 立即将焦点移开以防止下拉框显示
-            setTimeout(() => {
-              this.blur();
-            }, 0);
-          };
-        }
-      }
-    }
-  },
   data() {
     return {
       // 遮罩层
@@ -1300,6 +1253,9 @@ export default {
     },
     /** 打开项目选择弹窗 */
     openProjectDialog(projectIds, type) {
+      this.$nextTick(() => {
+        this.$refs.customSelect.blur();
+      });
       // 重置查询参数
       this.projectQueryParams = {
         pageNum: 1,
@@ -1463,24 +1419,6 @@ export default {
   margin-left: 5px;
 }
 
-/* 上传区域样式 */
-::v-deep .upload-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 170px;
-  height: 170px;
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-
-::v-deep .upload-container:hover {
-  border-color: #409eff;
-}
-
 ::v-deep .upload-icon {
   font-size: 28px;
   color: #8c939d;
@@ -1497,10 +1435,6 @@ export default {
   margin-bottom: 22px;
 }
 
-::v-deep .el-select {
-  width: 100%;
-}
-
 /* 批量选择弹窗样式 */
 ::v-deep .batch-dialog .el-dialog__body {
   padding: 0 20px 20px;
@@ -1572,36 +1506,6 @@ export default {
   line-height: 23px;
 }
 
-/* 上传区域样式 */
-.upload-panel {
-  position: absolute;
-  top: 60px;
-  right: 10px;
-  width: 400px;
-  background: #fff;
-  border-radius: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  z-index: 10;
-}
-
-.upload-panel-header {
-  padding: 12px 20px;
-  border-bottom: 1px solid #ebeef5;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.upload-panel-body {
-  padding: 20px;
-}
-
-.upload-panel-footer {
-  text-align: right;
-  padding: 10px 20px;
-  border-top: 1px solid #ebeef5;
-}
-
 /* 自定义滚动条样式 */
 ::v-deep .batch-dialog .el-dialog__body::-webkit-scrollbar {
   width: 6px;
@@ -1670,38 +1574,6 @@ export default {
   margin-top: 10px;
 }
 
-/* 自定义下拉表格样式 */
-::v-deep .project-select-dropdown {
-  padding: 0 !important;
-  width: 900px !important;
-  max-height: none !important;
-}
-
-::v-deep .project-select-dropdown .el-select-dropdown__wrap {
-  max-height: none !important;
-}
-
-.custom-dropdown-wrapper {
-  width: 100%;
-  padding: 10px;
-}
-
-.dropdown-pagination {
-  margin-top: 15px;
-  text-align: center;
-}
-
-/* 调整下拉框里的表单样式 */
-.custom-dropdown-wrapper .el-form-item {
-  margin-bottom: 15px;
-}
-
-/* 确保下拉表格能够正常滚动 */
-.custom-dropdown-wrapper .el-table {
-  max-height: 350px;
-  overflow-y: auto;
-}
-
 /* 项目选择弹窗的样式 */
 .project-container {
   display: flex;
@@ -1768,41 +1640,6 @@ export default {
   color: #1890ff;
 }
 
-.selection-container {
-  display: flex;
-  align-items: center;
-}
-
-.selection-container .el-select {
-  flex: 1;
-}
-
-.selection-container .el-button {
-  margin-left: 10px;
-  white-space: nowrap;
-}
-
-/* 隐藏下拉列表 */
-::v-deep .project-select-dropdown {
-  display: none !important;
-  opacity: 0 !important;
-  visibility: hidden !important;
-}
-
-::v-deep .el-select-dropdown {
-  display: none !important;
-}
-
-/* 确保光标样式正确 */
-::v-deep .el-select .el-input__inner {
-  cursor: pointer !important;
-}
-
-/* 禁用下拉箭头的点击事件 */
-::v-deep .el-select .el-input__suffix {
-  pointer-events: none;
-}
-
 ::v-deep .custom-tree-node {
   flex: 1;
   display: flex;
@@ -1812,32 +1649,6 @@ export default {
   padding: 0 8px;
 }
 
-/* 自定义选择器包装 */
-.custom-select-wrapper {
-  position: relative;
-  width: 100%;
-  cursor: pointer;
-}
-
-/* 选择器遮罩层，用于拦截事件 */
-.custom-select-mask {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 10;
-  cursor: pointer;
-}
-
-/* 禁用状态但不改变外观 */
-::v-deep .custom-select-wrapper .el-select .is-disabled .el-input__inner {
-  background-color: #fff !important;
-  border-color: #dcdfe6;
-  color: #606266;
-  cursor: pointer;
-}
-
 /* 视频预览弹窗样式 */
 ::v-deep .video-preview-dialog {
   z-index: 3000 !important;
@@ -1950,7 +1761,7 @@ export default {
   color: #303133;
 }
 
-.question-answer, .item-answer {
+.question-answer {
   background-color: #f0f9eb;
   padding: 10px;
   border-radius: 4px;