bri-components 1.2.59 → 1.2.61

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 (11) hide show
  1. package/package.json +2 -2
  2. package/src/components/controls/base/BriUpload/BriUpload.vue +2 -2
  3. package/src/components/controls/base/DshCascader/DshCascader.vue +1 -1
  4. package/src/components/controls/base/DshEditor.vue +5 -5
  5. package/src/components/controls/base/DshSelect/DshCheckbox.vue +8 -146
  6. package/src/components/controls/base/DshSelect/DshSelect.vue +10 -173
  7. package/src/components/controls/control.less +195 -0
  8. package/src/components/controls/mixins/controlMixin.js +5 -0
  9. package/src/components/controls/mixins/selectMixin.js +10 -5
  10. package/src/components/small/DshModal.vue +1 -1
  11. package/src/components/unit/DshFormUnit.vue +114 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bri-components",
3
- "version": "1.2.59",
3
+ "version": "1.2.61",
4
4
  "author": "dengshanghui",
5
5
  "description": "a component lib for vue project",
6
6
  "main": "src/index.js",
@@ -32,7 +32,7 @@
32
32
  "dependencies": {
33
33
  "ali-oss": "^6.13.1",
34
34
  "axios": "^0.23.0",
35
- "bri-datas": "^1.0.48",
35
+ "bri-datas": "^1.0.49",
36
36
  "jshint": "^2.12.0",
37
37
  "jsonlint": "^1.6.3",
38
38
  "minio": "7.1.0",
package/src/components/controls/base/BriUpload/BriUpload.vue CHANGED
@@ -138,7 +138,7 @@
138
138
  selfPropsObj () {
139
139
  return {
140
140
  _fileType: "file",
141
- _showType: this.isFullRow && !this.isInTable ? "old" : "inline", // 宽度为100%、且不在级联表格或内部表格里的 显示老版
141
+ _showType: this.isHeightAuto ? "old" : "inline", // 宽度为100%、且不在级联表格或内部表格里的 显示老版
142
142
  // _multiple: true,
143
143
  _useType: "drag",
144
144
  _maxSize: 1024 * 1024,
@@ -154,7 +154,7 @@
154
154
  return this.selfPropsObj._fileType;
155
155
  },
156
156
  showType () {
157
- return this.selfPropsObj._showType;
157
+ return this.isInTable ? "inline" : this.selfPropsObj._showType;
158
158
  },
159
159
  useType () {
160
160
  return this.selfPropsObj._useType;
package/src/components/controls/base/DshCascader/DshCascader.vue CHANGED
@@ -89,7 +89,7 @@
89
89
  <dsh-tags
90
90
  :class="{
91
91
  ...commonClass,
92
- 'DshCascaders-show-ellipsis': !(isDetailShow && isFullRow)
92
+ 'DshCascaders-show-ellipsis': !(isDetailShow && isHeightAuto)
93
93
  }"
94
94
  :list="curValNameList"
95
95
  ></dsh-tags>
package/src/components/controls/base/DshEditor.vue CHANGED
@@ -7,14 +7,14 @@
7
7
  ...commonClass,
8
8
  'DshEditor-edit': true
9
9
  }"
10
- v-show="showType === 'show'"
10
+ v-show="showStatus === 'show'"
11
11
  v-html="showVal"
12
12
  @click="handleEdit"
13
13
  ></div>
14
14
 
15
15
  <div
16
16
  v-if="finalCanEdit"
17
- v-show="showType === 'edit'"
17
+ v-show="showStatus === 'edit'"
18
18
  class="DshEditor-wrap"
19
19
  >
20
20
  <div
@@ -76,7 +76,7 @@
76
76
  data () {
77
77
  return {
78
78
  editor: null,
79
- showType: "show",
79
+ showStatus: "show",
80
80
  operationMap: {
81
81
  canSave: {
82
82
  name: "完成",
@@ -167,11 +167,11 @@
167
167
  handleEdit () {
168
168
  if (this.finalCanEdit) {
169
169
  this.editor.txt.html(this.value[this.propsObj._key]);
170
- this.showType = "edit";
170
+ this.showStatus = "edit";
171
171
  }
172
172
  },
173
173
  clickSave () {
174
- this.showType = "show";
174
+ this.showStatus = "show";
175
175
  },
176
176
  // 插入代码
177
177
  insertHTML (value) {
package/src/components/controls/base/DshSelect/DshCheckbox.vue CHANGED
@@ -12,7 +12,7 @@
12
12
  :class="{
13
13
  'DshCheckbox-flat': true,
14
14
  'DshCheckbox-flat-color': useColor,
15
- 'DshCheckbox-flat-scroll': !isFullRow,
15
+ 'DshCheckbox-flat-scroll': !isHeightAuto,
16
16
  }"
17
17
  v-model="curValList"
18
18
  >
@@ -22,12 +22,9 @@
22
22
  :class="getItemClass(item)"
23
23
  :style="getItemColorStyle(item)"
24
24
  :label="item._key"
25
- :disabled="getCheckItemDisabled(item)"
25
+ :disabled="getCheckItemDisabled(item, index)"
26
26
  :border="useColor"
27
- @click.native="clickCheckItem(item, index)"
28
27
  >
29
- <slot :item="item"></slot>
30
-
31
28
  <span>{{ item.name || item._name }}</span>
32
29
  </Checkbox>
33
30
  </CheckboxGroup>
@@ -36,9 +33,7 @@
36
33
  <!-- dropdown模式 -->
37
34
  <template v-else>
38
35
  <Select
39
- :class="{
40
- 'DshCheckbox-dropdown': true,
41
- }"
36
+ class="DshCheckbox-dropdown"
42
37
  :value="curValList"
43
38
  :multiple="true"
44
39
  :placeholder="selfPropsObj._placeholder"
@@ -56,7 +51,7 @@
56
51
  :label="item.name || item._name"
57
52
  :disabled="getCheckItemDisabled(item, index)"
58
53
  >
59
- <Checkbox :value="getCheckItemStatus(item)"></Checkbox>
54
+ <Checkbox :value="curValList.includes(item._key)"></Checkbox>
60
55
 
61
56
  <slot :item="item"></slot>
62
57
 
@@ -87,7 +82,7 @@
87
82
  <dsh-tags
88
83
  :class="{
89
84
  ...commonClass,
90
- 'DshCheckbox-show-ellipsis': !(isDetailShow && isFullRow)
85
+ 'DshCheckbox-show-ellipsis': !(isDetailShow && isHeightAuto)
91
86
  }"
92
87
  :list="curValObjList"
93
88
  ></dsh-tags>
@@ -141,142 +136,9 @@
141
136
  </script>
142
137
 
143
138
  <style lang="less">
144
- .DshCheckbox {
145
- &-flat {
146
- width: 100%;
147
-
148
- .ivu-checkbox-wrapper {
149
- margin-bottom: 4px;
150
- margin-right: 16px;
151
-
152
- .ivu-checkbox {
153
- &.ivu-checkbox-checked {
154
- .ivu-checkbox-inner {
155
- background-color: @themeColor;
156
- }
157
- }
158
- }
159
- }
160
-
161
- &-color {
162
- .ivu-checkbox-wrapper {
163
- height: 32px;
164
- border: none;
165
- border-radius: 4px;
166
- line-height: 32px;
167
-
168
- .ivu-checkbox {
169
- .ivu-checkbox-inner {
170
- border: 2px solid @themeColor;
171
- background-color: transparent;
172
- }
173
- .ivu-checkbox-focus {
174
- box-shadow: 0 0 0 0;
175
- }
176
-
177
- &.ivu-checkbox-checked {
178
- .ivu-checkbox-inner {
179
- &:after {
180
- top: 2px;
181
- left: 4px;
182
- }
183
- }
184
- }
185
- }
186
-
187
- &-disabled {
188
- background-color: #f3f3f3!important;
189
- color: #E5E5E5!important;
190
-
191
- .ivu-checkbox.ivu-checkbox-disabled {
192
- .ivu-checkbox-inner {
193
- border-color: #E5E5E5;
194
- }
195
-
196
- &.ivu-checkbox-checked {
197
- .ivu-checkbox-inner {
198
- background-color: #E5E5E5;
199
- }
200
- }
201
-
202
- & + span {
203
- color: #E5E5E5;
204
- }
205
- }
206
- }
207
- }
208
-
209
- // ivu-checkbox-wrapper 和 color-1 在一个div上
210
- each(@resourceColor, {
211
- .color-@{index} {
212
- .ivu-checkbox {
213
- .ivu-checkbox-inner {
214
- border-color: @value;
215
- }
139
+ @import url("../../control.less");
216
140
 
217
- &.ivu-checkbox-checked {
218
- .ivu-checkbox-inner {
219
- background-color: @value;
220
- }
221
- }
222
- }
223
- }
224
- });
225
- }
226
-
227
- &-scroll {
228
- .bri-scrollbar3();
229
- white-space: nowrap;
230
- overflow: auto;
231
-
232
- .ivu-checkbox-wrapper {
233
- margin-bottom: 4px;
234
- }
235
- }
236
- }
237
-
238
- &-dropdown {
239
- .ivu-select-multiple {
240
- .ivu-select-selection {
241
- height: 32px;
242
- .dsh-flex-row-between-center();
243
-
244
- & > div {
245
- width: 100%;
246
- height: 100%;
247
- word-break: keep-all;
248
- white-space: nowrap;
249
- overflow: auto;
250
- .bri-scrollbar3();
251
-
252
- .ivu-tag {
253
- margin: 2px 4px 0px 0px;
254
- background-color: @borderColor;
255
- }
256
- }
257
- }
258
-
259
- &.ivu-select-disabled {
260
- .ivu-select-selection {
261
- & > div {
262
- .ivu-tag {
263
- background-color: @border-disabled;
264
- }
265
- }
266
- }
267
- }
268
-
269
- .ivu-select-item-selected:after {
270
- content: none;
271
- }
272
- }
273
- }
274
-
275
- // 查看
276
- &-show {
277
- &-ellipsis {
278
- .dsh-ellipsis();
279
- }
280
- }
141
+ .DshCheckbox {
142
+ #control-select(checkbox);
281
143
  }
282
144
  </style>
package/src/components/controls/base/DshSelect/DshSelect.vue CHANGED
@@ -12,9 +12,9 @@
12
12
  :class="{
13
13
  'DshSelect-flat': true,
14
14
  'DshSelect-flat-color': useColor,
15
- 'DshSelect-flat-scroll': !isFullRow
15
+ 'DshSelect-flat-scroll': !isHeightAuto
16
16
  }"
17
- :value="curVal"
17
+ v-model="curVal"
18
18
  :type="radioGroupType"
19
19
  >
20
20
  <Radio
@@ -22,14 +22,13 @@
22
22
  :key="item._key"
23
23
  :class="getItemClass(item)"
24
24
  :style="getItemColorStyle(item)"
25
+ :value="curVal === item._key"
25
26
  :label="item._key"
26
- :disabled="getRadioItemDisabled(item)"
27
+ :disabled="getRadioItemDisabled(item, index)"
27
28
  :border="useColor"
28
- @click.native="clickRadioItem(item, index)"
29
+ @click.native.stop="cancelRadioItemSelect(item, index)"
29
30
  >
30
- <span>
31
- {{ item.name || item._name }}
32
- </span>
31
+ <span @click.stop="0">{{ item.name || item._name }}</span>
33
32
  </Radio>
34
33
  </RadioGroup>
35
34
  </template>
@@ -93,7 +92,7 @@
93
92
  <dsh-tags
94
93
  :class="{
95
94
  ...commonClass,
96
- 'DshSelect-show-ellipsis': !(isDetailShow && isFullRow)
95
+ 'DshSelect-show-ellipsis': !(isDetailShow && isHeightAuto)
97
96
  }"
98
97
  :list="[curValObj]"
99
98
  ></dsh-tags>
@@ -152,171 +151,9 @@
152
151
  </script>
153
152
 
154
153
  <style lang="less">
155
- .DshSelect {
156
- &-flat {
157
- width: 100%;
158
-
159
- &-color {
160
- .ivu-radio-border {
161
- height: 32px;
162
- line-height: 32px;
163
- border-radius: 4px;
164
- border: none;
165
- color: #FFF;
166
- margin-right: 16px;
167
- }
168
-
169
- .ivu-radio {
170
- .ivu-radio-inner {
171
- border: 2px solid @themeColor;
172
- background-color: transparent;
173
- width: 14px;
174
- height: 14px;
175
-
176
- &::after {
177
- width: 6px;
178
- height: 6px;
179
- left: 2px;
180
- top: 2px;
181
- background-color: transparent;
182
- opacity: 1;
183
- transform: scale(1);
184
- }
185
- }
186
-
187
- .ivu-radio-focus {
188
- box-shadow: 0 0 0 0;
189
- }
190
- }
191
-
192
- .ivu-radio-checked {
193
- .ivu-radio-inner {
194
- &::after {
195
- background-color: @themeColor;
196
- }
197
- }
198
- }
199
-
200
- each(@resourceColor, {
201
- .color-@{index} {
202
- .ivu-radio {
203
- .ivu-radio-inner {
204
- border-color: @value;
205
- }
206
- }
207
-
208
- .ivu-radio-checked {
209
- .ivu-radio-inner {
210
- &::after {
211
- background-color: @value;
212
- }
213
- }
214
- }
215
- }
216
- });
217
- }
218
-
219
- &-scroll {
220
- .bri-scrollbar3();
221
- overflow: auto;
222
- white-space: nowrap;
223
- }
224
- }
225
-
226
- &-dropdown {
227
- .ivu-select-multiple {
228
- .ivu-select-selection {
229
- height: 32px;
230
- .dsh-flex-row-between-center();
231
-
232
- & > div {
233
- width: 100%;
234
- height: 100%;
235
- word-break: keep-all;
236
- white-space: nowrap;
237
- overflow: auto;
238
- .bri-scrollbar3();
239
-
240
- .ivu-tag {
241
- margin: 2px 4px 0px 0px;
242
- background-color: @borderColor;
243
- }
244
- }
245
- }
246
-
247
- &.ivu-select-disabled {
248
- .ivu-select-selection {
249
- & > div {
250
- .ivu-tag {
251
- background-color: @border-disabled;
252
- }
253
- }
254
- }
255
- }
256
-
257
- .ivu-select-item-selected:after {
258
- content: none;
259
- }
260
- }
261
- }
154
+ @import url("../../control.less");
262
155
 
263
- &-modal {
264
- .ivu-modal-wrap {
265
- display: flex;
266
- align-items: center;
267
- justify-content: center;
268
- }
269
-
270
- .ivu-modal {
271
- width: 544px !important;
272
- position: static;
273
- }
274
-
275
- .ivu-modal-content {
276
- border-radius: 8px;
277
- }
278
-
279
- .ivu-modal-header {
280
- border-bottom: none;
281
- padding: 32px 32px 0;
282
-
283
- .ivu-modal-header-inner {
284
- font-size: 18px;
285
- font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
286
- font-weight: 600;
287
- color: #252F36;
288
- }
289
- }
290
-
291
- .DshModal-close {
292
- right: 30px !important;
293
- top: 30px !important;
294
- background: #F4F6F8;
295
- border-radius: 4px 4px 4px 4px;
296
- }
297
-
298
- .ivu-modal-body {
299
- padding: 24px 32px 32px;
300
- }
301
-
302
- &-footer {
303
- margin-top: 24px;
304
- text-align: right;
305
-
306
- .ivu-btn {
307
- font-size: 16px;
308
- font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
309
- font-weight: 600;
310
- border-radius: 4px;
311
- }
312
- }
313
- }
314
-
315
- // 查看
316
- &-show {
317
- &-ellipsis {
318
- .dsh-ellipsis();
319
- }
320
- }
156
+ .DshSelect {
157
+ #control-select(radio);
321
158
  }
322
159
  </style>
package/src/components/controls/control.less ADDED
@@ -0,0 +1,195 @@
1
+ #control-select (@control-type) {
2
+ &-flat {
3
+ width: 100%;
4
+
5
+ .ivu-@{control-type}-wrapper {
6
+ height: auto;
7
+ padding: 6px 0px;
8
+ margin-right: 12px;
9
+ margin-bottom: 4px;
10
+ white-space: normal;
11
+
12
+ .ivu-@{control-type} {
13
+ .ivu-@{control-type}-inner {
14
+
15
+ }
16
+
17
+ .ivu-@{control-type}-focus {
18
+ box-shadow: 0 0 0 0;
19
+ }
20
+
21
+ &-checked {
22
+ // 因为不一致，所以明确名字分开写
23
+ .ivu-radio-inner {
24
+ &::after {
25
+ background-color: @themeColor;
26
+ }
27
+ }
28
+
29
+ .ivu-checkbox-inner {
30
+ background-color: @themeColor;
31
+ }
32
+ }
33
+
34
+ & + span {
35
+
36
+ }
37
+ }
38
+
39
+ // 选项置灰时
40
+ &-disabled {
41
+ .ivu-@{control-type} {
42
+ .ivu-@{control-type}-inner {
43
+ border-color: #aaaaaa!important; // 为了useColor且disbaled时，压住下面each里的样式，这些还生效
44
+ }
45
+
46
+ &-checked {
47
+ .ivu-@{control-type}-inner {
48
+ background-color: #E5E5E5!important; // 为了useColor且disbaled时，压住下面each里的样式，这些还生效
49
+
50
+ &::after {
51
+ background-color: #aaaaaa!important; // 为了useColor且disbaled时，压住下面each里的样式，这些还生效
52
+ }
53
+ }
54
+ }
55
+
56
+
57
+ & + span {
58
+ color: #aaaaaa!important; // 为了useColor且disbaled时，压住下面each里的样式，这些还生效
59
+ }
60
+ }
61
+ }
62
+
63
+ &:last-child {
64
+ margin-right: 0px;
65
+ }
66
+ }
67
+
68
+ &-color {
69
+ .ivu-@{control-type}-wrapper {
70
+ padding: 6px 15px;
71
+ border-radius: 4px;
72
+ border-color: transparent;
73
+ line-height: 16px;
74
+
75
+ .ivu-@{control-type} {
76
+ .ivu-@{control-type}-inner {
77
+ border: 2px solid @themeColor;
78
+ background-color: transparent;
79
+ }
80
+
81
+ // 因为不一致，所以明确名字分开写
82
+ .ivu-radio-inner {
83
+ width: 14px;
84
+ height: 14px;
85
+
86
+ &::after {
87
+ width: 6px;
88
+ height: 6px;
89
+ left: 2px;
90
+ top: 2px;
91
+ }
92
+ }
93
+ .ivu-checkbox-inner {
94
+ &::after {
95
+ top: 2px;
96
+ left: 4px;
97
+ }
98
+ }
99
+ }
100
+ }
101
+
102
+ each(@resourceColor, {
103
+ .color-@{index}.ivu-@{control-type}-wrapper {
104
+ .ivu-@{control-type} {
105
+ .ivu-@{control-type}-inner {
106
+ border-color: @value;
107
+ }
108
+
109
+ &-checked {
110
+ // 因为不一致，所以明确名字分开写
111
+ .ivu-radio-inner {
112
+ &::after {
113
+ background-color: @value;
114
+ }
115
+ }
116
+ .ivu-checkbox-inner {
117
+ background-color: @value;
118
+ }
119
+ }
120
+ }
121
+
122
+ &-checked {
123
+ border-color: @value;
124
+ }
125
+
126
+ &-disabled {
127
+ border-color: #f3f3f3;
128
+ background-color: #f3f3f3!important; // 压住style里的background-color
129
+
130
+ &.ivu-@{control-type}-wrapper-checked {
131
+ border-color: #aaaaaa;
132
+ }
133
+ }
134
+ }
135
+ });
136
+ }
137
+
138
+ &-scroll {
139
+ .bri-scrollbar3();
140
+ white-space: nowrap;
141
+ overflow: auto;
142
+
143
+ .ivu-@{control-type}-wrapper {
144
+ height: 30px;
145
+ margin-bottom: 2px;
146
+ white-space: nowrap;
147
+ }
148
+ }
149
+ }
150
+
151
+ &-dropdown {
152
+ &.ivu-select-multiple {
153
+ .ivu-select-selection {
154
+ height: 32px;
155
+ .dsh-flex-row-between-center();
156
+
157
+ & > div {
158
+ .bri-scrollbar3();
159
+ width: 100%;
160
+ height: 100%;
161
+ word-break: keep-all;
162
+ white-space: nowrap;
163
+ overflow: auto;
164
+ overflow-y: hidden;
165
+
166
+ .ivu-tag {
167
+ margin: 2px 4px 0px 0px;
168
+ background-color: @borderColor;
169
+ }
170
+ }
171
+ }
172
+
173
+ &.ivu-select-disabled {
174
+ .ivu-select-selection {
175
+ & > div {
176
+ .ivu-tag {
177
+ background-color: @border-disabled;
178
+ }
179
+ }
180
+ }
181
+ }
182
+
183
+ .ivu-select-item-selected:after {
184
+ content: none;
185
+ }
186
+ }
187
+ }
188
+
189
+ // 查看
190
+ &-show {
191
+ &-ellipsis {
192
+ .dsh-ellipsis();
193
+ }
194
+ }
195
+ }
package/src/components/controls/mixins/controlMixin.js CHANGED
@@ -123,9 +123,14 @@ export default {
123
123
  "bri-control-nodata": this.$isEmptyData(this.curVal)
124
124
  };
125
125
  },
126
+ // 单独一行
126
127
  isFullRow () {
127
128
  return this.propsObj._span === 24 || !this.propsObj._span;
128
129
  },
130
+ // 控件内容高度 自由
131
+ isHeightAuto () {
132
+ return this.isFullRow && !this.isInTable;
133
+ },
129
134
  clearable () {
130
135
  return this.commonDealPropsObj._clearable;
131
136
  },
package/src/components/controls/mixins/selectMixin.js CHANGED
@@ -96,6 +96,12 @@ export default {
96
96
  }
97
97
  }
