@longhongguo/form-create-ant-design-vue 3.3.28 → 3.3.31
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/dist/form-create.css +160 -14
- package/dist/form-create.esm.css +160 -14
- package/dist/form-create.esm.js +2 -2
- package/dist/form-create.esm.js.map +1 -1
- package/dist/form-create.js +2 -2
- package/dist/form-create.js.map +1 -1
- package/package.json +1 -1
- package/src/components/CusStoreSelect/index.vue +407 -402
- package/src/components/CusUserSelect/index.vue +5 -0
- package/src/core/manager.js +18 -0
- package/src/parsers/flex.js +5 -1
- package/src/parsers/select.js +45 -45
- package/src/parsers/space.js +8 -1
- package/src/style/index.css +160 -14
package/src/core/manager.js
CHANGED
|
@@ -84,6 +84,24 @@ export default {
|
|
|
84
84
|
)
|
|
85
85
|
})
|
|
86
86
|
|
|
87
|
+
// 应用 componentStyle 到组件元素本身（不受父容器影响）
|
|
88
|
+
// 注意：这个样式需要在 parser.mergeProp 之后应用才能确保不被覆盖
|
|
89
|
+
// 但由于执行顺序限制，我们先在这里设置，parser 应该使用合并方式而不是覆盖
|
|
90
|
+
if (ctx.rule.componentStyle && typeof ctx.rule.componentStyle === 'object') {
|
|
91
|
+
// 确保 props 存在
|
|
92
|
+
if (!ctx.prop.props) {
|
|
93
|
+
ctx.prop.props = {}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
// 将 componentStyle 合并到 props.style，直接应用到组件元素本身
|
|
97
|
+
// 这样即使 parser 使用 {...existing, ...new} 的方式合并，componentStyle 也会被保留
|
|
98
|
+
const existingStyle = ctx.prop.props.style || {}
|
|
99
|
+
ctx.prop.props.style = {
|
|
100
|
+
...existingStyle,
|
|
101
|
+
...ctx.rule.componentStyle
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
87
105
|
// 预览模式下：对 upload 组件设置 disabled
|
|
88
106
|
// wangEditor 组件使用只读模式（readOnly），允许复制和点击链接
|
|
89
107
|
// textarea 组件使用只读模式（readOnly），允许复制和自适应高度
|
package/src/parsers/flex.js
CHANGED
|
@@ -97,12 +97,16 @@ export default {
|
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
// 同时也合并到 props.style，确保样式生效
|
|
100
|
+
// 注意：保留 componentStyle（如果存在），它应该在最后应用，优先级最高
|
|
100
101
|
if (!ctx.prop.props) {
|
|
101
102
|
ctx.prop.props = {}
|
|
102
103
|
}
|
|
104
|
+
const componentStyle = ctx.rule.componentStyle || {}
|
|
103
105
|
ctx.prop.props.style = {
|
|
104
106
|
...existingPropsStyle,
|
|
105
|
-
...flexStyles
|
|
107
|
+
...flexStyles,
|
|
108
|
+
// componentStyle 最后合并，确保优先级最高
|
|
109
|
+
...componentStyle
|
|
106
110
|
}
|
|
107
111
|
|
|
108
112
|
// 确保 children 存在
|
package/src/parsers/select.js
CHANGED
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
import checkbox from './checkbox'
|
|
2
|
-
import { hasProperty } from '@form-create/utils/lib/type'
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
...checkbox,
|
|
6
|
-
name: 'select',
|
|
7
|
-
mergeProp(ctx) {
|
|
8
|
-
const props = ctx.prop.props
|
|
9
|
-
if (!hasProperty(props, 'options')) props.options = ctx.prop.options || []
|
|
10
|
-
|
|
11
|
-
// 检测 loading 状态：从 effectData('fetch') 中获取 loading 状态
|
|
12
|
-
const fetchData = ctx.effectData('fetch')
|
|
13
|
-
const isLoading = fetchData && fetchData.loading === true
|
|
14
|
-
|
|
15
|
-
// 如果正在加载，设置 disabled 和 loading
|
|
16
|
-
if (isLoading) {
|
|
17
|
-
props.disabled = true
|
|
18
|
-
props.loading = true
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
// readOnly 属性的处理：如果设置了 readOnly，强制设置 disabled = true
|
|
22
|
-
// 从 rule.props 或 ctx.prop.props 中读取 readOnly
|
|
23
|
-
const isReadOnly =
|
|
24
|
-
ctx.rule.props?.readOnly === true || props.readOnly === true
|
|
25
|
-
if (isReadOnly) {
|
|
26
|
-
props.disabled = true
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
|
-
render(children, ctx) {
|
|
30
|
-
// 检测 loading 状态（与 mergeProp 中的逻辑保持一致）
|
|
31
|
-
const fetchData = ctx.effectData('fetch')
|
|
32
|
-
const isLoading = fetchData && fetchData.loading === true
|
|
33
|
-
|
|
34
|
-
// 如果有 loading 插槽且正在加载，将 loading 插槽传递给组件的 notFoundContent 插槽
|
|
35
|
-
if (isLoading && children.loading) {
|
|
36
|
-
// 将 loading 插槽合并到 children 中，作为 notFoundContent
|
|
37
|
-
const newChildren = { ...children }
|
|
38
|
-
newChildren.notFoundContent = children.loading
|
|
39
|
-
return ctx.$render.defaultRender(ctx, newChildren)
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
// 调用默认渲染
|
|
43
|
-
return ctx.$render.defaultRender(ctx, children)
|
|
44
|
-
}
|
|
45
|
-
}
|
|
1
|
+
import checkbox from './checkbox'
|
|
2
|
+
import { hasProperty } from '@form-create/utils/lib/type'
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
...checkbox,
|
|
6
|
+
name: 'select',
|
|
7
|
+
mergeProp(ctx) {
|
|
8
|
+
const props = ctx.prop.props
|
|
9
|
+
if (!hasProperty(props, 'options')) props.options = ctx.prop.options || []
|
|
10
|
+
|
|
11
|
+
// 检测 loading 状态：从 effectData('fetch') 中获取 loading 状态
|
|
12
|
+
const fetchData = ctx.effectData('fetch')
|
|
13
|
+
const isLoading = fetchData && fetchData.loading === true
|
|
14
|
+
|
|
15
|
+
// 如果正在加载，设置 disabled 和 loading
|
|
16
|
+
if (isLoading) {
|
|
17
|
+
props.disabled = true
|
|
18
|
+
props.loading = true
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// readOnly 属性的处理：如果设置了 readOnly，强制设置 disabled = true
|
|
22
|
+
// 从 rule.props 或 ctx.prop.props 中读取 readOnly
|
|
23
|
+
const isReadOnly =
|
|
24
|
+
ctx.rule.props?.readOnly === true || props.readOnly === true
|
|
25
|
+
if (isReadOnly) {
|
|
26
|
+
props.disabled = true
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
render(children, ctx) {
|
|
30
|
+
// 检测 loading 状态（与 mergeProp 中的逻辑保持一致）
|
|
31
|
+
const fetchData = ctx.effectData('fetch')
|
|
32
|
+
const isLoading = fetchData && fetchData.loading === true
|
|
33
|
+
|
|
34
|
+
// 如果有 loading 插槽且正在加载，将 loading 插槽传递给组件的 notFoundContent 插槽
|
|
35
|
+
if (isLoading && children.loading) {
|
|
36
|
+
// 将 loading 插槽合并到 children 中，作为 notFoundContent
|
|
37
|
+
const newChildren = { ...children }
|
|
38
|
+
newChildren.notFoundContent = children.loading
|
|
39
|
+
return ctx.$render.defaultRender(ctx, newChildren)
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// 调用默认渲染
|
|
43
|
+
return ctx.$render.defaultRender(ctx, children)
|
|
44
|
+
}
|
|
45
|
+
}
|
package/src/parsers/space.js
CHANGED
|
@@ -37,7 +37,14 @@ export default {
|
|
|
37
37
|
if (!ctx.prop.props.style) {
|
|
38
38
|
ctx.prop.props.style = {}
|
|
39
39
|
}
|
|
40
|
-
|
|
40
|
+
// 保留 componentStyle（如果存在），它应该在最后应用，优先级最高
|
|
41
|
+
const componentStyle = ctx.rule.componentStyle || {}
|
|
42
|
+
ctx.prop.props.style = {
|
|
43
|
+
...ctx.prop.props.style,
|
|
44
|
+
...spaceStyles,
|
|
45
|
+
// componentStyle 最后合并，确保优先级最高
|
|
46
|
+
...componentStyle
|
|
47
|
+
}
|
|
41
48
|
|
|
42
49
|
// 确保 children 存在
|
|
43
50
|
if (!ctx.rule.children) {
|
package/src/style/index.css
CHANGED
|
@@ -165,16 +165,96 @@ textarea[readonly].ant-input {
|
|
|
165
165
|
pointer-events: none !important;
|
|
166
166
|
}
|
|
167
167
|
|
|
168
|
-
/*
|
|
169
|
-
.form-create.is-preview
|
|
170
|
-
pointer-events: auto !important;
|
|
168
|
+
/* 预览模式：允许所有文本选择和复制 */
|
|
169
|
+
.form-create.is-preview * {
|
|
171
170
|
user-select: text !important;
|
|
172
171
|
-webkit-user-select: text !important;
|
|
173
172
|
-moz-user-select: text !important;
|
|
174
173
|
-ms-user-select: text !important;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
/* 预览模式：允许滚动容器滚动 */
|
|
177
|
+
.form-create.is-preview [style*="overflow"],
|
|
178
|
+
.form-create.is-preview .ant-table-body,
|
|
179
|
+
.form-create.is-preview .ant-table-tbody,
|
|
180
|
+
.form-create.is-preview .w-e-text-container,
|
|
181
|
+
.form-create.is-preview .w-e-text,
|
|
182
|
+
.form-create.is-preview [class*="scroll"],
|
|
183
|
+
.form-create.is-preview [class*="overflow"] {
|
|
184
|
+
pointer-events: auto !important;
|
|
185
|
+
overflow: auto !important;
|
|
186
|
+
overflow-x: auto !important;
|
|
187
|
+
overflow-y: auto !important;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
/* 预览模式：允许 textarea 交互（用于复制文本） */
|
|
191
|
+
.form-create.is-preview textarea.ant-input {
|
|
192
|
+
pointer-events: auto !important;
|
|
193
|
+
cursor: text !important;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
/* 预览模式：允许 input 文本选择和复制 */
|
|
197
|
+
.form-create.is-preview .ant-input,
|
|
198
|
+
.form-create.is-preview input.ant-input {
|
|
199
|
+
pointer-events: auto !important;
|
|
200
|
+
cursor: text !important;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/* 预览模式：允许 select 组件文本选择和复制 */
|
|
204
|
+
.form-create.is-preview .ant-select-selector,
|
|
205
|
+
.form-create.is-preview .ant-select-selection,
|
|
206
|
+
.form-create.is-preview .ant-select-selection-item,
|
|
207
|
+
.form-create.is-preview .ant-select-selection-placeholder,
|
|
208
|
+
.form-create.is-preview .ant-select-selection-item-content,
|
|
209
|
+
.form-create.is-preview .ant-select-selection-overflow,
|
|
210
|
+
.form-create.is-preview .ant-select-selection-overflow-item {
|
|
211
|
+
pointer-events: auto !important;
|
|
212
|
+
cursor: text !important;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
/* 预览模式：允许自定义 select 组件文本选择和复制 */
|
|
216
|
+
.form-create.is-preview .fc-cus-select-selector,
|
|
217
|
+
.form-create.is-preview .fc-cus-select-selection-item,
|
|
218
|
+
.form-create.is-preview .fc-cus-select-selection-placeholder,
|
|
219
|
+
.form-create.is-preview .fc-cus-select-selection-item-content {
|
|
220
|
+
pointer-events: auto !important;
|
|
175
221
|
cursor: text !important;
|
|
176
222
|
}
|
|
177
223
|
|
|
224
|
+
/* 预览模式：允许 tableForm 组件文本选择和复制 */
|
|
225
|
+
.form-create.is-preview ._fc-table-form,
|
|
226
|
+
.form-create.is-preview ._fc-table-form * {
|
|
227
|
+
pointer-events: auto !important;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
/* 预览模式：tableForm 中的选择列 checkbox 和操作列按钮保持不可交互 */
|
|
231
|
+
.form-create.is-preview ._fc-table-form ._fc-tf-select,
|
|
232
|
+
.form-create.is-preview ._fc-table-form ._fc-tf-select *,
|
|
233
|
+
.form-create.is-preview ._fc-table-form ._fc-tf-btn,
|
|
234
|
+
.form-create.is-preview ._fc-table-form ._fc-tf-btn *,
|
|
235
|
+
.form-create.is-preview ._fc-table-form ._fc-tf-head-select,
|
|
236
|
+
.form-create.is-preview ._fc-table-form ._fc-tf-head-select * {
|
|
237
|
+
pointer-events: none !important;
|
|
238
|
+
user-select: none !important;
|
|
239
|
+
-webkit-user-select: none !important;
|
|
240
|
+
-moz-user-select: none !important;
|
|
241
|
+
-ms-user-select: none !important;
|
|
242
|
+
cursor: default !important;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
/* 预览模式：允许按钮点击 */
|
|
246
|
+
.form-create.is-preview .ant-btn {
|
|
247
|
+
pointer-events: auto !important;
|
|
248
|
+
cursor: pointer !important;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
/* 预览模式：允许滚动条滚动（针对有滚动条的容器） */
|
|
252
|
+
.form-create.is-preview .ant-table-body,
|
|
253
|
+
.form-create.is-preview .ant-table-tbody,
|
|
254
|
+
.form-create.is-preview [style*="overflow"] {
|
|
255
|
+
pointer-events: auto !important;
|
|
256
|
+
}
|
|
257
|
+
|
|
178
258
|
/* 预览模式：允许富文本编辑器容器滚动 */
|
|
179
259
|
.form-create.is-preview .w-e-text-container {
|
|
180
260
|
pointer-events: auto !important;
|
|
@@ -271,23 +351,46 @@ textarea[readonly].ant-input {
|
|
|
271
351
|
.form-create.is-preview .ant-switch,
|
|
272
352
|
.form-create.is-preview .ant-slider,
|
|
273
353
|
.form-create.is-preview .ant-rate,
|
|
274
|
-
.form-create.is-preview .ant-upload
|
|
275
|
-
.form-create.is-preview .ant-btn {
|
|
354
|
+
.form-create.is-preview .ant-upload {
|
|
276
355
|
opacity: 1 !important;
|
|
277
356
|
color: inherit !important;
|
|
278
357
|
background-color: transparent !important;
|
|
279
358
|
}
|
|
280
359
|
|
|
360
|
+
/* 预览模式：按钮保持原有颜色，不覆盖 */
|
|
361
|
+
.form-create.is-preview .ant-btn {
|
|
362
|
+
opacity: 1 !important;
|
|
363
|
+
/* 不设置 color，保持按钮的原始颜色 */
|
|
364
|
+
/* 不设置 background-color，保持按钮的原始背景色 */
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
/* 预览模式和只读模式：设置按钮链接的颜色 */
|
|
368
|
+
.form-create.is-preview .ant-btn-link,
|
|
369
|
+
.ant-btn-link[readonly],
|
|
370
|
+
.ant-btn-link[readonly="true"] {
|
|
371
|
+
color: #1677ff !important;
|
|
372
|
+
}
|
|
373
|
+
|
|
281
374
|
/* 预览模式：CusSelect 组件保持正常外观，不置灰 */
|
|
282
375
|
.form-create.is-preview .fc-cus-select,
|
|
283
376
|
.form-create.is-preview .fc-cus-select-selector,
|
|
284
|
-
.form-create.is-preview .fc-cus-select-selection-item
|
|
285
|
-
.form-create.is-preview .fc-cus-select-selection-placeholder {
|
|
377
|
+
.form-create.is-preview .fc-cus-select-selection-item {
|
|
286
378
|
opacity: 1 !important;
|
|
287
379
|
color: inherit !important;
|
|
288
380
|
background-color: transparent !important;
|
|
289
381
|
}
|
|
290
382
|
|
|
383
|
+
/* 预览模式：隐藏 CusSelect 的占位符 */
|
|
384
|
+
.form-create.is-preview .fc-cus-select-selection-placeholder {
|
|
385
|
+
display: none !important;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
/* 只读模式：隐藏 CusSelect 的占位符 */
|
|
389
|
+
.fc-cus-select[readonly] .fc-cus-select-selection-placeholder,
|
|
390
|
+
.fc-cus-select[readonly="true"] .fc-cus-select-selection-placeholder {
|
|
391
|
+
display: none !important;
|
|
392
|
+
}
|
|
393
|
+
|
|
291
394
|
/* 预览模式：移除 CusSelect 选择器的边框 */
|
|
292
395
|
.form-create.is-preview .fc-cus-select-selector {
|
|
293
396
|
border: none !important;
|
|
@@ -377,14 +480,62 @@ textarea[readonly].ant-input {
|
|
|
377
480
|
|
|
378
481
|
/* 预览模式：防止选择器显示为禁用状态 */
|
|
379
482
|
.form-create.is-preview .ant-select-disabled .ant-select-selector,
|
|
380
|
-
/*
|
|
483
|
+
/* 只读模式：防止选择器显示为禁用状态，并允许文本选择 */
|
|
381
484
|
.ant-select-disabled .ant-select-selector {
|
|
382
485
|
opacity: 1 !important;
|
|
383
486
|
color: inherit !important;
|
|
384
487
|
background-color: transparent !important;
|
|
385
|
-
cursor:
|
|
488
|
+
cursor: text !important;
|
|
386
489
|
border: none !important;
|
|
387
490
|
box-shadow: none !important;
|
|
491
|
+
user-select: text !important;
|
|
492
|
+
-webkit-user-select: text !important;
|
|
493
|
+
-moz-user-select: text !important;
|
|
494
|
+
-ms-user-select: text !important;
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
/* 只读模式：允许所有文本选择和复制 */
|
|
498
|
+
.ant-input[readonly],
|
|
499
|
+
.ant-input[readonly] *,
|
|
500
|
+
.ant-textarea[readonly],
|
|
501
|
+
.ant-textarea[readonly] *,
|
|
502
|
+
.ant-select-disabled .ant-select-selector *,
|
|
503
|
+
.ant-select-disabled .ant-select-selection-item,
|
|
504
|
+
.ant-select-disabled .ant-select-selection-item-content {
|
|
505
|
+
user-select: text !important;
|
|
506
|
+
-webkit-user-select: text !important;
|
|
507
|
+
-moz-user-select: text !important;
|
|
508
|
+
-ms-user-select: text !important;
|
|
509
|
+
}
|
|
510
|
+
|
|
511
|
+
/* 只读模式：允许 disabled select 的多选选项选择和复制（需要 pointer-events） */
|
|
512
|
+
.ant-select-disabled .ant-select-selector,
|
|
513
|
+
.ant-select-disabled .ant-select-selection,
|
|
514
|
+
.ant-select-disabled .ant-select-selection-item,
|
|
515
|
+
.ant-select-disabled .ant-select-selection-item-content,
|
|
516
|
+
.ant-select-disabled .ant-select-selection-overflow,
|
|
517
|
+
.ant-select-disabled .ant-select-selection-overflow-item {
|
|
518
|
+
pointer-events: auto !important;
|
|
519
|
+
cursor: text !important;
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
/* 只读模式：防止 disabled select 的多选选项显示为灰色 */
|
|
523
|
+
.ant-select-disabled.ant-select-multiple .ant-select-selection-item {
|
|
524
|
+
opacity: 1 !important;
|
|
525
|
+
color: inherit !important;
|
|
526
|
+
background-color: #f0f0f0 !important;
|
|
527
|
+
border-color: #d9d9d9 !important;
|
|
528
|
+
cursor: text !important;
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
/* 预览模式：防止 disabled select 的多选选项显示为灰色，并允许文本选择 */
|
|
532
|
+
.form-create.is-preview .ant-select-disabled.ant-select-multiple .ant-select-selection-item {
|
|
533
|
+
opacity: 1 !important;
|
|
534
|
+
color: inherit !important;
|
|
535
|
+
background-color: #f0f0f0 !important;
|
|
536
|
+
border-color: #d9d9d9 !important;
|
|
537
|
+
cursor: text !important;
|
|
538
|
+
pointer-events: auto !important;
|
|
388
539
|
}
|
|
389
540
|
|
|
390
541
|
/* 预览模式：防止日期选择器显示为禁用状态 */
|
|
@@ -511,11 +662,6 @@ textarea[readonly].ant-input {
|
|
|
511
662
|
-ms-user-select: text !important;
|
|
512
663
|
}
|
|
513
664
|
|
|
514
|
-
/* 预览模式：禁用按钮点击 */
|
|
515
|
-
.form-create.is-preview .ant-btn {
|
|
516
|
-
pointer-events: none !important;
|
|
517
|
-
cursor: default !important;
|
|
518
|
-
}
|
|
519
665
|
|
|
520
666
|
/* 预览模式：禁用选择器下拉 */
|
|
521
667
|
.form-create.is-preview .ant-select-dropdown,
|