perf: 支持根据id更新证书（证书Id不变接口），不过该接口为白名单功能，普通腾讯云账户无法使用

packages/ui/certd-client/src/components/plugins/common/remote-auto-complete.vue

@@ -66,7 +66,7 @@ const getOptions = async () => {
   const input = (pluginType === "plugin" ? form?.input : form) || {};
 
   for (let key in define.input) {
-    const inWatches = props.watches.includes(key);
+    const inWatches = props.watches?.includes(key);
     const inputDefine = define.input[key];
     if (inWatches && inputDefine.required) {
       const value = input[key];

packages/ui/certd-client/src/components/plugins/common/remote-select.vue

@@ -105,7 +105,7 @@ const getOptions = async () => {
   const input = (pluginType === "plugin" ? form?.input : form) || {};
 
   for (let key in define.input) {
-    const inWatches = props.watches.includes(key);
+    const inWatches = props.watches?.includes(key);
     const inputDefine = define.input[key];
     if (inWatches && inputDefine.required) {
       const value = input[key];

packages/ui/certd-client/src/components/plugins/common/remote-tree-select.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="remote-select">
+    <div class="flex flex-row">
+      <a-tree-select class="remote-tree-select-input" :tree-data="optionsRef" :value="value" tree-checkable allow-clear v-bind="attrs" @click="onClick" @update:value="emit('update:value', $event)"> </a-tree-select>
+      <div class="ml-5">
+        <fs-button :loading="loading" title="刷新选项" icon="ion:refresh-outline" @click="refreshOptions"></fs-button>
+      </div>
+    </div>
+    <div class="helper" :class="{ error: hasError }">
+      {{ message }}
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ComponentPropsType, doRequest } from "/@/components/plugins/lib";
+import { defineComponent, inject, ref, useAttrs, watch, Ref } from "vue";
+import { PluginDefine } from "@certd/pipeline";
+
+defineOptions({
+  name: "RemoteTreeSelect",
+});
+
+const props = defineProps<
+  {
+    watches: string[];
+    search?: boolean;
+    pager?: boolean;
+  } & ComponentPropsType
+>();
+
+const emit = defineEmits<{
+  "update:value": any;
+}>();
+
+const attrs = useAttrs();
+
+const getCurrentPluginDefine: any = inject("getCurrentPluginDefine", () => {
+  return {};
+});
+const getScope: any = inject("get:scope", () => {
+  return {};
+});
+const getPluginType: any = inject("get:plugin:type", () => {
+  return "plugin";
+});
+
+const searchKeyRef = ref("");
+const optionsRef = ref([]);
+const message = ref("");
+const hasError = ref(false);
+const loading = ref(false);
+const pagerRef: Ref = ref({
+  current: 1,
+});
+const getOptions = async () => {
+  debugger;
+  if (loading.value) {
+    return;
+  }
+
+  if (!getCurrentPluginDefine) {
+    return;
+  }
+
+  const define: PluginDefine = getCurrentPluginDefine()?.value;
+  if (!define) {
+    return;
+  }
+  const pluginType = getPluginType();
+  const { form } = getScope();
+  const input = (pluginType === "plugin" ? form?.input : form) || {};
+
+  for (let key in define.input) {
+    const inWatches = props.watches?.includes(key);
+    const inputDefine = define.input[key];
+    if (inWatches && inputDefine.required) {
+      const value = input[key];
+      if (value == null || value === "") {
+        console.log("remote-select required", key);
+        return;
+      }
+    }
+  }
+
+  message.value = "";
+  hasError.value = false;
+  loading.value = true;
+  const pageNo = pagerRef.value.pageNo;
+  const pageSize = pagerRef.value.pageSize;
+  try {
+    const res = await doRequest(
+      {
+        type: pluginType,
+        typeName: form.type,
+        action: props.action,
+        input,
+        data: {
+          searchKey: props.search ? searchKeyRef.value : "",
+          pageNo,
+          pageSize,
+        },
+      },
+      {
+        onError(err: any) {
+          hasError.value = true;
+          message.value = `获取选项出错：${err.message}`;
+        },
+        showErrorNotify: false,
+      }
+    );
+    const list = res?.list || res || [];
+    if (list.length > 0) {
+      message.value = "获取数据成功，请从下拉框中选择";
+    } else {
+      message.value = "获取数据成功，没有数据";
+    }
+    optionsRef.value = list;
+    pagerRef.value.total = list.length;
+    if (props.pager) {
+      if (res.pageNo != null) {
+        pagerRef.value.pageNo = res.pageNo ?? 1;
+      }
+      if (res.pageSize != null) {
+        pagerRef.value.pageSize = res.pageSize ?? 100;
+      }
+      if (res.total != null) {
+        pagerRef.value.total = res.total ?? list.length;
+      }
+    }
+
+    return res;
+  } finally {
+    loading.value = false;
+  }
+};
+
+async function onClick() {
+  if (optionsRef.value?.length === 0) {
+    await refreshOptions();
+  }
+}
+
+async function refreshOptions() {
+  await getOptions();
+}
+
+async function doSearch() {
+  pagerRef.value.pageNo = 1;
+  await refreshOptions();
+}
+
+watch(
+  () => {
+    const pluginType = getPluginType();
+    const { form, key } = getScope();
+    const input = (pluginType === "plugin" ? form?.input : form) || {};
+    const watches = {};
+    for (const key of props.watches) {
+      //@ts-ignore
+      watches[key] = input[key];
+    }
+    return {
+      form: watches,
+      key,
+    };
+  },
+  async (value, oldValue) => {
+    const { form } = value;
+    const oldForm: any = oldValue?.form;
+    let changed = oldForm == null || optionsRef.value.length == 0;
+    for (const key of props.watches) {
+      //@ts-ignore
+      if (oldForm && form[key] != oldForm[key]) {
+        changed = true;
+        break;
+      }
+    }
+    if (changed) {
+      await getOptions();
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+
+async function onPageChange(current: any) {
+  await refreshOptions();
+}
+</script>
+
+<style lang="less"></style>

packages/ui/certd-client/src/components/plugins/index.ts

@@ -2,6 +2,7 @@ import SynologyIdDeviceGetter from "./synology/device-id-getter.vue";
 import RemoteAutoComplete from "./common/remote-auto-complete.vue";
 import RemoteSelect from "./common/remote-select.vue";
 import RemoteInput from "./common/remote-input.vue";
+import RemoteTreeSelect from "./common/remote-tree-select.vue";
 import CertDomainsGetter from "./common/cert-domains-getter.vue";
 import OutputSelector from "/@/components/plugins/common/output-selector/index.vue";
 import DnsProviderSelector from "/@/components/plugins/cert/dns-provider-selector/index.vue";
@@ -24,6 +25,7 @@ export default {
     app.component("SynologyDeviceIdGetter", SynologyIdDeviceGetter);
     app.component("RemoteAutoComplete", RemoteAutoComplete);
     app.component("RemoteSelect", RemoteSelect);
+    app.component("RemoteTreeSelect", RemoteTreeSelect);
     app.component("RemoteInput", RemoteInput);
     app.component("CertDomainsGetter", CertDomainsGetter);
     app.component("InputPassword", InputPassword);