资料填报，弹窗窗口优化

src/global/components/hc-drag-modal/index.vue

@@ -20,15 +20,24 @@
                             <span v-if="title">{{ title }}</span>
                         </div>
                         <div class="ui-drag-modal-dialog-extra">
-                            <div class="dialog-icon" @click="_fullscreenClick()">
-                                <HcIcon :name="isFullscreen?'fullscreen-exit':'fullscreen'"/>
-                            </div>
-                            <div v-if="isLoading && closeIcon" class="dialog-icon">
-                                <HcIcon name="close"/>
-                            </div>
-                            <div v-if="!isLoading && closeIcon" class="dialog-icon" @click="_closeClick()">
-                                <HcIcon name="close"/>
-                            </div>
+                            <template v-for="item in closeIconData">
+                                <el-tooltip :content="item.name" placement="top" popper-class="z-9999">
+                                    <div class="dialog-icon" @click="_closeIconClick(item)">
+                                        <HcIcon :name="item.icon"/>
+                                    </div>
+                                </el-tooltip>
+                            </template>
+                            <el-tooltip :content="isFullscreen?'退出全屏':'窗口全屏'" placement="top"
+                                        popper-class="z-9999">
+                                <div class="dialog-icon" @click="_fullscreenClick()">
+                                    <HcIcon :name="isFullscreen?'fullscreen-exit':'fullscreen'"/>
+                                </div>
+                            </el-tooltip>
+                            <el-tooltip v-if="closeIcon" content="关闭窗口" placement="top" popper-class="z-9999">
+                                <div class="dialog-icon" @click="_closeClick()">
+                                    <HcIcon name="close"/>
+                                </div>
+                            </el-tooltip>
                         </div>
                     </div>
                     <div v-loading="isLoading" :element-loading-text="isLoadingText"
@@ -117,6 +126,10 @@ const props = defineProps({
         type: [Number, String],
         default: '加载中...'
     },
+    closeIconArr: {
+        type: Array,
+        default: () => ([])
+    }
 })
 
 //变量
@@ -127,6 +140,7 @@ const dragModalLeft = ref(parseInt(props.lefts + ''))
 const dragModalTop = ref(parseInt(props.tops + ''))
 const widthVal = ref(parseInt(props.widths + ''))
 const heightVal = ref(parseInt(props.height))
+const closeIconData = ref(props.closeIconArr)
 
 const isLoading = ref(props.loading)
 const isLoadingText = ref(props.loadingText)
@@ -136,10 +150,12 @@ watch(() => [
     props.isShow,
     props.loading,
     props.loadingText,
-], ([isShow, loading, loadingText]) => {
+    props.closeIconArr
+], ([isShow, loading, loadingText, closeIcon]) => {
     isModalShow.value = isShow
     isLoading.value = loading
     isLoadingText.value = loadingText
+    closeIconData.value = closeIcon
 })
 
 //深度监听弹窗排序列表变化
@@ -250,7 +266,7 @@ const dragModalResizeMouseDown = (event) => {
 }
 
 //事件
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'closeIconTap'])
 const show = () => {
     isModalShow.value = true;
 }
@@ -261,8 +277,17 @@ const hide = () => {
     }
 }
 const _closeClick = () => {
-    emit('close')
+    if (!isLoading.value) {
+        emit('close')
+    }
+}
+
+const _closeIconClick = (item) => {
+    if (!isLoading.value) {
+        emit('closeIconTap', item)
+    }
 }
+
 //关闭弹窗
 const closeFunc = () => {
     hide();

src/views/data-fill/collapse-form/index.scss

@@ -69,6 +69,7 @@ table {
                 justify-content: center;
                 color: #ffffff;
                 cursor: pointer;
+                user-select: none;
                 border-radius: 80px;
                 box-shadow: 4px 4px 8px 0 rgba(54, 92, 167, 0.15), -3px -2px 8px 0 #ffffff;
                 background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));

src/views/data-fill/collapse-form/index.vue

@@ -222,9 +222,10 @@
 
     <!--查看表单-->
     <template v-for="(item,index) in DragModalTableForm">
-        <HcDragModal :eid="item.pkeyId" :height="DragModalHeight" :isShow="item.isShow" :loading="item.loading"
-                     :loadingText="item.loadingText" :title="item.title"
-                     isSortTop @close="TableFormClose(item, index)">
+        <HcDragModal :closeIconArr="closeIconArr" :eid="item.pkeyId" :height="DragModalHeight" :isShow="item.isShow"
+                     :loading="item.loading" :loadingText="item.loadingText" :title="item.title"
+                     isSortTop
+                     @close="TableFormClose(item, index)" @closeIconTap="closeIconTap($event, item, index)">
             <HcDragNode :more-menu="dragNodeMoreMenu" @menuTap="dragNodeMoreMenuTap($event, item)">
                 <HcTableForm :ref="(el) => setItemRefs(el, item)" :api="apis" :classify="item.classify"
                              :datas="changeFormDatas(item?.pkeyId, 'window')" :height="item.height"
@@ -235,6 +236,7 @@
         </HcDragModal>
     </template>
 
+    
 </template>
 
 <script setup>
@@ -250,7 +252,7 @@ import HcTestFile from "./test-file.vue"
 import HcFormula from "./formula.vue"
 import HcDragNode from "~com/drag-node/index.vue"
 import NoDataSvg from '~src/assets/view/no-data.svg'
