snowy-designer/dist/extensions/elementPlus/subform/subform.vue2.js

基于Epic-Designer-Pro版本的设计器,可视化开发页面表单

import { defineComponent as T, provide as F, ref as I, watchEffect as $, computed as w, createElementBlock as d, openBlock as l, normalizeClass as S, createCommentVNode as m, renderSlot as v, toDisplayString as x, createBlock as s, createElementVNode as c, Fragment as _, renderList as y, unref as i, withCtx as n, createVNode as p, createTextVNode as g } from "vue";
/* empty css                                     */
import P from "../../../ui-kit/base-ui/src/components/icon/icon.vue.js";
import "radix-vue";
import "clsx";
import "tailwind-merge";
import "lucide-vue-next";
import "../../../ui-kit/base-ui/src/shadch-ui/button/index.js";
import "@vueuse/core";
import "../../../ui-kit/base-ui/src/shadch-ui/toast/index.js";
import { getUUID as E } from "../../../utils/src/common/string.js";
import "../../../hooks/src/store/index.js";
import "lodash";
import "../../../utils/src/manager/pluginManager.js";
import "monaco-editor";
import "../../../utils/src/request/index.js";
import "vuedraggable";
import { ElCard as j, ElTable as z, ElTableColumn as k, ElButton as A } from "element-plus";
import B from "./subformItem.vue.js";
const L = {
  key: 0,
  class: "el-form-item__label"
}, q = { class: "clearfix" }, G = ["onClick"], H = { key: 0 }, J = ["onClick"], M = { class: "subform-footer" }, ce = /* @__PURE__ */ T({
  name: "Subform",
  __name: "subform",
  props: {
    componentSchema: {},
    disabled: { type: Boolean },
    modelValue: { default: () => [] }
  },
  emits: ["update:modelValue"],
  setup(U, { emit: K }) {
    const e = U, N = K;
    F("disabled", !!e.disabled);
    const o = I([
      {
        rowKey: E()
      }
    ]);
    $(() => {
      e.modelValue && (o.value = e.modelValue);
    }), $(() => {
      N("update:modelValue", o.value);
    });
    const V = w(() => e.componentSchema.children ?? []), f = w(() => e.componentSchema.componentProps ?? {});
    function D() {
      e.disabled || o.value.push({
        rowKey: E()
      });
    }
    function b(u) {
      o.value.splice(u, 1);
    }
    return (u, C) => (l(), d("div", {
      class: S(["subform", { "layout-table": f.value.layout === "table" }])
    }, [
      e.componentSchema.noFormItem ? (l(), d("label", L, x(e.componentSchema.label), 1)) : m("", !0),
      v(u.$slots, "edit-node", {}, () => [
        f.value.layout === "tile" ? (l(!0), d(_, { key: 0 }, y(o.value, (r, t) => (l(), s(i(j), {
          key: r.rowKey,
          shadow: "hover",
          class: "subform-line",
          "body-style": "padding-bottom: 6px"
        }, {
          header: n(() => [
            c("div", q, [
              e.disabled ? m("", !0) : (l(), d("div", {
                key: 0,
                class: "subform-line-btn-delete",
                onClick: (a) => b(t)
              }, [
                e.disabled ? m("", !0) : (l(), s(i(P), {
                  key: 0,
                  class: "hover:text-red cursor-pointer text-lg",
                  name: "icon--epic--delete-outline-rounded",
                  onClick: (a) => b(t)
                }, null, 8, ["onClick"]))
              ], 8, G))
            ])
          ]),
          default: n(() => [
            p(B, {
              modelValue: o.value[t],
              "onUpdate:modelValue": (a) => o.value[t] = a,
              "rule-field-prefix": [e.componentSchema.field, t]
            }, {
              default: n(() => [
                (l(!0), d(_, null, y(V.value, (a, h) => v(u.$slots, "node", {
                  key: t + h,
                  componentSchema: a
                }, void 0, !0)), 128))
              ]),
              _: 2
            }, 1032, ["modelValue", "onUpdate:modelValue", "rule-field-prefix"])
          ]),
          _: 2
        }, 1024))), 128)) : (l(), s(i(z), {
          key: 1,
          data: o.value,
          "row-key": "rowKey",
          border: "",
          style: { width: "100%" }
        }, {
          default: n(() => [
            f.value.sn ? (l(), s(i(k), {
              key: 0,
              label: "序号",
              align: "center",
              width: "60"
            }, {
              default: n((r) => [
                g(x(r.$index + 1), 1)
              ]),
              _: 1
            })) : m("", !0),
            (l(!0), d(_, null, y(V.value, (r, t) => (l(), s(i(k), {
              key: t,
              label: r.label,
              "min-width": "180"
            }, {
              default: n((a) => [
                p(B, {
                  modelValue: o.value[a.$index],
                  "onUpdate:modelValue": (h) => o.value[a.$index] = h,
                  "rule-field-prefix": [e.componentSchema.field, a.$index]
                }, {
                  default: n(() => [
                    v(u.$slots, "node", {
                      key: t,
                      componentSchema: { ...r, label: "" }
                    }, void 0, !0)
                  ]),
                  _: 2
                }, 1032, ["modelValue", "onUpdate:modelValue", "rule-field-prefix"])
              ]),
              _: 2
            }, 1032, ["label"]))), 128)),
            p(i(k), {
              align: "center",
              fixed: "right",
              width: "80",
              label: "操作"
            }, {
              default: n((r) => [
                e.disabled ? m("", !0) : (l(), d("div", H, [
                  c("span", {
                    class: "iconfont epic-icon-shanchu1",
                    onClick: (t) => b(r.$index)
                  }, null, 8, J)
                ]))
              ]),
              _: 1
            })
          ]),
          _: 3
        }, 8, ["data"])),
        c("div", M, [
          p(i(A), {
            class: S(["subform-add-btn", { disabled: e.disabled }]),
            onClick: D
          }, {
            default: n(() => C[0] || (C[0] = [
              c("span", { class: "iconfont epic-icon-tianjia1" }, null, -1),
              g(" 添加 ")
            ])),
            _: 1
          }, 8, ["class"])
        ])
      ], !0)
    ], 2));
  }
});
export {
  ce as default
};