资料填报，表单弹窗

src/components/drag-node/index.vue

@@ -8,30 +8,30 @@
         </div>
         <div class="hc-drag-node-tools">
             <div class="hc-drag-node__actions__inner">
-                <HcTipItem content="放大" popper-class="z-9999">
+                <el-tooltip content="放大" placement="top" popper-class="z-9999">
                     <div class="icon-view" @click="enlargeClick">
                         <HcIcon name="add-circle"/>
                     </div>
-                </HcTipItem>
-                <HcTipItem content="缩小" popper-class="z-9999">
+                </el-tooltip>
+                <el-tooltip content="缩小" placement="top" popper-class="z-9999">
                     <div class="icon-view" @click="shrinkClick">
                         <HcIcon name="indeterminate-circle"/>
                     </div>
-                </HcTipItem>
-                <HcTipItem :content="scaleType === 'mouse'?'切换为手动缩放模式':'切换为滚轮缩放模式'"
-                           popper-class="z-9999">
+                </el-tooltip>
+                <el-tooltip :content="scaleType === 'mouse'?'切换为手动缩放模式':'切换为滚轮缩放模式'"
+                            placement="top" popper-class="z-9999">
                     <div class="icon-view" @click="scaleTypeClick">
                         <HcIcon v-if="scaleType === 'mouse'" name="navigation"/>
                         <HcIcon v-else name="mouse"/>
                     </div>
-                </HcTipItem>
+                </el-tooltip>
                 <div :class="moreMenus.length > 0 ? 'is-border':''" class="icon-view-more">
                     <template v-for="item in moreMenus" :key="item.key">
-                        <HcTipItem v-if="item.name" :content="item.name" popper-class="z-9999">
+                        <el-tooltip v-if="item.name" :content="item.name" placement="top" popper-class="z-9999">
                             <div class="icon-view" @click="moreMenusClick(item)">
                                 <HcIcon :name="item.icon"/>
                             </div>
-                        </HcTipItem>
+                        </el-tooltip>
                         <div v-else class="icon-view" @click="moreMenusClick(item)">
                             <HcIcon :name="item.icon"/>
                         </div>

src/components/table-form/index.vue

@@ -1,6 +1,10 @@
 <template>
-    <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 :id="`table-form-item-${keyId}`" v-loading="loading" :style="tableFormItemStyle"
+         class="hc-table-form-data-item">
+        <el-scrollbar v-if="isScroll" class="table-form-item-scrollbar">
+            <div :id="`table-form-${keyId}`" class="hc-excel-table-form"/>
+        </el-scrollbar>
+        <div v-else :id="`table-form-${keyId}`" class="hc-excel-table-form"/>
         <div v-if="isTableForm === false" class="hc-no-table-form">
             <div class="table-form-no">
                 <img :src="notableform" alt=""/>
@@ -49,6 +53,10 @@ const props = defineProps({
         type: String,
         default: 'auto'
     },
+    scroll: { // 可否滚动
+        type: Boolean,
+        default: false
+    },
 })
 
 //初始变量
@@ -59,6 +67,8 @@ const treeId = ref(props.tid)
 const classify = ref(props.classify)
 const apis = ref(props.api)
 const tableFormItemStyle = ref('')
