试验表单拖动

src/views/tentative/detect/components/ListItem.vue

@@ -67,7 +67,17 @@
                         </div>
                     </template>
                     <div class="data-fill-list-item-content">
-                        <div class="data-fill-table-form-box">
+                        <div v-if="item?.isWindow" class="data-fill-table-form-box is-window">
+                            <div class="hc-window-tip">
+                                <div class="table-form-no">
+                                    <img :src="NoDataSvg" alt="">
+                                    <div class="desc">
+                                        当前表单处于窗口模式，关闭相关窗口后恢复
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-else class="data-fill-table-form-box">
                             <div :id="`table-form-${item?.pKeyId}`" class="hc-excel-table-form-view" />
                             <div v-if="item?.isTableForm === false" class="hc-no-table-form">
                                 <div class="table-form-no">
@@ -78,6 +88,23 @@
                                 </div>
                             </div>
                         </div>
+                        <div class="hc-window-switch-box">
+                            <el-tooltip
+                                :content="item.isWindow ? '关闭窗口并恢复' : '当前表单窗口化'" :hide-after="0"
+                                placement="top"
+                            >
+                                <div class="icon-btn-view">
+                                    <template v-if="item.isWindow">
+                                        <HcIcon class="icon" name="picture-in-picture-2" />
+                                        <span class="ml-1" @click.stop="windowCloseClick(item, index)">关闭窗口化</span>
+                                    </template>
+                                    <template v-else>
+                                        <HcIcon class="icon" name="picture-in-picture-exit" />
+                                        <span class="ml-1" @click.stop="windowClick(item, index)">表单窗口化</span>
+                                    </template>
+                                </div>
+                            </el-tooltip>
+                        </div>
                         <div class="data-fill-table-tip-box">
                             <div class="text-orange tip-title">
                                 <HcIcon fill name="error" ui="text-2xl" />
@@ -93,21 +120,13 @@
                             <div class="table-tip-foot">
                                 <div class="tip-left-btn">
                                     <HcTooltip keys="wbs_import_table">
-                                        <div class="text-main dow-text" @click="uploadFileClick(item)">
+                                        <div class="text-gray-400 dow-text">
                                             <HcIcon name="publish" ui="text-lg" />
-                                            <span class="ml-1">导入表格数据</span>
+                                            <span class="ml-1">导入列表数据</span>
                                         </div>
                                     </HcTooltip>
-                                    <HcUploadFile
-                                        v-if="checkItem?.pKeyId"
-                                        ref="dataHcUploadFileRef"
-                                        :params="{ pKeyId: checkItem.pKeyId }"
-                                        :options="UploadFileOptions"
-                                        multiple="false"
-                                        @success="HcUploadFileSuccess"
-                                    />
                                     <HcTooltip keys="wbs_download_table">
-                                        <div v-loading="downloadLoading" class="text-main dow-text" @click="downModal(item)">
+                                        <div class="text-main dow-text">
                                             <HcIcon name="file_download" ui="text-lg" />
                                             <span class="ml-1">下载导入模板</span>
                                         </div>
@@ -222,6 +241,28 @@
             </div>
         </div>
     </HcDialog>
+
+    <!-- 查看表单 -->
+    <template v-for="(item, index) in DragModalTableForm">
+        <HcDragModal
+            :close-icon-arr="closeIconArr" :eid="item.pKeyId" :height="DragModalHeight" :is-show="item.isShow"
+            :loading="item.loading" :loading-text="item.loadingText" :title="item.title"
+            is-sort-top
+            @close="TableFormClose(item, index, true)" @closeIconTap="closeIconTap($event, item, index)"
+        >
+            <HcDragNode v-loading="item.tableFormSaveLoading" :more-menu="dragNodeMoreMenu" @menuTap="dragNodeMoreMenuTap($event, item, index)">
+                <div :id="`table-form-${item?.item.pKeyId}`" class="hc-excel-table-form-view" :style="`width:${item.width};height:${item.height};`" />
+                <div v-if="item?.isTableForm === false" class="hc-no-table-form">
+                    <div class="table-form-no">
+                        <img :src="notableform" alt="">
+                        <div class="desc">
+                            暂无表单数据
+                        </div>
+                    </div>
+                </div>
+            </HcDragNode>
+        </HcDragModal>
+    </template>
 </template>
 
 <script setup>
