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

src/components/drag-node/index.vue

@@ -1,7 +1,8 @@
 <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 + '%'}">
+            <div :id="'drag-node-' + uuid" :style="{zoom: zoomRef + '%'}" class="hc-drag-node-content"
+                 @mousedown="dragNodeMouseDown">
                 <slot></slot>
             </div>
         </div>
@@ -17,20 +18,21 @@
                         <HcIcon name="indeterminate-circle"/>
                     </div>
                 </HcTipItem>
-                <HcTipItem :content="scaleType === 'mouse'?'切换为手动缩放模式':'切换为滚轮缩放模式'" popper-class="z-9999">
+                <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/>
+                        <HcIcon v-if="scaleType === 'mouse'" name="navigation"/>
+                        <HcIcon v-else name="mouse"/>
                     </div>
                 </HcTipItem>
-                <div class="icon-view-more" :class="moreMenus.length > 0 ? 'is-border':''">
+                <div :class="moreMenus.length > 0 ? 'is-border':''" class="icon-view-more">
                     <template v-for="item in moreMenus" :key="item.key">
-                        <HcTipItem :content="item.name" popper-class="z-9999" v-if="item.name">
+                        <HcTipItem v-if="item.name" :content="item.name" popper-class="z-9999">
                             <div class="icon-view" @click="moreMenusClick(item)">
                                 <HcIcon :name="item.icon"/>
                             </div>
                         </HcTipItem>
-                        <div class="icon-view" v-else @click="moreMenusClick(item)">
+                        <div v-else class="icon-view" @click="moreMenusClick(item)">
                             <HcIcon :name="item.icon"/>
                         </div>
                     </template>
