fec-dev-designer 1.0.0

package/es/src/components/ValueSelector.vue2.js

@@ -0,0 +1,142 @@
+import { computed as n, openBlock as b, createBlock as V, resolveDynamicComponent as g, withCtx as A, createVNode as x } from "vue";
+import { ElInputTag as C, ElInput as N } from "element-plus";
+import I from "./ValueSelectorPopover.vue2.js";
+import "./ValueSelector.vue.js";
+import B from "../../_virtual/_plugin-vue_export-helper.js";
+const F = {
+  __name: "ValueSelector",
+  props: {
+    // modelValue 的格式：
+    // 单选：{ type: 'field', value: '字段ID' }
+    // 多选：[{ type: 'field', value: '字段ID1' }, { type: 'field', value: '字段ID2' }]
+    modelValue: {
+      type: [Object, Array],
+      default: () => null
+    },
+    placeholder: {
+      type: String,
+      default: "请输入或选择值"
+    },
+    readOnly: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    multiple: {
+      type: Boolean,
+      default: !1
+    },
+    // 可选的字段列表（从父组件传入）
+    availableFields: {
+      type: Array,
+      default: () => [],
+      validator: (r) => Array.isArray(r)
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(r, { emit: m }) {
+    const a = r, o = m, p = n(() => a.multiple ? C : N), f = n(() => {
+      if (!a.modelValue)
+        return "";
+      if (!a.multiple && typeof a.modelValue == "object" && !Array.isArray(a.modelValue)) {
+        const e = a.modelValue;
+        if (e.label)
+          return e.label;
+        const l = a.availableFields.find((t) => t.id === e.value);
+        return (l == null ? void 0 : l.label) || (l == null ? void 0 : l.fieldName) || e.value;
+      } else if (!a.multiple && typeof a.modelValue == "string")
+        return a.modelValue;
+      return "";
+    }), s = n({
+      get() {
+        return !a.multiple || !Array.isArray(a.modelValue) ? [] : a.modelValue.map((e) => {
+          if (e.label)
+            return e.label;
+          const l = a.availableFields.find((t) => t.id === e.value);
+          return (l == null ? void 0 : l.label) || (l == null ? void 0 : l.fieldName) || e.value;
+        }).filter(Boolean);
+      },
+      set(e) {
+        if (Array.isArray(a.modelValue)) {
+          const l = a.modelValue.filter((t) => {
+            const i = t.label || (() => {
+              const u = a.availableFields.find(
+                (y) => y.id === t.value
+              );
+              return (u == null ? void 0 : u.label) || (u == null ? void 0 : u.fieldName) || t.value;
+            })();
+            return e.includes(i);
+          });
+          o("update:modelValue", l);
+        }
+      }
+    }), d = n({
+      get() {
+        return a.multiple ? s.value : f.value;
+      },
+      set(e) {
+        a.multiple && Array.isArray(e) ? s.value = e : !a.multiple && typeof e == "string" && o("update:modelValue", e);
+      }
+    }), c = (e) => {
+      let l = null;
+      if (e.type === "field") {
+        const t = a.availableFields.find((i) => i.id === e.value);
+        l = {
+          label: `\${${(t == null ? void 0 : t.label) || (t == null ? void 0 : t.fieldName) || e.value}}`,
+          type: "field",
+          value: e.value
+        };
+      } else
+        e.type === "userInfo" ? l = {
+          label: `\${用户信息: ${v(e.value)}}`,
+          type: "userInfo",
+          value: e.value
+        } : e.type === "urlParam" && (l = {
+          label: `\${路由参数: ${e.value}}`,
+          type: "urlParam",
+          value: e.value
+        });
+      if (l)
+        if (a.multiple) {
+          const t = Array.isArray(a.modelValue) ? a.modelValue : [];
+          t.some((u) => u.value === l.value) || o("update:modelValue", [...t, l]);
+        } else
+          o("update:modelValue", l);
+    }, v = (e) => ({
+      userCode: "用户编号",
+      userName: "用户名称",
+      roleCode: "角色编号",
+      roleName: "角色名称",
+      orgCode: "机构编号",
+      orgName: "机构名称"
+    })[e] || e;
+    return (e, l) => (b(), V(g(p.value), {
+      modelValue: d.value,
+      "onUpdate:modelValue": l[0] || (l[0] = (t) => d.value = t),
+      placeholder: r.placeholder,
+      disabled: r.disabled,
+      readonly: r.readOnly,
+      trigger: r.multiple ? "Space" : void 0,
+      "collapse-tags": "",
+      "collapse-tags-tooltip": "",
+      "max-collapse-tags": 1,
+      class: "value-selector-input",
+      size: "small"
+    }, {
+      suffix: A(() => [
+        x(I, {
+          "available-fields": r.availableFields,
+          disabled: r.disabled,
+          onConfirm: c
+        }, null, 8, ["available-fields", "disabled"])
+      ]),
+      _: 1
+    }, 8, ["modelValue", "placeholder", "disabled", "readonly", "trigger"]));
+  }
+}, j = /* @__PURE__ */ B(F, [["__scopeId", "data-v-e62accf1"]]);
+export {
+  j as default
+};

package/es/src/components/ValueSelectorPopover.vue.js

@@ -0,0 +1,4 @@
+const e = "";
+export {
+  e as default
+};

package/es/src/components/ValueSelectorPopover.vue2.js

@@ -0,0 +1,263 @@
+import "../../node_modules/element-plus/theme-chalk/base.css.js";
+import "../../node_modules/element-plus/theme-chalk/el-popper.css.js";
+import "../../node_modules/element-plus/theme-chalk/el-popover.css.js";
+import "../../node_modules/element-plus/theme-chalk/el-tabs.css.js";
+import "../../node_modules/element-plus/theme-chalk/el-alert.css.js";
+import "../../node_modules/element-plus/theme-chalk/el-tab-pane.css.js";
+import "../../node_modules/element-plus/theme-chalk/el-scrollbar.css.js";
+import "../../node_modules/element-plus/theme-chalk/el-input.css.js";
+import "../../node_modules/element-plus/theme-chalk/el-button.css.js";
+import { ref as p, computed as y, watch as D, openBlock as g, createBlock as H, withCtx as i, createVNode as s, unref as K, createElementVNode as l, createElementBlock as N, Fragment as E, renderList as I, toDisplayString as V, normalizeClass as u, createTextVNode as L } from "vue";
+import { Connection as j } from "../../node_modules/@element-plus/icons-vue/dist/index.js";
+import { getEditConfigData as q } from "../packages/utils/common.js";
+import "./ValueSelectorPopover.vue.js";
+import G from "../../_virtual/_plugin-vue_export-helper.js";
+import { ElButton as J } from "../../node_modules/element-plus/es/components/button/index.js";
+import { ElInput as M } from "../../node_modules/element-plus/es/components/input/index.js";
+import { ElScrollbar as O } from "../../node_modules/element-plus/es/components/scrollbar/index.js";
+import { ElTabPane as Q, ElTabs as R } from "../../node_modules/element-plus/es/components/tabs/index.js";
+import { ElAlert as W } from "../../node_modules/element-plus/es/components/alert/index.js";
+import { ElPopover as X } from "../../node_modules/element-plus/es/components/popover/index.js";
+const Y = { class: "value-selector-tabs" }, Z = { class: "field-group-label" }, h = { class: "field-list" }, ee = ["onClick"], le = { class: "field-label" }, oe = { class: "field-code" }, ae = { class: "user-info-list" }, se = { class: "popover-footer" }, te = {
+  __name: "ValueSelectorPopover",
+  props: {
+    availableFields: {
+      type: Array,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["confirm"],
+  setup(x, { emit: w }) {
+    const _ = x, P = w, v = p(!1), f = p("fields"), c = p(""), b = p(""), C = p(null), t = p(null), $ = y(() => {
+      const o = q();
+      return (o == null ? void 0 : o.hiddenFields) || [];
+    }), S = y(() => {
+      const o = (_.availableFields || []).filter(
+        (n) => !n.isHidden
+      ), e = $.value.map((n) => ({
+        id: n.id,
+        label: n.label,
+        fieldName: n.fieldName,
+        type: "input",
+        // 隐藏域默认为 input 类型
+        value: n.value || "",
+        options: [],
+        isHidden: !0
+      })), r = [];
+      return o.length > 0 && r.push({
+        groupLabel: "表单字段",
+        items: o
+      }), e.length > 0 && r.push({
+        groupLabel: "隐藏域",
+        items: e
+      }), r;
+    });
+    y(() => {
+      if (!c.value)
+        return _.availableFields;
+      const o = c.value.toLowerCase();
+      return _.availableFields.filter(
+        (e) => (e.label || e.fieldName || "").toLowerCase().includes(o) || (e.fieldName || "").toLowerCase().includes(o)
+      );
+    });
+    const U = (o) => {
+      C.value = o;
+    }, d = (o) => {
+      t.value = o;
+    }, B = () => {
+      let o = null;
+      f.value === "fields" && C.value ? o = {
+        type: "field",
+        value: C.value
+      } : f.value === "userInfo" && t.value ? o = {
+        type: "userInfo",
+        value: t.value
+      } : f.value === "urlParams" && b.value.trim() && (o = {
+        type: "urlParam",
+        value: b.value.trim()
+      }), o && P("confirm", o), v.value = !1;
+    };
+    return D(v, (o) => {
+      o && (C.value = null, t.value = null, b.value = "", c.value = "");
+    }), (o, e) => {
+      const r = J, n = M, F = O, k = Q, T = W, z = R, A = X;
+      return g(), H(A, {
+        visible: v.value,
+        "onUpdate:visible": e[10] || (e[10] = (a) => v.value = a),
+        placement: "bottom",
+        width: 250,
+        trigger: "click",
+        "close-on-click-modal": !1,
+        "popper-style": "padding:0px",
+        "popper-class": "dev-value-selector"
+      }, {
+        reference: i(() => [
+          s(r, {
+            icon: K(j),
+            disabled: x.disabled,
+            size: "small",
+            class: "dev-value-selector-btn"
+          }, null, 8, ["icon", "disabled"])
+        ]),
+        default: i(() => [
+          l("div", Y, [
+            s(z, {
+              modelValue: f.value,
+              "onUpdate:modelValue": e[8] || (e[8] = (a) => f.value = a)
+            }, {
+              default: i(() => [
+                s(k, {
+                  label: "页面字段",
+                  name: "fields"
+                }, {
+                  default: i(() => [
+                    s(n, {
+                      modelValue: c.value,
+                      "onUpdate:modelValue": e[0] || (e[0] = (a) => c.value = a),
+                      placeholder: "搜索字段",
+                      "prefix-icon": "Search",
+                      clearable: "",
+                      style: { "margin-bottom": "12px" }
+                    }, null, 8, ["modelValue"]),
+                    s(F, { "max-height": "300px" }, {
+                      default: i(() => [
+                        (g(!0), N(E, null, I(S.value, (a) => (g(), N("div", {
+                          key: a.groupLabel
+                        }, [
+                          l("div", Z, V(a.groupLabel), 1),
+                          l("ul", h, [
+                            (g(!0), N(E, null, I(a.items, (m) => (g(), N("li", {
+                              key: m.id,
+                              class: u(["field-item", { active: C.value === m.id }]),
+                              onClick: (ie) => U(m.id)
+                            }, [
+                              l("span", le, V(m.label || m.fieldName), 1),
+                              l("span", oe, "(" + V(m.fieldName) + ")", 1)
+                            ], 10, ee))), 128))
+                          ])
+                        ]))), 128))
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }),
+                s(k, {
+                  label: "用户信息",
+                  name: "userInfo"
+                }, {
+                  default: i(() => [
+                    s(F, { "max-height": "400px" }, {
+                      default: i(() => [
+                        l("ul", ae, [
+                          l("li", {
+                            value: "userCode",
+                            class: u(["user-info-item", { active: t.value === "userCode" }]),
+                            onClick: e[1] || (e[1] = (a) => d("userCode"))
+                          }, [...e[11] || (e[11] = [
+                            l("span", { class: "info-label" }, "用户编号", -1),
+                            l("span", { class: "info-code" }, "(userCode)", -1)
+                          ])], 2),
+                          l("li", {
+                            value: "userName",
+                            class: u(["user-info-item", { active: t.value === "userName" }]),
+                            onClick: e[2] || (e[2] = (a) => d("userName"))
+                          }, [...e[12] || (e[12] = [
+                            l("span", { class: "info-label" }, "用户名称", -1),
+                            l("span", { class: "info-code" }, "(userName)", -1)
+                          ])], 2),
+                          l("li", {
+                            value: "roleCode",
+                            class: u(["user-info-item", { active: t.value === "roleCode" }]),
+                            onClick: e[3] || (e[3] = (a) => d("roleCode"))
+                          }, [...e[13] || (e[13] = [
+                            l("span", { class: "info-label" }, "角色编号", -1),
+                            l("span", { class: "info-code" }, "(roleCode)", -1)
+                          ])], 2),
+                          l("li", {
+                            value: "roleName",
+                            class: u(["user-info-item", { active: t.value === "roleName" }]),
+                            onClick: e[4] || (e[4] = (a) => d("roleName"))
+                          }, [...e[14] || (e[14] = [
+                            l("span", { class: "info-label" }, "角色名称", -1),
+                            l("span", { class: "info-code" }, "(roleName)", -1)
+                          ])], 2),
+                          l("li", {
+                            value: "orgCode",
+                            class: u(["user-info-item", { active: t.value === "orgCode" }]),
+                            onClick: e[5] || (e[5] = (a) => d("orgCode"))
+                          }, [...e[15] || (e[15] = [
+                            l("span", { class: "info-label" }, "机构编号", -1),
+                            l("span", { class: "info-code" }, "(orgCode)", -1)
+                          ])], 2),
+                          l("li", {
+                            value: "orgName",
+                            class: u(["user-info-item", { active: t.value === "orgName" }]),
+                            onClick: e[6] || (e[6] = (a) => d("orgName"))
+                          }, [...e[16] || (e[16] = [
+                            l("span", { class: "info-label" }, "机构名称", -1),
+                            l("span", { class: "info-code" }, "(orgName)", -1)
+                          ])], 2)
+                        ])
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }),
+                s(k, {
+                  label: "路由参数",
+                  name: "urlParams"
+                }, {
+                  default: i(() => [
+                    s(T, {
+                      title: "从地址栏获取参数，如: /page?id=123 中的 id",
+                      type: "info",
+                      closable: !1,
+                      class: "url-param-alert"
+                    }),
+                    s(n, {
+                      modelValue: b.value,
+                      "onUpdate:modelValue": e[7] || (e[7] = (a) => b.value = a),
+                      placeholder: "请输入参数名称，如: id",
+                      clearable: ""
+                    }, null, 8, ["modelValue"])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ]),
+          l("div", se, [
+            s(r, {
+              onClick: e[9] || (e[9] = (a) => v.value = !1)
+            }, {
+              default: i(() => [...e[17] || (e[17] = [
+                L("取消", -1)
+              ])]),
+              _: 1
+            }),
+            s(r, {
+              type: "primary",
+              onClick: B
+            }, {
+              default: i(() => [...e[18] || (e[18] = [
+                L("确定", -1)
+              ])]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 1
+      }, 8, ["visible"]);
+    };
+  }
+}, Ie = /* @__PURE__ */ G(te, [["__scopeId", "data-v-aa614827"]]);
+export {
+  Ie as default
+};

package/es/src/components/useJsonDataDrawer.js

@@ -0,0 +1,15 @@
+import o from "./JsonDataDrawer.vue.js";
+import { ref as e } from "vue";
+function D(a = {}) {
+  const r = e(!1);
+  return {
+    jsonDataDrawerVisible: r,
+    openJsonDrawer: () => {
+      r.value = !0;
+    },
+    JsonDataDrawer: o
+  };
+}
+export {
+  D as useJsonDataDrawer
+};

package/es/src/index.js

@@ -0,0 +1,11 @@
+import t from "./layout/index.vue.js";
+import "./style/index.css.js";
+import "../node_modules/vxe-table/lib/style.css.js";
+const e = (o) => {
+  o.component("fecDevDesigner", t);
+}, m = {
+  install: e
+};
+export {
+  m as default
+};

package/es/src/layout/aside/index.vue.js

@@ -0,0 +1,175 @@
+import "../../../node_modules/element-plus/theme-chalk/base.css.js";
+import "../../../node_modules/element-plus/theme-chalk/el-aside.css.js";
+import "../../../node_modules/element-plus/theme-chalk/el-badge.css.js";
+import "../../../node_modules/element-plus/theme-chalk/el-collapse.css.js";
+import "../../../node_modules/element-plus/theme-chalk/el-collapse-item.css.js";
+import { computed as p, ref as b, openBlock as i, createBlock as f, withCtx as a, createElementVNode as n, createVNode as s, unref as o, isRef as V, createElementBlock as r, Fragment as k, renderList as x, toDisplayString as y, createCommentVNode as _ } from "vue";
+import C from "../../packages/utils/eventBus.js";
+import { VueDraggable as S } from "../../../node_modules/vue-draggable-plus/dist/vue-draggable-plus.js";
+import { Calendar as L, DeleteFilled as $, Hide as j } from "../../../node_modules/@element-plus/icons-vue/dist/index.js";
+import { getEditConfigData as B, setSelectedItem as q } from "../../packages/utils/common.js";
+import z from "../../packages/table/aside/index.js";
+import G from "../../packages/form/aside/index.js";
+import J from "../../packages/form/fieldRecycleBin.vue.js";
+import K from "../../packages/form/HiddenFieldDialog.vue.js";
+import { useStore as O } from "vuex";
+import "./index.vue2.js";
+import P from "../../../_virtual/_plugin-vue_export-helper.js";
+import { ElIcon as Q } from "../../../node_modules/element-plus/es/components/icon/index.js";
+import { ElCollapseItem as W, ElCollapse as X } from "../../../node_modules/element-plus/es/components/collapse/index.js";
+import { ElBadge as Y } from "../../../node_modules/element-plus/es/components/badge/index.js";
+import { ElAside as Z } from "../../../node_modules/element-plus/es/components/container/index.js";
+const ee = { class: "dev-designer-aside" }, te = { class: "components-item" }, oe = { class: "menu-components-item" }, le = { class: "components-item-label" }, ne = {
+  key: 0,
+  class: "table-item"
+}, se = { class: "widgets" }, ie = { class: "field-label" }, ae = {
+  key: 0,
+  class: "aside-footer"
+}, de = {
+  __name: "index",
+  setup(re) {
+    const m = O(), w = p(() => {
+      switch (m.getters.editingType) {
+        case "table":
+          return z;
+        case "form":
+          return G;
+      }
+      return null;
+    }), h = p(() => m.getters.editingType), g = b(["basic", "advanced"]), c = b(!1), u = b(!1), E = p(() => {
+      var e;
+      const t = B();
+      return ((e = t == null ? void 0 : t.deletedFields) == null ? void 0 : e.length) || 0;
+    }), F = p(() => {
+      var e;
+      const t = B();
+      return ((e = t == null ? void 0 : t.hiddenFields) == null ? void 0 : e.length) || 0;
+    });
+    function N(t) {
+      return {
+        ...t,
+        id: Date.now(),
+        type: "widgets"
+      };
+    }
+    function T(t) {
+      q(t.clonedData), m.getters.editingType == "form" && C.emit("onFormDragEnd", t);
+    }
+    function U(t) {
+      return m.getters.editingType == "form" && C.emit("onFormDragMove", t), !0;
+    }
+    function I() {
+      c.value = !0;
+    }
+    function A() {
+      u.value = !0;
+    }
+    return (t, e) => {
+      const v = Q, H = W, M = X, D = Y, R = Z;
+      return i(), f(R, { class: "root-aside" }, {
+        default: a(() => [
+          n("div", ee, [
+            s(M, {
+              modelValue: o(g),
+              "onUpdate:modelValue": e[0] || (e[0] = (l) => V(g) ? g.value = l : null)
+            }, {
+              default: a(() => [
+                (i(!0), r(k, null, x(o(w), (l) => (i(), f(H, {
+                  title: l.title,
+                  name: l.name
+                }, {
+                  default: a(() => [
+                    s(o(S), {
+                      modelValue: l.children,
+                      "onUpdate:modelValue": (d) => l.children = d,
+                      animation: 150,
+                      ghostClass: "ghost",
+                      group: { name: "dev", pull: "clone", put: !1 },
+                      clone: N,
+                      onEnd: T,
+                      onMove: U,
+                      sort: !1,
+                      class: "components-list"
+                    }, {
+                      default: a(() => [
+                        (i(!0), r(k, null, x(l.children, (d) => (i(), r("div", te, [
+                          n("div", oe, [
+                            s(v, { class: "components-item-icon" }, {
+                              default: a(() => [
+                                s(o(L))
+                              ]),
+                              _: 1
+                            }),
+                            n("span", le, y(d.label), 1)
+                          ]),
+                          o(h) == "table" ? (i(), r("div", ne, [
+                            n("div", se, y(d.label), 1),
+                            n("div", ie, y(d.fieldName), 1)
+                          ])) : _("", !0)
+                        ]))), 256))
+                      ]),
+                      _: 2
+                    }, 1032, ["modelValue", "onUpdate:modelValue"])
+                  ]),
+                  _: 2
+                }, 1032, ["title", "name"]))), 256))
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ]),
+          o(h) == "form" ? (i(), r("div", ae, [
+            n("div", {
+              class: "footer-btn recycle-btn",
+              onClick: I
+            }, [
+              s(v, { class: "btn-icon" }, {
+                default: a(() => [
+                  s(o($))
+                ]),
+                _: 1
+              }),
+              e[3] || (e[3] = n("span", { class: "btn-text" }, "字段回收站", -1)),
+              o(E) > 0 ? (i(), f(D, {
+                key: 0,
+                value: o(E),
+                max: 99,
+                class: "btn-badge"
+              }, null, 8, ["value"])) : _("", !0)
+            ]),
+            e[5] || (e[5] = n("div", { class: "footer-divider" }, null, -1)),
+            n("div", {
+              class: "footer-btn hidden-field-btn",
+              onClick: A
+            }, [
+              s(v, { class: "btn-icon" }, {
+                default: a(() => [
+                  s(o(j))
+                ]),
+                _: 1
+              }),
+              e[4] || (e[4] = n("span", { class: "btn-text" }, "隐藏域", -1)),
+              o(F) > 0 ? (i(), f(D, {
+                key: 0,
+                value: o(F),
+                max: 99,
+                class: "btn-badge"
+              }, null, 8, ["value"])) : _("", !0)
+            ])
+          ])) : _("", !0),
+          s(J, {
+            modelValue: o(c),
+            "onUpdate:modelValue": e[1] || (e[1] = (l) => V(c) ? c.value = l : null)
+          }, null, 8, ["modelValue"]),
+          s(K, {
+            modelValue: o(u),
+            "onUpdate:modelValue": e[2] || (e[2] = (l) => V(u) ? u.value = l : null)
+          }, null, 8, ["modelValue"])
+        ]),
+        _: 1
+      });
+    };
+  }
+}, Te = /* @__PURE__ */ P(de, [["__scopeId", "data-v-e9538a72"]]);
+export {
+  Te as default
+};

package/es/src/layout/aside/index.vue2.js

@@ -0,0 +1,4 @@
+const e = "";
+export {
+  e as default
+};