@longhongguo/form-create-ant-design-vue 3.3.15 → 3.3.17

package/package.json

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

package/src/components/tableForm/TableForm.vue

@@ -61,7 +61,23 @@ export default {
     },
     min: Number,
     max: Number,
-    disabled: Boolean
+    disabled: Boolean,
+    showIndexColumn: {
+      type: Boolean,
+      default: true
+    },
+    showOperationColumn: {
+      type: Boolean,
+      default: true
+    },
+    headerBackgroundColor: {
+      type: String,
+      default: ''
+    },
+    emptyText: {
+      type: String,
+      default: ''
+    }
   },
   watch: {
     modelValue: {
@@ -71,8 +87,21 @@ export default {
       deep: true
     },
     'formCreateInject.preview': function (n) {
-      this.emptyRule.children[0].props.colspan =
-        this.columns.length + (n ? 1 : 2)
+      this.emptyRule.children[0].props.colspan = this.getEmptyColspan()
+    },
+    showIndexColumn() {
+      this.loadRule()
+      this.updateTable()
+    },
+    showOperationColumn() {
+      this.loadRule()
+      this.updateTable()
+    },
+    headerBackgroundColor() {
+      this.loadRule()
+    },
+    emptyText() {
+      this.updateEmptyRule()
     }
   },
   data() {
@@ -97,16 +126,26 @@ export default {
             native: true,
             subRule: true,
             props: {
-              colspan:
-                this.columns.length + (this.formCreateInject.preview ? 1 : 2)
+              colspan: this.getEmptyColspan()
             },
-            children: [this.formCreateInject.t('dataEmpty') || '暂无数据']
+            children: [
+              this.emptyText ||
+                this.formCreateInject.t('dataEmpty') ||
+                '暂无数据'
+            ]
           }
         ]
       }
     }
   },
   methods: {
+    getEmptyColspan() {
+      return (
+        this.columns.length +
+        (this.showIndexColumn ? 1 : 0) +
+        (this.showOperationColumn ? (this.formCreateInject.preview ? 0 : 1) : 0)
+      )
+    },
     formChange() {
       this.updateValue()
     },
@@ -162,10 +201,32 @@ export default {
       })
       this.rule[0].children[1].children = this.trs
     },
+    updateEmptyRule() {
+      const emptyTextValue =
+        this.emptyText || this.formCreateInject.t('dataEmpty') || '暂无数据'
+      if (
+        this.emptyRule &&
+        this.emptyRule.children &&
+        this.emptyRule.children[0]
+      ) {
+        this.emptyRule.children[0].children = [emptyTextValue]
+      }
+      // 更新已经显示的空数据行
+      this.trs.forEach((tr) => {
+        if (tr._isEmpty && tr.children && tr.children[0]) {
+          tr.children[0].children = [emptyTextValue]
+        }
+      })
+      // 更新规则中的空数据行
+      if (this.rule[0] && this.rule[0].children && this.rule[0].children[1]) {
+        this.rule[0].children[1].children = this.trs
+      }
+    },
     addEmpty() {
       if (this.trs.length) {
         this.trs.splice(0, this.trs.length)
       }
+      this.updateEmptyRule()
       this.trs.push(this.emptyRule)
     },
     clearEmpty() {
@@ -207,39 +268,62 @@ export default {
     },
     updateRaw(tr) {
       const idx = this.trs.indexOf(tr)
-      tr.children[0].props.innerText = idx + 1
-      tr.children[tr.children.length - 1].children[0].props.onClick = () => {
-        this.delRaw(idx)
+      // 更新序号列
+      if (this.showIndexColumn && tr.children[0]) {
+        tr.children[0].props.innerText = idx + 1
+      }
+      // 更新操作列的删除按钮
+      if (this.showOperationColumn && tr.children[tr.children.length - 1]) {
+        const operationCell = tr.children[tr.children.length - 1]
+        if (operationCell.children && operationCell.children[0]) {
+          operationCell.children[0].props.onClick = () => {
+            this.delRaw(idx)
+          }
+        }
       }
     },
     loadRule() {
-      const header = [
-        {
+      const header = []
+      let body = []
+
+      // 序号列
+      if (this.showIndexColumn) {
+        header.push({
           type: 'th',
           native: true,
           class: '_fc-tf-head-idx',
+          style: this.headerBackgroundColor
+            ? {
+                backgroundColor: this.headerBackgroundColor
+              }
+            : {},
           props: {
             innerText: '#'
           }
-        }
-      ]
-      let body = [
-        {
+        })
+        body.push({
           type: 'td',
           class: '_fc-tf-idx',
           native: true,
           props: {
             innerText: '0'
           }
-        }
-      ]
+        })
+      }
+
+      // 数据列
       this.columns.forEach((column) => {
         header.push({
           type: 'th',
           native: true,
           style: {
             ...(column.style || {}),
-            textAlign: column.align || 'center'
+            textAlign: column.align || 'center',
+            ...(this.headerBackgroundColor
+              ? {
+                  backgroundColor: this.headerBackgroundColor
+                }
+              : {})
           },
           class: column.required ? '_fc-tf-head-required' : '',
           props: {
@@ -252,27 +336,36 @@ export default {
           children: [...(column.rule || [])]
         })
       })
-      header.push({
-        type: 'th',
-        native: true,
-        class: '_fc-tf-edit fc-clock',
-        props: {
-          innerText: this.formCreateInject.t('operation') || '操作'
-        }
-      })
-      body.push({
-        type: 'td',
-        native: true,
-        class: '_fc-tf-btn fc-clock',
-        children: [
-          {
-            type: 'i',
-            native: true,
-            class: 'fc-icon icon-delete',
-            props: {}
+
+      // 操作列
+      if (this.showOperationColumn) {
+        header.push({
+          type: 'th',
+          native: true,
+          class: '_fc-tf-edit fc-clock',
+          style: this.headerBackgroundColor
+            ? {
+                backgroundColor: this.headerBackgroundColor
+              }
+            : {},
+          props: {
+            innerText: this.formCreateInject.t('operation') || '操作'
           }
-        ]
-      })
+        })
+        body.push({
+          type: 'td',
+          native: true,
+          class: '_fc-tf-btn fc-clock',
+          children: [
+            {
+              type: 'i',
+              native: true,
+              class: 'fc-icon icon-delete',
+              props: {}
+            }
+          ]
+        })
+      }
       this.copyTrs = this.formCreateInject.form.toJson([
         {
           type: 'tr',