centaline-data-driven-v3 0.1.59 → 0.1.60

package/src/components/web/Form.vue

@@ -1,7 +1,7 @@
 <template>
     <div ref="refForm" v-loading="loading"
         :style="{ width: pageWidth ? pageWidth + 'px' : '100%', margin: 'auto', 'min-height': minHeight }">
-        <div style="display: flex; width: 100%;">
+        <div style="display: flex; width: 100%;" ref="leftContainerRef">
             <div style="flex: 1; min-width: 0;">
                 <div v-if="model !== null && !loading" class="ct-form" :class="{ 'domDisabled': model.pageDisabled }"
                     :style="{ margin: openType != 'tree' ? '10px' : '0px' }">
@@ -194,9 +194,22 @@
                             @hideAI="AIToggle" :isVisible="showAI" :tablewidth="model.aiAttr.width">
 
                         </AIChat>
+
+
                     </div>
                 </div>
             </template>
+            <div :style="{ flex: ' 0 0 ' + 650 + 'px', position: 'sticky', top: '0', 'box-shadow': '-10px 0 5px -9px rgba(0, 0, 0, 0.3)' }"
+                v-if="showViewerFile">
+                <div
+                    :style="{ position: 'sticky', top: '0', height: (dialogHeight) + 'px', overflow: 'hidden', 'border-bottom-right-radius': '4px' }">
+                    <ViewerFile :MediaAlbum="media.MediaAlbum" :groupIndex="media.groupIndex" :index="media.index"
+                        :key="media.random" :flagLeft="media.flagLeft" @closeViewerFile="ViewerFileToggle(false)"
+                        @ViewerFilechangeIndex="ViewerFilechangeIndex">
+                    </ViewerFile>
+
+                </div>
+            </div>
 
         </div>
         <template v-if="model?.aiAttr?.showAI && !showAI">
@@ -205,13 +218,14 @@
                     :alt="model?.aiRouter.controlLabel" :title="model?.aiRouter.controlLabel">
             </div>
         </template>
+
         <div style="min-height:200px" v-if="loading"></div>
         <iframe :src="downloadUrl" style="height:0px;width:0px;border-width: 0px;display: none;"> </iframe>
 
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, nextTick, onUpdated, onDeactivated, onMounted, onBeforeUnmount,provide } from 'vue'
+import { ref, nextTick, onUpdated, onDeactivated, onMounted, onBeforeUnmount, provide } from 'vue'
 import { RouterClickHandler } from '../../utils/mixins';
 import common from '../../utils/common'
 import Form from '../../loader/src/Form'
@@ -220,7 +234,9 @@ import { useRouter } from 'vue-router';
 import util from '../../utils/pub-use'
 import Enum from '../../utils/Enum';
 import AIChat from '../web/AIChat.vue';
