@longhongguo/form-create-ant-design-vue 3.3.18 → 3.3.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.3.18",
+  "version": "3.3.20",
   "description": "AntDesignVue版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。",
   "main": "./dist/form-create.min.js",
   "module": "./dist/form-create.esm.js",

package/src/components/ExportExcel.vue

@@ -0,0 +1,305 @@
+<template>
+  <a-button
+    :type="buttonType"
+    :loading="loading"
+    :disabled="disabled"
+    @click="handleExport"
+  >
+    <slot>{{ text || '导出Excel' }}</slot>
+  </a-button>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { message } from 'ant-design-vue'
+
+export default defineComponent({
+  name: 'ExportExcel',
+  props: {
+    // form-create 注入的对象
+    formCreateInject: {
+      type: Object,
+      default: null
+    },
+    // 按钮类型
+    buttonType: {
+      type: String,
+      default: 'primary',
+      validator(value) {
+        return [
+          'primary',
+          'ghost',
+          'dashed',
+          'link',
+          'text',
+          'default'
+        ].includes(value)
+      }
+    },
+    // 按钮文字
+    text: {
+      type: String,
+      default: '导出Excel'
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 导出接口配置
+    action: {
+      type: String,
+      default: ''
+    },
+    // 请求方法
+    method: {
+      type: String,
+      default: 'post'
+    },
+    // 请求数据
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    // 查询参数
+    query: {
+      type: Object,
+      default: () => ({})
+    },
+    // 请求头
+    headers: {
+      type: Object,
+      default: () => ({})
+    },
+    // 是否携带凭证
+    withCredentials: {
+      type: Boolean,
+      default: false
+    },
+    // 文件名（如果不提供，将从响应头获取）
+    fileName: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      loading: false
+    }
+  },
+  methods: {
+    async handleExport() {
+      if (this.loading || this.disabled) {
+        return
+      }
+
+      if (!this.action) {
+        message.warning('请配置导出接口地址')
+        return
+      }
+
+      this.loading = true
+
+      try {
+        // 使用自定义的fetch来处理blob响应
+        const result = await this.fetchBlob({
+          action: this.action,
+          method: this.method,
+          data: this.data,
+          query: this.query,
+          headers: this.headers,
+          withCredentials: this.withCredentials
+        })
+
+        // 获取文件名
+        let fileName =
+          this.fileName || result.fileName || `${new Date().getTime()}.xlsx`
+        if (!fileName.endsWith('.xlsx') && !fileName.endsWith('.xls')) {
+          fileName = `${fileName}.xlsx`
+        }
+
+        // 导出文件
+        this.exportFile(fileName, result.blob)
+
+        message.success('导出成功')
+      } catch (error) {
+        console.error('导出失败:', error)
+        message.error(error.message || '导出失败，请稍后重试')
+      } finally {
+        this.loading = false
+      }
+    },
+
+    fetchBlob(config) {
+      return new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest()
+        let action = config.action || ''
+        let fileName = ''
+
+        // 处理查询参数
+        if (config.query) {
+          const query =
+            typeof config.query === 'string'
+              ? config.query
+              : Object.keys(config.query).reduce((acc, key) => {
+                  acc[key] =
+                    config.query[key] === null ||
+                    config.query[key] === undefined
+                      ? ''
+                      : config.query[key]
+                  return acc
+                }, {})
+          const queryString = new URLSearchParams(query).toString()
+          if (queryString) {
+            if (action.includes('?')) {
+              action += `&${queryString}`
+            } else {
+              action += `?${queryString}`
+            }
+          }
+        }
+
+        xhr.onerror = () => {
+          reject(new Error('请求失败'))
+        }
+
+        xhr.onload = () => {
+          if (xhr.status < 200 || xhr.status >= 300) {
+            // 检查是否是JSON错误响应
+            const contentType = xhr.getResponseHeader('content-type') || ''
+            if (contentType.includes('application/json')) {
+              // 如果是JSON类型，读取blob内容并解析
+              const reader = new FileReader()
+              reader.onload = (e) => {
+                try {
+                  const obj = JSON.parse(e.target.result)
+                  reject(new Error(obj.message || '导出失败'))
+                } catch (e) {
+                  reject(new Error(`导出失败: ${xhr.status}`))
+                }
+              }
+              reader.readAsText(xhr.response)
+              return
+            } else {
+              reject(new Error(`导出失败: ${xhr.status}`))
+            }
+            return
+          }
+
+          // 获取响应头中的文件名
+          const contentDisposition = xhr.getResponseHeader(
+            'content-disposition'
+          )
+          if (contentDisposition) {
+            const fileNameMatch = contentDisposition.match(
+              /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/
+            )
+            if (fileNameMatch && fileNameMatch[1]) {
+              fileName = fileNameMatch[1].replace(/['"]/g, '')
+              fileName = decodeURIComponent(fileName)
+            }
+          }
+
+          // 检查blob的type是否为JSON
+          const blob = xhr.response
+          if (blob.type && blob.type.includes('application/json')) {
+            // 如果是JSON类型，读取并解析
+            const reader = new FileReader()
+            reader.onload = (e) => {
+              try {
+                const obj = JSON.parse(e.target.result)
+                reject(new Error(obj.message || '导出失败'))
+              } catch (e) {
+                reject(new Error('导出失败'))
+              }
+            }
+            reader.readAsText(blob)
+            return
+          }
+
+          // 返回blob和文件名
+          resolve({
+            blob: xhr.response,
+            fileName: fileName
+          })
+        }
+
+        xhr.open(config.method || 'get', action, true)
+
+        // 设置响应类型为blob
+        xhr.responseType = 'blob'
+
+        // 设置请求头
+        try {
+          if (window.parent && window.parent.window) {
+            const authorizationKey =
+              window.parent.window.localStorage.getItem('authorizationKey')
+            const authorizationValue =
+              window.parent.window.localStorage.getItem('authorizationValue')
+            if (authorizationKey && authorizationValue) {
+              xhr.setRequestHeader(authorizationKey, authorizationValue)
+            }
+          } else {
+            const authorizationKey =
+              window.localStorage.getItem('authorizationKey')
+            const authorizationValue =
+              window.localStorage.getItem('authorizationValue')
+            if (authorizationKey && authorizationValue) {
+              xhr.setRequestHeader(authorizationKey, authorizationValue)
+            }
+          }
+        } catch (e) {
+          console.warn('获取token失败', e)
+        }
+
+        const headers = config.headers || {}
+        Object.keys(headers).forEach((item) => {
+          if (headers[item] != null) {
+            xhr.setRequestHeader(item, headers[item])
+          }
+        })
+
+        if (config.withCredentials && 'withCredentials' in xhr) {
+          xhr.withCredentials = true
+        }
+
+        // 处理请求体
+        if (config.data) {
+          const formData = new FormData()
+          Object.keys(config.data).forEach((key) => {
+            formData.append(key, config.data[key])
+          })
+          xhr.send(formData)
+        } else {
+          xhr.send()
+        }
+      })
+    },
+    /**
+     * 导出文件
+     * @param {string} fileName 文件名
+     * @param {Blob} content Blob对象
+     */
+    exportFile(fileName, content) {
+      const blob = new Blob([content], {
+        type: 'application/vnd.ms-excel'
+      })
+
+      if ('download' in document.createElement('a')) {
+        // 非IE下载
+        const elink = document.createElement('a')
+        elink.download = fileName
+        elink.style.display = 'none'
+        elink.href = URL.createObjectURL(blob)
+        document.body.appendChild(elink)
+        elink.click()
+        URL.revokeObjectURL(elink.href) // 释放URL 对象
+        document.body.removeChild(elink)
+      } else {
+        // IE10+下载
+        navigator.msSaveBlob(blob, fileName)
+      }
+    }
+  }
+})
+</script>

