bri-components 1.2.57 → 1.2.59

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 (42) hide show
  1. package/package.json +2 -2
  2. package/src/components/controls/base/BriUpload/BriUpload.vue +1 -1
  3. package/src/components/controls/base/DshCascader/DshCascader.vue +68 -231
  4. package/src/components/controls/base/DshCascader/{cascaderModal.vue → components/cascaderModal.vue} +22 -31
  5. package/src/components/controls/base/DshCascader/{cascaderPicker.vue → components/cascaderPicker.vue} +22 -18
  6. package/src/components/controls/base/DshCascader/components/cascaderSimple.vue +141 -0
  7. package/src/components/controls/base/DshCoordinates.vue +1 -1
  8. package/src/components/controls/base/DshDate/DshDate.vue +1 -1
  9. package/src/components/controls/base/DshDate/DshDaterange.vue +1 -1
  10. package/src/components/controls/base/DshDivider.vue +1 -1
  11. package/src/components/controls/base/DshEditor.vue +1 -1
  12. package/src/components/controls/base/DshInput/BriInputs.vue +1 -1
  13. package/src/components/controls/base/DshInput/DshInput.vue +1 -1
  14. package/src/components/controls/base/DshNumber/DshNumber.vue +1 -1
  15. package/src/components/controls/base/DshNumber/DshNumberange.vue +1 -1
  16. package/src/components/controls/base/DshSelect/DshCheckbox.vue +187 -185
  17. package/src/components/controls/base/DshSelect/DshSelect.vue +140 -137
  18. package/src/components/controls/base/DshSwitch/switchMixin.js +1 -1
  19. package/src/components/controls/extra/themeColor.vue +1 -1
  20. package/src/components/controls/extra/themeIcon.vue +1 -1
  21. package/src/components/controls/{base/DshCascader → mixins}/cascaderMixin.js +16 -33
  22. package/src/components/controls/{base/DshCascader → mixins}/cascaderPickerMixin.js +52 -44
  23. package/src/components/controls/{controlMixin.js → mixins/controlMixin.js} +25 -4
  24. package/src/components/controls/mixins/selectMixin.js +192 -0
  25. package/src/components/controls/senior/BriLabels.vue +1 -1
  26. package/src/components/controls/senior/DshPackage.vue +1 -1
  27. package/src/components/controls/senior/cascaderTable.vue +1 -1
  28. package/src/components/controls/senior/flatTable.vue +1 -1
  29. package/src/components/controls/senior/selectDepartments.vue +1 -1
  30. package/src/components/controls/senior/selectUsers/selectUsers.vue +1 -1
  31. package/src/components/controls/special/DshBack.vue +1 -1
  32. package/src/components/controls/special/DshUndeveloped.vue +1 -1
  33. package/src/components/form/DshAdvSearch.vue +1 -1
  34. package/src/components/list/DshBox/DshCard.vue +153 -38
  35. package/src/components/list/DshBox/DshPanel.vue +260 -93
  36. package/src/components/small/BriTooltip.vue +2 -3
  37. package/src/components/unit/DshFormUnit.vue +7 -19
  38. package/src/styles/components/index.less +0 -2
  39. package/src/components/controls/base/DshSelect/selectMixin.js +0 -239
  40. package/src/styles/components/list/DshBox/DshCard.less +0 -59
  41. package/src/styles/components/list/DshBox/DshPanel.less +0 -107
  42. package/src/styles/components/small/BriTooltip.less +0 -0
package/src/components/controls/base/DshSelect/DshCheckbox.vue CHANGED
@@ -1,116 +1,110 @@
1
1
  <template>
2
- <div class="DshCheckbox">
3
- <!-- 编辑 -->
4
- <template v-if="canEdit">
5
- <!-- 有选项 -->
6
- <template v-if="listData.length">
7
- <!-- flat方式 -->
8
- <template v-if="showType === 'flat'">
9
- <CheckboxGroup
10
- :class="{
2
+ <!-- 编辑 -->
3
+ <div
4
+ v-if="canEdit"
5
+ class="DshCheckbox"
6
+ >
7
+ <!-- 有选项 -->
8
+ <template v-if="listData.length">
9
+ <!-- flat方式 -->
10
+ <template v-if="showType === 'flat'">
11
+ <CheckboxGroup
12
+ :class="{
11
13
  'DshCheckbox-flat': true,
12
14
  'DshCheckbox-flat-color': useColor,
