@longhongguo/form-create-ant-design-vue 3.2.49 → 3.2.50

package/package.json

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

package/src/components/CusStoreSelect/index.vue

@@ -94,6 +94,11 @@ export default defineComponent({
     bordered: {
       type: Boolean,
       default: true
+    },
+    // 额外查询参数
+    extraQuery: {
+      type: Object,
+      default: () => ({})
     }
   },
   emits: ['update:modelValue', 'change'],
@@ -234,6 +239,7 @@ export default defineComponent({
         currentValue: serializedCurrentValue,
         valueKey: this.valueKey,
         labelKey: this.labelKey,
+        extraQuery: this.extraQuery,
         messageId: msgId
       }
 

package/src/components/CusUserSelect/index.vue

@@ -98,6 +98,10 @@ export default defineComponent({
     selectType: {
       type: [String, Number],
       default: null
+    },
+    extraQuery: {
+      type: Object,
+      default: () => ({})
     }
   },
   emits: ['update:modelValue', 'change'],
@@ -239,6 +243,7 @@ export default defineComponent({
         valueKey: this.valueKey,
         labelKey: this.labelKey,
         selectType: this.selectType,
+        extraQuery: this.extraQuery,
         messageId: msgId
       }
 

package/src/components/index.js

@@ -6,6 +6,9 @@ import QuestionCircleOutlined from './icon/QuestionCircleOutlined.vue'
 import CusSelect from './CusSelect/index.vue'
 import CusStoreSelect from './CusStoreSelect/index.vue'
 import CusUserSelect from './CusUserSelect/index.vue'
+import TableForm from './tableForm/TableForm.vue'
+import TableFormView from './tableForm/TableFormView.vue'
+import TableFormColumnView from './tableForm/TableFormColumnView.vue'
 
 export default [
   upload,
@@ -15,5 +18,8 @@ export default [
   QuestionCircleOutlined,
   CusSelect,
   CusStoreSelect,
-  CusUserSelect
+  CusUserSelect,
+  TableForm,
+  TableFormView,
+  TableFormColumnView
 ]

package/src/components/tableForm/TableForm.vue

@@ -0,0 +1,323 @@
+<template>
+  <div class="_fc-table-form" :class="{ '_fc-disabled': disabled }">
+    <component
+      :is="Form"
+      :option="options"
+      :rule="rule"
+      :extendOption="true"
+      :disabled="disabled"
+      @change="formChange"
+      v-model:api="fapi"
+      @emit-event="$emit"
+    ></component>
+    <a-button
+      type="link"
+      class="fc-clock"
+      v-if="addable && (!max || max > this.trs.length)"
+      @click="addRaw(true)"
+      :disabled="disabled"
+      ><i class="fc-icon icon-add-circle" style="font-weight: 700"></i>
+      {{ formCreateInject.t('add') || '添加' }}
+    </a-button>
+  </div>
+</template>
+
+<script>
+import { markRaw, reactive } from 'vue'
+
+export default {
+  name: 'TableForm',
+  emits: ['change', 'add', 'delete', 'update:modelValue'],
+  props: {
+    formCreateInject: Object,
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    columns: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    filterEmptyColumn: {
+      type: Boolean,
+      default: true
+    },
+    deletable: {
+      type: Boolean,
+      default: true
+    },
+    addable: {
+      type: Boolean,
+      default: true
+    },
+    options: {
+      type: Object,
+      default: () =>
+        reactive({
+          submitBtn: false,
+          resetBtn: false
+        })
+    },
+    min: Number,
+    max: Number,
+    disabled: Boolean
+  },
+  watch: {
+    modelValue: {
+      handler() {
+        this.updateTable()
+      },
+      deep: true
+    },
+    'formCreateInject.preview': function (n) {
+      this.emptyRule.children[0].props.colspan =
+        this.columns.length + (n ? 1 : 2)
+    }
+  },
+  data() {
+    return {
+      rule: [],
+      trs: [],
+      fapi: {},
+      Form: markRaw(this.formCreateInject.form.$form()),
+      copyTrs: '',
+      oldValue: '',
+      emptyRule: {
+        type: 'tr',
+        _isEmpty: true,
+        native: true,
+        subRule: true,
+        children: [
+          {
+            type: 'td',
+            style: {
+              textAlign: 'center'
+            },
+            native: true,
+            subRule: true,
+            props: {
+              colspan:
+                this.columns.length + (this.formCreateInject.preview ? 1 : 2)
+            },
+            children: [this.formCreateInject.t('dataEmpty') || '暂无数据']
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    formChange() {
+      this.updateValue()
+    },
+    updateValue() {
+      const value = this.trs
+        .map((tr, idx) => {
+          return {
+            ...(this.modelValue[idx] || {}),
+            ...this.fapi.getChildrenFormData(tr)
+          }
+        })
+        .filter((v) => {
+          if (!this.filterEmptyColumn) {
+            return true
+          }
+          if (v === undefined || v === null) {
+            return false
+          }
+          let flag = false
+          Object.keys(v).forEach((k) => {
+            flag = flag || (v[k] !== undefined && v[k] !== '' && v[k] !== null)
+          })
+          return flag
+        })
+      const str = JSON.stringify(value)
+      if (str !== this.oldValue) {
+        this.oldValue = str
+        this.$emit('update:modelValue', value)
+        this.$emit('change', value)
+      }
+    },
+    setRawData(idx, formData) {
+      const raw = this.trs[idx]
+      this.fapi.setChildrenFormData(raw, formData, true)
+    },
+    updateTable() {
+      const str = JSON.stringify(this.modelValue)
+      if (this.oldValue === str) {
+        return
+      }
+      this.oldValue = str
+      this.trs = this.trs.splice(0, this.modelValue.length)
+      if (!this.modelValue.length) {
+        this.addEmpty()
+      } else {
+        this.clearEmpty()
+      }
+      this.modelValue.forEach((data, idx) => {
+        if (!this.trs[idx]) {
+          this.addRaw()
+        }
+        this.setRawData(idx, data || {})
+      })
+      this.rule[0].children[1].children = this.trs
+    },
+    addEmpty() {
+      if (this.trs.length) {
+        this.trs.splice(0, this.trs.length)
+      }
+      this.trs.push(this.emptyRule)
+    },
+    clearEmpty() {
+      if (this.trs[0] && this.trs[0]._isEmpty) {
+        this.trs.splice(0, 1)
+      }
+    },
+    delRaw(idx) {
+      if (
+        this.disabled ||
+        !this.deletable ||
+        (this.min > 0 && this.trs.length <= this.min)
+      ) {
+        return
+      }
+      this.trs.splice(idx, 1)
+      this.updateValue()
+      if (this.trs.length) {
+        this.trs.forEach((tr) => this.updateRaw(tr))
+      } else {
+        this.addEmpty()
+      }
+      this.$emit('delete', idx)
+    },
+    addRaw(flag) {
+      if (flag && this.disabled) {
+        return
+      }
+      const tr = this.formCreateInject.form.parseJson(this.copyTrs)[0]
+      if (this.trs.length === 1 && this.trs[0]._isEmpty) {
+        this.trs.splice(0, 1)
+      }
+      this.trs.push(tr)
+      this.updateRaw(tr)
+      if (flag) {
+        this.$emit('add', this.trs.length)
+        this.updateValue()
+      }
+    },
+    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)
+      }
+    },
+    loadRule() {
+      const header = [
+        {
+          type: 'th',
+          native: true,
+          class: '_fc-tf-head-idx',
+          props: {
+            innerText: '#'
+          }
+        }
+      ]
+      let body = [
+        {
+          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'
+          },
+          class: column.required ? '_fc-tf-head-required' : '',
+          props: {
+            innerText: column.label || ''
+          }
+        })
+        body.push({
+          type: 'td',
+          native: true,
+          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: {}
+          }
+        ]
+      })
+      this.copyTrs = this.formCreateInject.form.toJson([
+        {
+          type: 'tr',
+          native: true,
+          subRule: true,
+          children: body
+        }
+      ])
+      this.rule = [
+        {
+          type: 'table',
+          native: true,
+          class: '_fc-tf-table',
+          props: {
+            border: '1',
+            cellspacing: '0',
+            cellpadding: '0'
+          },
+          children: [
+            {
+              type: 'thead',
+              native: true,
+              children: [
+                {
+                  type: 'tr',
+                  native: true,
+                  children: header
+                }
+              ]
+            },
+            {
+              type: 'tbody',
+              native: true,
+              children: this.trs
+            }
+          ]
+        }
+      ]
+    }
+  },
+  created() {
+    this.loadRule()
+  },
+  mounted() {
+    this.updateTable()
+  }
+}
+</script>

package/src/components/tableForm/TableFormColumnView.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="_fd-tf-col" :style="colStyle">
+    <div class="_fd-tf-title" :style="{ textAlign: align || 'center' }">
+      <span v-if="required" class="_fd-tf-required">*</span>{{ label || '' }}
+    </div>
+    <div class="_fd-tf-con">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import is from '@form-create/utils/lib/type'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'TableFormColumnView',
+  props: {
+    label: String,
+    align: String,
+    width: [Number, String],
+    color: String,
+    required: Boolean
+  },
+  computed: {
+    colStyle() {
+      const w = this.width
+      const style = {
+        width: is.Number(w) ? `${w}px` : !w || w === 'auto' ? '180px' : w
+      }
+      if (this.color) {
+        style.color = this.color
+      }
+      return style
+    }
+  },
+  data() {
+    return {}
+  }
+})
+</script>

package/src/components/tableForm/TableFormView.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="_fd-table-form">
+    <div class="_fd-tf-wrap" v-if="$slots.default">
+      <slot></slot>
+    </div>
+    <div class="_fc-child-empty" v-else></div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'TableFormView',
+  data() {
+    return {}
+  }
+})
+</script>

package/src/core/index.js

@@ -5,6 +5,7 @@ import manager from './manager'
 import FormCreateFactory from '@longhongguo/form-create-core/src/index'
 import makers from './maker'
 import '../style/index.css'
+import '../style/icon.css'
 import extendApi from './api'
 import modelFields from './modelFields'
 import required from './provider'