chore: 流水线模版初步

2026-04-24 12:27:25 +08:00 · 2025-06-19 18:17:35 +08:00
parent e11b3becfd
commit 26b395110c
13 changed files with 552 additions and 0 deletions
@@ -32,6 +32,24 @@ export const certdResources = [
          isMenu: false,
        },
      },
+      {
+        title: "流水线模版",
+        name: "PipelineTemplate",
+        path: "/certd/pipeline/template",
+        component: "/certd/pipeline/template/index.vue",
+        meta: {
+          isMenu: true,
+        },
+      },
+      {
+        title: "流水线模版编辑",
+        name: "PipelineTemplateEdit",
+        path: "/certd/pipeline/template/edit",
+        component: "/certd/pipeline/template/edit.vue",
+        meta: {
+          isMenu: false,
+        },
+      },
      {
        title: "执行历史记录",
        name: "PipelineHistory",
@@ -157,5 +157,8 @@ export const usePluginStore = defineStore({
    async getPluginConfig(query: any) {
      return await api.GetPluginConfig(query);
    },
+    getPluginDefineSync(name: string) {
+      return this.group.get(name);
+    },
  },
 });
@@ -300,4 +300,11 @@ h1, h2, h3, h4, h5, h6 {

 .ant-drawer-content-wrapper {
  max-width: 90vw;
+}
+
+
+.block-title{
+  font-size: 14px;
+  padding:10px;
+  color : #6e6e6e;
 }
@@ -0,0 +1,59 @@
+import { request } from "/src/api/service";
+import { CertInfo } from "/@/views/certd/pipeline/api";
+
+const apiPrefix = "/pi/template";
+export const templateApi = {
+  async GetList(query: any) {
+    return await request({
+      url: apiPrefix + "/page",
+      method: "post",
+      data: query,
+    });
+  },
+
+  async AddObj(obj: any) {
+    return await request({
+      url: apiPrefix + "/add",
+      method: "post",
+      data: obj,
+    });
+  },
+
+  async UpdateObj(obj: any) {
+    return await request({
+      url: apiPrefix + "/update",
+      method: "post",
+      data: obj,
+    });
+  },
+
+  async DelObj(id: number) {
+    return await request({
+      url: apiPrefix + "/delete",
+      method: "post",
+      params: { id },
+    });
+  },
+
+  async GetObj(id: number) {
+    return await request({
+      url: apiPrefix + "/info",
+      method: "post",
+      params: { id },
+    });
+  },
+
+  async GetDetail(id: number) {
+    return await request({
+      url: apiPrefix + "/detail",
+      method: "post",
+      params: { id },
+    });
+  },
+  async ListAll() {
+    return await request({
+      url: apiPrefix + "/all",
+      method: "post",
+    });
+  },
+};
@@ -0,0 +1,113 @@
+// @ts-ignore
+import { useI18n } from "vue-i18n";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, useFormWrapper, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import { templateApi } from "./api";
+import { useRouter } from "vue-router";
+import { useModal } from "/@/use/use-modal";
+
+export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const api = templateApi;
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async (req: EditReq) => {
+    const { form, row } = req;
+    form.id = row.id;
+    const res = await api.UpdateObj(form);
+    return res;
+  };
+  const delRequest = async (req: DelReq) => {
+    const { row } = req;
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async (req: AddReq) => {
+    const { form } = req;
+    const res = await api.AddObj(form);
+    return res;
+  };
+  const { openCrudFormDialog } = useFormWrapper();
+  const router = useRouter();
+
+  const model = useModal();
+  return {
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest,
+      },
+      form: {
+        labelCol: {
+          //固定label宽度
+          span: null,
+          style: {
+            width: "100px",
+          },
+        },
+        col: {
+          span: 22,
+        },
+        wrapper: {
+          width: 600,
+        },
+      },
+      actionbar: {
+        show: true,
+        buttons: {
+          add: {
+            text: "创建模版",
+            type: "primary",
+            show: true,
+          },
+        },
+      },
+      rowHandle: {
+        // width: 100,
+        fixed: "right",
+      },
+      columns: {
+        id: {
+          title: "ID",
+          key: "id",
+          type: "number",
+          search: {
+            show: false,
+          },
+          column: {
+            width: 100,
+            editable: {
+              disabled: true,
+            },
+          },
+          form: {
+            show: false,
+          },
+        },
+        title: {
+          title: "模版名称",
+          type: "text",
+          search: {
+            show: true,
+          },
+          column: {
+            width: 200,
+            sorter: true,
+          },
+        },
+        pipelineId: {
+          title: "流水线ID",
+          type: "text",
+          search: {
+            show: true,
+          },
+          column: {
+            width: 200,
+            sorter: true,
+          },
+        },
+      },
+    },
+  };
+}
@@ -0,0 +1,135 @@
+<template>
+  <div class="page-template-edit">
+    <div class="base"></div>
+    <div class="props flex p-10">
+      <div class="task-list w-50%">
+        <div class="block-title">原始任务参数</div>
+        <a-collapse>
+          <a-collapse-panel v-for="step of steps" class="step-item" :header="step.title">
+            <div class="step-inputs flex flex-wrap">
+              <div v-for="(input, key) of step.input" :key="key" class="hover:bg-gray-100 p-5 w-full xl:w-[50%]">
+                <div class="flex flex-between" :title="input.define.helper">
+                  <div class="flex flex-1 overflow-hidden mr-5">
+                    <span style="min-width: 140px" class="bas">
+                      <a-tag color="green">{{ input.define.title }}</a-tag>
+                    </span>
+                    <span :title="input.value" class="ellipsis flex-1 text-nowrap">= {{ input.value }}</span>
+                  </div>
+                  <fs-button v-if="!templateProps.input?.[key]" size="small" type="primary" icon="ion:add" title="添加为模版变量" @click="addToProps(step.id, key, input)"></fs-button>
+                  <fs-button v-else size="small" danger icon="ion:close" title="删除模版变量" @click="removeToProps(step.id, key)" />
+                </div>
+              </div>
+            </div>
+          </a-collapse-panel>
+        </a-collapse>
+      </div>
+
+      <div class="template-props w-50%">
+        <div class="block-title">模版变量</div>
+        <div class="p-10">
+          <fs-form v-bind="templateFormOptions"></fs-form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, Ref } from "vue";
+import { useRoute } from "vue-router";
+import { templateApi } from "./api";
+import { eachSteps } from "../utils";
+import { usePluginStore } from "/@/store/plugin";
+
+const route = useRoute();
+const templateId = route.query.templateId as string;
+
+type TemplateDetail = {
+  template: any;
+  pipeline: any;
+};
+const templateProps: Ref = ref({
+  input: {},
+});
+const detail: Ref<TemplateDetail> = ref();
+async function getTemplateDetail() {
+  const res = await templateApi.GetDetail(parseInt(templateId));
+  detail.value = res;
+  templateProps.value = JSON.parse(res.template.content ?? "{}");
+}
+
+const pluginStore = usePluginStore();
+
+onMounted(async () => {
+  await pluginStore.init();
+  await getTemplateDetail();
+});
+
+const steps = computed(() => {
+  if (!detail.value) {
+    return [];
+  }
+
+  const list: any[] = [];
+  eachSteps(detail.value.pipeline, (step: any) => {
+    const plugin = pluginStore.getPluginDefineSync(step.type);
+    if (!plugin) {
+      return;
+    }
+
+    const inputs: any = {};
+    for (const key in plugin.input) {
+      const input: any = plugin.input[key];
+      if (input.template === false || input.component?.name === "output-selector") {
+        continue;
+      }
+      inputs[key] = {
+        value: step.input[key],
+        define: plugin.input[key],
+      };
+    }
+    list.push({
+      id: step.id,
+      title: step.title,
+      type: step.type,
+      input: inputs,
+    });
+  });
+
+  return list;
+});
+
+const templateFormOptions = computed(() => {
+  const columns: any = {};
+  for (const key in templateProps.value.input) {
+    const input = templateProps.value.input[key];
+    columns[key] = {
+      title: input.define.title,
+      type: "text",
+      value: input.value,
+      ...input.define,
+    };
+  }
+  return {
+    columns,
+    labelCol: {
+      style: {
+        width: "120px",
+      },
+    },
+  };
+});
+
+function addToProps(stepId: string, key: any, input: { value: any; define: any }) {
+  if (!templateProps.value.input) {
+    templateProps.value.input = {};
+  }
+  inputKey = stepId + "." + key;
+  templateProps.value.input[inputKey] = input;
+}
+
+function removeToProps(stepId: string, key: any) {
+  inputKey = stepId + "." + key;
+  delete templateProps.value.input[inputKey];
+}
+</script>
@@ -0,0 +1,30 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">
+        流水线模版
+        <span class="sub">可根据模版批量创建流水线</span>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+  </fs-page>
+</template>
+
+<script lang="ts" setup>
+import { onActivated, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
+
+defineOptions({
+  name: "PipelineTemplate",
+});
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: {} });
+
+// 页面打开后获取列表数据
+onMounted(() => {
+  crudExpose.doRefresh();
+});
+onActivated(() => {
+  crudExpose.doRefresh();
+});
+</script>