13
- 'DshCheckbox-flat-disabled': !canEdit,
14
- 'DshCheckbox-flat-scroll': selfPropsObj._span < 24 && !selfPropsObj._br,
15
+ 'DshCheckbox-flat-scroll': !isFullRow,
15
16
  }"
16
- v-model="curValList"
17
+ v-model="curValList"
18
+ >
19
+ <Checkbox
20
+ v-for="(item, index) in listData"
21
+ :key="item._key"
22
+ :class="getItemClass(item)"
23
+ :style="getItemColorStyle(item)"
24
+ :label="item._key"
25
+ :disabled="getCheckItemDisabled(item)"
26
+ :border="useColor"
27
+ @click.native="clickCheckItem(item, index)"
17
28
  >
18
- <Checkbox
19
- v-for="(item, index) in listData"
20
- :key="index"
21
- :class="[
22
- 'DshCheckbox-item',
23
- getItemColorClass(item),
24
- selfPropsObj.class,
25
- item.class
26
- ]"
27
- :style="getItemStyle(item)"
28
- :label="item._key"
29
- :disabled="getItemDisabled(item)"
30
- :border="useColor"
31
- @click.native="clickOpenTip(item)"
32
- >
33
- <slot :item="item"></slot>
29
+ <slot :item="item"></slot>
34
30
 
35
- <span>{{ item.name || item._name }}</span>
36
- </Checkbox>
37
-
38
- <!-- tip项弹框提示 -->
39
- <dsh-render :render="tipModalRender"></dsh-render>
40
- </CheckboxGroup>
41
- </template>
31
+ <span>{{ item.name || item._name }}</span>
32
+ </Checkbox>
33
+ </CheckboxGroup>
34
+ </template>
42
35
 
43
- <!-- dropdown模式 -->
44
- <template v-else>
45
- <Select
46
- v-model="value[controlKey]"
47
- :multiple="true"
48
- :placeholder="selfPropsObj._placeholder"
49
- :disabled="!finalCanEdit"
50
- :filterable="selfPropsObj._filterable"
51
- :transfer="selfPropsObj._transfer"
52
- :transfer-class-name="selfPropsObj._transferClassName"
53
- :max-tag-count="selfPropsObj._maxTagCount"
54
- @on-select="changeSelect"
36
+ <!-- dropdown模式 -->
37
+ <template v-else>
38
+ <Select
39
+ :class="{
40
+ 'DshCheckbox-dropdown': true,
41
+ }"
42
+ :value="curValList"
43
+ :multiple="true"
44
+ :placeholder="selfPropsObj._placeholder"
45
+ :disabled="selfPropsObj._disabled"
46
+ :filterable="selfPropsObj._filterable"
47
+ :transfer="selfPropsObj._transfer"
48
+ :transfer-class-name="selfPropsObj._transferClassName"
49
+ :max-tag-count="selfPropsObj._maxTagCount"
50
+ @on-select="changeCheckValue"
51
+ >
52
+ <Option
53
+ v-for="(item, index) in listData"
54
+ :key="item._key"
55
+ :value="item._key"
56
+ :label="item.name || item._name"
57
+ :disabled="getCheckItemDisabled(item, index)"
55
58
  >
56
- <Option
57
- v-for="(item, index) in listData"
58
- :key="index"
59
- :value="item._key"
60
- :label="item.name || item._name"
61
- :disabled="getItemDisabled(item)"
62
- >
63
- <Checkbox :value="getItemSelectStatus(item)"></Checkbox>
59
+ <Checkbox :value="getCheckItemStatus(item)"></Checkbox>
64
60
 
65
- <slot :item="item"></slot>
61
+ <slot :item="item"></slot>
66
62
 
67
- <span>{{ item.name || item._name }}</span>
68
- <span style="float:right; padding-right:20px">
69
- {{ item.rightName }}
70
- </span>
71
- </Option>
72
- </Select>
73
- </template>
63
+ <span>{{ item.name || item._name }}</span>
64
+ </Option>
65
+ </Select>
74
66
  </template>
75
-
76
- <!-- 无选项 -->
77
- <div
78
- v-else
79
- class="dsh-subtip"
80
- >-- 无选择项 --</div>
81
67
  </template>
82
68
 
