form-designer-xinyi/dist/formLogic-UwFOMytK.js

基于vue3的设计器,可视化开发页面表单

import { defineComponent as $, inject as S, computed as w, openBlock as m, createElementBlock as g, createVNode as d, unref as e, withCtx as u, createElementVNode as c, normalizeStyle as F, createBlock as y, createCommentVNode as D, createTextVNode as k, Fragment as U, renderList as N, toDisplayString as L, withModifiers as q, watch as J, pushScopeId as T, popScopeId as z, ref as E } from "vue";
import { Space as M, Select as I, Checkbox as W, Dropdown as G, Menu as H, MenuItem as K, Switch as Q, Button as C, Drawer as X, Card as Y, Divider as R, Badge as Z } from "ant-design-vue";
import { e as j, _ as B } from "./index-CixHJfR9.js";
import { f as P, j as ee } from "./revoke-iScTU0eW.js";
import { _ as le } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const oe = { class: "mb-2 w-full" }, te = { class: "flex items-center w-390px" }, ne = /* @__PURE__ */ c("span", { class: "iconfont epic-icon-shanchu1" }, null, -1), ae = [
  ne
], se = /* @__PURE__ */ $({
  __name: "actionItem",
  props: {
    modelValue: {},
    fieldOptions: {},
    triggerOptions: {}
  },
  emits: ["update:modelValue", "delete"],
  setup(f, { emit: V }) {
    const x = S("designer"), v = V, p = f, l = j(p, "modelValue", v), b = w(() => x.state.checkedNode);
    console.log("checkedNode", b);
    const s = w(() => P(
      [b.value],
      (a) => a.id && a.id === l.value.field,
      !0
    ));
    function i() {
      v("delete");
    }
    return (h, a) => (m(), g("div", oe, [
      d(e(M), null, {
        default: u(() => [
          d(e(I), {
            class: "w-150px",
            value: e(l).trigger,
            "onUpdate:value": a[0] || (a[0] = (o) => e(l).trigger = o),
            options: p.triggerOptions,
            placeholder: "选择动作"
          }, null, 8, ["value", "options"]),
          c("div", te, [
            d(e(I), {
              style: F({ width: e(l).trigger === "setValue" && e(l).field ? "210px" : "100%" }),
              value: e(l).field,
              "onUpdate:value": a[1] || (a[1] = (o) => e(l).field = o),
              options: p.fieldOptions,
              placeholder: "选择字段",
              onChange: a[2] || (a[2] = (o) => e(l).value = void 0)
            }, null, 8, ["style", "value", "options"]),
            e(l).trigger === "setValue" && e(l).field ? (m(), y(e(B), {
              key: e(l).field,
              class: "w-240px ml-2",
              modelValue: e(l).value,
              "onUpdate:modelValue": a[3] || (a[3] = (o) => e(l).value = o),
              "component-schema": {
                ...s.value,
                noFormItem: !0,
                componentProps: { ...s.value.componentProps, defaultValue: void 0, disabled: void 0, hidden: void 0 }
              }
            }, null, 8, ["modelValue", "component-schema"])) : D("", !0),
            e(l).trigger === "addValue" && e(l).field && (e(l).field.split("_")[0] == "checkbox" || e(l).field.split("_")[0] == "xyTextArea" || e(l).field.split("_")[0] == "xyInput") ? (m(), y(e(B), {
              key: e(l).field,
              class: "w-240px ml-2",
              modelValue: e(l).value,
              "onUpdate:modelValue": a[4] || (a[4] = (o) => e(l).value = o),
              "component-schema": {
                ...s.value,
                noFormItem: !0,
                componentProps: { ...s.value.componentProps, defaultValue: void 0, disabled: void 0, hidden: void 0 }
              }
            }, null, 8, ["modelValue", "component-schema"])) : D("", !0),
            d(e(W), {
              checked: e(l).reverseExecute,
              "onUpdate:checked": a[5] || (a[5] = (o) => e(l).reverseExecute = o),
              class: "ml-2 w-120px"
            }, {
              default: u(() => [
                k("否则不")
              ]),
              _: 1
            }, 8, ["checked"])
          ]),
          c("div", {
            class: "w-28px h-28px cursor-pointer bg-red-100 text-red-400 hover:bg-red-400 border-solid border-1px border-red-300 rounded-full flex justify-center items-center hover:text-white",
            onClick: i
          }, ae)
        ]),
        _: 1
      })
    ]));
  }
}), de = /* @__PURE__ */ c("span", { class: "iconfont epic-icon-tianjia" }, null, -1), ie = /* @__PURE__ */ $({
  __name: "actionEdit",
  props: {
    modelValue: {}
  },
  emits: ["update:modelValue"],
  setup(f, { emit: V }) {
    const x = S("designer"), v = w(() => x.state.checkedNode), p = w(() => {
      const o = P(
        [v.value],
        (t) => {
          var n, r;
          return t.type === "form" && (((n = t.componentProps) == null ? void 0 : n.name) ?? t.name === ((r = v.value) == null ? void 0 : r.componentProps.name));
        },
        !0
      );
      return P(
        (o == null ? void 0 : o.children) ?? [],
        (t) => !!t.input || ["text", "downLoad", "card"].includes(t.type),
        !1,
        (t) => t.type !== "subform"
      ).map((t) => {
        var n;
        return {
          label: ["text"].includes(t.type) ? (n = t.componentProps) == null ? void 0 : n.defaultValue : t.label,
          value: t.id
        };
      }).reverse();
    }), l = [
      { label: "隐藏", value: "hide" },
      { label: "显示", value: "show" },
      { label: "必填", value: "required" },
      { label: "非必填", value: "notRequired" },
      { label: "只读", value: "readonly" },
      { label: "可写", value: "readWrite" },
      { label: "禁用", value: "disabled" },
      { label: "启用", value: "enabled" },
      { label: "设置值", value: "setValue" },
      { label: "追加值", value: "addValue" }
    ], i = j(f, "modelValue", V);
    function h(o) {
      i.value.push({
        trigger: o
      });
    }
    function a(o) {
      i.value.splice(o, 1);
    }
    return (o, _) => (m(), g("div", null, [
      (m(!0), g(U, null, N(e(i), (t, n) => (m(), y(se, {
        modelValue: e(i)[n],
        "onUpdate:modelValue": (r) => e(i)[n] = r,
        key: n,
        fieldOptions: p.value,
        triggerOptions: l,
        onDelete: (r) => a(n)
      }, null, 8, ["modelValue", "onUpdate:modelValue", "fieldOptions", "onDelete"]))), 128)),
      d(e(G), null, {
        overlay: u(() => [
          d(e(H), null, {
            default: u(() => [
              (m(), g(U, null, N(l, (t) => d(e(K), {
                onClick: (n) => h(t.value),
                key: t.value
              }, {
                default: u(() => [
                  k(L(t.label), 1)
                ]),
                _: 2
              }, 1032, ["onClick"])), 64))
            ]),
            _: 1
          })
        ]),
        default: u(() => [
          c("span", {
            class: "ant-dropdown-link cursor-pointer text-blue-500",
            onClick: _[0] || (_[0] = q(() => {
            }, ["prevent"]))
          }, [
            de,
            k(" 添加动作 ")
          ])
        ]),
        _: 1
      })
    ]));
  }
}), ue = { class: "mb-4" }, re = /* @__PURE__ */ c("span", { class: "iconfont epic-icon-shanchu1" }, null, -1), ce = [
  re
], pe = /* @__PURE__ */ $({
  __name: "conditionItem",
  props: {
    modelValue: {},
    fieldOptions: {}
  },
  emits: ["update:modelValue", "delete"],
  setup(f, { emit: V }) {
    const x = S("designer"), v = V, p = f, l = j(p, "modelValue", v), b = w(() => x.state.checkedNode), s = w(() => P(
      [b.value],
      (r) => r.field === l.value.field,
      !0
    )), i = [
      {
        label: "等于",
        value: "eq"
      },
      {
        label: "不等于",
        value: "neq"
      }
    ], h = [
      {
        label: "大于",
        value: "gt"
      },
      {
        label: "大于等于",
        value: "gte"
      },
      {
        label: "小于",
        value: "lt"
      },
      {
        label: "小于等于",
        value: "lte"
      }
    ], a = [
      {
        label: "包含",
        value: "in"
      },
      {
        label: "不包含",
        value: "nin"
      }
    ], o = [
      ...i.map((n) => n.value),
      ...h.map((n) => n.value),
      ...a.map((n) => n.value)
    ], _ = w(() => {
      const n = [
        {
          label: "为空",
          value: "null"
        },
        {
          label: "非空",
          value: "notNull"
        }
      ];
      return ["input", "textarea", "password", "select", "checkbox", "JSelectMultiple"].includes(s.value.type) && n.unshift(...a), ["number"].includes(s.value.type) && n.unshift(...h), [
        "xyTextArea",
        "input",
        "input",
        "number",
        "textarea",
        "password",
        "radio",
        "checkbox",
        "select",
        "slider",
        "time",
        "date",
        "cascader",
        "switch",
        "color-picker",
        "JSelectDept",
        "JSelectMultiple",
        "JDictSelectTag",
        "classifiedDictionary",
        "selectUser",
        "xyRadio"
      ].includes(s.value.type) && n.unshift(...i), n;
    });
    J(
      () => _.value,
      (n) => {
        l.value.operator = n[0].value;
      }
    );
    function t() {
      v("delete");
    }
    return (n, r) => (m(), g("div", ue, [
      d(e(M), null, {
        default: u(() => [
          d(e(I), {
            class: "w-180px",
            value: e(l).field,
            "onUpdate:value": r[0] || (r[0] = (O) => e(l).field = O),
            options: p.fieldOptions,
            placeholder: "选择字段"
          }, null, 8, ["value", "options"]),
          e(l).field ? (m(), y(e(I), {
            key: 0,
            value: e(l).operator,
            "onUpdate:value": r[1] || (r[1] = (O) => e(l).operator = O),
            class: "w-100px",
            options: _.value,
            placeholder: "选择判断条件"
          }, null, 8, ["value", "options"])) : D("", !0),
          e(l).field && e(l).operator && o.includes(e(l).operator) ? (m(), y(e(B), {
            key: 1,
            modelValue: e(l).value,
            "onUpdate:modelValue": r[2] || (r[2] = (O) => e(l).value = O),
            "component-schema": {
              ...s.value,
              noFormItem: !0,
              componentProps: { ...s.value.componentProps, defaultValue: void 0, disabled: void 0, hidden: void 0 }
            }
          }, null, 8, ["modelValue", "component-schema"])) : D("", !0),
          c("div", {
            class: "w-28px h-28px cursor-pointer bg-red-100 text-red-400 hover:bg-red-400 border-solid border-1px border-red-300 rounded-full flex justify-center items-center hover:text-white",
            onClick: t
          }, ce)
        ]),
        _: 1
      })
    ]));
  }
}), A = (f) => (T("data-v-9db78388"), f = f(), z(), f), me = { class: "flex" }, ve = {
  key: 0,
  class: "logical-operator"
}, fe = /* @__PURE__ */ A(() => /* @__PURE__ */ c("div", { class: "logical-operator__line" }, null, -1)), he = { class: "flex-1" }, _e = /* @__PURE__ */ A(() => /* @__PURE__ */ c("span", { class: "iconfont epic-icon-tianjia mr-1" }, null, -1)), Ve = /* @__PURE__ */ $({
  __name: "conditionEdit",
  props: {
    modelValue: {}
  },
  emits: ["update:modelValue"],
  setup(f, { emit: V }) {
    const x = S("designer"), v = w(() => x.state.checkedNode), p = w(() => {
      var a;
      return ee([v.value], (a = v.value) == null ? void 0 : a.componentProps.name).map((o) => ({ label: o.label, value: o.field })).reverse();
    }), s = j(f, "modelValue", V);
    function i() {
      s.value.conditions.push({});
    }
    function h(a) {
      s.value.conditions.splice(a, 1);
    }
    return (a, o) => (m(), g("div", me, [
      e(s).conditions.length ? (m(), g("div", ve, [
        fe,
        d(e(Q), {
          checked: e(s).operator,
          "onUpdate:checked": o[0] || (o[0] = (_) => e(s).operator = _),
          "checked-children": "且",
          checkedValue: "and",
          unCheckedValue: "or",
          "un-checked-children": "或"
        }, null, 8, ["checked"])
      ])) : D("", !0),
      c("div", he, [
        (m(!0), g(U, null, N(e(s).conditions, (_, t) => (m(), y(pe, {
          modelValue: e(s).conditions[t],
          "onUpdate:modelValue": (n) => e(s).conditions[t] = n,
          key: t,
          fieldOptions: p.value,
          onDelete: (n) => h(t)
        }, null, 8, ["modelValue", "onUpdate:modelValue", "fieldOptions", "onDelete"]))), 128)),
        d(e(C), {
          class: "w-100%",
          type: "dashed",
          onClick: i
        }, {
          icon: u(() => [
            _e
          ]),
          default: u(() => [
            k(" 添加条件 ")
          ]),
          _: 1
        })
      ])
    ]));
  }
}), xe = /* @__PURE__ */ le(Ve, [["__scopeId", "data-v-9db78388"]]), be = { class: "epic-drawer-container h-full" }, ke = { class: "h-full flex flex-col" }, ge = { class: "px-16px" }, we = /* @__PURE__ */ c("span", { class: "iconfont epic-icon-tianjia mr-1" }, null, -1), ye = { class: "mt-2 flex-1 overflow-auto px-16px" }, $e = ["onClick"], Oe = /* @__PURE__ */ c("span", { class: "iconfont epic-icon-tianjia" }, null, -1), Ce = [
  Oe
], De = { class: "epic-modal-footer" }, Se = /* @__PURE__ */ $({
  __name: "drawer",
  emits: ["ok"],
  setup(f, { expose: V, emit: x }) {
    const v = x, p = E(!1), l = E([]);
    function b(o = []) {
      l.value = o, p.value = !0;
    }
    function s() {
      l.value.push({
        actions: [],
        condition: {
          conditions: [],
          operator: "and"
        }
      });
    }
    function i(o) {
      l.value.splice(o, 1);
    }
    function h() {
      p.value = !1;
    }
    function a() {
      v("ok", l.value), h();
    }
    return V({ showDrawer: b }), (o, _) => (m(), y(e(X), {
      class: "epic-drawer-form-logic",
      width: "650px",
      title: "逻辑规则",
      open: p.value,
      "onUpdate:open": _[0] || (_[0] = (t) => p.value = t)
    }, {
      default: u(() => [
        c("div", be, [
          c("div", ke, [
            c("div", ge, [
              d(e(C), {
                class: "w-full",
                type: "primary",
                onClick: s
              }, {
                icon: u(() => [
                  we
                ]),
                default: u(() => [
                  k(" 添加逻辑规则 ")
                ]),
                _: 1
              })
            ]),
            c("div", ye, [
              (m(!0), g(U, null, N(l.value, (t, n) => (m(), y(e(Y), {
                key: n,
                class: "mt-2",
                bodyStyle: { padding: "16px" }
              }, {
                default: u(() => [
                  c("div", {
                    class: "absolute top-8px right-8px cursor-pointer rounded-full w-24px h-24px text-16px flex items-center justify-center hover:bg-gray-100 rotate-45",
                    onClick: (r) => i(n)
                  }, Ce, 8, $e),
                  d(e(R), null, {
                    default: u(() => [
                      k("当满足以下条件时")
                    ]),
                    _: 1
                  }),
                  d(xe, {
                    modelValue: t.condition,
                    "onUpdate:modelValue": (r) => t.condition = r
                  }, null, 8, ["modelValue", "onUpdate:modelValue"]),
                  d(e(R), null, {
                    default: u(() => [
                      k("则执行")
                    ]),
                    _: 1
                  }),
                  d(ie, {
                    modelValue: t.actions,
                    "onUpdate:modelValue": (r) => t.actions = r
                  }, null, 8, ["modelValue", "onUpdate:modelValue"])
                ]),
                _: 2
              }, 1024))), 128))
            ])
          ])
        ]),
        c("div", De, [
          d(e(M), { align: "end" }, {
            default: u(() => [
              d(e(C), { onClick: h }, {
                default: u(() => [
                  k("关闭")
                ]),
                _: 1
              }),
              d(e(C), {
                type: "primary",
                onClick: a
              }, {
                default: u(() => [
                  k(" 确定 ")
                ]),
                _: 1
              })
            ]),
            _: 1
          })
        ])
      ]),
      _: 1
    }, 8, ["open"]));
  }
}), Ue = /* @__PURE__ */ c("span", { class: "iconfont epic-icon-shezhi mr-1" }, null, -1), Be = /* @__PURE__ */ $({
  __name: "formLogic",
  props: {
    modelValue: {}
  },
  emits: ["update:modelValue"],
  setup(f, { emit: V }) {
    const x = S("pageSchema"), v = f, p = E(), l = V;
    function b() {
      var i;
      (i = p.value) == null || i.showDrawer(v.modelValue);
    }
    function s(i) {
      l("update:modelValue", i), x.logicRules = i;
    }
    return (i, h) => {
      var a;
      return m(), g("div", null, [
        d(e(Z), {
          count: ((a = v.modelValue) == null ? void 0 : a.length) ?? 0
        }, {
          default: u(() => [
            d(e(C), { onClick: b }, {
              icon: u(() => [
                Ue
              ]),
              default: u(() => [
                k(" 配置")
              ]),
              _: 1
            })
          ]),
          _: 1
        }, 8, ["count"]),
        d(Se, {
          onOk: s,
          ref_key: "drawerRef",
          ref: p
        }, null, 512)
      ]);
    };
  }
});
export {
  Be as default
};