github
/
halo
mirror of https://github.com/halo-dev/halo
1
0
Fork 0
Code Issues Releases Wiki Activity

[release-2.19] pref: add parameter to formkit select component for remote search by specific field (#6606) 

This is an automated cherry-pick of #6591

/assign LIlGG

```release-note
为 Formkit Select 组件远程查询增加指定 Key 的字段。
```
pull/6610/head
Halo Dev Bot 2024-09-06 17:35:52 +08:00 committed by GitHub
parent a45ebb0825
commit a0a8c33bee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/docs/custom-formkit-input/README.md
View File

@ -231,10 +231,11 @@ const handleSelectPostAuthorRemote = {
itemsField: items
labelField: post.spec.title
valueField: post.metadata.name
fieldSelectorKey: metadata.name
```
> [!NOTE]
> 当远程数据具有分页时，可能会出现默认选项不在第一页的情况，此时 Select 组件将会发送另一个查询请求，以获取默认选项的数据。此接口会携带如下参数 `fieldSelector: ${requestOption.valueField}=(value1,value2,value3)`。
> 当远程数据具有分页时，可能会出现默认选项不在第一页的情况，此时 Select 组件将会发送另一个查询请求，以获取默认选项的数据。此接口会携带如下参数 `fieldSelector: ${requestOption.fieldSelectorKey}=(value1,value2,value3)`。
> 其中，value1, value2, value3 为默认选项的值。返回值与查询一致，通过 `requestOption` 解析。

22
ui/src/formkit/inputs/select/SelectMain.vue
View File

@ -1,5 +1,10 @@
<script lang="ts" setup>
import type { FormKitFrameworkContext } from "@formkit/core";
import { axiosInstance } from "@halo-dev/api-client";
import { useDebounceFn } from "@vueuse/core";
import { useFuse } from "@vueuse/integrations/useFuse";
import type { AxiosRequestConfig } from "axios";
import { get, has, type PropertyPath } from "lodash-es";
import {
computed,
onMounted,
@ -10,11 +15,6 @@ import {
type PropType,
} from "vue";
import SelectContainer from "./SelectContainer.vue";
import { axiosInstance } from "@halo-dev/api-client";
import { get, has, type PropertyPath } from "lodash-es";
import { useDebounceFn } from "@vueuse/core";
import { useFuse } from "@vueuse/integrations/useFuse";
import type { AxiosRequestConfig } from "axios";
export interface SelectProps {
/**
@ -159,6 +159,12 @@ export interface SelectActionRequest {
* Field name for value, default is `value`.
*/
valueField?: PropertyPath;
/**
* When using value to query detailed information, the default query
* parameter key for fieldSelector is `metadata.name`.
*/
fieldSelectorKey?: PropertyPath;
}
const props = defineProps({
@ -209,6 +215,8 @@ const initSelectProps = () => {
itemsField: "items",
labelField: "label",
valueField: "value",
totalField: "total",
fieldSelectorKey: "metadata.name",
pageField: "page",
sizeField: "size",
parseData: undefined,
@ -481,13 +489,13 @@ const fetchRemoteMappedOptions = async (
};
if (requestConfig.method === "GET") {
requestConfig.params = {
fieldSelector: `${selectProps.requestOption?.valueField?.toString()}=(${unmappedSelectValues.join(
fieldSelector: `${selectProps.requestOption?.fieldSelectorKey?.toString()}=(${unmappedSelectValues.join(
","
)})`,
};
} else {
requestConfig.data = {
fieldSelector: `${selectProps.requestOption?.valueField?.toString()}=(${unmappedSelectValues.join(
fieldSelector: `${selectProps.requestOption?.fieldSelectorKey?.toString()}=(${unmappedSelectValues.join(
","
)})`,
};