组织和部门文件标题、视频音频预览关闭问题

src/components/ImgPreview/ImgPreview.vue

@@ -89,6 +89,15 @@ const showImg = () => {
 const closeImgPreview = () => {
   //必须要这个事件 不然点击右上角关闭按钮没有反应
   console.log('sonClose');
+  if(props.copyFileType === '.mp3'){
+    const audioDom = document.getElementsByTagName("audio")[0];
+    audioDom.pause()
+  }
+  if(props.copyFileType === '.mp4'){
+    const videoDom = document.getElementsByTagName("video")[0];
+    videoDom.pause()
+  }
+
   // video.value.pause();
   // audio.value.pause();
   emit("closeImgPreview");
@@ -103,6 +112,9 @@ const canSeeImg = (copyFileType)=>{
     return false
   }
 }
+onMounted(()=>{
+  console.log('audio',audio.value);
+})
 onDeactivated(()=>{
   console.log('audio',audio.value);
 })

src/views/department/MyFile.vue

@@ -4,15 +4,9 @@
             <div class="settingBox" @click="mouseClick">
                 <!-- 设置盒子顶部搜索 -->
                 <div class="topSearch">
-                    <div style="position: relative;width: 80%;">
-                        <el-input v-model="searchFire" class="searchFire" size="large" placeholder="搜索文件"
-                           />
-                        <el-icon style="color: gray;display: inline-block;position: absolute;top: 8px;right: 5px;">
-                            <Search />
-                        </el-icon>
-                    </div>
+                    <div class="spaceName">{{spaceName}}</div>
                     <div>
-                        <el-icon @click="createNewMenu(1,true)" color="#505870" size="24">
+                        <el-icon @click="createNewMenu(1)" color="#505870" size="24">
                             <Plus />
                         </el-icon>
                         <!-- @click="createNewFile" -->
@@ -20,36 +14,44 @@
                 </div>
                 <!-- 方块点击盒子 -->
                 <div
-                    style="display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;height: 75vh;align-content: flex-start;overflow-y: auto;">
+                    style="height: 75vh;overflow-y: auto;">
+                    <div class="searchBox">
+                        <el-input v-model="searchFire" class="searchFire" size="large" placeholder="搜索文件" />
+                        <el-icon class="SearchIcon">
+                            <Search />
+                        </el-icon>
+                    </div>
                     <!-- v-for盒子 -->
-                    <template v-for="(item, index) in fileMenu" :key="index">
-                        <div class="setBox" @click="changeFile(item, index)">
-                            <el-dropdown trigger="click" class="selectChe">
-                                <span class="el-dropdown-link">
-                                    ...
-                                </span>
-                                <template #dropdown>
-                                    <el-dropdown-menu>
-                                        <el-dropdown-item @click="restName(item, index)">重命名</el-dropdown-item>
-                                        <el-dropdown-item v-if="item.dirType == '1'" @click="delName(item, index)">删除</el-dropdown-item>
-                                    </el-dropdown-menu>
-                                </template>
-                            </el-dropdown>
-                          <div class="left_fileBox">
-                            <el-tooltip
-                                  class="box-item tool-tip"
-                                  effect="dark"
-                                  placement="top-start"
-                                  v-if="item.encryptLevel"
-                               > 
-                               <template #content> 安全级别: {{ item.encryptLevel == 'L1'?'敏感':(item.encryptLevel == 'L2'?'涉密':(item.encryptLevel == 'L3'?'机密':'绝密')) }} </template>
-                               <img src="../../assets/images/fileStyle.png" style="width: 72px;height: 72px;"></el-tooltip>
-                               <img src="../../assets/images/fileStyle.png" style="width: 72px;height: 72px;" v-else>
-                              <p class="ellipsis-text shouzhi">{{ item.dirName }}</p>
-                              <img class="levelImg" v-if="item.isEncrypt === 'Y'" :src="getLevelImg(item.encryptLevel)" alt="">
-                          </div>
-                        </div>
-                    </template>
+                    <div style="display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;align-content: flex-start;overflow-y: auto;">
+                        <template v-for="(item, index) in fileMenu" :key="index">
+                            <div class="setBox" @click="changeFile(item, index)">
+                                <el-dropdown trigger="click" class="selectChe">
+                                    <span class="el-dropdown-link">
+                                        ...
+                                    </span>
+                                    <template #dropdown>
+                                        <el-dropdown-menu>
+                                            <el-dropdown-item @click="restName(item, index)">重命名</el-dropdown-item>
+                                            <el-dropdown-item v-if="item.dirType == '1'" @click="delName(item, index)">删除</el-dropdown-item>
+                                        </el-dropdown-menu>
+                                    </template>
+                                </el-dropdown>
+                            <div class="left_fileBox">
+                                <el-tooltip
+                                    class="box-item tool-tip"
+                                    effect="dark"
+                                    placement="top-start"
+                                    v-if="item.encryptLevel"
+                                > 
+                                <template #content> 安全级别: {{ item.encryptLevel == 'L1'?'敏感':(item.encryptLevel == 'L2'?'涉密':(item.encryptLevel == 'L3'?'机密':'绝密')) }} </template>
+                                <img src="../../assets/images/fileStyle.png" style="width: 72px;height: 72px;"></el-tooltip>
+                                <img src="../../assets/images/fileStyle.png" style="width: 72px;height: 72px;" v-else>
+                                <p class="ellipsis-text shouzhi">{{ item.dirName }}</p>
+                                <img class="levelImg" v-if="item.isEncrypt === 'Y'" :src="getLevelImg(item.encryptLevel)" alt="">
+                            </div>
+                            </div>
+                        </template>
+                    </div>
                 </div>
                 <div class="expansion">
                     <div class="top_box">
@@ -628,6 +630,7 @@ export default {
         const filePageNum = ref(1) //获取文件分页
         const tableBeEnd = ref(true)//控制下拉是否到底
         const tableTotal = ref(0)//表格数据总数
+        const spaceName = ref()
         // 获取文件夹，中栏，文件
         function getAllTop() {
             documents.getTop(2).then(res => {
@@ -638,6 +641,7 @@ export default {
                 newSpaceId.value = userMe[0].spaceId//变化
                 newDirId.value = userMe[0].dirId//变化
                 topPath.value = userMe[0].dirPath
+                spaceName.value = userMe[0].dirPath
                 let obj = {
                     pageNum: 1,
                     pageSize: 10
@@ -1773,7 +1777,8 @@ export default {
             filePageNum,
             setScroll,
             tableBeEnd,
-            tableTotal
+            tableTotal,
+            spaceName
         }
     },
     watch: {
@@ -1835,16 +1840,30 @@ p {
     height: 48px;
     background-color: #EBEFF6;
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
     align-items: center;
+    padding-left: 16px;
+    padding-right: 16px;
 }
 
 .searchFire {
     // width: 248px;
-    flex: 1;
+    width: 100%;
     height: 32px;
 }
+.searchBox{
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    padding: 8px 16px;
+    .SearchIcon{
+        color: gray;
+        position: absolute;
+        right: 5%;
+        top: 35%;
 
+    }
+}
 .setBox {
     width: 88px;
     height: 112px;
@@ -1864,6 +1883,7 @@ p {
     }
 }
 
+
 .setBox:hover {
     background-color: #EEF9FF;
 }

src/views/myfile/MyFile.vue

@@ -389,7 +389,7 @@
                     :copyFolderName="copyFolderName" @getRename="getRename">
                 </FolderReName>
             </div>
-            <ImgPreview v-if="closeImgPreview" :previewData="previewData" :copyFileType="copyFileType" :showPreview="showPreview"
+            <ImgPreview :previewData="previewData" :copyFileType="copyFileType" :showPreview="showPreview"
                 @closeImgPreview="closeImgPreview"></ImgPreview>
             <div>
                 <FileTree v-if="fileTrees" :fileTrees="fileTrees" :newSpaceId="newSpaceId" :fileId="clickRowId"

src/views/publicment/MyFile.vue

@@ -4,14 +4,9 @@
             <div class="settingBox" @click="mouseClick">
                 <!-- 设置盒子顶部搜索 -->
                 <div class="topSearch">
-                    <div style="position: relative;width: 80%;">
-                        <el-input v-model="searchFire" class="searchFire" size="large" placeholder="搜索文件"/>
-                        <el-icon style="color: gray;display: inline-block;position: absolute;top: 8px;right: 5px;">
-                            <Search/>
-                        </el-icon>
-                    </div>
+                    <div class="spaceName">{{spaceName}}</div>
                     <div>
-                        <el-icon @click="createNewMenu(1,true)" color="#505870" size="24">
+                        <el-icon @click="createNewMenu(1)" color="#505870" size="24">
                             <Plus />
                         </el-icon>
                         <!-- @click="createNewFile" -->
@@ -19,36 +14,44 @@
                 </div>
                 <!-- 方块点击盒子 -->
                 <div
-                    style="display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;height: 75vh;align-content: flex-start;overflow-y: auto;">
+                    style="height: 75vh;overflow-y: auto;">
+                    <div class="searchBox">
+                        <el-input v-model="searchFire" class="searchFire" size="large" placeholder="搜索文件"/>
+                        <el-icon class="SearchIcon">
+                            <Search/>
+                        </el-icon>
+                    </div>
                     <!-- v-for盒子 -->
-                    <template v-for="(item, index) in fileMenu" :key="index">
-                        <div class="setBox" @click="changeFile(item, index)">
-                            <el-dropdown trigger="click" class="selectChe">
-                                <span class="el-dropdown-link">
-                                    ...
-                                </span>
-                                <template #dropdown>
-                                    <el-dropdown-menu>
-                                        <el-dropdown-item @click="restName(item, index)">重命名</el-dropdown-item>
-                                        <el-dropdown-item v-if="item.dirType == '1'" @click="delName(item, index)">删除</el-dropdown-item>
-                                    </el-dropdown-menu>
-                                </template>
-                            </el-dropdown>
-                          <div class="left_fileBox">
-                            <el-tooltip
-                                  class="box-item tool-tip"
-                                  effect="dark"
-                                  placement="top-start"
-                                  v-if="item.encryptLevel"
-                               > 
-                               <template #content> 安全级别: {{ item.encryptLevel == 'L1'?'敏感':(item.encryptLevel == 'L2'?'涉密':(item.encryptLevel == 'L3'?'机密':'绝密')) }} </template>
-                               <img src="../../assets/images/fileStyle.png" style="width: 72px;height: 72px;"></el-tooltip>
-                               <img src="../../assets/images/fileStyle.png" style="width: 72px;height: 72px;" v-else>
-                              <p class="ellipsis-text shouzhi">{{ item.dirName }}</p>
-                              <img class="levelImg" v-if="item.isEncrypt === 'Y'" :src="getLevelImg(item.encryptLevel)" alt="">
-                          </div>
-                        </div>
-                    </template>
+                    <div style="display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;align-content: flex-start;overflow-y: auto;">
+                        <template v-for="(item, index) in fileMenu" :key="index">
+                            <div class="setBox" @click="changeFile(item, index)">
+                                <el-dropdown trigger="click" class="selectChe">
+                                    <span class="el-dropdown-link">
+                                        ...
+                                    </span>
+                                    <template #dropdown>
+                                        <el-dropdown-menu>
+                                            <el-dropdown-item @click="restName(item, index)">重命名</el-dropdown-item>
+                                            <el-dropdown-item v-if="item.dirType == '1'" @click="delName(item, index)">删除</el-dropdown-item>
+                                        </el-dropdown-menu>
+                                    </template>
+                                </el-dropdown>
+                            <div class="left_fileBox">
+                                <el-tooltip
+                                    class="box-item tool-tip"
+                                    effect="dark"
+                                    placement="top-start"
+                                    v-if="item.encryptLevel"
+                                > 
+                                <template #content> 安全级别: {{ item.encryptLevel == 'L1'?'敏感':(item.encryptLevel == 'L2'?'涉密':(item.encryptLevel == 'L3'?'机密':'绝密')) }} </template>
+                                <img src="../../assets/images/fileStyle.png" style="width: 72px;height: 72px;"></el-tooltip>
+                                <img src="../../assets/images/fileStyle.png" style="width: 72px;height: 72px;" v-else>
+                                <p class="ellipsis-text shouzhi">{{ item.dirName }}</p>
+                                <img class="levelImg" v-if="item.isEncrypt === 'Y'" :src="getLevelImg(item.encryptLevel)" alt="">
+                            </div>
+                            </div>
+                        </template>
+                    </div>
                 </div>
                 <!-- <div class="expansion">
                     <div class="top_box">
@@ -635,6 +638,7 @@ export default {
         const addFileTab = inject("addFileTab");
         const addFolderAdd = inject("addFolderAdd");
         const filePageNum = ref(1) //获取文件分页
+        const spaceName = ref()
         const tableBeEnd = ref(true)//控制下拉是否到底
         const tableTotal = ref(0)//表格数据总数
         // 获取文件夹，中栏，文件
@@ -651,6 +655,7 @@ export default {
                 newSpaceId.value = userMe[0].spaceId//变化
                 newDirId.value = userMe[0].dirId//变化
                 topPath.value = userMe[0].dirPath
+                spaceName.value = userMe[0].dirPath
                 let obj = {
                     pageNum: 1,
                     pageSize: 10
@@ -1782,7 +1787,8 @@ export default {
             filePageNum,
             setScroll,
             tableBeEnd,
-            tableTotal
+            tableTotal,
+            spaceName
         }
     },
     watch: {
@@ -1844,15 +1850,30 @@ p {
     height: 48px;
     background-color: #EBEFF6;
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
     align-items: center;
+    padding-left: 16px;
+    padding-right: 16px;
 }
 
 .searchFire {
     // width: 248px;
-    flex: 1;
+    width: 100%;
     height: 32px;
 }
+.searchBox{
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    padding: 8px 16px;
+    .SearchIcon{
+        color: gray;
+        position: absolute;
+        right: 5%;
+        top: 35%;
+
+    }
+}
 
 .setBox {
     width: 88px;