epic-designer-gold
Version:
基于vue3的设计器,可视化开发页面表单
608 lines (607 loc) • 26 kB
JavaScript
import { defineComponent as oe, ref as O, reactive as re, onMounted as de, openBlock as m, createElementBlock as p, createVNode as t, unref as a, withCtx as s, createElementVNode as n, toDisplayString as v, Fragment as D, renderList as J, normalizeClass as ue, normalizeStyle as se, createTextVNode as V, createCommentVNode as F } from "vue";
import { p as f, E as q } from "./pluginManager-BNLy8dPz.js";
import { ElMessage as L } from "element-plus";
import { _ } from "./icon.vue_vue_type_script_setup_true_lang-D3QdcReY.js";
import { a as ne } from "./index-BNoHh0sx.js";
import { u as ie, a as R } from "./index-B1s67XDZ.js";
const ce = { class: "e-data-source" }, me = { class: "icon-numbers" }, pe = { class: "drawer-content" }, ve = { class: "drawer-content-left" }, fe = ["onClick"], he = { class: "source-item-title" }, ye = ["onClick"], be = { class: "drawer-content-right" }, ge = { class: "content" }, Ve = {
key: 0,
class: "content-empty"
}, _e = {
key: 1,
class: "content-form"
}, Se = { class: "form-flex" }, ke = { class: "form-item" }, Le = { class: "form-item-title" }, Ne = {
key: 0,
class: "form-item-content"
}, Ce = { class: "form-item" }, Ee = { class: "form-item-title" }, we = {
key: 0,
class: "form-item-content"
}, Oe = { class: "form-item" }, Ue = { class: "form-item-title" }, De = {
key: 0,
class: "form-item-content"
}, Je = { class: "content-right-btn" }, Ae = /* @__PURE__ */ oe({
__name: "index",
emits: ["update:modelValue", "update:sourceData"],
setup(qe, { emit: Pe }) {
const { t: r } = ie(), y = f.getComponent("button"), x = f.getComponent("Drawer"), h = f.getComponent("input"), N = f.getComponent("FormItem"), B = f.getComponent("Form"), A = f.getComponent("RadioGroup"), U = f.getComponent("RadioButton");
f.getComponent("select"), f.getComponent("switch");
const P = O(), M = {
GET: "#67c23a",
POST: "#e6a23c",
PUT: "#409eff",
DELETE: "#f56c6c"
}, $ = O(0), j = re({
apiName: [{ required: !0, message: r("pleaseEnterApiName"), trigger: "blur" }],
url: [{ required: !0, message: r("pleaseEnterRequestUrl"), trigger: "blur" }],
dataKey: [{ required: !0, message: r("pleaseEnterLabelKey"), trigger: "blur" }],
dataValue: [{ required: !0, message: r("pleaseEnterValueKey"), trigger: "blur" }]
}), T = O(!1), b = O([]), e = O(), C = [
{
label: "1",
value: "1"
}
];
function z() {
T.value = !0;
}
function I() {
const o = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
return o.charAt(Math.floor(Math.random() * o.length));
}
function G(o) {
let l = "";
for (let d = 0; d < o; d++)
l += I();
return l;
}
function H() {
!e.value || e.value.id || !Object.keys(e.value).length ? (e.value = {
id: "",
url: "",
body: {},
bodyList: [],
apiName: `${r("dataSource")}_${G(5)}`,
method: "get",
params: {},
paramsList: [],
dataKey: "name",
headers: {},
headerList: [],
dataPath: "",
dataValue: "id"
}, b.value.push(e.value)) : e.value.id || K();
}
function Z(o) {
var l;
!e.value || e.value.id || !Object.keys(e.value).length ? (b.value = JSON.parse(JSON.stringify(f.getSourceData())), ((l = e.value) == null ? void 0 : l.id) === o ? e.value = {} : (e.value = b.value.find((d) => d.id === o), e.value.paramsList = Object.keys(JSON.parse(e.value.params)).map((d) => ({
label: d,
value: JSON.parse(e.value.params)[d]
})), e.value.bodyList = Object.keys(JSON.parse(e.value.body)).map((d) => ({
label: d,
value: JSON.parse(e.value.body)[d]
})), e.value.headerList = Object.keys(JSON.parse(e.value.headers)).map((d) => ({
label: d,
value: JSON.parse(e.value.headers)[d]
})))) : K();
}
function Q(o) {
o ? (q.emit("deleteSourceData", o), e.value = {}) : (b.value = b.value.filter((l) => l.id !== o), e.value = {});
}
function W() {
var o;
(o = e.value) == null || o.paramsList.push({
label: "",
value: ""
});
}
function X(o) {
e.value.paramsList.splice(o, 1);
}
function Y() {
var o;
(o = e.value) == null || o.headerList.push({
label: "",
value: ""
});
}
function ee(o) {
e.value.headerList.splice(o, 1);
}
function ae() {
var o;
(o = e.value) == null || o.bodyList.push({
label: "",
value: ""
});
}
function le(o) {
e.value.bodyList.splice(o, 1);
}
de(() => {
b.value = JSON.parse(JSON.stringify(f.getSourceData()));
}), q.on("updateSource", (o) => {
b.value = JSON.parse(JSON.stringify(f.getSourceData()));
});
async function te() {
P.value.validate(async (o) => {
if (o)
try {
const l = {};
e.value.paramsList.forEach((i) => {
l[i.label] = i.value;
});
const d = {};
e.value.bodyList.forEach((i) => {
d[i.label] = i.value;
});
const S = {};
e.value.headerList.forEach((i) => {
S[i.label] = i.value;
});
let g = await ne({
method: e.value.method,
// url: formData.value.url,
// url: "http://localhost:3333/users",
url: e.value.url,
params: l,
data: d,
headers: {
...S,
Authorization: "Bearer " + R.get("Admin-Token"),
lang: R.get("saas-locale") || "zh-CN",
//语言
zone: Intl.DateTimeFormat().resolvedOptions().timeZone
//时区
}
});
if (e.value.dataPath) {
const E = e.value.dataPath.split(".").reduce((k, u) => k[u], g.data);
E && E.length ? L({
message: E.map((k) => ({
label: k[e.value.dataKey],
value: k[e.value.dataValue]
}))
}) : L.info(r("configError"));
} else
g.data && g.data.length ? L({
message: g.data.map((i) => ({
label: i[e.value.dataKey],
value: i[e.value.dataValue]
}))
}) : L.info(r("configError"));
} catch {
L.error(r("requestFailed"));
} finally {
}
else
L.error(r("fillRequiredFields"));
});
}
async function K() {
e.value.body = e.value.bodyList.reduce((o, l) => (o[l.label] = l.value, o), {}), e.value.params = e.value.paramsList.reduce(
(o, l) => (o[l.label] = l.value, o),
{}
), e.value.headers = e.value.headerList.reduce(
(o, l) => (o[l.label] = l.value, o),
{}
), P.value.validate((o) => {
o ? e.value.id ? (q.emit("updateSourceData", {
...e.value,
body: JSON.stringify(e.value.body),
params: JSON.stringify(e.value.params),
headers: JSON.stringify(e.value.headers)
}), e.value = {}) : (q.emit("saveSourceData", {
...e.value,
body: JSON.stringify(e.value.body),
params: JSON.stringify(e.value.params),
headers: JSON.stringify(e.value.headers)
}), e.value = {}) : L.warning(r("completeFormFirst"));
});
}
return (o, l) => (m(), p("div", ce, [
t(a(y), {
class: "btn",
onClick: z
}, {
default: s(() => [
t(a(_), {
name: "icon--epic--window-outline",
class: "mr-4px"
}),
n("span", null, v(a(r)("configuration")), 1),
n("span", me, v($.value || b.value.length), 1)
]),
_: 1
}),
t(a(x), {
size: 960,
modelValue: T.value,
"onUpdate:modelValue": l[7] || (l[7] = (d) => T.value = d),
"append-to-body": "",
title: a(r)("dataSources")
}, {
default: s(() => [
n("div", pe, [
n("div", ve, [
t(a(y), {
type: "primary",
class: "btn",
onClick: H
}, {
default: s(() => [
t(a(_), {
name: "icon--epic--add-rounded",
class: "mr-4px"
}),
n("span", null, v(a(r)("addDataSource")), 1)
]),
_: 1
}),
n("div", null, [
(m(!0), p(D, null, J(b.value, (d) => {
var S;
return m(), p("div", {
class: ue(["source-item", { active: d.id === ((S = e.value) == null ? void 0 : S.id) }]),
key: d.id,
onClick: (g) => Z(d.id)
}, [
n("div", he, [
n("div", {
style: se({
color: M[d.method.toLocaleUpperCase()]
})
}, v(d.method.toLocaleUpperCase()), 5),
n("div", null, v(d.apiName), 1)
]),
n("div", {
onClick: (g) => Q(d.id),
class: "source-item-icon"
}, [
t(a(_), { name: "icon--epic--delete-outline-rounded" })
], 8, ye)
], 10, fe);
}), 128))
])
]),
n("div", be, [
n("div", ge, [
!e.value || !Object.keys(e.value).length ? (m(), p("div", Ve, v(a(r)("pleaseSelectDataSource")), 1)) : (m(), p("div", _e, [
t(a(B), {
ref_key: "ruleFormRef",
ref: P,
model: e.value,
"label-position": "top",
rules: j,
"label-width": 120
}, {
default: s(() => {
var d, S, g, i, E, k;
return [
t(a(N), {
prop: "apiName",
label: a(r)("apiName")
}, {
default: s(() => [
t(a(h), {
clearable: "",
modelValue: e.value.apiName,
"onUpdate:modelValue": l[0] || (l[0] = (u) => e.value.apiName = u),
placeholder: a(r)("pleaseEnterApiName")
}, null, 8, ["modelValue", "placeholder"])
]),
_: 1
}, 8, ["label"]),
t(a(N), {
prop: "url",
label: a(r)("requestUrl")
}, {
default: s(() => [
t(a(h), {
modelValue: e.value.url,
"onUpdate:modelValue": l[1] || (l[1] = (u) => e.value.url = u),
clearable: "",
placeholder: a(r)("pleaseEnterRequestUrl")
}, null, 8, ["modelValue", "placeholder"])
]),
_: 1
}, 8, ["label"]),
t(a(N), {
label: a(r)("requestMethod"),
required: ""
}, {
default: s(() => [
t(a(A), {
modelValue: e.value.method,
"onUpdate:modelValue": l[2] || (l[2] = (u) => e.value.method = u)
}, {
default: s(() => [
t(a(U), {
label: "GET",
value: "get"
}, {
default: s(() => [...l[8] || (l[8] = [
V("GET", -1)
])]),
_: 1
}),
t(a(U), {
label: "POST",
value: "post"
}, {
default: s(() => [...l[9] || (l[9] = [
V("POST", -1)
])]),
_: 1
}),
t(a(U), {
label: "PUT",
value: "put"
}, {
default: s(() => [...l[10] || (l[10] = [
V("PUT", -1)
])]),
_: 1
}),
t(a(U), {
label: "DELETE",
value: "delete"
}, {
default: s(() => [...l[11] || (l[11] = [
V("DELETE", -1)
])]),
_: 1
})
]),
_: 1
}, 8, ["modelValue"])
]),
_: 1
}, 8, ["label"]),
n("div", Se, [
t(a(N), {
prop: "dataKey",
style: { width: "30%" },
label: a(r)("labelKey")
}, {
default: s(() => [
t(a(h), {
modelValue: e.value.dataKey,
"onUpdate:modelValue": l[3] || (l[3] = (u) => e.value.dataKey = u),
clearable: "",
placeholder: a(r)("pleaseEnterLabelKey")
}, null, 8, ["modelValue", "placeholder"])
]),
_: 1
}, 8, ["label"]),
t(a(N), {
prop: "dataValue",
style: { width: "30%" },
label: a(r)("valueKey")
}, {
default: s(() => [
t(a(h), {
modelValue: e.value.dataValue,
"onUpdate:modelValue": l[4] || (l[4] = (u) => e.value.dataValue = u),
clearable: "",
placeholder: a(r)("pleaseEnterValueKey")
}, null, 8, ["modelValue", "placeholder"])
]),
_: 1
}, 8, ["label"]),
t(a(N), {
style: { width: "33%" },
label: a(r)("dataPath")
}, {
default: s(() => [
t(a(h), {
modelValue: e.value.dataPath,
"onUpdate:modelValue": l[5] || (l[5] = (u) => e.value.dataPath = u),
clearable: "",
placeholder: a(r)("nestedPath")
}, null, 8, ["modelValue", "placeholder"])
]),
_: 1
}, 8, ["label"])
]),
n("div", ke, [
n("div", Le, [
n("div", null, v(a(r)("requestParams")), 1),
t(a(y), {
onClick: W,
text: "",
type: "primary",
class: "btn"
}, {
default: s(() => [
t(a(_), { name: "icon--epic--add-rounded" }),
V(" " + v(a(r)("add")), 1)
]),
_: 1
})
]),
(d = e.value) != null && d.paramsList && ((S = e.value) != null && S.paramsList.length) ? (m(), p("div", Ne, [
(m(!0), p(D, null, J(e.value.paramsList, (u, w) => (m(), p("div", {
class: "content-item",
key: u.value
}, [
t(a(h), {
modelValue: u.label,
"onUpdate:modelValue": (c) => u.label = c,
filterable: "",
"allow-create": "",
style: { width: "42%" },
options: C,
placeholder: a(r)("paramName")
}, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"]),
t(a(h), {
modelValue: u.value,
"onUpdate:modelValue": (c) => u.value = c,
filterable: "",
"allow-create": "",
style: { width: "42%" },
options: C,
placeholder: a(r)("paramValue")
}, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"]),
t(a(y), {
onClick: (c) => X(w),
type: "danger",
circle: ""
}, {
default: s(() => [
t(a(_), {
style: { color: "#fff" },
name: "icon--epic--delete-outline-rounded"
})
]),
_: 1
}, 8, ["onClick"])
]))), 128))
])) : F("", !0)
]),
n("div", Ce, [
n("div", Ee, [
n("div", null, v(a(r)("requestHeaders")), 1),
t(a(y), {
onClick: Y,
text: "",
type: "primary",
class: "btn"
}, {
default: s(() => [
t(a(_), { name: "icon--epic--add-rounded" }),
V(" " + v(a(r)("add")), 1)
]),
_: 1
})
]),
(g = e.value) != null && g.headerList && ((i = e.value) != null && i.headerList.length) ? (m(), p("div", we, [
(m(!0), p(D, null, J(e.value.headerList, (u, w) => (m(), p("div", {
class: "content-item",
key: w
}, [
t(a(h), {
modelValue: u.label,
"onUpdate:modelValue": (c) => u.label = c,
filterable: "",
"allow-create": "",
style: { width: "42%" },
options: C,
placeholder: a(r)("paramName")
}, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"]),
t(a(h), {
modelValue: u.value,
"onUpdate:modelValue": (c) => u.value = c,
filterable: "",
"allow-create": "",
style: { width: "42%" },
options: C,
placeholder: a(r)("paramValue")
}, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"]),
t(a(y), {
onClick: (c) => ee(w),
type: "danger",
circle: ""
}, {
default: s(() => [
t(a(_), {
style: { color: "#fff" },
name: "icon--epic--delete-outline-rounded"
})
]),
_: 1
}, 8, ["onClick"])
]))), 128))
])) : F("", !0)
]),
n("div", Oe, [
n("div", Ue, [
n("div", null, v(a(r)("requestBody")), 1),
t(a(y), {
onClick: ae,
text: "",
type: "primary",
class: "btn"
}, {
default: s(() => [
t(a(_), { name: "icon--epic--add-rounded" }),
V(" " + v(a(r)("add")), 1)
]),
_: 1
})
]),
(E = e.value) != null && E.bodyList && ((k = e.value) != null && k.bodyList.length) ? (m(), p("div", De, [
(m(!0), p(D, null, J(e.value.bodyList, (u, w) => (m(), p("div", {
class: "content-item",
key: w
}, [
t(a(h), {
modelValue: u.label,
"onUpdate:modelValue": (c) => u.label = c,
filterable: "",
"allow-create": "",
style: { width: "42%" },
options: C,
placeholder: a(r)("paramName")
}, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"]),
t(a(h), {
modelValue: u.value,
"onUpdate:modelValue": (c) => u.value = c,
filterable: "",
"allow-create": "",
style: { width: "42%" },
options: C,
placeholder: a(r)("paramValue")
}, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"]),
t(a(y), {
onClick: l[6] || (l[6] = (c) => le(o.i)),
type: "danger",
circle: ""
}, {
default: s(() => [
t(a(_), {
style: { color: "#fff" },
name: "icon--epic--delete-outline-rounded"
})
]),
_: 1
})
]))), 128))
])) : F("", !0)
]),
n("div", Je, [
t(a(y), {
type: "info",
onClick: te
}, {
default: s(() => [
V(v(a(r)("requestTest")), 1)
]),
_: 1
}),
t(a(y), {
type: "primary",
onClick: K
}, {
default: s(() => [
V(v(a(r)("save")), 1)
]),
_: 1
})
])
];
}),
_: 1
}, 8, ["model", "rules"])
]))
])
])
])
]),
_: 1
}, 8, ["modelValue", "title"])
]));
}
});
export {
Ae as default
};