form-designer-xinyi
Version:
基于vue3的设计器,可视化开发页面表单
619 lines (618 loc) • 21.3 kB
JavaScript
import { defineComponent as U, inject as E, computed as C, openBlock as u, createElementBlock as V, createVNode as r, unref as e, withCtx as d, createElementVNode as p, normalizeStyle as W, createBlock as w, createCommentVNode as O, createTextVNode as k, Fragment as S, renderList as I, toDisplayString as T, withModifiers as q, watch as z, pushScopeId as Q, popScopeId as G, ref as F } from "vue";
import { Space as B, Select as A, Checkbox as M, Popover as H, Dropdown as K, Menu as X, MenuItem as Y, Switch as Z, Button as P, Drawer as ee, Card as te, Divider as R, Badge as le } from "ant-design-vue";
import { e as L, _ as N } from "./index-DWpaTBDO.js";
import { f as j, j as oe } from "./revoke-iScTU0eW.js";
import { Q as ne } from "./QuestionCircleOutlined-Ou8kGTML.js";
import { _ as ae } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const se = { class: "mb-2 w-full" }, de = { class: "flex items-center w-390px" }, re = /* @__PURE__ */ p("span", { class: "iconfont epic-icon-shanchu1" }, null, -1), ie = [
re
], ue = /* @__PURE__ */ U({
__name: "actionItem",
props: {
modelValue: {},
fieldOptions: {},
triggerOptions: {}
},
emits: ["update:modelValue", "delete"],
setup(_, { emit: b }) {
const g = E("designer"), h = b, m = _, t = L(m, "modelValue", h), y = C(() => g.state.checkedNode);
console.log("checkedNode", y);
const n = C(() => j(
[y.value],
(o) => o.id && o.id === t.value.field,
!0
));
function c() {
h("delete");
}
function x(s, o) {
var l;
return (l = o.label) == null ? void 0 : l.toLowerCase().includes(s.toLowerCase());
}
const f = [
"文本模板内置函数：",
"$replace: 子字符串替换，$replace(text, search, replace)",
"$upper: 转大写，$upper(text)",
"$lower: 转小写，$lower(text)",
"$substr: 截取字符串，$substr(text, start, end?)",
"$nl2br: 换行符转，$nl2br(text)",
"$trim: 去除首尾空格，$trim(text)",
"$length: 获取长度，$length(textOrArray)",
"$br: 返回换行符，$br()",
"$includes: 判断是否包含子字符串，$includes(field, search)",
"$today: 获取当前日期，$today()",
"$dateDiff: 计算日期之间天数，$dateDiff(startDate, endDate, inclusive?)",
"$get: 获取表单字段值，$get(pathStr, defaultValue?)"
];
return (s, o) => (u(), V("div", se, [
r(e(B), null, {
default: d(() => {
var l, i;
return [
r(e(A), {
class: "w-150px",
value: e(t).trigger,
"onUpdate:value": o[0] || (o[0] = (a) => e(t).trigger = a),
options: m.triggerOptions,
placeholder: "选择动作"
}, null, 8, ["value", "options"]),
p("div", de, [
r(e(A), {
"show-search": "",
"filter-option": x,
"allow-clear": "",
style: W({ width: e(t).trigger === "setValue" && e(t).field ? "210px" : "100%" }),
value: e(t).field,
"onUpdate:value": o[1] || (o[1] = (a) => e(t).field = a),
options: m.fieldOptions,
placeholder: "选择字段",
onChange: o[2] || (o[2] = (a) => e(t).value = void 0)
}, null, 8, ["style", "value", "options"]),
e(t).trigger === "setValue" && e(t).field ? (u(), w(e(N), {
key: e(t).field,
class: "w-240px ml-2",
modelValue: e(t).value,
"onUpdate:modelValue": o[3] || (o[3] = (a) => e(t).value = a),
"component-schema": {
...n.value,
noFormItem: !0,
componentProps: { ...n.value.componentProps, defaultValue: void 0, disabled: void 0, hidden: void 0 }
}
}, null, 8, ["modelValue", "component-schema"])) : O("", !0),
e(t).trigger === "setCategoryCode" && ((l = n.value) != null && l.componentProps) && ((i = n.value) != null && i.componentProps.hasOwnProperty("pcode")) ? (u(), w(e(N), {
key: e(t).field,
class: "w-240px ml-2",
modelValue: e(t).value,
"onUpdate:modelValue": o[4] || (o[4] = (a) => e(t).value = a),
"component-schema": {
...n.value,
noFormItem: !0,
type: "textarea",
componentProps: { ...n.value.componentProps, defaultValue: void 0, disabled: void 0, hidden: void 0 }
}
}, null, 8, ["modelValue", "component-schema"])) : O("", !0),
e(t).trigger === "addValue" && e(t).field && (e(t).field.split("_")[0] == "checkbox" || e(t).field.split("_")[0] == "xyTextArea" || e(t).field.split("_")[0] == "xyInput") ? (u(), w(e(N), {
key: e(t).field,
class: "w-240px ml-2",
modelValue: e(t).value,
"onUpdate:modelValue": o[5] || (o[5] = (a) => e(t).value = a),
"component-schema": {
...n.value,
noFormItem: !0,
componentProps: { ...n.value.componentProps, defaultValue: void 0, disabled: void 0, hidden: void 0 }
}
}, null, 8, ["modelValue", "component-schema"])) : O("", !0),
e(t).trigger !== "setValue" ? (u(), w(e(M), {
key: 3,
checked: e(t).reverseExecute,
"onUpdate:checked": o[6] || (o[6] = (a) => e(t).reverseExecute = a),
class: "ml-2 w-120px"
}, {
default: d(() => [
k("否则不")
]),
_: 1
}, 8, ["checked"])) : e(t).trigger === "setValue" && e(t).field ? (u(), V(S, { key: 4 }, [
r(e(H), null, {
content: d(() => [
(u(), V(S, null, I(f, (a, v) => p("div", null, T(v + 1 + "." + a), 1)), 64))
]),
default: d(() => [
r(e(ne), { class: "ant-form-item__suffix" })
]),
_: 1
}),
r(e(M), {
checked: e(t).arrowInitExecute,
"onUpdate:checked": o[7] || (o[7] = (a) => e(t).arrowInitExecute = a),
class: "ml-2 w-120px"
}, {
default: d(() => [
k("允许初始执行")
]),
_: 1
}, 8, ["checked"])
], 64)) : O("", !0)
]),
p("div", {
class: "w-28px h-28px cursor-pointer bg-red-100 text-red-400 hover:bg-red-400 border-solid border-1px border-red-300 rounded-full flex justify-center items-center hover:text-white",
onClick: c
}, ie)
];
}),
_: 1
})
]));
}
}), ce = /* @__PURE__ */ p("span", { class: "iconfont epic-icon-tianjia" }, null, -1), pe = /* @__PURE__ */ U({
__name: "actionEdit",
props: {
modelValue: {}
},
emits: ["update:modelValue"],
setup(_, { emit: b }) {
const g = E("designer"), h = C(() => g.state.checkedNode), m = C(() => {
const s = j(
[h.value],
(l) => {
var i, a;
return l.type === "form" && (((i = l.componentProps) == null ? void 0 : i.name) ?? l.name === ((a = h.value) == null ? void 0 : a.componentProps.name));
},
!0
);
return j(
(s == null ? void 0 : s.children) ?? [],
(l) => !!l.input || ["text", "downLoad", "card"].includes(l.type),
!1,
(l) => l.type !== "subform"
).map((l) => {
var i;
return {
label: ["text"].includes(l.type) ? (i = l.componentProps) == null ? void 0 : i.defaultValue : l.label,
value: l.id
};
}).reverse();
}), t = [
{ label: "隐藏", value: "hide" },
{ label: "显示", value: "show" },
{ label: "必填", value: "required" },
{ label: "非必填", value: "notRequired" },
{ label: "只读", value: "readonly" },
{ label: "可写", value: "readWrite" },
{ label: "禁用", value: "disabled" },
{ label: "启用", value: "enabled" },
{ label: "设置值", value: "setValue" },
{ label: "设置分类编码", value: "setCategoryCode" },
{ label: "追加值", value: "addValue" }
], c = L(_, "modelValue", b);
function x(s) {
c.value.push({
trigger: s
});
}
function f(s) {
c.value.splice(s, 1);
}
return (s, o) => (u(), V("div", null, [
(u(!0), V(S, null, I(e(c), (l, i) => (u(), w(ue, {
modelValue: e(c)[i],
"onUpdate:modelValue": (a) => e(c)[i] = a,
key: i,
fieldOptions: m.value,
triggerOptions: t,
onDelete: (a) => f(i)
}, null, 8, ["modelValue", "onUpdate:modelValue", "fieldOptions", "onDelete"]))), 128)),
r(e(K), null, {
overlay: d(() => [
r(e(X), null, {
default: d(() => [
(u(), V(S, null, I(t, (l) => r(e(Y), {
onClick: (i) => x(l.value),
key: l.value
}, {
default: d(() => [
k(T(l.label), 1)
]),
_: 2
}, 1032, ["onClick"])), 64))
]),
_: 1
})
]),
default: d(() => [
p("span", {
class: "ant-dropdown-link cursor-pointer text-blue-500",
onClick: o[0] || (o[0] = q(() => {
}, ["prevent"]))
}, [
ce,
k(" 添加动作 ")
])
]),
_: 1
})
]));
}
}), me = { class: "mb-4" }, ve = /* @__PURE__ */ p("span", { class: "iconfont epic-icon-shanchu1" }, null, -1), fe = [
ve
], he = /* @__PURE__ */ U({
__name: "conditionItem",
props: {
modelValue: {},
fieldOptions: {}
},
emits: ["update:modelValue", "delete"],
setup(_, { emit: b }) {
const g = E("designer"), h = b, m = _, t = L(m, "modelValue", h), y = C(() => g.state.checkedNode), n = C(() => j(
[y.value],
($) => $.field === t.value.field,
!0
)), c = [
{
label: "等于",
value: "eq"
},
{
label: "不等于",
value: "neq"
}
], x = [
{
label: "大于",
value: "gt"
},
{
label: "大于等于",
value: "gte"
},
{
label: "小于",
value: "lt"
},
{
label: "小于等于",
value: "lte"
}
], f = [
{
label: "包含",
value: "in"
},
{
label: "不包含",
value: "nin"
}
], s = [
{
label: "开头是",
value: "startsWith"
},
{
label: "结尾是",
value: "endsWith"
},
{
label: "开头不是",
value: "notStartsWith"
},
{
label: "结尾不是",
value: "notEndsWith"
}
], o = [
...c.map((v) => v.value),
...x.map((v) => v.value),
...f.map((v) => v.value)
], l = [
...s.map((v) => v.value)
], i = C(() => {
const v = [
{
label: "为空",
value: "null"
},
{
label: "非空",
value: "notNull"
},
...s
];
return ["input", "textarea", "password", "select", "checkbox", "JSelectMultiple", "xyInput", "xyTextArea", "JAreaSelect"].includes(n.value.type) && v.unshift(...f), ["number"].includes(n.value.type) && v.unshift(...x), [
"xyTextArea",
"input",
"input",
"number",
"textarea",
"password",
"radio",
"checkbox",
"select",
"slider",
"time",
"date",
"cascader",
"switch",
"color-picker",
"JSelectDept",
"JSelectMultiple",
"JDictSelectTag",
"classifiedDictionary",
"selectUser",
"xyRadio"
].includes(n.value.type) && v.unshift(...c), v;
});
z(
() => i.value,
(v) => {
t.value.operator = v[0].value;
}
);
function a() {
h("delete");
}
return (v, $) => (u(), V("div", me, [
r(e(B), null, {
default: d(() => [
r(e(A), {
class: "w-180px",
value: e(t).field,
"onUpdate:value": $[0] || ($[0] = (D) => e(t).field = D),
options: m.fieldOptions,
placeholder: "选择字段"
}, null, 8, ["value", "options"]),
e(t).field ? (u(), w(e(A), {
key: 0,
value: e(t).operator,
"onUpdate:value": $[1] || ($[1] = (D) => e(t).operator = D),
class: "w-100px",
options: i.value,
placeholder: "选择判断条件"
}, null, 8, ["value", "options"])) : O("", !0),
e(t).field && e(t).operator && o.includes(e(t).operator) ? (u(), w(e(N), {
key: 1,
modelValue: e(t).value,
"onUpdate:modelValue": $[2] || ($[2] = (D) => e(t).value = D),
"component-schema": {
...n.value,
noFormItem: !0,
componentProps: { ...n.value.componentProps, defaultValue: void 0, disabled: void 0, hidden: void 0 }
}
}, null, 8, ["modelValue", "component-schema"])) : O("", !0),
e(t).field && e(t).operator && l.includes(e(t).operator) ? (u(), w(e(N), {
key: 2,
modelValue: e(t).value,
"onUpdate:modelValue": $[3] || ($[3] = (D) => e(t).value = D),
"component-schema": {
...n.value,
noFormItem: !0,
type: "textarea",
componentProps: { ...n.value.componentProps, defaultValue: void 0, disabled: void 0, hidden: void 0 }
}
}, null, 8, ["modelValue", "component-schema"])) : O("", !0),
p("div", {
class: "w-28px h-28px cursor-pointer bg-red-100 text-red-400 hover:bg-red-400 border-solid border-1px border-red-300 rounded-full flex justify-center items-center hover:text-white",
onClick: a
}, fe)
]),
_: 1
})
]));
}
}), J = (_) => (Q("data-v-9db78388"), _ = _(), G(), _), _e = { class: "flex" }, xe = {
key: 0,
class: "logical-operator"
}, Ve = /* @__PURE__ */ J(() => /* @__PURE__ */ p("div", { class: "logical-operator__line" }, null, -1)), be = { class: "flex-1" }, ge = /* @__PURE__ */ J(() => /* @__PURE__ */ p("span", { class: "iconfont epic-icon-tianjia mr-1" }, null, -1)), ke = /* @__PURE__ */ U({
__name: "conditionEdit",
props: {
modelValue: {}
},
emits: ["update:modelValue"],
setup(_, { emit: b }) {
const g = E("designer"), h = C(() => g.state.checkedNode), m = C(() => {
var f;
return oe([h.value], (f = h.value) == null ? void 0 : f.componentProps.name).map((s) => ({ label: s.label, value: s.field })).reverse();
}), n = L(_, "modelValue", b);
function c() {
n.value.conditions.push({});
}
function x(f) {
n.value.conditions.splice(f, 1);
}
return (f, s) => (u(), V("div", _e, [
e(n).conditions.length ? (u(), V("div", xe, [
Ve,
r(e(Z), {
checked: e(n).operator,
"onUpdate:checked": s[0] || (s[0] = (o) => e(n).operator = o),
"checked-children": "且",
checkedValue: "and",
unCheckedValue: "or",
"un-checked-children": "或"
}, null, 8, ["checked"])
])) : O("", !0),
p("div", be, [
(u(!0), V(S, null, I(e(n).conditions, (o, l) => (u(), w(he, {
modelValue: e(n).conditions[l],
"onUpdate:modelValue": (i) => e(n).conditions[l] = i,
key: l,
fieldOptions: m.value,
onDelete: (i) => x(l)
}, null, 8, ["modelValue", "onUpdate:modelValue", "fieldOptions", "onDelete"]))), 128)),
r(e(P), {
class: "w-100%",
type: "dashed",
onClick: c
}, {
icon: d(() => [
ge
]),
default: d(() => [
k(" 添加条件 ")
]),
_: 1
})
])
]));
}
}), we = /* @__PURE__ */ ae(ke, [["__scopeId", "data-v-9db78388"]]), ye = { class: "epic-drawer-container h-full" }, $e = { class: "h-full flex flex-col" }, Ce = { class: "px-16px" }, Oe = /* @__PURE__ */ p("span", { class: "iconfont epic-icon-tianjia mr-1" }, null, -1), De = { class: "mt-2 flex-1 overflow-auto px-16px" }, Se = ["onClick"], Ue = /* @__PURE__ */ p("span", { class: "iconfont epic-icon-tianjia" }, null, -1), Pe = [
Ue
], Ne = { class: "epic-modal-footer" }, Ie = /* @__PURE__ */ U({
__name: "drawer",
emits: ["ok"],
setup(_, { expose: b, emit: g }) {
const h = g, m = F(!1), t = F([]);
function y(s = []) {
t.value = s, m.value = !0;
}
function n() {
t.value.push({
actions: [],
condition: {
conditions: [],
operator: "and"
}
});
}
function c(s) {
t.value.splice(s, 1);
}
function x() {
m.value = !1;
}
function f() {
h("ok", t.value), x();
}
return b({ showDrawer: y }), (s, o) => (u(), w(e(ee), {
class: "epic-drawer-form-logic",
width: "650px",
title: "逻辑规则",
open: m.value,
"onUpdate:open": o[0] || (o[0] = (l) => m.value = l)
}, {
default: d(() => [
p("div", ye, [
p("div", $e, [
p("div", Ce, [
r(e(P), {
class: "w-full",
type: "primary",
onClick: n
}, {
icon: d(() => [
Oe
]),
default: d(() => [
k(" 添加逻辑规则 ")
]),
_: 1
})
]),
p("div", De, [
(u(!0), V(S, null, I(t.value, (l, i) => (u(), w(e(te), {
key: i,
class: "mt-2",
bodyStyle: { padding: "16px" }
}, {
default: d(() => [
p("div", {
class: "absolute top-8px right-8px cursor-pointer rounded-full w-24px h-24px text-16px flex items-center justify-center hover:bg-gray-100 rotate-45",
onClick: (a) => c(i)
}, Pe, 8, Se),
r(e(R), null, {
default: d(() => [
k("当满足以下条件时")
]),
_: 1
}),
r(we, {
modelValue: l.condition,
"onUpdate:modelValue": (a) => l.condition = a
}, null, 8, ["modelValue", "onUpdate:modelValue"]),
r(e(R), null, {
default: d(() => [
k("则执行")
]),
_: 1
}),
r(pe, {
modelValue: l.actions,
"onUpdate:modelValue": (a) => l.actions = a
}, null, 8, ["modelValue", "onUpdate:modelValue"])
]),
_: 2
}, 1024))), 128))
])
])
]),
p("div", Ne, [
r(e(B), { align: "end" }, {
default: d(() => [
r(e(P), { onClick: x }, {
default: d(() => [
k("关闭")
]),
_: 1
}),
r(e(P), {
type: "primary",
onClick: f
}, {
default: d(() => [
k(" 确定 ")
]),
_: 1
})
]),
_: 1
})
])
]),
_: 1
}, 8, ["open"]));
}
}), Ee = /* @__PURE__ */ p("span", { class: "iconfont epic-icon-shezhi mr-1" }, null, -1), Re = /* @__PURE__ */ U({
__name: "formLogic",
props: {
modelValue: {}
},
emits: ["update:modelValue"],
setup(_, { emit: b }) {
const g = E("pageSchema"), h = _, m = F(), t = b;
function y() {
var c;
(c = m.value) == null || c.showDrawer(h.modelValue);
}
function n(c) {
t("update:modelValue", c), g.logicRules = c;
}
return (c, x) => {
var f;
return u(), V("div", null, [
r(e(le), {
count: ((f = h.modelValue) == null ? void 0 : f.length) ?? 0
}, {
default: d(() => [
r(e(P), { onClick: y }, {
icon: d(() => [
Ee
]),
default: d(() => [
k(" 配置")
]),
_: 1
})
]),
_: 1
}, 8, ["count"]),
r(Ie, {
onOk: n,
ref_key: "drawerRef",
ref: m
}, null, 512)
]);
};
}
});
export {
Re as default
};