template-designer 0.1.4 → 0.1.6
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/README.md +198 -86
- package/dist/{lodop-3286f6f2.mjs → lodop-25ec3af8.mjs} +28 -10
- package/dist/rfid-b84da009.mjs +277 -0
- package/dist/style.css +1 -1
- package/dist/template-designer.es.js +3286 -3229
- package/dist/template-designer.umd.js +12 -12
- package/package.json +2 -2
- package/dist/rfid-9c251163.mjs +0 -95
package/README.md
CHANGED
|
@@ -1,135 +1,247 @@
|
|
|
1
|
-
#
|
|
1
|
+
# 模板设计器组件库
|
|
2
2
|
|
|
3
|
-
一个基于
|
|
3
|
+
一个基于Vue 3的可视化模板设计器组件库，支持拖拽、缩放、旋转等操作。
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## 功能特性
|
|
6
6
|
|
|
7
|
-
- 🎨
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
7
|
+
- 🎨 可视化模板设计
|
|
8
|
+
- 📝 文本组件
|
|
9
|
+
- 📊 条形码组件
|
|
10
|
+
- 🔲 二维码组件
|
|
11
|
+
- 🖼️ 图片组件（支持上传）
|
|
12
|
+
- 📐 矩形框组件
|
|
13
|
+
- ➖ 线段组件
|
|
14
|
+
- 🎯 组件拖拽、缩放、旋转
|
|
15
|
+
- 📋 属性面板配置
|
|
16
|
+
- 🖼️ 模板预览导出
|
|
17
|
+
- 🔧 **双重组件控制**
|
|
13
18
|
|
|
14
|
-
##
|
|
19
|
+
## 安装和使用
|
|
15
20
|
|
|
16
21
|
```bash
|
|
17
22
|
npm install template-designer
|
|
18
23
|
```
|
|
19
24
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
25
|
+
```vue
|
|
26
|
+
<template>
|
|
27
|
+
<TemplateDesigner
|
|
28
|
+
:templateData="templateData"
|
|
29
|
+
:config="config"
|
|
30
|
+
:options="{ fields }"
|
|
31
|
+
template-type="lodop"
|
|
32
|
+
/>
|
|
33
|
+
</template>
|
|
23
34
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
35
|
+
<script setup>
|
|
36
|
+
import { TemplateDesigner } from 'template-designer'
|
|
37
|
+
|
|
38
|
+
const templateData = ref({
|
|
39
|
+
width: 100,
|
|
40
|
+
height: 30,
|
|
41
|
+
printWidth: 103,
|
|
42
|
+
printHeight: 40,
|
|
43
|
+
items: []
|
|
44
|
+
})
|
|
45
|
+
|
|
46
|
+
const config = ref({
|
|
47
|
+
// 组件显示配置
|
|
48
|
+
})
|
|
49
|
+
|
|
50
|
+
const fields = ref([
|
|
51
|
+
{ label: '商品条码', value: 'goodsSn' },
|
|
52
|
+
{ label: '商品名称', value: 'goodsName' }
|
|
53
|
+
])
|
|
54
|
+
</script>
|
|
28
55
|
```
|
|
29
56
|
|
|
30
|
-
|
|
57
|
+
## 配置说明
|
|
31
58
|
|
|
32
|
-
|
|
33
|
-
configureWebpack: {
|
|
34
|
-
...
|
|
35
|
-
resolve: {
|
|
36
|
-
alias: {
|
|
37
|
-
'vue': path.resolve(__dirname, 'node_modules/vue')
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
...
|
|
41
|
-
}
|
|
42
|
-
```
|
|
59
|
+
## 双重组件控制功能
|
|
43
60
|
|
|
44
|
-
|
|
61
|
+
### 功能说明
|
|
45
62
|
|
|
46
|
-
|
|
63
|
+
组件库现在支持双重控制来隐藏/显示组件：
|
|
47
64
|
|
|
48
|
-
|
|
49
|
-
|
|
65
|
+
1. **通过config参数控制**
|
|
66
|
+
2. **通过配置文件控制** 如果配置文件中没有某个组件的配置，则不展示该组件
|
|
67
|
+
|
|
68
|
+
## 属性面板布局控制功能
|
|
69
|
+
|
|
70
|
+
### 功能说明
|
|
71
|
+
|
|
72
|
+
组件库现在支持通过配置文件控制属性面板的布局：
|
|
73
|
+
|
|
74
|
+
1. **独占一行**（`layout: 'full'`）- 属性项占满整行宽度
|
|
75
|
+
2. **占半行**（`layout: 'half'`）- 属性项占半行宽度，可以并排显示，自动换行
|
|
76
|
+
3. **默认布局** - 根据属性类型自动判断布局方式
|
|
77
|
+
|
|
78
|
+
### 使用方法
|
|
79
|
+
|
|
80
|
+
#### 1. 通过config参数控制
|
|
81
|
+
|
|
82
|
+
```javascript
|
|
83
|
+
// 隐藏特定组件
|
|
84
|
+
const config = {
|
|
85
|
+
text: { hidden: true }, // 隐藏文本组件
|
|
86
|
+
barcode: { hidden: true }, // 隐藏一维码组件
|
|
87
|
+
image: { hidden: true }, // 隐藏图片组件
|
|
88
|
+
rectangle: { hidden: true } // 隐藏矩形框组件
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// 使用组件
|
|
92
|
+
<TemplateDesigner :config="config" />
|
|
50
93
|
```
|
|
51
94
|
|
|
52
|
-
|
|
95
|
+
#### 2. 通过配置文件控制
|
|
53
96
|
|
|
54
|
-
|
|
97
|
+
在 `src/js/config/props/` 目录下创建配置文件，只包含需要显示的组件：
|
|
55
98
|
|
|
56
|
-
|
|
99
|
+
```javascript
|
|
100
|
+
// src/js/config/props/xxx.js
|
|
101
|
+
export default {
|
|
102
|
+
text: {
|
|
103
|
+
// 文本组件配置
|
|
104
|
+
},
|
|
105
|
+
barcode: {
|
|
106
|
+
// 一维码组件配置
|
|
107
|
+
}
|
|
108
|
+
...
|
|
109
|
+
}
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
系统会自动根据 `template-type` 动态加载对应的配置文件：
|
|
57
113
|
|
|
58
114
|
```javascript
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
115
|
+
// src/js/config/index.js
|
|
116
|
+
export async function getPropsConfig(type) {
|
|
117
|
+
try {
|
|
118
|
+
// 直接通过type对应文件名动态导入
|
|
119
|
+
const config = await import(`./props/${type}.js`)
|
|
120
|
+
return config.default
|
|
121
|
+
} catch (error) {
|
|
122
|
+
// 如果指定的配置文件不存在，返回lodop配置作为默认值
|
|
123
|
+
const defaultConfig = await import('./props/lodop.js')
|
|
124
|
+
return defaultConfig.default
|
|
125
|
+
}
|
|
126
|
+
}
|
|
63
127
|
```
|
|
64
128
|
|
|
65
|
-
|
|
129
|
+
#### 3. 双重控制示例
|
|
66
130
|
|
|
67
131
|
```vue
|
|
68
132
|
<template>
|
|
69
|
-
<
|
|
70
|
-
|
|
71
|
-
|
|
133
|
+
<TemplateDesigner
|
|
134
|
+
:template-type="currentTemplateType"
|
|
135
|
+
:config="componentConfig"
|
|
136
|
+
/>
|
|
72
137
|
</template>
|
|
73
138
|
|
|
74
139
|
<script setup>
|
|
75
|
-
import
|
|
140
|
+
import { ref } from 'vue'
|
|
76
141
|
|
|
77
|
-
const
|
|
78
|
-
// 你的模板数据
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
// options传入的结构须为{[optionsKey(config下配置文件中对应optionsKey)]: [{label: xx: value: xx}, ...]，因为考虑实际使用场景，就没有加自定义key支持
|
|
82
|
-
const options = {
|
|
83
|
-
// 属性选项值
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
// 是否显示标签图像绘制
|
|
87
|
-
const showGraphConfig = true
|
|
142
|
+
const currentTemplateType = ref('rfid') // 使用rfid配置文件
|
|
88
143
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
image: { hidden: true, request: () => {图片上传} }, // 隐藏图片组件
|
|
95
|
-
rectangle: { hidden: true }, // 隐藏矩形框组件
|
|
96
|
-
horline: { hidden: true } // 隐藏线段组件
|
|
144
|
+
const componentConfig = ref({
|
|
145
|
+
text: { hidden: false }, // 显示文本组件
|
|
146
|
+
barcode: { hidden: true }, // 隐藏一维码组件
|
|
147
|
+
// 注意：即使config中设置了显示，如果配置文件中没有该组件，仍然不会显示
|
|
148
|
+
})
|
|
97
149
|
|
|
150
|
+
// 切换模板类型
|
|
151
|
+
const changeTemplateType = (type) => {
|
|
152
|
+
currentTemplateType.value = type
|
|
98
153
|
}
|
|
99
154
|
</script>
|
|
100
155
|
```
|
|
101
156
|
|
|
102
|
-
|
|
157
|
+
### 实际效果
|
|
103
158
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
npm install
|
|
159
|
+
- **LODOP配置**：显示所有组件（text, barcode, qrcode, image, rectangle, horline）
|
|
160
|
+
- **RFID配置**：显示所有组件（text, barcode, qrcode）
|
|
107
161
|
|
|
108
|
-
|
|
109
|
-
npm run dev
|
|
162
|
+
### 支持的模板类型
|
|
110
163
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
164
|
+
- `lodop` - 默认配置，包含所有组件（对应 `lodop.js`）
|
|
165
|
+
- `rfid` - RFID标签配置，包含所有组件（对应 `rfid.js`）
|
|
166
|
+
- 其他任何类型 - 系统会尝试加载 `./props/{type}.js` 文件，如果不存在则使用lodop配置作为默认值
|
|
114
167
|
|
|
115
|
-
|
|
168
|
+
### 组件类型
|
|
116
169
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
170
|
+
- `text` - 文本组件
|
|
171
|
+
- `barcode` - 一维码组件
|
|
172
|
+
- `qrcode` - 二维码组件
|
|
173
|
+
- `image` - 图片组件
|
|
174
|
+
- `rectangle` - 矩形框组件
|
|
175
|
+
- `horline` - 线段组件
|
|
176
|
+
|
|
177
|
+
## 属性面板布局控制功能
|
|
178
|
+
|
|
179
|
+
### 功能说明
|
|
180
|
+
|
|
181
|
+
组件库现在支持通过配置文件控制属性面板的布局：
|
|
182
|
+
|
|
183
|
+
1. **独占一行**（`layout: 'full'`）- 属性项占满整行宽度
|
|
184
|
+
2. **占半行**（`layout: 'half'`）- 属性项占半行宽度，可以并排显示，自动换行
|
|
185
|
+
3. **默认布局** - 根据属性类型自动判断布局方式
|
|
186
|
+
|
|
187
|
+
### 使用方法
|
|
188
|
+
|
|
189
|
+
#### 1. 在配置文件中设置布局
|
|
190
|
+
|
|
191
|
+
```javascript
|
|
192
|
+
// src/js/config/props/rfid.js
|
|
193
|
+
export default {
|
|
194
|
+
text: {
|
|
195
|
+
propertyPanel: [
|
|
196
|
+
{
|
|
197
|
+
prop: 'Title',
|
|
198
|
+
label: '标题',
|
|
199
|
+
default: '',
|
|
200
|
+
layout: 'full' // 独占一行
|
|
201
|
+
},
|
|
202
|
+
{
|
|
203
|
+
prop: 'FontName',
|
|
204
|
+
label: '字体名称',
|
|
205
|
+
type: 'select',
|
|
206
|
+
options: [...],
|
|
207
|
+
default: '黑体',
|
|
208
|
+
layout: 'half' // 占半行
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
prop: 'FontSize',
|
|
212
|
+
label: '字体大小',
|
|
213
|
+
type: 'number',
|
|
214
|
+
min: 1,
|
|
215
|
+
max: 100,
|
|
216
|
+
default: 10,
|
|
217
|
+
layout: 'half' // 占半行
|
|
218
|
+
}
|
|
219
|
+
]
|
|
220
|
+
}
|
|
221
|
+
}
|
|
120
222
|
```
|
|
121
223
|
|
|
122
|
-
|
|
224
|
+
#### 2. 布局类型说明
|
|
225
|
+
|
|
226
|
+
- **`layout: 'full'`** - 属性项独占一行，适合文本输入、文件上传等需要更多空间的属性
|
|
227
|
+
- **`layout: 'half'`** - 属性项占半行，适合下拉选择、数字输入等紧凑型属性
|
|
228
|
+
- **不设置layout** - 系统根据属性类型自动判断：
|
|
229
|
+
- `text`、`file`、`textarea` 类型默认独占一行
|
|
230
|
+
- 其他类型默认占半行
|
|
231
|
+
|
|
232
|
+
#### 3. 布局效果
|
|
233
|
+
|
|
234
|
+
- **独占一行**：属性项占满整行宽度，垂直排列
|
|
235
|
+
- **占半行**：两个属性项并排显示，自动换行，形成网格布局
|
|
236
|
+
- **响应式**：在不同屏幕尺寸下自动调整布局
|
|
237
|
+
|
|
238
|
+
## 开发
|
|
123
239
|
|
|
124
240
|
```bash
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
├── js/ # 工具函数和钩子
|
|
128
|
-
├── assets/ # 静态资源
|
|
129
|
-
├── style/ # 样式文件
|
|
130
|
-
└── index.vue # 主组件
|
|
241
|
+
npm run dev
|
|
242
|
+
npm run build
|
|
131
243
|
```
|
|
132
244
|
|
|
133
|
-
##
|
|
245
|
+
## 许可证
|
|
134
246
|
|
|
135
|
-
|
|
247
|
+
MIT
|
|
@@ -12,19 +12,25 @@ const e = {
|
|
|
12
12
|
{
|
|
13
13
|
prop: "Title",
|
|
14
14
|
label: "标题",
|
|
15
|
-
default: ""
|
|
15
|
+
default: "",
|
|
16
|
+
layout: "full"
|
|
17
|
+
// 独占一行
|
|
16
18
|
},
|
|
17
19
|
{
|
|
18
20
|
prop: "FieldName",
|
|
19
21
|
label: "字段名称",
|
|
20
22
|
type: "select",
|
|
21
23
|
optionsKey: "fields",
|
|
22
|
-
default: ""
|
|
24
|
+
default: "",
|
|
25
|
+
layout: "full"
|
|
26
|
+
// 独占一行
|
|
23
27
|
},
|
|
24
28
|
{
|
|
25
29
|
prop: "Text",
|
|
26
30
|
label: "测试数据",
|
|
27
|
-
default: "测试文本"
|
|
31
|
+
default: "测试文本",
|
|
32
|
+
layout: "full"
|
|
33
|
+
// 独占一行
|
|
28
34
|
},
|
|
29
35
|
{
|
|
30
36
|
prop: "FontName",
|
|
@@ -35,7 +41,9 @@ const e = {
|
|
|
35
41
|
{ label: "楷体", value: "楷体", cssValue: "KaiTi" },
|
|
36
42
|
{ label: "宋体", value: "宋体", cssValue: "SimSun" }
|
|
37
43
|
],
|
|
38
|
-
default: "黑体"
|
|
44
|
+
default: "黑体",
|
|
45
|
+
layout: "half"
|
|
46
|
+
// 占半行
|
|
39
47
|
},
|
|
40
48
|
{
|
|
41
49
|
prop: "FontSize",
|
|
@@ -43,14 +51,18 @@ const e = {
|
|
|
43
51
|
type: "number",
|
|
44
52
|
min: 1,
|
|
45
53
|
max: 100,
|
|
46
|
-
default: 10
|
|
54
|
+
default: 10,
|
|
55
|
+
layout: "half"
|
|
56
|
+
// 占半行
|
|
47
57
|
},
|
|
48
58
|
{
|
|
49
59
|
prop: "FontColor",
|
|
50
60
|
label: "字体颜色",
|
|
51
61
|
type: "color",
|
|
52
62
|
hide: !0,
|
|
53
|
-
default: "#000000"
|
|
63
|
+
default: "#000000",
|
|
64
|
+
layout: "half"
|
|
65
|
+
// 占半行
|
|
54
66
|
},
|
|
55
67
|
{
|
|
56
68
|
prop: "Bold",
|
|
@@ -60,7 +72,9 @@ const e = {
|
|
|
60
72
|
{ label: "加粗", value: 1 },
|
|
61
73
|
{ label: "不加粗", value: 0 }
|
|
62
74
|
],
|
|
63
|
-
default: 0
|
|
75
|
+
default: 0,
|
|
76
|
+
layout: "half"
|
|
77
|
+
// 占半行
|
|
64
78
|
},
|
|
65
79
|
{
|
|
66
80
|
prop: "Italic",
|
|
@@ -70,7 +84,9 @@ const e = {
|
|
|
70
84
|
{ label: "是", value: 1 },
|
|
71
85
|
{ label: "否", value: 0 }
|
|
72
86
|
],
|
|
73
|
-
default: 0
|
|
87
|
+
default: 0,
|
|
88
|
+
layout: "half"
|
|
89
|
+
// 占半行
|
|
74
90
|
},
|
|
75
91
|
{
|
|
76
92
|
prop: "Underline",
|
|
@@ -203,7 +219,8 @@ const e = {
|
|
|
203
219
|
label: "字段名称",
|
|
204
220
|
type: "select",
|
|
205
221
|
optionsKey: "fields",
|
|
206
|
-
default: "goodsSn"
|
|
222
|
+
default: "goodsSn",
|
|
223
|
+
layout: "full"
|
|
207
224
|
},
|
|
208
225
|
{
|
|
209
226
|
prop: "BarcodeValue",
|
|
@@ -260,7 +277,8 @@ const e = {
|
|
|
260
277
|
label: "字段名称",
|
|
261
278
|
type: "select",
|
|
262
279
|
optionsKey: "fields",
|
|
263
|
-
default: ""
|
|
280
|
+
default: "",
|
|
281
|
+
layout: "full"
|
|
264
282
|
},
|
|
265
283
|
{
|
|
266
284
|
prop: "QRCodeValue",
|
|
@@ -0,0 +1,277 @@
|
|
|
1
|
+
const e = {
|
|
2
|
+
text: {
|
|
3
|
+
x: 0,
|
|
4
|
+
y: 0,
|
|
5
|
+
width: 20,
|
|
6
|
+
height: 4.2,
|
|
7
|
+
rotation: 0,
|
|
8
|
+
Title: "",
|
|
9
|
+
FieldName: "",
|
|
10
|
+
Text: "测试文本",
|
|
11
|
+
FontName: "黑体",
|
|
12
|
+
FontSize: 10,
|
|
13
|
+
FontColor: "#000000",
|
|
14
|
+
Bold: 0,
|
|
15
|
+
Italic: 0,
|
|
16
|
+
Underline: 0,
|
|
17
|
+
Alignment: 2,
|
|
18
|
+
TextWrap: 1,
|
|
19
|
+
HOrient: 0,
|
|
20
|
+
VOrient: 0,
|
|
21
|
+
PenWidth: 0,
|
|
22
|
+
PenStyle: 0,
|
|
23
|
+
Stretch: 1,
|
|
24
|
+
PreviewOnly: 0,
|
|
25
|
+
ReadOnly: 0,
|
|
26
|
+
propertyPanel: [
|
|
27
|
+
{
|
|
28
|
+
prop: "Title",
|
|
29
|
+
label: "标题",
|
|
30
|
+
default: "",
|
|
31
|
+
layout: "full"
|
|
32
|
+
// 独占一行
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
prop: "FieldName",
|
|
36
|
+
label: "字段名称",
|
|
37
|
+
type: "select",
|
|
38
|
+
optionsKey: "fields",
|
|
39
|
+
default: "",
|
|
40
|
+
layout: "full"
|
|
41
|
+
// 独占一行
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
prop: "Text",
|
|
45
|
+
label: "测试数据",
|
|
46
|
+
default: "测试文本",
|
|
47
|
+
layout: "full"
|
|
48
|
+
// 独占一行
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
prop: "FontName",
|
|
52
|
+
label: "字体名称",
|
|
53
|
+
type: "select",
|
|
54
|
+
options: [
|
|
55
|
+
{ label: "黑体", value: "黑体", cssValue: "SimHei" },
|
|
56
|
+
{ label: "楷体", value: "楷体", cssValue: "KaiTi" },
|
|
57
|
+
{ label: "宋体", value: "宋体", cssValue: "SimSun" }
|
|
58
|
+
],
|
|
59
|
+
default: "黑体",
|
|
60
|
+
layout: "half"
|
|
61
|
+
// 占半行
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
prop: "FontSize",
|
|
65
|
+
label: "字体大小",
|
|
66
|
+
type: "number",
|
|
67
|
+
min: 1,
|
|
68
|
+
max: 100,
|
|
69
|
+
default: 10,
|
|
70
|
+
layout: "half"
|
|
71
|
+
// 占半行
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
prop: "FontColor",
|
|
75
|
+
label: "字体颜色",
|
|
76
|
+
type: "color",
|
|
77
|
+
hide: !0,
|
|
78
|
+
default: "#000000",
|
|
79
|
+
layout: "half"
|
|
80
|
+
// 占半行
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
prop: "Bold",
|
|
84
|
+
label: "字体加粗",
|
|
85
|
+
type: "select",
|
|
86
|
+
options: [
|
|
87
|
+
{ label: "加粗", value: 1 },
|
|
88
|
+
{ label: "不加粗", value: 0 }
|
|
89
|
+
],
|
|
90
|
+
default: 0,
|
|
91
|
+
layout: "half"
|
|
92
|
+
// 占半行
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
prop: "Italic",
|
|
96
|
+
label: "是否斜体",
|
|
97
|
+
type: "select",
|
|
98
|
+
options: [
|
|
99
|
+
{ label: "是", value: 1 },
|
|
100
|
+
{ label: "否", value: 0 }
|
|
101
|
+
],
|
|
102
|
+
default: 0,
|
|
103
|
+
layout: "half"
|
|
104
|
+
// 占半行
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
prop: "Alignment",
|
|
108
|
+
label: "对齐方式",
|
|
109
|
+
type: "select",
|
|
110
|
+
options: [
|
|
111
|
+
{ label: "居左", value: 1 },
|
|
112
|
+
{ label: "居中", value: 2 },
|
|
113
|
+
{ label: "居右", value: 3 }
|
|
114
|
+
],
|
|
115
|
+
default: 2,
|
|
116
|
+
layout: "half"
|
|
117
|
+
// 占半行
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
prop: "TextWrap",
|
|
121
|
+
label: "文本换行",
|
|
122
|
+
type: "select",
|
|
123
|
+
options: [
|
|
124
|
+
{ label: "换行", value: 1 },
|
|
125
|
+
{ label: "不换行&省略", value: 2 },
|
|
126
|
+
{ label: "不换行&隐藏", value: 3 }
|
|
127
|
+
],
|
|
128
|
+
default: 1,
|
|
129
|
+
layout: "half"
|
|
130
|
+
// 占半行
|
|
131
|
+
}
|
|
132
|
+
]
|
|
133
|
+
},
|
|
134
|
+
barcode: {
|
|
135
|
+
x: 0,
|
|
136
|
+
y: 0,
|
|
137
|
+
width: 20,
|
|
138
|
+
height: 6,
|
|
139
|
+
rotation: 0,
|
|
140
|
+
FieldName: "goodsSn",
|
|
141
|
+
BarcodeValue: "1234567890",
|
|
142
|
+
CodeType: "128Auto",
|
|
143
|
+
AlignJustify: 0,
|
|
144
|
+
LineColor: "#000000",
|
|
145
|
+
propertyPanel: [
|
|
146
|
+
{
|
|
147
|
+
prop: "FieldName",
|
|
148
|
+
label: "字段名称",
|
|
149
|
+
type: "select",
|
|
150
|
+
optionsKey: "fields",
|
|
151
|
+
default: "goodsSn",
|
|
152
|
+
layout: "full"
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
prop: "BarcodeValue",
|
|
156
|
+
label: "测试数据",
|
|
157
|
+
type: "text",
|
|
158
|
+
default: "1234567890"
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
prop: "CodeType",
|
|
162
|
+
label: "条码类型",
|
|
163
|
+
type: "select",
|
|
164
|
+
options: [
|
|
165
|
+
{ label: "CODE128", value: "128Auto", compValue: "CODE128" },
|
|
166
|
+
{ label: "CODE39", value: "Code39", compValue: "CODE39" },
|
|
167
|
+
{ label: "EAN13", value: "EAN13", compValue: "EAN13" }
|
|
168
|
+
],
|
|
169
|
+
hide: !0,
|
|
170
|
+
default: "128Auto"
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
prop: "AlignJustify",
|
|
174
|
+
label: "对齐方式",
|
|
175
|
+
type: "select",
|
|
176
|
+
options: [
|
|
177
|
+
{ label: "两端对齐", value: 0 },
|
|
178
|
+
{ label: "左", value: 1 },
|
|
179
|
+
{ label: "中", value: 2 },
|
|
180
|
+
{ label: "右", value: 3 }
|
|
181
|
+
],
|
|
182
|
+
hide: !0,
|
|
183
|
+
default: 0
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
prop: "LineColor",
|
|
187
|
+
label: "条形码颜色",
|
|
188
|
+
type: "color",
|
|
189
|
+
hide: !0,
|
|
190
|
+
default: "#000000"
|
|
191
|
+
}
|
|
192
|
+
]
|
|
193
|
+
},
|
|
194
|
+
qrcode: {
|
|
195
|
+
x: 0,
|
|
196
|
+
y: 0,
|
|
197
|
+
width: 10,
|
|
198
|
+
height: 10,
|
|
199
|
+
rotation: 0,
|
|
200
|
+
FieldName: "",
|
|
201
|
+
QRCodeValue: "FB-GOLD",
|
|
202
|
+
QRCodeVersion: 7,
|
|
203
|
+
QRCodeErrorLevel: "Q",
|
|
204
|
+
QRCodeEncodeMode: "B",
|
|
205
|
+
QRCodeForeground: "#000000",
|
|
206
|
+
QRCodeBackground: "transparent",
|
|
207
|
+
LockAspectRatio: !0,
|
|
208
|
+
lockAspectRatio: !0,
|
|
209
|
+
propertyPanel: [
|
|
210
|
+
{
|
|
211
|
+
prop: "FieldName",
|
|
212
|
+
label: "字段名称",
|
|
213
|
+
type: "select",
|
|
214
|
+
optionsKey: "fields",
|
|
215
|
+
default: "",
|
|
216
|
+
layout: "full"
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
prop: "QRCodeValue",
|
|
220
|
+
label: "测试数据",
|
|
221
|
+
type: "text",
|
|
222
|
+
default: "FB-GOLD"
|
|
223
|
+
},
|
|
224
|
+
{
|
|
225
|
+
prop: "QRCodeVersion",
|
|
226
|
+
label: "二维码版本",
|
|
227
|
+
type: "number",
|
|
228
|
+
min: 1,
|
|
229
|
+
max: 40,
|
|
230
|
+
hide: !0,
|
|
231
|
+
default: 7
|
|
232
|
+
},
|
|
233
|
+
{
|
|
234
|
+
prop: "QRCodeErrorLevel",
|
|
235
|
+
label: "纠错级别",
|
|
236
|
+
type: "select",
|
|
237
|
+
options: [
|
|
238
|
+
{ label: "L (7%)", value: "L" },
|
|
239
|
+
{ label: "M (15%)", value: "M" },
|
|
240
|
+
{ label: "Q (25%)", value: "Q" },
|
|
241
|
+
{ label: "H (30%)", value: "H" }
|
|
242
|
+
],
|
|
243
|
+
hide: !0,
|
|
244
|
+
default: "Q"
|
|
245
|
+
},
|
|
246
|
+
{
|
|
247
|
+
prop: "QRCodeEncodeMode",
|
|
248
|
+
label: "编码模式",
|
|
249
|
+
type: "select",
|
|
250
|
+
options: [
|
|
251
|
+
{ label: "数字", value: "N" },
|
|
252
|
+
{ label: "二进制或汉语", value: "B" },
|
|
253
|
+
{ label: "英文字母", value: "A" }
|
|
254
|
+
],
|
|
255
|
+
hide: !0,
|
|
256
|
+
default: "B"
|
|
257
|
+
},
|
|
258
|
+
{
|
|
259
|
+
prop: "QRCodeForeground",
|
|
260
|
+
label: "前景色",
|
|
261
|
+
type: "color",
|
|
262
|
+
hide: !0,
|
|
263
|
+
default: "#000000"
|
|
264
|
+
},
|
|
265
|
+
{
|
|
266
|
+
prop: "QRCodeBackground",
|
|
267
|
+
label: "背景景色",
|
|
268
|
+
type: "color",
|
|
269
|
+
hide: !0,
|
|
270
|
+
default: "transparent"
|
|
271
|
+
}
|
|
272
|
+
]
|
|
273
|
+
}
|
|
274
|
+
};
|
|
275
|
+
export {
|
|
276
|
+
e as default
|
|
277
|
+
};
|