-const emit = defineEmits(['loaded', 'failLoad', 'submit', 'AIToggle'])
+import ViewerFile from '../web/ViewerFile.vue';
+
+const emit = defineEmits(['loaded', 'failLoad', 'submit', 'ToggleWdth'])
 const props = defineProps({
     api: String,
     vmodel: Object,
@@ -283,6 +299,14 @@ const props = defineProps({
     dialoWidth: Number,
     listHeight: Number,
 })
+const media = ref({
+    MediaAlbum: [],
+    groupIndex: 0,
+    index: 0,
+    flagLeft: false,
+    random: Math.random()
+})
+const showViewerFile = ref(false)
 const itemKey = ref(1)
 const router = useRouter()
 const loading = ref(true)
@@ -292,6 +316,7 @@ const isScroll = ref(false)
 const isWebScroll = ref(false)
 const Fields = ref()
 const refForm = ref()
+
 const downloadUrl = ref('')
 const minHeight = ref('auto')
 const showAI = ref(false);
@@ -366,11 +391,11 @@ function init() {
         }
         if (typeof props.api !== 'undefined') {
             //根据接口获取数据
-            Form.loadFormApi(props.api, load, props.apiParam, failLoad, false,props.appRootUrl);
+            Form.loadFormApi(props.api, load, props.apiParam, failLoad, false, props.appRootUrl);
         }
         else if (typeof props.source !== 'undefined') {
             //根据modelFrom获取数据
-            load(Form.loadFromModel(props.source,false,props.appRootUrl));
+            load(Form.loadFromModel(props.source, false, props.appRootUrl));
         }
         else if (props.vmodel) {
             load(props.vmodel);
@@ -764,20 +789,223 @@ function setCss() {
 
 function AIToggle() {
     showAI.value = !showAI.value;
+    if (showAI.value) {
+        if (showViewerFile.value) {
+            ViewerFileToggle(false, [], 0, 0);
+        }
+    }
+
     let width = model.value.aiAttr.width;
     dialogHeight.value = (props.dialogHeight || (window.innerHeight - 60));
-    emit('AIToggle', (showAI.value ? width : -width));
+    emit('ToggleWdth', (showAI.value ? width : -width));
+}
+const getVisibleDimensions  = () => {
+    if (!refForm.value) return { width: 0, height: 0 };
+    const rect = refForm.value.getBoundingClientRect();
+    const viewWidth = window.innerWidth || document.documentElement.clientWidth;
+    const viewHeight = window.innerHeight || document.documentElement.clientHeight;
+    
+    const visibleTop = Math.max(0, rect.top);
+    const visibleBottom = Math.min(viewHeight, rect.bottom);
+    const visibleLeft = Math.max(0, rect.left);
+    const visibleRight = Math.min(viewWidth, rect.right);
+    
+    return {
+        width: Math.max(0, visibleRight - visibleLeft),
+        height: Math.max(0, visibleBottom - visibleTop)-60
+    };
+};
+function ViewerFileToggle(isOpen, mediaAlbum, groupIndex, index) {
+    if (isOpen) {
+        media.value = { MediaAlbum: mediaAlbum, groupIndex, index, flagLeft: false, random: Math.random() };
+        if (showAI.value) {
+            AIToggle();
+        }
+    }
+    if (showViewerFile.value != isOpen) {
+        showViewerFile.value = isOpen;
+        let width = 650;
+        dialogHeight.value = getVisibleDimensions().height || parseInt(minHeight.value) || window.innerHeight - 60;
+        emit('ToggleWdth', (showViewerFile.value ? width : -width));
+    }
+}
+provide('onViewerFileToggle', ViewerFileToggle)
+function ViewerFilechangeIndex({ groupIndex, index }) {
+    if (media.value) {
+        media.value.groupIndex = groupIndex;
+        media.value.index = index;
+    }
+}
+
+function ChangeFileList(mediaAlbum, groupIndex, index) {
+    if (!showViewerFile.value) {
+        return;
+    } else {
+        if (mediaAlbum[0].medias.length <= 0) {
+            ViewerFileToggle(false);
+            return;
+        }
+    }
+    const oldMedia = media.value;
+    let newGroupIndex, newIndex, shouldShow;
+
+    // 情况1：没有旧记录，直接用传入索引，无效则找第一张
+    if (!oldMedia || !oldMedia.MediaAlbum) {
+        if (validatePosition(mediaAlbum, groupIndex, index)) {
+            newGroupIndex = groupIndex;
+            newIndex = index;
+            shouldShow = true;
+        } else {
+            const first = findFirstValidPosition(mediaAlbum);
+            if (first) {
+                newGroupIndex = first.groupIndex;
+                newIndex = first.index;
+                shouldShow = true;
+            } else {
+                // 整个相册无图，直接关闭查看器，但依然要更新 MediaAlbum
+                newGroupIndex = 0;
+                newIndex = 0;
+                shouldShow = false;
+            }
+        }
+    } else {
+        // 取出旧图片
+        const oldAlbumList = oldMedia.MediaAlbum;
+        const oldGroup = oldAlbumList && oldAlbumList[oldMedia.groupIndex];
+        const oldFile = oldGroup && oldGroup.medias && oldGroup.medias[oldMedia.index];
+
+        if (oldFile) {
+            // 尝试在新相册中定位旧图
+            const found = findFileInAlbum(mediaAlbum, oldFile);
+            if (found) {
+                // 找到了，移动到新位置
+                newGroupIndex = found.groupIndex;
+                newIndex = found.index;
+                shouldShow = true;
+            } else {
+                // 旧图被删，回退
+                const fallback = fallbackPosition(mediaAlbum, oldMedia.groupIndex, oldMedia.index);
+                newGroupIndex = fallback.groupIndex;
+                newIndex = fallback.index;
+                shouldShow = fallback.show;
+            }
+        } else {
+            // 旧记录无效，同样回退
+            const fallback = fallbackPosition(mediaAlbum, oldMedia.groupIndex, oldMedia.index);
+            newGroupIndex = fallback.groupIndex;
+            newIndex = fallback.index;
+            shouldShow = fallback.show;
+        }
+    }
+    ViewerFileToggle(showViewerFile.value, mediaAlbum, newGroupIndex, newIndex);
 }
+provide('ChangeFileList', ChangeFileList)
 
+function validatePosition(albumList, gIdx, idx) {
+    if (!albumList || gIdx < 0 || gIdx >= albumList.length) {
+        return false;
+    }
+    var group = albumList[gIdx];
+    var medias = group && group.medias;
+    return medias && idx >= 0 && idx < medias.length;
+}
+function findFirstValidPosition(albumList) {
+    if (!albumList) {
+        return null;
+    }
+    for (var g = 0; g < albumList.length; g++) {
+        var group = albumList[g];
+        var medias = group && group.medias;
+        if (medias && medias.length > 0) {
+            return { groupIndex: g, index: 0 };
+        }
+    }
+    return null;
+}
+function findFileInAlbum(albumList, targetFile) {
+    if (!albumList) {
+        return null;
+    }
+    // 先按引用查找
+    for (var g = 0; g < albumList.length; g++) {
+        var medias = albumList[g].medias;
+        if (!medias) continue;
+        for (var i = 0; i < medias.length; i++) {
+            if (medias[i] === targetFile) {
+                return { groupIndex: g, index: i };
+            }
+        }
+    }
+    // 如果引用匹配不到，尝试用 id（如果存在）
+    if (targetFile && targetFile.id != null) {
+        for (var g2 = 0; g2 < albumList.length; g2++) {
+            var medias2 = albumList[g2].medias;
+            if (!medias2) continue;
+            for (var i2 = 0; i2 < medias2.length; i2++) {
+                if (medias2[i2].id === targetFile.id) {
+                    return { groupIndex: g2, index: i2 };
+                }
+            }
+        }
+    }
+    return null;
+}
+function fallbackPosition(albumList, prefGroup, prefIndex) {
+    if (!albumList || albumList.length === 0) {
+        return { groupIndex: 0, index: 0, show: false };
+    }
+
+    // 确保参考相册索引在有效范围内
+    var gIdx = Math.min(prefGroup, albumList.length - 1);
+    var group = albumList[gIdx];
+    var medias = group && group.medias ? group.medias : [];
+
+    // 1. 同相册内回退
+    if (medias.length > 0) {
+        var newIdx;
+        if (prefIndex > 0 && prefIndex <= medias.length) {
+            // 优先上一张
+            newIdx = prefIndex - 1;
+        } else if (prefIndex === 0 && medias.length > 1) {
+            // 第一张被删了，取下一张（索引 1）
+            newIdx = 1;
+        } else {
+            // 只剩这一张，还是它
+            newIdx = 0;
+        }
+        return { groupIndex: gIdx, index: newIdx, show: true };
+    }
+
+    // 2. 向前找非空相册，取最后一张
+    for (var g = gIdx - 1; g >= 0; g--) {
+        var m = albumList[g].medias || [];
+        if (m.length > 0) {
+            return { groupIndex: g, index: m.length - 1, show: true };
+        }
+    }
+
+    // 3. 向后找非空相册，取第一张
+    for (var g2 = gIdx + 1; g2 < albumList.length; g2++) {
+        var m2 = albumList[g2].medias || [];
+        if (m2.length > 0) {
+            return { groupIndex: g2, index: 0, show: true };
+        }
+    }
+
+    // 整个相册没有任何图片了
+    return { groupIndex: 0, index: 0, show: false };
+}
 
 function buttonsWidth() {
     let rtn = '100%';
     if (showAI.value) {
-        rtn = props.dialoWidth - model.value.aiAttr.width - 4 + 'px';
+        rtn = (props.dialoWidth||getVisibleDimensions().width) - model.value.aiAttr.width - 4 + 'px';
+    }
+    else if (showViewerFile.value) {
+        rtn = (props.dialoWidth||getVisibleDimensions().width) - 650 - 4 + 'px';
     }
     else if (props.pageWidth) {
         rtn = props.pageWidth + 'px';
-
     }
 
     return rtn;

package/src/components/web/SearchList/SearchTable.vue

@@ -398,7 +398,7 @@ function searchComplate(m, defaultSearch) {
                 searchEnd.value = Date.now();
                 isLoading.value = false;
                 tableLoading.value = false;
-            },null,props.appRootUrl);
+            }, null, props.appRootUrl);
         }
         if (typeof props.source !== "undefined") {
             load(SearchTable.loadSearchTableModel(props.source));
@@ -412,9 +412,9 @@ function searchComplate(m, defaultSearch) {
 //初始化数据
 function load(data) {
     model.value = data;
-    model.value.$vue = { searchStrat, searchEnd, downloadUrl, loadStats, setTableHeight, updateCurrentRow, doAction, itemKey, refreshTableColumns, calculatingRowHeight, emit, operationLoading, getPage, toolbarClickHandler,closeTabThen };
+    model.value.$vue = { searchStrat, searchEnd, downloadUrl, loadStats, setTableHeight, updateCurrentRow, doAction, itemKey, refreshTableColumns, calculatingRowHeight, emit, operationLoading, getPage, toolbarClickHandler, closeTabThen };
     model.value.isIframe = props.isIframe
-    model.value.appendToBody=props.appendToBody
+    model.value.appendToBody = props.appendToBody
     model.value.isPageInSideBar = false
     model.value.columnName = null
     model.value.columnGroupId = null
@@ -973,6 +973,7 @@ function thMouseDownHandle(ev, colIndex) {
 }
 //查询对应页的数据
 function getPage(index, flagRefreshRowHandle) {
+    getRetain();
     if (refTableParent.value) {
         refTableParent.value.scrollTop = 0;
         refTableParent.value.scrollLeft = 0;
@@ -997,8 +998,12 @@ function getPage(index, flagRefreshRowHandle) {
                     getScrollAttr();
                 }
                 setfixedSize();
+                model.value.selectIndex = 0;
+                model.value._lastRowspan = null;
                 if (index === 1) {
                     SearchTable.setButtonsDisabledByRowClick(model.value);
+                    SearchTable.setButtonsDisabled(model.value);
+                    model.value.selectAll = false;
                 }
             });
         }
@@ -1303,7 +1308,7 @@ function refreshTableColumns(data) {
         searchStats = refTableStats.value.getsearchStats();
     }
     if (data) {
-        load(SearchTable.loadSearchTableModel(data, model.value.searchModel, false, props.api,null,props.appRootUrl));
+        load(SearchTable.loadSearchTableModel(data, model.value.searchModel, false, props.api, null, props.appRootUrl));
     }
     else {
         if (refTableStats.value) {
@@ -1311,7 +1316,7 @@ function refreshTableColumns(data) {
             getPage(1, true);
         }
         else {
-            SearchTable.loadSearchTableApi(props.api, load, searchModel, true,null,null,null,props.appRootUrl);
+            SearchTable.loadSearchTableApi(props.api, load, searchModel, true, null, null, null, props.appRootUrl);
         }
     }
     model.value.searchStats = searchStats;
@@ -1657,6 +1662,17 @@ function closeTabThen(ev) {
     }
 }
 
+function getRetain() {
+    model.value.isRetain = false
+    let field = model.value.buttons.find((b) => {
+        return b.key.toLowerCase() === 'Retain'.toLowerCase();
+    });
+    if (field) {
+        if (field.code1) {
+            model.value.isRetain = true;
+        }
+    }
+}
 
 defineExpose({
     model,

package/src/components/web/SearchList/TableToolbar.vue

@@ -3,16 +3,18 @@
         <div v-if="buttonsLeft && buttonsLeft.length > 0" class="bool_btn_l">
             <ul>
                 <li v-for="btn in buttonsLeft" class="ToolbarButton" :class="{ btn_r: btn.isRight }">
-                    <component :is="btn.is" :vmodel="btn" @fieldClick="clickHandler(btn)" @importComplete="importComplete"
-                        v-if="btn.show" :parameterAction="parameterAction" :fileData="getFileData(btn)"></component>
+                    <component :is="btn.is" :vmodel="btn" @fieldClick="clickHandler(btn)"
+                        @importComplete="importComplete" v-if="btn.show" :parameterAction="parameterAction"
+                        :fileData="getFileData(btn)"></component>
                 </li>
             </ul>
         </div>
         <div v-if="buttonsright && buttonsright.length > 0" class="bool_btn_r">
             <ul>
                 <li v-for="btn in buttonsright" class="ToolbarButton" :class="{ btn_r: btn.isRight }">
-                    <component :is="btn.is" :vmodel="btn" @fieldClick="clickHandler(btn,)" @importComplete="importComplete"
-                        v-if="btn.show" :parameterAction="parameterAction" :fileData="getFileData(btn)"></component>
+                    <component :is="btn.is" :vmodel="btn" @fieldClick="clickHandler(btn,)"
+                        @importComplete="importComplete" v-if="btn.show" :parameterAction="parameterAction"
+                        :fileData="getFileData(btn)"></component>
                 </li>
             </ul>
         </div>
@@ -37,7 +39,9 @@ props.buttons.forEach(v => {
     }
 });
 function clickHandler(btn) {
-    emit("click", btn);
+    if (btn.key.toLowerCase() != 'Retain'.toLocaleLowerCase()) {
+        emit("click", btn);
+    }
 }
 function importComplete(res, field) {
     emit("importComplete", res, field);

package/src/components/web/SearchList.vue

@@ -161,6 +161,7 @@ function init() {
     if (props.apiParam && props.apiParam.isIframe && props.apiParam.isIframe == 'true') {
         isIframe.value = true;
     }
+    window.addEventListener("resize", resizeSearchList);
 }
 
 function screenLoaded(defaultSearch) {
@@ -282,7 +283,6 @@ function tableLoaded() {
                 sideMenuClickHandler(status);
             }
         }
-        window.addEventListener("resize", resizeSearchList);
     }
     else {
         flagSideBarOfData.value = false;

package/src/components/web/ViewerFile/ViewerImage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="Imagebox"  @mousewheel="bagimg($event)"  v-loading="loading">
+    <div class="Imagebox"  @mousewheel.stop.prevent="bagimg($event)"  v-loading="loading">
         <img id="ViewerImage" class="scaleimg" border="0" @load="complete()" v-bind:style="{
              top: params.top + 'px', left: params.left + 'px',
             transform:

package/src/components/web/ViewerFile.vue

@@ -1,7 +1,7 @@
 <template>
     <div style="height: 100%" id="viewer-file" ref="refviewerfile" @contextmenu="handleMouse" class="viewer-file ccai">
         <el-container style="height: 100%; border: 1px solid #eee">
-            <el-aside style="background-color: rgb(238, 241, 246)" class="ccai-aside">
+            <el-aside style="background-color: rgb(238, 241, 246)" class="ccai-aside" v-if="flagLeft">
                 <div style="height: 100%" class="viewerMenu">
                     <el-menu :default-openeds="openeds" :default-active="activeitem" style="height: 100%">
                         <el-sub-menu :key="groupIndex" :index="groupIndex.toString()"
@@ -28,32 +28,44 @@
                 </div>
             </el-aside>
             <el-main ref="refdisplayArea" v-loading="downloadLoading" element-loading-spinner="el-icon-loading"
-                :element-loading-custom-class="'cloading'">
+                :element-loading-custom-class="'cloading'" style="background-color: white;overflow: hidden;position: relative;">
+                <div v-if="!flagLeft" style="position: absolute; top: 10px; left: 10px;cursor: pointer;color:red"
+                    @click="closeViewerFile">
+                    <el-icon size="20">
+                        <CircleClose />
+                    </el-icon>
+
+                </div>
                 <div class="cont" v-if="resultObject">
                     <div style="padding-right:10px;" v-if="mediaLabelShow">
                         <div class="enlarge-picture " v-if="itemFile.mediaLabelName">
-                            <span class="" style="width:80px;">{{common.LocalizedString('附件类型','附件類型')}} : </span>
+                            <span class="" style="width:80px;">{{ common.LocalizedString('附件类型', '附件類型') }} : </span>
                             <lable style="font-weight: bold;">{{ itemFile.mediaLabelName }}</lable>
                         </div>
                         <div class="enlarge-picture" v-if="itemFile.mediaDescCN">
-                            <span style="width:80px;">{{common.LocalizedString('中文描述','中文描述')}} : </span>
+                            <span style="width:80px;">{{ common.LocalizedString('中文描述', '中文描述') }} : </span>
                             <lable style="font-weight: bold;">{{ itemFile.mediaDescCN }}</lable>
                         </div>
                         <div class="enlarge-picture" v-if="itemFile.mediaDescEN">
-                            <span style="width:80px;">{{common.LocalizedString('英文描述','英文描述')}} : </span>
+                            <span style="width:80px;">{{ common.LocalizedString('英文描述', '英文描述') }} : </span>
                             <lable style="font-weight: bold;">{{ itemFile.mediaDescEN }}</lable>
                         </div>
                         <div class="enlarge-picture" v-if="itemFile.mediaUploadEmployeeDesc">
-                            <span style="width:80px;">{{common.LocalizedString('来源描述','來源描述')}} : </span>
+                            <span style="width:80px;">{{ common.LocalizedString('来源描述', '來源描述') }} : </span>
                             <lable style="font-weight: bold;">{{ itemFile.mediaUploadEmployeeDesc }}</lable>
                         </div>
                     </div>
-                    <div class="toggler" @click="mediaLabelShow=!mediaLabelShow" v-if="itemFile.mediaLabelName||itemFile.mediaDescCN||itemFile.mediaDescEN||itemFile.mediaUploadEmployeeDesc">
+                    <div class="toggler" @click="mediaLabelShow = !mediaLabelShow"
+                        v-if="itemFile.mediaLabelName || itemFile.mediaDescCN || itemFile.mediaDescEN || itemFile.mediaUploadEmployeeDesc">
                         <span class="glyphicon glyphicon-chevron-right" v-if="mediaLabelShow">
-                            <el-icon color="#000000"><ArrowRightBold /></el-icon>
+                            <el-icon color="#000000">
+                                <ArrowRightBold />
+                            </el-icon>
                         </span>
                         <span class="glyphicon glyphicon-chevron-left" v-if="!mediaLabelShow">
-                            <el-icon color="#000000"><ArrowLeftBold /></el-icon>
+                            <el-icon color="#000000">
+                                <ArrowLeftBold />
+                            </el-icon>
                         </span>
                     </div>
                 </div>
@@ -118,7 +130,7 @@
                         <template v-else>
                             <div class="viewerContent" style="max-height: 200px; text-align: center">
                                 <a :href="resultObject" target="_blank">
-                                    <img :src="(itemFile.thumbnailUrl||itemFile.url)" /><br />{{
+                                    <img :src="(itemFile.thumbnailUrl || itemFile.url)" /><br />{{
                                         itemFile.mediaLabelName || itemFile.fileName
                                     }}
                                 </a>
@@ -126,7 +138,8 @@
                         </template>
                     </template>
                     <!--p360-->
-                    <template v-else-if="itemFile.mediaTypeID == '7' || (itemFile.mediaTypeID + '').toLowerCase() == 'p360'">
+                    <template
+                        v-else-if="itemFile.mediaTypeID == '7' || (itemFile.mediaTypeID + '').toLowerCase() == 'p360'">
                         <viewerP360 ref="refviewerP360" :height="displayAreaHeight" :width="displayAreaWidth"
                             :imgUrl="resultObject" />
                     </template>
@@ -144,6 +157,8 @@
                         <div class="magnify-footer" :style="{
                             width: displayAreaWidth + 'px',
                             bottom: displayAreabtm + 10 + 'px',
+                            position: !flagLeft ? 'absolute' : 'fixed',
+
                         }">
                             <div class="magnify-toolbar" :style="{ 'margin-left': displayArealeft + 'px' }">
 
@@ -201,14 +216,18 @@ import common from '../../utils/common';
 import viewerImage from './ViewerFile/ViewerImage.vue';
 import viewerPDF from './ViewerFile/ViewerPDFjs.vue';
 import viewerP360 from './ViewerFile/viewerP360.vue';
+const emit = defineEmits(['closeViewerFile', 'ViewerFilechangeIndex'])
 
 const props = defineProps({
     MediaAlbum: Array,
     groupIndex: Number,
     index: Number,
+    flagLeft: {
+        type: Boolean,
+        default: true
+    }
 })
 
-
 const refviewerfile = ref()
 const refdisplayArea = ref()
 const refviewerImage = ref()
@@ -227,8 +246,8 @@ const displayArealeft = ref(0)
 const displayAreaHeight = ref(0)
 const downloadUrl = ref("")
 const downloadLoading = ref(false)
-const mediaLabelShow=ref(false)
-const qrtimer=ref(null)
+const mediaLabelShow = ref(false)
+const qrtimer = ref(null)
 
 groupCountLen.value = 0;
 props.MediaAlbum.forEach((item, n) => {
@@ -245,11 +264,18 @@ onMounted(() => {
     displayArealeft.value = DomLeft();
     displayAreabtm.value = DomTop(refdisplayArea.value.$el);
     displayAreaHeight.value = refdisplayArea.value.$el.offsetHeight;
+    if (!props.flagLeft) {
+        displayAreaHeight.value = displayAreaHeight.value - 5;
+    }
     window.onresize = () => {
         displayAreaWidth.value = DomWidth();
         displayArealeft.value = DomLeft();
         displayAreabtm.value = DomTop(refdisplayArea.value.$el);
+
         displayAreaHeight.value = refdisplayArea.value.$el.offsetHeight;
+        if (!props.flagLeft) {
+            displayAreaHeight.value = displayAreaHeight.value - 5;
+        }
     };
 
     if (
@@ -258,7 +284,7 @@ onMounted(() => {
         props.groupIndex > -1 &&
         props.index > -1
     ) {
-        var item = props.MediaAlbum[props.groupIndex].medias[props.index];
+        var item = props.MediaAlbum[props.groupIndex]?.medias[props.index];
         handleClick(item, props.groupIndex, props.index);
     }
 })
@@ -304,6 +330,9 @@ function handleMouse(e) {
     e.preventDefault();
 }
 function DomWidth() {
+    if (!props.flagLeft) {
+        return refdisplayArea.value.$el.offsetWidth - 40;
+    }
     let arrLength = window.innerWidth - refviewerfile.value.offsetWidth;
     arrLength = arrLength > 0 ? arrLength : 0;
     var Width =
@@ -315,6 +344,9 @@ function DomWidth() {
     return Width;
 }
 function DomTop() {
+    if (!props.flagLeft) {
+        return -65;
+    }
     const height = window.innerHeight; //可视区窗口高度
     const curDomHeight = refviewerfile.value.offsetHeight;
     // const curDomHeight = dom.getBoundingClientRect().height
@@ -324,6 +356,9 @@ function DomTop() {
     return curDomBottom;
 }
 function DomLeft() {
+    if (!props.flagLeft) {
+        return 65;
+    }
     let arrLength = window.innerWidth - refviewerfile.value.offsetWidth;
     arrLength = arrLength > 0 ? arrLength : 0;
     var Width =
@@ -341,7 +376,8 @@ function handleClick(item, groupIndex, index) {
     activeGroup.value = groupIndex;
     itemFile.value = item;
     activeitem.value = groupIndex + "-" + index;
-    resultObject.value = itemFile.value.mediaUrl;
+    resultObject.value = itemFile.value?.mediaUrl;
+    emit('ViewerFilechangeIndex', { groupIndex: groupIndex, index: index })
 }
 function jump(n) {
     var item = {};
@@ -421,12 +457,16 @@ function zoom(n) {
 function enterFullscreen(n) {
     refviewerP360.value.enterFullscreen(n);
 }
+
+function closeViewerFile() {
+    emit('closeViewerFile')
+}
 onUnmounted(() => {
-  window.onresize = null;
-  if (qrtimer.value) {
-    clearTimeout(qrtimer.value);
-    qrtimer.value = null;
-  }
+    window.onresize = null;
+    if (qrtimer.value) {
+        clearTimeout(qrtimer.value);
+        qrtimer.value = null;
+    }
 })
 </script>
 <style scoped>
@@ -503,6 +543,7 @@ html {
 .enlarge-picture {
     padding: 5px 10px;
 }
+
 .toggler {
     -webkit-border-top-right-radius: 4px;
     -webkit-border-bottom-right-radius: 4px;
@@ -522,6 +563,7 @@ html {
     cursor: pointer;
     position: absolute;
 }
+
 .glyphicon {
     margin: 15px 0px;
     position: relative;