83
- <!-- 查看 -->
84
- <template v-else>
85
- <bri-tooltip
86
- :content="showMulVal"
87
- placement="top"
88
- maxWidth="200"
89
- :transfer="true"
90
- >
91
- <div :class="{
69
+ <!-- 无选项 -->
70
+ <div
71
+ v-else
72
+ class="dsh-subtip"
73
+ >-- 无选择项 --</div>
74
+ </div>
75
+
76
+ <!-- 查看 -->
77
+ <div
78
+ v-else
79
+ class="DshCheckbox-show"
80
+ >
81
+ <!-- 有值 -->
82
+ <bri-tooltip
83
+ v-if="!$isEmptyData(curValList)"
84
+ :content="showMulVal"
85
+ :transfer="true"
86
+ >
87
+ <dsh-tags
88
+ :class="{
92
89
  ...commonClass,
93
- 'DshCheckbox-show': true
94
- }">
95
- <!-- 有值 -->
96
- <dsh-tags
97
- v-if="!$isEmptyData(curValList)"
98
- class="text"
99
- :list="curValObjList"
100
- ></dsh-tags>
90
+ 'DshCheckbox-show-ellipsis': !(isDetailShow && isFullRow)
91
+ }"
92
+ :list="curValObjList"
93
+ ></dsh-tags>
94
+ </bri-tooltip>
101
95
 
102
- <!-- 无值 -->
103
- <template v-else>
104
- {{ emptyShowVal }}
105
- </template>
106
- </div>
107
- </bri-tooltip>
108
- </template>
96
+ <!-- 无值 -->
97
+ <div
98
+ v-else
99
+ :class="commonClass"
100
+ >
101
+ {{ emptyShowVal }}
102
+ </div>
109
103
  </div>
110
104
  </template>
111
105
 
112
106
  <script>
113
- import selectMixin from "./selectMixin.js";
107
+ import selectMixin from "../../mixins/selectMixin.js";
114
108
 
