gepic
Version:
基于vue3的设计器,可视化开发页面表单
226 lines (225 loc) • 6.55 kB
JavaScript
import { defineComponent as E, inject as u, ref as w, computed as f, createElementBlock as l, openBlock as c, Fragment as p, createElementVNode as s, createVNode as m, withDirectives as H, renderList as N, createCommentVNode as h, normalizeClass as F, unref as v, vShow as I } from "vue";
import { pluginManager as K } from "../../../../../../utils/manager/pluginManager.js";
import "@vueuse/core";
import { useStore as Z } from "../../../../../../hooks/store/index.js";
import { deepCompareAndModify as x, convertKFormData as q } from "../../../../../../utils/common/data.js";
import O from "../../../../icon/src/icon.vue.js";
import G from "./previewJson.vue.js";
const Q = { class: "epic-edit-toolbar flex items-center justify-between px-2" }, W = { class: "flex-1 h-full flex items-center" }, X = {
key: 0,
class: "epic-divider"
}, Y = ["title", "onClick"], ee = { class: "flex-1 h-full flex items-center justify-end" }, te = {
key: 0,
class: "flex items-center ml-12px"
}, ne = { class: "pr-8px w-82px cursor-pointer" }, oe = { class: "epic-device h-28px items-center gap-1 rounded-md border p-2px flex" }, ie = ["title", "onClick"], me = /* @__PURE__ */ E({
__name: "toolbar",
setup(le) {
const V = K.getComponent("select"), { canvasScale: _, disabledZoom: D } = Z(), i = u("pageSchema"), o = u("designer"), a = u("revoke"), k = u("designerProps"), g = w(null), j = [
{
icon: "icon--epic--computer-outline-rounded",
title: "pc",
key: "pc"
},
{
icon: "icon--epic--tablet-android-outline-rounded",
title: "平板",
key: "pad"
},
{
icon: "icon--epic--phone-iphone-outline-sharp",
title: "手机",
key: "mobile"
}
], J = f(() => [
{
icon: "icon--epic--code",
title: "查看数据",
on: P
},
{
icon: "icon--epic--exit-to-app-rounded",
title: "导入数据",
on: T
},
{
icon: "icon--epic--trash",
title: "清空",
on: o.reset
},
{
icon: "icon--epic--undo",
title: "撤销",
on: $,
disabled: !a.recordList.value.length,
divider: !0
},
{
icon: "icon--epic--redo",
title: "重做",
on: L,
disabled: !a.undoList.value.length
},
{
icon: "icon--epic--eye",
title: "预览",
show: () => k.value.hiddenHeader,
on: o.preview,
divider: !0
},
{
icon: "icon--epic--save-outline-rounded",
title: "保存",
show: () => k.value.hiddenHeader,
on: o.save
}
]), M = {
pc: {},
pad: {
width: "780px",
mode: "pad"
},
mobile: {
width: "390px",
mode: "mobile"
}
}, b = f({
get() {
var e;
return ((e = i.canvas) == null ? void 0 : e.mode) ?? "pc";
},
set(e) {
o.handleToggleDeviceMode(e), i.canvas = M[e];
}
}), y = w(null), d = f({
get() {
return `${(_.value * 100).toFixed(0)}%`;
},
set(e) {
const n = parseFloat(e);
_.value = n / 100;
}
}), R = [
{
label: "60%",
value: "60%"
},
{
label: "80%",
value: "80%"
},
{
label: "100%",
value: "100%"
},
{
label: "120%",
value: "120%"
},
{
label: "140%",
value: "140%"
}
];
function C(e) {
return typeof e == "function" ? e() : !0;
}
function $() {
const e = a.undo();
e && (x(i.schemas, e), o.setCheckedNode(i.schemas[0]));
}
function L() {
const e = a.redo();
e && (x(i.schemas, e), o.setCheckedNode(i.schemas[0]));
}
function P() {
g.value.handleOpen();
}
function T() {
var e;
(e = y.value) == null || e.click();
}
function U(e) {
var r;
const n = (r = e.target.files) == null ? void 0 : r[0];
if (!n) return;
e.target.value = null;
const t = new FileReader();
t.readAsText(n), t.onload = (B) => {
var S;
z((S = B.target) == null ? void 0 : S.result);
};
}
function z(e) {
try {
let n = JSON.parse(e ?? "");
n.schemas || (n = q(n)), x(i, n), o.handleImported(n), o.setCheckedNode(i.schemas[0]);
} catch (n) {
console.error(n);
}
}
function A(e) {
o.handleToggleDeviceMode(e), b.value = e;
}
return (e, n) => (c(), l(p, null, [
s("div", Q, [
s("div", W, [
(c(!0), l(p, null, N(J.value, (t, r) => (c(), l(p, { key: r }, [
t.divider && C(t.show) ? (c(), l("div", X)) : h("", !0),
C(t.show) ? (c(), l("div", {
key: 1,
title: t.title,
class: F(["epic-action-item text-base h-90% px-10px flex items-center cursor-pointer", { disabled: t.disabled }]),
onClick: t.on
}, [
m(v(O), {
name: t.icon
}, null, 8, ["name"])
], 10, Y)) : h("", !0)
], 64))), 128))
]),
H(s("input", {
ref_key: "fileRef",
ref: y,
type: "file",
accept: ".json,.txt",
onChange: U
}, null, 544), [
[I, !1]
]),
s("div", ee, [
v(D) ? h("", !0) : (c(), l("div", te, [
s("div", ne, [
m(v(V), {
value: d.value,
"onUpdate:value": n[0] || (n[0] = (t) => d.value = t),
modelValue: d.value,
"onUpdate:modelValue": n[1] || (n[1] = (t) => d.value = t),
options: R,
size: "small"
}, null, 8, ["value", "modelValue"])
])
])),
s("div", oe, [
(c(), l(p, null, N(j, (t) => s("div", {
key: t.key,
title: t.title,
class: F(["epic-device-item h-full px-1 flex items-center cursor-pointer text-base transition-colors rounded-sm", { checked: t.key === b.value }]),
onClick: (r) => A(t.key)
}, [
m(v(O), {
name: t.icon
}, null, 8, ["name"])
], 10, ie)), 64))
])
])
]),
m(G, {
ref_key: "previewJson",
ref: g
}, null, 512)
], 64));
}
});
export {
me as default
};