@kp-ui/lowcode 2.13.2 → 2.14.0-alpha

package/src/components/form-render/container-item/grid-sub-form-item.vue.js

@@ -0,0 +1,319 @@
+import v from "../../../utils/emitter.js";
+import I from "../../../utils/i18n.js";
+import { deepClone as F, generateId as m, traverseFieldWidgetsOfContainer as T } from "../../../utils/util.js";
+import y from "../refMixin.js";
+import A from "./container-item-wrapper.vue.js";
+import M from "./containerItemMixin.js";
+import E from "../../form-designer/form-widget/field-widget/index.js";
+import { TpfConfirm as B } from "../../../hooks/TpfConfirm.js";
+import N from "../../svg-icon/index.vue.js";
+import { resolveComponent as f, createBlock as p, openBlock as n, withCtx as l, withDirectives as S, createElementBlock as u, createElementVNode as r, Fragment as R, renderList as C, normalizeClass as _, createVNode as h, vShow as W, toDisplayString as L, resolveDynamicComponent as O, createCommentVNode as V, createTextVNode as H } from "vue";
+/* empty css                        */
+import j from "../../../../_virtual/_plugin-vue_export-helper.js";
+const x = {
+  name: "grid-sub-form-item",
+  componentName: "ContainerItem",
+  mixins: [v, I, y, M],
+  components: {
+    SvgIcon: N,
+    ContainerItemWrapper: A,
+    ...E
+  },
+  props: {
+    widget: Object
+  },
+  provide() {
+    return {
+      getSubFormFieldFlag: () => !0,
+      getSubFormName: () => this.widget.options.name
+    };
+  },
+  inject: ["refList", "sfRefList", "globalModel", "getReadMode"],
+  data() {
+    return {
+      rowIdData: [],
+      widgetSchemaData: [],
+      actionDisabled: !1,
+      insertDisabled: !1,
+      //是否禁止新增、插入记录
+      deleteDisabled: !1,
+      //是否禁止删除记录
+      fieldWidgetList: []
+    };
+  },
+  computed: {
+    isReadMode() {
+      return this.getReadMode();
+    },
+    actionBtnsClass() {
+      return this.widget.options.actionColumnPosition, "right-action-column";
+    }
+  },
+  created() {
+    this.initRefList(), this.registerSubFormToRefList(), this.initRowIdData(!0), this.initWidgetSchemaData(), this.initEventHandler();
+  },
+  mounted() {
+    this.extractFieldWidgetList(), this.handleSubFormFirstRowAdd();
+  },
+  beforeUnmount() {
+    this.unregisterFromRefList();
+  },
+  methods: {
+    extractFieldWidgetList() {
+      this.fieldWidgetList.splice(0, this.fieldWidgetList.length);
+      const t = (e) => {
+        this.fieldWidgetList.push(e);
+      };
+      T(this.widget, t);
+    },
+    getLabelAlign(t, e) {
+      return e.options.labelAlign || t.options.labelAlign;
+    },
+    registerSubFormToRefList() {
+      this.widget.type === "grid-sub-form" && (this.sfRefList[this.widget.options.name] = this);
+    },
+    initRowIdData(t) {
+      if (this.widget.type === "grid-sub-form") {
+        this.rowIdData.splice(0, this.rowIdData.length);
+        const e = this.formModel[this.widget.options.name];
+        e && e.length > 0 && (e.forEach(() => {
+          this.rowIdData.push("id" + m());
+        }), t && setTimeout(() => {
+          this.handleSubFormRowChange(e);
+        }, 800));
+      }
+    },
+    addToRowIdData() {
+      this.rowIdData.push("id" + m());
+    },
+    insertToRowIdData(t) {
+      this.rowIdData.splice(t, 0, "id" + m());
+    },
+    deleteFromRowIdData(t) {
+      this.rowIdData.splice(t, 1);
+    },
+    getRowIdData() {
+      return this.rowIdData;
+    },
+    getWidgetRefOfSubForm(t, e) {
+      const i = t + "@row" + this.rowIdData[e];
+      return this.getWidgetRef(i);
+    },
+    initWidgetSchemaData() {
+      if (this.widget.type !== "grid-sub-form")
+        return;
+      const t = this.rowIdData.length;
+      if (this.widgetSchemaData.splice(0, this.widgetSchemaData.length), t > 0)
+        for (let e = 0; e < t; e++) {
+          const i = [];
+          this.widget.widgetList.forEach((a) => {
+            i.push(this.cloneSchemaOfWidget(a));
+          }), this.widgetSchemaData.push(i);
+        }
+    },
+    addToWidgetSchemaData(t) {
+      const e = [];
+      this.widget.widgetList.forEach((i) => {
+        e.push(this.cloneSchemaOfWidget(i));
+      }), t === void 0 ? this.widgetSchemaData.push(e) : this.widgetSchemaData.splice(t, 0, e);
+    },
+    deleteFromWidgetSchemaData(t) {
+      this.widgetSchemaData.splice(t, 1);
+    },
+    cloneSchemaOfWidget(t) {
+      const e = F(t);
+      return e.id = t.type + m(), e;
+    },
+    initEventHandler() {
+      this.widget.type === "grid-sub-form" && this.on$("setFormData", (t) => {
+        this.initRowIdData(!1), this.initWidgetSchemaData();
+        const e = t[this.widget.options.name] || [];
+        setTimeout(() => {
+          this.handleSubFormRowChange(e);
+        }, 800);
+      });
+    },
+    handleSubFormFirstRowAdd() {
+      if (this.widget.type === "grid-sub-form" && this.widget.options.showBlankRow && this.rowIdData.length === 1) {
+        const t = this.formModel[this.widget.options.name] || [];
+        this.$nextTick(() => {
+          this.handleSubFormRowAdd(t, this.rowIdData[0]), this.handleSubFormRowChange(t);
+        });
+      }
+    },
+    addSubFormRow() {
+      const t = {};
+      this.fieldWidgetList.forEach((i) => {
+        i.formItemFlag && (t[i.options.name] = i.options.defaultValue);
+      });
+      const e = this.formModel[this.widget.options.name] || [];
+      e.push(t), this.addToRowIdData(), this.addToWidgetSchemaData(), this.$nextTick(() => {
+        this.handleSubFormRowAdd(
+          e,
+          this.rowIdData[e.length - 1]
+        ), this.handleSubFormRowChange(e);
+      });
+    },
+    insertSubFormRow(t) {
+      const e = {};
+      this.fieldWidgetList.forEach((a) => {
+        a.formItemFlag && (e[a.options.name] = a.options.defaultValue);
+      });
+      const i = this.formModel[this.widget.options.name] || [];
+      i.splice(t, 0, e), this.insertToRowIdData(t), this.addToWidgetSchemaData(t), this.$nextTick(() => {
+        this.handleSubFormRowInsert(i, this.rowIdData[t]), this.handleSubFormRowChange(i);
+      });
+    },
+    deleteSubFormRow(t) {
+      B({
+        type: "confirm",
+        content: this.i18nt("render.hint.deleteSubFormRow") + "?",
+        title: this.i18nt("render.hint.prompt"),
+        okText: this.i18nt("render.hint.confirm"),
+        cancelText: this.i18nt("render.hint.cancel")
+      }).then(() => {
+        const e = this.formModel[this.widget.options.name] || [], i = F(e[t]);
+        e.splice(t, 1), this.deleteFromRowIdData(t), this.deleteFromWidgetSchemaData(t), this.$nextTick(() => {
+          this.handleSubFormRowDelete(e, i), this.handleSubFormRowChange(e);
+        });
+      }).catch(() => {
+      });
+    },
+    handleSubFormRowChange(t) {
+      this.widget.options.onSubFormRowChange && new Function(
+        "subFormData",
+        this.widget.options.onSubFormRowChange
+      ).call(this, t);
+    },
+    handleSubFormRowAdd(t, e) {
+      this.widget.options.onSubFormRowAdd && new Function(
+        "subFormData",
+        "newRowId",
+        this.widget.options.onSubFormRowAdd
+      ).call(this, t, e);
+    },
+    handleSubFormRowInsert(t, e) {
+      this.widget.options.onSubFormRowInsert && new Function(
+        "subFormData",
+        "newRowId",
+        this.widget.options.onSubFormRowInsert
+      ).call(this, t, e);
+    },
+    handleSubFormRowDelete(t, e) {
+      this.widget.options.onSubFormRowDelete && new Function(
+        "subFormData",
+        "deletedDataRow",
+        this.widget.options.onSubFormRowDelete
+      ).call(this, t, e);
+    },
+    setDisabled(t) {
+      t ? this.disableGridSubForm() : this.enableGridSubForm();
+    },
+    /**
+     * 设置单行子表单是否禁止新增、插入记录
+     * @param flag
+     */
+    setInsertDisabled(t) {
+      this.insertDisabled = t;
+    },
+    /**
+     * 设置单行子表单是否禁止删除记录
+     * @param flag
+     */
+    setDeleteDisabled(t) {
+      this.deleteDisabled = t;
+    }
+  }
+}, z = { class: "row-no-column" }, G = { class: "row-number-span" }, P = { class: "grid-sub-form-data-row" }, U = { class: "header-row" };
+function q(t, e, i, a, o, s) {
+  const w = f("svg-icon"), g = f("a-button"), k = f("container-item-wrapper");
+  return n(), p(k, { widget: i.widget }, {
+    default: l(() => [
+      S((n(), u("div", {
+        key: i.widget.id,
+        class: "sub-form-container"
+      }, [
+        (n(!0), u(R, null, C(o.rowIdData, (D, d) => (n(), u("div", {
+          class: "sub-form-row",
+          key: D
+        }, [
+          r("div", {
+            class: _(["sub-form-action-column hide-label", s.actionBtnsClass])
+          }, [
+            S(r("div", {
+              class: _(["action-button-column", s.actionBtnsClass])
+            }, [
+              h(g, {
+                type: "link",
+                title: t.i18nt("render.hint.insertSubFormRow"),
+                disabled: o.actionDisabled || o.deleteDisabled,
+                onClick: (b) => s.insertSubFormRow(d)
+              }, {
+                icon: l(() => [
+                  h(w, { "icon-class": "el-plus" })
+                ]),
+                _: 2
+              }, 1032, ["title", "disabled", "onClick"]),
+              h(g, {
+                type: "link",
+                title: t.i18nt("render.hint.deleteSubFormRow"),
+                disabled: o.actionDisabled || o.deleteDisabled,
+                onClick: (b) => s.deleteSubFormRow(d)
+              }, {
+                icon: l(() => [
+                  h(w, { "icon-class": "el-delete" })
+                ]),
+                _: 2
+              }, 1032, ["title", "disabled", "onClick"])
+            ], 2), [
+              [W, !s.isReadMode]
+            ])
+          ], 2),
+          r("div", z, [
+            r("span", G, "#" + L(d + 1), 1)
+          ]),
+          r("div", P, [
+            (n(!0), u(R, null, C(i.widget.widgetList, (b, c) => (n(), p(O(t.getComponentByContainer(b)), {
+              key: o.widgetSchemaData[d][c].id,
+              widget: o.widgetSchemaData[d][c],
+              "parent-list": i.widget.widgetList,
+              "index-of-parent-list": c,
+              "parent-widget": i.widget,
+              "sub-form-row-id": D,
+              "sub-form-row-index": d,
+              "sub-form-col-index": c
+            }, null, 8, ["widget", "parent-list", "index-of-parent-list", "parent-widget", "sub-form-row-id", "sub-form-row-index", "sub-form-col-index"]))), 128))
+          ])
+        ]))), 128)),
+        r("div", U, [
+          s.isReadMode ? V("", !0) : (n(), p(g, {
+            key: 0,
+            block: "",
+            disabled: o.actionDisabled || o.insertDisabled,
+            shape: "round",
+            type: "dashed",
+            size: "small",
+            class: "action-button",
+            onClick: s.addSubFormRow,
+            title: t.i18nt("render.hint.subFormAddActionHint")
+          }, {
+            icon: l(() => [
+              h(w, { "icon-class": "el-plus" })
+            ]),
+            default: l(() => [
+              H(" " + L(t.i18nt("render.hint.subFormAddAction")), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled", "onClick", "title"]))
+        ])
+      ])), [
+        [W, !i.widget.options.hidden]
+      ])
+    ]),
+    _: 1
+  }, 8, ["widget"]);
+}
+const nt = /* @__PURE__ */ j(x, [["render", q], ["__scopeId", "data-v-b0ed629c"]]);
+export {
+  nt as default
+};

package/src/components/form-render/container-item/index.js

@@ -0,0 +1,24 @@
+import * as a from "./container-item-wrapper.vue.js";
+import * as o from "./data-table-item.vue.js";
+import * as i from "./grid-col-item.vue.js";
+import * as s from "./grid-item.vue.js";
+import * as f from "./grid-sub-form-item.vue.js";
+import * as l from "./sub-form-item.vue.js";
+import * as p from "./tab-item.vue.js";
+import * as u from "./table-cell-item.vue.js";
+import * as n from "./table-item.vue.js";
+import * as v from "./vf-collapse-item.vue.js";
+import * as d from "./vf-dialog-item.vue.js";
+import * as b from "./vf-drawer-item.vue.js";
+const e = /* @__PURE__ */ Object.assign({ "./container-item-wrapper.vue": a, "./data-table-item.vue": o, "./grid-col-item.vue": i, "./grid-item.vue": s, "./grid-sub-form-item.vue": f, "./sub-form-item.vue": l, "./tab-item.vue": p, "./table-cell-item.vue": u, "./table-item.vue": n, "./vf-collapse-item.vue": v, "./vf-dialog-item.vue": d, "./vf-drawer-item.vue": b }), I = {
+  install(m) {
+    for (const t in e) {
+      const r = e[t].default.name;
+      m.component(r, e[t].default);
+    }
+  }
+};
+export {
+  e as ContainerWidgetMap,
+  I as default
+};