form-designer-xinyi/dist/attributeView-DwEZhbDY.js

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

import { defineComponent as S, inject as m, computed as _, ref as k, watch as x, openBlock as c, createElementBlock as u, Fragment as V, renderList as I, normalizeClass as b, createElementVNode as h, toDisplayString as T, createVNode as N, unref as y, createCommentVNode as z, nextTick as A } from "vue";
import { _ as D } from "./index-DWpaTBDO.js";
import { p as E, h as F, s as v, r as L } from "./revoke-iScTU0eW.js";
const B = ["title"], W = /* @__PURE__ */ S({
  __name: "attributeView",
  setup(U) {
    function g(e) {
      const t = { ...e, componentProps: { ...e.componentProps }, input: !1, field: void 0, hidden: !1, show: !0, noFormItem: !0 };
      if (e.field === "componentProps.defaultValue" && a.value) {
        if (a.value.type === "JDictSelectTag")
          return t;
        t.componentProps = { ...t.componentProps, ...a.value.componentProps };
      }
      return t;
    }
    const i = m("designer"), d = m("pageSchema"), P = E.getComponentConfings(), a = _(() => i.state.checkedNode);
    function w(e) {
      var t;
      return typeof e.show == "boolean" ? e.show : typeof e.show == "function" ? (t = e.show) == null ? void 0 : t.call(e, { values: a.value }) : !0;
    }
    const r = k([]);
    x(() => {
      var e;
      return (e = i.state.checkedNode) == null ? void 0 : e.type;
    }, () => {
      var s, f;
      const e = (s = i.state.checkedNode) == null ? void 0 : s.type;
      if (!e)
        return [];
      let t = [];
      ["page", "form", "card", "row", "col"].includes(e) || (t = [
        {
          label: "标签布局",
          type: "radio",
          field: "componentProps.labelLayout",
          componentProps: {
            options: [
              {
                label: "固定宽度",
                value: "fixed"
              },
              {
                label: "自适应宽度",
                value: "flex"
              }
            ]
          }
        },
        {
          label: "标签宽度",
          type: "EInputSize",
          field: "componentProps.labelWidth",
          show: ({ values: p }) => {
            var n;
            return ((n = p.componentProps) == null ? void 0 : n.labelLayout) === "fixed";
          }
        },
        {
          label: "labelCol",
          type: "input",
          field: "componentProps.labelCol.span",
          show: ({ values: p }) => {
            var n;
            return ((n = p.componentProps) == null ? void 0 : n.labelLayout) === "flex";
          },
          componentProps: {
            labelCol: {
              span: 5
            }
          }
        },
        {
          label: "wrapperCol",
          type: "input",
          field: "componentProps.wrapperCol.span",
          show: ({ values: p }) => {
            var n;
            return ((n = p.componentProps) == null ? void 0 : n.labelLayout) === "flex";
          },
          componentProps: {
            wrapperCol: {
              span: 19
            }
          }
        },
        {
          label: "标签对齐",
          type: "select",
          componentProps: {
            placeholder: "请选择",
            allowClear: !0,
            optionType: "button",
            options: [
              {
                label: "左",
                value: "left"
              },
              {
                label: "右",
                value: "right"
              }
            ]
          },
          field: "componentProps.labelAlign"
        },
        {
          label: "表单布局",
          type: "select",
          componentProps: {
            layout: "horizontal",
            placeholder: "请选择",
            allowClear: !0,
            optionType: "button",
            options: [
              {
                label: "水平",
                value: "horizontal"
              },
              {
                label: "垂直",
                value: "vertical"
              },
              {
                label: "内联",
                value: "inline"
              }
            ]
          },
          field: "componentProps.layout"
        }
      ]);
      const o = ((f = P[e]) == null ? void 0 : f.config.attribute) ?? [];
      r.value = [
        {
          label: "组件ID",
          type: "input",
          field: "id",
          componentProps: {
            disabled: !0
          }
        },
        {
          label: "标签提示",
          type: "textarea",
          field: "suffix",
          componentProps: {
            disabled: !1
          }
        },
        ...t,
        ...o
      ], e === "page" && r.value.push({
        label: "画布宽度",
        type: "EInputSize",
        field: "canvas.width",
        editData: d
      }, {
        label: "画布高度",
        type: "EInputSize",
        field: "canvas.height",
        editData: d
      });
    }, {
      immediate: !0
    });
    function C(e, t, l, o = a.value) {
      typeof l.onChange == "function" && l.onChange({ value: e, values: o, componentAttributes: r }), l.changeSync ? v(e, t, o) : A(() => {
        v(e, t, o);
      }), L.push(d.schemas, "编辑组件属性");
    }
    return (e, t) => {
      var l;
      return c(), u("div", {
        class: "epic-attribute-view",
        key: (l = a.value) == null ? void 0 : l.id
      }, [
        (c(!0), u(V, null, I(r.value, (o) => (c(), u("div", {
          key: o.field
        }, [
          w(o) ? (c(), u("div", {
            key: 0,
            class: b(["epic-attr-item", o.layout])
          }, [
            h("div", {
              class: "epic-attr-label",
              title: o.label
            }, T(o.label), 9, B),
            h("div", {
              class: b(["epic-attr-input", { "block!": o.layout === "vertical" }])
            }, [
              N(y(D), {
                componentSchema: g(o),
                "model-value": y(F)(o.field, o.editData ?? a.value),
                "onUpdate:modelValue": (s) => C(s, o.field, o, o.editData)
              }, null, 8, ["componentSchema", "model-value", "onUpdate:modelValue"])
            ], 2)
          ], 2)) : z("", !0)
        ]))), 128))
      ]);
    };
  }
});
export {
  W as default
};