vue2-client 1.22.28 → 1.22.30

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.
Files changed (90) hide show
  1. package/.env.his +19 -19
  2. package/.idea/af-vue2-client.iml +2 -3
  3. package/.idea/inspectionProfiles/Project_Default.xml +6 -0
  4. package/package.json +1 -1
  5. package/src/base-client/components/common/HIS/HButtons/HButtons.vue +775 -775
  6. package/src/base-client/components/common/HIS/HForm/HForm.vue +1708 -1708
  7. package/src/base-client/components/common/HIS/HTab/HTab.vue +790 -790
  8. package/src/base-client/components/common/XInspectionDetailDrawer/components/HazardPhotos.vue +18 -0
  9. package/src/base-client/components/common/XInspectionDetailDrawer/index.vue +6 -1
  10. package/src/base-client/components/common/XMarkdownViewer/demo.vue +102 -102
  11. package/src/base-client/components/his/XTransfer/index.md +327 -327
  12. package/.history/.eslintrc_20260521171150.js +0 -74
  13. package/.history/.eslintrc_20260521171213.js +0 -74
  14. package/.history/src/base-client/components/common/HIS/HAddNativeForm/HAddNativeForm_20260601154443.vue +0 -726
  15. package/.history/src/base-client/components/common/HIS/HAddNativeForm/HAddNativeForm_20260601154700.vue +0 -478
  16. package/.history/src/base-client/components/common/HIS/HButtons/HButtons_20260611152602.vue +0 -755
  17. package/.history/src/base-client/components/common/HIS/HButtons/HButtons_20260702161223.vue +0 -748
  18. package/.history/src/base-client/components/common/HIS/HButtons/HButtons_20260702163310.vue +0 -832
  19. package/.history/src/base-client/components/common/HIS/HButtons/HButtons_20260702163324.vue +0 -748
  20. package/.history/src/base-client/components/common/HIS/HButtons/HButtons_20260702165416.vue +0 -748
  21. package/.history/src/base-client/components/common/HIS/HButtons/HButtons_20260702174939.vue +0 -793
  22. package/.history/src/base-client/components/common/HIS/HForm/HForm_20260702115430.vue +0 -1463
  23. package/.history/src/base-client/components/common/HIS/HFormTable/HFormTable_20260310142713.vue +0 -512
  24. package/.history/src/base-client/components/common/HIS/HFormTable/HFormTable_20260310145118.vue +0 -511
  25. package/.history/src/base-client/components/common/HIS/HFormTable/HFormTable_20260311094834.vue +0 -696
  26. package/.history/src/base-client/components/common/HIS/HFormTable/HFormTable_20260320143028.vue +0 -693
  27. package/.history/src/base-client/components/common/HIS/HFormTable/HFormTable_20260409101450.vue +0 -677
  28. package/.history/src/base-client/components/common/HIS/HTab/HTab_20260625173703.vue +0 -767
  29. package/.history/src/base-client/components/common/HIS/HTab/HTab_20260626112425.vue +0 -803
  30. package/.history/src/base-client/components/common/XAddNativeForm/XAddNativeForm_20260626173854.vue +0 -1522
  31. package/.history/src/base-client/components/common/XCollapse/XCollapse_20260703180349.vue +0 -862
  32. package/.history/src/base-client/components/common/XCollapse/XCollapse_20260703180623.vue +0 -862
  33. package/.history/src/base-client/components/common/XCollapse/XCollapse_20260703180702.vue +0 -842
  34. package/.history/src/base-client/components/common/XForm/XFormItem_20260703101840.vue +0 -1621
  35. package/.history/src/base-client/components/common/XMarkdownViewer/XMarkdownViewer_20260519140403.vue +0 -643
  36. package/.history/src/base-client/components/common/XMarkdownViewer/XMarkdownViewer_20260519140829.vue +0 -628
  37. package/.history/src/base-client/components/common/XMarkdownViewer/demo_20260519142824.vue +0 -104
  38. package/.history/src/base-client/components/common/XMarkdownViewer/demo_20260519143155.vue +0 -102
  39. package/.history/src/base-client/components/common/XReportGrid/XReportTrGroup_20260703180412.vue +0 -1102
  40. package/.history/src/base-client/components/common/XReportGrid/XReportTrGroup_20260703180623.vue +0 -1093
  41. package/.history/src/base-client/components/common/XReportGrid/XReport_20260309171231.vue +0 -1241
  42. package/.history/src/base-client/components/common/XReportGrid/XReport_20260309171441.vue +0 -1223
  43. package/.history/src/base-client/components/his/HAi/HAi_20260612174826.vue +0 -472
  44. package/.history/src/base-client/components/his/HAi/HAi_20260612175839.vue +0 -538
  45. package/.history/src/base-client/components/his/HAi/HAi_20260615103331.vue +0 -650
  46. package/.history/src/base-client/components/his/HAi/HAi_20260618140214.vue +0 -1396
  47. package/.history/src/base-client/components/his/HAi/HAi_20260618140556.vue +0 -1396
  48. package/.history/src/base-client/components/his/XHDescriptions/XHDescriptions_20260424134504.vue +0 -1469
  49. package/.history/src/base-client/components/his/XRadio/XRadio_20260702140351.vue +0 -774
  50. package/.history/src/base-client/components/his/XRadio/XRadio_20260702140441.vue +0 -774
  51. package/.history/src/base-client/components/his/XSidebar/XSidebar_20260610171133.vue +0 -788
  52. package/.history/src/base-client/components/his/XSidebar/XSidebar_20260610171151.vue +0 -780
  53. package/.history/src/base-client/components/his/XTransfer/XTransfer_20260511170841.vue +0 -585
  54. package/.history/src/base-client/components/his/XTransfer/XTransfer_20260511171138.vue +0 -787
  55. package/.history/src/base-client/components/his/XTransfer/XTransfer_20260512141830.vue +0 -739
  56. package/.history/src/components/STable/index_20260409155138.js +0 -806
  57. package/.history/src/components/STable/index_20260409155218.js +0 -814
  58. package/.history/src/expression/core/Expression_20260305164427.js +0 -1371
  59. package/.history/src/expression/core/Expression_20260305170258.js +0 -1358
  60. package/.history/src/expression/core/Program_20260305111830.js +0 -944
  61. package/.history/src/expression/core/Program_20260305112041.js +0 -931
  62. package/.history/src/logic/LogicRunner_20260304154306.js +0 -170
  63. package/.history/src/logic/LogicRunner_20260304155553.js +0 -112
  64. package/.history/src/logic/LogicRunner_20260305105834.js +0 -112
  65. package/.history/src/logic/LogicRunner_20260305112718.js +0 -129
  66. package/.history/src/logic/LogicRunner_20260305182436.js +0 -133
  67. package/.history/src/logic/LogicRunner_20260306151301.js +0 -213
  68. package/.history/src/logic/LogicRunner_20260306152419.js +0 -213
  69. package/.history/src/logic/plugins/common/DateTools_20260305154159.js +0 -61
  70. package/.history/src/logic/plugins/common/DateTools_20260305154217.js +0 -44
  71. package/.history/src/logic/plugins/common/DateTools_20260305161014.js +0 -44
  72. package/.history/src/logic/plugins/common/HttpTools_20260305164352.js +0 -80
  73. package/.history/src/logic/plugins/common/HttpTools_20260305170258.js +0 -75
  74. package/.history/src/logic/plugins/common/HttpTools_20260305171634.js +0 -75
  75. package/.history/src/logic/plugins/common/HttpTools_20260306152419.js +0 -72
  76. package/.history/src/services/api/restTools_20260427142149.js +0 -245
  77. package/.history/src/services/api/restTools_20260427142853.js +0 -230
  78. package/.history/src/services/api/restTools_20260519135558.js +0 -230
  79. package/.history/src/services/api/restTools_20260519140825.js +0 -230
  80. package/.history/src/services/api/restTools_20260519151223.js +0 -230
  81. package/.history/src/theme/global_20260703101634.less +0 -370
  82. package/.history/src/theme/global_20260703101840.less +0 -337
  83. package/.history/src/theme/global_20260703104511.less +0 -337
  84. package/.history/src/utils/indexedDB_20260306150918.js +0 -593
  85. package/.history/src/utils/indexedDB_20260306151301.js +0 -586
  86. package/.idea/codeStyles/Project.xml +0 -62
  87. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  88. package/.idea/misc.xml +0 -6
  89. package/docs/XCollapse/345/261/225/345/274/200/347/251/272/347/231/275/346/216/222/346/237/245/350/256/260/345/275/225.md +0 -153
  90. package/preview-input-box.html +0 -180