-import {setPosRange, isType, utilsArray, deepClone} from "vue-utils-plus"
+import {setPosRange, isType, utilsArray, deepClone, isArray} from "vue-utils-plus"
 //初始变量
 const useAppState = useAppStore()
 const {isIndex, getIndex} = utilsArray()
@@ -339,6 +341,10 @@ const setSpliceItemRefs = async ({pkeyId}) => {
     }
 }
 
+const closeIconArr = [
+    {key: 'reduction', icon: 'picture-in-picture-2', name: '还原到面板内，并自动展开面板'}
+]
+
 //事件
 const emit = defineEmits(['renew', 'offsetTop'])
 
@@ -706,42 +712,37 @@ const formulaModalClose = () => {
 const DragModalTableForm = ref([])
 const DragModalHeight = ref(600)
 const windowClick = async (item, indexs) => {
-    let KeyId = `item-${indexs}-${item?.pkeyId}`
-    if (KeyId === ActiveKey.value) {
-        const list = DragModalTableForm.value
-        let index = getIndex(list, 'pkeyId', item.pkeyId)
-        if (!item.isWindow) {
-            const formSize = getTableFormSize(item?.pkeyId)
-            const newTableForm = {
-                ...setInitDragModalTableForm(item, indexs),
-                ...formSize
-            }
-            await setChangeFormDatas(item?.pkeyId, 'window')
-            item.isWindow = true
-            //处理表单的ref
-            await setSpliceItemRefs(item)
-            //弹窗表单的排序
-            if (index === -1) {
-                list.push(newTableForm)
-            } else if (index !== list.length - 1) {
-                //检查是否在最上层，不在则置顶，可以解决多次点击时，频繁更改全局状态的问题
-                list.splice(index, 1)
-                list.push(newTableForm)
-            }
-            DragModalTableForm.value = list
-            ActiveKey.value = []
-        } else {
-            await setChangeFormDatas(item?.pkeyId, 'collapse')
-            //处理表单的ref
-            await setSpliceItemRefs(item)
-            if (index !== -1) {
-                list.splice(index, 1)
-                DragModalTableForm.value = list
-            }
-            item.isWindow = false
+    const list = DragModalTableForm.value
+    let index = getIndex(list, 'pkeyId', item.pkeyId)
+    if (!item.isWindow) {
+        const formSize = getTableFormSize(item?.pkeyId)
+        const newTableForm = {
+            ...setInitDragModalTableForm(item, indexs),
+            ...formSize
+        }
+        await setChangeFormDatas(item?.pkeyId, 'window')
+        item.isWindow = true
+        //处理表单的ref
+        await setSpliceItemRefs(item)
+        //弹窗表单的排序
+        if (index === -1) {
+            list.push(newTableForm)
+        } else if (index !== list.length - 1) {
+            //检查是否在最上层，不在则置顶，可以解决多次点击时，频繁更改全局状态的问题
+            list.splice(index, 1)
+            list.push(newTableForm)
         }
+        DragModalTableForm.value = list
+        ActiveKey.value = []
     } else {
-        window.$message.warning('请先展开此表单,等待表单渲染完成后再操作')
+        await setChangeFormDatas(item?.pkeyId, 'collapse')
+        //处理表单的ref
+        await setSpliceItemRefs(item)
+        if (index !== -1) {
+            list.splice(index, 1)
+            DragModalTableForm.value = list
+        }
+        item.isWindow = false
     }
 }
 
@@ -781,6 +782,15 @@ const dragNodeMoreMenu = [
     {key: 'preview', icon: 'eye', name: '预览'},
 ]
 
+//还原窗口
+const closeIconTap = async (event, item, indexs) => {
+    console.log(event)
+    const {index, pkeyId} = item
+    let KeyId = `item-${index}-${pkeyId}`
+    await TableFormClose(item, indexs)
+    ActiveKey.value = [KeyId]
+}
+
 //菜单被点击
 const dragNodeMoreMenuTap = ({key}, items) => {
     const {item} = items
@@ -1060,16 +1070,17 @@ const delWindowRefs = (pkeyId) => {
 
 //计算展开高度和滚动位置
 const getOffsetTop = (key = '') => {
+    const keys = ActiveKey.value
     if (key) {
         const dom = document.getElementById(key[key.length - 1])
         if (!draw_type.value) {
-            if (dom?.offsetTop >= 583 && ActiveKey.value.length > 1) {
+            if (dom?.offsetTop >= 583 && keys.length > 1) {
                 emit('offsetTop', dom?.offsetTop - 583)
             } else {
                 emit('offsetTop', dom?.offsetTop)
             }
         } else {
-            if (dom.offsetTop >= 424 && ActiveKey.value.length > 1) {
+            if (dom.offsetTop >= 424 && keys.length > 1) {
                 emit('offsetTop', dom?.offsetTop - 424)
             } else {
                 emit('offsetTop', dom?.offsetTop)
@@ -1078,7 +1089,7 @@ const getOffsetTop = (key = '') => {
     } else {
         emit('offsetTop', 0)
     }
-    ActiveKey.value = ActiveKey.value[ActiveKey.value.length - 1]
+    ActiveKey.value = [keys[keys.length - 1]]
 }
 
 //获取折叠面板的索引
@@ -1168,7 +1179,13 @@ const getActiveKey = () => {
 
 //设置当前展开项
 const setActiveKey = (key) => {
-    return ActiveKey.value = key;
+    let keys = [];
+    if (isArray(key)) {
+        keys = key
+    } else {
+        keys.push(key)
+    }
+    return ActiveKey.value = keys;
 }
 
 // 暴露出去