表单弹窗的测试开发 /test/index

src/components/drag-node/index.vue

@@ -0,0 +1,252 @@
+<template>
+    <div class="hc-drag-node-box">
+        <div class="hc-drag-node-mousewheel" @mousewheel="dragNodeMousewheel">
+            <div class="hc-drag-node-content" :id="'drag-node-' + uuid" @mousedown="dragNodeMouseDown" :style="{zoom: zoomRef + '%'}">
+                <slot></slot>
+            </div>
+        </div>
+        <div class="hc-drag-node-tools">
+            <div class="hc-drag-node__actions__inner">
+                <HcTipItem content="放大" popper-class="z-9999">
+                    <div class="icon-view" @click="enlargeClick">
+                        <HcIcon name="add-circle"/>
+                    </div>
+                </HcTipItem>
+                <HcTipItem content="缩小" popper-class="z-9999">
+                    <div class="icon-view" @click="shrinkClick">
+                        <HcIcon name="indeterminate-circle"/>
+                    </div>
+                </HcTipItem>
+                <HcTipItem :content="scaleType === 'mouse'?'切换为手动缩放模式':'切换为滚轮缩放模式'" popper-class="z-9999">
+                    <div class="icon-view" @click="scaleTypeClick">
+                        <HcIcon name="navigation" v-if="scaleType === 'mouse'"/>
+                        <HcIcon name="mouse" v-else/>
+                    </div>
+                </HcTipItem>
+                <div class="icon-view-more" :class="moreMenus.length > 0 ? 'is-border':''">
+                    <template v-for="item in moreMenus" :key="item.key">
+                        <HcTipItem :content="item.name" popper-class="z-9999" v-if="item.name">
+                            <div class="icon-view" @click="moreMenusClick(item)">
+                                <HcIcon :name="item.icon"/>
+                            </div>
+                        </HcTipItem>
+                        <div class="icon-view" v-else @click="moreMenusClick(item)">
+                            <HcIcon :name="item.icon"/>
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import {ref, watch} from "vue"
+import {getRandom} from "vue-utils-plus"
+//初始
+const props = defineProps({
+    moreMenu: {
+        type: Array,
+        default: () => ([])
+    }
+})
+
+//变量
+const uuid = getRandom()
+const moreMenus = ref(props.moreMenu)
+
+//监听
+watch(() => [
+    props.moreMenu,
+], ([menu]) => {
+    moreMenus.value = menu
+})
+
+//事件
+const emit = defineEmits(['menuTap'])
+
+//菜单被点击
+const moreMenusClick = (item) => {
+    emit('menuTap', item)
+}
+
+//缩放模式
+const scaleType = ref('mouse')
+const scaleTypeClick = () => {
+    scaleType.value = scaleType.value === 'mouse' ? 'navigation' : 'mouse'
+}
+
+const zoomRef = ref(100)
+
+//放大
+const enlargeClick = () => {
+    /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */
+    let zoom = parseInt(zoomRef.value + '') || 100
+    zoom += 10
+    /* 最小范围 和 最大范围 的图片缩放尺度 */
+    if (zoom >= 40 && zoom < 300) {
+        zoomRef.value = zoom
+    }
+}
+
+//缩小
+const shrinkClick = () => {
+    /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */
+    let zoom = parseInt(zoomRef.value + '') || 100
+    zoom -= 10
+    /* 最小范围 和 最大范围 的图片缩放尺度 */
+    if (zoom >= 40 && zoom < 300) {
+        zoomRef.value = zoom
+    }
+}
+
+//滚轮放大缩小
+const dragNodeMousewheel = (event) => {
+    if (scaleType.value === 'mouse') {
+        /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */
+        let zoom = parseInt(zoomRef.value + '') || 100
+        /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */
+        zoom += event.wheelDelta / 12
+        /* 最小范围 和 最大范围 的图片缩放尺度 */
+        if (zoom >= 40 && zoom < 300) {
+            zoomRef.value = zoom
+        }
+        return false
+    }
+}
+
+//拖动
+const isDown = ref(false)
+const dragNodeMouseDown = (event) => {
+    // 阻止默认事件和冒泡
+    //event.preventDefault()
+    event.stopPropagation()
+    //获取相关dom元素
+    let dom = document.getElementById('drag-node-' + uuid)
+    //获取x坐标和y坐标
+    let clientX = event.clientX, clientY = event.clientY;
+
+    //获取左部和顶部的偏移量
+    let offsetLeft = dom.offsetLeft, offsetTop = dom.offsetTop;
+    //开关打开
+    isDown.value = true;
+
+    //设置样式
+    dom.style.cursor = 'move';
+
+    document.onmousemove = (e) => {
+        if (isDown.value === false) {
+            return;
+        }
+        //获取x和y
+        let nx = e.clientX;
+        let ny = e.clientY;
+        //计算移动后的左偏移量和顶部的偏移量
+        let nl = nx - (clientX - offsetLeft);
+        let nt = ny - (clientY - offsetTop);
+
+        dom.style.left = nl + 'px';
+        dom.style.top = nt + 'px';
+    }
+    document.onmouseup = () => {
+        //开关关闭
+        isDown.value = false;
+        dom.style.cursor = 'default';
+        document.onmousemove = null;
+        document.onmouseup = null;
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.hc-drag-node-box {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+    background-color: #c4c4c4;
+    .hc-drag-node-mousewheel {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        /* 滚动条的宽度 */
+        &::-webkit-scrollbar {
+            width: 0;
+            height: 0;
+        }
+        .hc-drag-node-content {
+            display: table;
+            text-align: center;
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, 0);
+        }
+    }
+    .hc-drag-node-tools {
+        position: absolute;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0.8;
+        cursor: default;
+        box-sizing: border-box;
+        user-select: none;
+        left: 50%;
+        bottom: 10px;
+        transform: translate(-50%);
+        height: 44px;
+        background-color: #606266;
+        padding: 0 23px;
+        border-color: rgb(255, 255, 255);
+        border-radius: 22px;
+        .hc-drag-node__actions__inner {
+            width: 100%;
+            height: 100%;
+            text-align: justify;
+            cursor: default;
+            font-size: 23px;
+            color: rgb(255, 255, 255);
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+            .icon-view {
+                font-size: inherit;
+                cursor: pointer;
+                height: 1em;
+                width: 1em;
+                line-height: 1em;
+                display: inline-flex;
+                justify-content: center;
+                align-items: center;
+                position: relative;
+                fill: currentcolor;
+                color: inherit;
+                border-radius: 3px;
+                margin: 0 8px;
+                transition: color .2s, background-color .2s;
+                &:hover {
+                    color: var(--el-color-primary);
+                    background-color: white;
+                }
+            }
+            .icon-view-more {
+                position: relative;
+                display: inline-flex;
+                justify-content: center;
+                align-items: center;
+                font-size: inherit;
+                height: 1em;
+                fill: currentcolor;
+                color: inherit;
+                &.is-border {
+                    padding-left: 10px;
+                    margin-left: 10px;
+                    border-left: 1px solid #a7a7a7;
+                }
+            }
+        }
+    }
+}
+</style>

src/components/plugins/table-form/hc-form-radio-group.vue

@@ -109,6 +109,8 @@ const handleBlur = () => {
     .hc-radio-group-input {
         position: absolute;
         z-index: -1;
+        right: 10px;
+        width: 10px;
     }
 }
 </style>

src/components/table-form/index.vue

@@ -41,6 +41,14 @@ const props = defineProps({
             excelHtml: null
         })
     },
