perf: aaWaf、cdnfly站点选择支持查询

pull/409/head
xiaojunnuo 2025-05-20 01:11:26 +08:00
parent 094565ccd6
commit 8af3463668
2 changed files with 45 additions and 2 deletions

View File

@ -38,6 +38,7 @@ export function createRemoteSelectInputDefine(opts?: {
required?: boolean;
rules?: any;
mergeScript?: string;
search?: boolean;
}) {
const title = opts?.title || "请选择";
const certDomainsInputKey = opts?.certDomainsInputKey || "certDomains";
@ -47,6 +48,7 @@ export function createRemoteSelectInputDefine(opts?: {
const type = opts?.type || "plugin";
const watches = opts?.watches || [];
const helper = opts?.helper || "请选择";
const search = opts?.search ?? false;
let mode = "tags";
if (opts.multi === false) {
mode = undefined;
@ -63,6 +65,7 @@ export function createRemoteSelectInputDefine(opts?: {
type,
typeName,
action,
search,
watches: [certDomainsInputKey, accessIdInputKey, ...watches],
},
rules: opts?.rules,

View File

@ -1,7 +1,26 @@
<template>
<div class="remote-select">
<div class="flex flex-row">
<a-select class="remote-select-input" show-search :filter-option="filterOption" :options="optionsRef" :value="value" v-bind="attrs" @click="onClick" @update:value="emit('update:value', $event)" />
<a-select class="remote-select-input" show-search :filter-option="filterOption" :options="optionsRef" :value="value" v-bind="attrs" @click="onClick" @update:value="emit('update:value', $event)">
<template #dropdownRender="{ menuNode: menu }">
<template v-if="search">
<div class="flex w-full" style="padding: 4px 8px">
<a-input ref="inputRef" v-model:value="searchKeyRef" class="flex-1" allow-clear placeholder="查询关键字" @keydown.enter="doSearch" />
<a-button class="ml-2" :loading="loading" type="text" @click="doSearch">
<template #icon>
<search-outlined />
</template>
查询
</a-button>
</div>
<div v-if="hasError" class="helper p-2" :class="{ error: hasError }">
{{ message }}
</div>
<a-divider style="margin: 4px 0" />
</template>
<v-nodes :vnodes="menu" />
</template>
</a-select>
<div class="ml-5">
<fs-button :loading="loading" title="刷新选项" icon="ion:refresh-outline" @click="refreshOptions"></fs-button>
</div>
@ -13,16 +32,29 @@
</template>
<script setup lang="ts">
import { ComponentPropsType, doRequest } from "/@/components/plugins/lib";
import { inject, ref, useAttrs, watch } from "vue";
import { defineComponent, inject, ref, useAttrs, watch } from "vue";
import { PluginDefine } from "@certd/pipeline";
defineOptions({
name: "RemoteSelect",
});
const VNodes = defineComponent({
props: {
vnodes: {
type: Object,
required: true,
},
},
render() {
return this.vnodes;
},
});
const props = defineProps<
{
watches: string[];
search: boolean;
} & ComponentPropsType
>();
@ -36,6 +68,7 @@ const getCurrentPluginDefine: any = inject("getCurrentPluginDefine");
const getScope: any = inject("get:scope");
const getPluginType: any = inject("get:plugin:type");
const searchKeyRef = ref("");
const optionsRef = ref([]);
const message = ref("");
const hasError = ref(false);
@ -81,6 +114,9 @@ const getOptions = async () => {
typeName: form.type,
action: props.action,
input,
data: {
searchKey: props.search ? searchKeyRef.value : "",
},
},
{
onError(err: any) {
@ -114,6 +150,10 @@ async function refreshOptions() {
await getOptions();
}
async function doSearch() {
await refreshOptions();
}
watch(
() => {
const values = [];