fmui-base 2.3.2 → 2.3.4

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 CHANGED
@@ -3,6 +3,8 @@
3
3
  ---npm publish
4
4
 
5
5
  ## 更新日志
6
+ - 2.3.4:移动端表单下拉单选和按钮按钮组件样式更换
7
+ - 2.3.3:移动端表单下拉单选和按钮按钮组件样式更换
6
8
  - 2.3.2:流程设置支持配置流程转交是否填写批示意见
7
9
  - 2.3.1:传阅节点设置的参与人默认全部选中
8
10
  - 2.2.99:移动端保存批示意见态度
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 _SelectField = require('saltui/lib/SelectField');
18
+ var _RadioField = require('saltui/lib/RadioField');
19
19
 
20
- var _SelectField2 = _interopRequireDefault(_SelectField);
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) {
@@ -3759,6 +3797,14 @@ var PageHome = function (_React$Component) {
3759
3797
  className: "dd-ques-title",
3760
3798
  iconPosition: 'left'
3761
3799
  };
3800
+ var radioFieldPopupProps = {
3801
+ groupListArgument: {
3802
+ lineIndent: 15,
3803
+ itemIndent: 15
3804
+ },
3805
+ groupListFlag: true,
3806
+ iconPosition: 'right'
3807
+ };
3762
3808
  var CheckboxFieldProps = {
3763
3809
  // onChange(value) {
3764
3810
  // var keyNo = t.props.keyNo;
@@ -3980,17 +4026,20 @@ var PageHome = function (_React$Component) {
3980
4026
  { className: 't-FBH', id: t.state.prefixName + "_" + t.state.itemParam.key },
3981
4027
  _react2.default.createElement(
3982
4028
  'div',
3983
- { className: 't-W100' },
3984
- _react2.default.createElement(_SelectField2.default, {
4029
+ { className: 't-W100 form-radio-field-host' },
4030
+ _react2.default.createElement(_RadioField2.default, _extends({
4031
+ className: 'form-radio-field-wrap',
4032
+ layout: subFormFieldLayout,
3985
4033
  required: t.state.itemParam.required,
3986
4034
  label: t.state.itemParam.title,
3987
4035
  readOnly: t.state.itemParam.readOnly,
3988
- options: t.state.itemParam.selectOptions,
3989
4036
  placeholder: t.state.itemParam.readOnly ? '' : t.state.itemParam.placeholder,
3990
- onSelect: t.selectChange.bind(t, t.state.itemParam.key),
3991
- value: t.state.itemParam.value,
3992
- multiLine: true
3993
- })
4037
+ mode: 'popup',
4038
+ multiLine: true,
4039
+ formatter: t.formatRadioFieldDisplay,
4040
+ data: t.buildRadioFieldData(t.state.itemParam.selectOptions, t.state.itemParam.value),
4041
+ onChange: t.radioSelectChange.bind(t, t.state.itemParam.key)
4042
+ }, radioFieldPopupProps))
3994
4043
  ),
3995
4044
  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' } }) : ""
3996
4045
  )
@@ -4057,18 +4106,23 @@ var PageHome = function (_React$Component) {
4057
4106
  _react2.default.createElement(
4058
4107
  'div',
4059
4108
  { className: isSubFormMultiCol ? '' : 't-FBH', id: t.state.prefixName + "_" + t.state.itemParam.key },
4060
- _react2.default.createElement(_SelectField2.default, {
4061
- className: 't-W100',
4062
- layout: subFormFieldLayout,
4063
- required: t.state.itemParam.required,
4064
- label: t.state.itemParam.title,
4065
- readOnly: t.state.itemParam.readOnly,
4066
- options: t.state.itemParam.selectOptions,
4067
- placeholder: t.state.itemParam.readOnly ? '' : t.state.itemParam.placeholder,
4068
- onSelect: t.selectChange.bind(t, t.state.itemParam.key),
4069
- value: t.state.itemParam.value,
4070
- multiLine: true
4071
- }),
4109
+ _react2.default.createElement(
4110
+ 'div',
4111
+ { className: isSubFormMultiCol ? 'form-radio-field-host' : 't-W100 form-radio-field-host' },
4112
+ _react2.default.createElement(_RadioField2.default, _extends({
4113
+ className: 'form-radio-field-wrap',
4114
+ layout: subFormFieldLayout,
4115
+ required: t.state.itemParam.required,
4116
+ label: t.state.itemParam.title,
4117
+ readOnly: t.state.itemParam.readOnly,
4118
+ placeholder: t.state.itemParam.readOnly ? '' : t.state.itemParam.placeholder,
4119
+ mode: 'popup',
4120
+ multiLine: true,
4121
+ formatter: t.formatRadioFieldDisplay,
4122
+ data: t.buildRadioFieldData(t.state.itemParam.selectOptions, t.state.itemParam.value),
4123
+ onChange: t.radioSelectChange.bind(t, t.state.itemParam.key)
4124
+ }, radioFieldPopupProps))
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
  )
@@ -1,3 +1,166 @@
1
1
  .t-select-field-content>.t-select-field-value>.t-omit {
2
- -webkit-line-clamp: initial !important;
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
+ // popup 弹层选项列表:对齐 CheckboxField SelectLayer 的行高、间距与字体
86
+ &.t-radio-field.is-group {
87
+ max-height: 60vh;
88
+ overflow-y: auto;
89
+ overflow-x: hidden;
90
+ -webkit-overflow-scrolling: touch;
91
+
92
+ .t-radio-field-label {
93
+ height: 44px;
94
+ line-height: 44px;
95
+ padding: 0 15px;
96
+ text-align: center;
97
+ font-size: 16px;
98
+ color: rgba(0, 0, 0, 0.85);
99
+ background-color: #f7f7f7;
100
+ border-bottom: 1px solid #e5e5e5;
101
+ }
102
+
103
+ .t-group-list {
104
+ padding: 10px 20px 10px 15px;
105
+ }
106
+ }
107
+
108
+ .t-radio-field-content {
109
+ flex: 1;
110
+ min-width: 0;
111
+ max-width: 100%;
112
+ white-space: normal !important;
113
+ word-break: normal !important;
114
+ overflow-wrap: break-word !important;
115
+ word-wrap: break-word !important;
116
+ line-height: 1.5;
117
+ }
118
+
119
+ &.t-radio-field.is-group .t-radio-field-content {
120
+ padding-left: 12px;
121
+ font-size: 16px;
122
+ line-height: 1.5;
123
+ color: rgba(0, 0, 0, 0.85);
124
+ overflow: visible;
125
+ text-overflow: clip;
126
+ white-space: normal !important;
127
+ word-break: normal !important;
128
+ overflow-wrap: break-word !important;
129
+ word-wrap: break-word !important;
130
+ }
131
+
132
+ .t-radio-field-row {
133
+ align-items: flex-start;
134
+ min-height: auto;
135
+ padding-top: 12px;
136
+ padding-bottom: 12px;
137
+ width: 100%;
138
+ }
139
+
140
+ &.t-radio-field.is-group .t-radio-field-row {
141
+ align-items: flex-start;
142
+ min-height: 44px;
143
+ padding-top: 10px;
144
+ padding-bottom: 10px;
145
+ box-sizing: border-box;
146
+ }
147
+
148
+ .t-radio-field-icon-wrapper {
149
+ align-items: flex-start;
150
+ flex-shrink: 0;
151
+ padding-top: 2px;
152
+ }
153
+
154
+ &.t-radio-field.is-group .t-radio-field-icon-wrapper {
155
+ align-items: flex-start;
156
+ width: 24px;
157
+ min-width: 24px;
158
+ min-height: auto;
159
+ padding-top: 2px;
160
+
161
+ &.right {
162
+ margin-left: 12px;
163
+ margin-right: 16px;
164
+ }
165
+ }
166
+ }
@@ -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:center!important;flex-wrap:nowrap!important;}', pickCol + '.t-select-field-value .t-FB1,' + pickCol + '.t-datetime-field-value .t-FB1,' + pickCol + '.t-select-field-value span,' + pickCol + '.t-datetime-field-value span{text-align:left!important;width:100%!important;}'].join('') } });
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
  // 将字段列表按列数拆成行(整行字段单独成行)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fmui-base",
3
- "version": "2.3.2",
3
+ "version": "2.3.4",
4
4
  "title": "fmui-base",
5
5
  "description": "fmui移动端组件",
6
6
  "main": "lib/index.js",