epic-designer-gold
Version:
基于vue3的设计器,可视化开发页面表单
225 lines (224 loc) • 8.18 kB
JavaScript
import { inject as K, watch as Q, nextTick as A, ref as s, onMounted as ee, onUnmounted as te, openBlock as S, createElementBlock as _, toDisplayString as P, unref as u, createVNode as T, withCtx as k, createElementVNode as d, createTextVNode as W } from "vue";
import { p as R } from "./pluginManager-BCnrHPYv.js";
import { ElMessageBox as j, ElMessage as C } from "element-plus";
import { a as ae } from "./axios-CXDYiOMX.js";
import { u as oe, a as z } from "./index-B1s67XDZ.js";
import { _ as ne } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const le = { class: "sign-main" }, se = ["src"], ie = {
class: "sign",
style: {
height: "100%",
width: "100%"
}
}, ce = ["id"], ue = { class: "btn" }, re = { class: "btns" }, me = {
__name: "sign",
props: {
componentSchema: {
type: Object,
require: !0,
default: () => ({})
},
modelValue: {
type: String,
default: ""
}
},
emits: ["update:modelValue"],
setup(E, { expose: I, emit: U }) {
const { t: n } = oe(), B = R.getComponent("button"), X = R.getComponent("Dialog"), Y = U, o = E, v = K("disabled", { value: !1 });
Q(
() => o.componentSchema,
() => {
A(() => {
g.value = o.modelValue;
});
},
{ deep: !0, immediate: !0 }
);
const l = s(null), r = s(null), a = s(), F = s("");
function N() {
var t, e, c, y;
if (r.value && ((t = r.value) != null && t.clientHeight) && ((e = r.value) != null && e.clientWidth)) {
if (l.value = document.getElementById(`canvas${o.componentSchema.field}`), l.value.height = ((c = r.value) == null ? void 0 : c.clientHeight) || 600, l.value.width = (y = r.value) == null ? void 0 : y.clientWidth, a.value = l.value.getContext("2d"), o.modelValue) {
let p = new Image();
p.src = o.modelValue, p.setAttribute("crossOrigin", "anonymous"), p.onload = () => {
a.value.fillStyle = a.value.createPattern(p, "repeat"), a.value.fillRect(0, 0, 1e3, 550);
};
}
a.value.lineWidth = o.componentSchema.componentProps.lineWidth || 4, o.componentSchema && o.componentSchema.componentProps && o.componentSchema.componentProps.style && o.componentSchema.componentProps.style.color && (a.value.strokeStyle = o.componentSchema.componentProps.style.color), F.value = l.value.getBoundingClientRect();
}
}
const f = s(""), h = s(""), O = s(""), H = s(""), i = s([]), w = s(!1);
function L(t) {
if (v.value || o.componentSchema.componentProps.readonly || o.componentSchema.componentProps.disabled)
return;
t = t || event, t.preventDefault();
let e = {
x: t.offsetX,
y: t.offsetY
};
f.value = e.x, h.value = e.y, a.value.beginPath(), a.value.moveTo(e.x, e.y), a.value.lineTo(e.x, e.y), a.value.stroke(), a.value.closePath(), i.value.push(e), w.value = !0;
}
function $(t) {
if (!(v.value || o.componentSchema.componentProps.readonly || o.componentSchema.componentProps.disabled) && (t = t || event, t.preventDefault(), w.value)) {
let e = {
x: t.offsetX,
y: t.offsetY
};
O.value = e.x, H.value = e.y, a.value.beginPath(), a.value.moveTo(f.value, h.value), a.value.lineTo(e.x, e.y), a.value.stroke(), a.value.closePath(), f.value = e.x, h.value = e.y, i.value.push(e);
}
}
function q(t) {
if (v.value || o.componentSchema.componentProps.readonly || o.componentSchema.componentProps.disabled)
return;
t = t || event, t.preventDefault();
let e = {
x: t.offsetX,
y: t.offsetY
};
a.value.beginPath(), a.value.moveTo(f.value, h.value), a.value.lineTo(e.x, e.y), a.value.stroke(), a.value.closePath(), i.value.push(e), i.value.push({ x: -1, y: -1 }), w.value = !1;
}
function D() {
j.confirm(n("rewriteWillClearCanvas"), n("warning"), {
confirmButtonText: n("confirm"),
cancelButtonText: n("cancel"),
type: "warning"
}).then(() => {
a.value.clearRect(0, 0, l.value.width, l.value.height), i.value = [], C({
type: "info",
message: n("clearSuccess")
});
}).catch(() => {
});
}
const g = s("");
async function x() {
let t = await Z(l.value.toDataURL("image/png"));
g.value = t, Y("update:modelValue", t);
}
async function Z(t) {
try {
let e = atob(t.split(",")[1]), c = new ArrayBuffer(e.length), y = new Uint8Array(c);
for (let b = 0; b < e.length; b++)
y[b] = e.charCodeAt(b);
let p = new Blob([c], { type: "image/png" }), M = new FormData();
M.append("file", p, Date.now() + "png");
let J = await ae({
method: "post",
url: "https://ess-ds.com/prod-api/center-file/file/upload",
data: M,
headers: {
"Content-Type": "multipart/form-data",
Authorization: "Bearer " + z.get("Admin-Token"),
lang: z.get("saas-locale") || "zh-CN",
//语言
zone: Intl.DateTimeFormat().resolvedOptions().timeZone
//时区
}
});
return C({
type: "success",
message: n("uploadSuccess")
}), J.data.data.url;
} catch {
C({
type: "warning",
message: n("uploadFailed")
}), m.value = !1;
} finally {
m.value = !1;
}
}
const m = s(!1);
function G() {
j.confirm(n("confirmAbandonSignature"), n("warning"), {
confirmButtonText: n("confirm"),
cancelButtonText: n("cancel"),
type: "warning"
}).then(() => {
a.value.clearRect(0, 0, l.value.width, l.value.height), i.value = [], m.value = !1;
}).catch(() => !1);
}
function V() {
v.value || o.componentSchema.componentProps.readonly || o.componentSchema.componentProps.disabled || (m.value = !0, a.value && (a.value.clearRect(0, 0, l.value.width, l.value.height), i.value = []), A(() => {
N();
}));
}
return ee(() => {
}), te(() => {
}), I({
surewrite: x
}), (t, e) => (S(), _("div", le, [
g.value ? (S(), _("img", {
key: 1,
class: "sign-board",
src: g.value,
alt: "",
onClick: V
}, null, 8, se)) : (S(), _("div", {
key: 0,
class: "sign-board",
onClick: V
}, P(u(n)("signaturePad")), 1)),
T(u(X), {
modelValue: m.value,
"onUpdate:modelValue": e[0] || (e[0] = (c) => m.value = c),
title: u(n)("signaturePad"),
class: "w-860px",
width: "860px",
style: { height: "600px" },
"before-close": G,
draggable: !1,
modal: ""
}, {
default: k(() => [
d("div", ie, [
d("div", {
class: "canvas",
ref_key: "canvasWrap",
ref: r
}, [
d("canvas", {
id: `canvas${o.componentSchema.field}`,
onMousedown: L,
onMousemove: $,
onMouseup: q
}, null, 40, ce)
], 512),
d("div", ue, [
e[1] || (e[1] = d("div", { class: "remark" }, null, -1)),
d("div", re, [
T(u(B), {
type: "info",
size: "mini",
onClick: D,
onTouch: D
}, {
default: k(() => [
W(P(u(n)("rewrite")), 1)
]),
_: 1
}),
T(u(B), {
type: "primary",
size: "mini",
onClick: x,
onTouch: x
}, {
default: k(() => [
W(P(u(n)("confirm")), 1)
]),
_: 1
})
])
])
])
]),
_: 1
}, 8, ["modelValue", "title"])
]));
}
}, ye = /* @__PURE__ */ ne(me, [["__scopeId", "data-v-4e3b1b32"]]);
export {
ye as default
};