epic-designer-gold
Version:
基于vue3的设计器,可视化开发页面表单
238 lines (237 loc) • 9.63 kB
JavaScript
import { defineComponent as le, inject as U, ref as r, reactive as se, provide as re, onMounted as ue, computed as z, openBlock as f, createElementBlock as M, createVNode as ie, unref as g, mergeProps as ce, withCtx as C, renderSlot as I, Fragment as de, renderList as fe, createBlock as S, resolveDynamicComponent as w, createElementVNode as u, createTextVNode as $, createCommentVNode as L, nextTick as me } from "vue";
import { ElForm as pe, ElMessage as b } from "element-plus";
import { p as T } from "./pluginManager-BNLy8dPz.js";
import { a as ve } from "./index-BNoHh0sx.js";
import { a as he } from "./index-B1s67XDZ.js";
import { _ as ge } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const ye = {
key: 0,
class: "form-main",
style: { height: "100%" }
}, Ce = { class: "save-modal-content" }, Se = { class: "save-modal-item" }, we = { class: "save-modal-item" }, be = { class: "signature-container" }, xe = { class: "signature-controls" }, De = {
key: 0,
class: "signature-preview"
}, _e = ["src"], ke = /* @__PURE__ */ le({
__name: "form",
props: {
componentSchema: {
type: Object,
require: !0,
default: () => ({})
}
},
setup(q, { expose: H }) {
var j, N;
const s = q, J = U("pageManager", {}), c = r(null), V = U("forms", {}), G = r(!0), i = se({});
J.addFormData(i, (N = (j = s.componentSchema) == null ? void 0 : j.componentProps) == null ? void 0 : N.name), re("formData", i);
const K = T.getComponent("modal"), Q = T.getComponent("input"), B = T.getComponent("button"), y = r(!1), m = r(""), d = r("");
let p = null, v = null;
const l = r(null), o = r(null), x = r(!1), D = r(0), _ = r(0);
function Z() {
if (!l.value) return;
const e = l.value, t = e.parentElement;
if (!t) return;
const a = t.getBoundingClientRect().width - 20, h = 400;
e.width = a, e.height = h, o.value = e.getContext("2d"), o.value && (o.value.lineWidth = 4, o.value.lineCap = "round", o.value.lineJoin = "round", o.value.strokeStyle = "#000000", o.value.fillStyle = "#ffffff", o.value.fillRect(0, 0, e.width, e.height));
}
function R(e) {
if (x.value = !0, !l.value) return;
const t = l.value.getBoundingClientRect(), n = e.type.includes("mouse") ? e.offsetX : e.touches[0].clientX - t.left, a = e.type.includes("mouse") ? e.offsetY : e.touches[0].clientY - t.top;
D.value = n, _.value = a;
}
function A(e) {
if (!x.value || !o.value || !l.value) return;
const t = l.value.getBoundingClientRect(), n = e.type.includes("mouse") ? e.offsetX : e.touches[0].clientX - t.left, a = e.type.includes("mouse") ? e.offsetY : e.touches[0].clientY - t.top;
o.value.beginPath(), o.value.moveTo(D.value, _.value), o.value.lineTo(n, a), o.value.stroke(), D.value = n, _.value = a;
}
function k() {
x.value = !1;
}
function E() {
!o.value || !l.value || (o.value.fillStyle = "#ffffff", o.value.fillRect(0, 0, l.value.width, l.value.height), d.value = "");
}
async function ee() {
if (l.value)
try {
const e = l.value, t = await new Promise((h) => {
e.toBlob((ae) => {
h(ae || new Blob());
}, "image/png");
});
if (!t) {
b.error("签字转换失败");
return;
}
const n = new FormData();
n.append("file", t, "signature.png");
const a = await ve.post("https://ess-ds.com/prod-api/center-file/file/upload", n, {
headers: {
Authorization: "Bearer " + he.get("Admin-Token"),
"Content-Type": "multipart/form-data"
}
});
a.data && a.data.code === 200 && a.data.data ? (d.value = a.data.data.url, b.success("签字保存成功")) : b.error("签字上传失败，请重试");
} catch (e) {
console.error("上传签字失败:", e), b.error("网络错误，签字上传失败");
}
}
function F() {
y.value = !1, m.value = "", d.value = "", E();
}
function W() {
v && (v(new Error("用户取消了保存确认")), p = null, v = null), setTimeout(() => {
F();
}, 300);
}
function te() {
if (m.value.trim() !== "我确认提交电费单与站点用电地址不一致") {
alert("请输入准确的确认文字");
return;
}
if (!d.value) {
alert("请签字确认");
return;
}
i.saveDescription = m.value, i.signatureData = d.value, p && (p(i), p = null, v = null);
const t = (s.componentSchema ? P(s.componentSchema) : []).find((n) => (n == null ? void 0 : n.type) === "ocr-upload");
t && t.componentProps && (t.componentProps.hasAlreadyOcr = !1), F();
}
function P(e) {
const t = [e];
if (e.children && Array.isArray(e.children))
for (const n of e.children)
t.push(...P(n));
return t;
}
async function O() {
await Y();
const t = (s.componentSchema ? P(s.componentSchema) : []).find((n) => (n == null ? void 0 : n.type) === "ocr-upload");
return t && i[t.field + "-orcWarningInfo"] && t.componentProps.hasAlreadyOcr ? new Promise((n, a) => {
y.value = !0, p = n, v = a, me(() => {
Z();
});
}) : i;
}
function X(e) {
Object.assign(i, e);
}
function Y() {
var e;
return (e = c.value) == null ? void 0 : e.validate();
}
ue(async () => {
var e, t, n, a;
if (((e = s.componentSchema) == null ? void 0 : e.type) === "form" && V.value && c.value) {
const h = ((n = (t = s.componentSchema) == null ? void 0 : t.componentProps) == null ? void 0 : n.name) ?? ((a = s.componentSchema) == null ? void 0 : a.name) ?? "default";
return V.value[h] = c.value, c.value.getData = O, c.value.setData = X, !1;
}
});
const ne = z(() => {
const e = s.componentSchema.componentProps;
let t = e.labelCol, n = e.wrapperCol;
return e.labelLayout === "fixed" && (t = {
style: `width:${typeof e.labelWidth == "number" ? e.labelWidth + "px" : e.labelWidth}`
}, n = { style: "width:auto;flex:1" }), {
...e,
labelCol: t,
wrapperCol: n
};
}), oe = z(() => s.componentSchema.children ?? []);
return H({
form: c,
getData: O,
setData: X,
validate: Y
}), (e, t) => G.value ? (f(), M("div", ye, [
ie(g(pe), ce({
ref_key: "form",
ref: c,
model: i
}, ne.value, { style: { height: "100%" } }), {
default: C(() => [
I(e.$slots, "edit-node", {}, () => [
(f(!0), M(de, null, fe(oe.value, (n) => I(e.$slots, "node", { componentSchema: n }, void 0, !0)), 256))
], !0)
]),
_: 3
}, 16, ["model"]),
(f(), S(w(g(K)), {
style: { height: "calc(100vh - 240px)" },
modelValue: y.value,
"onUpdate:modelValue": t[1] || (t[1] = (n) => y.value = n),
title: "保存确认",
onClose: W,
onCancel: W,
onOk: te,
okText: "确认保存",
cancelText: "取消"
}, {
default: C(() => [
u("div", Ce, [
u("div", Se, [
t[2] || (t[2] = u("label", { class: "save-modal-label" }, "请输入以下文字确认：", -1)),
t[3] || (t[3] = u("div", { class: "confirm-text" }, "我确认提交电费单与站点用电地址不一致", -1)),
(f(), S(w(g(Q)), {
modelValue: m.value,
"onUpdate:modelValue": t[0] || (t[0] = (n) => m.value = n),
placeholder: "请输入上方文字确认",
type: "text",
style: { "margin-top": "8px" }
}, null, 8, ["modelValue"]))
]),
u("div", we, [
t[6] || (t[6] = u("label", { class: "save-modal-label" }, "请签字确认：", -1)),
u("div", be, [
u("canvas", {
ref_key: "signatureCanvas",
ref: l,
onMousedown: R,
onMousemove: A,
onMouseup: k,
onMouseleave: k,
onTouchstart: R,
onTouchmove: A,
onTouchend: k,
class: "signature-canvas"
}, null, 544),
u("div", xe, [
(f(), S(w(g(B)), {
type: "primary",
size: "small",
onClick: E
}, {
default: C(() => [...t[4] || (t[4] = [
$("清空", -1)
])]),
_: 1
})),
(f(), S(w(g(B)), {
type: "primary",
size: "small",
onClick: ee
}, {
default: C(() => [...t[5] || (t[5] = [
$("确认签字", -1)
])]),
_: 1
}))
]),
d.value ? (f(), M("div", De, [
u("img", {
src: d.value,
alt: "签字预览",
class: "signature-img"
}, null, 8, _e)
])) : L("", !0)
])
])
])
]),
_: 1
}, 40, ["modelValue"]))
])) : L("", !0);
}
}), Ae = /* @__PURE__ */ ge(ke, [["__scopeId", "data-v-b490df99"]]);
export {
Ae as default
};