+    height: { // 高度
+        type: String,
+        default: '100%'
+    },
+    width: { // 宽度
+        type: String,
+        default: 'auto'
+    },
 })
 
 //初始变量
@@ -58,19 +66,23 @@ watch(() => [
     props.kid,
     useAppState.getProjectId,
     useAppState.getContractId,
-    props.classify
-], ([tree_id, key_id, project_id, contract_id, cid]) => {
+    props.classify,
+    props.width,
+    props.height,
+], ([tree_id, key_id, project_id, contract_id, cid, width, height]) => {
     projectId.value = project_id
     contractId.value = contract_id
     treeId.value = tree_id
     keyId.value = key_id ? key_id + '' : ''
     classify.value = cid
+    setItemStyle(width, height)
 })
 
 //渲染完成
 onMounted(async () => {
     let keys = []
     const {dataInfo, bussCols, excelHtml} = apis.value
+    setItemStyle(props.width, props.height)
     //获取已填写的数据
     if (isAsyncFunction(dataInfo)) {
         await getTableFormInfo(keyId.value, dataInfo)
@@ -85,6 +97,11 @@ onMounted(async () => {
     }
 })
 
+//设置样式
+const setItemStyle = (width, height) => {
+    tableFormItemStyle.value = `width: ${width}; height: ${height};`
+}
+
 //渲染状态变量
 const isTableForm = ref(false)
 const isTableRender = ref(false)
@@ -174,21 +191,17 @@ const getExcelHtml = async (pkeyId, func, keys) => {
             isRenderForm.value = true
             await nextTick(() => {
                 HTableForm.setByClassKeyup(keys)
-                const dom = document.getElementById(`table-form-item-${pkeyId}`)
-                tableFormItemStyle.value = `width: ${dom?.offsetWidth}px; height: ${dom?.offsetHeight}px;`
             })
         } else {
             isTableForm.value = false
             isTableRender.value = false
             isRenderForm.value = false
-            tableFormItemStyle.value = ''
             window?.$message?.warning('暂无表单')
         }
     } else {
         isTableForm.value = false
         isTableRender.value = false
         isRenderForm.value = false
-        tableFormItemStyle.value = ''
         window?.$message?.warning('pkeyId为空')
     }
 }
