perf: 1panel支持先上传证书再选择证书

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

@@ -25,8 +25,9 @@
           </div>
         </template>
       </a-select>
-      <div class="ml-5">
+      <div class="ml-5 flex flex-row no-wrap">
         <fs-button :loading="loading" title="刷新选项" icon="ion:refresh-outline" @click="refreshOptions"></fs-button>
+        <UploadCert v-if="uploadCert" class="ml-5" v-bind="uploadCert" @submit="refreshOptions"></UploadCert>
       </div>
     </div>
     <div class="helper" :class="{ error: hasError }">
@@ -39,6 +40,8 @@ import { ComponentPropsType, doRequest } from "/@/components/plugins/lib";
 import { defineComponent, inject, ref, useAttrs, watch, Ref } from "vue";
 import { PluginDefine } from "@certd/pipeline";
 import { getInputFromForm } from "./utils";
+import UploadCert from "./upload-cert.vue";
+import { UploadCertProps } from "./types";
 
 defineOptions({
   name: "RemoteSelect",
@@ -65,9 +68,10 @@ const props = defineProps<
     pager?: boolean;
     multi?: boolean;
     pageSize?: number;
+    uploadCert?: UploadCertProps;
   } & ComponentPropsType
 >();
-
+debugger;
 const emit = defineEmits<{
   "update:value": any;
 }>();

packages/ui/certd-client/src/components/plugins/common/types.ts

@@ -0,0 +1,5 @@
+export interface UploadCertProps {
+  title?: string;
+  columns?: Record<string, any>;
+  button?: any;
+}

packages/ui/certd-client/src/components/plugins/common/upload-cert.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="upload-cert">
+    <fs-button v-model:loading="loading" type="primary" text="上传" v-bind="props.button" @click="openUploadCertDialog"></fs-button>
+  </div>
+</template>
+<script lang="ts" setup>
+import { message } from "ant-design-vue";
+import { useFormDialog } from "../../../use/use-dialog";
+import { computed, inject, ref } from "vue";
+import { doRequest } from "../lib";
+import { getInputFromForm } from "./utils";
+import { UploadCertProps } from "./types";
+import { merge } from "lodash-es";
+
+const props = defineProps<UploadCertProps>();
+const loading = ref(false);
+
+const emit = defineEmits(["submit"]);
+const { openFormDialog } = useFormDialog();
+const pipeline = inject("pipeline", null);
+
+const getCurrentPluginDefine: any = inject("getCurrentPluginDefine", () => {
+  return {};
+});
+const getScope: any = inject("get:scope", () => {
+  return {};
+});
+const getPluginType: any = inject("get:plugin:type", () => {
+  return "plugin";
+});
+const title = computed(() => props.title || "上传证书");
+function openUploadCertDialog() {
+  const columns = merge(
+    {
+      certName: {
+        title: "证书名称",
+        form: {
+          component: {
+            name: "a-input",
+            vModel: "value",
+          },
+          helper: "上传后证书显示名称",
+        },
+      },
+    },
+    props.columns
+  );
+  openFormDialog({
+    title: title.value,
+    columns: {
+      certName: {
+        title: "证书名称",
+        form: {
+          component: {
+            name: "a-input",
+            vModel: "value",
+          },
+        },
+      },
+      ...props.columns,
+    },
+    onSubmit: async (form: any) => {
+      const pluginType = getPluginType();
+      const scope = getScope();
+      const { input, record } = getInputFromForm(scope.form, pluginType);
+      loading.value = true;
+      try {
+        const res = await doRequest(
+          {
+            type: pluginType,
+            typeName: scope.form.type,
+            action: "onUploadCert",
+            input,
+            record,
+            data: {
+              pipelineId: pipeline?.value?.id,
+              ...form,
+            },
+          },
+          {
+            // onError(err: any) {
+            //   message.error(err.message);
+            // },
+            showErrorNotify: true,
+          }
+        );
+        message.success("上传成功");
+        emit("submit");
+      } finally {
+        loading.value = false;
+      }
+    },
+  });
+}
+</script>
+<style lang="less">
+.upload-cert {
+  display: flex;
+  align-items: center;
+}
+</style>