gepic/dist/core/extensions/ERuleEditor/index.vue2.js

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

import { defineComponent as k, ref as f, watchEffect as B, createElementBlock as a, openBlock as u, createElementVNode as p, createVNode as v, Fragment as m, renderList as g, createCommentVNode as U, toDisplayString as x, unref as h, createBlock as D, withCtx as E, createTextVNode as N } from "vue";
import { pluginManager as T } from "../../../utils/manager/pluginManager.js";
import { useVModel as P } from "@vueuse/core";
import "../../../hooks/store/index.js";
import { deepClone as y } from "../../../utils/common/data.js";
import $ from "./ERuleItem.vue.js";
import A from "../../components/node/src/node.vue.js";
import { triggerOptions as F, typeOptions as M } from "./data.js";
const O = { class: "rule-item-main m-t-2 p-2 rounded border border-solid transition-all relative" }, R = {
  key: 0,
  class: "flex m-t-2 first:m-0"
}, I = { class: "epic-attr-label" }, L = { class: "flex-1" }, Y = /* @__PURE__ */ k({
  __name: "index",
  props: {
    ruleType: {
      type: String,
      default: "string"
    },
    modelValue: {
      type: Array,
      default: void 0
    }
  },
  emits: ["update:modelValue"],
  setup(_, { emit: V }) {
    const b = T.getComponent("button"), d = _, n = P(d, "modelValue", V), l = f({
      required: !1,
      message: "必填项",
      type: d.ruleType,
      trigger: ["change"]
    }), q = [
      {
        type: "switch",
        label: "必填项",
        model: "required"
      },
      {
        type: "select",
        label: "校验时机",
        model: "trigger",
        show() {
          return !!l.value.required;
        },
        componentProps: {
          options: F,
          placeholder: "校验时机",
          multiple: !0,
          mode: "multiple"
        }
      },
      {
        type: "select",
        label: "类型",
        model: "type",
        show() {
          return !!l.value.required;
        },
        componentProps: { options: M, placeholder: "类型" }
      },
      {
        type: "input",
        label: "校验信息",
        model: "message",
        show() {
          return !!l.value.required;
        },
        componentProps: { placeholder: "校验信息" }
      }
    ], e = f([]);
    B(() => {
      n.value && (e.value = [], n.value.forEach((r) => {
        typeof r.required < "u" ? l.value = r : e.value.push(r);
      }));
    });
    function w() {
      e.value.push({
        message: "",
        type: d.ruleType,
        trigger: ["change"]
      }), s();
    }
    function s() {
      if (l.value.required) {
        n.value = y([...e.value, l.value]);
        return;
      }
      if (e.value.length) {
        n.value = y(e.value);
        return;
      }
      n.value = void 0;
    }
    function C(r) {
      e.value.splice(r, 1), s();
    }
    return (r, c) => (u(), a("div", null, [
      p("div", O, [
        (u(), a(m, null, g(q, (t, o) => (u(), a(m, { key: o }, [
          !t.show || t.show() ? (u(), a("div", R, [
            p("div", I, x(t.label), 1),
            p("div", L, [
              v(h(A), {
                modelValue: l.value[t.model],
                "onUpdate:modelValue": (i) => l.value[t.model] = i,
                "component-schema": { ...t, noFormItem: !0 },
                onChange: s
              }, null, 8, ["modelValue", "onUpdate:modelValue", "component-schema"])
            ])
          ])) : U("", !0)
        ], 64))), 64))
      ]),
      (u(!0), a(m, null, g(e.value, (t, o) => (u(), D($, {
        key: o,
        rule: e.value[o],
        "onUpdate:rule": (i) => e.value[o] = i,
        onDelete: (i) => C(o),
        onChange: s
      }, null, 8, ["rule", "onUpdate:rule", "onDelete"]))), 128)),
      v(h(b), {
        class: "m-t-2",
        onClick: w
      }, {
        default: E(() => c[0] || (c[0] = [
          N(" 添加规则 ")
        ])),
        _: 1
      })
    ]));
  }
});
export {
  Y as default
};