fmui-base 2.3.2 → 2.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/lib/form/form.js +74 -20
- package/lib/form/form.less +115 -2
- package/lib/form/subForm.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
package/lib/form/form.js
CHANGED
|
@@ -15,9 +15,9 @@ var _react = require('react');
|
|
|
15
15
|
|
|
16
16
|
var _react2 = _interopRequireDefault(_react);
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var _RadioField = require('saltui/lib/RadioField');
|
|
19
19
|
|
|
20
|
-
var
|
|
20
|
+
var _RadioField2 = _interopRequireDefault(_RadioField);
|
|
21
21
|
|
|
22
22
|
var _CheckboxField = require('saltui/lib/CheckboxField');
|
|
23
23
|
|
|
@@ -2716,6 +2716,44 @@ var PageHome = function (_React$Component) {
|
|
|
2716
2716
|
|
|
2717
2717
|
//下拉
|
|
2718
2718
|
|
|
2719
|
+
}, {
|
|
2720
|
+
key: 'buildRadioFieldData',
|
|
2721
|
+
value: function buildRadioFieldData(selectOptions, currentValue) {
|
|
2722
|
+
var selectedValue = null;
|
|
2723
|
+
if (currentValue != null && currentValue !== '') {
|
|
2724
|
+
selectedValue = (typeof currentValue === 'undefined' ? 'undefined' : _typeof(currentValue)) === 'object' ? currentValue.value : currentValue;
|
|
2725
|
+
}
|
|
2726
|
+
return (selectOptions || []).map(function (opt) {
|
|
2727
|
+
return {
|
|
2728
|
+
value: opt.value,
|
|
2729
|
+
label: opt.text,
|
|
2730
|
+
content: opt.text,
|
|
2731
|
+
checked: selectedValue != null && String(selectedValue) === String(opt.value),
|
|
2732
|
+
disable: !!opt.disable
|
|
2733
|
+
};
|
|
2734
|
+
});
|
|
2735
|
+
}
|
|
2736
|
+
}, {
|
|
2737
|
+
key: 'formatRadioFieldDisplay',
|
|
2738
|
+
value: function formatRadioFieldDisplay(item) {
|
|
2739
|
+
if (!item) {
|
|
2740
|
+
return '';
|
|
2741
|
+
}
|
|
2742
|
+
if (item.label != null && item.label !== '') {
|
|
2743
|
+
return item.label;
|
|
2744
|
+
}
|
|
2745
|
+
return typeof item.content === 'string' ? item.content : '';
|
|
2746
|
+
}
|
|
2747
|
+
}, {
|
|
2748
|
+
key: 'radioSelectChange',
|
|
2749
|
+
value: function radioSelectChange(code, value, index, data) {
|
|
2750
|
+
var item = data[index];
|
|
2751
|
+
if (!item) {
|
|
2752
|
+
return;
|
|
2753
|
+
}
|
|
2754
|
+
var text = item.label || (typeof item.content === 'string' ? item.content : '');
|
|
2755
|
+
this.selectChange(code, { value: item.value, text: text });
|
|
2756
|
+
}
|
|
2719
2757
|
}, {
|
|
2720
2758
|
key: 'selectChange',
|
|
2721
2759
|
value: function selectChange(code, value) {
|
|
@@ -3980,16 +4018,23 @@ var PageHome = function (_React$Component) {
|
|
|
3980
4018
|
{ className: 't-FBH', id: t.state.prefixName + "_" + t.state.itemParam.key },
|
|
3981
4019
|
_react2.default.createElement(
|
|
3982
4020
|
'div',
|
|
3983
|
-
{ className: 't-W100' },
|
|
3984
|
-
_react2.default.createElement(
|
|
4021
|
+
{ className: 't-W100 form-radio-field-host' },
|
|
4022
|
+
_react2.default.createElement(_RadioField2.default, {
|
|
4023
|
+
className: 'form-radio-field-wrap',
|
|
4024
|
+
layout: subFormFieldLayout,
|
|
3985
4025
|
required: t.state.itemParam.required,
|
|
3986
4026
|
label: t.state.itemParam.title,
|
|
3987
4027
|
readOnly: t.state.itemParam.readOnly,
|
|
3988
|
-
options: t.state.itemParam.selectOptions,
|
|
3989
4028
|
placeholder: t.state.itemParam.readOnly ? '' : t.state.itemParam.placeholder,
|
|
3990
|
-
|
|
3991
|
-
|
|
3992
|
-
|
|
4029
|
+
mode: 'popup',
|
|
4030
|
+
multiLine: true,
|
|
4031
|
+
formatter: t.formatRadioFieldDisplay,
|
|
4032
|
+
data: t.buildRadioFieldData(t.state.itemParam.selectOptions, t.state.itemParam.value),
|
|
4033
|
+
onChange: t.radioSelectChange.bind(t, t.state.itemParam.key),
|
|
4034
|
+
groupListArgument: {
|
|
4035
|
+
lineIndent: 15,
|
|
4036
|
+
itemIndent: 15
|
|
4037
|
+
}
|
|
3993
4038
|
})
|
|
3994
4039
|
),
|
|
3995
4040
|
t.state.itemParam.isVerifySing == "1" ? _react2.default.createElement('i', { className: 'iconfont icon-checked t-PT10', style: { color: 'green' } }) : t.state.itemParam.isVerifySing == "2" ? _react2.default.createElement('i', { className: 'iconfont icon-close t-PT10', style: { color: 'red' } }) : ""
|
|
@@ -4057,18 +4102,27 @@ var PageHome = function (_React$Component) {
|
|
|
4057
4102
|
_react2.default.createElement(
|
|
4058
4103
|
'div',
|
|
4059
4104
|
{ className: isSubFormMultiCol ? '' : 't-FBH', id: t.state.prefixName + "_" + t.state.itemParam.key },
|
|
4060
|
-
_react2.default.createElement(
|
|
4061
|
-
|
|
4062
|
-
|
|
4063
|
-
|
|
4064
|
-
|
|
4065
|
-
|
|
4066
|
-
|
|
4067
|
-
|
|
4068
|
-
|
|
4069
|
-
|
|
4070
|
-
|
|
4071
|
-
|
|
4105
|
+
_react2.default.createElement(
|
|
4106
|
+
'div',
|
|
4107
|
+
{ className: isSubFormMultiCol ? 'form-radio-field-host' : 't-W100 form-radio-field-host' },
|
|
4108
|
+
_react2.default.createElement(_RadioField2.default, {
|
|
4109
|
+
className: 'form-radio-field-wrap',
|
|
4110
|
+
layout: subFormFieldLayout,
|
|
4111
|
+
required: t.state.itemParam.required,
|
|
4112
|
+
label: t.state.itemParam.title,
|
|
4113
|
+
readOnly: t.state.itemParam.readOnly,
|
|
4114
|
+
placeholder: t.state.itemParam.readOnly ? '' : t.state.itemParam.placeholder,
|
|
4115
|
+
mode: 'popup',
|
|
4116
|
+
multiLine: true,
|
|
4117
|
+
formatter: t.formatRadioFieldDisplay,
|
|
4118
|
+
data: t.buildRadioFieldData(t.state.itemParam.selectOptions, t.state.itemParam.value),
|
|
4119
|
+
onChange: t.radioSelectChange.bind(t, t.state.itemParam.key),
|
|
4120
|
+
groupListArgument: {
|
|
4121
|
+
lineIndent: 15,
|
|
4122
|
+
itemIndent: 15
|
|
4123
|
+
}
|
|
4124
|
+
})
|
|
4125
|
+
),
|
|
4072
4126
|
t.state.itemParam.isVerifySing == "1" ? _react2.default.createElement('i', { className: 'iconfont icon-checked t-PT10', style: { color: 'green' } }) : t.state.itemParam.isVerifySing == "2" ? _react2.default.createElement('i', { className: 'iconfont icon-close t-PT10', style: { color: 'red' } }) : ""
|
|
4073
4127
|
)
|
|
4074
4128
|
)
|
package/lib/form/form.less
CHANGED
|
@@ -1,3 +1,116 @@
|
|
|
1
1
|
.t-select-field-content>.t-select-field-value>.t-omit {
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
-webkit-line-clamp: initial !important;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
// 下拉/单选 RadioField popup：选中值先占满一行再换行；弹层超出最大高度可滚动
|
|
6
|
+
.form-radio-field-host {
|
|
7
|
+
width: 100%;
|
|
8
|
+
min-width: 0;
|
|
9
|
+
flex: 1;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.t-FBH > .form-radio-field-host {
|
|
13
|
+
flex: 1 1 0%;
|
|
14
|
+
min-width: 0;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.t-field.t-radio-field.form-radio-field-wrap {
|
|
18
|
+
width: 95%;
|
|
19
|
+
max-width: 95%;
|
|
20
|
+
cursor: pointer;
|
|
21
|
+
|
|
22
|
+
// 点击事件在 Field 根节点，子层放行 pointer-events 以保证整行可点
|
|
23
|
+
&:not(.t-field-disabled) {
|
|
24
|
+
.t-field-pos-box,
|
|
25
|
+
.t-field-box,
|
|
26
|
+
.t-field-content-box,
|
|
27
|
+
.t-field-multi,
|
|
28
|
+
.t-radio-field-value,
|
|
29
|
+
.t-radio-field-value span {
|
|
30
|
+
pointer-events: none;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.t-field-pos-icon {
|
|
34
|
+
pointer-events: auto;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&.t-FBH .t-field-pos-box {
|
|
39
|
+
flex: 1 1 auto;
|
|
40
|
+
min-width: 0;
|
|
41
|
+
width: auto;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.t-field-box,
|
|
45
|
+
.t-field-multi {
|
|
46
|
+
width: 100%;
|
|
47
|
+
min-width: 0;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.t-field-multi > div {
|
|
51
|
+
width: 100%;
|
|
52
|
+
min-width: 0;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.t-radio-field-value {
|
|
56
|
+
width: 95%;
|
|
57
|
+
min-width: 0;
|
|
58
|
+
align-items: flex-start;
|
|
59
|
+
flex-wrap: wrap;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
// 解除 SaltUI t-omit 的 -webkit-box 竖排，避免选中后逐字换行
|
|
63
|
+
.t-radio-field-value > .t-omit,
|
|
64
|
+
.t-radio-field-value > .t-FB1,
|
|
65
|
+
.t-radio-field-value > .t-FB1.t-omit {
|
|
66
|
+
display: block !important;
|
|
67
|
+
width: 100% !important;
|
|
68
|
+
max-width: 100% !important;
|
|
69
|
+
min-width: 0 !important;
|
|
70
|
+
white-space: normal !important;
|
|
71
|
+
word-break: normal !important;
|
|
72
|
+
overflow-wrap: break-word !important;
|
|
73
|
+
word-wrap: break-word !important;
|
|
74
|
+
overflow: visible !important;
|
|
75
|
+
text-overflow: clip !important;
|
|
76
|
+
-webkit-line-clamp: unset !important;
|
|
77
|
+
line-clamp: unset !important;
|
|
78
|
+
-webkit-box-orient: horizontal !important;
|
|
79
|
+
box-orient: horizontal !important;
|
|
80
|
+
line-height: 1.5;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.form-radio-field-wrap {
|
|
85
|
+
&.t-radio-field.is-group {
|
|
86
|
+
max-height: 60vh;
|
|
87
|
+
overflow-y: auto;
|
|
88
|
+
overflow-x: hidden;
|
|
89
|
+
-webkit-overflow-scrolling: touch;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.t-radio-field-content {
|
|
93
|
+
flex: 1;
|
|
94
|
+
min-width: 0;
|
|
95
|
+
max-width: 100%;
|
|
96
|
+
white-space: normal !important;
|
|
97
|
+
word-break: normal !important;
|
|
98
|
+
overflow-wrap: break-word !important;
|
|
99
|
+
word-wrap: break-word !important;
|
|
100
|
+
line-height: 1.5;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.t-radio-field-row {
|
|
104
|
+
align-items: flex-start;
|
|
105
|
+
min-height: auto;
|
|
106
|
+
padding-top: 12px;
|
|
107
|
+
padding-bottom: 12px;
|
|
108
|
+
width: 100%;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.t-radio-field-icon-wrapper {
|
|
112
|
+
align-items: flex-start;
|
|
113
|
+
flex-shrink: 0;
|
|
114
|
+
padding-top: 2px;
|
|
115
|
+
}
|
|
116
|
+
}
|
package/lib/form/subForm.js
CHANGED
|
@@ -584,7 +584,7 @@ var PageHome = function (_React$Component) {
|
|
|
584
584
|
var text = scope + ' .subform-col-field-slot-text';
|
|
585
585
|
var pick = scope + ' .subform-col-field-slot-pick';
|
|
586
586
|
var pickCol = pick + ' ' + col;
|
|
587
|
-
return _react2.default.createElement('style', { dangerouslySetInnerHTML: { __html: [scope + '{display:block;}', row + '{display:flex;align-items:stretch;width:100%;border-bottom:0.5px solid #e9ebee;box-sizing:border-box;}', scope + ' .subform-field-full{width:100%;box-sizing:border-box;border-bottom:0.5px solid #e9ebee;}', scope + ' .subform-field-col{display:flex;flex-direction:column;box-sizing:border-box;}', scope + ' .subform-field-col-empty{visibility:hidden;}', slot + '{box-sizing:border-box;padding:8px 16px 8px 0;overflow:hidden;}', col + '{width:100%;}', col + ' .t-group-list{border-bottom:none!important;background:transparent;}', col + ' .t-group-list-item::after{display:none!important;}', col + '>.t-group-list>.t-group-list-item::after{display:none!important;}', col + ' .t-field-box.t-field-content-box{display:flex!important;flex-direction:column!important;align-items:stretch!important;width:100%!important;min-height:0!important;padding-left:0!important;padding-right:0!important;}', col + ' .t-field-layout-h-label,' + col + ' .t-field-layout-v-label,' + col + ' .t-field-layout-v-label-left{width:100%!important;max-width:100%!important;margin-left:0!important;padding-left:0!important;padding-right:0!important;color:rgb(51,51,51)!important;background:transparent!important;}', col + ' .t-field-box{padding-left:0!important;padding-right:0!important;}', col + ' .t-field-content-box{justify-content:flex-start!important;align-items:flex-start!important;}', col + ' .t-field-content-box .t-FB1,' + col + ' .t-field-multi{width:100%!important;max-width:100%!important;padding:0 0 4px 0!important;text-align:left!important;}', col + ' .t-field-content-box .t-FB1 span,' + col + ' .t-field-multi span,' + col + ' .t-text-field-content-main span{text-align:left!important;word-break:break-word;}', col + ' .t-text-field-content{width:100%;justify-content:flex-start!important;}', col + ' .t-text-field-input{text-align:left!important;}', text + ' .t-text-field-input,' + text + ' .t-text-field-content-main span{white-space:normal!important;word-wrap:break-word;word-break:break-word;line-height:20px;}', text + ' .t-text-field-placeholder.t-DN{display:none!important;}', pickCol + '.t-field.t-select-field.t-FBH,' + pickCol + '.t-field.t-datetime-field.t-FBH{display:block!important;position:relative!important;width:100%!important;}', pickCol + '.t-field-pos-box{width:100%!important;padding-right:28px!important;box-sizing:border-box;}', pickCol + '.t-field-layout-v-label{margin-left:0!important;padding-left:0!important;}', pickCol + '.t-field-content-box{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;width:100%!important;min-height:24px!important;padding:2px 0 11px 0!important;}', pickCol + '.t-field-pos-icon{position:absolute!important;right:0!important;top:auto!important;bottom:10px!important;margin:0!important;height:26px!important;display:flex!important;align-items:center!important;justify-content:center!important;}', pickCol + '.t-select-field-content,' + pickCol + '.t-datetime-field-value,' + pickCol + '.t-datetime-field-placeholder,' + pickCol + '.t-select-field-placeholder{min-height:24px!important;line-height:24px!important;}', pickCol + '.t-field-content-box>.t-FB1{flex:1!important;width:100%!important;min-width:0!important;max-width:100%!important;padding:0!important;text-align:left!important;}', pickCol + '.t-select-field-content,' + pickCol + '.t-field-content-box>.t-FB1>div{width:100%!important;text-align:left!important;}', pickCol + '.t-select-field-placeholder,' + pickCol + '.t-datetime-field-placeholder,' + pickCol + '.t-select-field-value,' + pickCol + '.t-datetime-field-value{text-align:left!important;justify-content:flex-start!important;width:100%!important;}', pickCol + '.t-select-field-placeholder,' + pickCol + '.t-datetime-field-placeholder{position:static!important;height:auto!important;line-height:24px!important;flex:none!important;max-width:100%!important;}', pickCol + '.t-select-field-value,' + pickCol + '.t-datetime-field-value{display:flex!important;flex-direction:row!important;align-items:
|
|
587
|
+
return _react2.default.createElement('style', { dangerouslySetInnerHTML: { __html: [scope + '{display:block;}', row + '{display:flex;align-items:stretch;width:100%;border-bottom:0.5px solid #e9ebee;box-sizing:border-box;}', scope + ' .subform-field-full{width:100%;box-sizing:border-box;border-bottom:0.5px solid #e9ebee;}', scope + ' .subform-field-col{display:flex;flex-direction:column;box-sizing:border-box;}', scope + ' .subform-field-col-empty{visibility:hidden;}', slot + '{box-sizing:border-box;padding:8px 16px 8px 0;overflow:hidden;}', col + '{width:100%;}', col + ' .t-group-list{border-bottom:none!important;background:transparent;}', col + ' .t-group-list-item::after{display:none!important;}', col + '>.t-group-list>.t-group-list-item::after{display:none!important;}', col + ' .t-field-box.t-field-content-box{display:flex!important;flex-direction:column!important;align-items:stretch!important;width:100%!important;min-height:0!important;padding-left:0!important;padding-right:0!important;}', col + ' .t-field-layout-h-label,' + col + ' .t-field-layout-v-label,' + col + ' .t-field-layout-v-label-left{width:100%!important;max-width:100%!important;margin-left:0!important;padding-left:0!important;padding-right:0!important;color:rgb(51,51,51)!important;background:transparent!important;}', col + ' .t-field-box{padding-left:0!important;padding-right:0!important;}', col + ' .t-field-content-box{justify-content:flex-start!important;align-items:flex-start!important;}', col + ' .t-field-content-box .t-FB1,' + col + ' .t-field-multi{width:100%!important;max-width:100%!important;padding:0 0 4px 0!important;text-align:left!important;}', col + ' .t-field-content-box .t-FB1 span,' + col + ' .t-field-multi span,' + col + ' .t-text-field-content-main span{text-align:left!important;word-break:break-word;}', col + ' .t-text-field-content{width:100%;justify-content:flex-start!important;}', col + ' .t-text-field-input{text-align:left!important;}', text + ' .t-text-field-input,' + text + ' .t-text-field-content-main span{white-space:normal!important;word-wrap:break-word;word-break:break-word;line-height:20px;}', text + ' .t-text-field-placeholder.t-DN{display:none!important;}', pickCol + '.t-field.t-select-field.t-FBH,' + pickCol + '.t-field.t-radio-field.t-FBH,' + pickCol + '.t-field.t-datetime-field.t-FBH{display:block!important;position:relative!important;width:100%!important;}', pickCol + '.t-field-pos-box{width:100%!important;padding-right:28px!important;box-sizing:border-box;}', pickCol + '.t-field-layout-v-label{margin-left:0!important;padding-left:0!important;}', pickCol + '.t-field-content-box{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;width:100%!important;min-height:24px!important;padding:2px 0 11px 0!important;}', pickCol + '.t-field-pos-icon{position:absolute!important;right:0!important;top:auto!important;bottom:10px!important;margin:0!important;height:26px!important;display:flex!important;align-items:center!important;justify-content:center!important;}', pickCol + '.t-select-field-content,' + pickCol + '.t-radio-field-value,' + pickCol + '.t-datetime-field-value,' + pickCol + '.t-datetime-field-placeholder,' + pickCol + '.t-select-field-placeholder{min-height:24px!important;line-height:24px!important;}', pickCol + '.t-field-content-box>.t-FB1{flex:1!important;width:100%!important;min-width:0!important;max-width:100%!important;padding:0!important;text-align:left!important;}', pickCol + '.t-select-field-content,' + pickCol + '.t-field-content-box>.t-FB1>div{width:100%!important;text-align:left!important;}', pickCol + '.t-select-field-placeholder,' + pickCol + '.t-datetime-field-placeholder,' + pickCol + '.t-select-field-value,' + pickCol + '.t-radio-field-value,' + pickCol + '.t-datetime-field-value{text-align:left!important;justify-content:flex-start!important;width:100%!important;}', pickCol + '.t-select-field-placeholder,' + pickCol + '.t-datetime-field-placeholder{position:static!important;height:auto!important;line-height:24px!important;flex:none!important;max-width:100%!important;}', pickCol + '.t-select-field-value,' + pickCol + '.t-radio-field-value,' + pickCol + '.t-datetime-field-value{display:flex!important;flex-direction:row!important;align-items:flex-start!important;flex-wrap:wrap!important;}', pickCol + '.t-select-field-value .t-FB1,' + pickCol + '.t-radio-field-value .t-FB1,' + pickCol + '.t-datetime-field-value .t-FB1,' + pickCol + '.t-select-field-value span,' + pickCol + '.t-radio-field-value span,' + pickCol + '.t-datetime-field-value span{display:block!important;width:100%!important;max-width:100%!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;-webkit-line-clamp:unset!important;line-clamp:unset!important;-webkit-box-orient:horizontal!important;text-align:left!important;}'].join('') } });
|
|
588
588
|
}
|
|
589
589
|
|
|
590
590
|
// 将字段列表按列数拆成行（整行字段单独成行）
|