+const loading = ref(false)
+const isScroll = ref(props.scroll)
 
 //监听
 watch(() => [
@@ -69,18 +79,21 @@ watch(() => [
     props.classify,
     props.width,
     props.height,
-], ([project_id, contract_id, tree_id, key_id, cid, width, height]) => {
+    props.scroll
+], ([project_id, contract_id, tree_id, key_id, cid, width, height, scroll]) => {
     projectId.value = project_id
     contractId.value = contract_id
     treeId.value = tree_id
     keyId.value = key_id ? key_id + '' : ''
     classify.value = cid
+    isScroll.value = scroll
     setItemStyle(width, height)
 })
 
 //渲染完成
 onMounted(async () => {
     let keys = []
+    loading.value = true
     const {dataInfo, bussCols, excelHtml} = apis.value
     setItemStyle(props.width, props.height)
     //获取已填写的数据
@@ -95,6 +108,7 @@ onMounted(async () => {
     if (isAsyncFunction(excelHtml)) {
         await getExcelHtml(keyId.value, excelHtml, keys)
     }
+    loading.value = false
 })
 
 //设置样式
@@ -117,7 +131,7 @@ const getFormDataInit = () => {
         classify: classify.value,
         pkeyId: keyId.value,
         nodeId: treeId.value,
-        isRenderForm: false
+        isRenderForm: false,
     }
 }
 
@@ -189,6 +203,7 @@ const getExcelHtml = async (pkeyId, func, keys) => {
                 }
             })
             tableFormInfo.value.isRenderForm = true
+            console.log('表单渲染完成')
             await nextTick(() => {
                 HTableForm.setByClassKeyup(keys)
             })
@@ -247,7 +262,9 @@ const getFormData = () => {
 
 //设置表单数据
 const setFormData = (data) => {
-    tableFormInfo.value = data
+    nextTick(() => {
+        tableFormInfo.value = data
+    })
 }
 
 //获取表单效验数据
@@ -284,13 +301,14 @@ defineExpose({
 }
 .hc-table-form-data-item {
     position: relative;
-    padding: 24px;
+    padding: 12px;
     height: 100%;
     overflow: hidden;
     background-color: white;
     .hc-excel-table-form {
         position: relative;
         display: flex;
+        padding: 10px;
         justify-content: center;
         td {
             padding: 6px;

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

@@ -60,7 +60,7 @@ table {
             align-items: center;
             position: absolute;
             top: 14px;
-            left: 14px;
+            right: 260px;
             .icon-btn-view {
                 padding: 0 18px;
                 height: 34px;

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

@@ -67,12 +67,13 @@
                     </div>
                     <div v-else class="data-fill-table-form-box">
                         <HcTableForm v-if="item.isTableRender" :ref="(el) => setItemRefs(el, item)" :api="apis"
-                                     :classify="classifys" :kid="item?.pkeyId"
-                                     :tid="treeId" @render="tableFormRender($event, item, index)"
+                                     :classify="classifys" :kid="item?.pkeyId" :tid="treeId"
+                                     scroll @render="tableFormRender($event, item, index)"
                                      @rightTap="tableFormRightTap($event, index)"/>
                     </div>
                     <div class="hc-window-switch-box">
-                        <el-tooltip :content="item.isWindow?'关闭窗口并恢复':'当前表单窗口化'" placement="top">
+                        <el-tooltip :content="item.isWindow?'关闭窗口并恢复':'当前表单窗口化'" :hide-after="0"
+                                    placement="top">
                             <div class="icon-btn-view" @click.stop="windowClick(item, index)">
                                 <template v-if="item.isWindow">
                                     <HcIcon class="icon" name="picture-in-picture-2"/>
@@ -319,7 +320,10 @@ const formparentId = ref('')
 const itemRefs = ref([])
 const setItemRefs = (el, {pkeyId}) => {
     if (el) {
-        if (!isIndex(itemRefs.value, 'pkeyId', pkeyId)) {
+        let index = getIndex(itemRefs.value, 'pkeyId', pkeyId)
+        if (index !== -1) {
+            itemRefs.value[index].ref = el
+        } else {
             itemRefs.value.push({
                 pkeyId: pkeyId,
                 ref: el
@@ -698,6 +702,7 @@ const windowClick = async (item, indexs) => {
                 list.push(newTableForm)
             }
             DragModalTableForm.value = list
+            ActiveKey.value = []
         } else {
             //处理表单的ref
             await setSpliceItemRefs(item)
@@ -739,9 +744,10 @@ const TableFormClose = async (closeFunc, item, index) => {
     //取表单的数据
     const refs = await getFormRef(item?.pkeyId)
     const formData = refs?.getFormData()
+    console.log(formData)
     //关闭窗口
     closeFunc()
-    console.log(formData)
+    DragModalTableForm.value = list
 }
 
 const dragNodeMoreMenu = [

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

@@ -46,7 +46,7 @@
     }
 }
 .data-fill-list-box .data-fill-table-form-box .hc-table-form-data-item {
-    overflow: auto;
+    padding: 0;
     background-color: initial;
 }