bri-components 1.1.4 → 1.1.5
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/lib/0.bri-components.min.js +1 -1
- package/lib/1.bri-components.min.js +1 -1
- package/lib/bri-components.min.js +5 -5
- package/package.json +1 -1
- package/src/components/controls/base/DshCascader/DshCascader.vue +199 -160
- package/src/components/controls/base/DshCascader/InfoCascader.vue +11 -9
- package/src/components/controls/base/DshCoordinates.vue +118 -115
- package/src/components/controls/controlMixin.js +26 -6
- package/src/components/list/BriTable.vue +0 -1
- package/src/components/other/BriSvg.vue +28 -0
- package/src/components/other/DshEditPanel.vue +33 -11
- package/src/components/other/ZLoading.vue +24 -12
- package/src/index.js +6 -5
- package/src/styles/components/controls/DshCascader.less +66 -50
- package/src/styles/components/index.less +0 -1
- package/src/styles/components/other/ZLoading.less +5 -7
- package/src/styles/components/small/DshDropdown.less +1 -7
- package/src/components/small/DshControlDefine.vue +0 -115
- package/src/styles/components/small/DshControlDefine.less +0 -40
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
<!--
|
|
2
|
+
<div class="DshCascader">
|
|
3
|
+
<!-- 编辑 -->
|
|
4
4
|
<template v-if="canEdit">
|
|
5
|
-
<!-- 多选
|
|
5
|
+
<!-- 多选 多选的filterable必须是false，不然出bug -->
|
|
6
6
|
<template v-if="useMultiple === true">
|
|
7
7
|
<Cascader
|
|
8
|
-
|
|
8
|
+
class="DshCascader-multiple"
|
|
9
9
|
:value="multipleSelectVal"
|
|
10
10
|
:data="renderCascaderData"
|
|
11
11
|
:disabled="!finalCanEdit"
|
|
@@ -19,101 +19,164 @@
|
|
|
19
19
|
@on-visible-change="multipleVisibleChange"
|
|
20
20
|
@on-change="createItem"
|
|
21
21
|
>
|
|
22
|
-
<
|
|
23
|
-
:
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
...selfPropsObj,
|
|
28
|
-
_multiplerow: selfPropsObj._span == 24 || !selfPropsObj._span
|
|
22
|
+
<div
|
|
23
|
+
:class="{
|
|
24
|
+
...commonClass,
|
|
25
|
+
'DshCascader-multiple-input': true,
|
|
26
|
+
'DshCascader-multiplerow': isSelfRow,
|
|
29
27
|
}"
|
|
30
|
-
@
|
|
31
|
-
|
|
28
|
+
@click="clickInput"
|
|
29
|
+
>
|
|
30
|
+
<!-- 有值 -->
|
|
31
|
+
<div
|
|
32
|
+
v-if="!$isEmptyData(curVal)"
|
|
33
|
+
class="hasdata"
|
|
34
|
+
>
|
|
35
|
+
<dsh-tags
|
|
36
|
+
:list="curValNameList"
|
|
37
|
+
:propsObj="{
|
|
38
|
+
closable: canEdit,
|
|
39
|
+
size: isSelfRow ? 'medium' : 'default'
|
|
40
|
+
}"
|
|
41
|
+
@delete="deleteItem"
|
|
42
|
+
></dsh-tags>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<!-- 无值 -->
|
|
46
|
+
<span
|
|
47
|
+
v-else
|
|
48
|
+
class="nodata"
|
|
49
|
+
>
|
|
50
|
+
{{ emptyShowVal }}
|
|
51
|
+
</span>
|
|
52
|
+
</div>
|
|
32
53
|
</Cascader>
|
|
33
54
|
</template>
|
|
34
55
|
|
|
35
56
|
<!-- 单选 -->
|
|
36
57
|
<template v-else>
|
|
37
|
-
<!--
|
|
38
|
-
<template v-if="
|
|
58
|
+
<!-- 弹框方式 -->
|
|
59
|
+
<template v-if="showMode === 'custom'">
|
|
39
60
|
<div
|
|
40
|
-
:class="
|
|
61
|
+
:class="{
|
|
62
|
+
...commonClass,
|
|
63
|
+
'DshCascader-custom-input': true
|
|
64
|
+
}"
|
|
41
65
|
@click="openModal"
|
|
42
66
|
>
|
|
67
|
+
<!-- 有值 -->
|
|
43
68
|
<div
|
|
44
|
-
v-if="
|
|
45
|
-
class="
|
|
69
|
+
v-if="!$isEmptyData(curValList)"
|
|
70
|
+
class="hasdata"
|
|
71
|
+
@mouseenter="isHover = true"
|
|
72
|
+
@mouseleave="isHover = false"
|
|
46
73
|
>
|
|
47
|
-
<span
|
|
48
|
-
|
|
49
|
-
'DshCascader-single-val-text-disabled': !finalCanEdit,
|
|
50
|
-
}">
|
|
51
|
-
{{ $getTreeLinealDatas(value[controlKey], cascaderData, "name").join("/") }}
|
|
74
|
+
<span class="hasdata-text">
|
|
75
|
+
{{ curValNameStr }}
|
|
52
76
|
</span>
|
|
77
|
+
|
|
53
78
|
<Icon
|
|
54
|
-
v-if="selfPropsObj._clearable"
|
|
55
|
-
class="
|
|
79
|
+
v-if="selfPropsObj._clearable && isHover"
|
|
80
|
+
class="hasdata-clear"
|
|
56
81
|
type="md-close"
|
|
57
82
|
@click.stop="clickClear"
|
|
58
83
|
/>
|
|
84
|
+
<Icon
|
|
85
|
+
v-else
|
|
86
|
+
class="hasdata-clear"
|
|
87
|
+
type="ios-arrow-down"
|
|
88
|
+
/>
|
|
59
89
|
</div>
|
|
60
90
|
|
|
91
|
+
<!-- 无值 -->
|
|
61
92
|
<span
|
|
62
93
|
v-else
|
|
63
|
-
class="
|
|
94
|
+
class="nodata"
|
|
64
95
|
>
|
|
65
|
-
{{
|
|
96
|
+
{{ emptyShowVal }}
|
|
66
97
|
</span>
|
|
67
98
|
</div>
|
|
68
99
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
100
|
+
<!-- 内容弹框 -->
|
|
101
|
+
<info-cascader
|
|
102
|
+
v-if="showModal"
|
|
103
|
+
:showModal="showModal"
|
|
104
|
+
v-model="curValList"
|
|
105
|
+
:data="cascaderData"
|
|
106
|
+
:propsObj="selfPropsObj"
|
|
107
|
+
@change="change"
|
|
108
|
+
@changeShowModal="changeShowModal"
|
|
109
|
+
></info-cascader>
|
|
79
110
|
</template>
|
|
80
111
|
|
|
81
|
-
<!--
|
|
82
|
-
<
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
@click.native.stop="clickInput"
|
|
102
|
-
></Cascader>
|
|
112
|
+
<!-- 输入框方式 -->
|
|
113
|
+
<template v-else>
|
|
114
|
+
<Cascader
|
|
115
|
+
class="DshCascader-single"
|
|
116
|
+
:value="curValList"
|
|
117
|
+
:data="renderCascaderData"
|
|
118
|
+
:placeholder="selfPropsObj._placeholder"
|
|
119
|
+
:disabled="!finalCanEdit"
|
|
120
|
+
:change-on-select="selfPropsObj._changeOnSelect"
|
|
121
|
+
:clearable="selfPropsObj._clearable"
|
|
122
|
+
:size="selfPropsObj._size"
|
|
123
|
+
:filterable="selfPropsObj._filterable"
|
|
124
|
+
:transfer="selfPropsObj._transfer"
|
|
125
|
+
:transfer-class-name="selfPropsObj._transferClassName"
|
|
126
|
+
:load-data="loadData"
|
|
127
|
+
@on-visible-change="visibleChange"
|
|
128
|
+
@on-change="changeVal"
|
|
129
|
+
@click.stop="clickCascader"
|
|
130
|
+
></Cascader>
|
|
131
|
+
</template>
|
|
103
132
|
</template>
|
|
104
133
|
</template>
|
|
105
134
|
|
|
106
|
-
<!--
|
|
107
|
-
<
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
135
|
+
<!-- 查看 -->
|
|
136
|
+
<template v-else>
|
|
137
|
+
<div :class="{
|
|
138
|
+
...commonClass,
|
|
139
|
+
'DshCascader-show': true,
|
|
140
|
+
'DshCascader-multiplerow': isSelfRow,
|
|
141
|
+
}">
|
|
142
|
+
<!-- 有值 -->
|
|
143
|
+
<div
|
|
144
|
+
v-if="!$isEmptyData(curVal)"
|
|
145
|
+
class="hasdata"
|
|
146
|
+
>
|
|
147
|
+
<!-- 多选 -->
|
|
148
|
+
<dsh-tags
|
|
149
|
+
v-if="useMultiple"
|
|
150
|
+
class="hasdata-multiple"
|
|
151
|
+
:list="curValNameList"
|
|
152
|
+
:propsObj="{
|
|
153
|
+
size: isSelfRow ? 'medium' : 'default'
|
|
154
|
+
}"
|
|
155
|
+
></dsh-tags>
|
|
156
|
+
|
|
157
|
+
<!-- 单选 -->
|
|
158
|
+
<Ctooltip
|
|
159
|
+
v-else
|
|
160
|
+
:content="curValNameStr"
|
|
161
|
+
placement="top"
|
|
162
|
+
maxWidth="200"
|
|
163
|
+
:transfer="true"
|
|
164
|
+
>
|
|
165
|
+
<div class="hasdata-single">
|
|
166
|
+
{{ curValNameStr }}
|
|
167
|
+
</div>
|
|
168
|
+
</Ctooltip>
|
|
169
|
+
</div>
|
|
170
|
+
|
|
171
|
+
<!-- 无值 -->
|
|
172
|
+
<span
|
|
173
|
+
v-else
|
|
174
|
+
class="nodata"
|
|
175
|
+
>
|
|
176
|
+
{{ emptyShowVal }}
|
|
177
|
+
</span>
|
|
178
|
+
</div>
|
|
179
|
+
</template>
|
|
117
180
|
</div>
|
|
118
181
|
</template>
|
|
119
182
|
|
|
@@ -161,33 +224,32 @@
|
|
|
161
224
|
renderDataFlag: true,
|
|
162
225
|
clickInputFlag: true,
|
|
163
226
|
isVisible: false,
|
|
164
|
-
multipleSelectVal: [],
|
|
227
|
+
multipleSelectVal: [], // 必须要，每次选完之后再选，需清空上次选的
|
|
165
228
|
selectVal: [],
|
|
166
229
|
|
|
230
|
+
isHover: false,
|
|
167
231
|
showModal: false,
|
|
168
|
-
|
|
169
|
-
operationMap: {
|
|
170
|
-
cancel: {
|
|
171
|
-
name: "取消",
|
|
172
|
-
type: "clickCancel",
|
|
173
|
-
event: "clickCancel",
|
|
174
|
-
class: "z-default"
|
|
175
|
-
},
|
|
176
|
-
confirm: {
|
|
177
|
-
name: "确定",
|
|
178
|
-
btnType: "primary",
|
|
179
|
-
type: "clickConfirm",
|
|
180
|
-
event: "clickConfirm",
|
|
181
|
-
class: "z-primary"
|
|
182
|
-
}
|
|
183
|
-
}
|
|
232
|
+
modalVallist: []
|
|
184
233
|
};
|
|
185
234
|
},
|
|
186
235
|
computed: {
|
|
236
|
+
// 是否多选模式
|
|
237
|
+
useMultiple () {
|
|
238
|
+
return ["regions", "cascaders"].includes(this.propsObj._type);
|
|
239
|
+
},
|
|
240
|
+
selfPropsObj () {
|
|
241
|
+
return {
|
|
242
|
+
_filterable: true,
|
|
243
|
+
_showMode: false,
|
|
244
|
+
_transfer: true,
|
|
245
|
+
...this.propsObj,
|
|
246
|
+
...this.commonDealPropsObj
|
|
247
|
+
};
|
|
248
|
+
},
|
|
187
249
|
cascaderData: {
|
|
188
250
|
get () {
|
|
189
251
|
return loop(
|
|
190
|
-
["region", "regions"].includes(this.
|
|
252
|
+
["region", "regions"].includes(this.propsObj._type) ? regionData : this.selfPropsObj._data,
|
|
191
253
|
this.selfPropsObj._cascaderLevel,
|
|
192
254
|
undefined,
|
|
193
255
|
this.selfPropsObj._cascaderFilterVals
|
|
@@ -206,45 +268,26 @@
|
|
|
206
268
|
: this.cascaderData;
|
|
207
269
|
},
|
|
208
270
|
|
|
209
|
-
|
|
210
|
-
return
|
|
211
|
-
_filterable: true,
|
|
212
|
-
_showMode: false,
|
|
213
|
-
_transfer: true,
|
|
214
|
-
...this.propsObj,
|
|
215
|
-
...this.commonDealPropsObj
|
|
216
|
-
};
|
|
271
|
+
showMode () {
|
|
272
|
+
return this.selfPropsObj._showMode;
|
|
217
273
|
},
|
|
218
|
-
|
|
219
|
-
return
|
|
274
|
+
isSelfRow () {
|
|
275
|
+
return this.selfPropsObj._span === 24 || !this.selfPropsObj._span;
|
|
220
276
|
},
|
|
221
|
-
valTags () {
|
|
222
|
-
return this.value[this.controlKey]
|
|
223
|
-
? this.value[this.controlKey].map(item => this.$getTreeLinealDatas(item, this.cascaderData, "name").join("/"))
|
|
224
|
-
: [];
|
|
225
|
-
}
|
|
226
277
|
|
|
227
|
-
//
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
//
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
// }
|
|
238
|
-
},
|
|
239
|
-
created () {
|
|
240
|
-
this.init();
|
|
278
|
+
// 单选用的展示文字
|
|
279
|
+
curValNameStr () {
|
|
280
|
+
return this.$getTreeLinealDatas(this.curValList, this.cascaderData, "name").join("/");
|
|
281
|
+
},
|
|
282
|
+
// 多选用的展示文字
|
|
283
|
+
curValNameList () {
|
|
284
|
+
return this.curValList.map(item =>
|
|
285
|
+
this.$getTreeLinealDatas(item, this.cascaderData, "name").join("/")
|
|
286
|
+
);
|
|
287
|
+
}
|
|
241
288
|
},
|
|
289
|
+
created () {},
|
|
242
290
|
methods: {
|
|
243
|
-
init () {
|
|
244
|
-
if (!this.value[this.controlKey]) {
|
|
245
|
-
this.$set(this.value, this.controlKey, []);
|
|
246
|
-
}
|
|
247
|
-
},
|
|
248
291
|
// 动态加载数据
|
|
249
292
|
loadData (treeItem, cb) {
|
|
250
293
|
let list = this.$getTreeLinealDatas(treeItem.codeArr, this.cascaderData);
|
|
@@ -253,21 +296,25 @@
|
|
|
253
296
|
cb();
|
|
254
297
|
},
|
|
255
298
|
|
|
256
|
-
/* 多选使用 */
|
|
299
|
+
/* --------- 多选使用 -------- */
|
|
300
|
+
clickInput (e) {
|
|
301
|
+
if (!this.finalCanEdit) {
|
|
302
|
+
e.stopPropagation();
|
|
303
|
+
}
|
|
304
|
+
},
|
|
257
305
|
// 展开和关闭弹窗时触发
|
|
258
306
|
multipleVisibleChange (bool) {
|
|
259
307
|
this.isVisible = bool;
|
|
260
308
|
|
|
261
309
|
if (bool === false) {
|
|
262
310
|
if (this.selectVal.length) {
|
|
263
|
-
if (this.
|
|
311
|
+
if (this.curValList.some(item => JSON.stringify(item) == JSON.stringify(this.selectVal))) {
|
|
264
312
|
this.$Message.error({
|
|
265
313
|
content: `"${this.$getTreeLinealDatas(this.selectVal, this.cascaderData, "name").join("/")}"已选择，请勿重复选择！`,
|
|
266
314
|
duration: 5
|
|
267
315
|
});
|
|
268
316
|
} else {
|
|
269
|
-
this.
|
|
270
|
-
this.change();
|
|
317
|
+
this.curValList = [...this.curValList, this.selectVal];
|
|
271
318
|
}
|
|
272
319
|
}
|
|
273
320
|
|
|
@@ -283,12 +330,29 @@
|
|
|
283
330
|
},
|
|
284
331
|
// 删除
|
|
285
332
|
deleteItem (item, index) {
|
|
286
|
-
this.
|
|
287
|
-
this.
|
|
333
|
+
this.curValList.splice(index, 1);
|
|
334
|
+
this.curValList = [...this.curValList];
|
|
288
335
|
},
|
|
289
336
|
|
|
290
|
-
/*
|
|
291
|
-
|
|
337
|
+
/* -------- 单选使用 ------- */
|
|
338
|
+
// 弹窗方式的 -打开模态框
|
|
339
|
+
openModal () {
|
|
340
|
+
if (this.finalCanEdit) {
|
|
341
|
+
this.modalVallist = this.curValList;
|
|
342
|
+
this.showModal = true;
|
|
343
|
+
}
|
|
344
|
+
},
|
|
345
|
+
// 弹窗方式的 -关闭模态框
|
|
346
|
+
changeShowModal (bool) {
|
|
347
|
+
this.showModal = bool;
|
|
348
|
+
},
|
|
349
|
+
// 弹窗方式的 -点击清除
|
|
350
|
+
clickClear () {
|
|
351
|
+
this.curValList = [];
|
|
352
|
+
},
|
|
353
|
+
|
|
354
|
+
// 默认方式的
|
|
355
|
+
clickCascader () {
|
|
292
356
|
if (this.finalCanEdit) {
|
|
293
357
|
if (
|
|
294
358
|
["cascader"].includes(this.selfPropsObj._type) &&
|
|
@@ -303,7 +367,7 @@
|
|
|
303
367
|
}
|
|
304
368
|
}
|
|
305
369
|
},
|
|
306
|
-
//
|
|
370
|
+
// 默认方式的 -展开和关闭弹窗时触发
|
|
307
371
|
visibleChange (bool) {
|
|
308
372
|
if (bool) {
|
|
309
373
|
this.isVisible = bool;
|
|
@@ -313,41 +377,16 @@
|
|
|
313
377
|
}, 0);
|
|
314
378
|
}
|
|
315
379
|
},
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
this
|
|
320
|
-
}
|
|
321
|
-
},
|
|
322
|
-
|
|
323
|
-
// 点击清除
|
|
324
|
-
clickClear () {
|
|
325
|
-
this.value[this.controlKey] = [];
|
|
326
|
-
this.change();
|
|
327
|
-
},
|
|
328
|
-
openModal () {
|
|
329
|
-
if (this.finalCanEdit) {
|
|
330
|
-
this.modalVal = this.value[this.controlKey];
|
|
331
|
-
this.showModal = true;
|
|
380
|
+
// 默认方式的 -值改变
|
|
381
|
+
changeVal (val, ...params) {
|
|
382
|
+
if (this.isVisible || !val.length) {
|
|
383
|
+
this.curValList = val;
|
|
332
384
|
}
|
|
333
|
-
},
|
|
334
|
-
changeShowModal (val) {
|
|
335
|
-
this.showModal = val;
|
|
336
|
-
},
|
|
337
|
-
clickConfirm () {
|
|
338
|
-
this.value[this.controlKey] = this.modalVal;
|
|
339
|
-
this.showModal = false;
|
|
340
|
-
|
|
341
|
-
this.change();
|
|
342
|
-
},
|
|
343
|
-
clickCancel () {
|
|
344
|
-
this.showModal = false;
|
|
345
385
|
}
|
|
346
386
|
},
|
|
347
387
|
watch: {
|
|
348
388
|
"propsObj._cascaderLevel" () {
|
|
349
389
|
this.value[this.controlKey] = [];
|
|
350
|
-
this.init();
|
|
351
390
|
}
|
|
352
391
|
}
|
|
353
392
|
};
|
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
class="InfoCascader-search"
|
|
10
10
|
:value="searchData"
|
|
11
11
|
:propsObj="inputPropsObj"
|
|
12
|
-
>
|
|
13
|
-
|
|
12
|
+
></dsh-input>
|
|
13
|
+
|
|
14
14
|
<div class="InfoCascader-content">
|
|
15
15
|
<div class="InfoCascader-content-left">
|
|
16
16
|
<Tree
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
</p>
|
|
31
31
|
</div>
|
|
32
32
|
</div>
|
|
33
|
+
|
|
33
34
|
<div class="InfoCascader-footer">
|
|
34
35
|
<dsh-buttons
|
|
35
36
|
class="InfoCascader-footer-btns"
|
|
@@ -45,25 +46,26 @@
|
|
|
45
46
|
export default {
|
|
46
47
|
name: "InfoCascader",
|
|
47
48
|
props: {
|
|
49
|
+
showModal: Boolean,
|
|
50
|
+
|
|
48
51
|
value: {
|
|
49
52
|
type: Array,
|
|
50
53
|
default () {
|
|
51
54
|
return [];
|
|
52
55
|
}
|
|
53
56
|
},
|
|
54
|
-
propsObj: {
|
|
55
|
-
type: Object,
|
|
56
|
-
default () {
|
|
57
|
-
return {};
|
|
58
|
-
}
|
|
59
|
-
},
|
|
60
57
|
data: {
|
|
61
58
|
type: Array,
|
|
62
59
|
default () {
|
|
63
60
|
return [];
|
|
64
61
|
}
|
|
65
62
|
},
|
|
66
|
-
|
|
63
|
+
propsObj: {
|
|
64
|
+
type: Object,
|
|
65
|
+
default () {
|
|
66
|
+
return {};
|
|
67
|
+
}
|
|
68
|
+
}
|
|
67
69
|
},
|
|
68
70
|
data () {
|
|
69
71
|
return {
|