@longhongguo/form-create-ant-design-vue 3.3.2 → 3.3.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/dist/form-create.css +335 -0
- package/dist/form-create.esm.css +335 -0
- 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 +2 -2
- package/src/core/api.js +26 -1
- package/src/core/manager.js +10 -0
- package/src/parsers/accTable.js +51 -19
- package/src/parsers/cascader.js +69 -18
- package/src/parsers/text.js +1 -7
- package/src/style/index.css +335 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@longhongguo/form-create-ant-design-vue",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.06",
|
|
4
4
|
"description": "AntDesignVue版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。",
|
|
5
5
|
"main": "./dist/form-create.min.js",
|
|
6
6
|
"module": "./dist/form-create.esm.js",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"@form-create/core": "^3.2.33",
|
|
56
56
|
"@form-create/utils": "^3.2.31",
|
|
57
57
|
"@longhongguo/component-antdv-upload": "^3.2.41",
|
|
58
|
-
"@longhongguo/form-create-core": "^3.2.
|
|
58
|
+
"@longhongguo/form-create-core": "^3.2.63",
|
|
59
59
|
"moment": "^2.30.1"
|
|
60
60
|
},
|
|
61
61
|
"publishConfig": {
|
package/src/core/api.js
CHANGED
|
@@ -292,6 +292,31 @@ export default function extendApi(api, h) {
|
|
|
292
292
|
* }
|
|
293
293
|
*/
|
|
294
294
|
$validator: validator,
|
|
295
|
-
$moment: moment
|
|
295
|
+
$moment: moment,
|
|
296
|
+
/**
|
|
297
|
+
* 启用或禁用预览模式
|
|
298
|
+
* 预览模式下：
|
|
299
|
+
* - 表单 form-item 间距调小
|
|
300
|
+
* - 组件边框不展示
|
|
301
|
+
* - 字数限制等提示信息不展示
|
|
302
|
+
* - 必填标记不展示
|
|
303
|
+
*
|
|
304
|
+
* @param {boolean} enabled - 是否启用预览模式，默认为 true
|
|
305
|
+
* @returns {void}
|
|
306
|
+
*
|
|
307
|
+
* @example
|
|
308
|
+
* // 启用预览模式
|
|
309
|
+
* this.api.previewMode(true)
|
|
310
|
+
*
|
|
311
|
+
* @example
|
|
312
|
+
* // 禁用预览模式
|
|
313
|
+
* this.api.previewMode(false)
|
|
314
|
+
*/
|
|
315
|
+
previewMode(enabled = true) {
|
|
316
|
+
// 更新 options 中的 preview 配置
|
|
317
|
+
api.updateOptions({ preview: !!enabled })
|
|
318
|
+
// 触发刷新，使样式生效
|
|
319
|
+
api.refresh()
|
|
320
|
+
}
|
|
296
321
|
}
|
|
297
322
|
}
|
package/src/core/manager.js
CHANGED
|
@@ -84,6 +84,16 @@ export default {
|
|
|
84
84
|
)
|
|
85
85
|
})
|
|
86
86
|
|
|
87
|
+
// 预览模式下：对 upload 和 wangEditor 组件设置 disabled
|
|
88
|
+
// CusSelect 相关组件使用预览模式（通过 CSS 阻止交互，不置灰）
|
|
89
|
+
if (this.$handle.preview === true) {
|
|
90
|
+
if (ctx.rule.type === 'upload' || ctx.rule.type === 'fcEditor') {
|
|
91
|
+
if (ctx.prop.props) {
|
|
92
|
+
ctx.prop.props.disabled = true
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
87
97
|
// 检查父容器是否是 flex 或 space 类型，如果是，自动设置 col: false 避免被 a-col 包装
|
|
88
98
|
// 需要在合并完 col 后再检查，确保能覆盖默认值
|
|
89
99
|
if (ctx.parent && ctx.parent.rule) {
|
package/src/parsers/accTable.js
CHANGED
|
@@ -116,29 +116,61 @@ export default {
|
|
|
116
116
|
allRuleProps: Object.keys(rule.props || {})
|
|
117
117
|
})
|
|
118
118
|
|
|
119
|
-
//
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
columns = parsed
|
|
128
|
-
}
|
|
129
|
-
} catch (e) {
|
|
130
|
-
console.warn('accTable columns parse error:', e)
|
|
131
|
-
columns = []
|
|
119
|
+
// 处理列配置 - 每次都要更新，确保 width 等属性变化时能生效
|
|
120
|
+
let columns = rule.props?.columns || []
|
|
121
|
+
// Struct 组件返回的是数组对象，直接使用；如果是字符串，尝试解析为 JSON（向后兼容）
|
|
122
|
+
if (typeof columns === 'string') {
|
|
123
|
+
try {
|
|
124
|
+
const parsed = JSON.parse(columns)
|
|
125
|
+
if (Array.isArray(parsed)) {
|
|
126
|
+
columns = parsed
|
|
132
127
|
}
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
if (!Array.isArray(columns)) {
|
|
128
|
+
} catch (e) {
|
|
129
|
+
console.warn('accTable columns parse error:', e)
|
|
136
130
|
columns = []
|
|
137
131
|
}
|
|
138
|
-
// 过滤掉 hidden 为 true 的列
|
|
139
|
-
columns = columns.filter((col) => !col.hidden)
|
|
140
|
-
props.columns = columns
|
|
141
132
|
}
|
|
133
|
+
// 确保 columns 是数组
|
|
134
|
+
if (!Array.isArray(columns)) {
|
|
135
|
+
columns = []
|
|
136
|
+
}
|
|
137
|
+
// 过滤掉 hidden 为 true 的列，同时确保所有其他属性（如 width、align、fixed 等）都被保留
|
|
138
|
+
const processedColumns = columns
|
|
139
|
+
.filter((col) => !col || !col.hidden)
|
|
140
|
+
.map((col) => {
|
|
141
|
+
// 创建列对象的副本，确保所有属性都被保留（包括 width、align、fixed 等）
|
|
142
|
+
const column = { ...col }
|
|
143
|
+
|
|
144
|
+
// 处理 width 属性：确保它能够正确传递
|
|
145
|
+
// Ant Design Vue Table 支持 width 为 number 或 string
|
|
146
|
+
// 如果 width 是纯数字字符串（如 "100"），可以转换为数字以便更好的性能
|
|
147
|
+
// 如果 width 是带单位的字符串（如 "100px"），保持字符串
|
|
148
|
+
if (
|
|
149
|
+
column.width !== undefined &&
|
|
150
|
+
column.width !== null &&
|
|
151
|
+
column.width !== ''
|
|
152
|
+
) {
|
|
153
|
+
if (typeof column.width === 'string') {
|
|
154
|
+
// 如果是纯数字字符串，转换为数字
|
|
155
|
+
const numValue = Number(column.width)
|
|
156
|
+
if (
|
|
157
|
+
!isNaN(numValue) &&
|
|
158
|
+
isFinite(numValue) &&
|
|
159
|
+
column.width.trim() === String(numValue)
|
|
160
|
+
) {
|
|
161
|
+
column.width = numValue
|
|
162
|
+
}
|
|
163
|
+
// 如果不是纯数字（如 "100px"），保持字符串
|
|
164
|
+
}
|
|
165
|
+
// 如果已经是数字，直接使用
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
// 确保其他列属性也被保留（align、fixed、title、dataIndex 等）
|
|
169
|
+
return column
|
|
170
|
+
})
|
|
171
|
+
|
|
172
|
+
// 始终更新 props.columns，确保列配置变化（包括 width）时能生效
|
|
173
|
+
props.columns = processedColumns
|
|
142
174
|
|
|
143
175
|
// 初始化数据源
|
|
144
176
|
if (!hasProperty(props, 'dataSource')) {
|
package/src/parsers/cascader.js
CHANGED
|
@@ -73,26 +73,77 @@ export default {
|
|
|
73
73
|
// 这样可以触发 Vue 的响应式更新，即使对象属性被修改了
|
|
74
74
|
const currentOptions = props.options || []
|
|
75
75
|
|
|
76
|
-
//
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
item
|
|
83
|
-
item
|
|
84
|
-
|
|
76
|
+
// 递归查找并更新选项的函数
|
|
77
|
+
// 通过 value 路径来查找，避免引用问题
|
|
78
|
+
const updateOptionRecursive = (optionsList, pathValues, depth, newChildren) => {
|
|
79
|
+
if (!pathValues || pathValues.length === 0) {
|
|
80
|
+
// 如果没有路径，直接返回深拷贝的选项
|
|
81
|
+
return optionsList.map(item => ({
|
|
82
|
+
...item,
|
|
83
|
+
children: item.children ? item.children.map(child => ({ ...child })) : undefined
|
|
84
|
+
}))
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
const currentValue = pathValues[depth]
|
|
88
|
+
const isLast = depth === pathValues.length - 1
|
|
89
|
+
|
|
90
|
+
return optionsList.map(item => {
|
|
91
|
+
const newItem = { ...item }
|
|
92
|
+
|
|
93
|
+
// 如果当前项匹配路径的当前层级值
|
|
94
|
+
if ((item.value !== undefined && item.value === currentValue) ||
|
|
95
|
+
(item.id !== undefined && item.id === currentValue)) {
|
|
96
|
+
if (isLast) {
|
|
97
|
+
// 是最后一个值（目标项），更新 children
|
|
98
|
+
newItem.children = newChildren ? [...newChildren] : undefined
|
|
99
|
+
newItem.loading = false
|
|
100
|
+
// 保持其他属性不变，但深拷贝 children
|
|
101
|
+
return newItem
|
|
102
|
+
} else {
|
|
103
|
+
// 不是最后一个，需要递归更新其 children
|
|
104
|
+
if (item.children && item.children.length > 0) {
|
|
105
|
+
// 递归更新子项
|
|
106
|
+
newItem.children = updateOptionRecursive(
|
|
107
|
+
item.children,
|
|
108
|
+
pathValues,
|
|
109
|
+
depth + 1,
|
|
110
|
+
newChildren
|
|
111
|
+
)
|
|
112
|
+
} else {
|
|
113
|
+
// 如果没有 children，保持 undefined
|
|
114
|
+
newItem.children = undefined
|
|
115
|
+
}
|
|
116
|
+
return newItem
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// 不匹配的项，也需要递归处理其 children（以防路径在其他分支）
|
|
121
|
+
if (item.children && item.children.length > 0) {
|
|
122
|
+
newItem.children = updateOptionRecursive(
|
|
123
|
+
item.children,
|
|
124
|
+
pathValues,
|
|
125
|
+
depth,
|
|
126
|
+
newChildren
|
|
127
|
+
)
|
|
128
|
+
} else {
|
|
129
|
+
// 如果没有 children，深拷贝基本结构
|
|
130
|
+
newItem.children = undefined
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
return newItem
|
|
134
|
+
})
|
|
85
135
|
}
|
|
86
136
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
137
|
+
// 从 selectedOptions 中提取 value 路径
|
|
138
|
+
const pathValues = selectedOptions.map(opt => opt.value || opt.id)
|
|
139
|
+
|
|
140
|
+
// 使用递归函数更新选项（从第0层开始）
|
|
141
|
+
const newOptions = updateOptionRecursive(
|
|
142
|
+
currentOptions,
|
|
143
|
+
pathValues,
|
|
144
|
+
0,
|
|
145
|
+
targetOption ? targetOption.children : undefined
|
|
146
|
+
)
|
|
96
147
|
|
|
97
148
|
// 完全按照 effect.fetch 的方式：使用 deepSet 在响应式对象上设置值
|
|
98
149
|
// effect.fetch 使用: deepSet(inject.getProp(), 'props.options', val)
|
package/src/parsers/text.js
CHANGED
|
@@ -216,12 +216,8 @@ export default {
|
|
|
216
216
|
}
|
|
217
217
|
|
|
218
218
|
// 确保 children 存在（如果没有设置，默认为空数组）
|
|
219
|
-
|
|
220
|
-
if (!ctx.rule.children || !Array.isArray(ctx.rule.children)) {
|
|
219
|
+
if (!ctx.rule.children) {
|
|
221
220
|
ctx.rule.children = []
|
|
222
|
-
} else {
|
|
223
|
-
// 如果 children 已经存在，创建一个新的数组副本，避免共享引用
|
|
224
|
-
ctx.rule.children = [...ctx.rule.children]
|
|
225
221
|
}
|
|
226
222
|
|
|
227
223
|
// 对于动态绑定的情况，初始化时设置一个占位符，确保组件能被渲染
|
|
@@ -241,11 +237,9 @@ export default {
|
|
|
241
237
|
if (bindMode === 'template') {
|
|
242
238
|
// template 模式下，等待 loadData 执行后更新
|
|
243
239
|
// 但为了确保组件能渲染，至少设置一个空字符串
|
|
244
|
-
// 关键：每次创建新数组，确保不共享引用
|
|
245
240
|
ctx.rule.children = ['']
|
|
246
241
|
} else {
|
|
247
242
|
// field 模式下，设置一个空格字符串作为占位符
|
|
248
|
-
// 关键：每次创建新数组，确保不共享引用
|
|
249
243
|
ctx.rule.children = [' ']
|
|
250
244
|
}
|
|
251
245
|
}
|
package/src/style/index.css
CHANGED
|
@@ -26,6 +26,341 @@
|
|
|
26
26
|
display: none !important;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
+
/* 预览模式样式增强 */
|
|
30
|
+
|
|
31
|
+
.form-create.is-preview .ant-form-item {
|
|
32
|
+
margin-bottom: 8px !important;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.form-create.is-preview .form-create .ant-form-item {
|
|
36
|
+
margin-bottom: 8px !important;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.form-create.is-preview .ant-form-item.ant-form-item-with-help {
|
|
40
|
+
margin-bottom: 4px !important;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.form-create.is-preview
|
|
44
|
+
.form-create
|
|
45
|
+
.ant-form-item
|
|
46
|
+
.ant-form-item.ant-form-item-with-help {
|
|
47
|
+
margin-bottom: -8px !important;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* 移除组件边框 */
|
|
51
|
+
.form-create.is-preview .ant-input,
|
|
52
|
+
.form-create.is-preview .ant-input-number,
|
|
53
|
+
.form-create.is-preview .ant-select-selector,
|
|
54
|
+
.form-create.is-preview .ant-picker,
|
|
55
|
+
.form-create.is-preview .ant-cascader-picker,
|
|
56
|
+
.form-create.is-preview .ant-input-password,
|
|
57
|
+
.form-create.is-preview .ant-textarea,
|
|
58
|
+
.form-create.is-preview .ant-upload,
|
|
59
|
+
.form-create.is-preview .ant-upload-list,
|
|
60
|
+
.form-create.is-preview .ant-upload-list-item {
|
|
61
|
+
border: none !important;
|
|
62
|
+
box-shadow: none !important;
|
|
63
|
+
background: transparent !important;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.form-create.is-preview .ant-input:focus,
|
|
67
|
+
.form-create.is-preview .ant-input-number:focus,
|
|
68
|
+
.form-create.is-preview .ant-select-focused .ant-select-selector,
|
|
69
|
+
.form-create.is-preview .ant-picker:focus,
|
|
70
|
+
.form-create.is-preview .ant-cascader-picker:focus,
|
|
71
|
+
.form-create.is-preview .ant-input-password:focus,
|
|
72
|
+
.form-create.is-preview .ant-textarea:focus {
|
|
73
|
+
border: none !important;
|
|
74
|
+
box-shadow: none !important;
|
|
75
|
+
outline: none !important;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.form-create.is-preview .ant-input:hover,
|
|
79
|
+
.form-create.is-preview .ant-input-number:hover,
|
|
80
|
+
.form-create.is-preview .ant-select:hover .ant-select-selector,
|
|
81
|
+
.form-create.is-preview .ant-picker:hover,
|
|
82
|
+
.form-create.is-preview .ant-cascader-picker:hover,
|
|
83
|
+
.form-create.is-preview .ant-input-password:hover,
|
|
84
|
+
.form-create.is-preview .ant-textarea:hover {
|
|
85
|
+
border: none !important;
|
|
86
|
+
box-shadow: none !important;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* 隐藏字数限制等提示信息 */
|
|
90
|
+
.form-create.is-preview .ant-input-character-count,
|
|
91
|
+
.form-create.is-preview .ant-textarea-character-count,
|
|
92
|
+
.form-create.is-preview .ant-form-item-explain,
|
|
93
|
+
.form-create.is-preview .ant-form-item-extra,
|
|
94
|
+
.form-create.is-preview .ant-form-item-feedback-icon,
|
|
95
|
+
.form-create.is-preview
|
|
96
|
+
.ant-form-item-has-feedback
|
|
97
|
+
.ant-form-item-children-icon {
|
|
98
|
+
display: none !important;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* 隐藏必填标记 */
|
|
102
|
+
.form-create.is-preview
|
|
103
|
+
.ant-form-item-label
|
|
104
|
+
> label.ant-form-item-required::before,
|
|
105
|
+
.form-create.is-preview label.ant-form-item-required::before {
|
|
106
|
+
display: none !important;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* 隐藏帮助图标和提示 */
|
|
110
|
+
.form-create.is-preview .ant-form-item-label .anticon,
|
|
111
|
+
.form-create.is-preview .ant-form-item-label .fc-icon {
|
|
112
|
+
display: none !important;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* 预览模式：禁用所有交互 */
|
|
116
|
+
.form-create.is-preview * {
|
|
117
|
+
pointer-events: none !important;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* 预览模式：允许富文本编辑器容器滚动 */
|
|
121
|
+
.form-create.is-preview .w-e-text-container {
|
|
122
|
+
pointer-events: auto !important;
|
|
123
|
+
overflow-y: auto !important;
|
|
124
|
+
overflow-x: hidden !important;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.form-create.is-preview .w-e-text {
|
|
128
|
+
pointer-events: auto !important;
|
|
129
|
+
overflow-y: auto !important;
|
|
130
|
+
overflow-x: hidden !important;
|
|
131
|
+
cursor: default !important;
|
|
132
|
+
/* 确保可以滚动 */
|
|
133
|
+
-webkit-overflow-scrolling: touch !important;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/* 预览模式：允许 upload 组件的预览功能（整个列表项可以点击预览） */
|
|
137
|
+
.form-create.is-preview .ant-upload-list-item {
|
|
138
|
+
pointer-events: auto !important;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
/* 预览模式：允许 upload 组件中的预览相关元素 */
|
|
142
|
+
.form-create.is-preview .ant-upload-list-item-thumbnail,
|
|
143
|
+
.form-create.is-preview .ant-upload-list-item-thumbnail *,
|
|
144
|
+
.form-create.is-preview .ant-upload-list-item-name,
|
|
145
|
+
.form-create.is-preview .ant-upload-list-item-preview,
|
|
146
|
+
.form-create.is-preview .ant-upload-list-item-preview-icon,
|
|
147
|
+
.form-create.is-preview .ant-upload-list-item-actions-preview,
|
|
148
|
+
.form-create.is-preview .ant-upload-list-item-actions .anticon-eye,
|
|
149
|
+
.form-create.is-preview .ant-upload-list-item-info,
|
|
150
|
+
.form-create.is-preview .ant-upload-list-item-info > span,
|
|
151
|
+
.form-create.is-preview
|
|
152
|
+
.ant-upload-picture-card
|
|
153
|
+
.ant-upload-list-item-thumbnail,
|
|
154
|
+
.form-create.is-preview
|
|
155
|
+
.ant-upload-picture-card
|
|
156
|
+
.ant-upload-list-item-thumbnail
|
|
157
|
+
* {
|
|
158
|
+
pointer-events: auto !important;
|
|
159
|
+
cursor: pointer !important;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/* 预览模式：允许 image 组件的预览功能 */
|
|
163
|
+
.form-create.is-preview .ant-image,
|
|
164
|
+
.form-create.is-preview .ant-image-img,
|
|
165
|
+
.form-create.is-preview .ant-image-mask,
|
|
166
|
+
.form-create.is-preview .ant-image-mask-info {
|
|
167
|
+
pointer-events: auto !important;
|
|
168
|
+
cursor: pointer !important;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
/* 预览模式：允许图片预览弹窗可以交互 */
|
|
172
|
+
.form-create.is-preview .ant-modal,
|
|
173
|
+
.form-create.is-preview .ant-modal-wrap,
|
|
174
|
+
.form-create.is-preview .ant-modal-mask,
|
|
175
|
+
.form-create.is-preview .ant-modal-content,
|
|
176
|
+
.form-create.is-preview .ant-modal-close,
|
|
177
|
+
.form-create.is-preview .ant-modal-header,
|
|
178
|
+
.form-create.is-preview .ant-modal-body,
|
|
179
|
+
.form-create.is-preview .ant-modal-footer {
|
|
180
|
+
pointer-events: auto !important;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
/* 预览模式：隐藏 upload 组件的上传按钮 */
|
|
184
|
+
.form-create.is-preview .ant-upload-select,
|
|
185
|
+
.form-create.is-preview .ant-upload-select-picture-card {
|
|
186
|
+
display: none !important;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
/* 预览模式：阻止 upload 组件中的删除和其他操作按钮（优先级更高） */
|
|
190
|
+
.form-create.is-preview .ant-upload-list-item-actions-delete,
|
|
191
|
+
.form-create.is-preview .ant-upload-list-item-actions-upload,
|
|
192
|
+
.form-create.is-preview .ant-upload-list-item-actions-download,
|
|
193
|
+
.form-create.is-preview .ant-upload-list-item-actions .anticon-delete,
|
|
194
|
+
.form-create.is-preview .ant-upload-list-item-actions .anticon-close,
|
|
195
|
+
.form-create.is-preview .ant-upload-list-item-actions-item .anticon-delete,
|
|
196
|
+
.form-create.is-preview .ant-upload-list-item-actions-item-delete,
|
|
197
|
+
.form-create.is-preview .ant-upload-list-item-actions-item-upload,
|
|
198
|
+
.form-create.is-preview .ant-upload-list-item-remove {
|
|
199
|
+
pointer-events: none !important;
|
|
200
|
+
cursor: not-allowed !important;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/* 预览模式：防止组件显示为禁用状态（不置灰） */
|
|
204
|
+
.form-create.is-preview .ant-input,
|
|
205
|
+
.form-create.is-preview .ant-input-number,
|
|
206
|
+
.form-create.is-preview .ant-select,
|
|
207
|
+
.form-create.is-preview .ant-picker,
|
|
208
|
+
.form-create.is-preview .ant-cascader,
|
|
209
|
+
.form-create.is-preview .ant-input-password,
|
|
210
|
+
.form-create.is-preview .ant-textarea,
|
|
211
|
+
.form-create.is-preview .ant-radio,
|
|
212
|
+
.form-create.is-preview .ant-checkbox,
|
|
213
|
+
.form-create.is-preview .ant-switch,
|
|
214
|
+
.form-create.is-preview .ant-slider,
|
|
215
|
+
.form-create.is-preview .ant-rate,
|
|
216
|
+
.form-create.is-preview .ant-upload,
|
|
217
|
+
.form-create.is-preview .ant-btn {
|
|
218
|
+
opacity: 1 !important;
|
|
219
|
+
color: inherit !important;
|
|
220
|
+
background-color: transparent !important;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
/* 预览模式：CusSelect 组件保持正常外观，不置灰 */
|
|
224
|
+
.form-create.is-preview .fc-cus-select,
|
|
225
|
+
.form-create.is-preview .fc-cus-select-selector,
|
|
226
|
+
.form-create.is-preview .fc-cus-select-selection-item,
|
|
227
|
+
.form-create.is-preview .fc-cus-select-selection-placeholder {
|
|
228
|
+
opacity: 1 !important;
|
|
229
|
+
color: inherit !important;
|
|
230
|
+
background-color: transparent !important;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
/* 预览模式：移除 CusSelect 选择器的边框 */
|
|
234
|
+
.form-create.is-preview .fc-cus-select-selector {
|
|
235
|
+
border: none !important;
|
|
236
|
+
box-shadow: none !important;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
/* 预览模式：隐藏 CusSelect 的箭头和清除按钮 */
|
|
240
|
+
.form-create.is-preview .fc-cus-select-arrow,
|
|
241
|
+
.form-create.is-preview .fc-cus-select-clear {
|
|
242
|
+
display: none !important;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
/* 预览模式：隐藏选择器的下拉箭头 */
|
|
246
|
+
.form-create.is-preview .ant-select-arrow,
|
|
247
|
+
.form-create.is-preview .ant-select-suffix {
|
|
248
|
+
display: none !important;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
/* 预览模式：隐藏日期选择器的图标 */
|
|
252
|
+
.form-create.is-preview .ant-picker-suffix,
|
|
253
|
+
.form-create.is-preview .ant-picker-suffix .anticon {
|
|
254
|
+
display: none !important;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
/* 预览模式：隐藏其他输入框的清除按钮和图标 */
|
|
258
|
+
.form-create.is-preview .ant-input-clear-icon,
|
|
259
|
+
.form-create.is-preview .ant-input-number-handler,
|
|
260
|
+
.form-create.is-preview .ant-input-number-handler-wrap {
|
|
261
|
+
display: none !important;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
/* 预览模式：防止输入框显示为禁用状态的灰色 */
|
|
265
|
+
.form-create.is-preview .ant-input[disabled],
|
|
266
|
+
.form-create.is-preview .ant-input-number[disabled],
|
|
267
|
+
.form-create.is-preview .ant-select-disabled,
|
|
268
|
+
.form-create.is-preview .ant-picker-disabled,
|
|
269
|
+
.form-create.is-preview .ant-textarea[disabled] {
|
|
270
|
+
opacity: 1 !important;
|
|
271
|
+
color: inherit !important;
|
|
272
|
+
background-color: transparent !important;
|
|
273
|
+
cursor: default !important;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
/* 预览模式：防止选择器显示为禁用状态 */
|
|
277
|
+
.form-create.is-preview .ant-select-disabled .ant-select-selector {
|
|
278
|
+
opacity: 1 !important;
|
|
279
|
+
color: inherit !important;
|
|
280
|
+
background-color: transparent !important;
|
|
281
|
+
cursor: default !important;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
/* 预览模式：防止日期选择器显示为禁用状态 */
|
|
285
|
+
.form-create.is-preview .ant-picker-disabled {
|
|
286
|
+
opacity: 1 !important;
|
|
287
|
+
color: inherit !important;
|
|
288
|
+
background-color: transparent !important;
|
|
289
|
+
cursor: default !important;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
/* 预览模式：富文本编辑器样式 */
|
|
293
|
+
.form-create.is-preview .w-e-text-container {
|
|
294
|
+
border: none !important;
|
|
295
|
+
box-shadow: none !important;
|
|
296
|
+
background: transparent !important;
|
|
297
|
+
/* 移除高度限制，让内容自适应 */
|
|
298
|
+
height: auto !important;
|
|
299
|
+
min-height: auto !important;
|
|
300
|
+
max-height: none !important;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.form-create.is-preview .w-e-toolbar {
|
|
304
|
+
display: none !important;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.form-create.is-preview .w-e-text {
|
|
308
|
+
border: none !important;
|
|
309
|
+
box-shadow: none !important;
|
|
310
|
+
background: transparent !important;
|
|
311
|
+
/* 移除高度限制，让内容自适应 */
|
|
312
|
+
height: auto !important;
|
|
313
|
+
min-height: auto !important;
|
|
314
|
+
max-height: none !important;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
/* 富文本内容不可编辑，但允许容器滚动 */
|
|
318
|
+
.form-create.is-preview .w-e-text p,
|
|
319
|
+
.form-create.is-preview .w-e-text div,
|
|
320
|
+
.form-create.is-preview .w-e-text span,
|
|
321
|
+
.form-create.is-preview .w-e-text li,
|
|
322
|
+
.form-create.is-preview .w-e-text ul,
|
|
323
|
+
.form-create.is-preview .w-e-text ol,
|
|
324
|
+
.form-create.is-preview .w-e-text h1,
|
|
325
|
+
.form-create.is-preview .w-e-text h2,
|
|
326
|
+
.form-create.is-preview .w-e-text h3,
|
|
327
|
+
.form-create.is-preview .w-e-text h4,
|
|
328
|
+
.form-create.is-preview .w-e-text h5,
|
|
329
|
+
.form-create.is-preview .w-e-text h6,
|
|
330
|
+
.form-create.is-preview .w-e-text a,
|
|
331
|
+
.form-create.is-preview .w-e-text img,
|
|
332
|
+
.form-create.is-preview .w-e-text table,
|
|
333
|
+
.form-create.is-preview .w-e-text tr,
|
|
334
|
+
.form-create.is-preview .w-e-text td,
|
|
335
|
+
.form-create.is-preview .w-e-text th {
|
|
336
|
+
pointer-events: none !important;
|
|
337
|
+
user-select: none !important;
|
|
338
|
+
-webkit-user-select: none !important;
|
|
339
|
+
-moz-user-select: none !important;
|
|
340
|
+
-ms-user-select: none !important;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
/* 预览模式：禁用按钮点击 */
|
|
344
|
+
.form-create.is-preview .ant-btn {
|
|
345
|
+
pointer-events: none !important;
|
|
346
|
+
cursor: default !important;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
/* 预览模式：禁用选择器下拉 */
|
|
350
|
+
.form-create.is-preview .ant-select-dropdown {
|
|
351
|
+
display: none !important;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
/* 预览模式：禁用日期选择器弹窗 */
|
|
355
|
+
.form-create.is-preview .ant-picker-dropdown {
|
|
356
|
+
display: none !important;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
/* 预览模式：禁用级联选择器下拉 */
|
|
360
|
+
.form-create.is-preview .ant-cascader-dropdown {
|
|
361
|
+
display: none !important;
|
|
362
|
+
}
|
|
363
|
+
|
|
29
364
|
.fc-form-footer {
|
|
30
365
|
margin-top: 12px;
|
|
31
366
|
}
|