gepic
Version:
基于vue3的设计器,可视化开发页面表单
159 lines (158 loc) • 7.07 kB
JavaScript
import { defineComponent as B, ref as r, inject as N, computed as v, reactive as j, createBlock as g, openBlock as s, unref as h, withCtx as A, createElementVNode as a, createTextVNode as K, normalizeClass as I, createVNode as T, createElementBlock as y, withDirectives as z, Fragment as F, renderList as L, toDisplayString as R, vShow as q, nextTick as G, toRaw as H } from "vue";
import { pluginManager as p } from "../../../../utils/manager/pluginManager.js";
import "@vueuse/core";
import "../../../../hooks/store/index.js";
import { findSchemaById as J, deepClone as P } from "../../../../utils/common/data.js";
import { getUUID as Q } from "../../../../utils/common/string.js";
import W from "../../../components/tree/src/tree.vue.js";
import X from "./EScriptEdit.vue.js";
import Y from "./EArgsEditor.vue.js";
const Z = { class: "rounded epic-modal-action-main" }, ee = { class: "epic-modal-left-panel h-full flex flex-col" }, te = { class: "flex flex-1 h-0 flex-col" }, oe = { class: "flex-1 h-0" }, ne = { class: "epic-action-select h-30/100 flex flex-col" }, ae = { class: "flex-1 overflow-auto pr-8px" }, le = ["onClick"], ie = { class: "text-center pt-42px text-gray-400" }, ce = { class: "epic-modal-right-panel" }, se = {
key: 1,
class: "text-center pt-42px text-gray-400"
}, xe = /* @__PURE__ */ B({
__name: "EActionModal",
emits: ["add", "edit"],
setup(me, { expose: b, emit: V }) {
const M = p.getComponent("modal"), f = r(!0), x = N("pageSchema"), S = N("pageManager", {}), m = r(!1), d = r([]), i = r(null), D = V, w = v(() => {
var o;
return ((o = i.value) == null ? void 0 : o.id) ?? "";
}), c = v(() => {
var o;
return t.actionItem.type === "component" ? i.value ? (o = p.getComponentConfings()[i.value.type].config.action) == null ? void 0 : o.map((e) => ({
label: e.describe,
value: e.type
})) : [] : t.actionItem.type === "custom" ? Object.entries(S.funcs.value).filter(([e, l]) => typeof l == "function").map(([e]) => ({ label: e, value: e })) : t.actionItem.type === "public" ? Object.entries(p.publicMethods).map(([e]) => ({
label: e,
value: e
})) : [];
}), C = v(() => {
if (t.actionItem.type === "component" && i.value) {
const o = p.getComponentConfings()[i.value.type].config.action, e = o == null ? void 0 : o.find(
(l) => l.type === t.actionItem.methodName
);
if (e != null && e.argsConfigs) {
const l = e.argsConfigs.findIndex(
(n) => n.label === "设置数据"
);
l !== -1 && (e.argsConfigs[l] = {
...i.value,
label: "设置数据",
field: "0",
id: Q()
});
}
return (e == null ? void 0 : e.argsConfigs) ?? [];
}
return [];
}), t = j({
actionItem: {
type: "custom",
methodName: "test",
componentId: null
},
cacheData: {}
});
function O() {
var o;
m.value = !0, f.value = !0, t.actionItem.type = "custom", t.actionItem.componentId = null, (o = c.value) != null && o.length && u(c.value[0].value);
}
function $(o) {
if (m.value = !0, f.value = !1, i.value = null, o.componentId) {
const e = J(x.schemas, o.componentId);
i.value = e, d.value = [o.componentId];
}
G(() => {
t.actionItem.componentId = o.componentId, t.actionItem.methodName = o.methodName, t.actionItem.type = o.type, t.actionItem.args = o.args;
});
}
function E() {
if (!t.actionItem.methodName) {
alert("请先选择动作方法");
return;
}
D(f.value ? "add" : "edit", P(H(t.actionItem))), k();
}
function k() {
m.value = !1, d.value = [], t.cacheData = {};
}
function _(o) {
var e;
t.actionItem.componentId = null, t.actionItem.type = o, i.value = null, t.actionItem.methodName = null, d.value = [], (e = c.value) != null && e.length && u(c.value[0].value);
}
function U(o) {
var e;
t.actionItem.args && (t.cacheData[t.actionItem.componentId + t.actionItem.methodName] = t.actionItem.args), t.actionItem.componentId = o.id, t.actionItem.type = "component", t.actionItem.methodName = null, i.value = o.componentSchema, (e = c.value) != null && e.length && u(c.value[0].value);
}
function u(o) {
t.actionItem.methodName = o, t.actionItem.args = t.cacheData[t.actionItem.componentId + t.actionItem.methodName];
}
return b({
handleOpen: O,
handleOpenEdit: $
}), (o, e) => (s(), g(h(M), {
modelValue: m.value,
"onUpdate:modelValue": e[4] || (e[4] = (l) => m.value = l),
width: "1200px",
title: "动作配置",
onClose: k,
onOk: E
}, {
default: A(() => {
var l;
return [
a("div", Z, [
a("div", ee, [
a("div", te, [
a("div", {
class: I(["fun-btn", { checked: t.actionItem.type === "custom" }]),
onClick: e[0] || (e[0] = (n) => _("custom"))
}, " 自定义函数 ", 2),
a("div", {
class: I(["fun-btn", { checked: t.actionItem.type === "public" }]),
onClick: e[1] || (e[1] = (n) => _("public"))
}, " 公共函数 ", 2),
e[5] || (e[5] = K(" 组件 ")),
a("div", oe, [
T(h(W), {
"selected-keys": d.value,
"onUpdate:selectedKeys": e[2] || (e[2] = (n) => d.value = n),
options: h(x).schemas,
onNodeClick: U
}, null, 8, ["selected-keys", "options"])
])
]),
a("div", ne, [
e[6] || (e[6] = a("div", { class: "mb-2" }, " 动作选择 ", -1)),
a("div", ae, [
(s(!0), y(F, null, L(c.value, (n) => (s(), y("div", {
key: n.value,
class: I([{ checked: n.value === t.actionItem.methodName }, "epic-action-item"]),
onClick: (de) => u(n.value)
}, [
a("span", null, R(n.label), 1)
], 10, le))), 128)),
z(a("div", ie, " 当前组件暂无动作 ", 512), [
[q, !((l = c.value) != null && l.length)]
])
])
])
]),
a("div", ce, [
t.actionItem.type === "custom" ? (s(), g(X, { key: 0 })) : C.value.length === 0 ? (s(), y("div", se, " 暂无配置 ")) : (s(), g(Y, {
key: w.value,
modelValue: t.actionItem.args,
"onUpdate:modelValue": e[3] || (e[3] = (n) => t.actionItem.args = n),
"action-args-configs": C.value
}, null, 8, ["modelValue", "action-args-configs"]))
])
])
];
}),
_: 1
}, 8, ["modelValue"]));
}
});
export {
xe as default
};