@@ -1,1708 +1,1708 @@
1
- <script setup>
2
- import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
3
- import { ref, computed, useAttrs } from 'vue'
4
-
5
- const xAddNativeFormRef = ref()
6
- // 是否隐藏表单
7
- const isHidden = ref(false)
8
-
9
- const attrs = useAttrs()
10
- const props = defineProps({
11
- // 是否启用 horizontal 模式的自定义配置
12
- enableHorizontalCustom: {
13
- type: Boolean,
14
- default: false
15
- },
16
- // 表单默认是否隐藏
17
- defaultHidden: {
18
- type: Boolean,
19
- default: false
20
- }
21
- })
22
- // 如果设置了 defaultHidden 为 true,则初始隐藏
23
- if (props.defaultHidden) {
24
- isHidden.value = true
25
- }
26
- // 从 radio-style_1 属性值中获取 padding
27
- const radioPadding = computed(() => {
28
- const val = attrs['radio-style_1']
29
- if (val !== undefined && val !== '' && val !== null) {
30
- const num = Number(val)
31
- return isNaN(num) ? 9 : num
32
- }
33
- return 9
34
- })
35
-
36
- // 包装器样式对象
37
- const wrapperStyleObject = computed(() => {
38
- return {
39
- '--radio-padding': `${radioPadding.value}px`
40
- }
41
- })
42
-
43
- // 启动时间选择框弹出到body
44
- const enablePopupToBody = computed(() => {
45
- const a = attrs
46
- return a.enablePopupToBody === 'true' || a.enablePopupToBody === true
47
- })
48
- const wrapperClassObject = computed(() => {
49
- const a = attrs
50
- const classes = {}
51
-
52
- // ========== 布尔型样式开关(属性存在且为true/''/'true'时生效)==========
53
- // query-conditions : 查询条件样式 - 标签两端对齐分散占满、垂直居中、移除冒号
54
- // padding-50 : 左右内边距50px样式 - 表单项左右各50px内边距
55
- // label-text-horizontal : 标签文字水平排列 - 强制LTR方向,*在右侧
56
- // label-text-justify : 标签文字两端对齐 - label宽度填满、text-align:justify
57
- // simple-inline : 简化内联模式 - 隐藏label,仅显示输入控件
58
- // simple-inline-show-label: 简化内联带标签 - 显示label(90px宽),带圆角输入框
59
- // label-justify : label两端对齐分散 - 固定80px宽度,冒号去除
60
- // charge-form : 收费表单样式 - 固定64px label宽度,30px高度
61
- // mini-form : 迷你表单布局 - ant-form-inline紧凑模式
62
- // content-right : 内容右对齐 - ant-row-flex内容靠右
63
- // label-font-style : 独立label字体 - 23px高、16px字号的label样式
64
- // small-input-style : 小输入框样式 - 32px高、234px宽、6px圆角、Source Han Sans
65
- // select-inside-label-style: 下拉框内部标签 - label隐藏在下拉框placeholder中
66
- // his-form-style : HIS表单统一下拉框 - 100%宽度、32px高、16px字号、Source Han Sans
67
- // form-text-style : 统一字体样式 - label加粗700、输入框常规400、统一16px字号思源黑体
68
- const booleanStyleKeys = [
69
- 'query-conditions',
70
- 'padding-50',
71
- 'label-text-horizontal',
72
- 'label-text-justify',
73
- 'simple-inline',
74
- 'simple-inline-show-label',
75
- 'label-justify',
76
- 'charge-form',
77
- 'mini-form',
78
- 'content-right',
79
- 'label-font-style',
80
- 'small-input-style',
81
- 'select-inside-label-style',
82
- 'his-form-style',
83
- 'form-text-style'
84
- ]
85
- // ========== 存在即生效样式开关(属性存在时直接生效)==========
86
- // radio-style_1 : 单选按钮样式1 - 可配置padding,蓝色选中背景
87
- const existStyleKeys = ['radio-style_1']
88
- for (const key of booleanStyleKeys) {
89
- const val = a[key]
90
- const truthy = val === true || val === '' || val === 'true'
91
- if (truthy) classes[`h-form-${key}`] = true
92
- }
93
- // 检查存在即生效的样式开关
94
- for (const key of existStyleKeys) {
95
- if (key in a) classes[`h-form-${key}`] = true
96
- }
97
-
98
- return classes
99
- })
100
-
101
- defineExpose({
102
- getXAddNativeFormInstance: () => xAddNativeFormRef.value,
103
- init: (params) => xAddNativeFormRef.value && xAddNativeFormRef.value.init && xAddNativeFormRef.value.init(params),
104
- asyncSubmit: () => xAddNativeFormRef.value && xAddNativeFormRef.value.asyncSubmit && xAddNativeFormRef.value.asyncSubmit(),
105
- validateForm: () => xAddNativeFormRef.value && xAddNativeFormRef.value.validateForm && xAddNativeFormRef.value.validateForm(),
106
- /** 等待配置结束的异步方法,委托给内部 XAddNativeForm */
107
- waitConfigEnd: () => xAddNativeFormRef.value?.waitConfigEnd?.() ?? Promise.resolve(),
108
- /** 隐藏表单 */
109
- hideForm: () => { isHidden.value = true },
110
- /** 显示表单 */
111
- showForm: () => { isHidden.value = false },
112
- /** 切换表单显示状态 */
113
- toggleForm: () => { isHidden.value = !isHidden.value }
114
- })
115
-
116
- </script>
117
-
118
- <template>
119
- <div
120
- class="h-form-wrapper"
121
- :class="[
122
- wrapperClassObject
123
- ]"
124
- :style="wrapperStyleObject"
125
- v-show="!isHidden"
126
- >
127
-
128
- <x-add-native-form
129
- ref="xAddNativeFormRef"
130
- v-bind="$attrs"
131
- :enable-popup-to-body="enablePopupToBody"
132
- :enable-horizontal-custom="props.enableHorizontalCustom"
133
- @configEnd="$emit('configEnd')"
134
- v-on="$listeners"
135
- >
136
- <template v-for="(_, name) in $slots" #[name]="slotData">
137
- <slot :name="name" v-bind="slotData" />
138
- </template>
139
- </x-add-native-form>
140
- </div>
141
- </template>
142
-
143
- <style scoped lang="less">
144
- // 单选框 padding 变量
145
- @radio-padding: var(--radio-padding, 9px);
146
-
147
- .h-form-wrapper {
148
- // 基础样式
149
- :deep(.ant-form-item) {
150
- margin-bottom: 4px;
151
- }
152
-
153
- &.h-form-mini-form {
154
- :deep(.ant-form-inline) {
155
- .ant-row-flex {
156
- .ant-col {
157
- flex: auto !important;
158
- max-width: 250px !important;
159
- }
160
- }
161
- }
162
-
163
- :deep(.ant-form-item) {
164
- margin-right: 0px !important;
165
- }
166
- }
167
-
168
- &.h-form-content-right {
169
- :deep(.ant-form-inline) {
170
- .ant-row-flex {
171
- justify-content: right;
172
- }
173
- }
174
- }
175
-
176
- // query-conditions 样式
177
- &.h-form-query-conditions {
178
- :deep(.ant-card-body) {
179
- padding: 0px;
180
- }
181
-
182
- :deep(.ant-row-flex) {
183
- .x-form-col-wrapper {
184
- .ant-form-item {
185
- display: flex !important;
186
- width: 100%;
187
- height: 100%;
188
- margin-bottom: 0px;
189
- justify-content: space-between;
190
-
191
- .ant-form-item-label {
192
- display: flex;
193
- align-items: center;
194
- height: 100%;
195
-
196
- label {
197
- height: auto;
198
- font-family: Source Han Sans;
199
- font-size: 16px;
200
- font-weight: normal;
201
- line-height: normal;
202
- color: #313131;
203
- display: block !important; // 保持 block 以支持两端对齐
204
- width: 100%;
205
- white-space: nowrap;
206
- margin: 0;
207
- text-align: justify;
208
- text-align-last: justify;
209
- text-justify: inter-ideograph;
210
- box-sizing: border-box;
211
- padding-right: 0 !important; // 移除冒号预留空间
212
-
213
- // 使用 line-height 实现垂直居中
214
- line-height: 40px; // 设置与容器高度相同的行高
215
- }
216
-
217
- & > label::after {
218
- display: none !important;
219
- }
220
- }
221
- }
222
- }
223
-
224
- .ant-col-24 {
225
- padding: 0px 4px !important;
226
- }
227
- }
228
- }
229
-
230
- // 单选框样式设计图中切换模式的样式
231
- &.h-form-radio-style_1 {
232
- :deep(.ant-radio-button-wrapper) {
233
- padding: 0 @radio-padding;
234
- }
235
-
236
- :deep(.ant-radio-button-wrapper-checked) {
237
- background-color: #0057FE;
238
- color: white;
239
- }
240
- }
241
-
242
- &.h-form-simple-inline {
243
- :deep(.ant-form-item-label) {
244
- display: none !important;
245
- }
246
-
247
- :deep(.ant-form-item-control-wrapper) {
248
- width: 100%;
249
- }
250
- }
251
-
252
- &.h-form-padding-50 {
253
- // ant-row-flex 样式
254
- :deep(.ant-row-flex) {
255
- padding-left: 50px;
256
- padding-right: 50px
257
- }
258
- }
259
-
260
- // 单选框样式设计图中切换模式的样式
261
- &.h-form-radio-style_1 {
262
- :deep(.ant-radio-button-wrapper) {
263
- padding: 0 @radio-padding;
264
- }
265
-
266
- :deep(.ant-radio-button-wrapper-checked) {
267
- background-color: #0057FE;
268
- color: white;
269
- }
270
- }
271
-
272
- // charge-form 样式
273
- &.h-form-charge-form {
274
- margin-top: 2px !important;
275
- // 定义变量
276
- @font-common: {
277
- font-family: 'Source Han Sans', sans-serif;
278
- font-size: 16px;
279
- font-weight: normal;
280
- letter-spacing: 0em;
281
- font-feature-settings: "kern" on;
282
- };
283
-
284
- @color-primary: #313131;
285
- @color-placeholder: #999999;
286
-
287
- // 定义混合宏
288
- .input-base() {
289
- width: 100%;
290
- height: 30px;
291
- line-height: 30px;
292
- vertical-align: top;
293
- margin: 0;
294
- text-align: left;
295
- color: @color-primary;
296
- opacity: 1;
297
- @font-common();
298
- }
299
-
300
- .placeholder-base() {
301
- color: @color-placeholder;
302
- opacity: 1;
303
- @font-common();
304
- }
305
-
306
- .option-group-base() {
307
- display: flex;
308
- flex-wrap: wrap;
309
- align-items: center;
310
- min-height: 30px;
311
-
312
- .ant-radio-wrapper,
313
- .ant-checkbox-wrapper {
314
- height: 30px;
315
- line-height: 30px;
316
- margin-right: 16px;
317
- max-width: 100%;
318
- }
319
- }
320
-
321
- :deep(.ant-form-item) {
322
- margin-bottom: 16px;
323
- margin-top: 0;
324
- padding: 0;
325
- display: flex;
326
- align-items: center;
327
-
328
- .ant-form-item-label {
329
- text-align: left;
330
- margin: 0 11px 0 0 !important;
331
- width: 64px;
332
- min-width: 64px;
333
- max-width: 64px;
334
- flex-shrink: 0;
335
-
336
- label {
337
- height: 23px;
338
- opacity: 1;
339
- line-height: 23px;
340
- color: @color-primary;
341
- margin: 0;
342
- padding: 0;
343
- white-space: nowrap;
344
- display: block;
345
- @font-common();
346
-
347
- // 移除冒号
348
- &::after {
349
- content: '';
350
- }
351
- }
352
- }
353
-
354
- .ant-form-item-control-wrapper {
355
- margin: 0;
356
- padding: 0;
357
- flex: 1;
358
- min-width: 0;
359
- display: flex;
360
- align-items: center;
361
-
362
- .ant-form-item-control {
363
- margin: 0;
364
- padding: 0;
365
- width: 100%;
366
- text-align: left;
367
- line-height: 30px !important;
368
-
369
- // 输入框样式统一
370
- .ant-input,
371
- .ant-input-affix-wrapper,
372
- .ant-select,
373
- .ant-input-number,
374
- .ant-picker,
375
- .ant-radio-group,
376
- .ant-checkbox-group {
377
- .input-base();
378
- }
379
-
380
- // 选择器样式
381
- .ant-select {
382
- .ant-select-selector {
383
- .input-base();
384
- height: 30px;
385
- line-height: 30px;
386
-
387
- .ant-select-selection-item {
388
- .input-base();
389
- line-height: 30px;
390
- }
391
-
392
- .ant-select-selection-placeholder {
393
- .placeholder-base();
394
- line-height: 30px;
395
- color: #313131;
396
- }
397
- }
398
- }
399
-
400
- // 日期选择器样式
401
- .ant-picker {
402
- height: 30px;
403
-
404
- .ant-picker-input {
405
- height: 30px;
406
- line-height: 30px;
407
- .input-base();
408
-
409
- input {
410
- .input-base();
411
- height: 30px;
412
- line-height: 30px;
413
- }
414
- }
415
- }
416
-
417
- // 数字输入框样式
418
- .ant-input-number {
419
- height: 30px;
420
-
421
- .ant-input-number-input {
422
- .input-base();
423
- height: 30px;
424
- line-height: 30px;
425
- }
426
- }
427
-
428
- // 单选框组样式
429
- .ant-radio-group {
430
- .option-group-base();
431
- }
432
-
433
- // 复选框组样式
434
- .ant-checkbox-group {
435
- .option-group-base();
436
- }
437
- }
438
- }
439
- }
440
-
441
- // 重置可能的容器边距
442
- :deep(.ant-row) {
443
- margin: 0;
444
- padding: 0;
445
-
446
- .ant-col {
447
- margin: 0;
448
- padding: 0;
449
- }
450
- }
451
-
452
- // 强制重置所有可能的表单项样式
453
- :deep(.ant-form-item) {
454
- margin: 0 0 16px 0 !important;
455
-
456
- // 重置可能的内部边距
457
- .ant-form-item-control-input,
458
- .ant-form-item-control-input-content {
459
- margin: 0 !important;
460
- padding: 0 !important;
461
- }
462
- }
463
- }
464
-
465
- // label-text-horizontal 样式 - 只控制label文字从左到右排列
466
- &.h-form-label-text-horizontal {
467
- :deep(.ant-form-item-label) {
468
- text-align: left;
469
- direction: ltr;
470
-
471
- // 标签文字水平排列
472
- .ant-form-item-label-text {
473
- display: inline-block;
474
- text-align: left;
475
- direction: ltr;
476
- unicode-bidi: normal;
477
- }
478
-
479
- // 必填标识水平排列
480
- .ant-form-item-required::before {
481
- margin-right: 4px;
482
- margin-left: 0;
483
- }
484
- }
485
- }
486
-
487
- // label-text-justify 样式 - 标签文字两端对齐分散占满 必填*可能会有问题
488
- &.h-form-label-text-justify {
489
- :deep(.ant-form-item-label) {
490
- padding-left: 0;
491
- padding-right: 8px;
492
-
493
- label {
494
- position: relative;
495
- display: block;
496
- width: 100%;
497
- white-space: nowrap;
498
- margin: 0;
499
- text-indent: 0;
500
- text-align: justify;
501
- text-align-last: justify;
502
- text-justify: inter-ideograph;
503
- box-sizing: border-box;
504
- padding-right: 12px; // 给绝对定位的冒号留出空间
505
- }
506
-
507
- // 将冒号绝对定位到最右侧,避免参与两端对齐计算
508
- label::after {
509
- position: absolute;
510
- right: 0;
511
- }
512
- }
513
- }
514
-
515
- // label-justify 样式 - 两端对齐,应用指定字体样式
516
- &.h-form-label-justify {
517
- padding-left: 8px;
518
-
519
- :deep(.ant-form-item-label) {
520
- padding-left: 0;
521
- padding-right: 8px;
522
- // 限制label容器的宽度,强制两端对齐
523
- width: 80px !important;
524
- min-width: 80px;
525
- max-width: 80px;
526
-
527
- label {
528
- position: relative;
529
- display: block;
530
- width: 100%;
531
- white-space: nowrap;
532
- margin: 0;
533
- text-indent: 0;
534
- text-align: justify;
535
- text-align-last: justify;
536
- text-justify: inter-ideograph;
537
- box-sizing: border-box;
538
- padding-right: 12px; // 给绝对定位的冒号留出空间
539
-
540
- // 应用指定的字体样式
541
- height: 39px;
542
- opacity: 1;
543
- font-family: 'Source Han Sans', sans-serif;
544
- font-size: 16px;
545
- font-weight: normal;
546
- line-height: 39px;
547
- color: #313131;
548
- }
549
-
550
- // 去掉冒号
551
- label::after {
552
- content: '';
553
- }
554
- }
555
- }
556
-
557
- // label-font-style 样式 - 独立的label字体样式
558
- &.h-form-label-font-style {
559
- :deep(.ant-form-item-label) {
560
- label {
561
- height: 23px;
562
- opacity: 1;
563
- font-family: Source Han Sans;
564
- font-size: 16px;
565
- font-weight: normal;
566
- line-height: normal;
567
- letter-spacing: 0em;
568
- font-feature-settings: "kern" on;
569
- color: #313131;
570
- }
571
- }
572
- }
573
-
574
- &.h-form-simple-inline-show-label {
575
- // ========== 公共字体样式变量 ==========
576
- @common-font: {
577
- font-family: Source Han Sans !important;
578
- font-size: 16px !important;
579
- font-weight: normal !important;
580
- letter-spacing: 0em !important;
581
- font-feature-settings: "kern" on !important;
582
- };
583
-
584
- @common-text-color: #313131;
585
- @common-placeholder-color: #999;
586
- @common-border-color: #E5E9F0;
587
- @common-focus-color: #0057FE;
588
-
589
- // ========== 表单项基础布局 ==========
590
- :deep(.ant-form-item) {
591
- display: flex !important;
592
- flex-direction: row !important;
593
- align-items: flex-start !important;
594
- margin: 0 !important;
595
- padding: 0 !important;
596
- margin-bottom: 0 !important;
597
- }
598
-
599
- // 修复 ant-row 伪元素
600
- :deep(.ant-row) {
601
- &::before,
602
- &::after {
603
- display: table !important;
604
- content: '' !important;
605
- }
606
- }
607
-
608
- // ========== Label 样式 ==========
609
- :deep(.ant-form-item-label) {
610
- display: flex !important;
611
- align-items: flex-start !important;
612
- padding: 0 8px 0 0 !important;
613
- width: 90px !important;
614
- min-width: 90px !important;
615
- max-width: 90px !important;
616
- flex-shrink: 0 !important;
617
- flex: none !important;
618
-
619
- label {
620
- position: relative !important;
621
- display: block !important;
622
- width: 100% !important;
623
- height: 39px !important;
624
- margin: 0 !important;
625
- padding: 0 !important;
626
- opacity: 1 !important;
627
- @common-font();
628
- line-height: 39px !important;
629
- color: @common-text-color !important;
630
- text-align: justify !important;
631
- text-align-last: justify !important;
632
- text-justify: inter-ideograph !important;
633
- text-indent: 12px !important;
634
- box-sizing: border-box !important;
635
-
636
- &::after {
637
- display: none !important;
638
- content: none !important;
639
- }
640
-
641
- &:not(.ant-form-item-required)::before {
642
- display: none !important;
643
- content: none !important;
644
- }
645
- }
646
- }
647
-
648
- // 必填项星号
649
- :deep(.ant-form-item-required) {
650
- &::before {
651
- display: block !important;
652
- visibility: visible !important;
653
- content: '*' !important;
654
- position: absolute !important;
655
- left: -8px !important;
656
- top: 40% !important;
657
- transform: translateY(-50%) !important;
658
- color: #ff4d4f !important;
659
- font-size: 14px !important;
660
- font-family: SimSun, sans-serif !important;
661
- z-index: 1 !important;
662
- line-height: 1 !important;
663
- }
664
- }
665
-
666
- // ========== 控件容器 ==========
667
- :deep(.ant-form-item-control-wrapper) {
668
- flex: 1 !important;
669
- min-width: 0 !important;
670
- width: auto !important;
671
-
672
- .ant-form-item-control {
673
- width: 100% !important;
674
-
675
- .ant-form-item-children {
676
- display: block !important;
677
- width: 100% !important;
678
- padding-right: 41px;
679
- padding-left: 6px;
680
- }
681
- }
682
- }
683
-
684
- // ========== 公共输入框样式 Mixin ==========
685
- .input-common() {
686
- border-radius: 6px !important;
687
- box-sizing: border-box !important;
688
- border: 1px solid @common-border-color !important;
689
- @common-font();
690
- color: @common-text-color !important;
691
-
692
- &:hover,
693
- &:focus {
694
- border-color: @common-focus-color !important;
695
- box-shadow: none !important;
696
- }
697
-
698
- &[readonly] {
699
- background-color: #f5f5f5;
700
- cursor: not-allowed;
701
- }
702
- }
703
-
704
- // ========== 普通输入框(不包括文本域) ==========
705
- :deep(.ant-input:not(textarea)) {
706
- .input-common();
707
- height: 39px !important;
708
- line-height: 37px !important;
709
- padding: 0 11px !important;
710
-
711
- &::placeholder {
712
- line-height: 37px !important;
713
- color: @common-placeholder-color !important;
714
- }
715
- }
716
-
717
- // ========== 文本域样式 ==========
718
- :deep(textarea.ant-input) {
719
- .input-common();
720
- min-height: 80px !important;
721
- padding: 8px 11px !important;
722
- line-height: 22px !important;
723
- resize: vertical !important;
724
-
725
- &::placeholder {
726
- color: @common-placeholder-color !important;
727
- line-height: 22px !important;
728
- }
729
- }
730
-
731
- // ========== 下拉框样式 ==========
732
- :deep(.ant-select) {
733
- .ant-select-selection {
734
- border-radius: 6px !important;
735
- border: 1px solid @common-border-color !important;
736
- height: 39px !important;
737
-
738
- &:hover {
739
- border-color: @common-focus-color !important;
740
- }
741
- }
742
-
743
- .ant-select-selection__rendered {
744
- height: 39px !important;
745
- line-height: 39px !important;
746
- margin: 0 !important;
747
- padding: 0 11px !important;
748
- }
749
-
750
- .ant-select-selection__placeholder {
751
- @common-font();
752
- color: @common-placeholder-color !important;
753
- line-height: 37px !important;
754
- height: 37px !important;
755
- top: 0 !important;
756
- margin-top: 0 !important;
757
- padding-left: 11px;
758
- }
759
-
760
- .ant-select-selection-selected-value {
761
- @common-font();
762
- color: @common-text-color !important;
763
- line-height: 37px !important;
764
- padding: 0 !important;
765
- }
766
-
767
- .ant-select-arrow {
768
- right: 11px !important;
769
- top: 50% !important;
770
- transform: translateY(-50%) !important;
771
-
772
- .ant-select-arrow-icon {
773
- color: @common-placeholder-color !important;
774
- }
775
- }
776
- }
777
-
778
- :deep(.ant-select-focused) {
779
- .ant-select-selection {
780
- border-color: @common-focus-color !important;
781
- box-shadow: none !important;
782
- }
783
- }
784
-
785
- // ========== 单选框样式 ==========
786
- :deep(.ant-radio-group) {
787
- display: flex !important;
788
- align-items: center !important;
789
- height: 39px !important;
790
- line-height: 39px !important;
791
- }
792
-
793
- :deep(.ant-radio-wrapper) {
794
- @common-font();
795
- line-height: 39px !important;
796
- color: @common-text-color !important;
797
- margin-right: 16px !important;
798
- height: 39px !important;
799
- display: inline-flex !important;
800
- align-items: center !important;
801
-
802
- // 单选框后面的文字
803
- span:not(.ant-radio) {
804
- @common-font();
805
- line-height: 39px !important;
806
- color: @common-text-color !important;
807
- padding: 0 !important;
808
- }
809
- }
810
-
811
- // 单选框圆圈
812
- :deep(.ant-radio) {
813
- margin-right: 4px !important;
814
-
815
- .ant-radio-inner {
816
- width: 16px !important;
817
- height: 16px !important;
818
- background: #FFFFFF !important;
819
- border: 1px solid #CDCFD4 !important;
820
- border-radius: 50% !important;
821
- position: relative !important;
822
-
823
- &::after {
824
- width: 10px !important;
825
- height: 10px !important;
826
- background: @common-focus-color !important;
827
- border-radius: 50% !important;
828
- position: absolute !important;
829
- top: 50% !important;
830
- left: 50% !important;
831
- transform: translate(-50%, -50%) !important;
832
- margin: 0 !important;
833
- }
834
- }
835
-
836
- // 选中状态
837
- &.ant-radio-checked .ant-radio-inner {
838
- border-color: @common-focus-color !important;
839
- background: #FFFFFF !important;
840
- }
841
-
842
- // hover 状态
843
- &:hover .ant-radio-inner {
844
- border-color: @common-focus-color !important;
845
- }
846
- }
847
- }
848
-
849
- // small-input-style 小输入框文字样式(32px高度,234px宽度)
850
- &.h-form-small-input-style {
851
- // 输入框基础样式
852
- :deep(.ant-input) {
853
- width: 234px;
854
- height: 32px;
855
- border-radius: 6px;
856
- opacity: 1;
857
- box-sizing: border-box;
858
- border: 1px solid #E5E9F0;
859
-
860
- &::placeholder {
861
- height: 23px;
862
- opacity: 1;
863
- font-family: Source Han Sans;
864
- font-size: 16px;
865
- font-weight: normal;
866
- line-height: 32px;
867
- letter-spacing: 0em;
868
- font-feature-settings: "kern" on;
869
- color: #A7A7A7;
870
- }
871
- }
872
-
873
- :deep(.ant-input-affix-wrapper) {
874
- width: 234px;
875
- height: 32px;
876
- border-radius: 6px;
877
- opacity: 1;
878
- box-sizing: border-box;
879
- border: 1px solid #E5E9F0;
880
-
881
- &::placeholder {
882
- height: 23px;
883
- opacity: 1;
884
- font-family: Source Han Sans;
885
- font-size: 16px;
886
- font-weight: normal;
887
- line-height: 32px;
888
- letter-spacing: 0em;
889
-
890
- font-feature-settings: "kern" on;
891
- color: #A7A7A7;
892
- }
893
-
894
- .ant-input {
895
- font-family: Source Han Sans;
896
- font-size: 16px;
897
- font-weight: normal;
898
- line-height: 32px;
899
- letter-spacing: 0em;
900
-
901
- font-feature-settings: "kern" on;
902
- color: #313131;
903
- }
904
- }
905
-
906
- // 输入框文字样式
907
- :deep(.ant-input) {
908
- font-family: Source Han Sans;
909
- font-size: 16px;
910
- font-weight: normal;
911
- line-height: 32px;
912
- letter-spacing: 0em;
913
-
914
- font-feature-settings: "kern" on;
915
- color: #313131;
916
- }
917
-
918
- // 下拉框样式
919
- :deep(.ant-select) {
920
- width: 234px;
921
-
922
- .ant-select-selector {
923
- width: 234px !important;
924
- height: 32px !important;
925
- padding: 0 11px !important;
926
- border-radius: 6px !important;
927
- border: 1px solid #E5E9F0 !important;
928
- background: #fff !important;
929
- }
930
-
931
- .ant-select-selection-placeholder,
932
- .ant-select-selection__placeholder,
933
- .ant-select-search__field__placeholder {
934
- position: absolute !important;
935
- top: 0 !important;
936
- right: 11px !important;
937
- max-width: 100% !important;
938
- height: 32px !important;
939
- margin-top: 0 !important;
940
- overflow: hidden !important;
941
- color: #A7A7A7 !important;
942
- line-height: 30px !important;
943
- white-space: nowrap !important;
944
- text-overflow: ellipsis !important;
945
- font-family: Source Han Sans !important;
946
- font-size: 16px !important;
947
- font-weight: normal !important;
948
- letter-spacing: 0em !important;
949
- font-feature-settings: "kern" on !important;
950
- }
951
-
952
- .ant-select-selection-selected-value {
953
- opacity: 1;
954
- font-family: Source Han Sans;
955
- font-size: 16px;
956
- font-weight: normal;
957
- line-height: 32px;
958
- letter-spacing: 0em;
959
-
960
- font-feature-settings: "kern" on;
961
- color: #313131;
962
- }
963
- }
964
-
965
- // 单选按钮组样式
966
- :deep(.ant-radio-group) {
967
- display: inline-flex;
968
- flex-wrap: wrap;
969
- gap: 0;
970
- }
971
-
972
- :deep(.ant-radio-button-wrapper) {
973
- height: 32px;
974
- line-height: 32px;
975
- padding: 0 7px;
976
- font-family: Source Han Sans;
977
- font-size: 16px;
978
- font-weight: normal;
979
- letter-spacing: 0em;
980
-
981
- font-feature-settings: "kern" on;
982
- color: #313131;
983
- background: #fff;
984
- border: 1px solid #E5E9F0;
985
- border-radius: 0;
986
-
987
- &:first-child {
988
- border-radius: 6px 0 0 6px;
989
- }
990
-
991
- &:last-child {
992
- border-radius: 0 6px 6px 0;
993
- }
994
-
995
- &:not(:first-child)::before {
996
- display: none;
997
- }
998
-
999
- .ant-radio-button {
1000
- display: none;
1001
- }
1002
-
1003
- .ant-radio-button-input {
1004
- display: none;
1005
- }
1006
-
1007
- & > span:not(.ant-radio-button) {
1008
- font-family: Source Han Sans;
1009
- font-size: 16px;
1010
- font-weight: normal;
1011
- line-height: 32px;
1012
- letter-spacing: 0em;
1013
- color: #313131;
1014
-
1015
- font-feature-settings: "kern" on;
1016
- }
1017
- }
1018
-
1019
- :deep(.ant-radio-button-wrapper-checked) {
1020
- background: #0057FE;
1021
- border-color: #0057FE;
1022
-
1023
- & > span:not(.ant-radio-button) {
1024
- color: #fff;
1025
- }
1026
- }
1027
-
1028
- // 单选框样式
1029
- :deep(.ant-radio-wrapper) {
1030
- height: 40px;
1031
- line-height: 40px;
1032
- font-family: Source Han Sans;
1033
- font-size: 16px;
1034
- font-weight: normal;
1035
- letter-spacing: 0em;
1036
- font-feature-settings: "kern" on;
1037
- color: #313131;
1038
-
1039
- .ant-radio {
1040
- width: 16px;
1041
- height: 16px;
1042
- opacity: 1;
1043
-
1044
- .ant-radio-inner {
1045
- width: 16px;
1046
- height: 16px;
1047
- background: #FFFFFF;
1048
- box-sizing: border-box;
1049
- border: 1px solid #CDCFD4;
1050
- border-radius: 50%;
1051
-
1052
- &::after {
1053
- width: 8px;
1054
- height: 8px;
1055
- background: #0057FE;
1056
- border-radius: 50%;
1057
- top: 50%;
1058
- left: 50%;
1059
- transform: translate(-50%, -50%);
1060
- }
1061
- }
1062
- }
1063
-
1064
- .ant-radio-checked {
1065
- .ant-radio-inner {
1066
- border-color: #0057FE;
1067
- }
1068
- }
1069
-
1070
- span:not(.ant-radio) {
1071
- font-family: Source Han Sans;
1072
- font-size: 16px;
1073
- font-weight: normal;
1074
- line-height: 40px;
1075
- letter-spacing: 0em;
1076
- color: #313131;
1077
-
1078
- font-feature-settings: "kern" on;
1079
- }
1080
- }
1081
- }
1082
- // select-inside-label-style 下拉框label在选择框内部样式
1083
- &.h-form-select-inside-label-style {
1084
- // 隐藏原有的 label
1085
- :deep(.ant-form-item-label) {
1086
- display: none !important;
1087
- }
1088
-
1089
- // 普通输入框样式
1090
- :deep(.ant-input:not(textarea)) {
1091
- border-radius: 6px !important;
1092
- border: 1px solid #E5E9F0 !important;
1093
- height: 32px !important;
1094
- line-height: 37px !important;
1095
- padding: 0 11px !important;
1096
- font-family: 'Source Han Sans', sans-serif;
1097
- font-size: 16px;
1098
- font-weight: normal;
1099
- line-height: normal;
1100
- letter-spacing: 0em;
1101
- color: #313131;
1102
-
1103
- &::placeholder {
1104
- color: #999 !important;
1105
- }
1106
-
1107
- &:hover,
1108
- &:focus {
1109
- border-color: #0057FE !important;
1110
- }
1111
- }
1112
-
1113
- // 文本域样式
1114
- :deep(textarea.ant-input) {
1115
- border-radius: 6px !important;
1116
- border: 1px solid #E5E9F0 !important;
1117
- min-height: 80px !important;
1118
- padding: 8px 11px !important;
1119
- font-family: 'Source Han Sans', sans-serif;
1120
- font-size: 16px;
1121
- font-weight: normal;
1122
- line-height: normal;
1123
- letter-spacing: 0em;
1124
- color: #313131;
1125
-
1126
- &::placeholder {
1127
- color: #999 !important;
1128
- }
1129
- }
1130
-
1131
- // 下拉框样式
1132
- :deep(.ant-select) {
1133
- .ant-select-selector {
1134
- border-radius: 6px !important;
1135
- border: 1px solid #E5E9F0 !important;
1136
- background: #fff !important;
1137
- height: 32px !important;
1138
- padding: 0 11px !important;
1139
- position: relative !important;
1140
-
1141
- &:hover,
1142
- &:focus {
1143
- border-color: #0057FE !important;
1144
- }
1145
- }
1146
-
1147
- // 聚焦时去掉阴影,保持与输入框一致
1148
- &.ant-select-focused .ant-select-selector {
1149
- border-color: #0057FE !important;
1150
- box-shadow: none !important;
1151
- }
1152
-
1153
- // 强制 placeholder 始终显示
1154
- .ant-select-selection__placeholder {
1155
- position: absolute !important;
1156
- left: 0 !important;
1157
- top: 50% !important;
1158
- transform: translateY(-50%) !important;
1159
- opacity: 1 !important;
1160
- visibility: visible !important;
1161
- display: flex !important;
1162
- align-items: center !important;
1163
- height: 32px !important;
1164
- font-family: 'Source Han Sans', sans-serif !important;
1165
- font-size: 16px !important;
1166
- font-weight: normal !important;
1167
- color: #313131 !important;
1168
- pointer-events: none !important;
1169
- z-index: 10 !important;
1170
- margin: 0 !important;
1171
- padding: 0 !important;
1172
- }
1173
-
1174
- // 选中的值
1175
- .ant-select-selection-selected-value {
1176
- display: block !important;
1177
- margin-left: 111px !important;
1178
- font-family: 'Source Han Sans', sans-serif !important;
1179
- font-size: 16px !important;
1180
- font-weight: normal !important;
1181
- color: #313131 !important;
1182
- line-height: 32px !important;
1183
- height: 32px !important;
1184
- overflow: hidden !important;
1185
- text-overflow: ellipsis !important;
1186
- white-space: nowrap !important;
1187
- max-width: calc(234px - 111px - 22px) !important;
1188
- }
1189
- }
1190
-
1191
- // 强制覆盖 antd 隐藏 placeholder 的规则
1192
- :deep(.ant-select-single.ant-select-show-arrow .ant-select-selection__placeholder) {
1193
- opacity: 1 !important;
1194
- visibility: visible !important;
1195
- }
1196
-
1197
- // ========== 新增样式:覆盖下拉框宽度、高度、边框 ==========
1198
- :deep(.ant-select) {
1199
- width: 234px !important;
1200
-
1201
- .ant-select-selector {
1202
- width: 234px !important;
1203
- height: 32px !important;
1204
- border-radius: 6px !important;
1205
- background: #FFFFFF !important;
1206
- box-sizing: border-box !important;
1207
- border: 1px solid #E5E9F0 !important;
1208
- }
1209
- }
1210
-
1211
- // ========== 新增样式:下拉框图标 ==========
1212
- :deep(.ant-select-arrow) {
1213
- .anticon {
1214
- svg {
1215
- width: 7px !important;
1216
- height: 13px !important;
1217
- fill: #94979E !important;
1218
- }
1219
- }
1220
- }
1221
- }
1222
-
1223
- // his-form-style 样式 - 下拉框提示词和单选框统一样式
1224
- &.h-form-his-form-style {
1225
- // ========== 下拉框样式 ==========
1226
- :deep(.ant-select) {
1227
- width: 100% !important;
1228
-
1229
- .ant-select-selector {
1230
- height: 32px !important;
1231
- border-radius: 6px !important;
1232
- background: #FFFFFF !important;
1233
- border: 1px solid #E5E9F0 !important;
1234
- padding: 0 11px !important;
1235
- }
1236
-
1237
- .ant-select-selection__rendered {
1238
- height: 32px !important;
1239
- line-height: 32px !important;
1240
- margin: 0 !important;
1241
- }
1242
-
1243
- .ant-select-selection__placeholder {
1244
- font-family: 'Source Han Sans', sans-serif !important;
1245
- font-size: 16px !important;
1246
- font-weight: normal !important;
1247
- color: #313131 !important;
1248
- line-height: 32px !important;
1249
- height: 32px !important;
1250
- top: 0 !important;
1251
- margin-top: 0 !important;
1252
- padding-left: 11px !important;
1253
- opacity: 1 !important;
1254
- }
1255
-
1256
- .ant-select-selection-selected-value {
1257
- font-family: 'Source Han Sans', sans-serif !important;
1258
- font-size: 16px !important;
1259
- font-weight: normal !important;
1260
- color: #313131 !important;
1261
- line-height: 32px !important;
1262
- padding-left: 11px !important;
1263
- opacity: 1 !important;
1264
- }
1265
-
1266
- .ant-select-selection-item {
1267
- font-family: 'Source Han Sans', sans-serif !important;
1268
- font-size: 16px !important;
1269
- font-weight: normal !important;
1270
- color: #313131 !important;
1271
- line-height: 32px !important;
1272
- opacity: 1 !important;
1273
- }
1274
-
1275
- .ant-select-arrow {
1276
- right: 11px !important;
1277
- top: 50% !important;
1278
- transform: translateY(-50%) !important;
1279
- }
1280
- }
1281
-
1282
- // ========== 单选框样式 ==========
1283
- :deep(.ant-radio-wrapper) {
1284
- display: inline-flex !important;
1285
- align-items: center !important;
1286
- margin-right: 1px !important;
1287
- padding: 0 !important;
1288
- margin: 0 !important;
1289
-
1290
- > span:last-child {
1291
- height: 23px !important;
1292
- line-height: 23px !important;
1293
- opacity: 1 !important;
1294
- font-family: 'Source Han Sans', sans-serif !important;
1295
- font-size: 16px !important;
1296
- font-weight: normal !important;
1297
- letter-spacing: 0em !important;
1298
- color: #313131 !important;
1299
- }
1300
- }
1301
-
1302
- // 单选框与文字间距为0
1303
- :deep(.ant-radio) {
1304
- + span {
1305
- padding-left: 0 !important;
1306
- }
1307
- }
1308
-
1309
- // 单选框外框
1310
- :deep(.ant-radio) {
1311
- display: inline-block !important;
1312
- width: 16px !important;
1313
- height: 16px !important;
1314
- position: relative !important;
1315
-
1316
- .ant-radio-inner {
1317
- position: relative !important;
1318
- display: inline-block !important;
1319
- width: 16px !important;
1320
- height: 16px !important;
1321
- opacity: 1 !important;
1322
- background: #FFFFFF !important;
1323
- box-sizing: border-box !important;
1324
- border: 1px solid #CDCFD4 !important;
1325
- border-radius: 50% !important;
1326
-
1327
- &::after {
1328
- display: none !important;
1329
- position: absolute !important;
1330
- width: 10px !important;
1331
- height: 10px !important;
1332
- opacity: 1 !important;
1333
- background: #0057FE !important;
1334
- border-radius: 50% !important;
1335
- top: 50% !important;
1336
- left: 50% !important;
1337
- transform: translate(-50%, -50%) !important;
1338
- }
1339
- }
1340
-
1341
- &.ant-radio-checked .ant-radio-inner {
1342
- border-color: #0057FE !important;
1343
-
1344
- &::after {
1345
- display: block !important;
1346
- }
1347
- }
1348
- }
1349
- }
1350
-
1351
- // form-text-style 统一字体样式 - label加粗700、输入框值常规400、统一16px思源黑体
1352
- &.h-form-form-text-style {
1353
- // 统一字体变量
1354
- @font-label: {
1355
- font-family: 'Source Han Sans', sans-serif;
1356
- font-weight: 700; // label加粗
1357
- font-size: 16px;
1358
- };
1359
-
1360
- @font-value: {
1361
- font-family: 'Source Han Sans', sans-serif;
1362
- font-weight: 400; // 值常规
1363
- font-size: 16px;
1364
- font-variation-settings: "opsz" auto;
1365
- };
1366
-
1367
- @color-primary: #313131;
1368
- @height-value: 32px;
1369
-
1370
- // 表单项基础布局 - label固定宽度,控件占满剩余空间
1371
- :deep(.ant-form-item) {
1372
- display: flex !important;
1373
- align-items: center !important;
1374
- }
1375
-
1376
- :deep(.ant-form-inline .ant-form-item) {
1377
- display: flex !important;
1378
- align-items: center !important;
1379
- }
1380
-
1381
- :deep(.ant-form-item-label) {
1382
- flex: none !important;
1383
- }
1384
-
1385
- :deep(.ant-form-item-control-wrapper) {
1386
- flex: 1 !important;
1387
- min-width: 0 !important;
1388
- }
1389
-
1390
- :deep(.ant-form-item-control) {
1391
- flex: 1 !important;
1392
- min-width: 0 !important;
1393
- display: block !important;
1394
- }
1395
-
1396
- // label 样式 - 加粗700,两端对齐
1397
- :deep(.ant-form-item-label) {
1398
- padding-left: 0 !important;
1399
- margin-left: 0 !important;
1400
-
1401
- label {
1402
- height: @height-value;
1403
- opacity: 1;
1404
- line-height: @height-value;
1405
- color: @color-primary;
1406
- margin: 0;
1407
- padding: 0;
1408
- padding-left: 0 !important;
1409
- white-space: nowrap;
1410
- display: block;
1411
- width: 100%;
1412
- text-align: justify;
1413
- text-align-last: justify;
1414
- text-justify: inter-ideograph;
1415
- @font-label();
1416
-
1417
- // 移除冒号
1418
- &::after {
1419
- content: '' !important;
1420
- }
1421
- }
1422
- }
1423
-
1424
- // 输入框值样式 - 常规400
1425
- :deep(.ant-input),
1426
- :deep(.ant-input-affix-wrapper),
1427
- :deep(.ant-select),
1428
- :deep(.ant-input-number),
1429
- :deep(.ant-picker) {
1430
- height: @height-value !important;
1431
- border-radius: 6px !important;
1432
- opacity: 1;
1433
- background: #FFFFFF !important;
1434
- box-sizing: border-box !important;
1435
- border: 1px solid #E5E9F0 !important;
1436
- font-family: 'Source Han Sans', sans-serif !important;
1437
- font-size: 16px !important;
1438
- font-weight: 400 !important;
1439
- line-height: @height-value !important;
1440
- letter-spacing: 0em !important;
1441
- color: @color-primary !important;
1442
- font-variation-settings: "opsz" auto !important;
1443
-
1444
- &::placeholder {
1445
- font-weight: 400 !important;
1446
- line-height: @height-value !important;
1447
- padding: 0 !important;
1448
- }
1449
- }
1450
-
1451
- // 下拉框选中值
1452
- :deep(.ant-select-selection-selected-value) {
1453
- height: @height-value !important;
1454
- opacity: 1;
1455
- font-family: 'Source Han Sans', sans-serif !important;
1456
- font-size: 16px !important;
1457
- font-weight: 400 !important;
1458
- line-height: @height-value !important;
1459
- letter-spacing: 0em !important;
1460
- color: @color-primary !important;
1461
- font-variation-settings: "opsz" auto !important;
1462
- }
1463
-
1464
- // 单选/复选框文字
1465
- :deep(.ant-radio-wrapper),
1466
- :deep(.ant-checkbox-wrapper) {
1467
- span:not(.ant-radio):not(.ant-checkbox) {
1468
- height: @height-value !important;
1469
- opacity: 1;
1470
- font-family: 'Source Han Sans', sans-serif !important;
1471
- font-size: 16px !important;
1472
- font-weight: 400 !important;
1473
- letter-spacing: 0em !important;
1474
- color: @color-primary !important;
1475
- font-variation-settings: "opsz" auto !important;
1476
- }
1477
- }
1478
-
1479
- // 单选框文字 - 使用32px高度
1480
- :deep(.ant-radio-wrapper) {
1481
- span:not(.ant-radio):not(.ant-checkbox) {
1482
- line-height: @height-value !important;
1483
- }
1484
- }
1485
-
1486
- // 复选框文字 - 使用16px高度
1487
- :deep(.ant-checkbox-wrapper) {
1488
- span:not(.ant-radio):not(.ant-checkbox) {
1489
- height: 16px !important;
1490
- line-height: 16px !important;
1491
- }
1492
- }
1493
-
1494
- // 日期选择器
1495
- :deep(.ant-picker-input) {
1496
- input {
1497
- height: @height-value !important;
1498
- opacity: 1;
1499
- font-family: 'Source Han Sans', sans-serif !important;
1500
- font-size: 16px !important;
1501
- font-weight: 400 !important;
1502
- line-height: @height-value !important;
1503
- letter-spacing: 0em !important;
1504
- color: @color-primary !important;
1505
- font-variation-settings: "opsz" auto !important;
1506
- }
1507
- }
1508
-
1509
- // 数字输入框
1510
- :deep(.ant-input-number-input) {
1511
- height: @height-value !important;
1512
- opacity: 1;
1513
- font-family: 'Source Han Sans', sans-serif !important;
1514
- font-size: 16px !important;
1515
- font-weight: 400 !important;
1516
- line-height: @height-value !important;
1517
- letter-spacing: 0em !important;
1518
- color: @color-primary !important;
1519
- font-variation-settings: "opsz" auto !important;
1520
- }
1521
-
1522
- // ant-form-item 包含多选框组时,控件容器占满整行,垂直排列
1523
- :deep(.ant-form-item:has(.ant-checkbox-group)),
1524
- :deep(.ant-form-item:has(.ant-checkbox-group) > .ant-form-item-control-wrapper),
1525
- :deep(.ant-form-item:has(.ant-checkbox-group) > .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content) {
1526
- display: block !important;
1527
- flex: none !important;
1528
- width: 100% !important;
1529
- max-width: 100% !important;
1530
- }
1531
-
1532
- // 多选框组 - 三列排列,与label换行,占满整行
1533
- :deep(.ant-checkbox-group) {
1534
- display: flex !important;
1535
- flex-wrap: wrap !important;
1536
- align-items: flex-start !important;
1537
- width: 100% !important;
1538
- line-height: 16px !important;
1539
-
1540
- .ant-checkbox-wrapper {
1541
- display: inline-flex !important;
1542
- align-items: center !important;
1543
- width: calc(33.33% - 16px) !important;
1544
- min-width: calc(33.33% - 16px) !important;
1545
- flex: 0 0 calc(33.33% - 16px) !important;
1546
- break-inside: avoid !important;
1547
- margin-bottom: 8px !important;
1548
- line-height: 16px !important;
1549
- height: 16px !important;
1550
-
1551
- > span:not(.ant-radio):not(.ant-checkbox) {
1552
- height: 16px !important;
1553
- line-height: 16px !important;
1554
- display: inline-flex !important;
1555
- align-items: center !important;
1556
- }
1557
- }
1558
- }
1559
-
1560
- // 时间范围选择器(两个时间选择器+分隔符)- 在label下方占满一行
1561
- :deep(.ant-time-picker) {
1562
- flex: 1 1 auto !important;
1563
- min-width: 120px !important;
1564
- max-width: calc(50% - 16px) !important;
1565
-
1566
- .ant-time-picker-input {
1567
- height: @height-value !important;
1568
- line-height: @height-value !important;
1569
- }
1570
- }
1571
-
1572
- // 时间范围选择器容器 - 占满宽度,强制换行
1573
- :deep(.ant-form-item:has(.ant-time-picker)) {
1574
- display: block !important;
1575
- flex: none !important;
1576
- width: 100% !important;
1577
- max-width: 100% !important;
1578
- }
1579
-
1580
- :deep(.ant-form-item:has(.ant-time-picker) > .ant-form-item-control-wrapper),
1581
- :deep(.ant-form-item:has(.ant-time-picker) > .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content),
1582
- :deep(.ant-form-item:has(.ant-time-picker) .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content) {
1583
- flex: none !important;
1584
- max-width: 100% !important;
1585
- width: 100% !important;
1586
- display: block !important;
1587
- }
1588
-
1589
- // 时间范围选择器的外层容器 - flex水平排列
1590
- :deep(.ant-form-item:has(.ant-time-picker) .ant-form-item-children) {
1591
- display: flex !important;
1592
- flex-wrap: wrap !important;
1593
- align-items: center !important;
1594
- width: 100% !important;
1595
- }
1596
-
1597
- // 时间范围选择器的flex容器(两个时间选择器+分隔符)- 水平排列
1598
- :deep(.ant-form-item:has(.ant-time-picker) .ant-form-item-children > div) {
1599
- display: flex !important;
1600
- flex-direction: row !important;
1601
- flex-wrap: nowrap !important;
1602
- align-items: center !important;
1603
- width: 100% !important;
1604
- gap: 8px !important;
1605
- }
1606
-
1607
- // 移除容器内时间选择器的宽度限制,让它们自动伸缩
1608
- :deep(.ant-form-item:has(.ant-time-picker) .ant-form-item-children > div > .ant-time-picker) {
1609
- flex: 1 1 0% !important;
1610
- max-width: none !important;
1611
- min-width: 0 !important;
1612
- }
1613
-
1614
- // ant-form-item 包含多选框组时,控件容器占满整行
1615
- :deep(.ant-form-item:has(.ant-checkbox-group) > .ant-form-item-control-wrapper),
1616
- :deep(.ant-form-item:has(.ant-checkbox-group) > .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content) {
1617
- flex: 1 1 100% !important;
1618
- max-width: 100% !important;
1619
- width: 100% !important;
1620
- }
1621
-
1622
- // 多选框样式 - 16*16大小
1623
- :deep(.ant-checkbox) {
1624
- display: inline-flex !important;
1625
- align-items: center !important;
1626
- justify-content: center !important;
1627
- width: 16px !important;
1628
- height: 16px !important;
1629
- flex-shrink: 0 !important;
1630
- line-height: 0 !important;
1631
-
1632
- .ant-checkbox-inner {
1633
- display: block !important;
1634
- width: 16px !important;
1635
- height: 16px !important;
1636
- opacity: 1;
1637
- background: #FFFFFF !important;
1638
- box-sizing: border-box !important;
1639
- border: 1px solid #CDCFD4 !important;
1640
- border-radius: 2px !important;
1641
- position: relative !important;
1642
- overflow: hidden !important;
1643
-
1644
- // 选中时的对勾
1645
- &::after {
1646
- display: block !important;
1647
- width: 5px !important;
1648
- height: 9px !important;
1649
- opacity: 1 !important;
1650
- border: 2px solid #FFFFFF !important;
1651
- border-top: 0 !important;
1652
- border-left: 0 !important;
1653
- background: transparent !important;
1654
- position: absolute !important;
1655
- top: 50% !important;
1656
- left: 50% !important;
1657
- transform: translate(-50%, -50%) rotate(45deg) translateY(-1px) !important;
1658
- content: '' !important;
1659
- box-sizing: border-box !important;
1660
- }
1661
- }
1662
-
1663
- &.ant-checkbox-checked .ant-checkbox-inner {
1664
- background: #0057FE !important;
1665
- border-color: #0057FE !important;
1666
- }
1667
-
1668
- &.ant-checkbox-indeterminate .ant-checkbox-inner {
1669
- background: #0057FE !important;
1670
- border-color: #0057FE !important;
1671
-
1672
- &::after {
1673
- display: block !important;
1674
- width: 8px !important;
1675
- height: 2px !important;
1676
- opacity: 1 !important;
1677
- background: #FFFFFF !important;
1678
- border: none !important;
1679
- position: absolute !important;
1680
- top: 50% !important;
1681
- left: 50% !important;
1682
- transform: translate(-50%, -50%) !important;
1683
- content: '' !important;
1684
- box-sizing: border-box !important;
1685
- }
1686
- }
1687
- }
1688
-
1689
- // 多选框文字样式 - 三列排列,水平排列
1690
- :deep(.ant-checkbox-wrapper) {
1691
- span:not(.ant-checkbox) {
1692
- display: inline !important;
1693
- height: auto !important;
1694
- opacity: 1;
1695
- font-family: 'Source Han Sans', sans-serif !important;
1696
- font-size: 16px !important;
1697
- font-weight: normal !important;
1698
- line-height: 16px !important;
1699
- letter-spacing: 0em !important;
1700
- font-feature-settings: "kern" on !important;
1701
- color: @color-primary !important;
1702
- white-space: nowrap !important;
1703
- vertical-align: middle !important;
1704
- }
1705
- }
1706
- }
1707
- }
1708
- </style>
1
+ <script setup>
2
+ import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
3
+ import { ref, computed, useAttrs } from 'vue'
4
+
5
+ const xAddNativeFormRef = ref()
6
+ // 是否隐藏表单
7
+ const isHidden = ref(false)
8
+
9
+ const attrs = useAttrs()
10
+ const props = defineProps({
11
+ // 是否启用 horizontal 模式的自定义配置
12
+ enableHorizontalCustom: {
13
+ type: Boolean,
14
+ default: false
15
+ },
16
+ // 表单默认是否隐藏
17
+ defaultHidden: {
18
+ type: Boolean,
19
+ default: false
20
+ }
21
+ })
22
+ // 如果设置了 defaultHidden 为 true,则初始隐藏
23
+ if (props.defaultHidden) {
24
+ isHidden.value = true
25
+ }
26
+ // 从 radio-style_1 属性值中获取 padding
27
+ const radioPadding = computed(() => {
28
+ const val = attrs['radio-style_1']
29
+ if (val !== undefined && val !== '' && val !== null) {
30
+ const num = Number(val)
31
+ return isNaN(num) ? 9 : num
32
+ }
33
+ return 9
34
+ })
35
+
36
+ // 包装器样式对象
37
+ const wrapperStyleObject = computed(() => {
38
+ return {
39
+ '--radio-padding': `${radioPadding.value}px`
40
+ }
41
+ })
42
+
43
+ // 启动时间选择框弹出到body
44
+ const enablePopupToBody = computed(() => {
45
+ const a = attrs
46
+ return a.enablePopupToBody === 'true' || a.enablePopupToBody === true
47
+ })
48
+ const wrapperClassObject = computed(() => {
49
+ const a = attrs
50
+ const classes = {}
51
+
52
+ // ========== 布尔型样式开关(属性存在且为true/''/'true'时生效)==========
53
+ // query-conditions : 查询条件样式 - 标签两端对齐分散占满、垂直居中、移除冒号
54
+ // padding-50 : 左右内边距50px样式 - 表单项左右各50px内边距
55
+ // label-text-horizontal : 标签文字水平排列 - 强制LTR方向,*在右侧
56
+ // label-text-justify : 标签文字两端对齐 - label宽度填满、text-align:justify
57
+ // simple-inline : 简化内联模式 - 隐藏label,仅显示输入控件
58
+ // simple-inline-show-label: 简化内联带标签 - 显示label(90px宽),带圆角输入框
59
+ // label-justify : label两端对齐分散 - 固定80px宽度,冒号去除
60
+ // charge-form : 收费表单样式 - 固定64px label宽度,30px高度
61
+ // mini-form : 迷你表单布局 - ant-form-inline紧凑模式
62
+ // content-right : 内容右对齐 - ant-row-flex内容靠右
63
+ // label-font-style : 独立label字体 - 23px高、16px字号的label样式
64
+ // small-input-style : 小输入框样式 - 32px高、234px宽、6px圆角、Source Han Sans
65
+ // select-inside-label-style: 下拉框内部标签 - label隐藏在下拉框placeholder中
66
+ // his-form-style : HIS表单统一下拉框 - 100%宽度、32px高、16px字号、Source Han Sans
67
+ // form-text-style : 统一字体样式 - label加粗700、输入框常规400、统一16px字号思源黑体
68
+ const booleanStyleKeys = [
69
+ 'query-conditions',
70
+ 'padding-50',
71
+ 'label-text-horizontal',
72
+ 'label-text-justify',
73
+ 'simple-inline',
74
+ 'simple-inline-show-label',
75
+ 'label-justify',
76
+ 'charge-form',
77
+ 'mini-form',
78
+ 'content-right',
79
+ 'label-font-style',
80
+ 'small-input-style',
81
+ 'select-inside-label-style',
82
+ 'his-form-style',
83
+ 'form-text-style'
84
+ ]
85
+ // ========== 存在即生效样式开关(属性存在时直接生效)==========
86
+ // radio-style_1 : 单选按钮样式1 - 可配置padding,蓝色选中背景
87
+ const existStyleKeys = ['radio-style_1']
88
+ for (const key of booleanStyleKeys) {
89
+ const val = a[key]
90
+ const truthy = val === true || val === '' || val === 'true'
91
+ if (truthy) classes[`h-form-${key}`] = true
92
+ }
93
+ // 检查存在即生效的样式开关
94
+ for (const key of existStyleKeys) {
95
+ if (key in a) classes[`h-form-${key}`] = true
96
+ }
97
+
98
+ return classes
99
+ })
100
+
101
+ defineExpose({
102
+ getXAddNativeFormInstance: () => xAddNativeFormRef.value,
103
+ init: (params) => xAddNativeFormRef.value && xAddNativeFormRef.value.init && xAddNativeFormRef.value.init(params),
104
+ asyncSubmit: () => xAddNativeFormRef.value && xAddNativeFormRef.value.asyncSubmit && xAddNativeFormRef.value.asyncSubmit(),
105
+ validateForm: () => xAddNativeFormRef.value && xAddNativeFormRef.value.validateForm && xAddNativeFormRef.value.validateForm(),
106
+ /** 等待配置结束的异步方法,委托给内部 XAddNativeForm */
107
+ waitConfigEnd: () => xAddNativeFormRef.value?.waitConfigEnd?.() ?? Promise.resolve(),
108
+ /** 隐藏表单 */
109
+ hideForm: () => { isHidden.value = true },
110
+ /** 显示表单 */
111
+ showForm: () => { isHidden.value = false },
112
+ /** 切换表单显示状态 */
113
+ toggleForm: () => { isHidden.value = !isHidden.value }
114
+ })
115
+
116
+ </script>
117
+
118
+ <template>
119
+ <div
120
+ class="h-form-wrapper"
121
+ :class="[
122
+ wrapperClassObject
123
+ ]"
124
+ :style="wrapperStyleObject"
125
+ v-show="!isHidden"
126
+ >
127
+
128
+ <x-add-native-form
129
+ ref="xAddNativeFormRef"
130
+ v-bind="$attrs"
131
+ :enable-popup-to-body="enablePopupToBody"
132
+ :enable-horizontal-custom="props.enableHorizontalCustom"
133
+ @configEnd="$emit('configEnd')"
134
+ v-on="$listeners"
135
+ >
136
+ <template v-for="(_, name) in $slots" #[name]="slotData">
137
+ <slot :name="name" v-bind="slotData" />
138
+ </template>
139
+ </x-add-native-form>
140
+ </div>
141
+ </template>
142
+
143
+ <style scoped lang="less">
144
+ // 单选框 padding 变量
145
+ @radio-padding: var(--radio-padding, 9px);
146
+
147
+ .h-form-wrapper {
148
+ // 基础样式
149
+ :deep(.ant-form-item) {
150
+ margin-bottom: 4px;
151
+ }
152
+
153
+ &.h-form-mini-form {
154
+ :deep(.ant-form-inline) {
155
+ .ant-row-flex {
156
+ .ant-col {
157
+ flex: auto !important;
158
+ max-width: 250px !important;
159
+ }
160
+ }
161
+ }
162
+
163
+ :deep(.ant-form-item) {
164
+ margin-right: 0px !important;
165
+ }
166
+ }
167
+
168
+ &.h-form-content-right {
169
+ :deep(.ant-form-inline) {
170
+ .ant-row-flex {
171
+ justify-content: right;
172
+ }
173
+ }
174
+ }
175
+
176
+ // query-conditions 样式
177
+ &.h-form-query-conditions {
178
+ :deep(.ant-card-body) {
179
+ padding: 0px;
180
+ }
181
+
182
+ :deep(.ant-row-flex) {
183
+ .x-form-col-wrapper {
184
+ .ant-form-item {
185
+ display: flex !important;
186
+ width: 100%;
187
+ height: 100%;
188
+ margin-bottom: 0px;
189
+ justify-content: space-between;
190
+
191
+ .ant-form-item-label {
192
+ display: flex;
193
+ align-items: center;
194
+ height: 100%;
195
+
196
+ label {
197
+ height: auto;
198
+ font-family: Source Han Sans;
199
+ font-size: 16px;
200
+ font-weight: normal;
201
+ line-height: normal;
202
+ color: #313131;
203
+ display: block !important; // 保持 block 以支持两端对齐
204
+ width: 100%;
205
+ white-space: nowrap;
206
+ margin: 0;
207
+ text-align: justify;
208
+ text-align-last: justify;
209
+ text-justify: inter-ideograph;
210
+ box-sizing: border-box;
211
+ padding-right: 0 !important; // 移除冒号预留空间
212
+
213
+ // 使用 line-height 实现垂直居中
214
+ line-height: 40px; // 设置与容器高度相同的行高
215
+ }
216
+
217
+ & > label::after {
218
+ display: none !important;
219
+ }
220
+ }
221
+ }
222
+ }
223
+
224
+ .ant-col-24 {
225
+ padding: 0px 4px !important;
226
+ }
227
+ }
228
+ }
229
+
230
+ // 单选框样式设计图中切换模式的样式
231
+ &.h-form-radio-style_1 {
232
+ :deep(.ant-radio-button-wrapper) {
233
+ padding: 0 @radio-padding;
234
+ }
235
+
236
+ :deep(.ant-radio-button-wrapper-checked) {
237
+ background-color: #0057FE;
238
+ color: white;
239
+ }
240
+ }
241
+
242
+ &.h-form-simple-inline {
243
+ :deep(.ant-form-item-label) {
244
+ display: none !important;
245
+ }
246
+
247
+ :deep(.ant-form-item-control-wrapper) {
248
+ width: 100%;
249
+ }
250
+ }
251
+
252
+ &.h-form-padding-50 {
253
+ // ant-row-flex 样式
254
+ :deep(.ant-row-flex) {
255
+ padding-left: 50px;
256
+ padding-right: 50px
257
+ }
258
+ }
259
+
260
+ // 单选框样式设计图中切换模式的样式
261
+ &.h-form-radio-style_1 {
262
+ :deep(.ant-radio-button-wrapper) {
263
+ padding: 0 @radio-padding;
264
+ }
265
+
266
+ :deep(.ant-radio-button-wrapper-checked) {
267
+ background-color: #0057FE;
268
+ color: white;
269
+ }
270
+ }
271
+
272
+ // charge-form 样式
273
+ &.h-form-charge-form {
274
+ margin-top: 2px !important;
275
+ // 定义变量
276
+ @font-common: {
277
+ font-family: 'Source Han Sans', sans-serif;
278
+ font-size: 16px;
279
+ font-weight: normal;
280
+ letter-spacing: 0em;
281
+ font-feature-settings: "kern" on;
282
+ };
283
+
284
+ @color-primary: #313131;
285
+ @color-placeholder: #999999;
286
+
287
+ // 定义混合宏
288
+ .input-base() {
289
+ width: 100%;
290
+ height: 30px;
291
+ line-height: 30px;
292
+ vertical-align: top;
293
+ margin: 0;
294
+ text-align: left;
295
+ color: @color-primary;
296
+ opacity: 1;
297
+ @font-common();
298
+ }
299
+
300
+ .placeholder-base() {
301
+ color: @color-placeholder;
302
+ opacity: 1;
303
+ @font-common();
304
+ }
305
+
306
+ .option-group-base() {
307
+ display: flex;
308
+ flex-wrap: wrap;
309
+ align-items: center;
310
+ min-height: 30px;
311
+
312
+ .ant-radio-wrapper,
313
+ .ant-checkbox-wrapper {
314
+ height: 30px;
315
+ line-height: 30px;
316
+ margin-right: 16px;
317
+ max-width: 100%;
318
+ }
319
+ }
320
+
321
+ :deep(.ant-form-item) {
322
+ margin-bottom: 16px;
323
+ margin-top: 0;
324
+ padding: 0;
325
+ display: flex;
326
+ align-items: center;
327
+
328
+ .ant-form-item-label {
329
+ text-align: left;
330
+ margin: 0 11px 0 0 !important;
331
+ width: 64px;
332
+ min-width: 64px;
333
+ max-width: 64px;
334
+ flex-shrink: 0;
335
+
336
+ label {
337
+ height: 23px;
338
+ opacity: 1;
339
+ line-height: 23px;
340
+ color: @color-primary;
341
+ margin: 0;
342
+ padding: 0;
343
+ white-space: nowrap;
344
+ display: block;
345
+ @font-common();
346
+
347
+ // 移除冒号
348
+ &::after {
349
+ content: '';
350
+ }
351
+ }
352
+ }
353
+
354
+ .ant-form-item-control-wrapper {
355
+ margin: 0;
356
+ padding: 0;
357
+ flex: 1;
358
+ min-width: 0;
359
+ display: flex;
360
+ align-items: center;
361
+
362
+ .ant-form-item-control {
363
+ margin: 0;
364
+ padding: 0;
365
+ width: 100%;
366
+ text-align: left;
367
+ line-height: 30px !important;
368
+
369
+ // 输入框样式统一
370
+ .ant-input,
371
+ .ant-input-affix-wrapper,
372
+ .ant-select,
373
+ .ant-input-number,
374
+ .ant-picker,
375
+ .ant-radio-group,
376
+ .ant-checkbox-group {
377
+ .input-base();
378
+ }
379
+
380
+ // 选择器样式
381
+ .ant-select {
382
+ .ant-select-selector {
383
+ .input-base();
384
+ height: 30px;
385
+ line-height: 30px;
386
+
387
+ .ant-select-selection-item {
388
+ .input-base();
389
+ line-height: 30px;
390
+ }
391
+
392
+ .ant-select-selection-placeholder {
393
+ .placeholder-base();
394
+ line-height: 30px;
395
+ color: #313131;
396
+ }
397
+ }
398
+ }
399
+
400
+ // 日期选择器样式
401
+ .ant-picker {
402
+ height: 30px;
403
+
404
+ .ant-picker-input {
405
+ height: 30px;
406
+ line-height: 30px;
407
+ .input-base();
408
+
409
+ input {
410
+ .input-base();
411
+ height: 30px;
412
+ line-height: 30px;
413
+ }
414
+ }
415
+ }
416
+
417
+ // 数字输入框样式
418
+ .ant-input-number {
419
+ height: 30px;
420
+
421
+ .ant-input-number-input {
422
+ .input-base();
423
+ height: 30px;
424
+ line-height: 30px;
425
+ }
426
+ }
427
+
428
+ // 单选框组样式
429
+ .ant-radio-group {
430
+ .option-group-base();
431
+ }
432
+
433
+ // 复选框组样式
434
+ .ant-checkbox-group {
435
+ .option-group-base();
436
+ }
437
+ }
438
+ }
439
+ }
440
+
441
+ // 重置可能的容器边距
442
+ :deep(.ant-row) {
443
+ margin: 0;
444
+ padding: 0;
445
+
446
+ .ant-col {
447
+ margin: 0;
448
+ padding: 0;
449
+ }
450
+ }
451
+
452
+ // 强制重置所有可能的表单项样式
453
+ :deep(.ant-form-item) {
454
+ margin: 0 0 16px 0 !important;
455
+
456
+ // 重置可能的内部边距
457
+ .ant-form-item-control-input,
458
+ .ant-form-item-control-input-content {
459
+ margin: 0 !important;
460
+ padding: 0 !important;
461
+ }
462
+ }
463
+ }
464
+
465
+ // label-text-horizontal 样式 - 只控制label文字从左到右排列
466
+ &.h-form-label-text-horizontal {
467
+ :deep(.ant-form-item-label) {
468
+ text-align: left;
469
+ direction: ltr;
470
+
471
+ // 标签文字水平排列
472
+ .ant-form-item-label-text {
473
+ display: inline-block;
474
+ text-align: left;
475
+ direction: ltr;
476
+ unicode-bidi: normal;
477
+ }
478
+
479
+ // 必填标识水平排列
480
+ .ant-form-item-required::before {
481
+ margin-right: 4px;
482
+ margin-left: 0;
483
+ }
484
+ }
485
+ }
486
+
487
+ // label-text-justify 样式 - 标签文字两端对齐分散占满 必填*可能会有问题
488
+ &.h-form-label-text-justify {
489
+ :deep(.ant-form-item-label) {
490
+ padding-left: 0;
491
+ padding-right: 8px;
492
+
493
+ label {
494
+ position: relative;
495
+ display: block;
496
+ width: 100%;
497
+ white-space: nowrap;
498
+ margin: 0;
499
+ text-indent: 0;
500
+ text-align: justify;
501
+ text-align-last: justify;
502
+ text-justify: inter-ideograph;
503
+ box-sizing: border-box;
504
+ padding-right: 12px; // 给绝对定位的冒号留出空间
505
+ }
506
+
507
+ // 将冒号绝对定位到最右侧,避免参与两端对齐计算
508
+ label::after {
509
+ position: absolute;
510
+ right: 0;
511
+ }
512
+ }
513
+ }
514
+
515
+ // label-justify 样式 - 两端对齐,应用指定字体样式
516
+ &.h-form-label-justify {
517
+ padding-left: 8px;
518
+
519
+ :deep(.ant-form-item-label) {
520
+ padding-left: 0;
521
+ padding-right: 8px;
522
+ // 限制label容器的宽度,强制两端对齐
523
+ width: 80px !important;
524
+ min-width: 80px;
525
+ max-width: 80px;
526
+
527
+ label {
528
+ position: relative;
529
+ display: block;
530
+ width: 100%;
531
+ white-space: nowrap;
532
+ margin: 0;
533
+ text-indent: 0;
534
+ text-align: justify;
535
+ text-align-last: justify;
536
+ text-justify: inter-ideograph;
537
+ box-sizing: border-box;
538
+ padding-right: 12px; // 给绝对定位的冒号留出空间
539
+
540
+ // 应用指定的字体样式
541
+ height: 39px;
542
+ opacity: 1;
543
+ font-family: 'Source Han Sans', sans-serif;
544
+ font-size: 16px;
545
+ font-weight: normal;
546
+ line-height: 39px;
547
+ color: #313131;
548
+ }
549
+
550
+ // 去掉冒号
551
+ label::after {
552
+ content: '';
553
+ }
554
+ }
555
+ }
556
+
557
+ // label-font-style 样式 - 独立的label字体样式
558
+ &.h-form-label-font-style {
559
+ :deep(.ant-form-item-label) {
560
+ label {
561
+ height: 23px;
562
+ opacity: 1;
563
+ font-family: Source Han Sans;
564
+ font-size: 16px;
565
+ font-weight: normal;
566
+ line-height: normal;
567
+ letter-spacing: 0em;
568
+ font-feature-settings: "kern" on;
569
+ color: #313131;
570
+ }
571
+ }
572
+ }
573
+
574
+ &.h-form-simple-inline-show-label {
575
+ // ========== 公共字体样式变量 ==========
576
+ @common-font: {
577
+ font-family: Source Han Sans !important;
578
+ font-size: 16px !important;
579
+ font-weight: normal !important;
580
+ letter-spacing: 0em !important;
581
+ font-feature-settings: "kern" on !important;
582
+ };
583
+
584
+ @common-text-color: #313131;
585
+ @common-placeholder-color: #999;
586
+ @common-border-color: #E5E9F0;
587
+ @common-focus-color: #0057FE;
588
+
589
+ // ========== 表单项基础布局 ==========
590
+ :deep(.ant-form-item) {
591
+ display: flex !important;
592
+ flex-direction: row !important;
593
+ align-items: flex-start !important;
594
+ margin: 0 !important;
595
+ padding: 0 !important;
596
+ margin-bottom: 0 !important;
597
+ }
598
+
599
+ // 修复 ant-row 伪元素
600
+ :deep(.ant-row) {
601
+ &::before,
602
+ &::after {
603
+ display: table !important;
604
+ content: '' !important;
605
+ }
606
+ }
607
+
608
+ // ========== Label 样式 ==========
609
+ :deep(.ant-form-item-label) {
610
+ display: flex !important;
611
+ align-items: flex-start !important;
612
+ padding: 0 8px 0 0 !important;
613
+ width: 90px !important;
614
+ min-width: 90px !important;
615
+ max-width: 90px !important;
616
+ flex-shrink: 0 !important;
617
+ flex: none !important;
618
+
619
+ label {
620
+ position: relative !important;
621
+ display: block !important;
622
+ width: 100% !important;
623
+ height: 39px !important;
624
+ margin: 0 !important;
625
+ padding: 0 !important;
626
+ opacity: 1 !important;
627
+ @common-font();
628
+ line-height: 39px !important;
629
+ color: @common-text-color !important;
630
+ text-align: justify !important;
631
+ text-align-last: justify !important;
632
+ text-justify: inter-ideograph !important;
633
+ text-indent: 12px !important;
634
+ box-sizing: border-box !important;
635
+
636
+ &::after {
637
+ display: none !important;
638
+ content: none !important;
639
+ }
640
+
641
+ &:not(.ant-form-item-required)::before {
642
+ display: none !important;
643
+ content: none !important;
644
+ }
645
+ }
646
+ }
647
+
648
+ // 必填项星号
649
+ :deep(.ant-form-item-required) {
650
+ &::before {
651
+ display: block !important;
652
+ visibility: visible !important;
653
+ content: '*' !important;
654
+ position: absolute !important;
655
+ left: -8px !important;
656
+ top: 40% !important;
657
+ transform: translateY(-50%) !important;
658
+ color: #ff4d4f !important;
659
+ font-size: 14px !important;
660
+ font-family: SimSun, sans-serif !important;
661
+ z-index: 1 !important;
662
+ line-height: 1 !important;
663
+ }
664
+ }
665
+
666
+ // ========== 控件容器 ==========
667
+ :deep(.ant-form-item-control-wrapper) {
668
+ flex: 1 !important;
669
+ min-width: 0 !important;
670
+ width: auto !important;
671
+
672
+ .ant-form-item-control {
673
+ width: 100% !important;
674
+
675
+ .ant-form-item-children {
676
+ display: block !important;
677
+ width: 100% !important;
678
+ padding-right: 41px;
679
+ padding-left: 6px;
680
+ }
681
+ }
682
+ }
683
+
684
+ // ========== 公共输入框样式 Mixin ==========
685
+ .input-common() {
686
+ border-radius: 6px !important;
687
+ box-sizing: border-box !important;
688
+ border: 1px solid @common-border-color !important;
689
+ @common-font();
690
+ color: @common-text-color !important;
691
+
692
+ &:hover,
693
+ &:focus {
694
+ border-color: @common-focus-color !important;
695
+ box-shadow: none !important;
696
+ }
697
+
698
+ &[readonly] {
699
+ background-color: #f5f5f5;
700
+ cursor: not-allowed;
701
+ }
702
+ }
703
+
704
+ // ========== 普通输入框(不包括文本域) ==========
705
+ :deep(.ant-input:not(textarea)) {
706
+ .input-common();
707
+ height: 39px !important;
708
+ line-height: 37px !important;
709
+ padding: 0 11px !important;
710
+
711
+ &::placeholder {
712
+ line-height: 37px !important;
713
+ color: @common-placeholder-color !important;
714
+ }
715
+ }
716
+
717
+ // ========== 文本域样式 ==========
718
+ :deep(textarea.ant-input) {
719
+ .input-common();
720
+ min-height: 80px !important;
721
+ padding: 8px 11px !important;
722
+ line-height: 22px !important;
723
+ resize: vertical !important;
724
+
725
+ &::placeholder {
726
+ color: @common-placeholder-color !important;
727
+ line-height: 22px !important;
728
+ }
729
+ }
730
+
731
+ // ========== 下拉框样式 ==========
732
+ :deep(.ant-select) {
733
+ .ant-select-selection {
734
+ border-radius: 6px !important;
735
+ border: 1px solid @common-border-color !important;
736
+ height: 39px !important;
737
+
738
+ &:hover {
739
+ border-color: @common-focus-color !important;
740
+ }
741
+ }
742
+
743
+ .ant-select-selection__rendered {
744
+ height: 39px !important;
745
+ line-height: 39px !important;
746
+ margin: 0 !important;
747
+ padding: 0 11px !important;
748
+ }
749
+
750
+ .ant-select-selection__placeholder {
751
+ @common-font();
752
+ color: @common-placeholder-color !important;
753
+ line-height: 37px !important;
754
+ height: 37px !important;
755
+ top: 0 !important;
756
+ margin-top: 0 !important;
757
+ padding-left: 11px;
758
+ }
759
+
760
+ .ant-select-selection-selected-value {
761
+ @common-font();
762
+ color: @common-text-color !important;
763
+ line-height: 37px !important;
764
+ padding: 0 !important;
765
+ }
766
+
767
+ .ant-select-arrow {
768
+ right: 11px !important;
769
+ top: 50% !important;
770
+ transform: translateY(-50%) !important;
771
+
772
+ .ant-select-arrow-icon {
773
+ color: @common-placeholder-color !important;
774
+ }
775
+ }
776
+ }
777
+
778
+ :deep(.ant-select-focused) {
779
+ .ant-select-selection {
780
+ border-color: @common-focus-color !important;
781
+ box-shadow: none !important;
782
+ }
783
+ }
784
+
785
+ // ========== 单选框样式 ==========
786
+ :deep(.ant-radio-group) {
787
+ display: flex !important;
788
+ align-items: center !important;
789
+ height: 39px !important;
790
+ line-height: 39px !important;
791
+ }
792
+
793
+ :deep(.ant-radio-wrapper) {
794
+ @common-font();
795
+ line-height: 39px !important;
796
+ color: @common-text-color !important;
797
+ margin-right: 16px !important;
798
+ height: 39px !important;
799
+ display: inline-flex !important;
800
+ align-items: center !important;
801
+
802
+ // 单选框后面的文字
803
+ span:not(.ant-radio) {
804
+ @common-font();
805
+ line-height: 39px !important;
806
+ color: @common-text-color !important;
807
+ padding: 0 !important;
808
+ }
809
+ }
810
+
811
+ // 单选框圆圈
812
+ :deep(.ant-radio) {
813
+ margin-right: 4px !important;
814
+
815
+ .ant-radio-inner {
816
+ width: 16px !important;
817
+ height: 16px !important;
818
+ background: #FFFFFF !important;
819
+ border: 1px solid #CDCFD4 !important;
820
+ border-radius: 50% !important;
821
+ position: relative !important;
822
+
823
+ &::after {
824
+ width: 10px !important;
825
+ height: 10px !important;
826
+ background: @common-focus-color !important;
827
+ border-radius: 50% !important;
828
+ position: absolute !important;
829
+ top: 50% !important;
830
+ left: 50% !important;
831
+ transform: translate(-50%, -50%) !important;
832
+ margin: 0 !important;
833
+ }
834
+ }
835
+
836
+ // 选中状态
837
+ &.ant-radio-checked .ant-radio-inner {
838
+ border-color: @common-focus-color !important;
839
+ background: #FFFFFF !important;
840
+ }
841
+
842
+ // hover 状态
843
+ &:hover .ant-radio-inner {
844
+ border-color: @common-focus-color !important;
845
+ }
846
+ }
847
+ }
848
+
849
+ // small-input-style 小输入框文字样式(32px高度,234px宽度)
850
+ &.h-form-small-input-style {
851
+ // 输入框基础样式
852
+ :deep(.ant-input) {
853
+ width: 234px;
854
+ height: 32px;
855
+ border-radius: 6px;
856
+ opacity: 1;
857
+ box-sizing: border-box;
858
+ border: 1px solid #E5E9F0;
859
+
860
+ &::placeholder {
861
+ height: 23px;
862
+ opacity: 1;
863
+ font-family: Source Han Sans;
864
+ font-size: 16px;
865
+ font-weight: normal;
866
+ line-height: 32px;
867
+ letter-spacing: 0em;
868
+ font-feature-settings: "kern" on;
869
+ color: #A7A7A7;
870
+ }
871
+ }
872
+
873
+ :deep(.ant-input-affix-wrapper) {
874
+ width: 234px;
875
+ height: 32px;
876
+ border-radius: 6px;
877
+ opacity: 1;
878
+ box-sizing: border-box;
879
+ border: 1px solid #E5E9F0;
880
+
881
+ &::placeholder {
882
+ height: 23px;
883
+ opacity: 1;
884
+ font-family: Source Han Sans;
885
+ font-size: 16px;
886
+ font-weight: normal;
887
+ line-height: 32px;
888
+ letter-spacing: 0em;
889
+
890
+ font-feature-settings: "kern" on;
891
+ color: #A7A7A7;
892
+ }
893
+
894
+ .ant-input {
895
+ font-family: Source Han Sans;
896
+ font-size: 16px;
897
+ font-weight: normal;
898
+ line-height: 32px;
899
+ letter-spacing: 0em;
900
+
901
+ font-feature-settings: "kern" on;
902
+ color: #313131;
903
+ }
904
+ }
905
+
906
+ // 输入框文字样式
907
+ :deep(.ant-input) {
908
+ font-family: Source Han Sans;
909
+ font-size: 16px;
910
+ font-weight: normal;
911
+ line-height: 32px;
912
+ letter-spacing: 0em;
913
+
914
+ font-feature-settings: "kern" on;
915
+ color: #313131;
916
+ }
917
+
918
+ // 下拉框样式
919
+ :deep(.ant-select) {
920
+ width: 234px;
921
+
922
+ .ant-select-selector {
923
+ width: 234px !important;
924
+ height: 32px !important;
925
+ padding: 0 11px !important;
926
+ border-radius: 6px !important;
927
+ border: 1px solid #E5E9F0 !important;
928
+ background: #fff !important;
929
+ }
930
+
931
+ .ant-select-selection-placeholder,
932
+ .ant-select-selection__placeholder,
933
+ .ant-select-search__field__placeholder {
934
+ position: absolute !important;
935
+ top: 0 !important;
936
+ right: 11px !important;
937
+ max-width: 100% !important;
938
+ height: 32px !important;
939
+ margin-top: 0 !important;
940
+ overflow: hidden !important;
941
+ color: #A7A7A7 !important;
942
+ line-height: 30px !important;
943
+ white-space: nowrap !important;
944
+ text-overflow: ellipsis !important;
945
+ font-family: Source Han Sans !important;
946
+ font-size: 16px !important;
947
+ font-weight: normal !important;
948
+ letter-spacing: 0em !important;
949
+ font-feature-settings: "kern" on !important;
950
+ }
951
+
952
+ .ant-select-selection-selected-value {
953
+ opacity: 1;
954
+ font-family: Source Han Sans;
955
+ font-size: 16px;
956
+ font-weight: normal;
957
+ line-height: 32px;
958
+ letter-spacing: 0em;
959
+
960
+ font-feature-settings: "kern" on;
961
+ color: #313131;
962
+ }
963
+ }
964
+
965
+ // 单选按钮组样式
966
+ :deep(.ant-radio-group) {
967
+ display: inline-flex;
968
+ flex-wrap: wrap;
969
+ gap: 0;
970
+ }
971
+
972
+ :deep(.ant-radio-button-wrapper) {
973
+ height: 32px;
974
+ line-height: 32px;
975
+ padding: 0 7px;
976
+ font-family: Source Han Sans;
977
+ font-size: 16px;
978
+ font-weight: normal;
979
+ letter-spacing: 0em;
980
+
981
+ font-feature-settings: "kern" on;
982
+ color: #313131;
983
+ background: #fff;
984
+ border: 1px solid #E5E9F0;
985
+ border-radius: 0;
986
+
987
+ &:first-child {
988
+ border-radius: 6px 0 0 6px;
989
+ }
990
+
991
+ &:last-child {
992
+ border-radius: 0 6px 6px 0;
993
+ }
994
+
995
+ &:not(:first-child)::before {
996
+ display: none;
997
+ }
998
+
999
+ .ant-radio-button {
1000
+ display: none;
1001
+ }
1002
+
1003
+ .ant-radio-button-input {
1004
+ display: none;
1005
+ }
1006
+
1007
+ & > span:not(.ant-radio-button) {
1008
+ font-family: Source Han Sans;
1009
+ font-size: 16px;
1010
+ font-weight: normal;
1011
+ line-height: 32px;
1012
+ letter-spacing: 0em;
1013
+ color: #313131;
1014
+
1015
+ font-feature-settings: "kern" on;
1016
+ }
1017
+ }
1018
+
1019
+ :deep(.ant-radio-button-wrapper-checked) {
1020
+ background: #0057FE;
1021
+ border-color: #0057FE;
1022
+
1023
+ & > span:not(.ant-radio-button) {
1024
+ color: #fff;
1025
+ }
1026
+ }
1027
+
1028
+ // 单选框样式
1029
+ :deep(.ant-radio-wrapper) {
1030
+ height: 40px;
1031
+ line-height: 40px;
1032
+ font-family: Source Han Sans;
1033
+ font-size: 16px;
1034
+ font-weight: normal;
1035
+ letter-spacing: 0em;
1036
+ font-feature-settings: "kern" on;
1037
+ color: #313131;
1038
+
1039
+ .ant-radio {
1040
+ width: 16px;
1041
+ height: 16px;
1042
+ opacity: 1;
1043
+
1044
+ .ant-radio-inner {
1045
+ width: 16px;
1046
+ height: 16px;
1047
+ background: #FFFFFF;
1048
+ box-sizing: border-box;
1049
+ border: 1px solid #CDCFD4;
1050
+ border-radius: 50%;
1051
+
1052
+ &::after {
1053
+ width: 8px;
1054
+ height: 8px;
1055
+ background: #0057FE;
1056
+ border-radius: 50%;
1057
+ top: 50%;
1058
+ left: 50%;
1059
+ transform: translate(-50%, -50%);
1060
+ }
1061
+ }
1062
+ }
1063
+
1064
+ .ant-radio-checked {
1065
+ .ant-radio-inner {
1066
+ border-color: #0057FE;
1067
+ }
1068
+ }
1069
+
1070
+ span:not(.ant-radio) {
1071
+ font-family: Source Han Sans;
1072
+ font-size: 16px;
1073
+ font-weight: normal;
1074
+ line-height: 40px;
1075
+ letter-spacing: 0em;
1076
+ color: #313131;
1077
+
1078
+ font-feature-settings: "kern" on;
1079
+ }
1080
+ }
1081
+ }
1082
+ // select-inside-label-style 下拉框label在选择框内部样式
1083
+ &.h-form-select-inside-label-style {
1084
+ // 隐藏原有的 label
1085
+ :deep(.ant-form-item-label) {
1086
+ display: none !important;
1087
+ }
1088
+
1089
+ // 普通输入框样式
1090
+ :deep(.ant-input:not(textarea)) {
1091
+ border-radius: 6px !important;
1092
+ border: 1px solid #E5E9F0 !important;
1093
+ height: 32px !important;
1094
+ line-height: 37px !important;
1095
+ padding: 0 11px !important;
1096
+ font-family: 'Source Han Sans', sans-serif;
1097
+ font-size: 16px;
1098
+ font-weight: normal;
1099
+ line-height: normal;
1100
+ letter-spacing: 0em;
1101
+ color: #313131;
1102
+
1103
+ &::placeholder {
1104
+ color: #999 !important;
1105
+ }
1106
+
1107
+ &:hover,
1108
+ &:focus {
1109
+ border-color: #0057FE !important;
1110
+ }
1111
+ }
1112
+
1113
+ // 文本域样式
1114
+ :deep(textarea.ant-input) {
1115
+ border-radius: 6px !important;
1116
+ border: 1px solid #E5E9F0 !important;
1117
+ min-height: 80px !important;
1118
+ padding: 8px 11px !important;
1119
+ font-family: 'Source Han Sans', sans-serif;
1120
+ font-size: 16px;
1121
+ font-weight: normal;
1122
+ line-height: normal;
1123
+ letter-spacing: 0em;
1124
+ color: #313131;
1125
+
1126
+ &::placeholder {
1127
+ color: #999 !important;
1128
+ }
1129
+ }
1130
+
1131
+ // 下拉框样式
1132
+ :deep(.ant-select) {
1133
+ .ant-select-selector {
1134
+ border-radius: 6px !important;
1135
+ border: 1px solid #E5E9F0 !important;
1136
+ background: #fff !important;
1137
+ height: 32px !important;
1138
+ padding: 0 11px !important;
1139
+ position: relative !important;
1140
+
1141
+ &:hover,
1142
+ &:focus {
1143
+ border-color: #0057FE !important;
1144
+ }
1145
+ }
1146
+
1147
+ // 聚焦时去掉阴影,保持与输入框一致
1148
+ &.ant-select-focused .ant-select-selector {
1149
+ border-color: #0057FE !important;
1150
+ box-shadow: none !important;
1151
+ }
1152
+
1153
+ // 强制 placeholder 始终显示
1154
+ .ant-select-selection__placeholder {
1155
+ position: absolute !important;
1156
+ left: 0 !important;
1157
+ top: 50% !important;
1158
+ transform: translateY(-50%) !important;
1159
+ opacity: 1 !important;
1160
+ visibility: visible !important;
1161
+ display: flex !important;
1162
+ align-items: center !important;
1163
+ height: 32px !important;
1164
+ font-family: 'Source Han Sans', sans-serif !important;
1165
+ font-size: 16px !important;
1166
+ font-weight: normal !important;
1167
+ color: #313131 !important;
1168
+ pointer-events: none !important;
1169
+ z-index: 10 !important;
1170
+ margin: 0 !important;
1171
+ padding: 0 !important;
1172
+ }
1173
+
1174
+ // 选中的值
1175
+ .ant-select-selection-selected-value {
1176
+ display: block !important;
1177
+ margin-left: 111px !important;
1178
+ font-family: 'Source Han Sans', sans-serif !important;
1179
+ font-size: 16px !important;
1180
+ font-weight: normal !important;
1181
+ color: #313131 !important;
1182
+ line-height: 32px !important;
1183
+ height: 32px !important;
1184
+ overflow: hidden !important;
1185
+ text-overflow: ellipsis !important;
1186
+ white-space: nowrap !important;
1187
+ max-width: calc(234px - 111px - 22px) !important;
1188
+ }
1189
+ }
1190
+
1191
+ // 强制覆盖 antd 隐藏 placeholder 的规则
1192
+ :deep(.ant-select-single.ant-select-show-arrow .ant-select-selection__placeholder) {
1193
+ opacity: 1 !important;
1194
+ visibility: visible !important;
1195
+ }
1196
+
1197
+ // ========== 新增样式:覆盖下拉框宽度、高度、边框 ==========
1198
+ :deep(.ant-select) {
1199
+ width: 234px !important;
1200
+
1201
+ .ant-select-selector {
1202
+ width: 234px !important;
1203
+ height: 32px !important;
1204
+ border-radius: 6px !important;
1205
+ background: #FFFFFF !important;
1206
+ box-sizing: border-box !important;
1207
+ border: 1px solid #E5E9F0 !important;
1208
+ }
1209
+ }
1210
+
1211
+ // ========== 新增样式:下拉框图标 ==========
1212
+ :deep(.ant-select-arrow) {
1213
+ .anticon {
1214
+ svg {
1215
+ width: 7px !important;
1216
+ height: 13px !important;
1217
+ fill: #94979E !important;
1218
+ }
1219
+ }
1220
+ }
1221
+ }
1222
+
1223
+ // his-form-style 样式 - 下拉框提示词和单选框统一样式
1224
+ &.h-form-his-form-style {
1225
+ // ========== 下拉框样式 ==========
1226
+ :deep(.ant-select) {
1227
+ width: 100% !important;
1228
+
1229
+ .ant-select-selector {
1230
+ height: 32px !important;
1231
+ border-radius: 6px !important;
1232
+ background: #FFFFFF !important;
1233
+ border: 1px solid #E5E9F0 !important;
1234
+ padding: 0 11px !important;
1235
+ }
1236
+
1237
+ .ant-select-selection__rendered {
1238
+ height: 32px !important;
1239
+ line-height: 32px !important;
1240
+ margin: 0 !important;
1241
+ }
1242
+
1243
+ .ant-select-selection__placeholder {
1244
+ font-family: 'Source Han Sans', sans-serif !important;
1245
+ font-size: 16px !important;
1246
+ font-weight: normal !important;
1247
+ color: #313131 !important;
1248
+ line-height: 32px !important;
1249
+ height: 32px !important;
1250
+ top: 0 !important;
1251
+ margin-top: 0 !important;
1252
+ padding-left: 11px !important;
1253
+ opacity: 1 !important;
1254
+ }
1255
+
1256
+ .ant-select-selection-selected-value {
1257
+ font-family: 'Source Han Sans', sans-serif !important;
1258
+ font-size: 16px !important;
1259
+ font-weight: normal !important;
1260
+ color: #313131 !important;
1261
+ line-height: 32px !important;
1262
+ padding-left: 11px !important;
1263
+ opacity: 1 !important;
1264
+ }
1265
+
1266
+ .ant-select-selection-item {
1267
+ font-family: 'Source Han Sans', sans-serif !important;
1268
+ font-size: 16px !important;
1269
+ font-weight: normal !important;
1270
+ color: #313131 !important;
1271
+ line-height: 32px !important;
1272
+ opacity: 1 !important;
1273
+ }
1274
+
1275
+ .ant-select-arrow {
1276
+ right: 11px !important;
1277
+ top: 50% !important;
1278
+ transform: translateY(-50%) !important;
1279
+ }
1280
+ }
1281
+
1282
+ // ========== 单选框样式 ==========
1283
+ :deep(.ant-radio-wrapper) {
1284
+ display: inline-flex !important;
1285
+ align-items: center !important;
1286
+ margin-right: 1px !important;
1287
+ padding: 0 !important;
1288
+ margin: 0 !important;
1289
+
1290
+ > span:last-child {
1291
+ height: 23px !important;
1292
+ line-height: 23px !important;
1293
+ opacity: 1 !important;
1294
+ font-family: 'Source Han Sans', sans-serif !important;
1295
+ font-size: 16px !important;
1296
+ font-weight: normal !important;
1297
+ letter-spacing: 0em !important;
1298
+ color: #313131 !important;
1299
+ }
1300
+ }
1301
+
1302
+ // 单选框与文字间距为0
1303
+ :deep(.ant-radio) {
1304
+ + span {
1305
+ padding-left: 0 !important;
1306
+ }
1307
+ }
1308
+
1309
+ // 单选框外框
1310
+ :deep(.ant-radio) {
1311
+ display: inline-block !important;
1312
+ width: 16px !important;
1313
+ height: 16px !important;
1314
+ position: relative !important;
1315
+
1316
+ .ant-radio-inner {
1317
+ position: relative !important;
1318
+ display: inline-block !important;
1319
+ width: 16px !important;
1320
+ height: 16px !important;
1321
+ opacity: 1 !important;
1322
+ background: #FFFFFF !important;
1323
+ box-sizing: border-box !important;
1324
+ border: 1px solid #CDCFD4 !important;
1325
+ border-radius: 50% !important;
1326
+
1327
+ &::after {
1328
+ display: none !important;
1329
+ position: absolute !important;
1330
+ width: 10px !important;
1331
+ height: 10px !important;
1332
+ opacity: 1 !important;
1333
+ background: #0057FE !important;
1334
+ border-radius: 50% !important;
1335
+ top: 50% !important;
1336
+ left: 50% !important;
1337
+ transform: translate(-50%, -50%) !important;
1338
+ }
1339
+ }
1340
+
1341
+ &.ant-radio-checked .ant-radio-inner {
1342
+ border-color: #0057FE !important;
1343
+
1344
+ &::after {
1345
+ display: block !important;
1346
+ }
1347
+ }
1348
+ }
1349
+ }
1350
+
1351
+ // form-text-style 统一字体样式 - label加粗700、输入框值常规400、统一16px思源黑体
1352
+ &.h-form-form-text-style {
1353
+ // 统一字体变量
1354
+ @font-label: {
1355
+ font-family: 'Source Han Sans', sans-serif;
1356
+ font-weight: 700; // label加粗
1357
+ font-size: 16px;
1358
+ };
1359
+
1360
+ @font-value: {
1361
+ font-family: 'Source Han Sans', sans-serif;
1362
+ font-weight: 400; // 值常规
1363
+ font-size: 16px;
1364
+ font-variation-settings: "opsz" auto;
1365
+ };
1366
+
1367
+ @color-primary: #313131;
1368
+ @height-value: 32px;
1369
+
1370
+ // 表单项基础布局 - label固定宽度,控件占满剩余空间
1371
+ :deep(.ant-form-item) {
1372
+ display: flex !important;
1373
+ align-items: center !important;
1374
+ }
1375
+
1376
+ :deep(.ant-form-inline .ant-form-item) {
1377
+ display: flex !important;
1378
+ align-items: center !important;
1379
+ }
1380
+
1381
+ :deep(.ant-form-item-label) {
1382
+ flex: none !important;
1383
+ }
1384
+
1385
+ :deep(.ant-form-item-control-wrapper) {
1386
+ flex: 1 !important;
1387
+ min-width: 0 !important;
1388
+ }
1389
+
1390
+ :deep(.ant-form-item-control) {
1391
+ flex: 1 !important;
1392
+ min-width: 0 !important;
1393
+ display: block !important;
1394
+ }
1395
+
1396
+ // label 样式 - 加粗700,两端对齐
1397
+ :deep(.ant-form-item-label) {
1398
+ padding-left: 0 !important;
1399
+ margin-left: 0 !important;
1400
+
1401
+ label {
1402
+ height: @height-value;
1403
+ opacity: 1;
1404
+ line-height: @height-value;
1405
+ color: @color-primary;
1406
+ margin: 0;
1407
+ padding: 0;
1408
+ padding-left: 0 !important;
1409
+ white-space: nowrap;
1410
+ display: block;
1411
+ width: 100%;
1412
+ text-align: justify;
1413
+ text-align-last: justify;
1414
+ text-justify: inter-ideograph;
1415
+ @font-label();
1416
+
1417
+ // 移除冒号
1418
+ &::after {
1419
+ content: '' !important;
1420
+ }
1421
+ }
1422
+ }
1423
+
1424
+ // 输入框值样式 - 常规400
1425
+ :deep(.ant-input),
1426
+ :deep(.ant-input-affix-wrapper),
1427
+ :deep(.ant-select),
1428
+ :deep(.ant-input-number),
1429
+ :deep(.ant-picker) {
1430
+ height: @height-value !important;
1431
+ border-radius: 6px !important;
1432
+ opacity: 1;
1433
+ background: #FFFFFF !important;
1434
+ box-sizing: border-box !important;
1435
+ border: 1px solid #E5E9F0 !important;
1436
+ font-family: 'Source Han Sans', sans-serif !important;
1437
+ font-size: 16px !important;
1438
+ font-weight: 400 !important;
1439
+ line-height: @height-value !important;
1440
+ letter-spacing: 0em !important;
1441
+ color: @color-primary !important;
1442
+ font-variation-settings: "opsz" auto !important;
1443
+
1444
+ &::placeholder {
1445
+ font-weight: 400 !important;
1446
+ line-height: @height-value !important;
1447
+ padding: 0 !important;
1448
+ }
1449
+ }
1450
+
1451
+ // 下拉框选中值
1452
+ :deep(.ant-select-selection-selected-value) {
1453
+ height: @height-value !important;
1454
+ opacity: 1;
1455
+ font-family: 'Source Han Sans', sans-serif !important;
1456
+ font-size: 16px !important;
1457
+ font-weight: 400 !important;
1458
+ line-height: @height-value !important;
1459
+ letter-spacing: 0em !important;
1460
+ color: @color-primary !important;
1461
+ font-variation-settings: "opsz" auto !important;
1462
+ }
1463
+
1464
+ // 单选/复选框文字
1465
+ :deep(.ant-radio-wrapper),
1466
+ :deep(.ant-checkbox-wrapper) {
1467
+ span:not(.ant-radio):not(.ant-checkbox) {
1468
+ height: @height-value !important;
1469
+ opacity: 1;
1470
+ font-family: 'Source Han Sans', sans-serif !important;
1471
+ font-size: 16px !important;
1472
+ font-weight: 400 !important;
1473
+ letter-spacing: 0em !important;
1474
+ color: @color-primary !important;
1475
+ font-variation-settings: "opsz" auto !important;
1476
+ }
1477
+ }
1478
+
1479
+ // 单选框文字 - 使用32px高度
1480
+ :deep(.ant-radio-wrapper) {
1481
+ span:not(.ant-radio):not(.ant-checkbox) {
1482
+ line-height: @height-value !important;
1483
+ }
1484
+ }
1485
+
1486
+ // 复选框文字 - 使用16px高度
1487
+ :deep(.ant-checkbox-wrapper) {
1488
+ span:not(.ant-radio):not(.ant-checkbox) {
1489
+ height: 16px !important;
1490
+ line-height: 16px !important;
1491
+ }
1492
+ }
1493
+
1494
+ // 日期选择器
1495
+ :deep(.ant-picker-input) {
1496
+ input {
1497
+ height: @height-value !important;
1498
+ opacity: 1;
1499
+ font-family: 'Source Han Sans', sans-serif !important;
1500
+ font-size: 16px !important;
1501
+ font-weight: 400 !important;
1502
+ line-height: @height-value !important;
1503
+ letter-spacing: 0em !important;
1504
+ color: @color-primary !important;
1505
+ font-variation-settings: "opsz" auto !important;
1506
+ }
1507
+ }
1508
+
1509
+ // 数字输入框
1510
+ :deep(.ant-input-number-input) {
1511
+ height: @height-value !important;
1512
+ opacity: 1;
1513
+ font-family: 'Source Han Sans', sans-serif !important;
1514
+ font-size: 16px !important;
1515
+ font-weight: 400 !important;
1516
+ line-height: @height-value !important;
1517
+ letter-spacing: 0em !important;
1518
+ color: @color-primary !important;
1519
+ font-variation-settings: "opsz" auto !important;
1520
+ }
1521
+
1522
+ // ant-form-item 包含多选框组时,控件容器占满整行,垂直排列
1523
+ :deep(.ant-form-item:has(.ant-checkbox-group)),
1524
+ :deep(.ant-form-item:has(.ant-checkbox-group) > .ant-form-item-control-wrapper),
1525
+ :deep(.ant-form-item:has(.ant-checkbox-group) > .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content) {
1526
+ display: block !important;
1527
+ flex: none !important;
1528
+ width: 100% !important;
1529
+ max-width: 100% !important;
1530
+ }
1531
+
1532
+ // 多选框组 - 三列排列,与label换行,占满整行
1533
+ :deep(.ant-checkbox-group) {
1534
+ display: flex !important;
1535
+ flex-wrap: wrap !important;
1536
+ align-items: flex-start !important;
1537
+ width: 100% !important;
1538
+ line-height: 16px !important;
1539
+
1540
+ .ant-checkbox-wrapper {
1541
+ display: inline-flex !important;
1542
+ align-items: center !important;
1543
+ width: calc(33.33% - 16px) !important;
1544
+ min-width: calc(33.33% - 16px) !important;
1545
+ flex: 0 0 calc(33.33% - 16px) !important;
1546
+ break-inside: avoid !important;
1547
+ margin-bottom: 8px !important;
1548
+ line-height: 16px !important;
1549
+ height: 16px !important;
1550
+
1551
+ > span:not(.ant-radio):not(.ant-checkbox) {
1552
+ height: 16px !important;
1553
+ line-height: 16px !important;
1554
+ display: inline-flex !important;
1555
+ align-items: center !important;
1556
+ }
1557
+ }
1558
+ }
1559
+
1560
+ // 时间范围选择器(两个时间选择器+分隔符)- 在label下方占满一行
1561
+ :deep(.ant-time-picker) {
1562
+ flex: 1 1 auto !important;
1563
+ min-width: 120px !important;
1564
+ max-width: calc(50% - 16px) !important;
1565
+
1566
+ .ant-time-picker-input {
1567
+ height: @height-value !important;
1568
+ line-height: @height-value !important;
1569
+ }
1570
+ }
1571
+
1572
+ // 时间范围选择器容器 - 占满宽度,强制换行
1573
+ :deep(.ant-form-item:has(.ant-time-picker)) {
1574
+ display: block !important;
1575
+ flex: none !important;
1576
+ width: 100% !important;
1577
+ max-width: 100% !important;
1578
+ }
1579
+
1580
+ :deep(.ant-form-item:has(.ant-time-picker) > .ant-form-item-control-wrapper),
1581
+ :deep(.ant-form-item:has(.ant-time-picker) > .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content),
1582
+ :deep(.ant-form-item:has(.ant-time-picker) .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content) {
1583
+ flex: none !important;
1584
+ max-width: 100% !important;
1585
+ width: 100% !important;
1586
+ display: block !important;
1587
+ }
1588
+
1589
+ // 时间范围选择器的外层容器 - flex水平排列
1590
+ :deep(.ant-form-item:has(.ant-time-picker) .ant-form-item-children) {
1591
+ display: flex !important;
1592
+ flex-wrap: wrap !important;
1593
+ align-items: center !important;
1594
+ width: 100% !important;
1595
+ }
1596
+
1597
+ // 时间范围选择器的flex容器(两个时间选择器+分隔符)- 水平排列
1598
+ :deep(.ant-form-item:has(.ant-time-picker) .ant-form-item-children > div) {
1599
+ display: flex !important;
1600
+ flex-direction: row !important;
1601
+ flex-wrap: nowrap !important;
1602
+ align-items: center !important;
1603
+ width: 100% !important;
1604
+ gap: 8px !important;
1605
+ }
1606
+
1607
+ // 移除容器内时间选择器的宽度限制,让它们自动伸缩
1608
+ :deep(.ant-form-item:has(.ant-time-picker) .ant-form-item-children > div > .ant-time-picker) {
1609
+ flex: 1 1 0% !important;
1610
+ max-width: none !important;
1611
+ min-width: 0 !important;
1612
+ }
1613
+
1614
+ // ant-form-item 包含多选框组时,控件容器占满整行
1615
+ :deep(.ant-form-item:has(.ant-checkbox-group) > .ant-form-item-control-wrapper),
1616
+ :deep(.ant-form-item:has(.ant-checkbox-group) > .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content) {
1617
+ flex: 1 1 100% !important;
1618
+ max-width: 100% !important;
1619
+ width: 100% !important;
1620
+ }
1621
+
1622
+ // 多选框样式 - 16*16大小
1623
+ :deep(.ant-checkbox) {
1624
+ display: inline-flex !important;
1625
+ align-items: center !important;
1626
+ justify-content: center !important;
1627
+ width: 16px !important;
1628
+ height: 16px !important;
1629
+ flex-shrink: 0 !important;
1630
+ line-height: 0 !important;
1631
+
1632
+ .ant-checkbox-inner {
1633
+ display: block !important;
1634
+ width: 16px !important;
1635
+ height: 16px !important;
1636
+ opacity: 1;
1637
+ background: #FFFFFF !important;
1638
+ box-sizing: border-box !important;
1639
+ border: 1px solid #CDCFD4 !important;
1640
+ border-radius: 2px !important;
1641
+ position: relative !important;
1642
+ overflow: hidden !important;
1643
+
1644
+ // 选中时的对勾
1645
+ &::after {
1646
+ display: block !important;
1647
+ width: 5px !important;
1648
+ height: 9px !important;
1649
+ opacity: 1 !important;
1650
+ border: 2px solid #FFFFFF !important;
1651
+ border-top: 0 !important;
1652
+ border-left: 0 !important;
1653
+ background: transparent !important;
1654
+ position: absolute !important;
1655
+ top: 50% !important;
1656
+ left: 50% !important;
1657
+ transform: translate(-50%, -50%) rotate(45deg) translateY(-1px) !important;
1658
+ content: '' !important;
1659
+ box-sizing: border-box !important;
1660
+ }
1661
+ }
1662
+
1663
+ &.ant-checkbox-checked .ant-checkbox-inner {
1664
+ background: #0057FE !important;
1665
+ border-color: #0057FE !important;
1666
+ }
1667
+
1668
+ &.ant-checkbox-indeterminate .ant-checkbox-inner {
1669
+ background: #0057FE !important;
1670
+ border-color: #0057FE !important;
1671
+
1672
+ &::after {
1673
+ display: block !important;
1674
+ width: 8px !important;
1675
+ height: 2px !important;
1676
+ opacity: 1 !important;
1677
+ background: #FFFFFF !important;
1678
+ border: none !important;
1679
+ position: absolute !important;
1680
+ top: 50% !important;
1681
+ left: 50% !important;
1682
+ transform: translate(-50%, -50%) !important;
1683
+ content: '' !important;
1684
+ box-sizing: border-box !important;
1685
+ }
1686
+ }
1687
+ }
1688
+
1689
+ // 多选框文字样式 - 三列排列,水平排列
1690
+ :deep(.ant-checkbox-wrapper) {
1691
+ span:not(.ant-checkbox) {
1692
+ display: inline !important;
1693
+ height: auto !important;
1694
+ opacity: 1;
1695
+ font-family: 'Source Han Sans', sans-serif !important;
1696
+ font-size: 16px !important;
1697
+ font-weight: normal !important;
1698
+ line-height: 16px !important;
1699
+ letter-spacing: 0em !important;
1700
+ font-feature-settings: "kern" on !important;
1701
+ color: @color-primary !important;
1702
+ white-space: nowrap !important;
1703
+ vertical-align: middle !important;
1704
+ }
1705
+ }
1706
+ }
1707
+ }
1708
+ </style>