@@ -236,12 +277,11 @@ import dataApi1 from '~api/tentative/parameter/container'
 import dataApi2 from '~api/tentative/device/approach'
 import { getClassList } from '~api/tentative'
 import notableform from '~src/assets/view/notableform.svg'
-import { getTokenHeader } from '~src/api/request/header'
+import NoDataSvg from '~src/assets/view/no-data.svg'
 import {
     arrIndex,
     base64ToFile,
     deepClone,
-    downloadBlob,
     formValidate,
     getArrValue,
     getObjVal,
@@ -252,6 +292,7 @@ import {
 } from 'js-fast-way'
 import ossApi from '~api/oss'
 
+
 //初始
 const props = defineProps({
     datas: {
@@ -330,6 +371,7 @@ watch(() => [
     alllistDataval.value = AlllistData
     NodeStatusval.value = NodeStatus
     setFormDataNum(datas)
+  
 })
 
 //监听
@@ -407,6 +449,7 @@ const positiondata = ref([])
 const ActiveKey = ref('')
 const formKeyIds = ref('')
 const CollapseChange = async (name) => {
+
     ActiveKey.value = name
     const names = name ? name.split('-') : []
     formData.value.forEach((changeitem) => {
@@ -418,6 +461,7 @@ const CollapseChange = async (name) => {
         getOffsetTop(name)
         const index = names[1]
         let item = listDatas.value[index]
+        
         emit('upcheckTableId', item.pKeyId)
         emit('changeIscanclick', item.pKeyId)
         formKeyIds.value = getValString(item.pKeyId)
@@ -1432,60 +1476,142 @@ const getActiveKey = () => {
 const setActiveKey = (key) => {
     return ActiveKey.value = key
 }
-//下载导入模板
-const downloadLoading = ref(false)
-const getdownloadExcel = async (pKeyId)=>{
-    downloadLoading.value = true
-    const { error, disposition, res } = await wbsApi.downloadExcel({ pKeyId: pKeyId })
-      //处理数据
-      downloadLoading.value = false
-    if (!error) {
-        if (disposition) {
-            downloadBlob(res, disposition)
-        } else {
-            window.$message?.error('数据异常')
+
+
+//打开窗口
+const windowClick = (item, indexs)=>{
+   if (!item.isWindow) {
+    console.log(item, 'item')
+    const formSize = getTableFormSize(item?.pKeyId)
+    console.log(formSize, 'formSize')
+    const list = deepClone(DragModalTableForm.value)
+    let index = arrIndex(list, 'pKeyId', item.pKeyId)
+    const newTableForm = {
+            ...setInitDragModalTableForm(item, indexs),
+            ...formSize,
+         
         }
-    }
-}
-//下载模板
-const downModal = (item)=>{
-    const { pKeyId } = item
-    getdownloadExcel(pKeyId)
-}
-//导入表格数据
-//导入模板
-const dataHcUploadFileRef = ref(null)
-const checkItem = ref({})
-//打开文件选择框
-const uploadFileClick = (item) => {
-    checkItem.value = item
-    dataHcUploadFileRef?.value[0]?.cancelUpload()
-    dataHcUploadFileRef?.value[0].selectFile()
-}
-//上传配置
-const UploadFileOptions = {
-    //此处设置header
-    headers: getTokenHeader(),
-    url: '/api/blade-manager/wbsTreeContract/import-excel',
-}
-
-
-
-// 文件上传成功的回调
-const HcUploadFileSuccess = async (res) => {
-   const { resData } = res
-   const { pKeyId } = checkItem.value
-   if (resData) {
-       let changeitem = formData.value.filter(item=>item.pkeyId === pKeyId)
-       let obj = changeitem[0]
-       for (let i in resData) {
-            obj[i] = resData[i]
+        console.log(newTableForm, 'newTableForm')
+    item.isWindow = true
+      //弹窗表单的排序
+      if (index === -1) {
+            list.push(newTableForm)
+        } else if (index !== list.length - 1) {
+            //检查是否在最上层，不在则置顶，可以解决多次点击时，频繁更改全局状态的问题
+            list.splice(index, 1)
+            list.push(newTableForm)
         }
+        DragModalTableForm.value = list
+        ActiveKey.value = ''
+            const { pKeyId } = item
+    let KeyId = `item-${indexs}-${pKeyId}`
+        CollapseChange(KeyId)
    }
-  
-    dataHcUploadFileRef.value[0]?.setModalShow(false)
+ 
  
 }
+//获取表单的大小
+const getTableFormSize = (pkeyId) => {
+    let formId = `table-form-${pkeyId}`
+    try {
+        const { clientWidth, clientHeight } = document.getElementById(formId).children[0]
+        return {
+            width: (clientWidth + 40) + 'px',
+            height: (clientHeight + 80) + 'px',
+        }
+    } catch {
+        return {
+            width: '100%',
+            height: '100%',
+        }
+    }
+}
+//初始拖动表单的内容
+const setInitDragModalTableForm = (item, index) => {
+    console.log(item, 'item1111')
+    return {
+        projectId: projectId.value,
+        contractId: contractId.value,
+    
+        pkeyId: item.pKeyId,
+        height: '100%',
+        width: '100%',
+        title: item.nodeName,
+        isShow: true,
+        index: index,
+        item: item,
+    }
+}
+//关闭窗口
+const windowCloseClick = (item, indexs)=>{
+    
+    ActiveKey.value = ''
+}
+const DragModalTableForm = ref([])
+const DragModalHeight = ref(600)
+const closeIconArr = [
+    { key: 'reduction', icon: 'picture-in-picture-2', name: '还原到面板内，并自动展开面板' },
+]
+//关闭窗口
+const TableFormClose = async ({ pkeyId, index }, indexs, type) => {
+    const list = deepClone(DragModalTableForm.value)
+    //取表单的数据
+    // await setChangeFormDatas(pkeyId, 'collapse')
+    //关闭窗口
+    list.splice(indexs, 1)
+    DragModalTableForm.value = list
+    listDatas.value[index].isWindow = false
+  if (type) {
+    ActiveKey.value = ''
+  }
+ 
+}
+
+const dragNodeMoreMenu = [
+    { key: 'save', icon: 'save-2', name: '保存' },
+    { key: 'preview', icon: 'eye', name: '预览' },
+]
+
+//还原窗口
+const closeIconTap = async (event, item, indexs) => {
+    item.isShow = false
+    item.isWindow = false
+    const { index, pkeyId } = item
+    let KeyId = `item-${index}-${pkeyId}`
+    await TableFormClose(item, indexs, false)
+  
+    console.log(item, 'KeyId')
+    CollapseChange(KeyId)
+    item.isWindow = false
+  
+}
+//菜单被点击
+const dragNodeMoreMenuTap = async ({ key }, items, indexs) => {
+    const { item } = items
+    console.log(item, 'item')
+    console.log(items, 'items')
+    if (key === 'save') {
+        if (item?.isTableForm) {
+            items.tableFormSaveLoading = true
+            await tableFormSaveClick(item, indexs)
+            items.tableFormSaveLoading = false
+        } else {
+            window.$message.warning('此表单暂无数据和文件')
+        }
+    } else if (key === 'preview') {
+        if (item.isBussShow === 2 || item.isTabPdf === 1) {
+            window.$message.warning('此表单暂无可预览文件')
+        } else {
+            previewClick(item, items)
+        }
+    }
+}
+//清空窗口表单列表
+const clearDragModalTableForm = ()=>{
+    DragModalTableForm.value = []
+}
+
+
 // 暴露出去
 defineExpose({
     setFormChart,
@@ -1495,6 +1621,7 @@ defineExpose({
     setActiveKey,
     changeSimpleInput,
     changePositionInput,
+    clearDragModalTableForm,
 })
 </script>
 
@@ -1532,6 +1659,27 @@ defineExpose({
             height: 100%;
             overflow: auto;
             flex: 1;
+            &.is-window {
+                border: 0;
+                .hc-window-tip {
+                    position: relative;
+                    height: 100%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    .table-form-no {
+                        position: relative;
+                        img {
+                            width: 380px;
+                        }
+                        .desc {
+                            text-align: center;
+                            font-size: 20px;
+                            color: #aaa;
+                        }
+                    }
+                }
+            }
             .hc-no-table-form {
                 position: relative;
                 height: 100%;
@@ -1687,4 +1835,32 @@ defineExpose({
         }
     }
 }
+.hc-window-switch-box {
+            display: flex;
+            align-items: center;
+            position: absolute;
+            top: 14px;
+            right: 260px;
+            .icon-btn-view {
+                padding: 0 18px;
+                height: 34px;
+                display: flex;
+                align-items: center;
+                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));
+                background-size: 200%;
+                transition: background-position .5s;
+                .icon {
+                    font-size: 16px;
+                }
+                &:hover {
+                    background-position: 100% 0;
+                }
+            }
+        }
 </style>

src/views/tentative/detect/test-form-bak.vue

@@ -52,10 +52,13 @@
             </template>
             <!-- 清表列表 -->
             <el-scrollbar v-if="listItemData.length > 0" ref="ListItemScrollRef" v-loading="isLoadList">
-                <ListItem
-                    ref="ListItemRef" :node-status="NodeStatus" :alllist-data="alllistData"
+                <CollapseForm
+                    ref="ListItemRef"
+                    :node-status="NodeStatus"
+                    :alllist-data="alllistData"
                     :auth-btn-tab-key="authBtnTabKey"
-                    :base-data="listItemBaseData" :datas="listItemData"
+                    :base-data="listItemBaseData"
+                    :datas="listItemData"
                     :device-use-ids="listDeviceUseIds"
                     :node-idvalue="nodeIdvalue"
                     :status="1"
@@ -246,6 +249,8 @@
 import { nextTick, onDeactivated, onMounted, ref, watch } from 'vue'
 import { useAppStore } from '~src/store'
 import { useRoute, useRouter } from 'vue-router'
+import CollapseForm from './collapse-form/src/index.vue'
+
 import ListItem from './components/ListItem.vue'
 import DivisionTree from './components/DivisionTree.vue'
 import DivisionTree1 from './components/DivisionTree1.vue'

src/views/tentative/detect/test-form.vue

@@ -52,13 +52,10 @@
             </template>
             <!-- 清表列表 -->
             <el-scrollbar v-if="listItemData.length > 0" ref="ListItemScrollRef" v-loading="isLoadList">
-                <CollapseForm
-                    ref="ListItemRef"
-                    :node-status="NodeStatus"
-                    :alllist-data="alllistData"
+                <ListItem
+                    ref="ListItemRef" :node-status="NodeStatus" :alllist-data="alllistData"
                     :auth-btn-tab-key="authBtnTabKey"
-                    :base-data="listItemBaseData"
-                    :datas="listItemData"
+                    :base-data="listItemBaseData" :datas="listItemData"
                     :device-use-ids="listDeviceUseIds"
                     :node-idvalue="nodeIdvalue"
                     :status="1"
@@ -249,8 +246,6 @@
 import { nextTick, onDeactivated, onMounted, ref, watch } from 'vue'
 import { useAppStore } from '~src/store'
 import { useRoute, useRouter } from 'vue-router'
-import CollapseForm from './collapse-form/src/index.vue'
-
 import ListItem from './components/ListItem.vue'
 import DivisionTree from './components/DivisionTree.vue'
 import DivisionTree1 from './components/DivisionTree1.vue'