@tuoyuan/json-schema
Version:
json-schema编辑器及表单组件
428 lines (427 loc) • 20.9 kB
JavaScript
import { defineComponent as ue, mergeModels as G, useModel as me, getCurrentInstance as se, ref as H, computed as U, onMounted as de, resolveComponent as m, openBlock as o, createElementBlock as r, Fragment as s, createBlock as i, createCommentVNode as d, createVNode as y, withCtx as u, createElementVNode as f, createTextVNode as b, toDisplayString as S, resolveDynamicComponent as pe, mergeProps as fe, renderList as N, unref as ce } from "vue";
import { getTrueType as F, convertStringInArray as ve, setFormData as ge } from "../../utils/utils.js";
const ye = {
key: 0,
class: "arco-form-item-label"
}, be = { key: 1 }, Ne = {
key: 0,
class: "arco-form-item-label"
}, Ve = {
key: 0,
class: "form-item-wrapper"
}, ke = { class: "form-item-title" }, Ce = { class: "form-item-content" }, _e = {
key: 0,
class: "form-item-wrapper"
}, we = { class: "form-item-title" }, he = { class: "form-item-content" }, Ue = { class: "form-item-content-item-toolbar" }, Ie = /* @__PURE__ */ ue({
name: "JsonSchemaFormItem",
__name: "form-item",
props: /* @__PURE__ */ G({
// 字段名
fieldName: {
type: String,
required: !0
},
// 配置项
options: {
type: Object,
required: !0
},
// 父节点字段名（未使用，可能存在传值错误）
parentFieldName: {
type: String
},
// 父节点
parent: {
type: Object,
required: !0
},
// 面包屑
breadcrumb: {
type: String
},
// 表单组件列表
widgets: {
type: Array,
default: () => []
}
}, {
modelValue: { type: Object, required: !0 },
modelModifiers: {}
}),
emits: /* @__PURE__ */ G(["change"], ["update:modelValue"]),
setup(I, { emit: K }) {
const a = me(I, "modelValue"), e = I, j = K;
se();
const c = H(""), D = H({}), $ = U(() => (n) => {
let l = [];
return n.order ? l = n.order : l = Object.keys(n.properties), l;
});
U(() => {
let n = [];
return e.options.order ? n = e.options.order : n = Object.keys(e.options.properties), n;
}), de(() => {
c.value = F(e.options.type);
});
const q = U(() => e.parent.required ? e.parent.required.includes(e.fieldName) : !1), x = U(() => e.widgets.find((n) => n.type === e.options.widget.type)), p = (n) => {
j("change");
}, k = () => {
delete a.value[e.fieldName];
}, Q = (n) => {
c.value === "array" && ["number", "integer"].includes(F(e.options.items.type)) && ve(a.value[e.fieldName], n);
}, R = () => {
const n = {};
ge(n, e.options.items.properties), a.value[e.fieldName].push(n), j("change");
}, M = (n, l, V) => {
const C = n.splice(l, 1, n[V]);
return n[V] = C[0], n;
}, W = (n, l) => {
M(a.value[e.fieldName], l, l - 1);
}, X = (n, l) => {
M(a.value[e.fieldName], l, l + 1);
}, Y = (n, l) => {
a.value[e.fieldName].push(JSON.parse(JSON.stringify(n)));
}, Z = (n, l) => {
a.value[e.fieldName].splice(l, 1);
}, L = () => {
j("change");
};
return (n, l) => {
var T, A, z, P;
const V = m("a-col"), C = m("a-form-item"), w = m("a-option"), h = m("a-select"), O = m("a-date-picker"), ee = m("a-time-picker"), le = m("a-input"), B = m("a-input-number"), te = m("a-switch"), E = m("JsonSchemaFormItem"), J = m("a-row"), oe = m("a-divider"), _ = m("a-button"), ae = m("a-space"), ne = m("icon-plus"), ie = m("a-input-tag");
return o(), r(s, null, [
(T = e.options.layout) != null && T.start ? (o(), i(V, { key: 0 })) : d("", !0),
y(V, {
class: "schema-form-item-col",
span: ((A = e.options.layout) == null ? void 0 : A.span) || 24,
offset: (z = e.options.layout) == null ? void 0 : z.offset
}, {
default: u(() => [
e.options.widget ? (o(), i(C, {
key: 0,
field: e.breadcrumb,
label: e.options.title,
tooltip: e.options.description
}, {
label: u(() => [
q.value ? (o(), r("label", ye, [
l[15] || (l[15] = f("strong", { class: "arco-form-item-label-required-symbol" }, [
f("svg", {
fill: "currentColor",
viewBox: "0 0 1024 1024",
width: "1em",
height: "1em"
}, [
f("path", { d: "M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z" })
])
], -1)),
b(" " + S(e.options.title), 1)
])) : d("", !0)
]),
default: u(() => [
x.value ? (o(), i(pe(x.value.component), fe({
key: 0,
modelValue: a.value[e.fieldName],
"onUpdate:modelValue": l[0] || (l[0] = (t) => a.value[e.fieldName] = t)
}, e.options.widget.attrs, {
onChange: p,
onClear: k
}), null, 16, ["modelValue"])) : (o(), r("div", be, "未知组件"))
]),
_: 1
}, 8, ["field", "label", "tooltip"])) : (o(), r(s, { key: 1 }, [
["string", "number", "integer", "boolean"].includes(c.value) ? (o(), i(C, {
key: 0,
field: e.breadcrumb,
label: e.options.title,
tooltip: e.options.description,
rules: D.value
}, {
label: u(() => [
q.value ? (o(), r("label", Ne, [
l[16] || (l[16] = f("strong", { class: "arco-form-item-label-required-symbol" }, [
f("svg", {
fill: "currentColor",
viewBox: "0 0 1024 1024",
width: "1em",
height: "1em"
}, [
f("path", { d: "M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z" })
])
], -1)),
b(" " + S(e.options.title), 1)
])) : d("", !0)
]),
default: u(() => [
c.value === "string" ? (o(), r(s, { key: 0 }, [
e.options.enum ? (o(), i(h, {
key: 0,
modelValue: a.value[e.fieldName],
"onUpdate:modelValue": l[1] || (l[1] = (t) => a.value[e.fieldName] = t),
"allow-clear": "",
"trigger-props": { contentClass: "json-schema-form-select" },
onChange: p,
onClear: k
}, {
default: u(() => [
(o(!0), r(s, null, N(e.options.enum, (t) => (o(), i(w, {
key: t,
value: t,
label: e.options.enumDescriptions && e.options.enumDescriptions[t] || t
}, null, 8, ["value", "label"]))), 128))
]),
_: 1
}, 8, ["modelValue"])) : e.options.format === "date" ? (o(), i(O, {
key: 1,
modelValue: a.value[e.fieldName],
"onUpdate:modelValue": l[2] || (l[2] = (t) => a.value[e.fieldName] = t),
"allow-clear": "",
onChange: p,
onClear: k
}, null, 8, ["modelValue"])) : e.options.format === "time" ? (o(), i(ee, {
key: 2,
modelValue: a.value[e.fieldName],
"onUpdate:modelValue": l[3] || (l[3] = (t) => a.value[e.fieldName] = t),
"allow-clear": "",
onChange: p,
onClear: k
}, null, 8, ["modelValue"])) : e.options.format === "date-time" ? (o(), i(O, {
key: 3,
modelValue: a.value[e.fieldName],
"onUpdate:modelValue": l[4] || (l[4] = (t) => a.value[e.fieldName] = t),
"show-time": "",
"time-picker-props": { defaultValue: "00:00:00" },
"allow-clear": "",
onChange: p,
onClear: k
}, null, 8, ["modelValue"])) : (o(), i(le, {
key: 4,
modelValue: a.value[e.fieldName],
"onUpdate:modelValue": l[5] || (l[5] = (t) => a.value[e.fieldName] = t),
onChange: p
}, null, 8, ["modelValue"]))
], 64)) : d("", !0),
c.value === "number" ? (o(), r(s, { key: 1 }, [
e.options.enum ? (o(), i(h, {
key: 0,
modelValue: a.value[e.fieldName],
"onUpdate:modelValue": l[6] || (l[6] = (t) => a.value[e.fieldName] = t),
"allow-clear": "",
"trigger-props": { contentClass: "json-schema-form-select" },
onChange: p
}, {
default: u(() => [
(o(!0), r(s, null, N(e.options.enum, (t) => (o(), i(w, {
key: t,
value: t,
label: e.options.enumDescriptions && e.options.enumDescriptions[t] || String(t)
}, null, 8, ["value", "label"]))), 128))
]),
_: 1
}, 8, ["modelValue"])) : (o(), i(B, {
key: 1,
modelValue: a.value[e.fieldName],
"onUpdate:modelValue": l[7] || (l[7] = (t) => a.value[e.fieldName] = t),
mode: "button",
min: e.options.minimum,
max: e.options.maximum,
onChange: p
}, null, 8, ["modelValue", "min", "max"]))
], 64)) : d("", !0),
c.value === "integer" ? (o(), r(s, { key: 2 }, [
e.options.enum ? (o(), i(h, {
key: 0,
modelValue: a.value[e.fieldName],
"onUpdate:modelValue": l[8] || (l[8] = (t) => a.value[e.fieldName] = t),
"allow-clear": "",
"trigger-props": { contentClass: "json-schema-form-select" },
onChange: p
}, {
default: u(() => [
(o(!0), r(s, null, N(e.options.enum, (t) => (o(), i(w, {
key: t,
value: t,
label: e.options.enumDescriptions && e.options.enumDescriptions[t] || String(t)
}, null, 8, ["value", "label"]))), 128))
]),
_: 1
}, 8, ["modelValue"])) : (o(), i(B, {
key: 1,
modelValue: a.value[e.fieldName],
"onUpdate:modelValue": l[9] || (l[9] = (t) => a.value[e.fieldName] = t),
mode: "button",
min: e.options.minimum,
max: e.options.maximum,
step: 1,
precision: 0,
onChange: p
}, null, 8, ["modelValue", "min", "max"]))
], 64)) : d("", !0),
c.value === "boolean" ? (o(), i(te, {
key: 3,
modelValue: a.value[e.fieldName],
"onUpdate:modelValue": l[10] || (l[10] = (t) => a.value[e.fieldName] = t),
onChange: p
}, null, 8, ["modelValue"])) : d("", !0)
]),
_: 1
}, 8, ["field", "label", "tooltip", "rules"])) : d("", !0),
["array", "object"].includes(c.value) ? (o(), r(s, { key: 1 }, [
c.value === "object" ? (o(), r("div", Ve, [
f("div", ke, S(e.options.title), 1),
f("div", Ce, [
y(J, null, {
default: u(() => [
(o(!0), r(s, null, N($.value(e.options), (t, v) => (o(), i(E, {
key: t,
modelValue: a.value[e.fieldName],
"onUpdate:modelValue": l[11] || (l[11] = (g) => a.value[e.fieldName] = g),
fieldName: t,
options: e.options.properties[t],
parentFieldName: e.fieldName,
parent: e.options,
breadcrumb: `${e.breadcrumb}[${t}]`,
widgets: e.widgets,
onChange: L
}, null, 8, ["modelValue", "fieldName", "options", "parentFieldName", "parent", "breadcrumb", "widgets"]))), 128))
]),
_: 1
})
])
])) : d("", !0),
c.value === "array" ? (o(), r(s, { key: 1 }, [
ce(F)(e.options.items.type) === "object" ? (o(), r("div", _e, [
f("div", we, S(e.options.title), 1),
f("div", he, [
(o(!0), r(s, null, N(a.value[e.fieldName], (t, v) => (o(), r("div", {
key: v,
class: "form-item-content-item"
}, [
f("div", Ue, [
y(ae, { size: 0 }, {
split: u(() => [
y(oe, { direction: "vertical" })
]),
default: u(() => [
v != 0 ? (o(), i(_, {
key: 0,
type: "text",
onClick: (g) => W(t, v)
}, {
default: u(() => l[17] || (l[17] = [
b("上移")
])),
_: 2
}, 1032, ["onClick"])) : d("", !0),
v != a.value[e.fieldName].length - 1 ? (o(), i(_, {
key: 1,
type: "text",
onClick: (g) => X(t, v)
}, {
default: u(() => l[18] || (l[18] = [
b(" 下移 ")
])),
_: 2
}, 1032, ["onClick"])) : d("", !0),
y(_, {
type: "text",
onClick: (g) => Y(t)
}, {
default: u(() => l[19] || (l[19] = [
b("复制")
])),
_: 2
}, 1032, ["onClick"]),
y(_, {
type: "text",
status: "danger",
onClick: (g) => Z(t, v)
}, {
default: u(() => l[20] || (l[20] = [
b("删除")
])),
_: 2
}, 1032, ["onClick"])
]),
_: 2
}, 1024)
]),
y(J, null, {
default: u(() => [
(o(!0), r(s, null, N($.value(e.options.items), (g, Se) => (o(), i(E, {
key: g,
modelValue: a.value[e.fieldName][v],
"onUpdate:modelValue": (re) => a.value[e.fieldName][v] = re,
fieldName: g,
options: e.options.items.properties[g],
parentFieldName: e.fieldName,
parent: e.options.items,
breadcrumb: `${e.breadcrumb}[${v}][${g}]`,
widgets: e.widgets,
onChange: L
}, null, 8, ["modelValue", "onUpdate:modelValue", "fieldName", "options", "parentFieldName", "parent", "breadcrumb", "widgets"]))), 128))
]),
_: 2
}, 1024)
]))), 128)),
y(_, {
long: "",
onClick: l[12] || (l[12] = (t) => R())
}, {
icon: u(() => [
y(ne)
]),
default: u(() => [
l[21] || (l[21] = b(" 新增 "))
]),
_: 1
})
])
])) : (o(), i(C, {
key: 1,
field: e.breadcrumb,
label: e.options.title,
tooltip: e.options.description,
rules: D.value
}, {
default: u(() => [
e.options.items.enum ? (o(), i(h, {
key: 0,
modelValue: a.value[e.fieldName],
"onUpdate:modelValue": l[13] || (l[13] = (t) => a.value[e.fieldName] = t),
multiple: "",
"allow-clear": "",
"trigger-props": { contentClass: "json-schema-form-select" },
onChange: p
}, {
default: u(() => [
(o(!0), r(s, null, N(e.options.items.enum, (t) => (o(), i(w, {
key: t,
label: t,
value: t
}, null, 8, ["label", "value"]))), 128))
]),
_: 1
}, 8, ["modelValue"])) : (o(), i(ie, {
key: 1,
modelValue: a.value[e.fieldName],
"onUpdate:modelValue": l[14] || (l[14] = (t) => a.value[e.fieldName] = t),
onPressEnter: Q,
onChange: p
}, null, 8, ["modelValue"]))
]),
_: 1
}, 8, ["field", "label", "tooltip", "rules"]))
], 64)) : d("", !0)
], 64)) : d("", !0)
], 64))
]),
_: 1
}, 8, ["span", "offset"]),
(P = e.options.layout) != null && P.end ? (o(), i(V, { key: 1 })) : d("", !0)
], 64);
};
}
});
export {
Ie as default
};