chore: 模版创建流水线

packages/ui/certd-client/src/views/certd/pipeline/certd-form/use.tsx

@@ -12,6 +12,25 @@ import { PluginGroup, usePluginStore } from "/@/store/plugin";
 import { createNotificationApi } from "/@/views/certd/notification/api";
 import GroupSelector from "../group/group-selector.vue";
 
+export function fillPipelineByDefaultForm(pipeline: any, form: any) {
+  const triggers = [];
+  if (form.triggerCron) {
+    triggers.push({ title: "定时触发", type: "timer", props: { cron: form.triggerCron } });
+  }
+  const notifications = [];
+  if (form.notification != null) {
+    notifications.push({
+      type: "custom",
+      when: ["error", "turnToSuccess", "success"],
+      notificationId: form.notification,
+      title: form.notificationTarget?.name || "自定义通知",
+    });
+  }
+  pipeline.triggers = triggers;
+  pipeline.notifications = notifications;
+  return pipeline;
+}
+
 export function setRunnableIds(pipeline: any) {
   const idMap: any = {};
   function createId(oldId: any) {
@@ -244,21 +263,8 @@ export function useCertPipelineCreator() {
     async function doSubmit({ form }: any) {
       // const certDetail = readCertDetail(form.cert.crt);
       // 添加certd pipeline
-      const triggers = [];
-      if (form.triggerCron) {
-        triggers.push({ title: "定时触发", type: "timer", props: { cron: form.triggerCron } });
-      }
-      const notifications = [];
-      if (form.notification != null) {
-        notifications.push({
-          type: "custom",
-          when: ["error", "turnToSuccess", "success"],
-          notificationId: form.notification,
-          title: form.notificationTarget?.name || "自定义通知",
-        });
-      }
       const pluginInput = omit(form, ["triggerCron", "notification", "notificationTarget", "certApplyPlugin", "groupId"]);
-      let pipeline = {
+      let pipeline: any = {
         title: form.domains[0] + "证书自动化",
         runnableType: "pipeline",
         stages: [
@@ -288,17 +294,11 @@ export function useCertPipelineCreator() {
             ],
           },
         ],
-        triggers,
-        notifications,
       };
-      pipeline = setRunnableIds(pipeline);
 
-      /**
-       *  // cert: 证书; backup: 备份; custom:自定义;
-       *   type: string;
-       *   // custom: 自定义; monitor: 监控;
-       *   from: string;
-       */
+      pipeline = fillPipelineByDefaultForm(pipeline, form);
+
+      pipeline = setRunnableIds(pipeline);
       const groupId = form.groupId;
       const id = await api.Save({
         title: pipeline.title,

packages/ui/certd-client/src/views/certd/pipeline/template/api.ts

@@ -56,4 +56,12 @@ export const templateApi = {
       method: "post",
     });
   },
+
+  async CreatePipelineByTemplate(data: any) {
+    return await request({
+      url: apiPrefix + "/createPipelineByTemplate",
+      method: "post",
+      data,
+    });
+  },
 };

packages/ui/certd-client/src/views/certd/pipeline/template/crud.tsx

@@ -146,8 +146,12 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
                 toolbar: {
                   show: false,
                 },
-                tabs: {
-                  name: "type",
+                columns: {
+                  title: {
+                    column: {
+                      cellRender: null,
+                    },
+                  },
                 },
               },
             },

packages/ui/certd-client/src/views/certd/pipeline/template/form.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-form ref="templateFormRef" class="template-form w-full" :model="templateForm" :label-col="labelCol" :wrapper-col="wrapperCol">
+  <a-form ref="formRef" class="template-form w-full" :model="templateForm" :label-col="labelCol" :wrapper-col="wrapperCol">
     <template v-for="(item, key) in templateFormColumns" :key="key">
       <fs-form-item v-if="item.show !== false" :model-value="get(templateForm, key)" :item="item" :get-context-fn="getScopeFunc(key)" @update:model-value="set(templateForm, key, $event)" />
     </template>
@@ -14,7 +14,7 @@ import { usePluginStore } from "/@/store/plugin";
 defineOptions({
   name: "TemplateForm",
 });
-
+const formRef = ref();
 const props = defineProps<{
   input: any;
   pipeline: any;
@@ -61,9 +61,14 @@ function getScopeFunc(inputKey: string) {
   };
 }
 
+async function validate() {
+  return await formRef.value.validate();
+}
+
 defineExpose({
   getForm() {
     return templateForm;
   },
+  validate,
 });
 </script>

packages/ui/certd-client/src/views/certd/pipeline/template/use.tsx

@@ -1,10 +1,12 @@
 import { dict, useFormWrapper } from "@fast-crud/fast-crud";
-import { checkPipelineLimit } from "/@/views/certd/pipeline/utils";
+import { checkPipelineLimit, eachSteps } from "/@/views/certd/pipeline/utils";
 import { templateApi } from "/@/views/certd/pipeline/template/api";
 import TemplateForm from "./form.vue";
 import NotificationSelector from "/@/views/certd/notification/notification-selector/index.vue";
 import GroupSelector from "/@/views/certd/pipeline/group/group-selector.vue";
 import { ref } from "vue";
+import { fillPipelineByDefaultForm } from "/@/views/certd/pipeline/certd-form/use";
+import { cloneDeep } from "lodash-es";
 
 export function useTemplate() {
   const { openCrudFormDialog } = useFormWrapper();
@@ -38,8 +40,43 @@ export function useTemplate() {
 
     const randomHour = Math.floor(Math.random() * 6);
     const randomMin = Math.floor(Math.random() * 60);
+    const templateFormRef = ref();
+
+    async function onSubmit(opts: { form: any }) {
+      const form = opts.form;
+      await templateFormRef.value.validate();
+
+      const tempInputs = templateFormRef.value.getFormData();
+
+      let newPipeline = cloneDeep(pipeline);
+      newPipeline = fillPipelineByDefaultForm(newPipeline, form);
+      //填充模版参数
+      const steps: any = {};
+      eachSteps(newPipeline, (step: any) => {
+        steps[step.id] = step;
+      });
+
+      for (const inputKey in tempInputs) {
+        const [stepId, key] = inputKey.split(".");
+        const step = steps[stepId];
+        if (step) {
+          step.input[key] = tempInputs[inputKey];
+        }
+      }
+
+      const groupId = form.groupId;
+      const { id } = await templateApi.CreatePipelineByTemplate({
+        title: form.title,
+        content: JSON.stringify(newPipeline),
+        keepHistoryCount: 30,
+        groupId,
+        templateId: detail.template.id,
+      });
+    }
+
     const crudOptions = {
       form: {
+        onSubmit,
         wrapper: {
           title: `从模版<${detail.template.title}>创建流水线`,
           width: 1100,
@@ -47,7 +84,7 @@ export function useTemplate() {
             "form-body-top": () => {
               return (
                 <div class={"w-full flex"}>
-                  <TemplateForm input={templateProps.input} pipeline={pipeline} />
+                  <TemplateForm ref={templateFormRef} input={templateProps.input} pipeline={pipeline} />
                 </div>
               );
             },