epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
147 lines (146 loc) • 4.43 kB
JavaScript
import { defineComponent as w, ref as v, watch as U, createElementBlock as a, openBlock as u, createElementVNode as m, createVNode as f, Fragment as c, renderList as g, createCommentVNode as x, toDisplayString as D, unref as h, createBlock as E, withCtx as N, createTextVNode as T } from "vue";
/* empty css */
/* empty css */
/* empty css */
import $ from "../../../../base-ui/src/node/node.vue.js";
/* empty css */
import { deepEqual as A, deepClone as y } from "../../../../../utils/src/common/data.js";
import "../../../../../git/epic/epic-designer/node_modules/.pnpm/jsep@1.4.0/node_modules/jsep/dist/jsep.js";
import { useVModel as F } from "@vueuse/core";
import "../../../../../hooks/src/store/index.js";
import { pluginManager as M } from "../../../../../manager/src/pluginManager.js";
import "vue-draggable-plus";
import { triggerOptions as O, typeOptions as R } from "./data.js";
import I from "./ERuleItem.vue.js";
const L = { class: "rule-item-main m-t-2 relative rounded border border-solid p-2 transition-all" }, j = {
key: 0,
class: "m-t-2 flex first:m-0"
}, z = { class: "epic-attr-label" }, G = { class: "flex-1" }, oe = /* @__PURE__ */ w({
__name: "index",
props: {
modelValue: {
default: void 0,
type: Array
},
ruleType: {
default: "string",
type: String
}
},
emits: ["update:modelValue"],
setup(_, { emit: V }) {
const p = _, q = V, b = M.component.get("button"), n = F(p, "modelValue", q), l = v({
message: "必填项",
required: !1,
trigger: ["change"],
type: p.ruleType
}), k = [
{
label: "必填项",
model: "required",
type: "switch"
},
{
label: "校验时机",
model: "trigger",
props: {
mode: "multiple",
multiple: !0,
options: O,
placeholder: "校验时机"
},
show() {
return !!l.value.required;
},
type: "select"
},
{
label: "类型",
model: "type",
props: { options: R, placeholder: "类型" },
show() {
return !!l.value.required;
},
type: "select"
},
{
label: "校验信息",
model: "message",
props: { placeholder: "校验信息" },
show() {
return !!l.value.required;
},
type: "input"
}
], t = v([]);
U(
() => n.value,
(r, s) => {
r && (A(r, s ?? []) || (t.value = [], r.forEach((e) => {
e.required === void 0 ? t.value.push(e) : l.value = e;
})));
},
{
immediate: !0
}
);
function B() {
t.value.push({
message: "",
trigger: ["change"],
type: p.ruleType
}), i();
}
function i() {
if (l.value.required) {
n.value = y([...t.value, l.value]);
return;
}
if (t.value.length > 0) {
n.value = y(t.value);
return;
}
n.value = void 0;
}
function C(r) {
t.value.splice(r, 1), i();
}
return (r, s) => (u(), a("div", null, [
m("div", L, [
(u(), a(c, null, g(k, (e, o) => (u(), a(c, { key: o }, [
!e.show || e.show() ? (u(), a("div", j, [
m("div", z, D(e.label), 1),
m("div", G, [
f(h($), {
"is-property": "",
modelValue: l.value[e.model],
"onUpdate:modelValue": (d) => l.value[e.model] = d,
"component-schema": { ...e, noFormItem: !0 },
onChange: i
}, null, 8, ["modelValue", "onUpdate:modelValue", "component-schema"])
])
])) : x("", !0)
], 64))), 64))
]),
(u(!0), a(c, null, g(t.value, (e, o) => (u(), E(I, {
key: o,
rule: t.value[o],
"onUpdate:rule": (d) => t.value[o] = d,
onDelete: (d) => C(o),
onChange: i
}, null, 8, ["rule", "onUpdate:rule", "onDelete"]))), 128)),
f(h(b), {
class: "m-t-2",
onClick: B
}, {
default: N(() => [...s[0] || (s[0] = [
T(" 添加规则 ", -1)
])]),
_: 1
})
]));
}
});
export {
oe as default
};