征拆协议表单窗口化

src/global/components/table-form/index.vue

@@ -93,6 +93,7 @@ watch(() => [
     isScroll.value = scroll
     isLoading.value = loading
     activeKey.value = pid
+
     setItemStyle(width, height)
 })
 
@@ -120,7 +121,7 @@ watch(() => [
 watch(() => [
     props.cols,
 ], ([cols]) => {
-    colsKeys.value = cols
+    colsKeys.value = cols 
 }, {
     deep: true,
 })
@@ -128,6 +129,7 @@ watch(() => [
 
 //渲染完成
 onMounted(() => {
+ 
     setItemStyle(props.width, props.height)
     setPickerKey()
     getExcelHtml()
@@ -415,7 +417,7 @@ defineExpose({
     height: 100%;
     overflow: hidden;
     background-color: white;
-    border: 8px solid #c4c4c4;
+    // border: 4px solid #c4c4c4;
     &.no-scroll-bar .el-scrollbar {
         display: none;
     }

src/views/agree/components/collapse-form.scoped.scss

@@ -32,7 +32,7 @@ table {
             position: relative;
             height: 100%;
             overflow: hidden;
-            border: 8px solid #c4c4c4;
+            border: 4px solid #c4c4c4;
             &.is-window {
                 border: 0;
                 .hc-window-tip {
@@ -54,6 +54,24 @@ table {
                     }
                 }
             }
+            .form-window-icon {
+                position: absolute;
+                top: 10px;
+                right: 10px;
+                background: #3794FF;
+                color: white;
+                font-size: 20px;
+                width: 32px;
+                height: 32px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                border-radius: 30px;
+                cursor: pointer;
+                &:hover {
+                    background: #204DA0;
+                }
+            }
         }
         .hc-window-switch-box {
             display: flex;

src/views/agree/land/collapse-form/form-item.vue

@@ -4,12 +4,12 @@
         :cols="colsKeys"
         :form="tableFormInfo"
         :height="heights"
+        :width="widths"
         :html="excelHtml"
         :loading="loading"
         :pid="activeKey"
         :pkey="keyId"
         :scroll="scroll"
-        :width="widths"
         @excelBodyTap="excelTableFormClick"
         @render="tableFormRender"
         @rightTap="tableFormRightTap"

src/views/agree/land/collapse-form/index.vue

@@ -21,28 +21,81 @@
                             </div>
                         </div>
                     </template>
-                    <div class="data-fill-list-item-content">
-                        <TableFormItem
-                            v-if="item.isTableRender"
-                            :ref="(el) => setItemRefs(el, item)"
-                            :classify="classifys"
-                            :datas="changeFormDatas(item?.id, 'collapse')"
-                            :kid="item?.id"
-                            :node-name="item.nodeName"
-                            :node-type="item.nodeType"
-                            :pid="`table-form-${item?.id}`"
-                            :area-id="areaId"
-                            :table-id="item.tableId"
-                            :agreement-id="agreementId"
-                            style="width: 100%;"
-                            @excelBodyTap="excelTableFormClick($event)"
-                            @render="tableFormRender($event, item, index)"
-                            @rightTap="tableFormRightTap($event, index)"
-                        />
+                
+                    <div :style="`height: calc(100vh - ${draw_type ? '555px' : '222px'});`" class="data-fill-list-item-content">
+                        <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">
+                            <TableFormItem
+                                v-if="item.isTableRender"
+                                :ref="(el) => setItemRefs(el, item)"
+                                :classify="classifys"
+                                :datas="changeFormDatas(item?.id, 'collapse')"
+                                :kid="item?.id"
+                                :node-name="item.nodeName"
+                                :node-type="item.nodeType"
+                                :pid="`table-form-${item?.id}`"
+                                :area-id="areaId"
+                                :table-id="item.tableId"
+                                :agreement-id="agreementId"
+                                style="width: 100%;"
+                                @excelBodyTap="excelTableFormClick($event)"
+                                @render="tableFormRender($event, item, index)"
+                                @rightTap="tableFormRightTap($event, index)"
+                            />
+                            <el-tooltip :content="item.isWindow ? '关闭窗口并恢复' : '当前表单窗口化'" :hide-after="0" placement="top">
+                                <div class="form-window-icon" @click.stop="windowClick(item, index)">
+                                    <template v-if="item.isWindow">
+                                        <HcIcon name="fullscreen-exit" />
+                                    </template>
+                                    <template v-else>
+                                        <HcIcon name="fullscreen" />
+                                    </template>
+                                </div>
+                            </el-tooltip>
+                        </div>
                     </div>
                 </el-collapse-item>
             </template>
         </el-collapse>
+        <!-- 查看表单 -->
+        <template v-for="(item, index) in DragModalTableForm" :key="index">
+            <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)" @closeIconTap="closeIconTap($event, item, index)"
+            >
+                <HcDragNode :more-menu="dragNodeMoreMenu" @menuTap="dragNodeMoreMenuTap($event, item)">
+                    <TableFormItem
+                        :ref="(el) => setItemRefs(el, item)"
+                        :classify="classifys"
+                        :datas="changeFormDatas(item?.id, 'window')"
+                        :kid="item?.id"
+                        :height="item.height"
+                        :width="item.width"
+                        :node-name="item.nodeName"
+                        :node-type="item.nodeType"
+                        :pid="`table-form-${item?.id}`"
+                        :area-id="areaId"
+                        :table-id="item.tableId"
+                        :agreement-id="agreementId"
+               
+                        @excelBodyTap="excelTableFormClick($event)"
+                        @render="tableFormRender($event, item, index)"
+                        @rightTap="tableFormRightTap($event, index)"
+                    />
+                </HcDragNode>
+            </HcDragModal>
+        </template>
     </div>
 </template>
 
@@ -52,6 +105,7 @@ import HTableForm from '~src/plugins/HTableForm'
 import { useAppStore } from '~src/store'
 import landApi from '~api/agree/land.js'
 import TableFormItem from './form-item.vue'
+import NoDataSvg from '~src/assets/view/no-data.svg'
 import {
     arrIndex, deepClone, getArrValue,
     getObjVal, getObjValue, isNullES, setPosRange,
@@ -204,7 +258,8 @@ watch(() => [
 onMounted(() => {
     setFormDataNum(props.datas)
     setTableFormMenu(useAppState.projectInfo)
-    
+    const { offsetHeight } = document.body
+    DragModalHeight.value = offsetHeight - 200
     setMountOnEventKey()
 })
 
@@ -215,7 +270,7 @@ const changeFormData = ref({
 })
 const changeFormDatas = (pKeyId, type) => {
     const changeData = changeFormData.value[type]
-    const index = arrIndex(changeData, 'pKeyId', pKeyId)
+    const index = arrIndex(changeData, 'linkId', pKeyId)
     if (index !== -1) {
         return changeData[index]
     } else {
@@ -223,19 +278,7 @@ const changeFormDatas = (pKeyId, type) => {
     }
 }
 
-//设置变动的数据
-const setChangeFormDatas = async (pKeyId, type) => {
-    const refs = await getFormRef(pKeyId)
-    const formData = refs?.getFormData()
-    const changeData = changeFormData.value[type]
-    const index = arrIndex(changeData, 'pKeyId', pKeyId)
-    if (index !== -1) {
-        changeData[index] = formData
-    } else {
-        changeData.push(formData)
-    }
-    changeFormData.value[type] = changeData
-}
+
 
 //展开事件
 
@@ -307,6 +350,122 @@ const tableFormRightTap = ({ event, KeyName, startPos, endPos, pkeyId }, index)
     tableFormItemNode.value = { KeyName, index, startPos, endPos, pkeyId }
     contextMenuRef.value?.showMenu(event, false) //展开菜单
 }
+//设置变动的数据
+const setChangeFormDatas = async (pkeyId, type) => {
+    const refs = await getFormRef(pkeyId)
+    const formData = refs?.getFormData()
+    const changeData = changeFormData.value[type]
+    const index = arrIndex(changeData, 'linkId', pkeyId)
+    if (index !== -1) {
+        changeData[index] = formData
+    } else {
+        changeData.push(formData)
+    }
+    changeFormData.value[type] = changeData
+}
+//窗口化
+const DragModalTableForm = ref([])
+const DragModalHeight = ref(600)
+const windowClick = async (item, indexs) => {
+    const list = deepClone(DragModalTableForm.value)
+    let index = arrIndex(list, 'pkeyId', item.id)
+    if (!item.isWindow) {
+        const formSize = getTableFormSize(item?.id)
+        const newTableForm = {
+            ...setInitDragModalTableForm(item, indexs),
+            ...formSize,
+        }
+        await setChangeFormDatas(item?.id, '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?.id, 'collapse')
+        //处理表单的ref
+        await setSpliceItemRefs(item)
+        if (index !== -1) {
+            list.splice(index, 1)
+            DragModalTableForm.value = list
+        }
+        item.isWindow = false
+    }
+}
+
+//初始拖动表单的内容
+const setInitDragModalTableForm = (item, index) => {
+    return {
+        projectId: projectId.value,
+        contractId: contract_id.value,
+        wbsTempId: wbsTemp_id.value,
+        tenantId: tenant_id.value,
+        wbsType: wbs_type.value,
+        classify: classifys.value,
+        treeId: treeId.value,
+        pkeyId: item.pkeyId,
+        height: '100%',
+        width: '100%',
+        title: item.nodeName,
+        isShow: true,
+        index: index,
+        item: item,
+        id:item.id,
+    }
+}
+
+//关闭窗口
+const TableFormClose = async ({ id, index }, indexs) => {
+    const list = deepClone(DragModalTableForm.value)
+    //取表单的数据
+    await setChangeFormDatas(id, 'collapse')
+    //关闭窗口
+    list.splice(indexs, 1)
+    DragModalTableForm.value = list
+    listDatas.value[index].isWindow = false
+}
+
+const dragNodeMoreMenu = [
+    { key: 'save', icon: 'save-2', name: '保存' },
+    { key: 'preview', icon: 'eye', name: '预览' },
+]
+
+//还原窗口
+const closeIconTap = async (event, item, indexs) => {
+    console.log(item, 'item')
+    const { index, id } = item
+    let KeyId = `item-${index}-${id}`
+    await TableFormClose(item, indexs)
+    ActiveKey.value = KeyId
+}
+
+//菜单被点击
+const dragNodeMoreMenuTap = ({ key }, items) => {
+    const { item } = items
+    if (key === 'save') {
+        if (item?.isTableForm) {
+            tableFormSaveClick(item, items)
+        } else {
+            window.$message.warning('此表单暂无数据和文件')
+        }
+    } else if (key === 'preview') {
+        if (item['isBussShow'] === 2 || item['isTabPdf'] === 1 || item['pdfUrl'] === '' || item['pdfUrl'] === null) {
+            window.$message.warning('此表单暂无可预览文件')
+        } else {
+            previewClick(item, items)
+        }
+    }
+}
+
+
 
 
 
@@ -351,30 +510,6 @@ const tableFormRightTap = ({ event, KeyName, startPos, endPos, pkeyId }, index)
 
 
 
-//删除本表
-const tableFormDelLoading = ref(false)
-const delClick = async ({ pkeyId }) => {
-    if (pkeyId) {
-        if (isStatus.value !== 3) {
-            tableFormDelLoading.value = true
-            const { error, code } = await wbsApi.removeBussTabInfo({
-                pkeyid: pkeyId,
-                classify: classifys.value,
-            })
-            tableFormDelLoading.value = false
-            if (!error && code === 200) {
-                window?.$message?.success('操作成功')
-                //判断是否存在窗口，如果存在，就删除窗口
-                delWindowRefs(pkeyId)
-                renewData()
-            }
-        } else {
-            window?.$message?.warning('已上报的资料，不允许删除')
-        }
-    } else {
-        window?.$message?.warning('pkeyId为空')
-    }
-}
 //复制本表相关
 
 
@@ -406,7 +541,7 @@ const copyClick = async (items) => {
             window?.$message?.warning('已上报的资料，不允许复制')
         }
     } else {
-        window?.$message?.warning('pkeyId为空')
+        window?.$message?.warning('')
     }
  }
 

src/views/agree/land/form.vue

@@ -12,6 +12,7 @@
                 :status="0"
                 :area-id="areaId"
                 :agreement-id="agreementId"
+                :draw-type="isDrawType"
                 @renew="updateGetTablesData(agreementId)"
             />
             <HcStatus v-else text="暂无表单" />
@@ -133,6 +134,8 @@ const updateGetTablesData = async (id) => {
 //保存
 const ListItemRef = ref(null)
 const tableFormSaveLoading = ref(false)
+//是否是抽屉
+const isDrawType = ref(true)
 const tableFormSaveClick = async () => {
     //获取数据
     let FormData = []

src/views/agree/tomb/collapse-form/index.vue

@@ -34,7 +34,7 @@
                             :area-id="areaId"
                             :table-id="item.tableId"
                             :agreement-id="agreementId"
-                            style="width: 100%;"
+                       
                             @excelBodyTap="excelTableFormClick($event)"
                             @render="tableFormRender($event, item, index)"
                             @rightTap="tableFormRightTap($event, index)"