cloud-web-corejs 1.0.0

package/src/components/xform/form-render/container-item/tab-item.vue

@@ -0,0 +1,88 @@
+<template>
+  <container-item-wrapper :widget="widget" :class="widget.options.isFullscreen ? 'full-height':''">
+    <div :key="widget.id" class="tab-container" v-show="!widget.options.hidden">
+      <el-tabs v-model="activeTabName" :type="widget.displayType" :ref="widget.id" :class="[customClass,widget.options.tabClass]"  :style="{'height': widget.options.isFullscreen ? '' : widget.options.height}">
+        <el-tab-pane v-for="(tab, index) in visibleTabs" :key="index" :label="getI18nLabel(tab.options.label)" :disabled="tab.options.disabled" :name="tab.options.name">
+          <template v-for="(subWidget, swIdx) in tab.widgetList">
+            <template v-if="'container' === subWidget.category">
+              <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="tab.widgetList" :index-of-parent-list="swIdx" :parent-widget="widget">
+                <!-- 递归传递插槽！！！ -->
+                <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+                  <slot :name="slot" v-bind="scope" />
+                </template>
+              </component>
+            </template>
+            <template v-else>
+              <component :is="subWidget.type + '-widget'" :field="subWidget" :key="swIdx" :parent-list="tab.widgetList" :index-of-parent-list="swIdx" :parent-widget="widget">
+                <!-- 递归传递插槽！！！ -->
+                <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+                  <slot :name="slot" v-bind="scope" />
+                </template>
+              </component>
+            </template>
+          </template>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </container-item-wrapper>
+</template>
+
+<script>
+import emitter from '../../../../components/xform/utils/emitter';
+import i18n from '../../../../components/xform/utils/i18n';
+import refMixin from '../../../../components/xform/form-render/refMixin';
+import ContainerItemWrapper from './container-item-wrapper';
+import containerItemMixin from './containerItemMixin';
+import FieldComponents from '../../../../components/xform/form-designer/form-widget/field-widget/index';
+
+export default {
+  name: 'tab-item',
+  componentName: 'ContainerItem',
+  mixins: [emitter, i18n, refMixin, containerItemMixin],
+  components: {
+    ContainerItemWrapper,
+    ...FieldComponents
+  },
+  props: {
+    widget: Object
+  },
+  inject: ['refList', 'sfRefList', 'globalModel'],
+  data() {
+    return {
+      activeTabName: ''
+    };
+  },
+  computed: {
+    visibleTabs() {
+      return this.widget.tabs.filter(tp => {
+        return !tp.options.hidden;
+      });
+    }
+  },
+  created() {
+    this.initRefList();
+  },
+  mounted() {
+    this.initActiveTab();
+  },
+  beforeDestroy() {
+    this.unregisterFromRefList();
+  },
+  methods: {
+    initActiveTab() {
+      if (this.widget.type === 'tab' && this.widget.tabs.length > 0) {
+        let activePanes = this.widget.tabs.filter(tp => {
+          return tp.options.active === true;
+        });
+        if (activePanes.length > 0) {
+          this.activeTabName = activePanes[0].options.name;
+        } else {
+          this.activeTabName = this.widget.tabs[0].options.name;
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/xform/form-render/container-item/table-cell-item.vue

@@ -0,0 +1,69 @@
+<template>
+  <td class="table-cell" :class="[customClass,tdClass,'w'+widget.options.colspan]"
+      :colspan="widget.options.colspan || 1" :rowspan="widget.options.rowspan || 1"
+      :style="{width: widget.options.cellWidth + ' !important' || '', height: widget.options.cellHeight + ' !important' || ''}">
+    <template v-for="(subWidget, swIdx) in widget.widgetList">
+      <template v-if="'container' === subWidget.category">
+        <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
+                        :index-of-parent-list="swIdx" :parent-widget="widget">
+          <!-- 递归传递插槽！！！ -->
+          <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+            <slot :name="slot" v-bind="scope"/>
+          </template>
+        </component>
+      </template>
+      <template v-else>
+        <component :is="subWidget.type + '-widget'" :field="subWidget" :key="swIdx" :parent-list="widget.widgetList"
+                      :index-of-parent-list="swIdx" :parent-widget="widget">
+          <!-- 递归传递插槽！！！ -->
+          <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+            <slot :name="slot" v-bind="scope"/>
+          </template>
+        </component>
+      </template>
+    </template>
+  </td>
+</template>
+
+<script>
+  import emitter from '../../../../components/xform/utils/emitter'
+  import i18n from "../../../../components/xform/utils/i18n"
+  import refMixin from "../../../../components/xform/form-render/refMixin"
+  import FieldComponents from '../../../../components/xform/form-designer/form-widget/field-widget/index'
+
+  export default {
+    name: "TableCellItem",
+    componentName: "ContainerItem",
+    mixins: [emitter, i18n, refMixin],
+    components: {
+      ...FieldComponents,
+    },
+    props: {
+      widget: Object,
+
+      rowIndex: Number,
+      colIndex: Number,
+    },
+    inject: ['refList', 'globalModel'],
+    computed: {
+      customClass() {
+        return this.widget.options.customClass || ''
+      },
+      tdClass(){
+        return (this.colIndex+1)%2 ==0 ? "":"odd"
+      },
+
+    },
+    created() {
+      /* tableCell不生成组件引用，故无须调用initRefList！！ */
+      //this.initRefList()
+    },
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/src/components/xform/form-render/container-item/table-column-item.vue

@@ -0,0 +1,84 @@
+<!--
+/**
+ * author: vformAdmin
+ * email: vdpadmin@163.com
+ * website: https://www.vform666.com
+ * date: 2021.08.18
+ * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
+ */
+-->
+
+<template>
+  <div>
+    <template v-for="(subWidget, swIdx) in widget.widgetList">
+      <template v-if="'container' === subWidget.category">
+        <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
+                   :index-of-parent-list="swIdx" :parent-widget="widget">
+          <!-- 递归传递插槽！！！ -->
+          <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+            <slot :name="slot" v-bind="scope"/>
+          </template>
+        </component>
+      </template>
+      <template v-else>
+        <component :is="subWidget.type + '-widget'" :field="subWidget" :key="swIdx" :parent-list="widget.widgetList"
+                   :index-of-parent-list="swIdx" :parent-widget="widget">
+          <!-- 递归传递插槽！！！ -->
+          <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+            <slot :name="slot" v-bind="scope"/>
+          </template>
+        </component>
+      </template>
+    </template>
+  </div>
+
+</template>
+
+<script>
+import emitter from '../../../../components/xform/utils/emitter'
+import i18n from "../../../../components/xform/utils/i18n"
+import refMixin from "../../../../components/xform/form-render/refMixin"
+import containerItemMixin from "./containerItemMixin"
+import FieldComponents from '../../../../components/xform/form-designer/form-widget/field-widget/index'
+import FormItemWrapper from "../../../../components/xform/form-designer/form-widget/field-widget/form-item-wrapper.vue";
+
+
+export default {
+  name: 'tableColumnItem',
+  componentName: 'ContainerItem',
+  mixins: [emitter, i18n, refMixin, containerItemMixin],
+  inject: ['refList'],
+  components: {
+    FormItemWrapper,
+    ...FieldComponents
+  },
+  props: {
+    widget: Object,
+    parentWidget: Object,
+    parentList: Array,
+    indexOfParentList: Number,
+    subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+      type: Number,
+      default: -1
+    }
+  },
+  data() {
+    return {
+      rules: [],
+    }
+  },
+  computed: {
+    customClass() {
+      return this.widget.options.customClass || '';
+    }
+  },
+  created() {
+    this.initRefList();
+  },
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/src/components/xform/form-render/container-item/table-item.vue

@@ -0,0 +1,73 @@
+<template>
+  <container-item-wrapper :widget="widget">
+
+    <div :key="widget.id" class="table-container"
+         v-show="!widget.options.hidden">
+      <table :ref="widget.id" class="table-layout table-d-box" :class="[customClass,widget.options.styleTableClass]" :style="tableStyle">
+        <tbody>
+        <tr v-for="(row, rowIdx) in widget.rows" :key="row.id">
+          <template v-for="(colWidget, colIdx) in row.cols">
+            <table-cell-item v-if="!colWidget.merged" :widget="colWidget" :key="colIdx" :parent-list="widget.cols"
+                             :row-index="rowIdx" :col-index="colIdx" :parent-widget="widget">
+              <!-- 递归传递插槽！！！ -->
+              <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+                <slot :name="slot" v-bind="scope"/>
+              </template>
+            </table-cell-item>
+          </template>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+
+  </container-item-wrapper>
+</template>
+
+<script>
+import emitter from '../../../../components/xform/utils/emitter'
+import i18n from "../../../../components/xform/utils/i18n"
+import refMixin from "../../../../components/xform/form-render/refMixin"
+import ContainerItemWrapper from './container-item-wrapper'
+import TableCellItem from './table-cell-item'
+import containerItemMixin from "./containerItemMixin";
+
+export default {
+  name: "table-item",
+  componentName: 'ContainerItem',
+  mixins: [emitter, i18n, refMixin, containerItemMixin],
+  components: {
+    ContainerItemWrapper,
+    TableCellItem,
+  },
+  props: {
+    widget: Object,
+  },
+  inject: ['refList', 'sfRefList', 'globalModel'],
+  computed: {
+    tableStyle() {
+      return this.widget.options.fullWidth ? 'width:100%;' : '';
+    }
+  },
+  created() {
+    this.initRefList()
+  },
+  mounted() {
+
+  },
+  beforeDestroy() {
+    this.unregisterFromRefList()
+  },
+  methods: {},
+}
+</script>
+
+<style lang="scss" scoped>
+div.table-container {
+  table.table-layout {
+    width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+  }
+}
+
+</style>

package/src/components/xform/form-render/container-item/table2-cell-item.vue

@@ -0,0 +1,107 @@
+<template>
+  <td class="table-cell" :class="[customClass,tdClass,'w'+widget.options.colspan]"
+      :colspan="widget.options.colspan || 1" :rowspan="widget.options.rowspan || 1"
+      :style="{width: widget.options.cellWidth + ' !important' || '', height: widget.options.cellHeight + ' !important' || ''}">
+    <template v-for="(subWidget, swIdx) in widget.widgetList">
+      <template v-if="'container' === subWidget.category">
+        <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
+                   :index-of-parent-list="swIdx" :parent-widget="widget" :tableParam="tableParam">
+          <!-- 递归传递插槽！！！ -->
+          <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+            <slot :name="slot" v-bind="scope"/>
+          </template>
+        </component>
+      </template>
+      <template v-else>
+        <component :is="subWidget.type + '-widget'" :field="subWidget" :key="swIdx" :parent-list="widget.widgetList"
+                   :index-of-parent-list="swIdx" :parent-widget="widget" :tableParam="tableParam"
+                   :formItemProp="getProp(subWidget)">
+          <!-- 递归传递插槽！！！ -->
+          <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+            <slot :name="slot" v-bind="scope"/>
+          </template>
+        </component>
+      </template>
+    </template>
+  </td>
+</template>
+
+<script>
+import emitter from '../../../../components/xform/utils/emitter'
+import i18n from "../../../../components/xform/utils/i18n"
+import refMixin from "../../../../components/xform/form-render/refMixin"
+import FieldComponents from '../../../../components/xform/form-designer/form-widget/field-widget/index'
+
+export default {
+  name: "Table2CellItem",
+  componentName: "ContainerItem",
+  mixins: [emitter, i18n, refMixin],
+  components: {
+    ...FieldComponents,
+  },
+  props: {
+    widget: Object,
+
+    rowIndex: Number,
+    colIndex: Number,
+    parentWidget: Object,
+    parentTarget: Object,
+    row: Object
+  },
+  inject: ['refList', 'globalModel', 'getRows'],
+  computed: {
+    customClass() {
+      return this.widget.options.customClass || ''
+    },
+    tdClass() {
+      return (this.colIndex + 1) % 2 == 0 ? "" : "odd"
+    },
+    formModel: {
+      cache: !1,
+      get: function () {
+        return this.globalModel.formModel;
+      }
+    },
+    formDataId() {
+      let formRef = this.getFormRef();
+      return formRef.dataId;
+    },
+    tableParam() {
+      return {
+        rowIndex: this.widget.options.rowIndex,
+        row: this.row
+      }
+    }
+
+  },
+  created() {
+    /* tableCell不生成组件引用，故无须调用initRefList！！ */
+    //this.initRefList()
+
+    this.init();
+  },
+  methods: {
+    init() {
+      if (this.widget.widgetList.length) {
+        let formRef = this.getFormRef();
+        let keyName = formRef.getFieldKeyName(this.widget.widgetList[0]);
+        this.$watch(`row.${keyName}`, (newVal, oldVal) => {
+          let rows = this.parentTarget.rows;
+          rows.find(row => row.f_key == keyName).f_field_value = newVal
+        });
+      }
+    },
+    getProp(subWidget) {
+      let rowIndex = this.widget.options.rowIndex
+      let formRef = this.getFormRef();
+      let keyName1 = formRef.getFieldKeyName(this.parentWidget)
+      let name = `${keyName1}.${rowIndex}.f_field_value`
+      return name
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/src/components/xform/form-render/container-item/table2-item.vue

@@ -0,0 +1,229 @@
+<template>
+  <container-item-wrapper :widget="widget">
+
+    <div :key="widget.id" class="table-container"
+         v-show="!widget.options.hidden">
+      <table :ref="widget.id" class="table-layout table-d-box" :class="[customClass,widget.options.styleTableClass]"
+             :style="tableStyle">
+        <tbody>
+        <tr v-for="(row, rowIdx) in widget.rows" :key="row.id">
+          <template v-for="(colWidget, colIdx) in row.cols">
+            <table-cell-item v-if="!colWidget.merged" :widget="colWidget" :key="colIdx" :parent-list="widget.cols"
+                             :row-index="rowIdx" :col-index="colIdx" :parent-widget="widget" :parent-target="_self"
+                             :row.sync="rowData">
+              <!-- 递归传递插槽！！！ -->
+              <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+                <slot :name="slot" v-bind="scope"/>
+              </template>
+            </table-cell-item>
+          </template>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+
+  </container-item-wrapper>
+</template>
+
+<script>
+import emitter from '../../../../components/xform/utils/emitter'
+import i18n from "../../../../components/xform/utils/i18n"
+import refMixin from "../../../../components/xform/form-render/refMixin"
+import ContainerItemWrapper from './container-item-wrapper'
+import TableCellItem from './table2-cell-item'
+import containerItemMixin from "./containerItemMixin";
+import {generateId} from "../../../../components/xform/utils/util"
+
+export default {
+  name: "table2-item",
+  componentName: 'ContainerItem',
+  mixins: [emitter, i18n, refMixin, containerItemMixin],
+  components: {
+    ContainerItemWrapper,
+    TableCellItem,
+  },
+  props: {
+    widget: Object,
+  },
+  inject: ['refList', 'sfRefList', 'globalModel'],
+  provide: {
+    getRows: () => this.rows
+  },
+  computed: {
+    tableStyle() {
+      return this.widget.options.fullWidth ? 'width:100%;' : '';
+    },
+    formModel: {
+      cache: !1,
+      get: function () {
+        return this.globalModel.formModel;
+      }
+    },
+    formDataId() {
+      let formRef = this.getFormRef();
+      return formRef.dataId;
+    }
+  },
+  created() {
+    this.initRefList()
+    this.handleOnCreated()
+  },
+  mounted() {
+    this.handleOnMounted()
+  },
+  beforeDestroy() {
+    this.unregisterFromRefList()
+  },
+  data() {
+    return {
+      rows: [],
+      rowData: {},
+      typeMap: {
+        0: 'input',
+        1: 'textarea',
+        2: 'date',
+        3: 'number',
+      }
+    }
+  },
+  watch: {},
+  methods: {
+    getRowData() {
+      return this.rowData;
+    },
+    getValue() {
+      return this.rows;
+    },
+    getType(f_field_type) {
+      return this.typeMap[f_field_type]
+    },
+    setValue(items = []) {
+
+
+      let dataMap = {};
+      let widgetRows = []
+      let currentSpan = 0;
+      let index = -1;
+
+      let formRef = this.getFormRef();
+      items.forEach((item, rowIndex) => {
+        if (item.f_field_value === undefined) {
+          item.f_field_value = null;
+        }
+        let type = this.getType(item.f_field_type);
+        let tableCell = this.$baseLodash.cloneDeep(formRef.getContainerByType("table-cell"));
+        tableCell.options.rowIndex = rowIndex;
+        let colspan = 1;
+        let tc = 0;
+        if (type == "textarea") {
+          if (currentSpan && currentSpan < 4) {
+            tc = 4 - currentSpan
+          }
+          colspan = 4
+          tableCell.options.colspan = 4
+        }
+
+        let widget = this.$baseLodash.cloneDeep(formRef.getFieldWidgetByType(type));
+        let options = widget.options;
+        options.keyNameEnabled = true;
+        options.keyName = item.f_key;
+        options.label = item.f_field_name;
+        options.required = item.f_is_required;
+
+        tableCell.widgetList.push(widget)
+
+        if (index === -1) {
+          index++
+          widgetRows.push({
+            id: 'table-row-' + generateId(),
+            merged: false,
+            cols: []
+          })
+          currentSpan = colspan;
+        } else if (currentSpan + colspan > 4) {
+          index++
+          widgetRows.push({
+            id: 'table-row-' + generateId(),
+            merged: false,
+            cols: []
+          })
+          currentSpan = colspan;
+        } else {
+          currentSpan = colspan + currentSpan;
+        }
+
+        for (let i = 0; i < tc; i++) {
+          widgetRows[index - 1].cols.push(this.$baseLodash.cloneDeep(formRef.getContainerByType("table-cell")));
+        }
+
+        let cols = widgetRows[index].cols;
+
+
+        cols.push(tableCell);
+
+        dataMap[item.f_key] = item.f_field_value ?? null;
+      })
+
+      this.rows = items;
+      this.$set(this.formModel, this.fieldKeyName, items);
+
+      this.rowData = dataMap;
+      this.widget.rows.length = 0
+      this.widget.rows.push(...widgetRows)
+    },
+    loadDataDefaultHandle() {
+      /*this.init();
+      return*/
+      let dataId = this.formDataId;
+      if (!dataId) return;
+      let reportTemplate = this.getFormRef().reportTemplate;
+      let formCode = reportTemplate.formCode;
+      let formScriptEnabled = this.widget.options.formScriptEnabled || false;
+      let scriptCode = this.widget.options.formScriptCode
+      if (!scriptCode) return;
+      let accessParam = this.handleCustomEvent(this.widget.options.formScriptParam)
+      return this.formHttp({
+        scriptCode: scriptCode,
+        data: {
+          formCode: formCode,
+          formVersion: reportTemplate.formVersion,
+          taBm: this.fieldKeyName,
+          data: {
+            id: dataId,
+            ...accessParam
+          }
+        },
+        success: res => {
+          let rows = res.objx || [];
+          this.setValue(rows)
+        }
+      });
+    },
+    init() {
+      let items = [
+        {f_field_name: "a", f_key: "a", f_field_type: 0, f_is_required: true, f_field_value: '1'},
+        {f_field_name: "b", f_key: "b", f_field_type: 3, f_is_required: true, f_field_value: 2},
+        {f_field_name: "c", f_key: "c", f_field_type: 1, f_is_required: true, f_field_value: "11111"},
+        {f_field_name: "d", f_key: "d", f_field_type: 0, f_is_required: true, f_field_value: '3'},
+        {f_field_name: "e", f_key: "e", f_field_type: 0, f_is_required: true, f_field_value: '4'},
+        {f_field_name: "f", f_key: "f", f_field_type: 0, f_is_required: true, f_field_value: '5'},
+        {f_field_name: "g", f_key: "g", f_field_type: 0, f_is_required: true, f_field_value: '6'},
+      ];
+      let a = 1
+      this.setValue(items);
+
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+div.table-container {
+  table.table-layout {
+    width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+  }
+}
+
+</style>