98
98
  },
99
+ // 单选模式 取消选择项
100
+ cancelRadioItemSelect (item, index) {
101
+ if (this.curVal === item._key) {
102
+ this.clickRadioItem(item, index);
103
+ }
104
+ },
99
105
  // 多选模式 点击选项
100
106
  clickCheckItem (item, index) {
101
107
  if (!this.getCheckItemDisabled(item)) {
@@ -108,6 +114,7 @@ export default {
108
114
  },
109
115
 
110
116
  /* ------- 方法 ------- */
117
+ // 每项的class集合 --flat方式在用
111
118
  getItemClass (item) {
112
119
  return [
113
120
  this.useColor
@@ -116,6 +123,7 @@ export default {
116
123
  item.class
117
124
  ];
118
125
  },
126
+ // 每项的颜色相关style --flat方式在用
119
127
  getItemColorStyle (item) {
120
128
  const color = this.colorMap[item.color] || this.colorMap["color-1"];
121
129
  return this.useColor
@@ -125,6 +133,7 @@ export default {
125
133
  }
126
134
  : {};
127
135
  },
136
+ // 每项的具体样式 -查看状态时用
128
137
  getItemShowStyle (item) {
129
138
  return {
130
139
  ...this.getItemColorStyle(item),
@@ -146,13 +155,9 @@ export default {
146
155
  return !!(
147
156
  this.selfPropsObj._disabled ||
148
157
  item._disabled ||
149
- (this.curValList.length >= this.selfPropsObj._max && !this.getCheckItemStatus(item))
158
+ (this.curValList.length >= this.selfPropsObj._max && !this.curValList.includes(item._key))
150
159
  );
151
160
  },
152
- // 获取多选项的选中状态
153
- getCheckItemStatus (item) {
154
- return this.curValList.includes(item._key);
155
- },
156
161
  getItemObj (key) {
157
162
  const obj = this.listData.find(item => item._key === key) || {
158
163
  _key: key,
package/src/components/small/DshModal.vue CHANGED
@@ -37,7 +37,7 @@
37
37
  <slot name="header-right"></slot>
38
38
  </div>
39
39
 
40
- <!-- 删除按钮 -->
40
+ <!-- 关闭按图标 -->
41
41
  <Icon
42
42
  v-if="selfPropsObj.showSlotClose"
43
43
  class="DshModal-close"
package/src/components/unit/DshFormUnit.vue CHANGED
@@ -7,7 +7,6 @@
7
7
  'DshFormUnit-line': formItem._line
8
8
  },
9
9
  formControlClass,
10
- formItem.formControlClass
11
10
  ]"
12
11
  :style="{
13
12
  width: `calc(${(formItem._br ? (formItem._span || 24)/24 : 1) * 100}% - 12px)`,
@@ -44,10 +43,7 @@
44
43
  </slot>
45
44
 
46
45
  <!-- label后可自定义内容 -->
47
- <dsh-render
48
- v-if="formItem._tipsRender"
49
- :render="tipsRender(formItem, formData)"
50
- ></dsh-render>
46
+ <dsh-render :render="tipsRender(formItem, formData)"></dsh-render>
51
47
  </span>
52
48
  </bri-tooltip>
53
49
  </span>
@@ -155,13 +151,95 @@
155
151
  this.$emit("changeField", ...params);
156
152
  },
157
153
  tipsRender (formItem, formData) {
158
- return formItem._tipsRender.call(this, formItem, formData);
154
+ return formItem._tipsRender
155
+ ? formItem._tipsRender.call(this, formItem, formData)
156
+ : formItem._openTip
157
+ ? (h) => {
158
+ return h("span", {}, [
159
+ h("Icon", {
160
+ props: {
161
+ type: "md-help-circle"
162
+ },
163
+ style: {
164
+ cursor: "pointer"
165
+ },
166
+ on: {
167
+ click: () => {
168
+ if (formItem._tipKind === "dynamic" && !formItem._tipContent) {
169
+ if (formItem._tipUrl) {
170
+ this.$https({
171
+ url: {
172
+ module: "customPage",
173
+ name: formItem._tipUrl
174
+ },
175
+ params: {
176
+ formData: formData,
177
+ propsObj: formItem
178
+ },
179
+ callback: res => {
180
+ this.showTipModal = true;
181
+ formItem._tipContent = res;
182
+ }
183
+ });
184
+ }
185
+ } else {
186
+ this.showTipModal = true;
187
+ }
188
+ }
189
+ }
190
+ }),
191
+
192
+ h("dsh-modal", {
193
+ props: {
194
+ value: this.showTipModal,
195
+ mode: "small",
196
+ propsObj: {
197
+ title: "温馨提示",
198
+ class: "DshFormUnit-modal",
199
+ showSlotClose: false,
200
+ maskClosable: true
201
+ }
202
+ },
203
+ on: {
204
+ input: bool => {
205
+ this.showTipModal = bool;
206
+ }
207
+ }
208
+ }, [
209
+ h("div", {
210
+ class: "wrap"
211
+ }, [
212
+ h("div", {
213
+ class: "wrap-content",
214
+ domProps: {
215
+ innerHTML: formItem._tipContent
216
+ }
217
+ }),
218
+ h("div", {
219
+ class: "wrap-btns"
220
+ }, [
221
+ h("Button", {
222
+ props: {
223
+ type: "primary"
224
+ },
225
+ on: {
226
+ click: () => {
227
+ this.showTipModal = false;
228
+ }
229
+ }
230
+ }, "我知道了")
231
+ ])
232
+ ])
233
+ ])
234
+ ]);
235
+ }
236
+ : undefined;
159
237
  }
160
238
  }
161
239
  };
162
240
  </script>
163
241
 
164
- <style lang="less" scoped>
242
+ <style lang="less">
165
243
  .DshFormUnit {
166
244
  margin: 3px 6px; // 不可轻易改margin的左右值，上面style的width根据他calc
167
245
  padding: 0px 10px 10px;
@@ -211,6 +289,7 @@
211
289
 
212
290
  &-control {
213
291
  min-height: 32px;
292
+ overflow: hidden;
214
293
  }
215
294
 
216
295
  &-line {
@@ -258,5 +337,33 @@
258
337
  color: #E94829;
259
338
  }
260
339
  }
340
+
341
+ &-modal {
342
+ .wrap {
343
+ width: 100%;
344
+ height: 100%;
345
+ display: flex;
346
+ flex-direction: column;
347
+
348
+ &-content {
349
+ flex: 1;
350
+ min-height: 0px;
351
+ padding: 0px 12px;
352
+ overflow: auto;
353
+ }
354
+
355
+ &-btns {
356
+ margin: 10px 0px;
357
+ text-align: right;
358
+
359
+ .ivu-btn {
360
+ font-size: 16px;
361
+ font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
362
+ font-weight: 600;
363
+ border-radius: 4px;
364
+ }
365
+ }
366
+ }
367
+ }
261
368
  }
262
369
  </style>