gepic
Version:
基于vue3的设计器,可视化开发页面表单
117 lines (116 loc) • 4.06 kB
JavaScript
import { defineComponent as E, inject as V, createElementBlock as s, openBlock as d, Fragment as C, renderList as $, createElementVNode as i, toDisplayString as v, createVNode as l, unref as a, withCtx as N, createCommentVNode as w, createTextVNode as S } from "vue";
import { findSchemaById as j } from "../../../../utils/common/data.js";
import "@vueuse/core";
import "../../../../hooks/store/index.js";
import r from "../../../components/icon/src/icon.vue.js";
import A from "vuedraggable";
const B = { class: "epic-event-info" }, I = ["title"], O = { class: "epic-event-btn text-lg flex items-center text-$epic-text-secondary" }, D = { class: "epic-action-editor-main" }, L = { class: "epic-editor-item rounded" }, U = { class: "w-36px flex items-center text-lg" }, F = { class: "flex-1" }, T = { key: 0 }, q = { key: 1 }, z = { key: 2 }, G = { class: "epic-action-box text-lg text-$epic-text-medium" }, H = ["onClick"], J = ["onClick"], X = /* @__PURE__ */ E({
__name: "EActionEditorItem",
props: {
itemEvents: {
type: Array,
default: () => []
},
allEvents: {
type: Array,
default: () => []
},
modelValue: {
type: Object,
default: () => []
},
events: {
type: Object,
default: () => ({})
}
},
emits: ["add", "edit", "update:modelValue"],
setup(_, { emit: f }) {
const c = _, p = f, h = V("pageSchema");
function y(o) {
p("add", o);
}
function g(o) {
return j(h.schemas, o).label;
}
function x(o, t) {
var n;
const e = k(t);
e[t] = c.events[t].filter((m, u) => o !== u), (n = e[t]) != null && n.length || delete e[t], p("update:modelValue", e);
}
function b(o, t, e) {
p("edit", o, t, e);
}
function k(o) {
const t = {};
return c.allEvents.forEach((e) => {
if (!c.events[e.type].length || e.type === o)
return !1;
t[e.type] = c.events[e.type];
}), t;
}
return (o, t) => (d(!0), s(C, null, $(_.itemEvents, (e) => (d(), s("div", {
key: e.type,
class: "epic-event-item"
}, [
i("div", B, [
i("div", {
class: "epic-event-label",
title: e.describe
}, v(e.describe), 9, I),
i("div", O, [
l(a(r), {
name: "icon--epic--add-rounded",
onClick: (n) => y(e.type)
}, null, 8, ["onClick"])
])
]),
i("div", D, [
l(a(A), {
modelValue: c.events[e.type],
"onUpdate:modelValue": (n) => c.events[e.type] = n,
"item-key": "id",
"component-data": {
type: "transition-group"
},
group: "option-list",
handle: ".handle",
animation: 200
}, {
item: N(({ element: n, index: m }) => [
i("div", L, [
i("div", U, [
l(a(r), {
class: "mr-2 text-lg cursor-move handle text-$epic-text-medium",
name: "icon--epic--drag"
})
]),
i("div", F, [
n.type === "component" ? (d(), s("div", T, v(g(n.componentId)), 1)) : n.type === "custom" ? (d(), s("div", q, " 自定义函数 ")) : n.type === "public" ? (d(), s("div", z, " 公共函数 ")) : w("", !0),
S(" " + v(n.methodName), 1)
]),
i("div", G, [
i("div", {
class: "epic-edit-btn",
onClick: (u) => b(m, e.type, n)
}, [
l(a(r), { name: "icon--epic--page-info-outline-rounded" })
], 8, H),
i("div", {
class: "epic-del-btn",
onClick: (u) => x(m, e.type)
}, [
l(a(r), { name: "icon--epic--delete-outline-rounded" })
], 8, J)
])
])
]),
_: 2
}, 1032, ["modelValue", "onUpdate:modelValue"])
])
]))), 128));
}
});
export {
X as default
};