gepic
Version:
基于vue3的设计器,可视化开发页面表单
90 lines (89 loc) • 2.85 kB
JavaScript
import { defineComponent as E, ref as l, inject as B, createBlock as f, openBlock as p, unref as t, withCtx as h, createElementVNode as v, createVNode as g, nextTick as U } from "vue";
import j from "../../../../builder/src/builder.vue.js";
import { pluginManager as k } from "../../../../../../utils/manager/pluginManager.js";
import "@vueuse/core";
import "../../../../../../hooks/store/index.js";
import { getUUID as M } from "../../../../../../utils/common/string.js";
const N = { class: "min-w-750px rounded" }, S = { class: "h-full rounded" }, T = /* @__PURE__ */ E({
__name: "index",
props: {
hideConfirm: { type: Boolean },
width: { default: "900px" }
},
setup(y, { expose: V }) {
const _ = y, C = k.getComponent("monacoEditor"), r = k.getComponent("modal"), d = l(null), a = l(!1), n = l(!1), i = l({}), x = B("pageSchema"), s = l(null), m = l("");
function c() {
n.value = !1;
}
function w() {
a.value = !1;
}
function O() {
a.value = !0, m.value = M();
}
async function b() {
try {
let e = await s.value.validateAll();
if (!Object.keys(e).length) {
alert("请添加表单组件后再尝试！");
return;
}
Object.keys(e).length === 1 && (e = e.default), i.value = JSON.stringify(e, null, 2), n.value = !0, U(() => {
var o;
(o = d.value) == null || o.setValue(i.value);
});
} catch (e) {
console.error(e);
}
}
return V({
handleOpen: O
}), (e, o) => (p(), f(t(r), {
modelValue: a.value,
"onUpdate:modelValue": o[1] || (o[1] = (u) => a.value = u),
title: "预览",
width: e.width,
"hide-confirm": _.hideConfirm,
"ok-text": "表单数据",
onClose: w,
onOk: b
}, {
default: h(() => [
v("div", N, [
(p(), f(t(j), {
key: m.value,
ref_key: "kb",
ref: s,
"page-schema": t(x)
}, null, 8, ["page-schema"])),
g(t(r), {
modelValue: n.value,
"onUpdate:modelValue": o[0] || (o[0] = (u) => n.value = u),
title: "表单数据",
width: "860px",
onClose: c,
onOk: c
}, {
default: h(() => [
v("div", S, [
g(t(C), {
ref_key: "monacoEditorRef",
ref: d,
"auto-toggle-theme": "",
"read-only": "",
class: "h-full editor",
"model-value": i.value
}, null, 8, ["model-value"])
])
]),
_: 1
}, 8, ["modelValue"])
])
]),
_: 1
}, 8, ["modelValue", "width", "hide-confirm"]));
}
});
export {
T as default
};