@ditari/bsui 1.1.12 → 1.1.14
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/CHANGELOG.md +12 -0
- package/dist/cjs/select/Select.vue.d.ts +0 -1
- package/dist/cjs/select/Select.vue2.cjs +20 -21
- package/dist/cjs/select/Select.vue2.cjs.map +1 -1
- package/dist/esm/select/Select.vue.d.ts +0 -1
- package/dist/esm/select/Select.vue2.mjs +20 -21
- package/dist/esm/select/Select.vue2.mjs.map +1 -1
- package/example/src/App.vue +12 -0
- package/package.json +1 -1
- package/src/select/Select.vue +46 -30
package/CHANGELOG.md
CHANGED
|
@@ -18,7 +18,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
18
18
|
setup(__props, { emit: emits }) {
|
|
19
19
|
const props = __props;
|
|
20
20
|
const { getDicByKey } = store.useDataDicStore();
|
|
21
|
-
const { modelValue, data,
|
|
21
|
+
const { modelValue, data, onSelect, onChange } = useSelect();
|
|
22
22
|
function useSelect() {
|
|
23
23
|
const dicData = [...getDicByKey(props.name)];
|
|
24
24
|
const data2 = vue.ref(dicData);
|
|
@@ -27,10 +27,9 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
27
27
|
() => props.value,
|
|
28
28
|
(val) => {
|
|
29
29
|
modelValue2.value = val;
|
|
30
|
-
initSearch(val);
|
|
31
30
|
}
|
|
32
31
|
);
|
|
33
|
-
const
|
|
32
|
+
const onSearch = (keywords) => {
|
|
34
33
|
sendWorkerSearch(keywords);
|
|
35
34
|
};
|
|
36
35
|
function sendWorkerSearch(keywords) {
|
|
@@ -42,22 +41,6 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
42
41
|
data2.value = [...dicData].splice(0, 10);
|
|
43
42
|
}
|
|
44
43
|
}
|
|
45
|
-
function initSearch(val) {
|
|
46
|
-
val = val || "";
|
|
47
|
-
const index = dicData.findIndex((item) => {
|
|
48
|
-
return item.value.toLowerCase().indexOf(val.toLowerCase()) !== -1 || item.label.toLowerCase().includes(val);
|
|
49
|
-
});
|
|
50
|
-
if (index === -1) {
|
|
51
|
-
data2.value = [...dicData].splice(0, 10);
|
|
52
|
-
} else {
|
|
53
|
-
data2.value = sliceArrayByIndex(dicData, index);
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
function sliceArrayByIndex(arr, currentIndex) {
|
|
57
|
-
const start = Math.max(0, currentIndex - 5);
|
|
58
|
-
const end = Math.min(arr.length, currentIndex + 6);
|
|
59
|
-
return arr.slice(start, end);
|
|
60
|
-
}
|
|
61
44
|
const onSelect2 = (value) => {
|
|
62
45
|
emits("update:value", value);
|
|
63
46
|
onSelectHandler();
|
|
@@ -71,22 +54,38 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
71
54
|
const rs = dicList.find((obj) => obj.value === modelValue2.value);
|
|
72
55
|
emits("select", rs);
|
|
73
56
|
}
|
|
57
|
+
vue.watch(
|
|
58
|
+
() => props.include,
|
|
59
|
+
(val) => {
|
|
60
|
+
if (val.length > 0) {
|
|
61
|
+
data2.value = dicData.filter((item) => {
|
|
62
|
+
return val.some((i) => i === item.value);
|
|
63
|
+
});
|
|
64
|
+
} else {
|
|
65
|
+
data2.value = dicData;
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
immediate: true
|
|
70
|
+
}
|
|
71
|
+
);
|
|
74
72
|
return {
|
|
75
73
|
data: data2,
|
|
76
74
|
modelValue: modelValue2,
|
|
77
|
-
onSearch
|
|
75
|
+
onSearch,
|
|
78
76
|
onSelect: onSelect2,
|
|
79
77
|
onChange: onChange2
|
|
80
78
|
};
|
|
81
79
|
}
|
|
82
80
|
const onFilterOption = (inputValue, options) => {
|
|
83
|
-
return options.label.includes(inputValue);
|
|
81
|
+
return options.value.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1 || options.label.toLowerCase().includes(inputValue.toLowerCase());
|
|
84
82
|
};
|
|
85
83
|
return (_ctx, _cache) => {
|
|
86
84
|
const _component_a_select = vue.resolveComponent("a-select");
|
|
87
85
|
return vue.openBlock(), vue.createBlock(_component_a_select, {
|
|
88
86
|
value: vue.unref(modelValue),
|
|
89
87
|
"onUpdate:value": _cache[0] || (_cache[0] = ($event) => vue.isRef(modelValue) ? modelValue.value = $event : null),
|
|
88
|
+
style: { "width": "100%" },
|
|
90
89
|
"allow-clear": "",
|
|
91
90
|
"show-search": "",
|
|
92
91
|
options: vue.unref(data),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.vue2.cjs","sources":["../../../src/select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from \"vue\";\nimport { useDataDicStore } from \"@ditari/store\";\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\n// import DicWorker from \"./dic.worker?worker&inline\";\n\nconst props = defineProps({\n \"value\": { type: null, required: true, default: null },\n \"name\": { type: String, required: true, default: \"\" },\n \"disabled\": { type: Boolean, required: false, default: false },\n \"placeholder\": { type: String, required: false, default: \"请填写默认占位符啊！老铁\" },\n \"include\": { type: Array, required: false, default: [] as any }\n});\n\ninterface Emits {\n (e: \"update:value\", value: any): void;\n (e: \"change\", value: any): void;\n (e: \"select\", value: any): void;\n}\nconst emits = defineEmits([\"update:value\", \"change\", \"select\"]);\n\nconst { getDicByKey } = useDataDicStore();\n\
|
|
1
|
+
{"version":3,"file":"Select.vue2.cjs","sources":["../../../src/select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from \"vue\";\nimport { useDataDicStore } from \"@ditari/store\";\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\n// import DicWorker from \"./dic.worker?worker&inline\";\n\nconst props = defineProps({\n \"value\": { type: null, required: true, default: null },\n \"name\": { type: String, required: true, default: \"\" },\n \"disabled\": { type: Boolean, required: false, default: false },\n \"placeholder\": { type: String, required: false, default: \"请填写默认占位符啊！老铁\" },\n \"include\": { type: Array, required: false, default: [] as any }\n});\n\ninterface Emits {\n (e: \"update:value\", value: any): void;\n (e: \"change\", value: any): void;\n (e: \"select\", value: any): void;\n}\nconst emits = defineEmits([\"update:value\", \"change\", \"select\"]);\n\nconst { getDicByKey } = useDataDicStore();\n\nconst { modelValue, data, onSelect, onChange } = useSelect();\n\nfunction useSelect() {\n // 字典数据\n const dicData: any[] = [...getDicByKey(props.name)];\n const data = ref<any>(dicData);\n // 取值\n const modelValue = ref(props.value);\n\n // 监听value值的变化\n watch(\n () => props.value,\n (val) => {\n modelValue.value = val;\n //initSearch(val);\n }\n );\n\n //监听用户搜索事件\n const onSearch = (keywords: string) => {\n sendWorkerSearch(keywords);\n };\n\n // 发送搜索到webworker\n function sendWorkerSearch(keywords: string) {\n keywords = keywords ?? \"\";\n data.value = dicData\n .filter((item: any) => {\n return (\n item.value.toLowerCase().indexOf(keywords.toLowerCase()) !== -1 ||\n item.label.toLowerCase().includes(keywords.toLowerCase())\n );\n })\n .splice(0, 10);\n if (data.value.length === 0) {\n data.value = [...dicData].splice(0, 10);\n }\n }\n\n /**\n * 初始化value的时候进行搜索\n * @param val\n */\n // function initSearch(val: any) {\n // val = val || \"\";\n // const index = dicData.findIndex((item: any) => {\n // return (\n // item.value.toLowerCase().indexOf(val.toLowerCase()) !== -1 ||\n // item.label.toLowerCase().includes(val)\n // );\n // });\n // if (index === -1) {\n // data.value = [...dicData].splice(0, 10);\n // } else {\n // data.value = sliceArrayByIndex(dicData, index);\n // }\n // }\n //\n // function sliceArrayByIndex(arr: any, currentIndex: any) {\n // const start = Math.max(0, currentIndex - 5);\n // const end = Math.min(arr.length, currentIndex + 6);\n //\n // return arr.slice(start, end);\n // }\n\n //监听下拉选择事件\n const onSelect = (value: any) => {\n // 发射选择的数据\n emits(\"update:value\", value);\n // 处理下拉后返回数据的\n onSelectHandler();\n };\n\n // 监听数据改变\n const onChange = () => {\n //TODO 变化的时候 需要发送字典的所有数据\n emits(\"update:value\", modelValue.value);\n emits(\"change\", modelValue.value);\n };\n\n /**\n * 根据当前选中的value匹配对应的整条数据\n * 然后返回给父组件\n */\n function onSelectHandler() {\n const dicList = getDicByKey(props.name);\n const rs = dicList.find((obj: any) => obj.value === modelValue.value);\n emits(\"select\", rs);\n }\n\n watch(\n () => props.include,\n (val: any) => {\n if (val.length > 0) {\n // 只过滤出来include包含的数据\n data.value = dicData.filter((item: any) => {\n return val.some((i: any) => i === item.value);\n });\n } else {\n data.value = dicData;\n }\n },\n {\n immediate: true\n }\n );\n\n return {\n data,\n modelValue,\n onSearch,\n onSelect,\n onChange\n };\n}\n\n/**\n * 过滤筛选\n * @param inputValue\n * @param options\n */\nconst onFilterOption = (inputValue: any, options: any) => {\n return (\n options.value.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1 ||\n options.label.toLowerCase().includes(inputValue.toLowerCase())\n );\n};\n</script>\n<template>\n <a-select\n v-model:value=\"modelValue\"\n style=\"width: 100%\"\n allow-clear\n show-search\n :options=\"data\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :filter-option=\"onFilterOption\"\n @select=\"onSelect\"\n @change=\"onChange\"\n >\n </a-select>\n</template>\n<style scoped></style>\n"],"names":["useDataDicStore","data","ref","modelValue","watch","onSelect","onChange"],"mappings":"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"}
|
|
@@ -14,7 +14,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
14
14
|
setup(__props, { emit: emits }) {
|
|
15
15
|
const props = __props;
|
|
16
16
|
const { getDicByKey } = useDataDicStore();
|
|
17
|
-
const { modelValue, data,
|
|
17
|
+
const { modelValue, data, onSelect, onChange } = useSelect();
|
|
18
18
|
function useSelect() {
|
|
19
19
|
const dicData = [...getDicByKey(props.name)];
|
|
20
20
|
const data2 = ref(dicData);
|
|
@@ -23,10 +23,9 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
23
23
|
() => props.value,
|
|
24
24
|
(val) => {
|
|
25
25
|
modelValue2.value = val;
|
|
26
|
-
initSearch(val);
|
|
27
26
|
}
|
|
28
27
|
);
|
|
29
|
-
const
|
|
28
|
+
const onSearch = (keywords) => {
|
|
30
29
|
sendWorkerSearch(keywords);
|
|
31
30
|
};
|
|
32
31
|
function sendWorkerSearch(keywords) {
|
|
@@ -38,22 +37,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
38
37
|
data2.value = [...dicData].splice(0, 10);
|
|
39
38
|
}
|
|
40
39
|
}
|
|
41
|
-
function initSearch(val) {
|
|
42
|
-
val = val || "";
|
|
43
|
-
const index = dicData.findIndex((item) => {
|
|
44
|
-
return item.value.toLowerCase().indexOf(val.toLowerCase()) !== -1 || item.label.toLowerCase().includes(val);
|
|
45
|
-
});
|
|
46
|
-
if (index === -1) {
|
|
47
|
-
data2.value = [...dicData].splice(0, 10);
|
|
48
|
-
} else {
|
|
49
|
-
data2.value = sliceArrayByIndex(dicData, index);
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
function sliceArrayByIndex(arr, currentIndex) {
|
|
53
|
-
const start = Math.max(0, currentIndex - 5);
|
|
54
|
-
const end = Math.min(arr.length, currentIndex + 6);
|
|
55
|
-
return arr.slice(start, end);
|
|
56
|
-
}
|
|
57
40
|
const onSelect2 = (value) => {
|
|
58
41
|
emits("update:value", value);
|
|
59
42
|
onSelectHandler();
|
|
@@ -67,22 +50,38 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
67
50
|
const rs = dicList.find((obj) => obj.value === modelValue2.value);
|
|
68
51
|
emits("select", rs);
|
|
69
52
|
}
|
|
53
|
+
watch(
|
|
54
|
+
() => props.include,
|
|
55
|
+
(val) => {
|
|
56
|
+
if (val.length > 0) {
|
|
57
|
+
data2.value = dicData.filter((item) => {
|
|
58
|
+
return val.some((i) => i === item.value);
|
|
59
|
+
});
|
|
60
|
+
} else {
|
|
61
|
+
data2.value = dicData;
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
immediate: true
|
|
66
|
+
}
|
|
67
|
+
);
|
|
70
68
|
return {
|
|
71
69
|
data: data2,
|
|
72
70
|
modelValue: modelValue2,
|
|
73
|
-
onSearch
|
|
71
|
+
onSearch,
|
|
74
72
|
onSelect: onSelect2,
|
|
75
73
|
onChange: onChange2
|
|
76
74
|
};
|
|
77
75
|
}
|
|
78
76
|
const onFilterOption = (inputValue, options) => {
|
|
79
|
-
return options.label.includes(inputValue);
|
|
77
|
+
return options.value.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1 || options.label.toLowerCase().includes(inputValue.toLowerCase());
|
|
80
78
|
};
|
|
81
79
|
return (_ctx, _cache) => {
|
|
82
80
|
const _component_a_select = resolveComponent("a-select");
|
|
83
81
|
return openBlock(), createBlock(_component_a_select, {
|
|
84
82
|
value: unref(modelValue),
|
|
85
83
|
"onUpdate:value": _cache[0] || (_cache[0] = ($event) => isRef(modelValue) ? modelValue.value = $event : null),
|
|
84
|
+
style: { "width": "100%" },
|
|
86
85
|
"allow-clear": "",
|
|
87
86
|
"show-search": "",
|
|
88
87
|
options: unref(data),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.vue2.mjs","sources":["../../../src/select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from \"vue\";\nimport { useDataDicStore } from \"@ditari/store\";\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\n// import DicWorker from \"./dic.worker?worker&inline\";\n\nconst props = defineProps({\n \"value\": { type: null, required: true, default: null },\n \"name\": { type: String, required: true, default: \"\" },\n \"disabled\": { type: Boolean, required: false, default: false },\n \"placeholder\": { type: String, required: false, default: \"请填写默认占位符啊！老铁\" },\n \"include\": { type: Array, required: false, default: [] as any }\n});\n\ninterface Emits {\n (e: \"update:value\", value: any): void;\n (e: \"change\", value: any): void;\n (e: \"select\", value: any): void;\n}\nconst emits = defineEmits([\"update:value\", \"change\", \"select\"]);\n\nconst { getDicByKey } = useDataDicStore();\n\
|
|
1
|
+
{"version":3,"file":"Select.vue2.mjs","sources":["../../../src/select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from \"vue\";\nimport { useDataDicStore } from \"@ditari/store\";\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\n// import DicWorker from \"./dic.worker?worker&inline\";\n\nconst props = defineProps({\n \"value\": { type: null, required: true, default: null },\n \"name\": { type: String, required: true, default: \"\" },\n \"disabled\": { type: Boolean, required: false, default: false },\n \"placeholder\": { type: String, required: false, default: \"请填写默认占位符啊！老铁\" },\n \"include\": { type: Array, required: false, default: [] as any }\n});\n\ninterface Emits {\n (e: \"update:value\", value: any): void;\n (e: \"change\", value: any): void;\n (e: \"select\", value: any): void;\n}\nconst emits = defineEmits([\"update:value\", \"change\", \"select\"]);\n\nconst { getDicByKey } = useDataDicStore();\n\nconst { modelValue, data, onSelect, onChange } = useSelect();\n\nfunction useSelect() {\n // 字典数据\n const dicData: any[] = [...getDicByKey(props.name)];\n const data = ref<any>(dicData);\n // 取值\n const modelValue = ref(props.value);\n\n // 监听value值的变化\n watch(\n () => props.value,\n (val) => {\n modelValue.value = val;\n //initSearch(val);\n }\n );\n\n //监听用户搜索事件\n const onSearch = (keywords: string) => {\n sendWorkerSearch(keywords);\n };\n\n // 发送搜索到webworker\n function sendWorkerSearch(keywords: string) {\n keywords = keywords ?? \"\";\n data.value = dicData\n .filter((item: any) => {\n return (\n item.value.toLowerCase().indexOf(keywords.toLowerCase()) !== -1 ||\n item.label.toLowerCase().includes(keywords.toLowerCase())\n );\n })\n .splice(0, 10);\n if (data.value.length === 0) {\n data.value = [...dicData].splice(0, 10);\n }\n }\n\n /**\n * 初始化value的时候进行搜索\n * @param val\n */\n // function initSearch(val: any) {\n // val = val || \"\";\n // const index = dicData.findIndex((item: any) => {\n // return (\n // item.value.toLowerCase().indexOf(val.toLowerCase()) !== -1 ||\n // item.label.toLowerCase().includes(val)\n // );\n // });\n // if (index === -1) {\n // data.value = [...dicData].splice(0, 10);\n // } else {\n // data.value = sliceArrayByIndex(dicData, index);\n // }\n // }\n //\n // function sliceArrayByIndex(arr: any, currentIndex: any) {\n // const start = Math.max(0, currentIndex - 5);\n // const end = Math.min(arr.length, currentIndex + 6);\n //\n // return arr.slice(start, end);\n // }\n\n //监听下拉选择事件\n const onSelect = (value: any) => {\n // 发射选择的数据\n emits(\"update:value\", value);\n // 处理下拉后返回数据的\n onSelectHandler();\n };\n\n // 监听数据改变\n const onChange = () => {\n //TODO 变化的时候 需要发送字典的所有数据\n emits(\"update:value\", modelValue.value);\n emits(\"change\", modelValue.value);\n };\n\n /**\n * 根据当前选中的value匹配对应的整条数据\n * 然后返回给父组件\n */\n function onSelectHandler() {\n const dicList = getDicByKey(props.name);\n const rs = dicList.find((obj: any) => obj.value === modelValue.value);\n emits(\"select\", rs);\n }\n\n watch(\n () => props.include,\n (val: any) => {\n if (val.length > 0) {\n // 只过滤出来include包含的数据\n data.value = dicData.filter((item: any) => {\n return val.some((i: any) => i === item.value);\n });\n } else {\n data.value = dicData;\n }\n },\n {\n immediate: true\n }\n );\n\n return {\n data,\n modelValue,\n onSearch,\n onSelect,\n onChange\n };\n}\n\n/**\n * 过滤筛选\n * @param inputValue\n * @param options\n */\nconst onFilterOption = (inputValue: any, options: any) => {\n return (\n options.value.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1 ||\n options.label.toLowerCase().includes(inputValue.toLowerCase())\n );\n};\n</script>\n<template>\n <a-select\n v-model:value=\"modelValue\"\n style=\"width: 100%\"\n allow-clear\n show-search\n :options=\"data\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :filter-option=\"onFilterOption\"\n @select=\"onSelect\"\n @change=\"onChange\"\n >\n </a-select>\n</template>\n<style scoped></style>\n"],"names":["data","modelValue","onSelect","onChange"],"mappings":"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"}
|
package/example/src/App.vue
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
+
import { ref } from "vue";
|
|
3
|
+
|
|
2
4
|
import { useTable } from "./hooks";
|
|
3
5
|
const { data, loading, config } = useTable();
|
|
4
6
|
|
|
@@ -6,9 +8,19 @@ setTimeout(() => {
|
|
|
6
8
|
data.value = [];
|
|
7
9
|
config.pagination.total = 0;
|
|
8
10
|
}, 3000);
|
|
11
|
+
|
|
12
|
+
const declareType = ref("");
|
|
9
13
|
</script>
|
|
10
14
|
<template>
|
|
11
15
|
<DTable :config="config" :data="data" :loading="loading"></DTable>
|
|
16
|
+
<div style="width: 200px">
|
|
17
|
+
<d-select
|
|
18
|
+
v-model:value="declareType"
|
|
19
|
+
:include="['3', '4']"
|
|
20
|
+
name="PRE_DEC_TYPE"
|
|
21
|
+
placeholder="请选择申报人类别"
|
|
22
|
+
></d-select>
|
|
23
|
+
</div>
|
|
12
24
|
</template>
|
|
13
25
|
<style>
|
|
14
26
|
.my-modal {
|
package/package.json
CHANGED
package/src/select/Select.vue
CHANGED
|
@@ -31,11 +31,7 @@ const emits = defineEmits<Emits>();
|
|
|
31
31
|
|
|
32
32
|
const { getDicByKey } = useDataDicStore();
|
|
33
33
|
|
|
34
|
-
|
|
35
|
-
// // 获取worker
|
|
36
|
-
// const workerInstance: any = workerPool.getWorker();
|
|
37
|
-
|
|
38
|
-
const { modelValue, data, onSearch, onSelect, onChange } = useSelect();
|
|
34
|
+
const { modelValue, data, onSelect, onChange } = useSelect();
|
|
39
35
|
|
|
40
36
|
function useSelect() {
|
|
41
37
|
// 字典数据
|
|
@@ -49,12 +45,10 @@ function useSelect() {
|
|
|
49
45
|
() => props.value,
|
|
50
46
|
(val) => {
|
|
51
47
|
modelValue.value = val;
|
|
52
|
-
initSearch(val);
|
|
48
|
+
//initSearch(val);
|
|
53
49
|
}
|
|
54
50
|
);
|
|
55
51
|
|
|
56
|
-
//initSearch(modelValue.value);
|
|
57
|
-
|
|
58
52
|
//监听用户搜索事件
|
|
59
53
|
const onSearch = (keywords: string) => {
|
|
60
54
|
sendWorkerSearch(keywords);
|
|
@@ -80,27 +74,27 @@ function useSelect() {
|
|
|
80
74
|
* 初始化value的时候进行搜索
|
|
81
75
|
* @param val
|
|
82
76
|
*/
|
|
83
|
-
function initSearch(val: any) {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
function sliceArrayByIndex(arr: any, currentIndex: any) {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
}
|
|
77
|
+
// function initSearch(val: any) {
|
|
78
|
+
// val = val || "";
|
|
79
|
+
// const index = dicData.findIndex((item: any) => {
|
|
80
|
+
// return (
|
|
81
|
+
// item.value.toLowerCase().indexOf(val.toLowerCase()) !== -1 ||
|
|
82
|
+
// item.label.toLowerCase().includes(val)
|
|
83
|
+
// );
|
|
84
|
+
// });
|
|
85
|
+
// if (index === -1) {
|
|
86
|
+
// data.value = [...dicData].splice(0, 10);
|
|
87
|
+
// } else {
|
|
88
|
+
// data.value = sliceArrayByIndex(dicData, index);
|
|
89
|
+
// }
|
|
90
|
+
// }
|
|
91
|
+
//
|
|
92
|
+
// function sliceArrayByIndex(arr: any, currentIndex: any) {
|
|
93
|
+
// const start = Math.max(0, currentIndex - 5);
|
|
94
|
+
// const end = Math.min(arr.length, currentIndex + 6);
|
|
95
|
+
//
|
|
96
|
+
// return arr.slice(start, end);
|
|
97
|
+
// }
|
|
104
98
|
|
|
105
99
|
//监听下拉选择事件
|
|
106
100
|
const onSelect = (value: any) => {
|
|
@@ -126,6 +120,24 @@ function useSelect() {
|
|
|
126
120
|
const rs = dicList.find((obj: any) => obj.value === modelValue.value);
|
|
127
121
|
emits("select", rs);
|
|
128
122
|
}
|
|
123
|
+
|
|
124
|
+
watch(
|
|
125
|
+
() => props.include,
|
|
126
|
+
(val: any) => {
|
|
127
|
+
if (val.length > 0) {
|
|
128
|
+
// 只过滤出来include包含的数据
|
|
129
|
+
data.value = dicData.filter((item: any) => {
|
|
130
|
+
return val.some((i: any) => i === item.value);
|
|
131
|
+
});
|
|
132
|
+
} else {
|
|
133
|
+
data.value = dicData;
|
|
134
|
+
}
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
immediate: true
|
|
138
|
+
}
|
|
139
|
+
);
|
|
140
|
+
|
|
129
141
|
return {
|
|
130
142
|
data,
|
|
131
143
|
modelValue,
|
|
@@ -141,12 +153,16 @@ function useSelect() {
|
|
|
141
153
|
* @param options
|
|
142
154
|
*/
|
|
143
155
|
const onFilterOption = (inputValue: any, options: any) => {
|
|
144
|
-
return
|
|
156
|
+
return (
|
|
157
|
+
options.value.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1 ||
|
|
158
|
+
options.label.toLowerCase().includes(inputValue.toLowerCase())
|
|
159
|
+
);
|
|
145
160
|
};
|
|
146
161
|
</script>
|
|
147
162
|
<template>
|
|
148
163
|
<a-select
|
|
149
164
|
v-model:value="modelValue"
|
|
165
|
+
style="width: 100%"
|
|
150
166
|
allow-clear
|
|
151
167
|
show-search
|
|
152
168
|
:options="data"
|