epic-designer-gold/dist/sign-DGQpRDDH.js

基于vue3的设计器,可视化开发页面表单

import { inject as K, watch as Q, nextTick as W, 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 X } from "vue";
import { p as R } from "./pluginManager-BNLy8dPz.js";
import { ElMessageBox as j, ElMessage as C } from "element-plus";
import { a as ae } from "./index-BNoHh0sx.js";
import { u as oe, a as B } from "./index-B1s67XDZ.js";
import { _ as ne } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const le = { class: "sign-main" }, se = ["src"], ce = {
  class: "sign",
  style: {
    height: "100%",
    width: "100%"
  }
}, ie = ["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(z, { expose: E, emit: I }) {
    const { t: n } = oe(), D = R.getComponent("button"), U = R.getComponent("Dialog"), Y = I, o = z, v = K("disabled", { value: !1 });
    Q(
      () => o.componentSchema,
      () => {
        W(() => {
          g.value = o.modelValue;
        });
      },
      { deep: !0, immediate: !0 }
    );
    const l = s(null), r = s(null), a = s(), F = s("");
    function N() {
      var t, e, i, 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 = ((i = r.value) == null ? void 0 : i.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(""), G = s(""), c = s([]), w = s(!1);
    function H(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(), c.value.push(e), w.value = !0;
    }
    function L(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, G.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, c.value.push(e);
      }
    }
    function $(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(), c.value.push(e), c.value.push({ x: -1, y: -1 }), w.value = !1;
    }
    function V() {
      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), c.value = [], C({
          type: "info",
          message: n("clearSuccess")
        });
      }).catch(() => {
      });
    }
    const g = s("");
    async function x() {
      let t = await q(l.value.toDataURL("image/png"));
      g.value = t, Y("update:modelValue", t);
    }
    async function q(t) {
      try {
        let e = atob(t.split(",")[1]), i = new ArrayBuffer(e.length), y = new Uint8Array(i);
        for (let b = 0; b < e.length; b++)
          y[b] = e.charCodeAt(b);
        let p = new Blob([i], { type: "image/png" }), A = new FormData();
        A.append("file", p, Date.now() + "png");
        let J = await ae({
          method: "post",
          url: "https://ess-ds.com/prod-api/center-file/file/upload",
          data: A,
          headers: {
            "Content-Type": "multipart/form-data",
            Authorization: "Bearer " + B.get("Admin-Token"),
            "X-Tenant-Gray": B.get("X-Tenant-Gray"),
            lang: B.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 Z() {
      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), c.value = [], m.value = !1;
      }).catch(() => !1);
    }
    function M() {
      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), c.value = []), W(() => {
        N();
      }));
    }
    return ee(() => {
    }), te(() => {
    }), E({
      surewrite: x
    }), (t, e) => (S(), _("div", le, [
      g.value ? (S(), _("img", {
        key: 1,
        class: "sign-board",
        src: g.value,
        alt: "",
        onClick: M
      }, null, 8, se)) : (S(), _("div", {
        key: 0,
        class: "sign-board",
        onClick: M
      }, P(u(n)("signaturePad")), 1)),
      T(u(U), {
        modelValue: m.value,
        "onUpdate:modelValue": e[0] || (e[0] = (i) => m.value = i),
        title: u(n)("signaturePad"),
        class: "w-860px",
        width: "860px",
        style: { height: "600px" },
        "before-close": Z,
        draggable: !1,
        modal: ""
      }, {
        default: k(() => [
          d("div", ce, [
            d("div", {
              class: "canvas",
              ref_key: "canvasWrap",
              ref: r
            }, [
              d("canvas", {
                id: `canvas${o.componentSchema.field}`,
                onMousedown: H,
                onMousemove: L,
                onMouseup: $
              }, null, 40, ie)
            ], 512),
            d("div", ue, [
              e[1] || (e[1] = d("div", { class: "remark" }, null, -1)),
              d("div", re, [
                T(u(D), {
                  type: "info",
                  size: "mini",
                  onClick: V,
                  onTouch: V
                }, {
                  default: k(() => [
                    X(P(u(n)("rewrite")), 1)
                  ]),
                  _: 1
                }),
                T(u(D), {
                  type: "primary",
                  size: "mini",
                  onClick: x,
                  onTouch: x
                }, {
                  default: k(() => [
                    X(P(u(n)("confirm")), 1)
                  ]),
                  _: 1
                })
              ])
            ])
          ])
        ]),
        _: 1
      }, 8, ["modelValue", "title"])
    ]));
  }
}, ye = /* @__PURE__ */ ne(me, [["__scopeId", "data-v-c5551478"]]);
export {
  ye as default
};