tata-ui
Version:
塔塔NG-基于VUE3开发支持Clodop打印的模板设计器
1,516 lines (1,515 loc) • 106 kB
JavaScript
import { defineComponent, openBlock, createElementBlock, normalizeClass, renderSlot, hasInjectionContext, inject, getCurrentInstance, ref, watch, reactive, markRaw, effectScope, isRef, isReactive, toRef, toRaw, nextTick, computed, getCurrentScope, onScopeDispose, toRefs, normalizeStyle, createElementVNode, Fragment, renderList, toDisplayString, withDirectives, vShow, pushScopeId, popScopeId, resolveComponent, createBlock, resolveDynamicComponent, createVNode, withCtx, createTextVNode } from "vue";
const _sfc_main$d = /* @__PURE__ */ defineComponent({
name: "tata-button",
__name: "index",
props: {
type: {},
size: {}
},
setup(t) {
return console.log(t), (r, o) => (openBlock(), createElementBlock("button", {
class: normalizeClass([
"tata-btn",
[r.size, r.type]
])
}, [
renderSlot(r.$slots, "default", {}, void 0, !0)
], 2));
}
}), _export_sfc = (t, a) => {
const r = t.__vccOpts || t;
for (const [o, s] of a)
r[o] = s;
return r;
}, Button = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-6c87ce6b"]]);
var isVue2 = !1;
function set(t, a, r) {
return Array.isArray(t) ? (t.length = Math.max(t.length, a), t.splice(a, 1, r), r) : (t[a] = r, r);
}
function del(t, a) {
if (Array.isArray(t)) {
t.splice(a, 1);
return;
}
delete t[a];
}
/*!
* pinia v2.1.7
* (c) 2023 Eduardo San Martin Morote
* @license MIT
*/
let activePinia;
const setActivePinia = (t) => activePinia = t, piniaSymbol = process.env.NODE_ENV !== "production" ? Symbol("pinia") : (
/* istanbul ignore next */
Symbol()
);
function isPlainObject(t) {
return t && typeof t == "object" && Object.prototype.toString.call(t) === "[object Object]" && typeof t.toJSON != "function";
}
var MutationType;
(function(t) {
t.direct = "direct", t.patchObject = "patch object", t.patchFunction = "patch function";
})(MutationType || (MutationType = {}));
const IS_CLIENT = typeof window < "u", USE_DEVTOOLS = (process.env.NODE_ENV !== "production" || !1) && process.env.NODE_ENV !== "test" && IS_CLIENT;
function patchObject(t, a) {
for (const r in a) {
const o = a[r];
if (!(r in t))
continue;
const s = t[r];
isPlainObject(s) && isPlainObject(o) && !isRef(o) && !isReactive(o) ? t[r] = patchObject(s, o) : t[r] = o;
}
return t;
}
const noop = () => {
};
function addSubscription(t, a, r, o = noop) {
t.push(a);
const s = () => {
const n = t.indexOf(a);
n > -1 && (t.splice(n, 1), o());
};
return !r && getCurrentScope() && onScopeDispose(s), s;
}
function triggerSubscriptions(t, ...a) {
t.slice().forEach((r) => {
r(...a);
});
}
const fallbackRunWithContext = (t) => t();
function mergeReactiveObjects(t, a) {
t instanceof Map && a instanceof Map && a.forEach((r, o) => t.set(o, r)), t instanceof Set && a instanceof Set && a.forEach(t.add, t);
for (const r in a) {
if (!a.hasOwnProperty(r))
continue;
const o = a[r], s = t[r];
isPlainObject(s) && isPlainObject(o) && t.hasOwnProperty(r) && !isRef(o) && !isReactive(o) ? t[r] = mergeReactiveObjects(s, o) : t[r] = o;
}
return t;
}
const skipHydrateSymbol = process.env.NODE_ENV !== "production" ? Symbol("pinia:skipHydration") : (
/* istanbul ignore next */
Symbol()
);
function shouldHydrate(t) {
return !isPlainObject(t) || !t.hasOwnProperty(skipHydrateSymbol);
}
const { assign } = Object;
function isComputed(t) {
return !!(isRef(t) && t.effect);
}
function createOptionsStore(t, a, r, o) {
const { state: s, actions: n, getters: i } = a, l = r.state.value[t];
let c;
function u() {
!l && (process.env.NODE_ENV === "production" || !o) && (r.state.value[t] = s ? s() : {});
const h = process.env.NODE_ENV !== "production" && o ? (
// use ref() to unwrap refs inside state TODO: check if this is still necessary
toRefs(ref(s ? s() : {}).value)
) : toRefs(r.state.value[t]);
return assign(h, n, Object.keys(i || {}).reduce((m, _) => (process.env.NODE_ENV !== "production" && _ in h && console.warn(`[🍍]: A getter cannot have the same name as another state property. Rename one of them. Found with "${_}" in store "${t}".`), m[_] = markRaw(computed(() => {
setActivePinia(r);
const $ = r._s.get(t);
return i[_].call($, $);
})), m), {}));
}
return c = createSetupStore(t, u, a, r, o, !0), c;
}
function createSetupStore(t, a, r = {}, o, s, n) {
let i;
const l = assign({ actions: {} }, r);
if (process.env.NODE_ENV !== "production" && !o._e.active)
throw new Error("Pinia destroyed");
const c = {
deep: !0
// flush: 'post',
};
process.env.NODE_ENV !== "production" && !isVue2 && (c.onTrigger = (f) => {
u ? $ = f : u == !1 && !g._hotUpdating && (Array.isArray($) ? $.push(f) : console.error("🍍 debuggerEvents should be an array. This is most likely an internal Pinia bug."));
});
let u, h, m = [], _ = [], $;
const y = o.state.value[t];
!n && !y && (process.env.NODE_ENV === "production" || !s) && (o.state.value[t] = {});
const E = ref({});
let T;
function p(f) {
let d;
u = h = !1, process.env.NODE_ENV !== "production" && ($ = []), typeof f == "function" ? (f(o.state.value[t]), d = {
type: MutationType.patchFunction,
storeId: t,
events: $
}) : (mergeReactiveObjects(o.state.value[t], f), d = {
type: MutationType.patchObject,
payload: f,
storeId: t,
events: $
});
const b = T = Symbol();
nextTick().then(() => {
T === b && (u = !0);
}), h = !0, triggerSubscriptions(m, d, o.state.value[t]);
}
const v = n ? function() {
const { state: d } = r, b = d ? d() : {};
this.$patch((S) => {
assign(S, b);
});
} : (
/* istanbul ignore next */
process.env.NODE_ENV !== "production" ? () => {
throw new Error(`🍍: Store "${t}" is built using the setup syntax and does not implement $reset().`);
} : noop
);
function x() {
i.stop(), m = [], _ = [], o._s.delete(t);
}
function N(f, d) {
return function() {
setActivePinia(o);
const b = Array.from(arguments), S = [], V = [];
function L(C) {
S.push(C);
}
function k(C) {
V.push(C);
}
triggerSubscriptions(_, {
args: b,
name: f,
store: g,
after: L,
onError: k
});
let O;
try {
O = d.apply(this && this.$id === t ? this : g, b);
} catch (C) {
throw triggerSubscriptions(V, C), C;
}
return O instanceof Promise ? O.then((C) => (triggerSubscriptions(S, C), C)).catch((C) => (triggerSubscriptions(V, C), Promise.reject(C))) : (triggerSubscriptions(S, O), O);
};
}
const w = /* @__PURE__ */ markRaw({
actions: {},
getters: {},
state: [],
hotState: E
}), I = {
_p: o,
// _s: scope,
$id: t,
$onAction: addSubscription.bind(null, _),
$patch: p,
$reset: v,
$subscribe(f, d = {}) {
const b = addSubscription(m, f, d.detached, () => S()), S = i.run(() => watch(() => o.state.value[t], (V) => {
(d.flush === "sync" ? h : u) && f({
storeId: t,
type: MutationType.direct,
events: $
}, V);
}, assign({}, c, d)));
return b;
},
$dispose: x
}, g = reactive(process.env.NODE_ENV !== "production" || USE_DEVTOOLS ? assign(
{
_hmrPayload: w,
_customProperties: markRaw(/* @__PURE__ */ new Set())
// devtools custom properties
},
I
// must be added later
// setupStore
) : I);
o._s.set(t, g);
const A = (o._a && o._a.runWithContext || fallbackRunWithContext)(() => o._e.run(() => (i = effectScope()).run(a)));
for (const f in A) {
const d = A[f];
if (isRef(d) && !isComputed(d) || isReactive(d))
process.env.NODE_ENV !== "production" && s ? set(E.value, f, toRef(A, f)) : n || (y && shouldHydrate(d) && (isRef(d) ? d.value = y[f] : mergeReactiveObjects(d, y[f])), o.state.value[t][f] = d), process.env.NODE_ENV !== "production" && w.state.push(f);
else if (typeof d == "function") {
const b = process.env.NODE_ENV !== "production" && s ? d : N(f, d);
A[f] = b, process.env.NODE_ENV !== "production" && (w.actions[f] = d), l.actions[f] = d;
} else
process.env.NODE_ENV !== "production" && isComputed(d) && (w.getters[f] = n ? (
// @ts-expect-error
r.getters[f]
) : d, IS_CLIENT && (A._getters || // @ts-expect-error: same
(A._getters = markRaw([]))).push(f));
}
if (assign(g, A), assign(toRaw(g), A), Object.defineProperty(g, "$state", {
get: () => process.env.NODE_ENV !== "production" && s ? E.value : o.state.value[t],
set: (f) => {
if (process.env.NODE_ENV !== "production" && s)
throw new Error("cannot set hotState");
p((d) => {
assign(d, f);
});
}
}), process.env.NODE_ENV !== "production" && (g._hotUpdate = markRaw((f) => {
g._hotUpdating = !0, f._hmrPayload.state.forEach((d) => {
if (d in g.$state) {
const b = f.$state[d], S = g.$state[d];
typeof b == "object" && isPlainObject(b) && isPlainObject(S) ? patchObject(b, S) : f.$state[d] = S;
}
set(g, d, toRef(f.$state, d));
}), Object.keys(g.$state).forEach((d) => {
d in f.$state || del(g, d);
}), u = !1, h = !1, o.state.value[t] = toRef(f._hmrPayload, "hotState"), h = !0, nextTick().then(() => {
u = !0;
});
for (const d in f._hmrPayload.actions) {
const b = f[d];
set(g, d, N(d, b));
}
for (const d in f._hmrPayload.getters) {
const b = f._hmrPayload.getters[d], S = n ? (
// special handling of options api
computed(() => (setActivePinia(o), b.call(g, g)))
) : b;
set(g, d, S);
}
Object.keys(g._hmrPayload.getters).forEach((d) => {
d in f._hmrPayload.getters || del(g, d);
}), Object.keys(g._hmrPayload.actions).forEach((d) => {
d in f._hmrPayload.actions || del(g, d);
}), g._hmrPayload = f._hmrPayload, g._getters = f._getters, g._hotUpdating = !1;
})), USE_DEVTOOLS) {
const f = {
writable: !0,
configurable: !0,
// avoid warning on devtools trying to display this property
enumerable: !1
};
["_p", "_hmrPayload", "_getters", "_customProperties"].forEach((d) => {
Object.defineProperty(g, d, assign({ value: g[d] }, f));
});
}
return o._p.forEach((f) => {
if (USE_DEVTOOLS) {
const d = i.run(() => f({
store: g,
app: o._a,
pinia: o,
options: l
}));
Object.keys(d || {}).forEach((b) => g._customProperties.add(b)), assign(g, d);
} else
assign(g, i.run(() => f({
store: g,
app: o._a,
pinia: o,
options: l
})));
}), process.env.NODE_ENV !== "production" && g.$state && typeof g.$state == "object" && typeof g.$state.constructor == "function" && !g.$state.constructor.toString().includes("[native code]") && console.warn(`[🍍]: The "state" must be a plain object. It cannot be
state: () => new MyClass()
Found in store "${g.$id}".`), y && n && r.hydrate && r.hydrate(g.$state, y), u = !0, h = !0, g;
}
function defineStore(t, a, r) {
let o, s;
const n = typeof a == "function";
if (typeof t == "string")
o = t, s = n ? r : a;
else if (s = t, o = t.id, process.env.NODE_ENV !== "production" && typeof o != "string")
throw new Error('[🍍]: "defineStore()" must be passed a store id as its first argument.');
function i(l, c) {
const u = hasInjectionContext();
if (l = // in test mode, ignore the argument provided as we can always retrieve a
// pinia instance with getActivePinia()
(process.env.NODE_ENV === "test" && activePinia && activePinia._testing ? null : l) || (u ? inject(piniaSymbol, null) : null), l && setActivePinia(l), process.env.NODE_ENV !== "production" && !activePinia)
throw new Error(`[🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?
See https://pinia.vuejs.org/core-concepts/outside-component-usage.html for help.
This will fail in production.`);
l = activePinia, l._s.has(o) || (n ? createSetupStore(o, a, s, l) : createOptionsStore(o, s, l), process.env.NODE_ENV !== "production" && (i._pinia = l));
const h = l._s.get(o);
if (process.env.NODE_ENV !== "production" && c) {
const m = "__hot:" + o, _ = n ? createSetupStore(m, a, s, l, !0) : createOptionsStore(m, assign({}, s), l, !0);
c._hotUpdate(_), delete l.state.value[m], l._s.delete(m);
}
if (process.env.NODE_ENV !== "production" && IS_CLIENT) {
const m = getCurrentInstance();
if (m && m.proxy && // avoid adding stores that are just built for hot module replacement
!c) {
const _ = m.proxy, $ = "_pStores" in _ ? _._pStores : _._pStores = {};
$[o] = h;
}
}
return h;
}
return i.$id = o, i;
}
let random = (t) => crypto.getRandomValues(new Uint8Array(t)), customRandom = (t, a, r) => {
let o = (2 << Math.log(t.length - 1) / Math.LN2) - 1, s = -~(1.6 * o * a / t.length);
return (n = a) => {
let i = "";
for (; ; ) {
let l = r(s), c = s;
for (; c--; )
if (i += t[l[c] & o] || "", i.length === n)
return i;
}
};
}, customAlphabet = (t, a = 21) => customRandom(t, a, random);
const getDefaultProps = () => ({
uuid: "",
type: "braid-txt",
name: "",
isEdit: !0,
dragable: !0,
// 是否可拖拽
resizable: !0,
// 尺寸是否可变
width: 120,
height: 40,
left: 50,
top: 0,
value: "自定义文本",
title: "自定义文本",
defaultValue: "自定义文本",
style: { zIndex: 1 }
}), getCodeTypeArray = () => ["128A", "128B", "128C", "128Auto", "EAN8", "EAN13", "EAN128A", "EAN128B", "EAN128C", "Code39", "39Extended", "2_5interleaved", "2_5industrial", "2_5matrix", "UPC_A", "UPC_E0", "UPC_E1", "UPCsupp2", "UPCsupp5", "Code93", "93Extended", "MSI", "PostNet", "Codabar", "QRCode", "PDF417"], getItemTypeArray = () => [
{ label: "普通项", value: 0 },
{ label: "页眉页脚", value: 1 },
{ label: "页号项", value: 2 },
{ label: "页数项", value: 3 },
{ label: "多页项", value: 4 }
], actions = {
// 添加模板项
addTempItem(t, a) {
this.addTempItems(t, a), this.select(t, {
uuid: t.page.tempItems[t.page.tempItems.length - 1].uuid
});
},
// 初始化模板设计器
async designerInit(t, a) {
this.initOptionItems(t, a.options), this.initPage(t, a.tempValue);
},
// 初始化页面属性
initPage(t, a) {
t.page = a;
let r = a.tempItems ? a.tempItems.map((o) => ({ ...t.widgetSetting[o.type], ...o, style: { ...t.widgetSetting[o.type].style, ...o.style || {} } })) : [];
t.page.tempItems = r;
},
// 初始化可选对象
initOptionItems(t, a) {
let r = a ? a.map((o) => ({ ...t.widgetSetting[o.type], ...o, style: { ...t.widgetSetting[o.type].style, ...o.style || {} } })) : [];
t.optionItems = r;
},
// 初始化选中对象
initActive(t) {
t.activeElement = getDefaultProps();
},
// 设置 mousemove 操作的初始值
initmove(t, a) {
t.startX = a.startX, t.startY = a.startY, t.originX = a.originX, t.originY = a.originY, t.moving = !0;
},
// 选中元件与取消选中
select(t, a) {
if (t.uuid = a.uuid, a.uuid === -1)
t.activeElement = getDefaultProps(), t.type = "page";
else {
let r = t.page.tempItems.find((o) => o.uuid === a.uuid);
r && (t.activeElement = r, t.type = r.type);
}
},
// 元件移动结束
stopmove(t) {
t.moving = !1;
},
// 移动元件
move(t, a) {
var r = t.activeElement, o = a.x - t.startX, s = a.y - t.startY, n = t.originX + Math.floor(o * 100 / t.zoom), i = t.originY + Math.floor(s * 100 / t.zoom);
r.left = n > 0 ? n : 0, r.top = i > 0 ? i : 0;
},
// 调整元件尺寸
resize(t, a) {
var r = a.x - t.startX, o = a.y - t.startY, s;
if (a.type === "right") {
s = t.originX + Math.floor(r * 100 / t.zoom), t.activeElement.width = s > 10 ? s : 10;
return;
}
if (a.type === "down") {
s = t.originX + Math.floor(o * 100 / t.zoom), t.activeElement.height = s > 10 ? s : 10;
return;
}
if (a.type === "left") {
var n = t.originX + Math.floor(r * 100 / t.zoom), i = t.originY - Math.floor(r * 100 / t.zoom);
t.activeElement.left = n > 0 ? n : 0, t.activeElement.width = i > 10 ? i : 10;
return;
}
if (a.type === "up") {
var l = t.originX + Math.floor(o * 100 / t.zoom), c = t.originY - Math.floor(o * 100 / t.zoom);
t.activeElement.top = l > 0 ? l : 0, t.activeElement.height = c > 10 ? c : 10;
}
},
// 更新元件初始 top 值
updateSrollTop(t, a) {
t.top = a;
},
// 页面缩放
zoom(t, a) {
t.zoom = a;
},
// 删除选中元件
delete(t, a) {
var r = t.type;
if (r === "page")
return;
let o = 0;
t.page.tempItems.forEach((s, n) => {
s.uuid === a && (o = n);
}), t.page.tempItems.splice(o, 1), t.activeElement = getDefaultProps(), t.type = "page", t.uuid = -1;
},
//添加组件
addTempItems(t, a) {
let r = { uuid: customAlphabet("1234567890abcdef", 10) }, o = JSON.parse(JSON.stringify(a));
t.page.tempItems.push(Object.assign(o, r));
},
// 更新数据
updateData(t, { uuid: a, value: r }) {
let o = t.page.tempItems.find((s) => s.uuid === a);
o && (o.value = r);
},
// 设置模板Id
setTempId(t, a) {
t.tempId = a;
},
setLoading(t, a) {
t.loading = a;
},
// 设置模板默认属性
setWidgetSetting(t, a) {
t.widgetSetting = a;
}
}, WIDGET_NAME$4 = "braid-txt", _sfc_main$c = {
name: WIDGET_NAME$4,
setting: {
type: WIDGET_NAME$4,
isEdit: !0,
dragable: !0,
// 是否可拖拽
resizable: !0,
// 尺寸是否可变
width: 120,
height: 40,
left: 50,
top: 0,
title: "自定义文本",
value: "自定义文本",
defaultValue: "自定义文本",
name: "",
style: {
zIndex: 0,
FontSize: 9,
FontColor: "#000000",
Bold: !1,
// 1代表粗体，0代表非粗体
Italic: !1,
// 1代表斜体，0代表非斜体
Underline: !1,
// 1代表有下划线，0代表无下划线
Alignment: "left",
// 对齐方式
ItemType: 0
// 打印类型 0--普通项 1--页眉页脚 2--页号项 3--页数项 4--多页项
}
},
props: [
"val"
// 文本对象
],
methods: {
updateText(t, a) {
let r = t.target.innerHTML;
useStore().updateData(useStore().state, {
uuid: a,
key: "value",
value: r
});
}
}
}, _hoisted_1$b = ["innerHTML", "contenteditable"];
function _sfc_render$b(t, a, r, o, s, n) {
return openBlock(), createElementBlock("div", {
class: "widgets",
innerHTML: r.val.value,
contenteditable: !!r.val.isEdit,
onBlur: a[0] || (a[0] = (i) => n.updateText(i, r.val.uuid)),
style: normalizeStyle({
position: "absolute",
left: r.val.left + "px",
top: r.val.top + "px",
width: r.val.width + "px",
minHeight: r.val.height + "px",
zIndex: r.val.style.zIndex,
fontSize: r.val.style.FontSize + "pt",
color: r.val.style.FontColor,
textAlign: r.val.style.Alignment,
fontWeight: r.val.style.Bold ? "bold" : "normal"
})
}, null, 44, _hoisted_1$b);
}
const braidTxt = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$b]]), WIDGET_NAME$3 = "bar-code", _sfc_main$b = {
name: WIDGET_NAME$3,
setting: {
type: WIDGET_NAME$3,
isEdit: !1,
dragable: !0,
// 是否可拖拽
resizable: !0,
// 尺寸是否可变
width: 120,
height: 40,
left: 50,
top: 0,
title: "条码",
value: "1234567890",
defaultValue: "1234567890",
name: "",
style: {
zIndex: 0,
FontSize: 9,
ShowBarText: !1,
// 条码是否显示值 0--不显示 1--显示
codeType: "Code39",
// 条码类型
ItemType: 0
// 打印类型 0--普通项 1--页眉页脚 2--页号项 3--页数项 4--多页项
}
},
props: ["val"],
data() {
return {
// codeImg: require('../../../assets/image/barCode.png'),
};
},
computed: {
// 'QRCode', 'PDF417'
codeUrl() {
return this.val.style.codeType === "QRCode" ? require("./QRCode.png") : this.val.style.codeType === "PDF417" ? require("./PDF417.png") : require("./barCode.png");
}
}
}, _hoisted_1$a = ["src"];
function _sfc_render$a(t, a, r, o, s, n) {
return openBlock(), createElementBlock("div", {
class: "bar-code",
style: normalizeStyle({
position: "absolute",
width: r.val.width + "px",
height: r.val.height + "px",
left: r.val.left + "px",
top: r.val.top + "px",
zIndex: r.val.zIndex
})
}, [
createElementVNode("img", { src: n.codeUrl }, null, 8, _hoisted_1$a),
createElementVNode("div", {
class: "text",
style: normalizeStyle({
display: r.val.style.ShowBarText ? "" : "none",
fontSize: r.val.style.FontSize + "pt",
fontWeight: r.val.style.Bold ? "bold" : "normal"
})
}, "1234567890", 4)
], 4);
}
const barCode = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$a], ["__scopeId", "data-v-6c5b651d"]]), WIDGET_NAME$2 = "braid-table", _sfc_main$a = {
name: WIDGET_NAME$2,
setting: {
type: WIDGET_NAME$2,
isEdit: !1,
// 是否可编辑
dragable: !0,
// 是否可拖拽
resizable: !0,
// 尺寸是否可变
width: 240,
height: 60,
left: 50,
top: 10,
title: "表格",
value: [],
defaultValue: [],
tabelHtml: "",
columnsAttr: [],
// 表格列选项
columns: [],
// 已选表格列表
selectCol: [],
// 已选表格列name数组（用于多选框双向绑定）
name: "",
style: {
zIndex: 0,
Alignment: "left",
// 对齐方式 1--左靠齐 2--居中 3--右靠齐
FontSize: 9,
FontColor: "#000000",
BorderColor: "#000000",
AutoHeight: !1,
// 高度自动（模板在该元素位置以下的元素都关联打印）
BottomMargin: 0
// 距离下边距
}
},
props: [
"val"
// 文本对象
],
computed: {
// 去掉type='row'的数据
columns() {
return this.val.columns || [];
}
},
methods: {}
}, _hoisted_1$9 = {
border: "1",
width: "100%",
cellspacing: "0",
cellpadding: "2",
style: { "border-collapse": "collapse", "font-size": "12px" },
bordercolor: "#000000"
}, _hoisted_2$4 = ["width"];
function _sfc_render$9(t, a, r, o, s, n) {
return openBlock(), createElementBlock("div", {
class: "widgets",
style: normalizeStyle([{
left: r.val.left + "px",
top: r.val.top + "px",
width: r.val.width + "px",
height: r.val.height + "px",
textAlign: r.val.style.Alignment,
fontSize: r.val.style.FontSize + "pt",
color: r.val.style.FontColor
}, { position: "absolute", overflow: "hidden" }])
}, [
createElementVNode("table", _hoisted_1$9, [
createElementVNode("tr", null, [
(openBlock(!0), createElementBlock(Fragment, null, renderList(n.columns, (i) => (openBlock(), createElementBlock("th", {
key: i.name,
width: i.name === "_seq" ? 40 : ""
}, toDisplayString(i.title), 9, _hoisted_2$4))), 128))
]),
createElementVNode("tr", null, [
(openBlock(!0), createElementBlock(Fragment, null, renderList(n.columns, (i) => (openBlock(), createElementBlock("td", {
key: i.name
}, toDisplayString(i.value), 1))), 128))
])
])
], 4);
}
const table = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$9]]), WIDGET_NAME$1 = "braid-image", _sfc_main$9 = {
name: WIDGET_NAME$1,
setting: {
type: WIDGET_NAME$1,
title: "图片",
isEdit: !1,
dragable: !0,
// 是否可拖拽
resizable: !0,
// 尺寸是否可变
width: 120,
height: 40,
left: 50,
top: 0,
value: "",
defaultValue: "",
name: "",
style: {
zIndex: 0,
ItemType: 0
// 打印类型 0--普通项 1--页眉页脚 2--页号项 3--页数项 4--多页项
}
},
props: [
"val"
// 图片对象
],
data() {
return {};
},
computed: {
imageUrl() {
return this.val.value;
}
},
watch: {
val(t) {
this.imageUrl = t.value;
}
}
}, _hoisted_1$8 = ["title", "src"];
function _sfc_render$8(t, a, r, o, s, n) {
return openBlock(), createElementBlock("div", {
class: "widgets",
style: normalizeStyle({
position: "absolute",
width: r.val.width + "px",
height: r.val.height + "px",
left: r.val.left + "px",
top: r.val.top + "px",
zIndex: r.val.zIndex
})
}, [
createElementVNode("img", {
class: "braid-image",
title: r.val.title,
src: r.val.value || r.val.defaultValue
}, null, 8, _hoisted_1$8)
], 4);
}
const image = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$8], ["__scopeId", "data-v-0839a766"]]), WIDGET_NAME = "braid-html", _sfc_main$8 = {
name: WIDGET_NAME,
setting: {
type: WIDGET_NAME,
isEdit: !1,
dragable: !0,
// 是否可拖拽
resizable: !0,
// 尺寸是否可变
width: 120,
height: 40,
left: 50,
top: 0,
title: "html",
value: "<div>html<div>",
defaultValue: "<div>html<div>",
name: "",
style: {
zIndex: 0,
ItemType: 0,
// 打印类型 0--普通项 1--页眉页脚 2--页号项 3--页数项 4--多页项
AutoHeight: !1,
// 高度自动（模板在该元素位置以下的元素都关联打印）
BottomMargin: 0
// 距离下边距
}
},
props: [
"val"
// 文本对象
],
methods: {
updateText(t, a) {
let r = t.target.innerHTML;
useStore().updateData(useStore().state, {
uuid: a,
key: "value",
value: r
});
}
}
}, _hoisted_1$7 = ["innerHTML", "contenteditable"];
function _sfc_render$7(t, a, r, o, s, n) {
return openBlock(), createElementBlock("div", {
class: "widgets",
innerHTML: r.val.value,
contenteditable: !!r.val.isEdit,
onBlur: a[0] || (a[0] = (i) => n.updateText(i, r.val.uuid)),
style: normalizeStyle({
position: "absolute",
left: r.val.left + "px",
top: r.val.top + "px",
width: r.val.width + "px",
minHeight: r.val.height + "px",
zIndex: r.val.style.zIndex,
fontSize: r.val.style.FontSize + "pt",
color: r.val.style.FontColor
})
}, null, 44, _hoisted_1$7);
}
const html = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$7]]), install = function(t) {
t.component(braidTxt.name, braidTxt), t.component(barCode.name, barCode), t.component(table.name, table), t.component(image.name, image), t.component(html.name, html);
}, getWidgetsSetting = function() {
return {
[braidTxt.name]: braidTxt.setting,
[barCode.name]: barCode.setting,
[table.name]: table.setting,
[image.name]: image.setting,
[html.name]: html.setting
};
}, widgets = {
install,
getWidgetsSetting
}, state = {
zoom: 100,
// 画布缩放百分比
type: "page",
// 选中元素类型
index: -1,
// 选中元素索引
uuid: -1,
// 选中元素uuid
originX: 0,
// 选中元件的横向初始值
originY: 0,
// 选中元件的纵向初始值
startX: 0,
// 鼠标摁下时的横坐标
startY: 0,
// 鼠标摁下时的纵坐标
moving: !1,
// 是否正在移动元件（参考线仅在移动元件时显示）
activeElement: getDefaultProps(),
// 选中对象，要么是元件，要么是页面
// 模板信息
page: {
title: "demo",
width: 750,
height: 550,
pageWidth: 750,
pageHeight: 550,
tempItems: []
// 模板已选项
},
optionItems: [],
// 可选项
//模板参数
tempId: "",
// 模板Id
loading: !1,
// 是否正在初始化中
widgetSetting: widgets.getWidgetsSetting()
// 模板组件默认属性
}, useStore = defineStore("main", {
state: () => ({
state
}),
getters: {},
actions
}), _sfc_main$7 = {
data() {
return {
type: ""
// 调整方向 left | right | up | down
};
},
computed: {
optionsType() {
return useStore().state.type;
},
elm() {
let t = useStore().state.activeElement;
return t.resizable ? t : "";
}
},
methods: {
handlemousedown(t, a, r, o) {
t.stopPropagation(), this.type = a, useStore().initmove(useStore().state, {
startX: t.pageX,
startY: t.pageY,
originX: this.elm[r],
originY: this.elm[o]
}), document.addEventListener("mousemove", this.handlemousemove, !0), document.addEventListener("mouseup", this.handlemouseup, !0);
},
handlemousemove(t) {
t.stopPropagation(), t.preventDefault(), useStore().resize(useStore().state, {
x: t.pageX,
y: t.pageY,
type: this.type
});
},
handlemouseup() {
document.removeEventListener("mousemove", this.handlemousemove, !0), document.removeEventListener("mouseup", this.handlemouseup, !0), useStore().stopmove(useStore().state);
}
}
}, _withScopeId = (t) => (pushScopeId("data-v-0b37bca1"), t = t(), popScopeId(), t), _hoisted_1$6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "square" }, null, -1)), _hoisted_2$3 = [
_hoisted_1$6
], _hoisted_3$2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "square" }, null, -1)), _hoisted_4$1 = [
_hoisted_3$2
], _hoisted_5$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "square" }, null, -1)), _hoisted_6 = [
_hoisted_5$1
], _hoisted_7 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "square" }, null, -1)), _hoisted_8 = [
_hoisted_7
];
function _sfc_render$6(t, a, r, o, s, n) {
return withDirectives((openBlock(), createElementBlock("div", null, [
createElementVNode("div", {
style: normalizeStyle({
height: n.elm.height + "px",
top: n.elm.top + "px",
left: n.elm.left + "px"
}),
class: "verti",
onMousedown: a[0] || (a[0] = (i) => n.handlemousedown(i, "left", "left", "width"))
}, _hoisted_2$3, 36),
createElementVNode("div", {
style: normalizeStyle({
height: n.elm.height + "px",
top: n.elm.top + "px",
left: n.elm.left + n.elm.width + "px"
}),
class: "verti",
onMousedown: a[1] || (a[1] = (i) => n.handlemousedown(i, "right", "width"))
}, _hoisted_4$1, 36),
createElementVNode("div", {
style: normalizeStyle({
width: n.elm.width + "px",
top: n.elm.top + "px",
left: n.elm.left + "px"
}),
class: "horiz",
onMousedown: a[2] || (a[2] = (i) => n.handlemousedown(i, "up", "top", "height"))
}, _hoisted_6, 36),
createElementVNode("div", {
style: normalizeStyle({
width: n.elm.width + "px",
top: n.elm.top + n.elm.height + "px",
left: n.elm.left + "px"
}),
class: "horiz",
onMousedown: a[3] || (a[3] = (i) => n.handlemousedown(i, "down", "height"))
}, _hoisted_8, 36)
], 512)), [
[vShow, n.optionsType !== "page"]
]);
}
const control = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$6], ["__scopeId", "data-v-0b37bca1"]]), move = {
methods: {
/**
* 初始化鼠标拖拽事件
* @param {*} e
*/
initmovement(t) {
var a = useStore().state.activeElement;
useStore().initmove(useStore().state, {
startX: t.pageX,
startY: t.pageY,
originX: a.left,
originY: a.top
}), document.addEventListener("mousemove", this.handlemousemove, !0), document.addEventListener("mouseup", this.handlemouseup, !0);
},
/**
* 鼠标移动
* @param {*} e
*/
handlemousemove(t) {
t.stopPropagation(), t.preventDefault(), useStore().move(useStore().state, {
x: t.pageX,
y: t.pageY
});
},
/**
* 鼠标up
*/
handlemouseup() {
document.removeEventListener("mousemove", this.handlemousemove, !0), document.removeEventListener("mouseup", this.handlemouseup, !0), useStore().stopmove(useStore().state);
}
}
}, _sfc_main$6 = {
components: {
control
// 尺寸控制
},
mixins: [move],
data() {
return {};
},
computed: {
// 已添加的组件
widgetStore() {
return useStore().state.page.tempItems;
},
// 背景图地址
backImg() {
return useStore().state.page.imageUrl ? useStore().state.page.imageUrl : "";
},
// 画布高度
page() {
return useStore().state.page;
},
// 选中项id
widgetId() {
return useStore().state.uuid;
}
},
mounted() {
let t = document.getElementById("viewport");
t ? t.addEventListener("mousedown", this.handleSelection, !1) : console.error("未找的‘viewport’节点"), document.addEventListener(
"keydown",
(a) => {
a.stopPropagation();
var r = useStore().state.activeElement;
if (a.keyCode === 37 && r.left) {
r.left -= 1;
return;
}
if (a.keyCode === 38 && r.top) {
a.preventDefault(), r.top -= 1;
return;
}
if (a.keyCode === 39 && r.left) {
r.left += 1;
return;
}
a.keyCode === 40 && r.top && (a.preventDefault(), r.top += 1);
},
!0
);
},
methods: {
/**
* 目标元素获得焦点
*/
handleSelection(t) {
var a = this.selectTarget(t.target);
if (a) {
var r = a.getAttribute("data-uuid");
useStore().select(useStore().state, {
uuid: r || -1
}), a = useStore().state.activeElement, a.dragable && this.initmovement(t);
} else
useStore().select(useStore().state, {
uuid: -1
});
},
/**
* 获得选中的目标，如果没有返回false
*/
selectTarget(t) {
let a = t.getAttribute("data-type");
return a ? a === "viewport" ? !1 : t : this.selectTarget(t.parentNode);
}
}
}, _hoisted_1$5 = {
id: "viewport",
"data-type": "viewport",
class: "holder"
};
function _sfc_render$5(t, a, r, o, s, n) {
const i = resolveComponent("control");
return openBlock(), createElementBlock("div", _hoisted_1$5, [
createElementVNode("div", {
style: normalizeStyle({
height: n.page.height + "px",
width: n.page.width + "px",
backgroundImage: "url(" + n.backImg + ")"
}),
class: "screen"
}, [
(openBlock(!0), createElementBlock(Fragment, null, renderList(n.widgetStore, (l) => (openBlock(), createBlock(resolveDynamicComponent(l.type), {
"data-title": l.type,
class: normalizeClass([{ active: n.widgetId === l.uuid }, "layer"]),
key: l.uuid,
val: l,
"data-type": l.type,
"data-uuid": l.uuid
}, null, 8, ["data-title", "class", "val", "data-type", "data-uuid"]))), 128)),
createVNode(i)
], 4)
]);
}
const Viewport = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$5], ["__scopeId", "data-v-fba8105c"]]), _sfc_main$5 = {
computed: {
pageInfo() {
return useStore().state.page;
}
}
}, _hoisted_1$4 = /* @__PURE__ */ createElementVNode("span", { class: "unit-text" }, "(mm)", -1), _hoisted_2$2 = /* @__PURE__ */ createElementVNode("span", { class: "unit-text" }, "(mm)", -1);
function _sfc_render$4(t, a, r, o, s, n) {
const i = resolveComponent("el-input"), l = resolveComponent("el-form-item"), c = resolveComponent("el-row"), u = resolveComponent("el-input-number"), h = resolveComponent("el-col"), m = resolveComponent("el-form");
return openBlock(), createElementBlock("div", null, [
createVNode(m, {
"label-width": "80px",
model: n.pageInfo,
size: "mini",
class: "kr-form"
}, {
default: withCtx(() => [
createVNode(c, null, {
default: withCtx(() => [
createVNode(l, { label: "模板名称" }, {
default: withCtx(() => [
createVNode(i, {
modelValue: n.pageInfo.title,
"onUpdate:modelValue": a[0] || (a[0] = (_) => n.pageInfo.title = _),
class: "full-w"
}, null, 8, ["modelValue"])
]),
_: 1
})
]),
_: 1
}),
createVNode(c, null, {
default: withCtx(() => [
createVNode(h, { span: 12 }, {
default: withCtx(() => [
createVNode(l, { label: "模板宽度" }, {
default: withCtx(() => [
createVNode(u, {
modelValue: n.pageInfo.width,
"onUpdate:modelValue": a[1] || (a[1] = (_) => n.pageInfo.width = _),
"controls-position": "right",
min: 0,
class: "min-input"
}, null, 8, ["modelValue"])
]),
_: 1
})
]),
_: 1
}),
createVNode(h, { span: 12 }, {
default: withCtx(() => [
createVNode(l, { label: "模板高度" }, {
default: withCtx(() => [
createVNode(u, {
modelValue: n.pageInfo.height,
"onUpdate:modelValue": a[2] || (a[2] = (_) => n.pageInfo.height = _),
"controls-position": "right",
min: 0,
class: "min-input"
}, null, 8, ["modelValue"])
]),
_: 1
})
]),
_: 1
})
]),
_: 1
}),
createVNode(c, null, {
default: withCtx(() => [
createVNode(l, { label: "纸张宽度" }, {
default: withCtx(() => [
createVNode(u, {
modelValue: n.pageInfo.pageWidth,
"onUpdate:modelValue": a[3] || (a[3] = (_) => n.pageInfo.pageWidth = _),
"controls-position": "right",
min: 0,
class: "min-input"
}, null, 8, ["modelValue"]),
_hoisted_1$4
]),
_: 1
})
]),
_: 1
}),
createVNode(c, null, {
default: withCtx(() => [
createVNode(l, { label: "纸张高度" }, {
default: withCtx(() => [
createVNode(u, {
modelValue: n.pageInfo.pageHeight,
"onUpdate:modelValue": a[4] || (a[4] = (_) => n.pageInfo.pageHeight = _),
"controls-position": "right",
min: 0,
class: "min-input"
}, null, 8, ["modelValue"]),
_hoisted_2$2
]),
_: 1
})
]),
_: 1
})
]),
_: 1
}, 8, ["model"])
]);
}
const page = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$4]]), _sfc_main$4 = {
data() {
return {
codeTypeArray: getCodeTypeArray(),
itemTypeArray: getItemTypeArray()
};
},
computed: {
activeElement() {
return useStore().state.activeElement;
},
// 页面高度
height() {
return useStore().state.page.height;
}
}
};
function _sfc_render$3(t, a, r, o, s, n) {
const i = resolveComponent("el-input-number"), l = resolveComponent("el-form-item"), c = resolveComponent("el-col"), u = resolveComponent("el-row"), h = resolveComponent("el-switch"), m = resolveComponent("el-color-picker"), _ = resolveComponent("el-radio"), $ = resolveComponent("el-radio-group"), y = resolveComponent("el-option"), E = resolveComponent("el-select"), T = resolveComponent("el-form");
return openBlock(), createElementBlock("div", null, [
createVNode(T, {
"label-width": "80px",
model: n.activeElement,
size: "mini",
class: "kr-form"
}, {
default: withCtx(() => [
createVNode(u, null, {
default: withCtx(() => [
createVNode(c, { span: 12 }, {
default: withCtx(() => [
createVNode(l, { label: "宽度" }, {
default: withCtx(() => [
createVNode(i, {
modelValue: n.activeElement.width,
"onUpdate:modelValue": a[0] || (a[0] = (p) => n.activeElement.width = p),
"controls-position": "right",
min: 1,
class: "min-input"
}, null, 8, ["modelValue"])
]),
_: 1
})
]),
_: 1
}),
createVNode(c, { span: 12 }, {
default: withCtx(() => [
createVNode(l, { label: "高度" }, {
default: withCtx(() => [
createVNode(i, {
modelValue: n.activeElement.height,
"onUpdate:modelValue": a[1] || (a[1] = (p) => n.activeElement.height = p),
"controls-position": "right",
min: 1,
class: "min-input"
}, null, 8, ["modelValue"])
]),
_: 1
})
]),
_: 1
})
]),
_: 1
}),
createVNode(u, null, {
default: withCtx(() => [
createVNode(c, { span: 12 }, {
default: withCtx(() => [
createVNode(l, { label: "横坐标" }, {
default: withCtx(() => [
createVNode(i, {
modelValue: n.activeElement.left,
"onUpdate:modelValue": a[2] || (a[2] = (p) => n.activeElement.left = p),
"controls-position": "right",
min: 0,
class: "min-input"
}, null, 8, ["modelValue"])
]),
_: 1
})
]),
_: 1
}),
createVNode(c, { span: 12 }, {
default: withCtx(() => [
createVNode(l, { label: "纵坐标" }, {
default: withCtx(() => [
createVNode(i, {
modelValue: n.activeElement.top,
"onUpdate:modelValue": a[3] || (a[3] = (p) => n.activeElement.top = p),
"controls-position": "right",
min: 0,
class: "min-input"
}, null, 8, ["modelValue"])
]),
_: 1
})
]),
_: 1
})
]),
_: 1
}),
createVNode(u, null, {
default: withCtx(() => [
createVNode(c, { span: 12 }, {
default: withCtx(() => [
createVNode(l, { label: "字号" }, {
default: withCtx(() => [
createVNode(i, {
disabled: n.activeElement.style.FontSize === void 0,
modelValue: n.activeElement.style.FontSize,
"onUpdate:modelValue": a[4] || (a[4] = (p) => n.activeElement.style.FontSize = p),
"controls-position": "right",
min: 0,
class: "min-input"
}, null, 8, ["disabled", "modelValue"])
]),
_: 1
})
]),
_: 1
}),
createVNode(c, { span: 12 }, {
default: withCtx(() => [
createVNode(l, { label: "加粗" }, {
default: withCtx(() => [
createVNode(h, {
disabled: n.activeElement.style.Bold === void 0,
modelValue: n.activeElement.style.Bold,
"onUpdate:modelValue": a[5] || (a[5] = (p) => n.activeElement.style.Bold = p),
"active-value": !0,
"inactive-value": !1
}, null, 8, ["disabled", "modelValue"])
]),
_: 1
})
]),
_: 1
})
]),
_: 1
}),
createVNode(u, null, {
default: withCtx(() => [
createVNode(c, { span: 8 }, {
default: withCtx(() => [
createVNode(l, { label: "字体颜色" }, {
default: withCtx(() => [
createVNode(m, {
disabled: n.activeElement.style.FontColor === void 0,
modelValue: n.activeElement.style.FontColor,
"onUpdate:modelValue": a[6] || (a[6] = (p) => n.activeElement.style.FontColor = p)
}, null, 8, ["disabled", "modelValue"])
]),
_: 1
})
]),
_: 1
}),
createVNode(c, { span: 8 }, {
default: withCtx(() => [
createVNode(l, { label: "边框颜色" }, {
default: withCtx(() => [
createVNode(m, {
disabled: n.activeElement.style.BorderColor === void 0,
modelValue: n.activeElement.style.BorderColor,
"onUpdate:modelValue": a[7] || (a[7] = (p) => n.activeElement.style.BorderColor = p)
}, null, 8, ["disabled", "modelValue"])
]),
_: 1
})
]),
_: 1
}),
createVNode(c, { span: 8 }, {
default: withCtx(() => [
createVNode(l, { label: "条码值" }, {
default: withCtx(() => [
createVNode(h, {
disabled: n.activeElement.style.ShowBarText === void 0,
modelValue: n.activeElement.style.ShowBarText,
"onUpdate:modelValue": a[8] || (a[8] = (p) => n.activeElement.style.ShowBarText = p),
"active-value": !0,
"inactive-value": !1
}, null, 8, ["disabled", "modelValue"])
]),
_: 1
})
]),
_: 1
})
]),
_: 1
}),
createVNode(u, null, {
default: withCtx(() => [
createVNode(l, { label: "对齐方式" }, {
default: withCtx(() => [
createVNode($, {
disabled: n.activeElement.style.Alignment === void 0,
modelValue: n.activeElement.style.Alignment,
"onUpdate:modelValue": a[9] || (a[9] = (p) => n.activeElement.style.Alignment = p)
}, {
default: withCtx(() => [
createVNode(_, { label: "left" }, {
default: withCtx(() => [
createTextVNode("左对齐")
]),
_: 1
}),
createVNode(_, { label: "center" }, {
default: withCtx(() => [
createTextVNode("居中")
]),
_: 1
}),
createVNode(_, { label: "right" }, {
default: withCtx(() => [
createTextVNode("右对齐")
]),
_: 1
})
]),
_: 1
}, 8, ["disabled", "modelValue"])
]),
_: 1
})
]),
_: 1
}),
createVNode(u, null, {
default: withCtx(() => [
createVNode(c, { span: 12 }, {
default: withCtx(() => [
createVNode(l, { label: "条码类型" }, {
default: withCtx(() => [
createVNode(E, {
disabled: n.activeElement.style.codeType === void 0,
modelValue: n.activeElement.style.codeType,
"onUpdate:modelValue": a[10] || (a[10] = (p) => n.activeElement.style.codeType = p),
class: "min-input"
}, {
default: withCtx(() => [
(openBlock(!0), createElementBlock(Fragment, null, renderList(s.codeTypeArray, (p) => (openBlock(), createBlock(y, {
key: p,
label: p,
value: p
}, null, 8, ["label", "value"]))), 128))
]),
_: 1
}, 8, ["disabled", "modelValue"])
]),
_: 1
})
]),
_: 1
}),
createVNode(c, { span: 12 }, {
default: withCtx(() => [
createVNode(l, { label: "打印类型" }, {
default: withCtx(() => [
createVNode(E, {
disabled: n.activeElement.style.ItemType === void 0,
modelValue: n.activeElement.style.ItemType,
"onUpdate:modelValue": a[11] || (a[11] = (p) => n.activeElement.style.ItemType = p),
class: "min-input"
}, {
default: withCtx(() => [
(openBlock(!0), createElementBlock(Fragment, null, renderList(s.itemTypeArray, (p) => (openBlock(), createBlock(y, {
key: p.value,
label: p.label,
value: p.value
}, null, 8, ["label", "value"]))), 128))
]),
_: 1
}, 8, ["disabled", "modelValue"])
]),
_: 1
})
]),
_: 1
}),
createVNode(c, { span: 12 }, {
default: withCtx(() => [
createVNode(l, { label: "高度自动" }, {
default: withCtx(() => [
createVNode(h, {
disabled: n.activeElement.style.AutoHeight === void 0,
modelValue: n.activeElement.style.AutoHeight,
"onUpdate:modelValue": a[12] || (a[12] = (p) => n.activeElement.style.AutoHeight = p),
"active-value": !0,
"inactive-value": !1
}, null, 8, ["disabled", "modelValue"])
]),
_: 1
})
]),