widget.qw 1.0.35 → 1.0.36
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/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
type="textarea"
|
|
7
7
|
rows="1"
|
|
8
8
|
autosize
|
|
9
|
-
:modelValue="
|
|
9
|
+
:modelValue="selectdItemsLabel"
|
|
10
10
|
readonly
|
|
11
11
|
clearable
|
|
12
12
|
:required="isRequired"
|
|
@@ -29,12 +29,12 @@
|
|
|
29
29
|
<!-- 搜索框 -->
|
|
30
30
|
<van-field left-icon="search" v-model.trim="searchKeyword" clearable placeholder="请输入搜索关键字" />
|
|
31
31
|
<!-- 全选 -->
|
|
32
|
-
<div v-if="
|
|
32
|
+
<div v-if="props.multiple" class="select-all-container">
|
|
33
33
|
<van-checkbox shape="square" v-model="isAllChecked" @click="toggleAllSelect" label-position="left">全选</van-checkbox>
|
|
34
34
|
</div>
|
|
35
35
|
<!-- 数据列表 -->
|
|
36
36
|
<div class="checkbox-style">
|
|
37
|
-
<van-checkbox-group v-model="checkedValue" v-if="
|
|
37
|
+
<van-checkbox-group v-model="checkedValue" v-if="props.multiple">
|
|
38
38
|
<van-cell-group>
|
|
39
39
|
<van-cell v-for="(item, index) in filteredColumns" :key="index" :title="item.text" clickable
|
|
40
40
|
@click="toggle(index)">
|
|
@@ -72,18 +72,16 @@ import { onMounted, ref, onBeforeUpdate, computed, nextTick, watch } from "vue"
|
|
|
72
72
|
import util from '../util'
|
|
73
73
|
|
|
74
74
|
const props = defineProps({
|
|
75
|
-
|
|
76
|
-
type:
|
|
77
|
-
default:
|
|
78
|
-
validator: (v) => ['single', 'multiple'].includes(v)
|
|
75
|
+
multiple:{
|
|
76
|
+
type:Boolean,
|
|
77
|
+
default:false
|
|
79
78
|
},
|
|
80
79
|
options: {
|
|
81
80
|
type: Array,
|
|
82
81
|
required: true,
|
|
83
82
|
},
|
|
84
83
|
modelValue: {
|
|
85
|
-
type: [Array, String, Number]
|
|
86
|
-
default: () => [],
|
|
84
|
+
type: [Array, String, Number]
|
|
87
85
|
},
|
|
88
86
|
rules: {
|
|
89
87
|
type: Array,
|
|
@@ -109,6 +107,12 @@ const {isRequired, isReadonly, isGone,isDisabled} = util.props2auth(props)
|
|
|
109
107
|
const emit = defineEmits(["update:modelValue","select"]);
|
|
110
108
|
|
|
111
109
|
const selectedItems = ref([]);
|
|
110
|
+
const selectdItemsLabel = computed(()=>{
|
|
111
|
+
if(!selectedItems.value)
|
|
112
|
+
return ''
|
|
113
|
+
|
|
114
|
+
return selectedItems.value.join(',')
|
|
115
|
+
})
|
|
112
116
|
const popupVisible = ref(false);
|
|
113
117
|
const searchKeyword = ref(null);
|
|
114
118
|
const checkboxRefs = ref([]);
|
|
@@ -133,7 +137,7 @@ const values2items = (values)=>{
|
|
|
133
137
|
const reShow = () => {
|
|
134
138
|
if (props.modelValue) {
|
|
135
139
|
if (Array.isArray(props.options)) {
|
|
136
|
-
if (props.
|
|
140
|
+
if (props.multiple) {
|
|
137
141
|
selectedItems.value = findTextsByValues(props.modelValue, props.options);
|
|
138
142
|
} else {
|
|
139
143
|
const foundItem = props.options.find((item) => item.value === props.modelValue);
|
|
@@ -162,7 +166,7 @@ const showPopup = () => {
|
|
|
162
166
|
if (isReadonly.value) {
|
|
163
167
|
return;
|
|
164
168
|
}
|
|
165
|
-
if (props.
|
|
169
|
+
if (props.multiple) {
|
|
166
170
|
checkedValue.value = Array.isArray(props.modelValue) ? props.modelValue : [];
|
|
167
171
|
} else {
|
|
168
172
|
checkedValue.value = props.modelValue;
|
|
@@ -175,7 +179,7 @@ const cancelSelection = () => {
|
|
|
175
179
|
};
|
|
176
180
|
|
|
177
181
|
const confirmSelection = () => {
|
|
178
|
-
if (props.
|
|
182
|
+
if (props.multiple) {
|
|
179
183
|
selectedItems.value = findTextsByValues(checkedValue.value, props.options);
|
|
180
184
|
emit("update:modelValue", checkedValue.value);
|
|
181
185
|
emit("select",values2items(checkedValue.value))
|
|
@@ -207,7 +211,7 @@ const filteredColumns = computed(() => {
|
|
|
207
211
|
});
|
|
208
212
|
|
|
209
213
|
watch(checkedValue, () => {
|
|
210
|
-
if (props.
|
|
214
|
+
if (props.multiple) {
|
|
211
215
|
if (filteredColumns.value.length === 0) {
|
|
212
216
|
isAllChecked.value = false;
|
|
213
217
|
} else {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="page">
|
|
3
|
-
<widget-qw-data-selector :options="options" v-model="formData.singleSelect"
|
|
3
|
+
<widget-qw-data-selector :options="options" v-model="formData.singleSelect" label="单选数据"
|
|
4
4
|
placeholder="单选数据" :auth="formData.auth" />
|
|
5
|
-
<widget-qw-data-selector :options="options" v-model="formData.multSelect"
|
|
5
|
+
<widget-qw-data-selector :options="options" v-model="formData.multSelect" multiple label="多选数据"
|
|
6
6
|
placeholder="多选数据" :required="true" :readonly="false" />
|
|
7
7
|
</div>
|
|
8
8
|
</template>
|