@longhongguo/form-create-ant-design-vue 3.3.25 → 3.3.28

package/package.json

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

package/src/components/FcEditorWrapper.vue

@@ -1,12 +1,22 @@
 <template>
-  <FcEditor
-    :model-value="modelValue"
-    :disabled="disabled && !readOnly"
-    :readOnly="readOnly"
-    :config="editorConfig"
-    :init="initEditor"
-    @update:model-value="$emit('update:modelValue', $event)"
-  />
+  <div class="fc-editor-wrapper">
+    <!-- 只读/预览模式：直接用 v-html 渲染，并添加图片点击监听 -->
+    <div
+      v-if="readOnly"
+      ref="readOnlyContainer"
+      class="fc-editor-readonly"
+      v-html="modelValue"
+    ></div>
+    <!-- 编辑模式：使用富文本编辑器 -->
+    <FcEditor
+      v-else
+      :model-value="modelValue"
+      :disabled="disabled"
+      :config="editorConfig"
+      :init="initEditor"
+      @update:model-value="$emit('update:modelValue', $event)"
+    />
+  </div>
 </template>
 
 <script>
@@ -49,16 +59,33 @@ export default defineComponent({
   emits: ['update:modelValue'],
   watch: {
     readOnly(newVal) {
-      // 当只读状态变化时，更新编辑器状态
-      if (this._editor) {
-        this.setReadOnlyMode(newVal)
-        // 如果是只读模式，设置图片点击监听
-        if (newVal) {
-          this.setupImageClickHandler(this._editor)
-        }
+      if (!newVal && this._editor) {
+        // 切换到编辑模式
+        this.setReadOnlyMode(false)
+      } else if (newVal) {
+        // 切换到只读模式，设置图片点击监听
+        this.$nextTick(() => {
+          this.setupImageClickHandlers()
+        })
+      }
+    },
+    modelValue() {
+      // 内容变化时，重新设置图片点击监听（仅只读模式）
+      if (this.readOnly) {
+        this.$nextTick(() => {
+          this.setupImageClickHandlers()
+        })
       }
     }
   },
+  mounted() {
+    // 如果是只读模式，设置图片点击监听
+    if (this.readOnly) {
+      this.$nextTick(() => {
+        this.setupImageClickHandlers()
+      })
+    }
+  },
   computed: {
     editorConfig() {
       const config = {}
@@ -217,7 +244,20 @@ export default defineComponent({
       return config
     }
   },
+  mounted() {
+    // 如果是只读模式，设置图片点击监听
+    if (this.readOnly) {
+      this.$nextTick(() => {
+        this.setupImageClickHandlers()
+      })
+    }
+  },
   beforeUnmount() {
+    // 清理图片点击监听器
+    if (this._imageClickCleanup) {
+      this._imageClickCleanup()
+      this._imageClickCleanup = null
+    }
     // 清理内容变化事件监听器
     if (this._editor && this._editor._fcChangeHandlers) {
       this._editor._fcChangeHandlers.forEach((item) => {
@@ -346,6 +386,98 @@ export default defineComponent({
     }
   },
   methods: {
+    // 设置只读模式下图片的点击监听器
+    setupImageClickHandlers() {
+      if (!this.readOnly || !this.$refs.readOnlyContainer) {
+        console.log(
+          '[FcEditorWrapper] setupImageClickHandlers: Not in readOnly mode or container not found.'
+        )
+        return
+      }
+
+      const container = this.$refs.readOnlyContainer
+
+      // 清理旧的监听器
+      if (this._imageClickCleanup) {
+        console.log('[FcEditorWrapper] Cleaning up old image click handlers.')
+        this._imageClickCleanup()
+        this._imageClickCleanup = null
+      }
+
+      // 使用事件委托，在容器上监听点击事件
+      const handleContainerClick = (e) => {
+        // 查找被点击的图片元素
+        let target = e.target
+        while (target && target !== container) {
+          if (target.tagName === 'IMG') {
+            // 找到了图片
+            const img = target
+            console.log('[FcEditorWrapper] Image clicked:', img.src)
+
+            const imgSrc = img.getAttribute('src') || img.src
+            const imgAlt = img.getAttribute('alt') || ''
+            const imgTitle = img.getAttribute('title') || imgAlt
+
+            // 检查图片是否在链接内
+            const parentLink = img.closest('a')
+            let imgUrl = imgSrc
+            if (parentLink) {
+              imgUrl = parentLink.getAttribute('href') || imgSrc
+              console.log('[FcEditorWrapper] Image is inside a link:', imgUrl)
+              // 不阻止默认行为，让链接正常跳转
+            }
+
+            // 生成 uid（基于图片 URL）
+            const uid = imgSrc.split('').reduce((acc, char) => {
+              return ((acc << 5) - acc + char.charCodeAt(0)) | 0
+            }, 0)
+
+            // 发送预览消息到父窗口（类似 Upload 组件）
+            if (window.parent && window.parent !== window) {
+              const message = {
+                type: 'upload-preview',
+                file: {
+                  url: imgUrl,
+                  name: imgTitle || imgAlt || '图片',
+                  uid: uid,
+                  size: 0,
+                  type: 'image'
+                },
+                timestamp: Date.now()
+              }
+              console.log('[FcEditorWrapper] Sending postMessage:', message)
+              window.parent.postMessage(message, '*')
+            } else {
+              console.warn('[FcEditorWrapper] No parent window to send message')
+            }
+
+            // 不阻止默认行为和事件冒泡，让链接和图片都能正常工作
+            // 如果图片在链接内，链接会正常跳转
+            // 如果图片不在链接内，图片也没有默认行为需要阻止
+            break
+          }
+          target = target.parentElement
+        }
+      }
+
+      // 在容器上添加点击事件监听器
+      container.addEventListener('click', handleContainerClick, true) // 使用 capture 阶段
+      console.log('[FcEditorWrapper] Added container click listener for images')
+
+      // 为所有图片设置样式
+      const images = container.querySelectorAll('img')
+      console.log('[FcEditorWrapper] Found images:', images.length)
+      images.forEach((img) => {
+        img.style.cursor = 'pointer'
+        img.style.pointerEvents = 'auto'
+      })
+
+      // 保存清理函数
+      this._imageClickCleanup = () => {
+        console.log('[FcEditorWrapper] Executing image click cleanup.')
+        container.removeEventListener('click', handleContainerClick, true)
+      }
+    },
     initEditor(editor) {
       if (!editor) return
 
@@ -541,21 +673,17 @@ export default defineComponent({
         // 立即设置一次
         this.$nextTick(() => {
           this.setReadOnlyMode(true)
-          this.setupImageClickHandler(editor)
         })
 
         // 第一次延迟：等待编辑器 DOM 创建
         setTimeout(() => {
           this.setReadOnlyMode(true)
-          this.setupImageClickHandler(editor)
           // 第二次延迟：确保设置生效
           setTimeout(() => {
             this.setReadOnlyMode(true)
-            this.setupImageClickHandler(editor)
             // 第三次延迟：确保完全生效
             setTimeout(() => {
               this.setReadOnlyMode(true)
-              this.setupImageClickHandler(editor)
             }, 300)
           }, 200)
         }, 100)
@@ -1045,90 +1173,6 @@ export default defineComponent({
         }
       })
     },
-    // 设置图片点击处理器（用于只读/预览模式下向父窗口发送预览消息）
-    setupImageClickHandler(editor) {
-      if (!editor) return
-
-      // 如果已经有处理器，先清理
-      if (this._imageClickHandler && this._imageClickContainer) {
-        this._imageClickContainer.removeEventListener(
-          'click',
-          this._imageClickHandler,
-          true
-        )
-      }
-
-      // 查找编辑器文本容器
-      let textContainer = null
-      if (editor.$textElem && editor.$textElem[0]) {
-        textContainer = editor.$textElem[0]
-      } else if (editor.id) {
-        const editorEl = document.getElementById(editor.id)
-        if (editorEl) {
-          textContainer = editorEl.querySelector('.w-e-text')
-        }
-      }
-
-      if (!textContainer) {
-        // 如果找不到容器，延迟重试
-        setTimeout(() => {
-          this.setupImageClickHandler(editor)
-        }, 100)
-        return
-      }
-
-      // 创建图片点击处理器
-      const handleImageClick = (event) => {
-        // 检查是否点击的是图片
-        const target = event.target
-        if (target && target.tagName === 'IMG') {
-          event.preventDefault()
-          event.stopPropagation()
-
-          // 提取图片信息
-          const imgSrc = target.getAttribute('src') || target.src
-          const imgAlt = target.getAttribute('alt') || ''
-          const imgTitle = target.getAttribute('title') || imgAlt
-
-          // 如果图片有链接，提取链接地址
-          let imgUrl = imgSrc
-          const parentLink = target.closest('a')
-          if (parentLink) {
-            imgUrl = parentLink.getAttribute('href') || imgSrc
-          }
-
-          // 发送预览消息到父窗口（类似 Upload 组件）
-          if (window.parent && window.parent !== window) {
-            // 生成一个基于图片 URL 的 uid（用于标识图片）
-            const uid = imgSrc.split('').reduce((acc, char) => {
-              return ((acc << 5) - acc + char.charCodeAt(0)) | 0
-            }, 0)
-
-            window.parent.postMessage(
-              {
-                type: 'upload-preview',
-                file: {
-                  url: imgUrl, // 使用图片 URL 或链接地址
-                  name: imgTitle || imgAlt || '图片', // 使用 title、alt 或默认值
-                  uid: uid, // 基于 URL 生成的标识
-                  size: 0, // 图片大小未知
-                  type: 'image' // 文件类型
-                },
-                timestamp: Date.now()
-              },
-              '*'
-            )
-          }
-        }
-      }
-
-      // 在捕获阶段添加点击监听器（优先级高）
-      textContainer.addEventListener('click', handleImageClick, true)
-
-      // 保存引用以便清理
-      this._imageClickHandler = handleImageClick
-      this._imageClickContainer = textContainer
-    },
     // 验证是否为有效的URL
     isValidUrl(str) {
       if (!str || typeof str !== 'string') return false
@@ -1184,3 +1228,30 @@ export default defineComponent({
   }
 })
 </script>
+
+<style scoped>
+.fc-editor-wrapper {
+  width: 100%;
+}
+
+.fc-editor-readonly {
+  padding: 0 10px;
+  border-radius: 4px;
+  /* 覆盖预览模式的全局 pointer-events: none 规则 */
+  pointer-events: auto !important;
+}
+
+.fc-editor-readonly img {
+  cursor: pointer;
+  max-width: 100%;
+  height: auto;
+  /* 确保图片可以点击，覆盖预览模式的全局规则 */
+  pointer-events: auto !important;
+}
+
+.fc-editor-readonly a {
+  /* 确保链接可以点击，覆盖预览模式的全局规则 */
+  pointer-events: auto !important;
+  cursor: pointer;
+}
+</style>

package/src/components/tableForm/TableForm.vue

@@ -27,7 +27,7 @@ import { markRaw, reactive } from 'vue'
 
 export default {
   name: 'TableForm',
-  emits: ['change', 'add', 'delete', 'update:modelValue'],
+  emits: ['change', 'add', 'delete', 'update:modelValue', 'select-change'],
   props: {
     formCreateInject: Object,
     modelValue: {
@@ -66,6 +66,14 @@ export default {
       type: Boolean,
       default: true
     },
+    showSelectColumn: {
+      type: Boolean,
+      default: false
+    },
+    selectField: {
+      type: String,
+      default: 'checked'
+    },
     showOperationColumn: {
       type: Boolean,
       default: true
@@ -93,6 +101,10 @@ export default {
       this.loadRule()
       this.updateTable()
     },
+    showSelectColumn() {
+      this.loadRule()
+      this.updateTable()
+    },
     showOperationColumn() {
       this.loadRule()
       this.updateTable()
@@ -112,6 +124,7 @@ export default {
       Form: markRaw(this.formCreateInject.form.$form()),
       copyTrs: '',
       oldValue: '',
+      selectedRows: new Set(), // 存储选中行的索引
       emptyRule: {
         type: 'tr',
         _isEmpty: true,
@@ -143,6 +156,7 @@ export default {
       return (
         this.columns.length +
         (this.showIndexColumn ? 1 : 0) +
+        (this.showSelectColumn ? 1 : 0) +
         (this.showOperationColumn ? (this.formCreateInject.preview ? 0 : 1) : 0)
       )
     },
@@ -187,6 +201,17 @@ export default {
         return
       }
       this.oldValue = str
+      
+      // 从数据中读取选中状态，初始化 selectedRows
+      if (this.showSelectColumn) {
+        this.selectedRows.clear()
+        this.modelValue.forEach((data, idx) => {
+          if (data && data[this.selectField] === true) {
+            this.selectedRows.add(idx)
+          }
+        })
+      }
+      
       this.trs = this.trs.splice(0, this.modelValue.length)
       if (!this.modelValue.length) {
         this.addEmpty()
@@ -200,6 +225,10 @@ export default {
         this.setRawData(idx, data || {})
       })
       this.rule[0].children[1].children = this.trs
+      // 更新全选状态
+      if (this.showSelectColumn) {
+        this.updateSelectAllState()
+      }
     },
     updateEmptyRule() {
       const emptyTextValue =
@@ -242,7 +271,20 @@ export default {
       ) {
         return
       }
+      // 删除数据行
       this.trs.splice(idx, 1)
+      // 更新 selectedRows，删除当前索引，后续索引前移
+      this.selectedRows.delete(idx)
+      const newSelectedRows = new Set()
+      this.selectedRows.forEach(selectedIdx => {
+        if (selectedIdx < idx) {
+          newSelectedRows.add(selectedIdx)
+        } else if (selectedIdx > idx) {
+          newSelectedRows.add(selectedIdx - 1)
+        }
+      })
+      this.selectedRows = newSelectedRows
+      
       this.updateValue()
       if (this.trs.length) {
         this.trs.forEach((tr) => this.updateRaw(tr))
@@ -250,6 +292,8 @@ export default {
         this.addEmpty()
       }
       this.$emit('delete', idx)
+      // 触发选择变化事件
+      this.$emit('select-change', Array.from(this.selectedRows))
     },
     addRaw(flag) {
       if (flag && this.disabled) {
@@ -265,13 +309,49 @@ export default {
         this.$emit('add', this.trs.length)
         this.updateValue()
       }
+      // 更新全选状态
+      this.updateSelectAllState()
     },
     updateRaw(tr) {
       const idx = this.trs.indexOf(tr)
+      let colOffset = 0
+      
       // 更新序号列
-      if (this.showIndexColumn && tr.children[0]) {
-        tr.children[0].props.innerText = idx + 1
+      if (this.showIndexColumn && tr.children[colOffset]) {
+        tr.children[colOffset].props.innerText = idx + 1
+        colOffset++
+      }
+      
+      // 更新选择列
+      if (this.showSelectColumn && tr.children[colOffset]) {
+        const selectCell = tr.children[colOffset]
+        // 从数据对象中读取选中状态
+        const rowData = this.modelValue[idx]
+        const isSelected = rowData && rowData[this.selectField] === true
+        if (selectCell.children && selectCell.children[0]) {
+          const checkbox = selectCell.children[0]
+          checkbox.props.checked = isSelected
+          checkbox.props.onClick = (e) => {
+            e.stopPropagation()
+            this.toggleRowSelect(idx, e.target.checked)
+          }
+        }
+        // 通过 DOM 更新 checkbox 状态（确保视图同步）
+        this.$nextTick(() => {
+          const tableEl = this.$el?.querySelector('._fc-tf-table')
+          if (tableEl) {
+            const rows = tableEl.querySelectorAll('tbody tr')
+            if (rows[idx]) {
+              const checkbox = rows[idx].querySelector('._fc-tf-select input[type="checkbox"]')
+              if (checkbox) {
+                checkbox.checked = isSelected
+              }
+            }
+          }
+        })
+        colOffset++
       }
+      
       // 更新操作列的删除按钮
       if (this.showOperationColumn && tr.children[tr.children.length - 1]) {
         const operationCell = tr.children[tr.children.length - 1]
@@ -282,6 +362,78 @@ export default {
         }
       }
     },
+    toggleRowSelect(idx, checked) {
+      // 更新数据对象中的选中状态
+      const rowData = this.modelValue[idx]
+      if (rowData) {
+        if (checked) {
+          this.selectedRows.add(idx)
+          rowData[this.selectField] = true
+        } else {
+          this.selectedRows.delete(idx)
+          rowData[this.selectField] = false
+        }
+        // 触发数据更新
+        this.updateValue()
+      }
+      // 更新全选状态
+      this.updateSelectAllState()
+      // 触发选择变化事件
+      this.$emit('select-change', Array.from(this.selectedRows))
+    },
+    toggleSelectAll(checked) {
+      // 更新所有数据对象中的选中状态
+      this.modelValue.forEach((rowData, idx) => {
+        if (rowData) {
+          if (checked) {
+            this.selectedRows.add(idx)
+            rowData[this.selectField] = true
+          } else {
+            this.selectedRows.delete(idx)
+            rowData[this.selectField] = false
+          }
+        }
+      })
+      // 触发数据更新
+      this.updateValue()
+      // 更新所有行的选择状态
+      this.trs.forEach((tr) => {
+        if (!tr._isEmpty) {
+          this.updateRaw(tr)
+        }
+      })
+      // 触发选择变化事件
+      this.$emit('select-change', Array.from(this.selectedRows))
+    },
+    updateSelectAllState() {
+      if (!this.showSelectColumn) return
+      
+      const validRows = this.modelValue.filter((rowData, idx) => {
+        const tr = this.trs[idx]
+        return tr && !tr._isEmpty
+      })
+      if (validRows.length === 0) return
+      
+      // 从数据对象中读取选中状态
+      const allSelected = validRows.every((rowData) => {
+        return rowData && rowData[this.selectField] === true
+      })
+      const someSelected = validRows.some((rowData) => {
+        return rowData && rowData[this.selectField] === true
+      })
+      
+      // 更新表头的全选checkbox（通过 DOM 操作）
+      this.$nextTick(() => {
+        const tableEl = this.$el?.querySelector('._fc-tf-table')
+        if (tableEl) {
+          const headerCheckbox = tableEl.querySelector('._fc-tf-head-select input[type="checkbox"]')
+          if (headerCheckbox) {
+            headerCheckbox.checked = allSelected
+            headerCheckbox.indeterminate = !allSelected && someSelected
+          }
+        }
+      })
+    },
     loadRule() {
       const header = []
       let body = []
@@ -311,6 +463,62 @@ export default {
         })
       }
 
+      // 选择列
+      if (this.showSelectColumn) {
+        header.push({
+          type: 'th',
+          native: true,
+          class: '_fc-tf-head-select',
+          style: {
+            width: '40px',
+            minWidth: '40px',
+            maxWidth: '40px',
+            textAlign: 'center',
+            ...(this.headerBackgroundColor
+              ? {
+                  backgroundColor: this.headerBackgroundColor
+                }
+              : {})
+          },
+          children: [
+            {
+              type: 'input',
+              native: true,
+              props: {
+                type: 'checkbox',
+                id: `_fc-tf-select-all-${this._uid || Date.now()}`,
+                onClick: (e) => {
+                  this.toggleSelectAll(e.target.checked)
+                }
+              }
+            }
+          ]
+        })
+        body.push({
+          type: 'td',
+          class: '_fc-tf-select',
+          native: true,
+          style: {
+            width: '40px',
+            minWidth: '40px',
+            maxWidth: '40px',
+            textAlign: 'center'
+          },
+          children: [
+            {
+              type: 'input',
+              native: true,
+              props: {
+                type: 'checkbox',
+                onClick: (e) => {
+                  // 这个会在 updateRaw 中被更新
+                }
+              }
+            }
+          ]
+        })
+      }
+
       // 数据列
       this.columns.forEach((column) => {
         header.push({

package/src/style/index.css

@@ -488,6 +488,21 @@ textarea[readonly].ant-input {
   -ms-user-select: none !important;
 }
 
+/* 允许只读模式下的富文本编辑器容器（v-html 渲染）中的链接和图片可以点击 */
+.form-create.is-preview .fc-editor-readonly {
+  pointer-events: auto !important;
+}
+
+.form-create.is-preview .fc-editor-readonly a {
+  pointer-events: auto !important;
+  cursor: pointer !important;
+}
+
+.form-create.is-preview .fc-editor-readonly img {
+  pointer-events: auto !important;
+  cursor: pointer !important;
+}
+
 /* 禁止编辑：通过 contenteditable 属性控制 */
 .form-create.is-preview .w-e-text {
   user-select: text !important;