115
109
  export default {
116
110
  name: "DshCheckbox",
@@ -125,46 +119,22 @@
125
119
  computed: {
126
120
  selfPropsObj () {
127
121
  return {
122
+ _max: 100000000,
128
123
  _transfer: true,
129
- ...this.selectPropsObj
124
+ _transferClassName: "",
125
+
126
+ ...this.basePropsObj
130
127
  };
131
128
  }
132
129
  },
133
130
  created () {},
134
131
  methods: {
135
- // 下拉框的change (下拉方式时用v-model触发change有问题，组件进来如果值不为空的，就会v-model返值一次)
136
- changeSelect (item) {
137
- if (this.curValList.includes(item.value)) {
138
- let itemIndex = this.curValList.findIndex(valItem => valItem === item.value);
139
- this.curValList.splice(itemIndex, 1);
140
- } else {
141
- this.curValList.push(item.value);
142
- }
143
-
144
- this.curValList = [...this.curValList];
145
- },
146
-
147
- getItemColorClass (item) {
148
- return this.colorMap[item.color] ? item.color : "color-1";
149
- },
150
- getItemStyle (item) {
151
- const color = this.colorMap[item.color] || this.colorMap["color-1"];
152
- return {
153
- background: this.useColor ? this.$getColor(color, 0.1) : undefined,
154
- color: this.useColor ? color : undefined
155
- };
156
- },
157
- // 获取某项的置灰状态
158
- getItemDisabled (item) {
159
- return !!(
160
- !this.finalCanEdit ||
161
- item._disabled ||
162
- this.curValList.length >= this.selfPropsObj._max && !this.getItemSelectStatus(item)
163
- );
164
- },
165
- // 获取某项的选中状态
166
- getItemSelectStatus (item) {
167
- return this.curValList.includes(item._key);
132
+ // 多选模式 值改变 (pc端下拉方式时，用v-model触发change有问题，组件进来如果值不为空的，就会v-model返值一次)
133
+ changeCheckValue (item) {
134
+ this.clickCheckItem({
135
+ ...item,
136
+ _key: item.value
137
+ });
168
138
  }
169
139
  }
170
140
  };
@@ -172,108 +142,140 @@
172
142
 
173
143
  <style lang="less">
174
144
  .DshCheckbox {
175
- width: 100%;
176
-
177
145
  &-flat {
178
146
  width: 100%;
179
147
 
180
- // 选中时背景为白色
181
- .ivu-checkbox-checked .ivu-checkbox-inner {
182
- background-color: @themeColor;
183
- }
148
+ .ivu-checkbox-wrapper {
149
+ margin-bottom: 4px;
150
+ margin-right: 16px;
184
151
 
185
- &-item {}
152
+ .ivu-checkbox {
153
+ &.ivu-checkbox-checked {
154
+ .ivu-checkbox-inner {
155
+ background-color: @themeColor;
156
+ }
157
+ }
158
+ }
159
+ }
186
160
 
187
161
  &-color {
188
- .ivu-checkbox-border {
189
- margin-right: 16px;
162
+ .ivu-checkbox-wrapper {
190
163
  height: 32px;
191
164
  border: none;
192
165
  border-radius: 4px;
193
166
  line-height: 32px;
194
- color: #FFF;
195
- }
196
167
 
197
- .ivu-checkbox {
198
- .ivu-checkbox-inner {
199
- border: 2px solid @themeColor;
200
- background-color: transparent;
201
- }
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
+ }
202
176
 
203
- .ivu-checkbox-focus {
204
- box-shadow: 0 0 0 0;
177
+ &.ivu-checkbox-checked {
178
+ .ivu-checkbox-inner {
179
+ &:after {
180
+ top: 2px;
181
+ left: 4px;
182
+ }
183
+ }
184
+ }
205
185
  }
206
- }
207
186
 
208
- .ivu-checkbox-disabled+span {
209
- color: inherit;
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
+ }
210
207
  }
211
208
 
209
+ // ivu-checkbox-wrapper 和 color-1 在一个div上
212
210
  each(@resourceColor, {
213
211
  .color-@{index} {
214
212
  .ivu-checkbox {
215
213
  .ivu-checkbox-inner {
216
214
  border-color: @value;
217
215
  }
218
- }
219
216
 
220
- .ivu-checkbox-checked {
221
- .ivu-checkbox-inner {
222
- background-color: @value;
217
+ &.ivu-checkbox-checked {
218
+ .ivu-checkbox-inner {
219
+ background-color: @value;
220
+ }
223
221
  }
224
222
  }
225
223
  }
226
224
  });
227
225
  }
228
226
 
229
- &-disabled {
230
- .ivu-checkbox-disabled+span {
231
- color: #515a6e;
232
- }
233
- }
234
-
235
227
  &-scroll {
236
- overflow: auto;
228
+ .bri-scrollbar3();
237
229
  white-space: nowrap;
230
+ overflow: auto;
238
231
 
239
- .bri-scrollbar3();
232
+ .ivu-checkbox-wrapper {
233
+ margin-bottom: 4px;
234
+ }
240
235
  }
241
236
  }
242
237
 
243
- &-show {}
244
-
245
- .ivu-select-multiple {
246
- .ivu-select-selection {
247
- height: 32px;
248
- .dsh-flex-row-between-center();
238
+ &-dropdown {
239
+ .ivu-select-multiple {
240
+ .ivu-select-selection {
241
+ height: 32px;
242
+ .dsh-flex-row-between-center();
249
243
 
250
- & > div {
251
- width: 100%;
252
- height: 100%;
253
- word-break: keep-all;
254
- white-space: nowrap;
255
- overflow: auto;
256
- .bri-scrollbar3();
244
+ & > div {
245
+ width: 100%;
246
+ height: 100%;
247
+ word-break: keep-all;
248
+ white-space: nowrap;
249
+ overflow: auto;
250
+ .bri-scrollbar3();
257
251
 
258
- .ivu-tag {
259
- margin: 2px 4px 0px 0px;
260
- background-color: @borderColor;
252
+ .ivu-tag {
253
+ margin: 2px 4px 0px 0px;
254
+ background-color: @borderColor;
255
+ }
261
256
  }
262
257
  }
263
- }
264
258
 
265
- &.ivu-select-disabled {
266
- .ivu-select-selection {
267
- & > div {
268
- .ivu-tag {
269
- background-color: @border-disabled;
259
+ &.ivu-select-disabled {
260
+ .ivu-select-selection {
261
+ & > div {
262
+ .ivu-tag {
263
+ background-color: @border-disabled;
264
+ }
270
265
  }
271
266
  }
272
267
  }
268
+
269
+ .ivu-select-item-selected:after {
270
+ content: none;
271
+ }
273
272
  }
273
+ }
274
274
 
275
- .ivu-select-item-selected:after {
276
- content: none;
275
+ // 查看
276
+ &-show {
277
+ &-ellipsis {
278
+ .dsh-ellipsis();
277
279
  }
278
280
  }
279
281
  }