1

public/version.json

@@ -1,3 +1,3 @@
 {
-  "value": "20240723170248"
+  "value": "20240723171511"
 }

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

@@ -23,7 +23,7 @@ import { nextTick, onMounted, ref, watch } from 'vue'
 import HTableForm from '~src/plugins/HTableForm'
 import notableform from '~src/assets/view/notableform.svg'
 import { delStoreValue, getStoreValue, setStoreValue } from '~uti/storage'
-import { arrIndex, deepClone, getArrValue, getObjVal, isString } from 'js-fast-way'
+import { arrIndex, deepClone, getArrValue, getObjVal, isNullES, isString } from 'js-fast-way'
 
 //初始
 const props = defineProps({
@@ -97,9 +97,7 @@ watch(() => [
 })
 
 //html变动
-watch(() => [
-    props.html,
-], ([html]) => {
+watch(() => props.html, (html) => {
     excelHtml.value = html
     setExcelHtml()
 })
@@ -130,7 +128,9 @@ watch(() => [
 onMounted(() => {
     setItemStyle(props.width, props.height)
     setPickerKey()
-    getExcelHtml()
+    nextTick(() => {
+        getExcelHtml()
+    })
 })
 
 
@@ -164,45 +164,63 @@ const setExcelHtml = () => {
 }
 
 //获取模板标签数据
-const getExcelHtml = () => {
+const getExcelHtml = async () => {
     const pkeyId = keyId.value, pid = activeKey.value
     const temp = isString(excelHtml.value) ? excelHtml.value : ''
-    if (temp && pkeyId) {
-        //渲染表单
-        isTableForm.value = true
-        const { app, vm } = HTableForm.createForm({
-            pid: pid,
-            template: temp,
-            keys: colsKeys.value,
-            tableForm: excelForm.value,
-            appId: `#table-form-${pkeyId}`,
-            onFormDataChange: (form) => {
-                excelForm.value = form
-                emit('render', form)
-            },
-            onRight: (event, KeyName) => {
-                onRightClick(pkeyId, event, KeyName, pid)
-            },
-            //表单正则效验
-            /*onBlur: (event, key, reg, val, msg) => {
-                setTableFormBlurReg(pkeyId, event, key, reg, val, msg, pid)
-            },*/
-            onLeftClick: (key) => {
-                setShiftTableForm(key, pid)
-            },
-        })
-        tableFormApp.value = app
-        tableFormVM.value = vm
-        excelForm.value.isRenderForm = true
-        nextTick(() => {
-            HTableForm.setByClassKeyup(colsKeys.value, pid)
-        })
-        emit('render', excelForm.value)
-    } else {
+    if (isNullES(temp) || isNullES(pkeyId)) {
         isTableForm.value = false
         excelForm.value.isRenderForm = false
         emit('render', excelForm.value)
+        return
     }
+    await getAppTableId(`table-form-${pkeyId}`)
+    //渲染表单
+    isTableForm.value = true
+    const { app, vm } = HTableForm.createForm({
+        pid: pid,
+        template: temp,
+        keys: colsKeys.value,
+        tableForm: excelForm.value,
+        appId: `#table-form-${pkeyId}`,
+        onFormDataChange: (form) => {
+            excelForm.value = form
+            emit('render', form)
+        },
+        onRight: (event, KeyName) => {
+            onRightClick(pkeyId, event, KeyName, pid)
+        },
+        //表单正则效验
+        /*onBlur: (event, key, reg, val, msg) => {
+            setTableFormBlurReg(pkeyId, event, key, reg, val, msg, pid)
+        },*/
+        onLeftClick: (key) => {
+            setShiftTableForm(key, pid)
+        },
+    })
+    tableFormApp.value = app
+    tableFormVM.value = vm
+    excelForm.value.isRenderForm = true
+    await nextTick()
+    HTableForm.setByClassKeyup(colsKeys.value, pid)
+    emit('render', excelForm.value)
+}
+
+//检查元素是否存在
+const getAppTableId = async (key, maxAttempts = 10, interval = 500) => {
+    return new Promise((resolve, reject) => {
+        let attempts = 0
+        const checkElement = () => {
+            const dom = document.getElementById(key)
+            if (dom) {
+                resolve(dom)
+            } else if (++attempts < maxAttempts) {
+                setTimeout(checkElement, interval)
+            } else {
+                reject(new Error(`在${maxAttempts}次尝试后未找到元素 ${key}`))
+            }
+        }
+        checkElement()
+    })
 }
 
 //正则效验