Skip to content

Commit 05746dd

Browse files
ChanMenglinChanMenglin
committed
edit mixinx - select-select
1 parent 7c41802 commit 05746dd

14 files changed

+121
-100
lines changed

‎.vscode/launch.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@
1212
// your web server url
1313
"url": "http://localhost:8080",
1414
// set your webroot directory
15-
"webRoot": "${workspaceRoot}/view/dist"
15+
"webRoot": "${workspaceRoot}/dist"
1616
},
1717
{
1818
"type": "chrome",
1919
"request": "launch",
2020
"name": "vuejs: chrome",
2121
"url": "http://localhost:8080",
22-
"webRoot": "${workspaceFolder}/view/src",
22+
"webRoot": "${workspaceFolder}/src",
2323
"breakOnLoad": true,
2424
"sourceMapPathOverrides": {
2525
"webpack:///./src/*": "${webRoot}/*"

‎src/components/base/Bootstrap/Form/Basic/Select/basic-select-option.vue

+2-7
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
:key="index"
1414
:item="child"
1515
:selected="selected"
16-
:isMultiple="isMultiple"
16+
:primary-key="primaryKey"
17+
:is-multiple="isMultiple"
1718
/>
1819
</optgroup>
1920
</template>
@@ -25,11 +26,5 @@ export default {
2526
name: "basic-select-option",
2627
components: { BasicSelectOption: () => import("./basic-select-option.vue") },
2728
mixins: [util.mixins.select.selectItem],
28-
props: {
29-
primaryKey: {
30-
...util.props.String,
31-
default: "value"
32-
}
33-
}
3429
};
3530
</script>

‎src/components/base/Bootstrap/Form/Basic/Select/basic-select.vue

+10-10
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
v-for="(item, index) in list"
2121
:key="index"
2222
:item="item"
23-
:isMultiple="isMultiple"
23+
:is-multiple="isMultiple"
24+
:primary-key="primaryKey"
2425
:selected="selectedValue"
2526
/>
2627
</slot>
@@ -37,10 +38,6 @@ export default {
3738
components: { BasicSelectOption },
3839
mixins: [util.mixins.form.base, util.mixins.select.select],
3940
props: {
40-
primaryKey: {
41-
...util.props.String,
42-
default: "value"
43-
},
4441
disabled: util.props.Boolean,
4542
hideNull: util.props.Boolean,
4643
row: {
@@ -63,12 +60,15 @@ export default {
6360
let list = this.list
6461
.map(e => (e.children ? [...e.children] : e))
6562
.reduce((acc, val) => acc.concat(val), []);
66-
this.selectedValue = this.isMultiple
67-
? Array.prototype.filter
63+
if (this.isMultiple) {
64+
this.selectedValue = Array.prototype.filter
6865
.call(event.target.options, o => o.selected && o.value)
69-
.map(o => o.value == this.nullValue ? null : list.find(e => (e.value || e) == o.value)
70-
).filter(e => e)
71-
: list.find(e => (e.value || e) == event.target.value);
66+
.map(o => o.value === this.nullValue ? null : list.find(e => (e.value || e) === o.value)
67+
).map(e => this.primaryKey ? e : e && e.value || e)
68+
} else {
69+
let result = list.find(e => (e.value || e) === event.target.value)
70+
this.selectedValue = this.primaryKey ? result : result && result.value || result
71+
}
7272
}
7373
}
7474
};

‎src/components/base/Bootstrap/Form/CheckBox/b-checkbox-group.vue

+1-5
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,6 @@ export default {
3838
mixins: [util.mixins.select.check, util.mixins.form.validator],
3939
inheritAttrs: false,
4040
props: {
41-
primaryKey: {
42-
...util.props.String,
43-
default: "value"
44-
},
4541
info: util.props.String,
4642
disabled: util.props.Boolean
4743
},
@@ -54,7 +50,7 @@ export default {
5450
methods: {
5551
input: function(event, item) {
5652
if (event.target.checked) {
57-
this.checkedValues.push(item);
53+
this.checkedValues.push(this.primaryKey ? item : item && item.value || item);
5854
} else {
5955
let index = this.checkedMap.indexOf(event.target.value);
6056
if (index >= 0) this.checkedValues.splice(index, 1);

‎src/components/base/Bootstrap/Form/CheckBox/b-checkbox.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@
1616
v-on="inputListeners"
1717
>
1818
<label class="custom-control-label" :for="id">
19-
<slot>{{ label || value }}</slot></label>
19+
<slot>{{ label || value }}</slot>
20+
</label>
2021
<b-valid v-if="validInfo || $slots.valid" state="valid">
2122
<slot name="valid">{{ validInfo }}</slot>
2223
</b-valid>

‎src/components/base/Bootstrap/Form/Radio/b-radio-group.vue

+4-6
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,6 @@ export default {
3838
mixins: [util.mixins.select.check, util.mixins.form.validator],
3939
inheritAttrs: false,
4040
props: {
41-
primaryKey: {
42-
...util.props.String,
43-
default: "value"
44-
},
4541
info: util.props.String,
4642
disabled: util.props.Boolean,
4743
name: {
@@ -58,8 +54,10 @@ export default {
5854
methods: {
5955
input: function(event, item) {
6056
if (event.target.checked) {
61-
this.checkedValues = item
62-
this.validator(event, this.checkedValues,
57+
this.checkedValues = this.primaryKey ? item : item && item.value || item
58+
this.validator(
59+
event,
60+
this.checkedValues,
6361
() => { this.validateClass = '' },
6462
() => { this.validateClass = this.validClass },
6563
() => { this.validateClass = this.inValidClass },

‎src/components/base/Bootstrap/Form/Radio/b-radio.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@
1414
v-bind="$attrs"
1515
v-on="inputListeners"
1616
>
17-
<label class="custom-control-label" :for="id"><slot>{{ label || value }}</slot></label>
17+
<label class="custom-control-label" :for="id">
18+
<slot>{{ label || value }}</slot>
19+
</label>
1820
<b-valid v-if="validInfo || $slots.valid" state="valid">
1921
<slot name="valid">{{ validInfo }}</slot>
2022
</b-valid>

‎src/components/base/Bootstrap/Form/b-select.vue

+3-7
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
:row="row"
88
:multiple="multiple"
99
:disabled="disabled"
10+
:primary-key="keyValue"
1011
v-bind="$attrs"
1112
v-on="$listeners"
1213
@change.native="validator($event, selectedValue)"
@@ -36,6 +37,7 @@ export default {
3637
mixins: [util.mixins.form.base, util.mixins.select.select, util.mixins.form.validator],
3738
inheritAttrs: false,
3839
props: {
40+
primaryKey: util.props.Boolean,
3941
disabled: util.props.Boolean,
4042
info: util.props.String,
4143
hideNull: util.props.Boolean,
@@ -48,13 +50,7 @@ export default {
4850
},
4951
data() {
5052
return {
51-
selectedValue: this.selected,
52-
}
53-
},
54-
watch: {
55-
selected: function(value) {
56-
this.selectedValue = value
57-
this.$emit('select:selected', value)
53+
keyValue: this.primaryKey ? 'value' : null
5854
}
5955
},
6056
};

‎src/components/base/Bootstrap/Form/basic/select/basic-select-option.vue

+2-7
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
:key="index"
1414
:item="child"
1515
:selected="selected"
16-
:isMultiple="isMultiple"
16+
:primary-key="primaryKey"
17+
:is-multiple="isMultiple"
1718
/>
1819
</optgroup>
1920
</template>
@@ -25,11 +26,5 @@ export default {
2526
name: "basic-select-option",
2627
components: { BasicSelectOption: () => import("./basic-select-option.vue") },
2728
mixins: [util.mixins.select.selectItem],
28-
props: {
29-
primaryKey: {
30-
...util.props.String,
31-
default: "value"
32-
}
33-
}
3429
};
3530
</script>

‎src/components/base/Bootstrap/Form/basic/select/basic-select.vue

+10-10
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
v-for="(item, index) in list"
2121
:key="index"
2222
:item="item"
23-
:isMultiple="isMultiple"
23+
:is-multiple="isMultiple"
24+
:primary-key="primaryKey"
2425
:selected="selectedValue"
2526
/>
2627
</slot>
@@ -37,10 +38,6 @@ export default {
3738
components: { BasicSelectOption },
3839
mixins: [util.mixins.form.base, util.mixins.select.select],
3940
props: {
40-
primaryKey: {
41-
...util.props.String,
42-
default: "value"
43-
},
4441
disabled: util.props.Boolean,
4542
hideNull: util.props.Boolean,
4643
row: {
@@ -63,12 +60,15 @@ export default {
6360
let list = this.list
6461
.map(e => (e.children ? [...e.children] : e))
6562
.reduce((acc, val) => acc.concat(val), []);
66-
this.selectedValue = this.isMultiple
67-
? Array.prototype.filter
63+
if (this.isMultiple) {
64+
this.selectedValue = Array.prototype.filter
6865
.call(event.target.options, o => o.selected && o.value)
69-
.map(o => o.value == this.nullValue ? null : list.find(e => (e.value || e) == o.value)
70-
).filter(e => e)
71-
: list.find(e => (e.value || e) == event.target.value);
66+
.map(o => o.value === this.nullValue ? null : list.find(e => (e.value || e) === o.value)
67+
).map(e => this.primaryKey ? e : e && e.value || e)
68+
} else {
69+
let result = list.find(e => (e.value || e) === event.target.value)
70+
this.selectedValue = this.primaryKey ? result : result && result.value || result
71+
}
7272
}
7373
}
7474
};

‎src/components/util/mixins.js

+21-32
Original file line numberDiff line numberDiff line change
@@ -259,19 +259,14 @@ export default {
259259
props: {
260260
list: {
261261
...props.Array,
262-
validator: function (value) {
263-
var self = this
264-
return !tools.obj.type.isNull(value) && !tools.obj.type.isUndefined(value) ||
265-
value.every && value.every(e => e[self.primaryKey]) ||
266-
tools.obj.type.isObject(value) && value[self.primaryKey]
267-
},
262+
validator: value => !tools.obj.type.isNull(value) && !tools.obj.type.isUndefined(value),
268263
},
269264
checked: {
270-
type: [Array, Object],
265+
type: [String, Number, Array, Object],
271266
},
272267
primaryKey: {
273268
...props.String,
274-
default: 'id',
269+
default: null,
275270
},
276271
},
277272
data() {
@@ -281,11 +276,9 @@ export default {
281276
}
282277
},
283278
mounted() {
284-
if (this.isMultiple) {
285-
this.checkedValues = this.checked && tools.obj.type.isArray(this.checked) ? this.checked : []
286-
} else {
287-
this.checkedValues = this.checked && tools.obj.type.isObject(this.checked) ? this.checked : {}
288-
}
279+
this.checkedValues = this.isMultiple
280+
? this.checked && tools.obj.type.isArray(this.checked) ? this.checked : []
281+
: this.checked && (tools.obj.type.isObject(this.checked) || tools.obj.type.isString(this.checked)) ? this.checked : null
289282
},
290283
watch: {
291284
checked: function (value) {
@@ -307,8 +300,8 @@ export default {
307300
isChecked: function(item) {
308301
if (!this.checkedMap || this.checkedMap && this.checkedMap.length === 0) return false
309302
return this.isMultiple
310-
? this.checkedMap.includes && this.checkedMap.includes(item[this.primaryKey] || item)
311-
: (item && item[this.primaryKey] || item) === this.checkedMap
303+
? this.checkedMap.includes && this.checkedMap.includes(item[this.primaryKey || 'value'] || item)
304+
: (item && item[this.primaryKey || 'value'] || item) === this.checkedMap
312305
},
313306
},
314307
},
@@ -318,16 +311,16 @@ export default {
318311
event: 'select:selected',
319312
},
320313
props: {
314+
primaryKey: {
315+
...props.String,
316+
default: null,
317+
},
321318
list: props.Array,
322319
selected: {
323320
type: [String, Number, Array, Object],
324321
default: function () {
325322
return this.isMultiple ? [] : "";
326-
}
327-
},
328-
primaryKey: {
329-
...props.String,
330-
default: 'id',
323+
},
331324
},
332325
multiple: props.Boolean,
333326
},
@@ -349,20 +342,15 @@ export default {
349342
},
350343
selectItem: {
351344
props: {
345+
primaryKey: {
346+
...props.String,
347+
default: null,
348+
},
352349
item: {
353350
type: [String, Number, Array, Object],
354-
validator: function (value) {
355-
var self = this
356-
return !tools.obj.type.isNull(value) && !tools.obj.type.isUndefined(value) ||
357-
value.every && value.every(e => e[self.primaryKey]) ||
358-
tools.obj.type.isObject(value) && value[self.primaryKey]
359-
},
351+
validator: value => !tools.obj.type.isNull(value) && !tools.obj.type.isUndefined(value),
360352
},
361353
selected: [String, Number, Array, Object],
362-
primaryKey: {
363-
...props.String,
364-
default: 'id',
365-
},
366354
isMultiple: props.Boolean,
367355
},
368356
computed: {
@@ -375,8 +363,8 @@ export default {
375363
isSelected: function () {
376364
if (!this.selectedMap || this.selectedMap && this.selectedMap.length === 0) return false
377365
return this.isMultiple
378-
? this.selectedMap.includes && this.selectedMap.includes(this.item[this.primaryKey] || this.item)
379-
: (this.item && this.item[this.primaryKey] || this.item) === this.selectedMap
366+
? this.selectedMap.includes && this.selectedMap.includes(this.item[this.primaryKey || 'value'] || this.item)
367+
: (this.item && this.item[this.primaryKey || 'value'] || this.item) === this.selectedMap
380368
},
381369
},
382370
},
@@ -449,5 +437,6 @@ export default {
449437
},
450438
}
451439
}, // thead
440+
452441
}, // grid - grid view & table
453442
}

‎src/pages/Demo/Form/b-checkbox-demo.vue

+16
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,20 @@
127127
<br />
128128
<h4>v-model</h4>
129129
<hr />
130+
<div class="row">
131+
<font class="col-1">
132+
v-model:
133+
<br />
134+
({{values1}})
135+
</font>
136+
<b-checkbox-group
137+
v-model="values1"
138+
class="col-11"
139+
:list="list"
140+
name="checkbox-v-model"
141+
inline
142+
/>
143+
</div>
130144
<div class="row">
131145
<font class="col-1">
132146
v-model:
@@ -138,6 +152,7 @@
138152
class="col-11"
139153
:list="list"
140154
name="checkbox-v-model"
155+
primary-key="value"
141156
inline
142157
/>
143158
</div>
@@ -228,6 +243,7 @@ export default {
228243
{ value: "disabled radio", label: "disabled checkbox", disabled: true }
229244
],
230245
values: [{ value: "value2", label: "value2" }],
246+
values1: ["value2"],
231247
};
232248
}
233249
};

0 commit comments

Comments
 (0)