perf: 优化站点选择组件,切换选择时不刷新列表

pull/409/head
xiaojunnuo 2025-05-28 11:22:39 +08:00
parent aea1c13bd3
commit 3a147141b1
5 changed files with 101 additions and 58 deletions

View File

@ -6,9 +6,9 @@ export type PipelineContext = IContext;
export type PageReq = { export type PageReq = {
offset?: number; offset?: number;
limit?: number; limit?: number;
query?: string; searchKey?: string;
sortBy?: string; // sortBy?: string;
sortOrder?: "asc" | "desc"; // sortOrder?: "asc" | "desc";
}; };
export type PageRes = { export type PageRes = {

View File

@ -39,6 +39,8 @@ export function createRemoteSelectInputDefine(opts?: {
rules?: any; rules?: any;
mergeScript?: string; mergeScript?: string;
search?: boolean; search?: boolean;
pager?: boolean;
component?: any;
}) { }) {
const title = opts?.title || "请选择"; const title = opts?.title || "请选择";
const certDomainsInputKey = opts?.certDomainsInputKey || "certDomains"; const certDomainsInputKey = opts?.certDomainsInputKey || "certDomains";
@ -49,6 +51,7 @@ export function createRemoteSelectInputDefine(opts?: {
const watches = opts?.watches || []; const watches = opts?.watches || [];
const helper = opts?.helper || "请选择"; const helper = opts?.helper || "请选择";
const search = opts?.search ?? false; const search = opts?.search ?? false;
const pager = opts?.pager ?? true;
let mode = "tags"; let mode = "tags";
if (opts.multi === false) { if (opts.multi === false) {
mode = undefined; mode = undefined;
@ -66,7 +69,9 @@ export function createRemoteSelectInputDefine(opts?: {
typeName, typeName,
action, action,
search, search,
pager,
watches: [certDomainsInputKey, accessIdInputKey, ...watches], watches: [certDomainsInputKey, accessIdInputKey, ...watches],
...opts.component,
}, },
rules: opts?.rules, rules: opts?.rules,
required: opts.required ?? true, required: opts.required ?? true,

View File

@ -19,6 +19,10 @@
<a-divider style="margin: 4px 0" /> <a-divider style="margin: 4px 0" />
</template> </template>
<v-nodes :vnodes="menu" /> <v-nodes :vnodes="menu" />
<div v-if="pager" class="pager text-center p-5">
<a-pagination v-model:current="pagerRef.current" simple :total="pagerRef.total" :page-size="pagerRef.limit" />
</div>
</template> </template>
</a-select> </a-select>
<div class="ml-5"> <div class="ml-5">
@ -32,7 +36,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ComponentPropsType, doRequest } from "/@/components/plugins/lib"; import { ComponentPropsType, doRequest } from "/@/components/plugins/lib";
import { defineComponent, inject, ref, useAttrs, watch } from "vue"; import { defineComponent, inject, ref, useAttrs, watch, Ref } from "vue";
import { PluginDefine } from "@certd/pipeline"; import { PluginDefine } from "@certd/pipeline";
defineOptions({ defineOptions({
@ -54,7 +58,8 @@ const VNodes = defineComponent({
const props = defineProps< const props = defineProps<
{ {
watches: string[]; watches: string[];
search: boolean; search?: boolean;
pager?: boolean;
} & ComponentPropsType } & ComponentPropsType
>(); >();
@ -73,6 +78,9 @@ const optionsRef = ref([]);
const message = ref(""); const message = ref("");
const hasError = ref(false); const hasError = ref(false);
const loading = ref(false); const loading = ref(false);
const pagerRef: Ref = ref({
current: 1,
});
const getOptions = async () => { const getOptions = async () => {
if (loading.value) { if (loading.value) {
return; return;
@ -107,6 +115,7 @@ const getOptions = async () => {
loading.value = true; loading.value = true;
optionsRef.value = []; optionsRef.value = [];
const offset = (pagerRef.value.current - 1) * (pagerRef.value.limit ?? 100);
try { try {
const res = await doRequest( const res = await doRequest(
{ {
@ -116,6 +125,8 @@ const getOptions = async () => {
input, input,
data: { data: {
searchKey: props.search ? searchKeyRef.value : "", searchKey: props.search ? searchKeyRef.value : "",
offset: offset,
limit: pagerRef.value.limit,
}, },
}, },
{ {
@ -126,10 +137,26 @@ const getOptions = async () => {
showErrorNotify: false, showErrorNotify: false,
} }
); );
if (res && res.length > 0) { const list = res?.list || res || [];
if (list.length > 0) {
message.value = "获取数据成功,请从下拉框中选择"; message.value = "获取数据成功,请从下拉框中选择";
} }
optionsRef.value = res; optionsRef.value = list;
pagerRef.value.total = list.length;
if (props.pager) {
if (res.offset != null) {
pagerRef.value.offset = res.offset ?? 0;
}
if (res.limit != null) {
pagerRef.value.limit = res.limit ?? 100;
}
if (res.total != null) {
pagerRef.value.total = res.total ?? list.length;
}
const { offset, limit } = pagerRef.value;
pagerRef.value.current = offset % limit === 0 ? offset / limit + 1 : offset / limit;
}
return res; return res;
} finally { } finally {
loading.value = false; loading.value = false;
@ -151,27 +178,37 @@ async function refreshOptions() {
} }
async function doSearch() { async function doSearch() {
pagerRef.value.current = 1;
await refreshOptions(); await refreshOptions();
} }
watch( watch(
() => { () => {
const values = [];
const pluginType = getPluginType(); const pluginType = getPluginType();
const { form } = getScope(); const { form, key } = getScope();
const input = pluginType === "plugin" ? form.input : form; const input = pluginType === "plugin" ? form.input : form;
const watches = {};
for (const item of props.watches) { for (const key of props.watches) {
values.push(input[item]); watches[key] = input[key];
} }
return { return {
form: input, form: watches,
watched: values, key,
}; };
}, },
async () => { async (value, oldValue) => {
await getOptions(); const { form } = value;
const oldForm = oldValue.form;
let changed = oldForm == null || optionsRef.value.length == 0;
for (const key of props.watches) {
if (form[key] != oldForm[key]) {
changed = true;
break;
}
}
if (changed) {
await getOptions();
}
}, },
{ {
immediate: true, immediate: true,

View File

@ -53,6 +53,7 @@ export class FarcdnRefreshCert extends AbstractPlusTaskPlugin {
createRemoteSelectInputDefine({ createRemoteSelectInputDefine({
title: "证书Id", title: "证书Id",
helper: "要更新的Farcdn证书id", helper: "要更新的Farcdn证书id",
action: FarcdnRefreshCert.prototype.onGetCertList.name action: FarcdnRefreshCert.prototype.onGetCertList.name
}) })
) )

View File

@ -46,7 +46,7 @@ importers:
packages/core/acme-client: packages/core/acme-client:
dependencies: dependencies:
'@certd/basic': '@certd/basic':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../basic version: link:../basic
'@peculiar/x509': '@peculiar/x509':
specifier: ^1.11.0 specifier: ^1.11.0
@ -207,10 +207,10 @@ importers:
packages/core/pipeline: packages/core/pipeline:
dependencies: dependencies:
'@certd/basic': '@certd/basic':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../basic version: link:../basic
'@certd/plus-core': '@certd/plus-core':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../pro/plus-core version: link:../../pro/plus-core
dayjs: dayjs:
specifier: ^1.11.7 specifier: ^1.11.7
@ -415,7 +415,7 @@ importers:
packages/libs/lib-k8s: packages/libs/lib-k8s:
dependencies: dependencies:
'@certd/basic': '@certd/basic':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../core/basic version: link:../../core/basic
'@kubernetes/client-node': '@kubernetes/client-node':
specifier: 0.21.0 specifier: 0.21.0
@ -455,16 +455,16 @@ importers:
packages/libs/lib-server: packages/libs/lib-server:
dependencies: dependencies:
'@certd/acme-client': '@certd/acme-client':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../core/acme-client version: link:../../core/acme-client
'@certd/basic': '@certd/basic':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../core/basic version: link:../../core/basic
'@certd/pipeline': '@certd/pipeline':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../core/pipeline version: link:../../core/pipeline
'@certd/plus-core': '@certd/plus-core':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../pro/plus-core version: link:../../pro/plus-core
'@midwayjs/cache': '@midwayjs/cache':
specifier: ~3.14.0 specifier: ~3.14.0
@ -607,16 +607,16 @@ importers:
packages/plugins/plugin-cert: packages/plugins/plugin-cert:
dependencies: dependencies:
'@certd/acme-client': '@certd/acme-client':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../core/acme-client version: link:../../core/acme-client
'@certd/basic': '@certd/basic':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../core/basic version: link:../../core/basic
'@certd/pipeline': '@certd/pipeline':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../core/pipeline version: link:../../core/pipeline
'@certd/plugin-lib': '@certd/plugin-lib':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../plugin-lib version: link:../plugin-lib
'@google-cloud/publicca': '@google-cloud/publicca':
specifier: ^1.3.0 specifier: ^1.3.0
@ -695,10 +695,10 @@ importers:
specifier: ^3.787.0 specifier: ^3.787.0
version: 3.810.0(aws-crt@1.26.2) version: 3.810.0(aws-crt@1.26.2)
'@certd/basic': '@certd/basic':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../core/basic version: link:../../core/basic
'@certd/pipeline': '@certd/pipeline':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../core/pipeline version: link:../../core/pipeline
'@kubernetes/client-node': '@kubernetes/client-node':
specifier: 0.21.0 specifier: 0.21.0
@ -786,19 +786,19 @@ importers:
packages/pro/commercial-core: packages/pro/commercial-core:
dependencies: dependencies:
'@certd/basic': '@certd/basic':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../core/basic version: link:../../core/basic
'@certd/lib-server': '@certd/lib-server':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../libs/lib-server version: link:../../libs/lib-server
'@certd/pipeline': '@certd/pipeline':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../core/pipeline version: link:../../core/pipeline
'@certd/plugin-plus': '@certd/plugin-plus':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../plugin-plus version: link:../plugin-plus
'@certd/plus-core': '@certd/plus-core':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../plus-core version: link:../plus-core
'@midwayjs/core': '@midwayjs/core':
specifier: ~3.20.3 specifier: ~3.20.3
@ -883,22 +883,22 @@ importers:
specifier: ^1.0.2 specifier: ^1.0.2
version: 1.0.3 version: 1.0.3
'@certd/basic': '@certd/basic':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../core/basic version: link:../../core/basic
'@certd/lib-k8s': '@certd/lib-k8s':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../libs/lib-k8s version: link:../../libs/lib-k8s
'@certd/pipeline': '@certd/pipeline':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../core/pipeline version: link:../../core/pipeline
'@certd/plugin-cert': '@certd/plugin-cert':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../plugins/plugin-cert version: link:../../plugins/plugin-cert
'@certd/plugin-lib': '@certd/plugin-lib':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../plugins/plugin-lib version: link:../../plugins/plugin-lib
'@certd/plus-core': '@certd/plus-core':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../plus-core version: link:../plus-core
ali-oss: ali-oss:
specifier: ^6.21.0 specifier: ^6.21.0
@ -1001,7 +1001,7 @@ importers:
packages/pro/plus-core: packages/pro/plus-core:
dependencies: dependencies:
'@certd/basic': '@certd/basic':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../core/basic version: link:../../core/basic
dayjs: dayjs:
specifier: ^1.11.7 specifier: ^1.11.7
@ -1291,10 +1291,10 @@ importers:
version: 0.1.3(zod@3.24.4) version: 0.1.3(zod@3.24.4)
devDependencies: devDependencies:
'@certd/lib-iframe': '@certd/lib-iframe':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../libs/lib-iframe version: link:../../libs/lib-iframe
'@certd/pipeline': '@certd/pipeline':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../core/pipeline version: link:../../core/pipeline
'@rollup/plugin-commonjs': '@rollup/plugin-commonjs':
specifier: ^25.0.7 specifier: ^25.0.7
@ -1474,43 +1474,43 @@ importers:
specifier: ^3.705.0 specifier: ^3.705.0
version: 3.810.0(aws-crt@1.26.2) version: 3.810.0(aws-crt@1.26.2)
'@certd/acme-client': '@certd/acme-client':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../core/acme-client version: link:../../core/acme-client
'@certd/basic': '@certd/basic':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../core/basic version: link:../../core/basic
'@certd/commercial-core': '@certd/commercial-core':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../pro/commercial-core version: link:../../pro/commercial-core
'@certd/jdcloud': '@certd/jdcloud':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../libs/lib-jdcloud version: link:../../libs/lib-jdcloud
'@certd/lib-huawei': '@certd/lib-huawei':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../libs/lib-huawei version: link:../../libs/lib-huawei
'@certd/lib-k8s': '@certd/lib-k8s':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../libs/lib-k8s version: link:../../libs/lib-k8s
'@certd/lib-server': '@certd/lib-server':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../libs/lib-server version: link:../../libs/lib-server
'@certd/midway-flyway-js': '@certd/midway-flyway-js':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../libs/midway-flyway-js version: link:../../libs/midway-flyway-js
'@certd/pipeline': '@certd/pipeline':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../core/pipeline version: link:../../core/pipeline
'@certd/plugin-cert': '@certd/plugin-cert':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../plugins/plugin-cert version: link:../../plugins/plugin-cert
'@certd/plugin-lib': '@certd/plugin-lib':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../plugins/plugin-lib version: link:../../plugins/plugin-lib
'@certd/plugin-plus': '@certd/plugin-plus':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../pro/plugin-plus version: link:../../pro/plugin-plus
'@certd/plus-core': '@certd/plus-core':
specifier: ^1.34.5 specifier: ^1.34.7
version: link:../../pro/plus-core version: link:../../pro/plus-core
'@corsinvest/cv4pve-api-javascript': '@corsinvest/cv4pve-api-javascript':
specifier: ^8.3.0 specifier: ^8.3.0