epic-designer-gold
Version:
基于vue3的设计器,可视化开发页面表单
252 lines (251 loc) • 9.81 kB
JavaScript
import { defineComponent as se, inject as U, ref as r, reactive as re, provide as ue, onMounted as ie, computed as z, openBlock as f, createElementBlock as T, createVNode as ce, unref as g, mergeProps as de, withCtx as C, renderSlot as I, Fragment as fe, renderList as me, createBlock as S, resolveDynamicComponent as w, createElementVNode as u, createTextVNode as $, createCommentVNode as G, nextTick as pe } from "vue";
import { ElForm as ve, ElMessage as b } from "element-plus";
import { p as M } from "./pluginManager-BNLy8dPz.js";
import { a as he } from "./index-BNoHh0sx.js";
import { a as L } 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__ */ se({
__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", {}), K = r(!0), i = re({});
J.addFormData(i, (N = (j = s.componentSchema) == null ? void 0 : j.componentProps) == null ? void 0 : N.name), ue("formData", i);
const Q = M.getComponent("modal"), Z = M.getComponent("input"), B = M.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 ee() {
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 X(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 A() {
!o.value || !l.value || (o.value.fillStyle = "#ffffff", o.value.fillRect(
0,
0,
l.value.width,
l.value.height
), d.value = "");
}
async function te() {
if (l.value)
try {
const e = l.value, t = await new Promise((h) => {
e.toBlob((le) => {
h(le || new Blob());
}, "image/png");
});
if (!t) {
b.error("签字转换失败");
return;
}
const n = new FormData();
n.append("file", t, "signature.png");
const a = await he.post(
"https://ess-ds.com/prod-api/center-file/file/upload",
n,
{
headers: {
Authorization: "Bearer " + L.get("Admin-Token"),
"X-Tenant-Gray": L.get("X-Tenant-Gray"),
"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 E() {
y.value = !1, m.value = "", d.value = "", A();
}
function F() {
v && (v(new Error("用户取消了保存确认")), p = null, v = null), setTimeout(() => {
E();
}, 300);
}
function ne() {
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), E();
}
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 W() {
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, pe(() => {
ee();
});
}) : i;
}
function O(e) {
Object.assign(i, e);
}
function Y() {
var e;
return (e = c.value) == null ? void 0 : e.validate();
}
ie(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 = W, c.value.setData = O, !1;
}
});
const oe = 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
};
}), ae = z(() => s.componentSchema.children ?? []);
return H({
form: c,
getData: W,
setData: O,
validate: Y
}), (e, t) => K.value ? (f(), T("div", ye, [
ce(g(ve), de({
ref_key: "form",
ref: c,
model: i
}, oe.value, { style: { height: "100%" } }), {
default: C(() => [
I(e.$slots, "edit-node", {}, () => [
(f(!0), T(fe, null, me(ae.value, (n) => I(e.$slots, "node", { componentSchema: n }, void 0, !0)), 256))
], !0)
]),
_: 3
}, 16, ["model"]),
(f(), S(w(g(Q)), {
style: { height: "calc(100vh - 240px)" },
modelValue: y.value,
"onUpdate:modelValue": t[1] || (t[1] = (n) => y.value = n),
title: "保存确认",
onClose: F,
onCancel: F,
onOk: ne,
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(Z)), {
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: X,
onMouseup: k,
onMouseleave: k,
onTouchstart: R,
onTouchmove: X,
onTouchend: k,
class: "signature-canvas"
}, null, 544),
u("div", xe, [
(f(), S(w(g(B)), {
type: "primary",
size: "small",
onClick: A
}, {
default: C(() => [...t[4] || (t[4] = [
$("清空", -1)
])]),
_: 1
})),
(f(), S(w(g(B)), {
type: "primary",
size: "small",
onClick: te
}, {
default: C(() => [...t[5] || (t[5] = [
$("确认签字", -1)
])]),
_: 1
}))
]),
d.value ? (f(), T("div", De, [
u("img", {
src: d.value,
alt: "签字预览",
class: "signature-img"
}, null, 8, _e)
])) : G("", !0)
])
])
])
]),
_: 1
}, 40, ["modelValue"]))
])) : G("", !0);
}
}), Xe = /* @__PURE__ */ ge(ke, [["__scopeId", "data-v-3ea17dec"]]);
export {
Xe as default
};