yh-hiprint 2.0.1 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/HiprintDesigner.vue +20 -9
- package/README.md +102 -1
- package/hiprint.js +1 -1
- package/hiprintPreview.vue +38 -5
- package/index.js +15 -0
- package/package.json +1 -1
package/HiprintDesigner.vue
CHANGED
|
@@ -265,10 +265,10 @@
|
|
|
265
265
|
</el-dialog>
|
|
266
266
|
</template>
|
|
267
267
|
<script setup lang="ts">
|
|
268
|
-
import { onMounted, ref, onActivated, onDeactivated, computed, watch
|
|
268
|
+
import { onMounted, ref, onActivated, onDeactivated, computed, watch } from "vue";
|
|
269
269
|
import { hiprint, defaultElementTypeProvider, fontSize, scale, zIndex, panel, usePaper, useScale, useDataSource, jquery as $ } from "yh-hiprint";
|
|
270
270
|
import { useRoute, onBeforeRouteUpdate } from "vue-router";
|
|
271
|
-
import { ElMessageBox } from "element-plus";
|
|
271
|
+
import { ElMessageBox, ElMessage } from "element-plus";
|
|
272
272
|
import axios from "@/libs/api.request";
|
|
273
273
|
|
|
274
274
|
const route = useRoute();
|
|
@@ -378,6 +378,8 @@ watch(
|
|
|
378
378
|
};
|
|
379
379
|
})
|
|
380
380
|
);
|
|
381
|
+
} else {
|
|
382
|
+
hiprintTemplate.value?.setFields("");
|
|
381
383
|
}
|
|
382
384
|
},
|
|
383
385
|
{
|
|
@@ -492,12 +494,12 @@ function init() {
|
|
|
492
494
|
paginationContainer: ".hiprint-printPagination",
|
|
493
495
|
});
|
|
494
496
|
|
|
495
|
-
hiprintTemplate.value
|
|
497
|
+
hiprintTemplate.value?.design("#hiprint-printTemplate", { grid: true });
|
|
496
498
|
scaleValue.value = hiprintTemplate.value.editingPanel.scale || 1;
|
|
497
499
|
window.ht = hiprintTemplate.value;
|
|
498
500
|
|
|
499
501
|
if (formColumns.value) {
|
|
500
|
-
hiprintTemplate.value
|
|
502
|
+
hiprintTemplate.value?.setFields(
|
|
501
503
|
formColumns.value.map((item) => {
|
|
502
504
|
return {
|
|
503
505
|
field: item,
|
|
@@ -508,7 +510,7 @@ function init() {
|
|
|
508
510
|
}
|
|
509
511
|
$(".hiprint-designer").on("mousedown", ".hiprint-printElement", (e) => {
|
|
510
512
|
let t = e.currentTarget;
|
|
511
|
-
let pes = hiprintTemplate.value
|
|
513
|
+
let pes = hiprintTemplate.value?.editingPanel.printElements;
|
|
512
514
|
let index = pes.map((item) => item.designTarget[0]).indexOf(t);
|
|
513
515
|
let pe = pes[index];
|
|
514
516
|
currentElementObj.value = pe;
|
|
@@ -516,6 +518,15 @@ function init() {
|
|
|
516
518
|
listCode.value = pe.options.field;
|
|
517
519
|
}
|
|
518
520
|
});
|
|
521
|
+
$("#PrintElementOptionSetting").on("input", "input[type=number]", ($el) => {
|
|
522
|
+
let val = parseInt($el.target.value);
|
|
523
|
+
if (val < 1) {
|
|
524
|
+
$el.target.value = 1;
|
|
525
|
+
}
|
|
526
|
+
if (val > 2000) {
|
|
527
|
+
$el.target.value = 2000;
|
|
528
|
+
}
|
|
529
|
+
});
|
|
519
530
|
} catch (error) {
|
|
520
531
|
console.log(error.message);
|
|
521
532
|
clearPrint();
|
|
@@ -536,14 +547,14 @@ async function updateTemplate(code) {
|
|
|
536
547
|
await getDetail(code);
|
|
537
548
|
if (detailData.value && detailData.value.json) {
|
|
538
549
|
let jsonObj = JSON.parse(detailData.value.json);
|
|
539
|
-
hiprintTemplate.value
|
|
550
|
+
hiprintTemplate.value?.update(jsonObj);
|
|
540
551
|
let { width, height } = jsonObj.panels[0];
|
|
541
552
|
paperWidth.value = width;
|
|
542
553
|
paperHeight.value = height;
|
|
543
|
-
hiprintTemplate.value
|
|
554
|
+
hiprintTemplate.value?.setPaper(width, height);
|
|
544
555
|
scaleValue.value = 1;
|
|
545
556
|
} else {
|
|
546
|
-
hiprintTemplate.value
|
|
557
|
+
hiprintTemplate.value?.update({
|
|
547
558
|
panels: [
|
|
548
559
|
{
|
|
549
560
|
index: 0,
|
|
@@ -561,7 +572,7 @@ async function updateTemplate(code) {
|
|
|
561
572
|
});
|
|
562
573
|
paperWidth.value = 210;
|
|
563
574
|
paperHeight.value = 297;
|
|
564
|
-
hiprintTemplate.value
|
|
575
|
+
hiprintTemplate.value?.setPaper(210, 297);
|
|
565
576
|
scaleValue.value = 1;
|
|
566
577
|
}
|
|
567
578
|
} else {
|
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
力控远海技术中心封装的 hiprint
|
|
4
4
|
|
|
5
|
+
当前教程匹配 2+ 版本
|
|
6
|
+
|
|
5
7
|
## 安装
|
|
6
8
|
|
|
7
9
|
配置好[云效NPM私有仓库](https://packages.aliyun.com/npm/npm-registry/guide)后,直接执行如下命令安装
|
|
@@ -11,4 +13,103 @@ npm install yh-hiprint
|
|
|
11
13
|
|
|
12
14
|
## 使用
|
|
13
15
|
|
|
14
|
-
|
|
16
|
+
### 安装并引入设计器
|
|
17
|
+
|
|
18
|
+
`main.js（main.ts）` 中
|
|
19
|
+
|
|
20
|
+
```javascript
|
|
21
|
+
import yhHiprint from "yh-hiprint";
|
|
22
|
+
// ……
|
|
23
|
+
const app = createApp(App);
|
|
24
|
+
//……
|
|
25
|
+
app.use(yhHiprint, {
|
|
26
|
+
router,
|
|
27
|
+
pinia,
|
|
28
|
+
isAdmin,
|
|
29
|
+
});
|
|
30
|
+
//……
|
|
31
|
+
app.use(pinia);
|
|
32
|
+
app.use(router);
|
|
33
|
+
app.use(ElementPlus);
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### 预览页面配置
|
|
37
|
+
|
|
38
|
+
###### 新增预览页入口html
|
|
39
|
+
`hiprint/index.html`
|
|
40
|
+
```html
|
|
41
|
+
<!DOCTYPE html>
|
|
42
|
+
<html lang="en">
|
|
43
|
+
<head>
|
|
44
|
+
<meta charset="UTF-8" />
|
|
45
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
46
|
+
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
|
47
|
+
<link rel="stylesheet" href="/iconfont/iconfont.css">
|
|
48
|
+
<title>力控元海</title>
|
|
49
|
+
</head>
|
|
50
|
+
<body>
|
|
51
|
+
<div id="app"></div>
|
|
52
|
+
<script type="module" src="/src/layout/hiprint/hiprint.js"></script>
|
|
53
|
+
</body>
|
|
54
|
+
</html>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
###### 新增预览页入口js
|
|
58
|
+
`src/layout/hiprint/hiprint.js`
|
|
59
|
+
```js
|
|
60
|
+
import { createApp } from "vue";
|
|
61
|
+
import { createRouter, createWebHashHistory } from "vue-router";
|
|
62
|
+
import { setTitle } from "@/libs/util";
|
|
63
|
+
import "element-plus/dist/index.css";
|
|
64
|
+
|
|
65
|
+
import App from "yh-hiprint/hiprint.vue";
|
|
66
|
+
const router = createRouter({
|
|
67
|
+
history: createWebHashHistory(),
|
|
68
|
+
routes: [
|
|
69
|
+
{
|
|
70
|
+
path: "/",
|
|
71
|
+
redirect: "/preview",
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
path: "/preview",
|
|
75
|
+
name: "printView",
|
|
76
|
+
meta: {
|
|
77
|
+
title: "打印",
|
|
78
|
+
},
|
|
79
|
+
component: () => import("yh-hiprint/hiprintPreview.vue"),
|
|
80
|
+
},
|
|
81
|
+
],
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
router.beforeEach((to, from, next) => {
|
|
85
|
+
next();
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
router.afterEach((to) => {
|
|
89
|
+
setTitle(to);
|
|
90
|
+
window.scrollTo(0, 0);
|
|
91
|
+
});
|
|
92
|
+
const app = createApp(App);
|
|
93
|
+
app.use(router);
|
|
94
|
+
app.mount("#app");
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
###### 配置对应 的vite 入口
|
|
98
|
+
`vite-.config.js`
|
|
99
|
+
```javascript
|
|
100
|
+
// ……
|
|
101
|
+
export default defineConfig({
|
|
102
|
+
// ……
|
|
103
|
+
build: {
|
|
104
|
+
// ……
|
|
105
|
+
rollupOptions: {
|
|
106
|
+
// ……
|
|
107
|
+
input: {
|
|
108
|
+
// ……
|
|
109
|
+
hiprint: path.resolve(__dirname, "hiprint/index.html"),
|
|
110
|
+
},
|
|
111
|
+
},
|
|
112
|
+
},
|
|
113
|
+
});
|
|
114
|
+
|
|
115
|
+
```
|
package/hiprint.js
CHANGED
|
@@ -3,7 +3,7 @@ import { createRouter, createWebHashHistory } from "vue-router";
|
|
|
3
3
|
import { setTitle } from "@/libs/util";
|
|
4
4
|
import "element-plus/dist/index.css";
|
|
5
5
|
|
|
6
|
-
import App from "
|
|
6
|
+
import App from "yh-hiprint/hiprint.vue";
|
|
7
7
|
const router = createRouter({
|
|
8
8
|
history: createWebHashHistory(),
|
|
9
9
|
routes: [
|
package/hiprintPreview.vue
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
sub-title="请求参数或者返回数据错误"></el-result>
|
|
12
12
|
</template>
|
|
13
13
|
<script setup>
|
|
14
|
-
import { ElLoading, ElResult } from "element-plus";
|
|
14
|
+
import { ElLoading, ElResult, ElMessageBox } from "element-plus";
|
|
15
15
|
import { onMounted, ref } from "vue";
|
|
16
16
|
import { useRoute } from "vue-router";
|
|
17
17
|
import axios from "@/libs/api.request.js";
|
|
@@ -31,6 +31,9 @@ onMounted(() => {
|
|
|
31
31
|
error.value = true;
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
|
+
window.addEventListener("afterprint", () => {
|
|
35
|
+
self.close();
|
|
36
|
+
});
|
|
34
37
|
});
|
|
35
38
|
|
|
36
39
|
const route = useRoute();
|
|
@@ -42,9 +45,9 @@ let loading = ElLoading.service({
|
|
|
42
45
|
});
|
|
43
46
|
|
|
44
47
|
function getData(query) {
|
|
45
|
-
let { code, params } = query;
|
|
48
|
+
let { code, params, data, isCustom } = query;
|
|
46
49
|
loading.setText("获取打印配置和数据");
|
|
47
|
-
let reqParams = JSON.parse(params);
|
|
50
|
+
let reqParams = JSON.parse(params) || [];
|
|
48
51
|
|
|
49
52
|
axios
|
|
50
53
|
.request({
|
|
@@ -53,7 +56,7 @@ function getData(query) {
|
|
|
53
56
|
type: "json",
|
|
54
57
|
data: reqParams,
|
|
55
58
|
})
|
|
56
|
-
.then((res) => {
|
|
59
|
+
.then(async (res) => {
|
|
57
60
|
loading.setText("格式化数据，初始化打印插件");
|
|
58
61
|
let { list, json } = res.data;
|
|
59
62
|
if (json) {
|
|
@@ -61,7 +64,6 @@ function getData(query) {
|
|
|
61
64
|
if (Array.isArray(list) && list.length > 0) {
|
|
62
65
|
list = list.map((item, index) => {
|
|
63
66
|
let printData = {};
|
|
64
|
-
let reqData = reqParams[index];
|
|
65
67
|
let datas = Object.entries(item);
|
|
66
68
|
datas.forEach((arr) => {
|
|
67
69
|
if (Array.isArray(arr[1])) {
|
|
@@ -83,6 +85,33 @@ function getData(query) {
|
|
|
83
85
|
list = [];
|
|
84
86
|
}
|
|
85
87
|
let hiprintTemplate = new hiprint.PrintTemplate({ template: JSON.parse(json) });
|
|
88
|
+
// 如若有本地数据，那么将本地数据替换远端数据。传入预览中。
|
|
89
|
+
if (isCustom === "1") {
|
|
90
|
+
await ElMessageBox.prompt("在下面输入框中输入您给的自定义数据", "自定义数据", {
|
|
91
|
+
inputType: "textarea",
|
|
92
|
+
}).then((e) => {
|
|
93
|
+
try {
|
|
94
|
+
hasData = true;
|
|
95
|
+
list = JSON.parse(e.value);
|
|
96
|
+
} catch (error) {
|
|
97
|
+
try {
|
|
98
|
+
hasData = true;
|
|
99
|
+
list = JSON.parse(data);
|
|
100
|
+
} catch (error) {
|
|
101
|
+
hasData = false;
|
|
102
|
+
list = [];
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
} else if (data) {
|
|
107
|
+
try {
|
|
108
|
+
hasData = true;
|
|
109
|
+
list = JSON.parse(data);
|
|
110
|
+
} catch (error) {
|
|
111
|
+
hasData = false;
|
|
112
|
+
list = [];
|
|
113
|
+
}
|
|
114
|
+
}
|
|
86
115
|
let html = hiprintTemplate.getHtml(list);
|
|
87
116
|
document.body.innerHTML = "";
|
|
88
117
|
document.body.appendChild(html[0]);
|
|
@@ -90,6 +119,10 @@ function getData(query) {
|
|
|
90
119
|
setTimeout(() => {
|
|
91
120
|
window.print();
|
|
92
121
|
}, 1000);
|
|
122
|
+
} else {
|
|
123
|
+
ElMessageBox.alert("数据源没有数据，打印将取消").then(() => {
|
|
124
|
+
window.close();
|
|
125
|
+
});
|
|
93
126
|
}
|
|
94
127
|
success.value = false;
|
|
95
128
|
} else {
|
package/index.js
CHANGED
|
@@ -14,8 +14,23 @@ export function cLog(string, isError = false) {
|
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
+
const hiprint = (code, params) => {
|
|
18
|
+
let height = document.documentElement.clientHeight;
|
|
19
|
+
let width = (document.documentElement.clientWidth - 1200) / 2;
|
|
20
|
+
// 转换数组
|
|
21
|
+
let data = params;
|
|
22
|
+
if (typeof params !== "Array") {
|
|
23
|
+
data = [params];
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
let windowOpen = window.open("/hiprint/#/preview?code=" + code + "¶ms=" + JSON.stringify(data), "windowOpen", "height=" + height + ", width=1200, top=20, left=" + width + ", toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");
|
|
27
|
+
// window.setTimeout(() => {
|
|
28
|
+
// windowOpen.close();
|
|
29
|
+
// }, 5000);
|
|
30
|
+
};
|
|
17
31
|
export default {
|
|
18
32
|
install(app, { router, pinia, isAdmin }) {
|
|
33
|
+
app.provide("$hiprint", hiprint);
|
|
19
34
|
if (router) {
|
|
20
35
|
router.addRoute("Index", {
|
|
21
36
|
path: "hiprint/designer",
|