package/src/components/FcEditorWrapper.vue

@@ -214,6 +214,31 @@ export default defineComponent({
     }
   },
   beforeUnmount() {
+    // 清理内容变化事件监听器
+    if (this._editor && this._editor._fcChangeHandlers) {
+      this._editor._fcChangeHandlers.forEach((item) => {
+        if (item.type === 'eventHook' && item.handler) {
+          // 从事件钩子中移除
+          if (
+            this._editor.txt &&
+            this._editor.txt.eventHooks &&
+            this._editor.txt.eventHooks.changeEvents
+          ) {
+            const index = this._editor.txt.eventHooks.changeEvents.indexOf(
+              item.handler
+            )
+            if (index > -1) {
+              this._editor.txt.eventHooks.changeEvents.splice(index, 1)
+            }
+          }
+        } else if (item.element && item.handler) {
+          // 移除 DOM 事件监听器
+          item.element.removeEventListener(item.event, item.handler, true)
+        }
+      })
+      this._editor._fcChangeHandlers = null
+    }
+
     // 清理粘贴事件监听器
     if (this._pasteHandler && this._pasteHandlerContainer) {
       this._pasteHandlerContainer.removeEventListener(
@@ -322,6 +347,189 @@ export default defineComponent({
 
       // 保存编辑器引用
       this._editor = editor
+      console.log('[FcEditorWrapper] initEditor called', {
+        editor,
+        hasConfig: !!editor.config
+      })
+
+      // 监听编辑器内容变化，实时触发更新以便校验能及时响应
+      // 方法1: 在 config 中设置 onchange（必须在 editor.create() 之前）
+      if (editor.config) {
+        const originalOnchange = editor.config.onchange
+        console.log('[FcEditorWrapper] Setting config.onchange', {
+          hasOriginalOnchange: !!originalOnchange
+        })
+        editor.config.onchange = (html) => {
+          console.log('[FcEditorWrapper] config.onchange triggered', {
+            html: html ? html.substring(0, 50) + '...' : html
+          })
+          // 调用原有的 onchange（如果有）
+          if (originalOnchange && typeof originalOnchange === 'function') {
+            originalOnchange(html)
+          }
+          // 触发 modelValue 更新，这样 form-create 可以实时触发校验
+          console.log('[FcEditorWrapper] Emitting update:modelValue', {
+            html: html ? html.substring(0, 50) + '...' : html
+          })
+          this.$emit('update:modelValue', html)
+
+          // 尝试触发校验重新执行
+          this.$nextTick(() => {
+            if (
+              this.formCreateInject &&
+              this.formCreateInject.api &&
+              this.formCreateInject.field
+            ) {
+              const api = this.formCreateInject.api
+              const field = this.formCreateInject.field
+              console.log(
+                '[FcEditorWrapper] Attempting to trigger validation',
+                {
+                  field,
+                  hasValidateField: typeof api.validateField === 'function'
+                }
+              )
+
+              // 如果值不为空，尝试重新校验该字段
+              const isEmpty =
+                !html ||
+                !html.trim() ||
+                html === '<p><br></p>' ||
+                html === '<p></p>'
+              if (!isEmpty && typeof api.validateField === 'function') {
+                // 重新校验字段，这会根据当前值重新执行校验规则
+                api.validateField(field).catch(() => {
+                  // 校验失败是正常的，不需要处理
+                })
+                console.log(
+                  '[FcEditorWrapper] validateField called for field:',
+                  field
+                )
+              } else if (
+                isEmpty &&
+                typeof api.clearValidateState === 'function'
+              ) {
+                // 如果值为空，清除校验状态（但这可能不是我们想要的，因为可能还是需要显示错误）
+                // api.clearValidateState([field])
+              }
+            } else {
+              console.log('[FcEditorWrapper] Cannot trigger validation', {
+                hasInject: !!this.formCreateInject,
+                hasApi: !!(this.formCreateInject && this.formCreateInject.api),
+                hasField: !!(
+                  this.formCreateInject && this.formCreateInject.field
+                ),
+                injectKeys: this.formCreateInject
+                  ? Object.keys(this.formCreateInject)
+                  : []
+              })
+            }
+          })
+        }
+      }
+
+      // 方法2: 在编辑器创建后，也监听 DOM 事件作为备用方案
+      // 这样可以确保即使 config.onchange 不生效，也能触发更新
+      this.$nextTick(() => {
+        // 等待编辑器完全创建后再设置
+        setTimeout(() => {
+          console.log('[FcEditorWrapper] Setting up DOM event listeners', {
+            hasEditor: !!editor,
+            hasTxt: !!(editor && editor.txt),
+            editorId: editor && editor.id
+          })
+          if (editor && editor.txt) {
+            // 获取文本容器
+            let textContainer = null
+            if (editor.$textElem && editor.$textElem[0]) {
+              textContainer = editor.$textElem[0]
+              console.log('[FcEditorWrapper] Found textContainer via $textElem')
+            } else if (editor.id) {
+              const editorEl = document.getElementById(editor.id)
+              if (editorEl) {
+                textContainer = editorEl.querySelector('.w-e-text')
+                console.log(
+                  '[FcEditorWrapper] Found textContainer via querySelector',
+                  { editorId: editor.id, found: !!textContainer }
+                )
+              }
+            }
+
+            if (textContainer) {
+              // 监听 input 事件
+              const handleInput = () => {
+                const html = editor.txt.html()
+                console.log(
+                  '[FcEditorWrapper] DOM event triggered (input/keyup/paste)',
+                  { html: html ? html.substring(0, 50) + '...' : html }
+                )
+                this.$emit('update:modelValue', html)
+              }
+
+              // 监听多种事件以确保捕获所有内容变化
+              textContainer.addEventListener('input', handleInput)
+              textContainer.addEventListener('keyup', handleInput)
+              textContainer.addEventListener('paste', handleInput, true)
+              console.log('[FcEditorWrapper] Added DOM event listeners', {
+                textContainer
+              })
+
+              // 保存事件处理器引用，以便清理
+              if (!editor._fcChangeHandlers) {
+                editor._fcChangeHandlers = []
+              }
+              editor._fcChangeHandlers.push({
+                element: textContainer,
+                event: 'input',
+                handler: handleInput
+              })
+              editor._fcChangeHandlers.push({
+                element: textContainer,
+                event: 'keyup',
+                handler: handleInput
+              })
+              editor._fcChangeHandlers.push({
+                element: textContainer,
+                event: 'paste',
+                handler: handleInput
+              })
+
+              // 如果编辑器支持事件钩子，也使用它
+              if (editor.txt.eventHooks && editor.txt.eventHooks.changeEvents) {
+                console.log('[FcEditorWrapper] Found eventHooks.changeEvents', {
+                  count: editor.txt.eventHooks.changeEvents.length
+                })
+                const changeHandler = () => {
+                  const html = editor.txt.html()
+                  console.log(
+                    '[FcEditorWrapper] eventHook changeEvents triggered',
+                    { html: html ? html.substring(0, 50) + '...' : html }
+                  )
+                  this.$emit('update:modelValue', html)
+                }
+                editor.txt.eventHooks.changeEvents.push(changeHandler)
+                console.log('[FcEditorWrapper] Added eventHook handler', {
+                  newCount: editor.txt.eventHooks.changeEvents.length
+                })
+
+                if (!editor._fcChangeHandlers) {
+                  editor._fcChangeHandlers = []
+                }
+                editor._fcChangeHandlers.push({
+                  type: 'eventHook',
+                  handler: changeHandler
+                })
+              } else {
+                console.log(
+                  '[FcEditorWrapper] No eventHooks.changeEvents found'
+                )
+              }
+            } else {
+              console.warn('[FcEditorWrapper] Could not find textContainer')
+            }
+          }
+        }, 100)
+      })
 
       // 如果设置了只读模式，配置编辑器为只读
       // 使用多重延迟和监听，确保编辑器完全创建后再设置

package/src/components/index.js

@@ -9,6 +9,7 @@ import CusUserSelect from './CusUserSelect/index.vue'
 import TableForm from './tableForm/TableForm.vue'
 import TableFormView from './tableForm/TableFormView.vue'
 import TableFormColumnView from './tableForm/TableFormColumnView.vue'
+import ExportExcel from './ExportExcel.vue'
 
 export default [
   upload,
@@ -21,5 +22,6 @@ export default [
   CusUserSelect,
   TableForm,
   TableFormView,
-  TableFormColumnView
+  TableFormColumnView,
+  ExportExcel
 ]

package/src/core/alias.js

@@ -47,5 +47,6 @@ export default {
   aCard: PRE + 'Card',
   Card: PRE + 'Card',
   accTable: PRE + 'Table',
-  accTableTable: PRE + 'Table'
+  accTableTable: PRE + 'Table',
+  exportExcel: 'ExportExcel'
 }

package/src/parsers/accTable.js

@@ -1,9 +1,7 @@
 import { hasProperty } from '@form-create/utils/lib/type'
-import { deepCopy } from '@form-create/utils/lib/deepextend'
-import { h } from 'vue'
 
 // 简单的 getValue 函数，根据路径字符串获取嵌套对象的值
-function getValue(obj, path) {
+const getValue = (obj, path) => {
   if (!obj || !path) return undefined
   const keys = path.split('.')
   let value = obj

package/src/parsers/exportExcel.js

@@ -0,0 +1,3 @@
+export default {
+  name: 'exportExcel'
+}

package/src/parsers/index.js

@@ -21,6 +21,7 @@ import alert from './alert'
 import card from './card'
 import accTable from './accTable'
 import tableForm from './tableForm'
+import exportExcel from './exportExcel'
 
 export default [
   checkbox,
@@ -45,5 +46,6 @@ export default [
   alert,
   card,
   accTable,
-  tableForm
+  tableForm,
+  exportExcel
 ]

package/src/parsers/tableForm.js

@@ -1,4 +1,3 @@
 export default {
   name: 'tableForm'
 }
-