epic-designer-cjh
Version:
基于vue3的设计器,可视化开发页面表单
271 lines (270 loc) • 8.01 kB
JavaScript
import { defineComponent as C, computed as x, inject as O, openBlock as r, createElementBlock as s, Fragment as c, renderList as w, createElementVNode as m, toDisplayString as q, createVNode as v, unref as b, createCommentVNode as B, ref as k, watch as j, createBlock as E, withCtx as I, createTextVNode as N } from "vue";
import { d as U, p as R, m as P } from "./index-97ce4605.js";
import { _ as F } from "./icon.vue_vue_type_script_setup_true_lang-3f9e4127.js";
const $ = [
{ label: "string", value: "string" },
{ label: "number", value: "number" },
{ label: "boolean", value: "boolean" },
{ label: "method", value: "method" },
{ label: "regexp", value: "regexp" },
{ label: "integer", value: "integer" },
{ label: "float", value: "float" },
{ label: "array", value: "array" },
{ label: "object", value: "object" },
// { label: 'enum', value: 'enum' },
{ label: "date", value: "date" },
{ label: "url", value: "url" },
{ label: "hex", value: "hex" },
{ label: "email", value: "email" },
{ label: "any", value: "any" }
], D = [
{ label: "change", value: "change" },
{ label: "blur", value: "blur" }
], V = ["string", "number", "url", "array", "email"], M = { class: "rule-item-main bg-white m-t-2 p-2 rounded border border-solid border-gray-200 hover:border-primary transition-all relative" }, S = {
key: 0,
class: "flex m-t-2 first:m-0"
}, A = {
class: "attr-label",
title: "校验时机"
}, T = { class: "attr-input" }, L = /* @__PURE__ */ C({
__name: "ERuleItem",
props: {
rule: {}
},
emits: ["change", "delete", "update:rule"],
setup(g, { emit: i }) {
const y = g, t = x({
get() {
return y.rule;
},
set(e) {
i("update:rule", e);
}
}), o = O("pageManager", {}), f = x(() => Object.entries(o.funcs.value).filter(([e, n]) => typeof n == "function").map(([e]) => ({ label: e, value: e }))), l = [
{
type: "select",
label: "校验时机",
model: "trigger",
componentProps: { options: D, placeholder: "校验时机", multiple: !0, mode: "multiple" }
},
{
type: "switch",
label: "自定义规则",
model: "isValidator"
},
{
type: "select",
label: "校验函数",
model: "validator",
show() {
return !!t.value.isValidator;
},
componentProps: { options: f.value, placeholder: "校验函数" }
},
{
type: "select",
label: "类型",
model: "type",
show() {
return !t.value.isValidator;
},
componentProps: { options: $, placeholder: "类型" }
},
{
type: "input",
label: "正则校验",
model: "pattern",
show() {
return !t.value.isValidator;
},
componentProps: { placeholder: "正则校验" }
},
{
type: "number",
label: "字段长度",
model: "len",
show() {
return V.includes(t.value.type ?? "");
},
componentProps: { min: 0, placeholder: "字段长度" }
},
{
type: "number",
label: "最小长度",
model: "min",
show() {
return V.includes(t.value.type ?? "");
},
componentProps: { min: 0, placeholder: "最小长度" }
},
{
type: "number",
label: "最大长度",
model: "max",
show() {
return V.includes(t.value.type ?? "");
},
componentProps: { min: 0, placeholder: "最大长度" }
},
{
type: "input",
label: "校验信息",
model: "message",
componentProps: { placeholder: "校验信息" }
}
];
function _() {
const e = t.value;
e.isValidator ? (delete e.type, delete e.pattern, delete e.len, delete e.min, delete e.max) : delete e.validator, i("change", e);
}
function p() {
i("delete");
}
return (e, n) => (r(), s("div", M, [
(r(), s(c, null, w(l, (a, u) => (r(), s(c, { key: u }, [
!a.show || a.show() ? (r(), s("div", S, [
m("div", A, q(a.label), 1),
m("div", T, [
v(b(U), {
modelValue: t.value[a.model],
"onUpdate:modelValue": (d) => t.value[a.model] = d,
record: { ...a, noFormItem: !0 },
onChange: _
}, null, 8, ["modelValue", "onUpdate:modelValue", "record"])
])
])) : B("", !0)
], 64))), 64)),
m("div", {
class: "rule-btn-delete absolute top-0 right-0 transition-all w-6 h-6 cursor-pointer rounded-bl-1 flex-center color-white",
onClick: p
}, [
v(b(F), { name: "icon-shanchu1" })
])
]));
}
}), z = { class: "rule-item-main bg-white m-t-2 p-2 rounded border border-solid border-gray-200 hover:border-primary transition-all relative" }, G = {
key: 0,
class: "flex m-t-2 first:m-0"
}, H = { class: "attr-label" }, J = { class: "flex-1" }, X = /* @__PURE__ */ C({
__name: "index",
props: {
modelValue: {
type: Array,
default: void 0
}
},
emits: ["update:modelValue"],
setup(g, { emit: i }) {
const y = g, t = R.getComponent("button"), o = k({
required: !1,
message: "必填项",
type: "string",
trigger: ["change"]
}), f = [
{
type: "switch",
label: "必填项",
model: "required"
},
{
type: "select",
label: "校验时机",
model: "trigger",
show() {
return !!o.value.required;
},
componentProps: {
options: D,
placeholder: "校验时机",
multiple: !0,
mode: "multiple"
}
},
{
type: "select",
label: "类型",
model: "type",
show() {
return !!o.value.required;
},
componentProps: { options: $, placeholder: "类型" }
},
{
type: "input",
label: "校验信息",
model: "message",
show() {
return !!o.value.required;
},
componentProps: { placeholder: "校验信息" }
}
], l = k([]);
j(() => y.modelValue, (n) => {
if (n) {
if (!n)
return;
l.value = [], n.forEach((a) => {
typeof a.required < "u" ? o.value = a : l.value.push(a);
});
}
}, {
immediate: !0
});
function _() {
l.value.push({
message: "",
trigger: ["change"]
}), p();
}
function p() {
if (o.value.required) {
i("update:modelValue", P([...l.value, o.value]));
return;
}
if (l.value.length) {
i("update:modelValue", P(l.value));
return;
}
i("update:modelValue", void 0);
}
function e(n) {
l.value.splice(n, 1), p();
}
return (n, a) => (r(), s("div", null, [
m("div", z, [
(r(), s(c, null, w(f, (u, d) => (r(), s(c, { key: d }, [
!u.show || u.show() ? (r(), s("div", G, [
m("div", H, q(u.label), 1),
m("div", J, [
v(b(U), {
modelValue: o.value[u.model],
"onUpdate:modelValue": (h) => o.value[u.model] = h,
record: { ...u, noFormItem: !0 },
onChange: p
}, null, 8, ["modelValue", "onUpdate:modelValue", "record"])
])
])) : B("", !0)
], 64))), 64))
]),
(r(!0), s(c, null, w(l.value, (u, d) => (r(), E(L, {
key: d,
rule: l.value[d],
"onUpdate:rule": (h) => l.value[d] = h,
onDelete: (h) => e(d),
onChange: p
}, null, 8, ["rule", "onUpdate:rule", "onDelete"]))), 128)),
v(b(t), {
class: "m-t-2",
onClick: _
}, {
default: I(() => [
N(" 添加规则 ")
]),
_: 1
})
]));
}
});
export {
X as default
};