bri-components 1.2.4 → 1.2.6
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/2.bri-components.min.js +1 -1
- package/lib/3.bri-components.min.js +1 -1
- package/lib/4.bri-components.min.js +1 -1
- package/lib/5.bri-components.min.js +1 -1
- package/lib/6.bri-components.min.js +1 -1
- package/lib/bri-components.min.js +68 -6
- package/package.json +2 -1
- package/src/components/controls/base/BriUpload/uploadMixin.js +4 -3
- package/src/components/controls/base/DshCheckbox.vue +44 -39
- package/src/components/controls/base/DshCoordinates.vue +35 -22
- package/src/components/controls/base/DshDate.vue +2 -2
- package/src/components/controls/base/DshDaterange.vue +6 -0
- package/src/components/controls/base/DshEditor.vue +4 -4
- package/src/components/controls/base/DshInput.vue +26 -4
- package/src/components/controls/base/DshNumber/BriInputNumber/BriInputNumber.vue +27 -29
- package/src/components/controls/base/DshNumber/DshNumber.vue +15 -19
- package/src/components/controls/base/DshSelect.vue +146 -149
- package/src/components/controls/base/DshSwitch.vue +6 -5
- package/src/components/controls/controlMixin.js +4 -1
- package/src/components/controls/senior/selectDepartments.vue +60 -57
- package/src/components/controls/senior/selectUsers/selectUsers.vue +62 -66
- package/src/components/small/BriDrawer.vue +1 -1
- package/src/components/small/DshModal.vue +1 -1
- package/src/index.js +6 -0
- package/src/styles/components/controls/base/DshNumber.less +0 -8
- package/src/styles/components/controls/base/DshSelect.less +0 -19
- package/src/styles/components/small/DshDropdown.less +1 -1
|
@@ -1,118 +1,103 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="DshSelect">
|
|
3
|
-
<!-- optionKind值 'flat'、'dropdown' -->
|
|
4
3
|
<template v-if="canEdit">
|
|
5
4
|
<!-- 平铺 -->
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
</span>
|
|
34
|
-
</Radio>
|
|
5
|
+
<template v-if="['flat', 'button'].includes(showType)">
|
|
6
|
+
<RadioGroup
|
|
7
|
+
:class="{
|
|
8
|
+
'DshSelect-radioGroup': true,
|
|
9
|
+
'DshSelect-radioGroup-useColor': selfPropsObj._useColor,
|
|
10
|
+
'DshSelect-radioGroup-scroll': selfPropsObj._span < 24 && !selfPropsObj._br
|
|
11
|
+
}"
|
|
12
|
+
v-model="value[controlKey]"
|
|
13
|
+
:type="radioGroupType"
|
|
14
|
+
@on-change="change"
|
|
15
|
+
>
|
|
16
|
+
<template v-if="listData.length">
|
|
17
|
+
<Radio
|
|
18
|
+
v-for="(item, index) in listData"
|
|
19
|
+
:key="index"
|
|
20
|
+
:class="getItemColorClass(item)"
|
|
21
|
+
:style="getItemStyle(item)"
|
|
22
|
+
:label="item._key"
|
|
23
|
+
:disabled="getItemDisabled(item)"
|
|
24
|
+
:border="useColor"
|
|
25
|
+
@click.native="cancelSelect(item)"
|
|
26
|
+
>
|
|
27
|
+
<span @click.stop="clickOpenTip(item)">
|
|
28
|
+
{{ item.name || item._name }}
|
|
29
|
+
</span>
|
|
30
|
+
</Radio>
|
|
31
|
+
</template>
|
|
35
32
|
|
|
36
|
-
|
|
33
|
+
<div
|
|
34
|
+
v-else
|
|
35
|
+
class="dsh-subtip"
|
|
36
|
+
style="backgroundColor: #f3f3f3;"
|
|
37
|
+
>-- 无选择项 --</div>
|
|
38
|
+
</RadioGroup>
|
|
37
39
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
style="backgroundColor: #f3f3f3;"
|
|
42
|
-
>-- 无选择项 --</div>
|
|
43
|
-
</RadioGroup>
|
|
40
|
+
<!-- tip项弹框提示 -->
|
|
41
|
+
<dsh-render :render="tipModalRender"></dsh-render>
|
|
42
|
+
</template>
|
|
44
43
|
|
|
45
44
|
<!-- 下拉 -->
|
|
46
|
-
<
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
>
|
|
59
|
-
<!-- </Option>必须和输出内容在一行，否则出现空格导致_filterable出bug -->
|
|
60
|
-
<Option
|
|
61
|
-
v-for="(item, index) in listData"
|
|
62
|
-
:key="index"
|
|
63
|
-
:value="item._key"
|
|
64
|
-
:disabled="item._disabled || !finalCanEdit"
|
|
45
|
+
<template v-else>
|
|
46
|
+
<Select
|
|
47
|
+
v-model="curVal"
|
|
48
|
+
:placeholder="selfPropsObj._placeholder"
|
|
49
|
+
:multiple="selfPropsObj._multiple"
|
|
50
|
+
:disabled="!finalCanEdit"
|
|
51
|
+
:clearable="selfPropsObj._clearable"
|
|
52
|
+
:filterable="selfPropsObj._filterable"
|
|
53
|
+
:size="selfPropsObj._size"
|
|
54
|
+
:transfer="selfPropsObj._transfer"
|
|
55
|
+
:transfer-class-name="selfPropsObj._transferClassName"
|
|
56
|
+
@on-change="change"
|
|
65
57
|
>
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
:
|
|
70
|
-
:
|
|
71
|
-
:
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
58
|
+
<!-- </Option>必须和输出内容在一行，否则出现空格导致_filterable出bug -->
|
|
59
|
+
<Option
|
|
60
|
+
v-for="(item, index) in listData"
|
|
61
|
+
:key="index"
|
|
62
|
+
:value="item._key"
|
|
63
|
+
:label="item.name || item._name"
|
|
64
|
+
:disabled="getItemDisabled(item)"
|
|
65
|
+
>
|
|
66
|
+
<Icon
|
|
67
|
+
v-if="item.icon || item.customIcon"
|
|
68
|
+
:type="item.icon"
|
|
69
|
+
:custom="item.customIcon ? `bico-font ${item.customIcon}` : undefined"
|
|
70
|
+
:color="item.color"
|
|
71
|
+
:size="item.size || 20"
|
|
72
|
+
/>{{ item.name || item._name }}
|
|
73
|
+
</Option>
|
|
74
|
+
</Select>
|
|
75
|
+
</template>
|
|
75
76
|
</template>
|
|
76
77
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
<div
|
|
85
|
-
v-if="curSelectItem"
|
|
86
|
-
class="DshSelect-value-wrapper"
|
|
87
|
-
:style="{
|
|
88
|
-
justifyContent: showAlign
|
|
89
|
-
}"
|
|
78
|
+
<!-- 查看 -->
|
|
79
|
+
<template v-else>
|
|
80
|
+
<bri-tooltip
|
|
81
|
+
:content="showVal"
|
|
82
|
+
maxWidth="200"
|
|
83
|
+
placement="top"
|
|
84
|
+
:transfer="true"
|
|
90
85
|
>
|
|
91
|
-
<
|
|
92
|
-
|
|
93
|
-
:
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
<div
|
|
100
|
-
v-else
|
|
101
|
-
class="bri-control-nodata dsh-ellipsis"
|
|
102
|
-
>
|
|
103
|
-
{{ emptyShowVal }}
|
|
104
|
-
</div>
|
|
105
|
-
</bri-tooltip>
|
|
106
|
-
|
|
107
|
-
<!-- tip项弹框提示 -->
|
|
108
|
-
<dsh-render :render="tipModalRender"></dsh-render>
|
|
86
|
+
<div :class="{
|
|
87
|
+
...commonClass,
|
|
88
|
+
'DshSelect-show': true
|
|
89
|
+
}">
|
|
90
|
+
{{ showVal }}
|
|
91
|
+
</div>
|
|
92
|
+
</bri-tooltip>
|
|
93
|
+
</template>
|
|
109
94
|
</div>
|
|
110
95
|
</template>
|
|
111
96
|
|
|
112
97
|
<script>
|
|
113
|
-
import { resourceData } from "bri-datas";
|
|
114
98
|
import controlMixin from "../controlMixin.js";
|
|
115
99
|
import selectMixin from "./selectMixin.js";
|
|
100
|
+
import { resourceData } from "bri-datas";
|
|
116
101
|
|
|
117
102
|
export default {
|
|
118
103
|
name: "DshSelect",
|
|
@@ -123,26 +108,19 @@
|
|
|
123
108
|
props: {},
|
|
124
109
|
data () {
|
|
125
110
|
return {
|
|
126
|
-
flag: false
|
|
127
|
-
initListData: [],
|
|
128
|
-
getBgColor: color => {
|
|
129
|
-
let curColor = this.colorMap[color] || this.colorMap["color-1"];
|
|
130
|
-
return this.$getColor(curColor, 0.1);
|
|
131
|
-
},
|
|
132
|
-
getColor: color => {
|
|
133
|
-
return this.colorMap[color] || this.colorMap["color-1"];
|
|
134
|
-
},
|
|
135
|
-
getColorClass: color => {
|
|
136
|
-
return this.colorMap[color] ? color : "color-1";
|
|
137
|
-
}
|
|
111
|
+
flag: false
|
|
138
112
|
};
|
|
139
113
|
},
|
|
140
114
|
computed: {
|
|
141
115
|
selfPropsObj () {
|
|
142
116
|
return {
|
|
117
|
+
_optionKind: "dropdown", // 'flat'、'dropdown'
|
|
118
|
+
_useColor: false,
|
|
119
|
+
colorMap: resourceData.colorMap,
|
|
143
120
|
_filterable: true,
|
|
144
121
|
_transfer: true,
|
|
145
122
|
_data: [],
|
|
123
|
+
_customData: [],
|
|
146
124
|
|
|
147
125
|
...this.propsObj,
|
|
148
126
|
...this.commonDealPropsObj
|
|
@@ -154,62 +132,45 @@
|
|
|
154
132
|
radioGroupType () {
|
|
155
133
|
return this.showType === "button" ? "button" : undefined;
|
|
156
134
|
},
|
|
135
|
+
useColor () {
|
|
136
|
+
return this.selfPropsObj._useColor;
|
|
137
|
+
},
|
|
157
138
|
colorMap () {
|
|
158
|
-
return this.selfPropsObj.colorMap
|
|
139
|
+
return this.selfPropsObj.colorMap;
|
|
159
140
|
},
|
|
160
141
|
|
|
161
142
|
listData () {
|
|
162
|
-
const listData =
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
}
|
|
143
|
+
const listData = this.selfPropsObj._data.concat(this.initListData);
|
|
144
|
+
|
|
145
|
+
return this.$dataType(this.selfPropsObj._filterFunc, "function")
|
|
146
|
+
? this.selfPropsObj._filterFunc(listData, this.selfPropsObj, this.value)
|
|
147
|
+
: listData;
|
|
168
148
|
},
|
|
169
|
-
|
|
170
|
-
return this.listData.find(item => item._key === this.
|
|
149
|
+
curValObj () {
|
|
150
|
+
return this.listData.find(item => item._key === this.curVal) || {
|
|
151
|
+
_key: this.curVal,
|
|
152
|
+
name: `温馨提示：选项${this.curVal}已找不到`
|
|
153
|
+
};
|
|
171
154
|
},
|
|
172
155
|
showVal () {
|
|
173
|
-
return this.
|
|
174
|
-
? this.
|
|
175
|
-
:
|
|
156
|
+
return this.$isEmptyData(this.curVal)
|
|
157
|
+
? this.emptyShowVal
|
|
158
|
+
: this.curValObj.name || this.curValObj._name;
|
|
176
159
|
}
|
|
177
160
|
},
|
|
178
161
|
created () {
|
|
179
|
-
this.
|
|
162
|
+
this.init();
|
|
180
163
|
},
|
|
181
164
|
methods: {
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
this.selfPropsObj._customData.forEach(item => {
|
|
185
|
-
this.getListData(item);
|
|
186
|
-
});
|
|
187
|
-
}
|
|
188
|
-
},
|
|
189
|
-
getListData (_customData) {
|
|
190
|
-
this.$https({
|
|
191
|
-
url: _customData.url,
|
|
192
|
-
params: {
|
|
193
|
-
..._customData.params
|
|
194
|
-
},
|
|
195
|
-
callback: data => {
|
|
196
|
-
this.initListData.push(
|
|
197
|
-
...data.list.map(item => (
|
|
198
|
-
{
|
|
199
|
-
_key: item[_customData._key || "_key"],
|
|
200
|
-
name: item[_customData._name || "name"]
|
|
201
|
-
}
|
|
202
|
-
))
|
|
203
|
-
);
|
|
204
|
-
}
|
|
205
|
-
});
|
|
165
|
+
init () {
|
|
166
|
+
|
|
206
167
|
},
|
|
168
|
+
|
|
207
169
|
// 取消flat模式的选择项
|
|
208
170
|
cancelSelect (item) {
|
|
209
171
|
if (item._disabled !== true && this.selfPropsObj._clearable !== false) {
|
|
210
|
-
if (item._key === this.
|
|
172
|
+
if (item._key === this.curVal) {
|
|
211
173
|
this.value[this.controlKey] = "";
|
|
212
|
-
|
|
213
174
|
this.change();
|
|
214
175
|
}
|
|
215
176
|
}
|
|
@@ -222,7 +183,43 @@
|
|
|
222
183
|
this.value[this.controlKey] = "";
|
|
223
184
|
}
|
|
224
185
|
|
|
225
|
-
this.$emit("change", this.
|
|
186
|
+
this.$emit("change", this.curVal);
|
|
187
|
+
},
|
|
188
|
+
|
|
189
|
+
getItemColorClass (item) {
|
|
190
|
+
return this.colorMap[item.color] ? item.color : "color-1";
|
|
191
|
+
},
|
|
192
|
+
getItemStyle (item) {
|
|
193
|
+
const color = this.colorMap[item.color] || this.colorMap["color-1"];
|
|
194
|
+
return {
|
|
195
|
+
background: this.useColor ? this.$getColor(color, 0.1) : undefined,
|
|
196
|
+
color: this.useColor ? color : undefined
|
|
197
|
+
};
|
|
198
|
+
},
|
|
199
|
+
// 获取某项的置灰状态
|
|
200
|
+
getItemDisabled (item) {
|
|
201
|
+
return !!(!this.finalCanEdit || item._disabled);
|
|
202
|
+
},
|
|
203
|
+
|
|
204
|
+
// 接口 -获取自定义的接口数据
|
|
205
|
+
getListData () {
|
|
206
|
+
this.selfPropsObj._customData.forEach(item => {
|
|
207
|
+
this.$https({
|
|
208
|
+
url: item.url,
|
|
209
|
+
params: item.params,
|
|
210
|
+
callback: data => {
|
|
211
|
+
this.initListData = [
|
|
212
|
+
...this.initListData,
|
|
213
|
+
...data.list.map(item =>
|
|
214
|
+
({
|
|
215
|
+
_key: item[item._key || "_key"],
|
|
216
|
+
name: item[item._name || "name"]
|
|
217
|
+
})
|
|
218
|
+
)
|
|
219
|
+
];
|
|
220
|
+
}
|
|
221
|
+
});
|
|
222
|
+
});
|
|
226
223
|
}
|
|
227
224
|
}
|
|
228
225
|
};
|
|
@@ -20,17 +20,18 @@
|
|
|
20
20
|
</template>
|
|
21
21
|
|
|
22
22
|
<!-- 查看 -->
|
|
23
|
-
<span
|
|
23
|
+
<span
|
|
24
|
+
v-else
|
|
24
25
|
:class="{
|
|
25
|
-
|
|
26
|
-
|
|
26
|
+
...commonClass,
|
|
27
|
+
'DshSwitch-show': true
|
|
27
28
|
}"
|
|
28
29
|
:style="{
|
|
29
30
|
background: curVal ? '#d3f3dcff' : '#FDEDED',
|
|
30
31
|
color: curVal ? '#37C45E' : '#E83636'
|
|
31
32
|
}"
|
|
32
33
|
>
|
|
33
|
-
{{
|
|
34
|
+
{{ showVal }}
|
|
34
35
|
</span>
|
|
35
36
|
</div>
|
|
36
37
|
</template>
|
|
@@ -47,7 +48,7 @@
|
|
|
47
48
|
return {};
|
|
48
49
|
},
|
|
49
50
|
computed: {
|
|
50
|
-
|
|
51
|
+
showVal () {
|
|
51
52
|
return this.value[this.controlKey]
|
|
52
53
|
? this.propsObj._openText
|
|
53
54
|
: this.propsObj._closeText;
|
|
@@ -63,7 +63,7 @@ export default {
|
|
|
63
63
|
? "--"
|
|
64
64
|
: "暂无内容";
|
|
65
65
|
},
|
|
66
|
-
|
|
66
|
+
showVal () {
|
|
67
67
|
return this.$isEmptyData(this.curVal) ? this.emptyShowVal : this.curVal;
|
|
68
68
|
},
|
|
69
69
|
|
|
@@ -85,6 +85,9 @@ export default {
|
|
|
85
85
|
isUnitShow () {
|
|
86
86
|
return !this.canEdit && this.inTable;
|
|
87
87
|
},
|
|
88
|
+
multipleMode () {
|
|
89
|
+
return !!this.propsObj._multiple;
|
|
90
|
+
},
|
|
88
91
|
commonDealPropsObj () {
|
|
89
92
|
const selectControlTypes = ["date", "switch", "select", "checkbox", "file", "region", "regions", "cascader", "cascaders", "coordinates", "users", "departments"];
|
|
90
93
|
return {
|
|
@@ -6,67 +6,70 @@
|
|
|
6
6
|
maxWidth="200"
|
|
7
7
|
:transfer="true"
|
|
8
8
|
>
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
@mouseleave="isHover = false"
|
|
18
|
-
@click="clickInput"
|
|
19
|
-
>
|
|
20
|
-
<!-- 有值 -->
|
|
21
|
-
<template v-if="!$isEmptyData(curValList)">
|
|
22
|
-
<dsh-tags
|
|
23
|
-
class="text"
|
|
24
|
-
:list="curValList"
|
|
25
|
-
:propsObj="{
|
|
26
|
-
disabled: !finalCanEdit,
|
|
27
|
-
closable: true
|
|
9
|
+
<div @click.stop="clickInput">
|
|
10
|
+
<slot>
|
|
11
|
+
<!-- 编辑模式 -->
|
|
12
|
+
<div
|
|
13
|
+
v-if="canEdit"
|
|
14
|
+
:class="{
|
|
15
|
+
...commonClass,
|
|
16
|
+
'selectDepartments-edit': true
|
|
28
17
|
}"
|
|
29
|
-
@
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
18
|
+
@mouseenter="isHover = true"
|
|
19
|
+
@mouseleave="isHover = false"
|
|
20
|
+
>
|
|
21
|
+
<!-- 有值 -->
|
|
22
|
+
<template v-if="!$isEmptyData(curValList)">
|
|
23
|
+
<dsh-tags
|
|
24
|
+
class="text"
|
|
25
|
+
:list="curValList"
|
|
26
|
+
:propsObj="{
|
|
27
|
+
disabled: !finalCanEdit,
|
|
28
|
+
closable: true
|
|
29
|
+
}"
|
|
30
|
+
@delete="clickDeleteItem"
|
|
31
|
+
></dsh-tags>
|
|
32
|
+
</template>
|
|
33
|
+
<!-- 无值 -->
|
|
34
|
+
<template v-else>
|
|
35
|
+
{{ emptyShowVal }}
|
|
36
|
+
</template>
|
|
36
37
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
38
|
+
<!-- 图标 -->
|
|
39
|
+
<template>
|
|
40
|
+
<Icon
|
|
41
|
+
v-if="!$isEmptyData(curValList) && selfPropsObj._clearable && isHover"
|
|
42
|
+
class="icon-close"
|
|
43
|
+
type="ios-close-circle"
|
|
44
|
+
@click.stop="clickClear"
|
|
45
|
+
/>
|
|
46
|
+
<Icon
|
|
47
|
+
v-else
|
|
48
|
+
class="icon-default"
|
|
49
|
+
:type="inputIcon"
|
|
50
|
+
/>
|
|
51
|
+
</template>
|
|
52
|
+
</div>
|
|
52
53
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
54
|
+
<!-- 查看模式 -->
|
|
55
|
+
<div
|
|
56
|
+
v-else
|
|
57
|
+
:class="{
|
|
58
|
+
...commonClass,
|
|
59
|
+
'selectDepartments-show': true
|
|
60
|
+
}"
|
|
61
|
+
>
|
|
62
|
+
<dsh-tags
|
|
63
|
+
v-if="!$isEmptyData(curValList)"
|
|
64
|
+
class="text"
|
|
65
|
+
:list="curValList"
|
|
66
|
+
></dsh-tags>
|
|
66
67
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
68
|
+
<template v-else>
|
|
69
|
+
{{ emptyShowVal }}
|
|
70
|
+
</template>
|
|
71
|
+
</div>
|
|
72
|
+
</slot>
|
|
70
73
|
</div>
|
|
71
74
|
</bri-tooltip>
|
|
72
75
|
|