ol-base-components 3.2.11 → 3.3.1
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 +1 -1
- package/src/App.vue +3 -8
- package/src/package/index.js +12 -2
- package/src/package/print/index.js +1 -5
- package/src/package/print/src/components/PaperSelector.vue +4 -19
- package/src/package/print/src/index.vue +15 -28
- package/src/package/printModel/index.js +7 -0
- package/src/package/printModel/src/index.vue +500 -0
- package/src/package/table/src/index.vue +83 -15
package/package.json
CHANGED
package/src/App.vue
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div id="app">
|
|
3
|
+
<ol-print-model />
|
|
3
4
|
<ol-customSearch
|
|
4
5
|
:form-search-data="formSearchData"
|
|
5
6
|
@handleSearch="handleSearch"
|
|
@@ -16,7 +17,7 @@
|
|
|
16
17
|
/> -->
|
|
17
18
|
<button @click="aaa">123</button>
|
|
18
19
|
<!-- url="/api/app/bind-record/bind-record-detail-pages" -->
|
|
19
|
-
|
|
20
|
+
<ol-table
|
|
20
21
|
:paginations="paginations"
|
|
21
22
|
:empty-img="tableData.emptyImg"
|
|
22
23
|
:btnlist="[]"
|
|
@@ -29,7 +30,7 @@
|
|
|
29
30
|
<template slot="ceshi" slot-scope="scope">
|
|
30
31
|
<span>333433{{ scope.row.ceshi }}</span>
|
|
31
32
|
</template>
|
|
32
|
-
</ol-table>
|
|
33
|
+
</ol-table>
|
|
33
34
|
<!-- <el-button @click="handlePrint">接口</el-button>
|
|
34
35
|
<el-button @click="onAdd">新建</el-button>
|
|
35
36
|
<el-button @click="onEdit">编辑</el-button> -->
|
|
@@ -566,9 +567,6 @@ export default {
|
|
|
566
567
|
onPrintData: data => {
|
|
567
568
|
return data;
|
|
568
569
|
},
|
|
569
|
-
onTemplate: data => {
|
|
570
|
-
return data;
|
|
571
|
-
},
|
|
572
570
|
defaultTemplate: {
|
|
573
571
|
panels: [
|
|
574
572
|
{
|
|
@@ -700,9 +698,6 @@ export default {
|
|
|
700
698
|
// onPrintData: data => {
|
|
701
699
|
// return data;
|
|
702
700
|
// },
|
|
703
|
-
// onTemplate: data => {
|
|
704
|
-
// return data;
|
|
705
|
-
// },
|
|
706
701
|
// defaultTemplate: {
|
|
707
702
|
// panels: [
|
|
708
703
|
// {
|
package/src/package/index.js
CHANGED
|
@@ -4,6 +4,7 @@ import OlCustomSearch from "./customSearch";
|
|
|
4
4
|
import Dialog from "./dialog";
|
|
5
5
|
import OlForm from "./form";
|
|
6
6
|
import OlNumberRange from "./numberRange";
|
|
7
|
+
import OlPrintModel from "./printModel";
|
|
7
8
|
import OlPrint, { Hiprint } from "./print";
|
|
8
9
|
|
|
9
10
|
import SwaggerClient from "swagger-client";
|
|
@@ -206,7 +207,16 @@ function hideLoading() {
|
|
|
206
207
|
}
|
|
207
208
|
}
|
|
208
209
|
|
|
209
|
-
const components = [
|
|
210
|
+
const components = [
|
|
211
|
+
OlTable,
|
|
212
|
+
OlSearch,
|
|
213
|
+
OlCustomSearch,
|
|
214
|
+
Dialog,
|
|
215
|
+
OlForm,
|
|
216
|
+
OlNumberRange,
|
|
217
|
+
OlPrint,
|
|
218
|
+
OlPrintModel,
|
|
219
|
+
];
|
|
210
220
|
const install = async function (Vue) {
|
|
211
221
|
// 设置全局数据
|
|
212
222
|
components.map(item => {
|
|
@@ -216,5 +226,5 @@ const install = async function (Vue) {
|
|
|
216
226
|
};
|
|
217
227
|
|
|
218
228
|
export default install;
|
|
219
|
-
export { OlTable, OlSearch, OlCustomSearch, Dialog, OlForm, OlNumberRange, OlPrint };
|
|
229
|
+
export { OlTable, OlSearch, OlCustomSearch, Dialog, OlForm, OlNumberRange, OlPrint, OlPrintModel };
|
|
220
230
|
export { swaggerInstall, swaggerUnload, Hiprint };
|
|
@@ -12,7 +12,7 @@ let container = null;
|
|
|
12
12
|
const Hiprint = {
|
|
13
13
|
install(Vue) {
|
|
14
14
|
const hiprint = function (options) {
|
|
15
|
-
const { printData, onPrintData, defaultTemplate,
|
|
15
|
+
const { printData, onPrintData, defaultTemplate, onSubmit, grid } = options || {};
|
|
16
16
|
// 销毁旧实例
|
|
17
17
|
if (printInstance) {
|
|
18
18
|
printInstance.$destroy();
|
|
@@ -38,10 +38,6 @@ const Hiprint = {
|
|
|
38
38
|
propsData.onPrintData = onPrintData;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
if (onTemplate) {
|
|
42
|
-
propsData.onTemplate = onTemplate;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
41
|
if (defaultTemplate) {
|
|
46
42
|
propsData.defaultTemplate = defaultTemplate;
|
|
47
43
|
}
|
|
@@ -1,31 +1,16 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="paper-selector">
|
|
3
3
|
<el-button-group>
|
|
4
|
-
<el-button
|
|
5
|
-
|
|
6
|
-
:key="type"
|
|
7
|
-
:type="curPaperType === type ? 'primary' : 'default'"
|
|
8
|
-
size="small"
|
|
9
|
-
@click="setPaper(type, value)"
|
|
10
|
-
>
|
|
4
|
+
<el-button v-for="(value, type) in paperTypes" :key="type" :type="curPaperType === type ? 'primary' : 'default'"
|
|
5
|
+
size="small" @click="setPaper(type, value)">
|
|
11
6
|
{{ type }}
|
|
12
7
|
</el-button>
|
|
13
|
-
<el-button
|
|
14
|
-
:type="curPaperType === 'other' ? 'primary' : 'default'"
|
|
15
|
-
size="small"
|
|
16
|
-
@click="showPaperPop"
|
|
17
|
-
>
|
|
8
|
+
<el-button :type="curPaperType === 'other' ? 'primary' : 'default'" size="small" @click="showPaperPop">
|
|
18
9
|
自定义纸张
|
|
19
10
|
</el-button>
|
|
20
11
|
</el-button-group>
|
|
21
12
|
|
|
22
|
-
<el-dialog
|
|
23
|
-
title="设置纸张宽高(mm)"
|
|
24
|
-
:visible.sync="paperPopVisible"
|
|
25
|
-
width="400px"
|
|
26
|
-
:append-to-body="true"
|
|
27
|
-
:z-index="3001"
|
|
28
|
-
>
|
|
13
|
+
<el-dialog title="设置纸张宽高(mm)" :visible.sync="paperPopVisible" width="400px" :append-to-body="true" :z-index="3001">
|
|
29
14
|
<el-form label-width="80px">
|
|
30
15
|
<el-form-item label="纸张宽度">
|
|
31
16
|
<el-input v-model="paperWidth" type="number" placeholder="宽(mm)" />
|
|
@@ -1,11 +1,3 @@
|
|
|
1
|
-
<!--
|
|
2
|
-
* @Description: 使用 — 入门篇;
|
|
3
|
-
* @Author: CcSimple
|
|
4
|
-
* @Github: https://github.com/CcSimple
|
|
5
|
-
* @Date: 2023-02-07 11:52:50
|
|
6
|
-
* @LastEditors: CcSimple
|
|
7
|
-
* @LastEditTime: 2023-02-09 11:25:36
|
|
8
|
-
-->
|
|
9
1
|
<template>
|
|
10
2
|
<div class="print-dialog-overlay">
|
|
11
3
|
<div class="print-dialog">
|
|
@@ -26,7 +18,7 @@
|
|
|
26
18
|
</slot>
|
|
27
19
|
<el-button type="primary" size="small" @click="print">
|
|
28
20
|
<i class="iconfont sv-printer" />
|
|
29
|
-
|
|
21
|
+
打印
|
|
30
22
|
</el-button>
|
|
31
23
|
<el-button type="danger" size="small" @click="clearPaper" style="margin-left: 10px">
|
|
32
24
|
<i class="iconfont sv-clear" />
|
|
@@ -96,15 +88,14 @@ export default {
|
|
|
96
88
|
type: Object,
|
|
97
89
|
default: () => {},
|
|
98
90
|
},
|
|
99
|
-
// 模板数据前置钩子
|
|
100
|
-
onTemplate: {
|
|
101
|
-
type: Function,
|
|
102
|
-
default: null,
|
|
103
|
-
},
|
|
104
91
|
grid: {
|
|
105
92
|
type: Boolean,
|
|
106
93
|
default: false,
|
|
107
94
|
},
|
|
95
|
+
paperSize: {
|
|
96
|
+
type: Object,
|
|
97
|
+
default: () => ({ width: 210, height: 296.6 }),
|
|
98
|
+
},
|
|
108
99
|
},
|
|
109
100
|
data() {
|
|
110
101
|
return {
|
|
@@ -133,21 +124,10 @@ export default {
|
|
|
133
124
|
// eslint-disable-next-line no-undef
|
|
134
125
|
$("#hiprint-printTemplate").empty(); // 先清空, 避免重复构建
|
|
135
126
|
|
|
136
|
-
let template = this.defaultTemplate;
|
|
137
|
-
if (this.onTemplate) {
|
|
138
|
-
try {
|
|
139
|
-
const result = await this.onTemplate(this.defaultTemplate);
|
|
140
|
-
if (result) {
|
|
141
|
-
template = result;
|
|
142
|
-
}
|
|
143
|
-
} catch (error) {
|
|
144
|
-
console.error("onTemplate 执行失败:", error);
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
127
|
|
|
148
128
|
this.hiprintTemplate = new hiprint.PrintTemplate({
|
|
149
|
-
template,
|
|
150
|
-
settingContainer: "#PrintElementOptionSetting",
|
|
129
|
+
template: this.defaultTemplate,
|
|
130
|
+
settingContainer: "#PrintElementOptionSetting",
|
|
151
131
|
// paginationContainer: ".hiprint-printPagination", //多页打印
|
|
152
132
|
history: true,
|
|
153
133
|
onDataChanged: (type, json) => {
|
|
@@ -155,7 +135,10 @@ export default {
|
|
|
155
135
|
console.log(json); // 返回 template
|
|
156
136
|
},
|
|
157
137
|
});
|
|
158
|
-
|
|
138
|
+
// 使用 props 传入的纸张大小
|
|
139
|
+
if (this.$refs.paperSelector) {
|
|
140
|
+
this.$refs.paperSelector.curPaper = this.paperSize;
|
|
141
|
+
}
|
|
159
142
|
// 构建 并填充到 容器中
|
|
160
143
|
// 可以先 console.log($("#hiprint-printTemplate")) 看看是否有该 dom
|
|
161
144
|
this.hiprintTemplate.design("#hiprint-printTemplate", {
|
|
@@ -188,6 +171,10 @@ export default {
|
|
|
188
171
|
// return "<style>.hiprint-printElement-text{color:red !important;}</style>";
|
|
189
172
|
// },
|
|
190
173
|
};
|
|
174
|
+
|
|
175
|
+
// 使用 props 传入的纸张大小
|
|
176
|
+
ext.curPaper = this.paperSize;
|
|
177
|
+
|
|
191
178
|
// 调用浏览器打印
|
|
192
179
|
this.hiprintTemplate.print(data, options, ext);
|
|
193
180
|
},
|
|
@@ -0,0 +1,500 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<div class="print-manage-container">
|
|
4
|
+
<div class="left-panel">
|
|
5
|
+
<div class="panel-title">菜单树</div>
|
|
6
|
+
<el-tree
|
|
7
|
+
:data="menuTreeData"
|
|
8
|
+
:props="treeProps"
|
|
9
|
+
node-key="id"
|
|
10
|
+
default-expand-all
|
|
11
|
+
:expand-on-click-node="false"
|
|
12
|
+
highlight-current
|
|
13
|
+
@node-click="handleNodeClick"
|
|
14
|
+
>
|
|
15
|
+
</el-tree>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="right-panel">
|
|
18
|
+
<div class="panel-header">
|
|
19
|
+
<span class="panel-title">{{ currentMenuName }} - 打印模板</span>
|
|
20
|
+
<el-button
|
|
21
|
+
type="primary"
|
|
22
|
+
size="small"
|
|
23
|
+
icon="el-icon-plus"
|
|
24
|
+
@click="handleAdd"
|
|
25
|
+
>
|
|
26
|
+
新增模板
|
|
27
|
+
</el-button>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="template-list">
|
|
30
|
+
<div
|
|
31
|
+
v-if="templateList.length === 0"
|
|
32
|
+
class="empty-card"
|
|
33
|
+
@click="handleAdd"
|
|
34
|
+
>
|
|
35
|
+
<i class="el-icon-plus add-icon"></i>
|
|
36
|
+
<span class="add-text">点击添加模板</span>
|
|
37
|
+
</div>
|
|
38
|
+
<div
|
|
39
|
+
v-for="template in templateList"
|
|
40
|
+
:key="template.id"
|
|
41
|
+
class="template-card"
|
|
42
|
+
>
|
|
43
|
+
<div class="card-header">
|
|
44
|
+
<i class="el-icon-document card-icon"></i>
|
|
45
|
+
<span class="card-title">{{ template.templeteName }}</span>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="card-body">
|
|
48
|
+
<div class="card-info">
|
|
49
|
+
<span class="info-label">备注:</span>
|
|
50
|
+
<span class="info-value">{{ template.remark || "无" }}</span>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="card-footer">
|
|
54
|
+
<el-button
|
|
55
|
+
type="text"
|
|
56
|
+
size="small"
|
|
57
|
+
icon="el-icon-edit"
|
|
58
|
+
@click="handleEdit(template)"
|
|
59
|
+
>
|
|
60
|
+
编辑
|
|
61
|
+
</el-button>
|
|
62
|
+
<el-button
|
|
63
|
+
type="text"
|
|
64
|
+
size="small"
|
|
65
|
+
icon="el-icon-delete"
|
|
66
|
+
class="delete-btn"
|
|
67
|
+
@click="handleDelete(template)"
|
|
68
|
+
>
|
|
69
|
+
删除
|
|
70
|
+
</el-button>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
<el-dialog
|
|
77
|
+
:title="dialogTitle"
|
|
78
|
+
:visible.sync="dialogVisible"
|
|
79
|
+
width="600px"
|
|
80
|
+
:close-on-click-modal="false"
|
|
81
|
+
>
|
|
82
|
+
<el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
|
|
83
|
+
<el-form-item label="模板名称" prop="templeteName">
|
|
84
|
+
<el-input
|
|
85
|
+
v-model="form.templeteName"
|
|
86
|
+
placeholder="请输入模板名称"
|
|
87
|
+
></el-input>
|
|
88
|
+
</el-form-item>
|
|
89
|
+
<el-form-item label="备注">
|
|
90
|
+
<el-input
|
|
91
|
+
v-model="form.remark"
|
|
92
|
+
type="textarea"
|
|
93
|
+
:rows="3"
|
|
94
|
+
placeholder="请输入备注"
|
|
95
|
+
></el-input>
|
|
96
|
+
</el-form-item>
|
|
97
|
+
<el-form-item label="创建模板">
|
|
98
|
+
<span style="margin-right: 10px">{{
|
|
99
|
+
form.templeteJson ? "已创建" : "未创建"
|
|
100
|
+
}}</span>
|
|
101
|
+
<el-button type="primary" @click="handleCreateTemplate"
|
|
102
|
+
>创建模板</el-button
|
|
103
|
+
>
|
|
104
|
+
</el-form-item>
|
|
105
|
+
</el-form>
|
|
106
|
+
<span slot="footer" class="dialog-footer">
|
|
107
|
+
<el-button @click="dialogVisible = false">取消</el-button>
|
|
108
|
+
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
|
109
|
+
</span>
|
|
110
|
+
</el-dialog>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
</template>
|
|
114
|
+
|
|
115
|
+
<script>
|
|
116
|
+
|
|
117
|
+
export default {
|
|
118
|
+
name: "printManage",
|
|
119
|
+
data() {
|
|
120
|
+
return {
|
|
121
|
+
menuTreeData: [],
|
|
122
|
+
treeProps: {
|
|
123
|
+
label: "title",
|
|
124
|
+
children: "child",
|
|
125
|
+
},
|
|
126
|
+
currentMenuId: null,
|
|
127
|
+
currentMenuName: "全部",
|
|
128
|
+
currentItem: {},
|
|
129
|
+
templateList: [],
|
|
130
|
+
dialogVisible: false,
|
|
131
|
+
dialogTitle: "新增模板",
|
|
132
|
+
form: {
|
|
133
|
+
id: null,
|
|
134
|
+
templeteName: "",
|
|
135
|
+
remark: "",
|
|
136
|
+
templeteJson: "",
|
|
137
|
+
},
|
|
138
|
+
rules: {
|
|
139
|
+
templeteName: [
|
|
140
|
+
{ required: true, message: "请输入模板名称", trigger: "blur" },
|
|
141
|
+
],
|
|
142
|
+
},
|
|
143
|
+
};
|
|
144
|
+
},
|
|
145
|
+
mounted() {
|
|
146
|
+
this.initMenuTree();
|
|
147
|
+
this.initTemplateList();
|
|
148
|
+
},
|
|
149
|
+
methods: {
|
|
150
|
+
initMenuTree() {
|
|
151
|
+
const wms = JSON.parse(localStorage.getItem("wms") || "{}");
|
|
152
|
+
const menus = wms.SET_MENUS || [];
|
|
153
|
+
this.menuTreeData = this.buildTreeData(menus);
|
|
154
|
+
},
|
|
155
|
+
buildTreeData(menus) {
|
|
156
|
+
return menus.filter((menu) => {
|
|
157
|
+
if (menu.child && menu.child.length > 0) {
|
|
158
|
+
menu.child = this.buildTreeData(menu.child);
|
|
159
|
+
}
|
|
160
|
+
return menu.type === 0;
|
|
161
|
+
});
|
|
162
|
+
},
|
|
163
|
+
handleNodeClick(data) {
|
|
164
|
+
this.currentMenuId = data.id;
|
|
165
|
+
this.currentMenuName = data.title;
|
|
166
|
+
this.currentItem = data;
|
|
167
|
+
this.loadTemplates(data.id);
|
|
168
|
+
},
|
|
169
|
+
async loadTemplates(menuId) {
|
|
170
|
+
try {
|
|
171
|
+
const res = await this.get({
|
|
172
|
+
url: "/api/app/print-templete/page-list",
|
|
173
|
+
data: {
|
|
174
|
+
MenuId: menuId,
|
|
175
|
+
Page: 1,
|
|
176
|
+
MaxResultCount: 1000,
|
|
177
|
+
},
|
|
178
|
+
});
|
|
179
|
+
if (res.code != 200) return;
|
|
180
|
+
this.templateList = res.result?.items || [];
|
|
181
|
+
} catch (error) {
|
|
182
|
+
console.error("加载模板列表失败:", error);
|
|
183
|
+
}
|
|
184
|
+
},
|
|
185
|
+
async initTemplateList() {
|
|
186
|
+
try {
|
|
187
|
+
const res = await this.get({
|
|
188
|
+
url: "/api/app/print-templete/page-list",
|
|
189
|
+
data: {
|
|
190
|
+
page: 1,
|
|
191
|
+
MaxResultCount: 1000,
|
|
192
|
+
},
|
|
193
|
+
});
|
|
194
|
+
this.templateList = res.result?.items || [];
|
|
195
|
+
} catch (error) {
|
|
196
|
+
console.error("加载模板列表失败:", error);
|
|
197
|
+
}
|
|
198
|
+
},
|
|
199
|
+
handleAdd() {
|
|
200
|
+
this.dialogTitle = "新增模板";
|
|
201
|
+
this.form = {
|
|
202
|
+
id: null,
|
|
203
|
+
templeteName: "",
|
|
204
|
+
remark: "",
|
|
205
|
+
templeteJson: "",
|
|
206
|
+
};
|
|
207
|
+
this.dialogVisible = true;
|
|
208
|
+
this.$nextTick(() => {
|
|
209
|
+
this.$refs.formRef && this.$refs.formRef.clearValidate();
|
|
210
|
+
});
|
|
211
|
+
},
|
|
212
|
+
handleEdit(template) {
|
|
213
|
+
this.dialogTitle = "编辑模板";
|
|
214
|
+
this.form = {
|
|
215
|
+
id: template.id,
|
|
216
|
+
templeteName: template.templeteName,
|
|
217
|
+
remark: template.remark,
|
|
218
|
+
templeteJson: template.templeteJson,
|
|
219
|
+
};
|
|
220
|
+
this.dialogVisible = true;
|
|
221
|
+
},
|
|
222
|
+
async handleDelete(template) {
|
|
223
|
+
this.$confirm("确认删除该模板吗?", "提示", {
|
|
224
|
+
confirmButtonText: "确定",
|
|
225
|
+
cancelButtonText: "取消",
|
|
226
|
+
type: "warning",
|
|
227
|
+
})
|
|
228
|
+
.then(async () => {
|
|
229
|
+
try {
|
|
230
|
+
await this.del({
|
|
231
|
+
url: `/api/app/print-templete/print-templete/${template.id}`,
|
|
232
|
+
});
|
|
233
|
+
this.$message.success("删除成功");
|
|
234
|
+
this.loadTemplates(this.currentMenuId);
|
|
235
|
+
} catch (error) {
|
|
236
|
+
console.error("删除失败:", error);
|
|
237
|
+
}
|
|
238
|
+
})
|
|
239
|
+
.catch(() => {});
|
|
240
|
+
},
|
|
241
|
+
async handleSubmit() {
|
|
242
|
+
this.$refs.formRef.validate(async (valid) => {
|
|
243
|
+
if (valid) {
|
|
244
|
+
try {
|
|
245
|
+
if (this.form.id) {
|
|
246
|
+
await this.put({
|
|
247
|
+
url: "/api/app/print-templete/print-templete",
|
|
248
|
+
data: {
|
|
249
|
+
id: this.form.id,
|
|
250
|
+
templeteName: this.form.templeteName,
|
|
251
|
+
templeteJson: this.form.templeteJson,
|
|
252
|
+
},
|
|
253
|
+
});
|
|
254
|
+
this.$message.success("编辑成功");
|
|
255
|
+
} else {
|
|
256
|
+
await this.post({
|
|
257
|
+
url: "/api/app/print-templete/print-templete",
|
|
258
|
+
data: {
|
|
259
|
+
menuId: this.currentMenuId,
|
|
260
|
+
templeteName: this.form.templeteName,
|
|
261
|
+
templeteJson: this.form.templeteJson,
|
|
262
|
+
},
|
|
263
|
+
});
|
|
264
|
+
this.$message.success("新增成功");
|
|
265
|
+
}
|
|
266
|
+
this.dialogVisible = false;
|
|
267
|
+
this.loadTemplates(this.currentMenuId);
|
|
268
|
+
} catch (error) {
|
|
269
|
+
console.error("提交失败:", error);
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
});
|
|
273
|
+
},
|
|
274
|
+
handleCreateTemplate() {
|
|
275
|
+
let templateData = {};
|
|
276
|
+
if (this.form.templeteJson) {
|
|
277
|
+
try {
|
|
278
|
+
templateData = JSON.parse(this.form.templeteJson);
|
|
279
|
+
} catch (e) {
|
|
280
|
+
console.error("解析模板JSON失败:", e);
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
this.$hiprint({
|
|
284
|
+
defaultTemplate: templateData,
|
|
285
|
+
onSubmit: (res) => {
|
|
286
|
+
this.form.templeteJson = JSON.stringify(res);
|
|
287
|
+
console.log("保存的结果", this.form);
|
|
288
|
+
this.$message.success("模板创建成功!");
|
|
289
|
+
},
|
|
290
|
+
});
|
|
291
|
+
},
|
|
292
|
+
},
|
|
293
|
+
};
|
|
294
|
+
</script>
|
|
295
|
+
|
|
296
|
+
<style scoped>
|
|
297
|
+
.print-manage-container {
|
|
298
|
+
display: flex;
|
|
299
|
+
height: calc(100vh - 84px);
|
|
300
|
+
background: #f5f5f5;
|
|
301
|
+
padding: 20px;
|
|
302
|
+
gap: 20px;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.left-panel {
|
|
306
|
+
width: 280px;
|
|
307
|
+
background: #fff;
|
|
308
|
+
border-radius: 4px;
|
|
309
|
+
padding: 20px;
|
|
310
|
+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|
311
|
+
overflow-y: auto;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.panel-title {
|
|
315
|
+
font-size: 16px;
|
|
316
|
+
font-weight: 500;
|
|
317
|
+
color: #303133;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.custom-tree-node {
|
|
321
|
+
flex: 1;
|
|
322
|
+
display: flex;
|
|
323
|
+
align-items: center;
|
|
324
|
+
justify-content: space-between;
|
|
325
|
+
font-size: 14px;
|
|
326
|
+
padding-right: 8px;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.tree-icon {
|
|
330
|
+
margin-right: 8px;
|
|
331
|
+
font-size: 16px;
|
|
332
|
+
color: #909399;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.tree-label {
|
|
336
|
+
color: #606266;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.right-panel {
|
|
340
|
+
flex: 1;
|
|
341
|
+
background: #fff;
|
|
342
|
+
border-radius: 4px;
|
|
343
|
+
padding: 20px;
|
|
344
|
+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|
345
|
+
display: flex;
|
|
346
|
+
flex-direction: column;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.panel-header {
|
|
350
|
+
display: flex;
|
|
351
|
+
align-items: center;
|
|
352
|
+
justify-content: space-between;
|
|
353
|
+
margin-bottom: 20px;
|
|
354
|
+
padding-bottom: 15px;
|
|
355
|
+
border-bottom: 1px solid #ebeef5;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
.panel-header .panel-title {
|
|
359
|
+
font-size: 16px;
|
|
360
|
+
font-weight: 500;
|
|
361
|
+
color: #303133;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.template-list {
|
|
365
|
+
overflow-y: auto;
|
|
366
|
+
display: grid;
|
|
367
|
+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
368
|
+
gap: 20px;
|
|
369
|
+
padding: 10px;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
.empty-card {
|
|
373
|
+
width: 100%;
|
|
374
|
+
height: 200px;
|
|
375
|
+
border: 2px dashed #dcdfe6;
|
|
376
|
+
border-radius: 8px;
|
|
377
|
+
display: flex;
|
|
378
|
+
flex-direction: column;
|
|
379
|
+
align-items: center;
|
|
380
|
+
justify-content: center;
|
|
381
|
+
cursor: pointer;
|
|
382
|
+
transition: all 0.3s;
|
|
383
|
+
grid-column: 1 / -1;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
.empty-card:hover {
|
|
387
|
+
border-color: #409eff;
|
|
388
|
+
background: #f0f9ff;
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
.add-icon {
|
|
392
|
+
font-size: 48px;
|
|
393
|
+
color: #c0c4cc;
|
|
394
|
+
margin-bottom: 10px;
|
|
395
|
+
transition: all 0.3s;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
.empty-card:hover .add-icon {
|
|
399
|
+
color: #409eff;
|
|
400
|
+
transform: scale(1.1);
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
.add-text {
|
|
404
|
+
font-size: 14px;
|
|
405
|
+
color: #909399;
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
.template-card {
|
|
409
|
+
background: #fff;
|
|
410
|
+
border: 1px solid #ebeef5;
|
|
411
|
+
border-radius: 8px;
|
|
412
|
+
padding: 20px;
|
|
413
|
+
transition: all 0.3s;
|
|
414
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.template-card:hover {
|
|
418
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
419
|
+
transform: translateY(-2px);
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.card-header {
|
|
423
|
+
display: flex;
|
|
424
|
+
align-items: center;
|
|
425
|
+
margin-bottom: 15px;
|
|
426
|
+
padding-bottom: 10px;
|
|
427
|
+
border-bottom: 1px solid #f0f0f0;
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
.card-icon {
|
|
431
|
+
font-size: 24px;
|
|
432
|
+
color: #409eff;
|
|
433
|
+
margin-right: 10px;
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
.card-title {
|
|
437
|
+
font-size: 16px;
|
|
438
|
+
font-weight: 500;
|
|
439
|
+
color: #303133;
|
|
440
|
+
flex: 1;
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
.card-body {
|
|
444
|
+
margin-bottom: 15px;
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
.card-info {
|
|
448
|
+
display: flex;
|
|
449
|
+
align-items: center;
|
|
450
|
+
margin-bottom: 10px;
|
|
451
|
+
font-size: 14px;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
.info-label {
|
|
455
|
+
color: #909399;
|
|
456
|
+
margin-right: 5px;
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
.info-value {
|
|
460
|
+
color: #606266;
|
|
461
|
+
flex: 1;
|
|
462
|
+
word-break: break-all;
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
.card-footer {
|
|
466
|
+
display: flex;
|
|
467
|
+
justify-content: flex-end;
|
|
468
|
+
gap: 10px;
|
|
469
|
+
padding-top: 10px;
|
|
470
|
+
border-top: 1px solid #f0f0f0;
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
.delete-btn {
|
|
474
|
+
color: #f56c6c;
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
.delete-btn:hover {
|
|
478
|
+
color: #f56c6c;
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
.dialog-footer {
|
|
482
|
+
display: flex;
|
|
483
|
+
justify-content: flex-end;
|
|
484
|
+
gap: 10px;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
::-webkit-scrollbar {
|
|
488
|
+
width: 6px;
|
|
489
|
+
height: 6px;
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
::-webkit-scrollbar-thumb {
|
|
493
|
+
background: #dcdfe6;
|
|
494
|
+
border-radius: 3px;
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
::-webkit-scrollbar-track {
|
|
498
|
+
background: #f5f5f5;
|
|
499
|
+
}
|
|
500
|
+
</style>
|
|
@@ -62,11 +62,22 @@
|
|
|
62
62
|
<div
|
|
63
63
|
v-if="tableData.options.downloadBtn"
|
|
64
64
|
class="avatar-container right-menu-item hover-effect el-dropdown"
|
|
65
|
-
@click="printTable"
|
|
66
65
|
>
|
|
66
|
+
<!-- @click="printTable" -->
|
|
67
67
|
<div class="avatar-wrapper">
|
|
68
68
|
<div class="layui-table-tool-self">
|
|
69
|
-
<
|
|
69
|
+
<el-dropdown @command="handleCommand" trigger="click">
|
|
70
|
+
<i class="el-icon-printer" />
|
|
71
|
+
<el-dropdown-menu slot="dropdown">
|
|
72
|
+
<el-dropdown-item
|
|
73
|
+
v-for="(item, index) in printTemplateList"
|
|
74
|
+
:key="index"
|
|
75
|
+
:command="item.id"
|
|
76
|
+
:disabled="item.disabled"
|
|
77
|
+
>{{ item.templeteName || "-" }}</el-dropdown-item
|
|
78
|
+
>
|
|
79
|
+
</el-dropdown-menu>
|
|
80
|
+
</el-dropdown>
|
|
70
81
|
</div>
|
|
71
82
|
</div>
|
|
72
83
|
</div>
|
|
@@ -342,6 +353,11 @@ export default {
|
|
|
342
353
|
event: "SelectionChange",
|
|
343
354
|
},
|
|
344
355
|
props: {
|
|
356
|
+
// 模板打印的id,不传就默认当前菜单id
|
|
357
|
+
menuId: {
|
|
358
|
+
type: String,
|
|
359
|
+
default: "",
|
|
360
|
+
},
|
|
345
361
|
url: {
|
|
346
362
|
type: String,
|
|
347
363
|
default: "",
|
|
@@ -387,6 +403,7 @@ export default {
|
|
|
387
403
|
operates: [], // 表格里面的操作按钮
|
|
388
404
|
// tableHeightDiff: 300,
|
|
389
405
|
operatesAttrs: {},
|
|
406
|
+
printData: {}, // 模板打印的数据
|
|
390
407
|
};
|
|
391
408
|
},
|
|
392
409
|
},
|
|
@@ -446,6 +463,7 @@ export default {
|
|
|
446
463
|
twinPage: 1,
|
|
447
464
|
columnsWatcher: null,
|
|
448
465
|
key: 0,
|
|
466
|
+
printTemplateList: [{ id: 1, templeteName: "暂无数据", disabled: true }],
|
|
449
467
|
};
|
|
450
468
|
},
|
|
451
469
|
computed: {
|
|
@@ -478,12 +496,50 @@ export default {
|
|
|
478
496
|
created() {
|
|
479
497
|
// 通过swagger完善columns
|
|
480
498
|
this.init();
|
|
499
|
+
this.getPrintTemplateList();
|
|
481
500
|
},
|
|
482
501
|
// 组件销毁时清理监听器
|
|
483
502
|
beforeDestroy() {
|
|
484
503
|
this.stopColumnsWatching();
|
|
485
504
|
},
|
|
486
505
|
methods: {
|
|
506
|
+
async getPrintTemplateList() {
|
|
507
|
+
const handleMenu = (arr, _this) => {
|
|
508
|
+
for (const item of arr) {
|
|
509
|
+
if (item.path === _this.$route.path) {
|
|
510
|
+
return item;
|
|
511
|
+
}
|
|
512
|
+
if (item.child && item.child.length > 0 && item.type !== 1) {
|
|
513
|
+
const found = handleMenu(item.child, _this);
|
|
514
|
+
if (found) return found;
|
|
515
|
+
}
|
|
516
|
+
}
|
|
517
|
+
return null;
|
|
518
|
+
};
|
|
519
|
+
let wms = JSON.parse(localStorage.getItem("wms"));
|
|
520
|
+
let SET_MENUS = null;
|
|
521
|
+
if (wms) SET_MENUS = wms.SET_MENUS;
|
|
522
|
+
const menus = SET_MENUS;
|
|
523
|
+
this.currentPageItem = handleMenu(menus, this);
|
|
524
|
+
|
|
525
|
+
const targetMenuId = this.menuId || (this.currentPageItem && this.currentPageItem.id);
|
|
526
|
+
|
|
527
|
+
try {
|
|
528
|
+
const res = await this.get({
|
|
529
|
+
url: "/api/app/print-templete/page-list",
|
|
530
|
+
data: {
|
|
531
|
+
MenuId: targetMenuId,
|
|
532
|
+
page: 1,
|
|
533
|
+
MaxResultCount: 1000,
|
|
534
|
+
},
|
|
535
|
+
});
|
|
536
|
+
this.printTemplateList = res.result?.items || [
|
|
537
|
+
{ id: 1, templeteName: "暂无数据", disabled: true },
|
|
538
|
+
];
|
|
539
|
+
} catch (error) {
|
|
540
|
+
console.error("加载模板列表失败:", error);
|
|
541
|
+
}
|
|
542
|
+
},
|
|
487
543
|
init() {
|
|
488
544
|
// 从 IndexedDB 中获取 Swagger 数据
|
|
489
545
|
getData()
|
|
@@ -622,19 +678,27 @@ export default {
|
|
|
622
678
|
});
|
|
623
679
|
this.$emit("refreshTable");
|
|
624
680
|
},
|
|
625
|
-
printTable() {
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
681
|
+
// printTable() {
|
|
682
|
+
// console.log("printTable");
|
|
683
|
+
// if (this.tableData.rows.length <= 0) return;
|
|
684
|
+
// this.printListObj.title = this.$router.history.current.name;
|
|
685
|
+
// this.printListObj.tableHeader = this.tableData.columns;
|
|
686
|
+
// this.printListObj.tableData = this.tableData.rows;
|
|
687
|
+
// console.log(this.printListObj);
|
|
688
|
+
// setTimeout(() => {
|
|
689
|
+
// $(".printTemplate").show();
|
|
690
|
+
// $(".printTemplate").jqprint();
|
|
691
|
+
// $(".printTemplate").hide();
|
|
692
|
+
// }, 50);
|
|
693
|
+
// this.$emit("printTable");
|
|
694
|
+
// },
|
|
695
|
+
handleCommand(command) {
|
|
696
|
+
if (!Array.isArray(this.printTemplateList)) return;
|
|
697
|
+
const tempItem = this.printTemplateList.find(item => item.id === command);
|
|
698
|
+
this.$hiprint.print({
|
|
699
|
+
printData: this.tableData?.printData || {},
|
|
700
|
+
defaultTemplate: tempItem.templeteJson ? JSON.parse(tempItem.templeteJson) : {},
|
|
701
|
+
});
|
|
638
702
|
},
|
|
639
703
|
selectAll(val) {
|
|
640
704
|
this.$emit("selectAll", val);
|
|
@@ -784,6 +848,7 @@ export default {
|
|
|
784
848
|
th {
|
|
785
849
|
padding: 0px;
|
|
786
850
|
background: #f5f7fa;
|
|
851
|
+
|
|
787
852
|
div {
|
|
788
853
|
line-height: 28px;
|
|
789
854
|
color: #909399;
|
|
@@ -800,6 +865,7 @@ export default {
|
|
|
800
865
|
text-decoration: none;
|
|
801
866
|
display: inline-block;
|
|
802
867
|
margin: 0px 5px;
|
|
868
|
+
|
|
803
869
|
::v-deep .el-button {
|
|
804
870
|
width: 100%;
|
|
805
871
|
padding: 7px;
|
|
@@ -871,12 +937,14 @@ export default {
|
|
|
871
937
|
.checkbox {
|
|
872
938
|
display: block;
|
|
873
939
|
}
|
|
940
|
+
|
|
874
941
|
// 操作列按钮布局
|
|
875
942
|
.operate-group {
|
|
876
943
|
display: flex;
|
|
877
944
|
align-items: center;
|
|
878
945
|
justify-content: space-around;
|
|
879
946
|
}
|
|
947
|
+
|
|
880
948
|
.toolbox {
|
|
881
949
|
display: flex;
|
|
882
950
|
gap: 10px;
|