gepic
Version:
基于vue3的设计器,可视化开发页面表单
131 lines (130 loc) • 4.17 kB
JavaScript
import { defineComponent as x, computed as p, inject as P, createElementBlock as o, openBlock as r, createElementVNode as a, Fragment as d, renderList as k, createCommentVNode as O, toDisplayString as C, createVNode as m, unref as u } from "vue";
import j from "../../components/node/src/node.vue.js";
import B from "../../components/icon/src/icon.vue.js";
import { triggerOptions as E, typeOptions as I, lenTypeOptions as i } from "./data.js";
const N = { class: "rule-item-main bg-white m-t-2 p-2 rounded border border-solid border-gray-200 hover:border-primary transition-all relative" }, U = {
key: 0,
class: "flex m-t-2 first:m-0"
}, D = {
class: "epic-attr-label",
title: "校验时机"
}, F = { class: "epic-attr-input" }, T = /* @__PURE__ */ x({
__name: "ERuleItem",
props: {
rule: {}
},
emits: ["change", "delete", "update:rule"],
setup(c, { emit: h }) {
const n = h, y = c, t = p({
get() {
return y.rule;
},
set(e) {
n("update:rule", e);
}
}), b = P("pageManager", {}), v = p(() => Object.entries(b.funcs.value).filter(([e, s]) => typeof s == "function").map(([e]) => ({ label: e, value: e }))), f = [
{
type: "select",
label: "校验时机",
model: "trigger",
componentProps: { options: E, placeholder: "校验时机", multiple: !0, mode: "multiple" }
},
{
type: "switch",
label: "自定义规则",
model: "isValidator"
},
{
type: "select",
label: "校验函数",
model: "validator",
show() {
return !!t.value.isValidator;
},
componentProps: { options: v.value, placeholder: "校验函数" }
},
{
type: "select",
label: "类型",
model: "type",
show() {
return !t.value.isValidator;
},
componentProps: { options: I, placeholder: "类型" }
},
{
type: "input",
label: "正则校验",
model: "pattern",
show() {
return !t.value.isValidator;
},
componentProps: { placeholder: "正则校验" }
},
{
type: "number",
label: "字段长度",
model: "len",
show() {
return i.includes(t.value.type ?? "");
},
componentProps: { min: 0, placeholder: "字段长度" }
},
{
type: "number",
label: "最小长度",
model: "min",
show() {
return i.includes(t.value.type ?? "");
},
componentProps: { min: 0, placeholder: "最小长度" }
},
{
type: "number",
label: "最大长度",
model: "max",
show() {
return i.includes(t.value.type ?? "");
},
componentProps: { min: 0, placeholder: "最大长度" }
},
{
type: "input",
label: "校验信息",
model: "message",
componentProps: { placeholder: "校验信息" }
}
];
function g() {
const e = t.value;
e.isValidator ? (delete e.type, delete e.pattern, delete e.len, delete e.min, delete e.max) : delete e.validator, n("change", e);
}
function _() {
n("delete");
}
return (e, s) => (r(), o("div", N, [
(r(), o(d, null, k(f, (l, w) => (r(), o(d, { key: w }, [
!l.show || l.show() ? (r(), o("div", U, [
a("div", D, C(l.label), 1),
a("div", F, [
m(u(j), {
modelValue: t.value[l.model],
"onUpdate:modelValue": (V) => t.value[l.model] = V,
"component-schema": { ...l, noFormItem: !0 },
onChange: g
}, null, 8, ["modelValue", "onUpdate:modelValue", "component-schema"])
])
])) : O("", !0)
], 64))), 64)),
a("div", {
class: "rule-btn-delete absolute top-0 text-md right-0 transition-all w-24px h-24px cursor-pointer rounded-bl-2 flex justify-center items-center color-white",
onClick: _
}, [
m(u(B), { name: "icon--epic--delete-outline-rounded" })
])
]));
}
});
export {
T as default
};