@@ -80,10 +82,10 @@ const zoomRef = ref(100)
 
 //放大
 const enlargeClick = () => {
-    /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */
+    // 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小
     let zoom = parseInt(zoomRef.value + '') || 100
     zoom += 10
-    /* 最小范围 和 最大范围 的图片缩放尺度 */
+    // 最小范围 和 最大范围 的图片缩放尺度
     if (zoom >= 40 && zoom < 300) {
         zoomRef.value = zoom
     }
@@ -91,10 +93,10 @@ const enlargeClick = () => {
 
 //缩小
 const shrinkClick = () => {
-    /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */
+    // 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小
     let zoom = parseInt(zoomRef.value + '') || 100
     zoom -= 10
-    /* 最小范围 和 最大范围 的图片缩放尺度 */
+    // 最小范围 和 最大范围 的图片缩放尺度
     if (zoom >= 40 && zoom < 300) {
         zoomRef.value = zoom
     }
@@ -103,11 +105,11 @@ const shrinkClick = () => {
 //滚轮放大缩小
 const dragNodeMousewheel = (event) => {
     if (scaleType.value === 'mouse') {
-        /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */
+        // 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小
         let zoom = parseInt(zoomRef.value + '') || 100
-        /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */
+        // event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动
         zoom += event.wheelDelta / 12
-        /* 最小范围 和 最大范围 的图片缩放尺度 */
+        // 最小范围 和 最大范围 的图片缩放尺度
         if (zoom >= 40 && zoom < 300) {
             zoomRef.value = zoom
         }

src/components/table-form/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="hc-table-form-data-item" :id="`table-form-item-${keyId}`" :style="tableFormItemStyle">
+    <div :id="`table-form-item-${keyId}`" :style="tableFormItemStyle" class="hc-table-form-data-item">
         <div :id="`table-form-${keyId}`" class="hc-excel-table-form"/>
         <div v-if="isTableForm === false" class="hc-no-table-form">
             <div class="table-form-no">

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

@@ -1,9 +1,8 @@
 <template>
-    <div class="ui-drag-modal-box-hide" v-if="isBody">
-        <Teleport to="#app" :disabled="!isBody">
-            <div class="ui-drag-modal-box"
+    <div v-if="isBody" class="ui-drag-modal-box-hide">
+        <Teleport :disabled="!isBody" to="#app">
+            <div :id="'drag-modal-' + uuid"
                  :class="[isModalShow?'ui-drag-modal-show':'']"
-                 :id="'drag-modal-' + uuid"
                  :style="{
                      left: dragModalLeft + 'px',
                      top: dragModalTop + 'px',
@@ -11,19 +10,20 @@
                      height: heightVal + 'px',
                      zIndex: isModalShow ? zIndex: -1
                  }"
+                 class="ui-drag-modal-box"
                  @click.capture="dragModalCapture">
-                <div class="ui-drag-modal-dialog shadow-xl" :class="[bg,ui]"
-                     :style="{width: widthVal + 'px', height: heightVal + 'px'}"
+                <div :class="[bg,ui]" :style="{width: widthVal + 'px', height: heightVal + 'px'}"
+                     class="ui-drag-modal-dialog shadow-xl"
                      @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 :class="titleBorder?'border-bottom':''" class="ui-drag-modal-dialog-header">
+                        <div :class="titleUi" class="ui-drag-modal-dialog-title text-lg">
+                            <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 class="dialog-icon" v-if="closeIcon" @click="_closeClick()">
+                            <div v-if="closeIcon" class="dialog-icon" @click="_closeClick()">
                                 <HcIcon name="close"/>
                             </div>
                         </div>
@@ -39,9 +39,10 @@
 </template>
 
 <script setup>
-import { ref,nextTick,watch } from "vue"
+import {ref, nextTick, watch} from "vue"
 import {deepClone, getRandom} from "vue-utils-plus"
 import {useAppStore} from "~src/store";
+
 const useAppState = useAppStore()
 //参数
 const props = defineProps({
@@ -54,7 +55,7 @@ const props = defineProps({
         default: ''
     },
     widths: {
-        type: [Number,String],
+        type: [Number, String],
         default: 340
     },
     title: {
@@ -62,7 +63,7 @@ const props = defineProps({
         default: ''
     },
     titleUi: {
-        type: [String,Object,Array],
+        type: [String, Object, Array],
         default: ''
     },
     titleBorder: {
@@ -78,15 +79,15 @@ const props = defineProps({
         default: false
     },
     lefts: {
-        type: [Number,String],
+        type: [Number, String],
         default: 0
     },
     tops: {
-        type: [Number,String],
+        type: [Number, String],
         default: 0
     },
     height: {
-        type: [Number,String],
+        type: [Number, String],
         default: 440
     },
     //是否排序置顶
@@ -95,7 +96,7 @@ const props = defineProps({
         default: false
     },
     eid: {
-        type: [Number,String],
+        type: [Number, String],
         default: ''
     },
     //关闭时销毁
@@ -128,7 +129,7 @@ watch(() => [
 ], ([sortTopList]) => {
     dragModalSortTopList.value = sortTopList
     setModalIndex(sortTopList)
-}, { deep: true })
+}, {deep: true})
 
 //设置窗口层级
 const zIndex = ref(8000)
@@ -140,13 +141,13 @@ const setModalIndex = (sortTopList) => {
 }
 
 //页面渲染完成
-nextTick(()=> {
+nextTick(() => {
     //页面渲染完成后，再让 vue3 的 Teleport，把弹出框挂载到外部节点上。
     isBody.value = true
     if (props.isSortTop) {
         const sortTopList = dragModalSortTopList.value
         let index = sortTopList.indexOf(uuid)
-        if(index === -1) {
+        if (index === -1) {
             sortTopList.push(uuid)
             index = sortTopList.length - 1
         }
@@ -209,13 +210,13 @@ const dragModalResizeMouseDown = (event) => {
     let offsetWidth = dom.offsetWidth, clientHeight = dom.clientHeight;
     document.onmousemove = (e) => {
         //拖拽时为了对宽和高 限制一下范围，定义两个变量
-        let W =  e.clientX - clientX + offsetWidth;
-        let H =  e.clientY - clientY + clientHeight;
+        let W = e.clientX - clientX + offsetWidth;
+        let H = e.clientY - clientY + clientHeight;
 
-        if(body.offsetWidth - e.clientX < 0){
+        if (body.offsetWidth - e.clientX < 0) {
             W = body.offsetWidth - parseInt(dom.style.marginLeft);
         }
-        if(body.offsetHeight - e.clientY < 0){
+        if (body.offsetHeight - e.clientY < 0) {
             H = body.offsetHeight - parseInt(dom.style.marginTop);
         }
 
@@ -281,11 +282,11 @@ const dragModalCapture = () => {
     if (props.isSortTop) {
         const sortTopList = dragModalSortTopList.value
         const index = sortTopList.indexOf(uuid)
-        if(index === -1) {
+        if (index === -1) {
             //检查是否已经存在，不存在则添加
             sortTopList.push(uuid)
             useAppState.setDragModalSortTop(sortTopList)
-        } else if(index !== sortTopList.length - 1) {
+        } else if (index !== sortTopList.length - 1) {
             //检查是否在最上层，不在则置顶，可以解决多次点击时，频繁更改全局状态的问题
             sortTopList.splice(index, 1)
             sortTopList.push(uuid)
@@ -300,7 +301,7 @@ const destroyModal = () => {
     if (props.isSortTop) {
         const sortTopList = dragModalSortTopList.value
         const index = sortTopList.indexOf(uuid)
-        if(index !== -1) {
+        if (index !== -1) {
             sortTopList.splice(index, 1)
         }
     }