ol-base-components 3.3.11 → 3.4.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/package.json
CHANGED
package/src/App.vue
CHANGED
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
@SelectionChange="SelectionChange"
|
|
27
27
|
@handleSizeChange="handleSizeChange"
|
|
28
28
|
@handleindexChange="handleindexChange"
|
|
29
|
+
:onPrintData="onPrintData"
|
|
29
30
|
>
|
|
30
31
|
<template slot="ceshi" slot-scope="scope">
|
|
31
32
|
<span>333433{{ scope.row.ceshi }}</span>
|
|
@@ -124,6 +125,10 @@ export default {
|
|
|
124
125
|
],
|
|
125
126
|
operates: [], // 表格里面的操作按钮
|
|
126
127
|
tableHeightDiff: 300,
|
|
128
|
+
printData: {
|
|
129
|
+
name: "默认数据",
|
|
130
|
+
table: [{ name: "默认数据1" }],
|
|
131
|
+
},
|
|
127
132
|
},
|
|
128
133
|
paginations: {
|
|
129
134
|
page: 1, // 当前位于那页面
|
|
@@ -822,6 +827,27 @@ export default {
|
|
|
822
827
|
handlePrint1(row) {
|
|
823
828
|
console.log(11122333, row);
|
|
824
829
|
},
|
|
830
|
+
onPrintData(tempItem, done) {
|
|
831
|
+
console.log("111app", tempItem, done);
|
|
832
|
+
if (tempItem.templeteName === "自定义模式") {
|
|
833
|
+
// 模拟异步接口请求
|
|
834
|
+
const data = {
|
|
835
|
+
name: "自定义模式",
|
|
836
|
+
table: [
|
|
837
|
+
{ name: "2233" },
|
|
838
|
+
{ name: "3344" },
|
|
839
|
+
{ name: "2233" },
|
|
840
|
+
{ name: "2233" },
|
|
841
|
+
{ name: "2233" },
|
|
842
|
+
{ name: "2233" },
|
|
843
|
+
{ name: "2233" },
|
|
844
|
+
{ name: "2233" },
|
|
845
|
+
{ name: "2233" },
|
|
846
|
+
],
|
|
847
|
+
};
|
|
848
|
+
done(data);
|
|
849
|
+
}
|
|
850
|
+
},
|
|
825
851
|
},
|
|
826
852
|
};
|
|
827
853
|
</script>
|
|
@@ -124,7 +124,6 @@ export default {
|
|
|
124
124
|
// eslint-disable-next-line no-undef
|
|
125
125
|
$("#hiprint-printTemplate").empty(); // 先清空, 避免重复构建
|
|
126
126
|
|
|
127
|
-
|
|
128
127
|
this.hiprintTemplate = new hiprint.PrintTemplate({
|
|
129
128
|
template: this.defaultTemplate,
|
|
130
129
|
settingContainer: "#PrintElementOptionSetting",
|
|
@@ -152,9 +151,8 @@ export default {
|
|
|
152
151
|
if (this.onPrintData) {
|
|
153
152
|
try {
|
|
154
153
|
const result = await this.onPrintData(this.printData);
|
|
155
|
-
if (result)
|
|
156
|
-
|
|
157
|
-
}
|
|
154
|
+
if (result) data = result;
|
|
155
|
+
else console.error("onPrintData 执行失败，返回数据为空");
|
|
158
156
|
} catch (error) {
|
|
159
157
|
console.error("onPrintData 执行失败:", error);
|
|
160
158
|
}
|
|
@@ -171,10 +169,10 @@ export default {
|
|
|
171
169
|
// return "<style>.hiprint-printElement-text{color:red !important;}</style>";
|
|
172
170
|
// },
|
|
173
171
|
};
|
|
174
|
-
|
|
172
|
+
|
|
175
173
|
// 使用 props 传入的纸张大小
|
|
176
174
|
ext.curPaper = this.paperSize;
|
|
177
|
-
|
|
175
|
+
|
|
178
176
|
// 调用浏览器打印
|
|
179
177
|
this.hiprintTemplate.print(data, options, ext);
|
|
180
178
|
},
|
|
@@ -37,6 +37,10 @@
|
|
|
37
37
|
<span class="info-label">备注：</span>
|
|
38
38
|
<span class="info-value">{{ template.remark || "无" }}</span>
|
|
39
39
|
</div>
|
|
40
|
+
<div class="card-info">
|
|
41
|
+
<span class="info-label">数据源URL：</span>
|
|
42
|
+
<span class="info-value">{{ template.printUrl || "无" }}</span>
|
|
43
|
+
</div>
|
|
40
44
|
</div>
|
|
41
45
|
<div class="card-footer">
|
|
42
46
|
<el-button type="text" size="small" icon="el-icon-edit" @click="handleEdit(template)">
|
|
@@ -66,6 +70,17 @@
|
|
|
66
70
|
<el-form-item label="模板名称" prop="templeteName">
|
|
67
71
|
<el-input v-model="form.templeteName" placeholder="请输入模板名称"></el-input>
|
|
68
72
|
</el-form-item>
|
|
73
|
+
<el-form-item label="创建模板" prop="templeteJson">
|
|
74
|
+
<span style="margin-right: 10px">{{ form.templeteJson ? "已创建" : "未创建" }}</span>
|
|
75
|
+
<el-button type="primary" @click="handleCreateTemplate">创建模板</el-button>
|
|
76
|
+
</el-form-item>
|
|
77
|
+
<el-form-item label="数据源URL" prop="printUrl">
|
|
78
|
+
<el-input
|
|
79
|
+
v-model="form.printUrl"
|
|
80
|
+
placeholder="请输入数据源URL"
|
|
81
|
+
@blur="form.printUrl = form.printUrl && form.printUrl.trim()"
|
|
82
|
+
></el-input>
|
|
83
|
+
</el-form-item>
|
|
69
84
|
<el-form-item label="备注">
|
|
70
85
|
<el-input
|
|
71
86
|
v-model="form.remark"
|
|
@@ -74,10 +89,6 @@
|
|
|
74
89
|
placeholder="请输入备注"
|
|
75
90
|
></el-input>
|
|
76
91
|
</el-form-item>
|
|
77
|
-
<el-form-item label="创建模板">
|
|
78
|
-
<span style="margin-right: 10px">{{ form.templeteJson ? "已创建" : "未创建" }}</span>
|
|
79
|
-
<el-button type="primary" @click="handleCreateTemplate">创建模板</el-button>
|
|
80
|
-
</el-form-item>
|
|
81
92
|
</el-form>
|
|
82
93
|
<span slot="footer" class="dialog-footer">
|
|
83
94
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
@@ -109,9 +120,11 @@ export default {
|
|
|
109
120
|
templeteName: "",
|
|
110
121
|
remark: "",
|
|
111
122
|
templeteJson: "",
|
|
123
|
+
printUrl: "",
|
|
112
124
|
},
|
|
113
125
|
rules: {
|
|
114
126
|
templeteName: [{ required: true, message: "请输入模板名称", trigger: "blur" }],
|
|
127
|
+
templeteJson: [{ required: true, message: "请输入模板JSON", trigger: "blur" }],
|
|
115
128
|
},
|
|
116
129
|
};
|
|
117
130
|
},
|
|
@@ -179,6 +192,7 @@ export default {
|
|
|
179
192
|
templeteName: "",
|
|
180
193
|
remark: "",
|
|
181
194
|
templeteJson: "",
|
|
195
|
+
printUrl: "",
|
|
182
196
|
};
|
|
183
197
|
this.dialogVisible = true;
|
|
184
198
|
this.$nextTick(() => {
|
|
@@ -192,6 +206,7 @@ export default {
|
|
|
192
206
|
templeteName: template.templeteName,
|
|
193
207
|
remark: template.remark,
|
|
194
208
|
templeteJson: template.templeteJson,
|
|
209
|
+
printUrl: template.printUrl || "",
|
|
195
210
|
};
|
|
196
211
|
this.dialogVisible = true;
|
|
197
212
|
},
|
|
@@ -225,6 +240,7 @@ export default {
|
|
|
225
240
|
id: this.form.id,
|
|
226
241
|
templeteName: this.form.templeteName,
|
|
227
242
|
templeteJson: this.form.templeteJson,
|
|
243
|
+
printUrl: this.form.printUrl,
|
|
228
244
|
},
|
|
229
245
|
});
|
|
230
246
|
this.$message.success("编辑成功");
|
|
@@ -235,6 +251,7 @@ export default {
|
|
|
235
251
|
menuId: this.currentMenuId,
|
|
236
252
|
templeteName: this.form.templeteName,
|
|
237
253
|
templeteJson: this.form.templeteJson,
|
|
254
|
+
printUrl: this.form.printUrl,
|
|
238
255
|
},
|
|
239
256
|
});
|
|
240
257
|
this.$message.success("新增成功");
|
|
@@ -30,10 +30,45 @@ export default {
|
|
|
30
30
|
type: [Object, Array],
|
|
31
31
|
default: () => {},
|
|
32
32
|
},
|
|
33
|
+
// 自定义获取打印数据函数，没传递就是默认接口获取数据。return的数据就是打印数据
|
|
34
|
+
onPrintData: {
|
|
35
|
+
type: Function,
|
|
36
|
+
default: null,
|
|
37
|
+
},
|
|
38
|
+
multipleSelection: {
|
|
39
|
+
type: Array,
|
|
40
|
+
default: () => [],
|
|
41
|
+
},
|
|
33
42
|
},
|
|
34
43
|
data() {
|
|
35
44
|
return {
|
|
36
45
|
templateList: [{ id: 1, templeteName: "暂无数据", disabled: true }],
|
|
46
|
+
// templateList: [
|
|
47
|
+
// {
|
|
48
|
+
// id: 1,
|
|
49
|
+
// templeteName: "自定义模式",
|
|
50
|
+
// remark: "",
|
|
51
|
+
// templeteJson:
|
|
52
|
+
// '{"panels":[{"index":0,"name":1,"paperType":"A4","height":297,"width":210,"paperHeader":0,"paperFooter":841.8897637795277,"printElements":[{"options":{"left":67.5,"top":165,"height":36,"width":550,"fields":[],"field":"table","qid":"table","columns":[[{"width":137.5,"title":"名称","field":"name","checked":true,"columnId":"name","fixed":false,"rowspan":1,"colspan":1,"align":"center"},{"width":137.5,"title":"性别","field":"gender","checked":true,"columnId":"gender","fixed":false,"rowspan":1,"colspan":1,"align":"center"},{"width":137.5,"title":"数量","field":"count","checked":true,"columnId":"count","fixed":false,"rowspan":1,"colspan":1,"align":"center"},{"width":137.5,"title":"金额","field":"amount","checked":true,"columnId":"amount","fixed":false,"rowspan":1,"colspan":1,"align":"center"}]]},"printElementType":{"title":"表格","type":"table","editable":true,"columnDisplayEditable":true,"columnDisplayIndexEditable":true,"columnTitleEditable":true,"columnResizable":true,"columnAlignEditable":true,"isEnableEditField":true,"isEnableContextMenu":true,"isEnableInsertRow":true,"isEnableDeleteRow":true,"isEnableInsertColumn":true,"isEnableDeleteColumn":true,"isEnableMergeCell":true}},{"options":{"left":127.5,"top":301.5,"height":9.75,"width":120,"field":"name","testData":"内容","title":"文本","qid":"name"},"printElementType":{"title":"文本","type":"text"}}],"paperNumberContinue":true,"watermarkOptions":{},"panelLayoutOptions":{}}]}',
|
|
53
|
+
// printUrl: "api/app/aaa",
|
|
54
|
+
// },
|
|
55
|
+
// {
|
|
56
|
+
// id: 2,
|
|
57
|
+
// templeteName: "printURL模式",
|
|
58
|
+
// remark: "",
|
|
59
|
+
// templeteJson:
|
|
60
|
+
// '{"panels":[{"index":0,"name":1,"paperType":"A4","height":297,"width":210,"paperHeader":0,"paperFooter":841.8897637795277,"printElements":[{"options":{"left":67.5,"top":229.5,"height":36,"width":550,"fields":[],"field":"table","qid":"table","columns":[[{"width":137.5,"title":"名称","field":"name","checked":true,"columnId":"name","fixed":false,"rowspan":1,"colspan":1,"align":"center"},{"width":137.5,"title":"性别","field":"gender","checked":true,"columnId":"gender","fixed":false,"rowspan":1,"colspan":1,"align":"center"},{"width":137.5,"title":"数量","field":"count","checked":true,"columnId":"count","fixed":false,"rowspan":1,"colspan":1,"align":"center"},{"width":137.5,"title":"金额","field":"amount","checked":true,"columnId":"amount","fixed":false,"rowspan":1,"colspan":1,"align":"center"}]]},"printElementType":{"title":"表格","type":"table","editable":true,"columnDisplayEditable":true,"columnDisplayIndexEditable":true,"columnTitleEditable":true,"columnResizable":true,"columnAlignEditable":true,"isEnableEditField":true,"isEnableContextMenu":true,"isEnableInsertRow":true,"isEnableDeleteRow":true,"isEnableInsertColumn":true,"isEnableDeleteColumn":true,"isEnableMergeCell":true}},{"options":{"left":247.5,"top":304.5,"height":9.75,"width":120,"field":"name","testData":"内容","title":"文本","qid":"name"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":79.5,"top":313.5,"height":32,"width":120,"field":"qrcode","testData":"XS888888888","fontSize":12,"lineHeight":18,"textType":"qrcode","title":"二维码","qid":"qrcode"},"printElementType":{"title":"二维码","type":"text"}}],"paperNumberContinue":true,"watermarkOptions":{},"panelLayoutOptions":{}}]}',
|
|
61
|
+
// printUrl: "api/app/bbb",
|
|
62
|
+
// },
|
|
63
|
+
// {
|
|
64
|
+
// id: 3,
|
|
65
|
+
// templeteName: "默认模式",
|
|
66
|
+
// remark: "",
|
|
67
|
+
// templeteJson:
|
|
68
|
+
// '{"panels":[{"index":0,"name":1,"paperType":"A4","height":297,"width":210,"paperHeader":0,"paperFooter":841.8897637795277,"printElements":[{"options":{"left":67.5,"top":229.5,"height":36,"width":550,"fields":[],"field":"table","qid":"table","columns":[[{"width":137.5,"title":"名称","field":"name","checked":true,"columnId":"name","fixed":false,"rowspan":1,"colspan":1,"align":"center"},{"width":137.5,"title":"性别","field":"gender","checked":true,"columnId":"gender","fixed":false,"rowspan":1,"colspan":1,"align":"center"},{"width":137.5,"title":"数量","field":"count","checked":true,"columnId":"count","fixed":false,"rowspan":1,"colspan":1,"align":"center"},{"width":137.5,"title":"金额","field":"amount","checked":true,"columnId":"amount","fixed":false,"rowspan":1,"colspan":1,"align":"center"}]]},"printElementType":{"title":"表格","type":"table","editable":true,"columnDisplayEditable":true,"columnDisplayIndexEditable":true,"columnTitleEditable":true,"columnResizable":true,"columnAlignEditable":true,"isEnableEditField":true,"isEnableContextMenu":true,"isEnableInsertRow":true,"isEnableDeleteRow":true,"isEnableInsertColumn":true,"isEnableDeleteColumn":true,"isEnableMergeCell":true}},{"options":{"left":247.5,"top":304.5,"height":9.75,"width":120,"field":"name","testData":"内容","title":"文本","qid":"name"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":79.5,"top":313.5,"height":32,"width":120,"field":"qrcode","testData":"XS888888888","fontSize":12,"lineHeight":18,"textType":"qrcode","title":"二维码","qid":"qrcode"},"printElementType":{"title":"二维码","type":"text"}}],"paperNumberContinue":true,"watermarkOptions":{},"panelLayoutOptions":{}}]}',
|
|
69
|
+
// printUrl: "",
|
|
70
|
+
// },
|
|
71
|
+
// ],
|
|
37
72
|
};
|
|
38
73
|
},
|
|
39
74
|
created() {
|
|
@@ -84,20 +119,85 @@ export default {
|
|
|
84
119
|
const tempItem = this.templateList.find(item => item.id === command);
|
|
85
120
|
if (!tempItem) return this.$message.error("未找到打印模板");
|
|
86
121
|
|
|
87
|
-
const
|
|
122
|
+
const options = {
|
|
123
|
+
printData: this.printData || {},
|
|
124
|
+
defaultTemplate: tempItem.templeteJson ? JSON.parse(tempItem.templeteJson) : {},
|
|
125
|
+
};
|
|
126
|
+
|
|
127
|
+
// 自定义打印 > 默认接口打印 > printData数据打印
|
|
128
|
+
if (this.onPrintData) {
|
|
129
|
+
// 自定义数据 - 类似 Element UI before-close 机制
|
|
130
|
+
let isCustomHandled = false;
|
|
131
|
+
// 定义 done 函数
|
|
132
|
+
const done = data => {
|
|
133
|
+
isCustomHandled = true;
|
|
134
|
+
if (data) {
|
|
135
|
+
options.printData = data;
|
|
136
|
+
this.$hiprint.print(options);
|
|
137
|
+
} else {
|
|
138
|
+
this.$message.error("打印数据不能为空");
|
|
139
|
+
}
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
// 调用自定义回调，传入模板信息和 done 函数
|
|
143
|
+
this.onPrintData(tempItem, done);
|
|
144
|
+
|
|
145
|
+
// 如果自定义回调没有调用 done，则走默认逻辑
|
|
146
|
+
if (!isCustomHandled) {
|
|
147
|
+
if (tempItem.printUrl) {
|
|
148
|
+
this.printByApi(options, tempItem);
|
|
149
|
+
} else {
|
|
150
|
+
// 没有自定义回调，走默认逻辑
|
|
151
|
+
options.printData = this.printData || {};
|
|
152
|
+
this.$hiprint.print(options);
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
} else if (tempItem.printUrl) {
|
|
156
|
+
this.printByApi(options, tempItem);
|
|
157
|
+
} else {
|
|
158
|
+
this.printDefault(options);
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
printByApi(options, tempItem) {
|
|
162
|
+
// 默认接口数据
|
|
163
|
+
options.printData = this.getPrintDataByApi(tempItem);
|
|
88
164
|
const isValidData =
|
|
89
|
-
|
|
90
|
-
((Array.isArray(
|
|
91
|
-
(typeof
|
|
165
|
+
options.printData &&
|
|
166
|
+
((Array.isArray(options.printData) && options.printData.length > 0) ||
|
|
167
|
+
(typeof options.printData === "object" && Object.keys(options.printData).length > 0));
|
|
92
168
|
|
|
93
169
|
if (!isValidData) {
|
|
94
170
|
return this.$message.error("打印数据不能为空");
|
|
95
171
|
}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
}
|
|
172
|
+
this.$hiprint.print(options);
|
|
173
|
+
},
|
|
174
|
+
printDefault(options) {
|
|
175
|
+
// 默认接口数据
|
|
176
|
+
options.printData = this.printData || {};
|
|
177
|
+
this.$hiprint.print(options);
|
|
178
|
+
},
|
|
179
|
+
// 默认接口获取数据
|
|
180
|
+
async getPrintDataByApi(tempItem) {
|
|
181
|
+
try {
|
|
182
|
+
let ids = [];
|
|
183
|
+
if (this.multipleSelection && this.multipleSelection.length > 0) {
|
|
184
|
+
ids = this.multipleSelection.reduce((acc, item) => {
|
|
185
|
+
acc.push(item.id);
|
|
186
|
+
return acc;
|
|
187
|
+
}, []);
|
|
188
|
+
}
|
|
189
|
+
const res = await this.get({
|
|
190
|
+
url: `${tempItem.printUrl}`,
|
|
191
|
+
data: {
|
|
192
|
+
ids: ids,
|
|
193
|
+
},
|
|
194
|
+
});
|
|
195
|
+
if (res.code !== 200) return {};
|
|
196
|
+
if (Array.isArray(res.result) && res.result.length > 0) return res.result;
|
|
197
|
+
return {};
|
|
198
|
+
} catch (error) {
|
|
199
|
+
console.error(`获取打印数据失败: ${tempItem.printUrl}`, error);
|
|
200
|
+
}
|
|
101
201
|
},
|
|
102
202
|
},
|
|
103
203
|
};
|
|
@@ -84,7 +84,12 @@
|
|
|
84
84
|
>
|
|
85
85
|
<div class="avatar-wrapper">
|
|
86
86
|
<div class="layui-table-tool-self">
|
|
87
|
-
<print-template-selector
|
|
87
|
+
<print-template-selector
|
|
88
|
+
:menuId="menuId"
|
|
89
|
+
:printData="tableData.printData"
|
|
90
|
+
:multipleSelection="multipleSelection"
|
|
91
|
+
v-bind="$attrs"
|
|
92
|
+
/>
|
|
88
93
|
</div>
|
|
89
94
|
</div>
|
|
90
95
|
</div>
|