@@ -254,7 +267,7 @@ defineExpose({
     padding: 24px;
     height: 100%;
     overflow: hidden;
-    border: 8px solid #50545E;
+    background-color: white;
     .hc-excel-table-form {
         position: relative;
         display: flex;
@@ -325,7 +338,7 @@ defineExpose({
         //非输入框颜色
         td:not([titlexx]), td[titlexx*=''],
         td:not([title]), td[title*=''] {
-            background-color: #f1f5f8 !important;
+            background-color: white !important;
             user-select: none;
         }
     }

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

@@ -1,15 +1,31 @@
 <template>
     <div class="ui-drag-modal-box-hide" v-if="isBody">
-        <Teleport to="#app">
-            <div class="ui-drag-modal-box" :class="[isModalShow?'ui-drag-modal-show':'']" :id="'drag-modal-' + uuid"
-                 :style="{left: dragModalLeft + 'px', top: dragModalTop + 'px', width: widthVal + 'px', height: heightVal + 'px'}">
-                <div class="ui-drag-modal-dialog shadow-xl" :class="[bg,ui]" :style="{width: widthVal + 'px', height: heightVal + 'px'}" @mousedown="dragModalMouseDown">
+        <Teleport to="#app" :disabled="!isBody">
+            <div class="ui-drag-modal-box"
+                 :class="[isModalShow?'ui-drag-modal-show':'']"
+                 :id="'drag-modal-' + uuid"
+                 :style="{
+                     left: dragModalLeft + 'px',
+                     top: dragModalTop + 'px',
+                     width: widthVal + 'px',
+                     height: heightVal + 'px',
+                     zIndex: isModalShow ? zIndex: -1
+                 }"
+                 @click.capture="dragModalCapture">
+                <div class="ui-drag-modal-dialog shadow-xl" :class="[bg,ui]"
+                     :style="{width: widthVal + 'px', height: heightVal + 'px'}"
+                     @mousedown="dragModalMouseDown">
                     <div class="ui-drag-modal-dialog-header" :class="titleBorder?'border-bottom':''">
                         <div class="ui-drag-modal-dialog-title text-lg" :class="titleUi">
                             <span v-if="title">{{title}}</span>
                         </div>
-                        <div class="ui-drag-modal-dialog-close" v-if="closeIcon" @click="_closeClick()">
-                            <HcIcon name="close"/>
+                        <div class="ui-drag-modal-dialog-extra">
+                            <div class="dialog-icon" @click="_fullscreenClick()">
+                                <HcIcon :name="isFullscreen?'fullscreen-exit':'fullscreen'"/>
+                            </div>
+                            <div class="dialog-icon" v-if="closeIcon" @click="_closeClick()">
+                                <HcIcon name="close"/>
+                            </div>
                         </div>
                     </div>
                     <div class="ui-drag-modal-dialog-body" @mousedown.stop="dragModalBodyMouseDown">
@@ -24,7 +40,9 @@
 
 <script setup>
 import { ref,nextTick,watch } from "vue"
-import { getRandom } from "vue-utils-plus"
+import {deepClone, getRandom} from "vue-utils-plus"
+import {useAppStore} from "~src/store";
+const useAppState = useAppStore()
 //参数
 const props = defineProps({
     ui: {
@@ -53,7 +71,7 @@ const props = defineProps({
     },
     closeIcon: {
         type: Boolean,
-        default: false
+        default: true
     },
     isShow: {
         type: Boolean,
@@ -67,30 +85,82 @@ const props = defineProps({
         type: [Number,String],
         default: 0
     },
+    height: {
+        type: [Number,String],
+        default: 440
+    },
+    //是否排序置顶
+    isSortTop: {
+        type: Boolean,
+        default: false
+    },
+    eid: {
+        type: [Number,String],
+        default: ''
+    },
+    //关闭时销毁
+    isCloseDestroy: {
+        type: Boolean,
+        default: false
+    },
 })
 
 //变量
-const uuid = getRandom()
 const isBody = ref(false)
 const isModalShow = ref(props.isShow)
+const uuid = props.eid || getRandom()
 const dragModalLeft = ref(parseInt(props.lefts + ''))
 const dragModalTop = ref(parseInt(props.tops + ''))
 const widthVal = ref(parseInt(props.widths + ''))
-const heightVal = ref(440)
+const heightVal = ref(parseInt(props.height))
 
 //监听
-watch(() => props.isShow, (isShow) => {
+watch(() => [
+    props.isShow
+], ([isShow]) => {
     isModalShow.value = isShow;
 })
 
-//
+//深度监听弹窗排序列表变化
+const dragModalSortTopList = ref(useAppState.dragModalSortTop)
+watch(() => [
+    useAppState.dragModalSortTop
+], ([sortTopList]) => {
+    dragModalSortTopList.value = sortTopList
+    setModalIndex(sortTopList)
+}, { deep: true })
+
+//设置窗口层级
+const zIndex = ref(8000)
+const setModalIndex = (sortTopList) => {
+    if (props.isSortTop) {
+        const index = sortTopList.indexOf(uuid)
+        zIndex.value = 8000 + (index + 1)
+    }
+}
+
+//页面渲染完成
 nextTick(()=> {
     //页面渲染完成后，再让 vue3 的 Teleport，把弹出框挂载到外部节点上。
     isBody.value = true
+    if (props.isSortTop) {
+        const sortTopList = dragModalSortTopList.value
+        let index = sortTopList.indexOf(uuid)
+        if(index === -1) {
+            sortTopList.push(uuid)
+            index = sortTopList.length - 1
+        }
+        useAppState.setDragModalSortTop(sortTopList)
+        setModalIndex(sortTopList)
+        //窗口位置偏移，防止重叠在一起，误导用户
+        dragModalLeft.value = dragModalLeft.value + (index * 20)
+        dragModalTop.value = dragModalTop.value + (index * 20)
+    }
 })
 
 //弹窗拖动
 const dragModalMouseDown = (event) => {
+    dragModalCapture()
     // 阻止默认事件和冒泡
     event.preventDefault()
     event.stopPropagation()
@@ -123,11 +193,13 @@ const dragModalMouseDown = (event) => {
 }
 
 //禁止拖动
-const dragModalBodyMouseDown = () => {}
-
+const dragModalBodyMouseDown = () => {
+    dragModalCapture()
+}
 
 //弹窗改变宽高
 const dragModalResizeMouseDown = (event) => {
+    dragModalCapture()
     // 阻止默认事件和冒泡
     event.preventDefault()
     event.stopPropagation()
@@ -156,7 +228,6 @@ const dragModalResizeMouseDown = (event) => {
     }
 }
 
-
 //事件
 const emit = defineEmits(['close'])
 const show = () => {
@@ -164,11 +235,81 @@ const show = () => {
 }
 const hide = () => {
     isModalShow.value = false;
+    if (props.isCloseDestroy) {
+        destroyModal()
+    }
 }
 const _closeClick = () => {
+    emit('close', closeFunc)
+}
+//关闭弹窗
+const closeFunc = () => {
     hide();
-    emit('close', false)
 }
+
+//缓存样式
+const cacheStyleJson = ref({})
+const isFullscreen = ref(false)
+
+//全屏
+const _fullscreenClick = () => {
+    if (isFullscreen.value) {
+        const styleJson = deepClone(cacheStyleJson.value)
+        dragModalLeft.value = styleJson.left
+        dragModalTop.value = styleJson.top
+        widthVal.value = styleJson.width
+        heightVal.value = styleJson.height
+        isFullscreen.value = false
+    } else {
+        const {clientWidth, clientHeight} = document.body
+        cacheStyleJson.value = deepClone({
+            width: widthVal.value,
+            height: heightVal.value,
+            left: dragModalLeft.value,
+            top: dragModalTop.value
+        })
+        dragModalLeft.value = 0
+        dragModalTop.value = 0
+        widthVal.value = clientWidth
+        heightVal.value = clientHeight
+        isFullscreen.value = true
+    }
+}
+
+//弹窗被点击
+const dragModalCapture = () => {
+    if (props.isSortTop) {
+        const sortTopList = dragModalSortTopList.value
+        const index = sortTopList.indexOf(uuid)
+        if(index === -1) {
+            //检查是否已经存在，不存在则添加
+            sortTopList.push(uuid)
+            useAppState.setDragModalSortTop(sortTopList)
+        } else if(index !== sortTopList.length - 1) {
+            //检查是否在最上层，不在则置顶，可以解决多次点击时，频繁更改全局状态的问题
+            sortTopList.splice(index, 1)
+            sortTopList.push(uuid)
+            useAppState.setDragModalSortTop(sortTopList)
+        }
+    }
+}
+
+//销毁此弹窗
+const destroyModal = () => {
+    isBody.value = false;
+    if (props.isSortTop) {
+        const sortTopList = dragModalSortTopList.value
+        const index = sortTopList.indexOf(uuid)
+        if(index !== -1) {
+            sortTopList.splice(index, 1)
+        }
+    }
+}
+
+// 暴露出去
+defineExpose({
+    destroyModal
+})
 </script>
 
 <style lang="scss" scoped>

src/global/components/hc-drag-modal/modal.scss

@@ -27,16 +27,23 @@
                 user-select: none;
                 padding: 15px 14px 2px;
             }
-            .ui-drag-modal-dialog-close {
+            .ui-drag-modal-dialog-extra {
                 display: flex;
                 align-items: center;
                 justify-content: flex-end;
-                cursor: pointer;
                 margin-right: 15px;
                 font-size: 20px;
-                transition: opacity 0.3s;
-                &:hover {
-                    opacity: .6;
+                height: 100%;
+                .dialog-icon {
+                    cursor: pointer;
+                    transition: opacity 0.3s;
+                    line-height: 1;
+                    &:hover {
+                        opacity: .6;
+                    }
+                }
+                .dialog-icon + .dialog-icon {
+                    margin-left: 14px;
                 }
             }
         }
@@ -52,6 +59,10 @@
             right: 0;
             bottom: 0;
             cursor: se-resize;
+            border: 1px dashed #8f8f8f;
+            border-left: 0;
+            border-top: 0;
+            border-radius: 0 0 4px 0;
         }
     }
     &.ui-drag-modal-show {

src/global/components/hc-tooltip/item.vue

@@ -0,0 +1,36 @@
+<template>
+    <el-tooltip :content="content_tip" placement="top" :popper-class="popperClass" :disabled="!isBubble">
+        <slot></slot>
+    </el-tooltip>
+</template>
+
+<script setup>
+import {ref,watch} from "vue";
+import {useAppStore} from "~src/store";
+const useAppState = useAppStore()
+
+//参数
+const props = defineProps({
+    content: {
+        type: String,
+        default: ''
+    },
+    popperClass: {
+        type: String,
+        default: ''
+    },
+})
+
+//变量
+const content_tip = ref(props.content);
+const isBubble = ref(useAppState.getBubble);
+
+//监听
+watch(() => [
+    props.content,
+    useAppState.getBubble,
+], ([tip, bubble]) => {
+    content_tip.value = tip
+    isBubble.value = bubble
+})
+</script>

src/global/components/index.js

@@ -8,6 +8,7 @@ import HcDialog from './hc-dialog/index.vue'
 import HcUploads from './hc-uploads/index.vue'
 import HcCounter from './hc-counter/index.vue'
 import HcTooltip from './hc-tooltip/index.vue'
+import HcTipItem from './hc-tooltip/item.vue'
 import HcSmsAuth from './hc-sms-auth/index.vue'
 import HcMenuSimple from './hc-menu-simple/index.vue'
 import HcDatePicker from './hc-date-picker/index.vue'
@@ -35,6 +36,7 @@ export const setupComponents = (App) => {
     App.component('HcUploads', HcUploads)
     App.component('HcCounter', HcCounter)
     App.component('HcTooltip', HcTooltip)
+    App.component('HcTipItem', HcTipItem)
     App.component('HcSmsAuth', HcSmsAuth)
     App.component('HcMenuSimple', HcMenuSimple)
     App.component('HcDatePicker', HcDatePicker)

src/store/index.js

@@ -31,6 +31,7 @@ export const useAppStore = defineStore('main', {
         shotWebRtc: getStoreData('shotWebRtc') || 0, //WebRtc截图方式: 0关闭，1开启
         fullScreen: getStoreData('fullScreen') || 0, //全屏截图：0关闭，1开启
         isCollapse: getStoreData('isCollapse') || false, //菜单折叠
+        dragModalSortTop: [], //拖拽弹窗排序
         isScreenShort: false,
         barMenuName: '',
     }),
@@ -61,6 +62,7 @@ export const useAppStore = defineStore('main', {
         getShotWebRtc: state => state.shotWebRtc,
         getFullScreen: state => state.fullScreen,
         getCollapse: state => state.isCollapse,
+        getDragModalSortTop: state => state.dragModalSortTop,
     },
     actions: {
         //主题信息
@@ -156,6 +158,9 @@ export const useAppStore = defineStore('main', {
             this.isCollapse = value
             setStoreData('isCollapse', value)
         },
+        setDragModalSortTop(value) {
+            this.dragModalSortTop = value
+        },
         //清除缓存和token
         clearStoreData() {
             //清除状态
@@ -174,6 +179,7 @@ export const useAppStore = defineStore('main', {
             this.shotWebRtc = null
             this.fullScreen = null
             this.isCollapse = false
+            this.dragModalSortTop = []
             //清除缓存
             clearStoreAll()
             removeToken()

src/styles/app/main.scss

@@ -233,3 +233,6 @@ html, body, #app {
     position: relative;
     height: 100%;
 }
+.z-9999 {
+    z-index: 9999 !important;
+}

src/test/index.vue

@@ -2,26 +2,43 @@
     <div class="hc-page-box">
         <HcCard>
             <template #header>
-                <el-button type="primary">测试</el-button>
+                <el-button type="primary" @click="TableFormShow">查看表单</el-button>
             </template>
 
-            <div class="hc-drag-node-box" @mousewheel.prevent="dragNodeMousewheel">
-                <div class="hc-drag-node-content" :id="'drag-node-' + uuid" @mousedown="dragNodeMouseDown" :style="{zoom: zoomRef + '%'}">
-                    <HcTableForm kid="1572864967831453696" :api="apis"/>
-                </div>
-            </div>
+            <!--查看表单-->
+            <HcDragModal :isShow="isTableFormShow" lefts="120" title="A15检验申请批复单" eid="1572864967831453696"
+                         tops="80" widths="960px" height="800px" isSortTop isCloseDestroy @close="TableFormClose">
+                <HcDragNode :more-menu="dragNodeMoreMenu" @menuTap="dragNodeMoreMenuTap">
+                    <HcTableForm kid="1572864967831453696" :api="apis" width="798px" height="1299px"/>
+                </HcDragNode>
+            </HcDragModal>
+
+            <HcDragModal :isShow="isTableFormShow" lefts="120" title="G10平面位置检测记录表" eid="1572853967430352896"
+                         tops="80" widths="960px" height="840px" isSortTop isCloseDestroy @close="TableFormClose">
+                <HcDragNode :more-menu="dragNodeMoreMenu" @menuTap="dragNodeMoreMenuTap">
+                    <HcTableForm kid="1572853967430352896" :api="apis" width="1235px" height="1200px"/>
+                </HcDragNode>
+            </HcDragModal>
+
+            <HcDragModal :isShow="isTableFormShow" lefts="120" title="C10.26洞身开挖地质情况检查记录表" eid="1610893927836024835"
+                         tops="80" widths="960px" height="840px" isSortTop isCloseDestroy @close="TableFormClose">
+                <HcDragNode :more-menu="dragNodeMoreMenu" @menuTap="dragNodeMoreMenuTap">
+                    <HcTableForm kid="1610893927836024835" :api="apis" width="1250px" height="1100px"/>
+                </HcDragNode>
+            </HcDragModal>
 
         </HcCard>
     </div>
 </template>
 
 <script setup>
-import {nextTick, onMounted, ref} from "vue";
+import {onMounted, ref} from "vue";
+import HcDragNode from "~com/drag-node/index.vue"
 import HcTableForm from "~com/table-form/index.vue"
 import wbsApi from "~api/data-fill/wbs"
-import {getRandom} from "vue-utils-plus"
+import {useAppStore} from "~src/store";
+const useAppState = useAppStore()
 
-const uuid = getRandom()
 const apis = ref({
     dataInfo: wbsApi.getBussDataInfo,
     bussCols: wbsApi.getHtmlBussCols,
@@ -29,78 +46,26 @@ const apis = ref({
 })
 
 onMounted(() => {
-
+    useAppState.setDragModalSortTop([])
 })
 
-//放大缩小
-const zoomRef = ref(100)
-const dragNodeMousewheel = (event) => {
-    /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */
-    let zoom = parseInt(zoomRef.value + '') || 100
-    /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */
-    zoom += event.wheelDelta / 12
-    /* 最小范围 和 最大范围 的图片缩放尺度 */
-    if (zoom >= 40 && zoom < 300) {
-        zoomRef.value = zoom
-    }
-    return false
-}
-
-const isDown = ref(false)
-const dragNodeMouseDown = (event) => {
-    // 阻止默认事件和冒泡
-    //event.preventDefault()
-    event.stopPropagation()
-    //获取相关dom元素
-    let dom = document.getElementById('drag-node-' + uuid)
-    //获取x坐标和y坐标
-    let clientX = event.clientX, clientY = event.clientY;
-
-    //获取左部和顶部的偏移量
-    let offsetLeft = dom.offsetLeft, offsetTop = dom.offsetTop;
-    //开关打开
-    isDown.value = true;
 
-    //设置样式
-    dom.style.cursor = 'move';
-
-    document.onmousemove = (e) => {
-        if (isDown.value === false) {
-            return;
-        }
-        //获取x和y
-        let nx = e.clientX;
-        let ny = e.clientY;
-        //计算移动后的左偏移量和顶部的偏移量
-        let nl = nx - (clientX - offsetLeft);
-        let nt = ny - (clientY - offsetTop);
-
-        dom.style.left = nl + 'px';
-        dom.style.top = nt + 'px';
-    }
-    document.onmouseup = () => {
-        //开关关闭
-        isDown.value = false;
-        dom.style.cursor = 'default';
-        document.onmousemove = null;
-        document.onmouseup = null;
-    }
+const isTableFormShow = ref(true)
+const TableFormShow = () => {
+    isTableFormShow.value = true
+}
+const TableFormClose = (closeFunc) => {
+    isTableFormShow.value = false
+    closeFunc()
 }
 
-</script>
+const dragNodeMoreMenu = [
+    {key: 'save', icon: 'save-2', name: '保存'},
+    {key: 'preview', icon: 'eye', name: '预览'},
+]
 
-<style lang="scss">
-.hc-drag-node-box {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    .hc-drag-node-content {
-        display: table;
-        text-align: center;
-        position: absolute;
-        left: 50%;
-        transform: translate(-50%, 0);
-    }
+//菜单被点击
+const dragNodeMoreMenuTap = (item) => {
+    console.log(item)
 }
-</style>
+</script>