From 2851a33eb2510f038fadb55da29512597a4ba512 Mon Sep 17 00:00:00 2001
From: xiaojunnuo <xiaojunnuo@qq.com>
Date: Sun, 25 Jun 2023 16:25:23 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Daccess=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E7=B1=BB=E5=9E=8Btrigger?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/core/pipeline/src/plugin/api.ts      |  6 ++
 .../src/plugin/cert-plugin/index.ts           |  7 ++
 .../pipeline/component/step-form/index.vue    | 64 ++++++++++++-------
 .../pipeline/component/task-form/index.vue    | 53 +++++----------
 .../views/certd/pipeline/pipeline/index.vue   | 41 ++++++++----
 5 files changed, 99 insertions(+), 72 deletions(-)

diff --git a/packages/core/pipeline/src/plugin/api.ts b/packages/core/pipeline/src/plugin/api.ts
index 644b69736..151772698 100644
--- a/packages/core/pipeline/src/plugin/api.ts
+++ b/packages/core/pipeline/src/plugin/api.ts
@@ -31,6 +31,12 @@ export type PluginDefine = Registrable & {
   autowire?: {
     [key: string]: any;
   };
+
+  reference?: {
+    src: string;
+    dest: string;
+    type: "computed";
+  }[];
 };
 
 export type ITaskPlugin = {
diff --git a/packages/plugins/plugin-cert/src/plugin/cert-plugin/index.ts b/packages/plugins/plugin-cert/src/plugin/cert-plugin/index.ts
index b373e6234..5d19e8407 100644
--- a/packages/plugins/plugin-cert/src/plugin/cert-plugin/index.ts
+++ b/packages/plugins/plugin-cert/src/plugin/cert-plugin/index.ts
@@ -73,6 +73,13 @@ export class CertApplyPlugin extends AbstractTaskPlugin {
     },
     required: true,
     helper: "请选择dns解析提供商授权",
+    reference: [
+      {
+        src: "form.dnsProviderType",
+        dest: "component.type",
+        type: "computed",
+      },
+    ],
   })
   dnsProviderAccess!: string;
 
diff --git a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/step-form/index.vue b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/step-form/index.vue
index 8f772577c..e6ee84a8a 100644
--- a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/step-form/index.vue
+++ b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/step-form/index.vue
@@ -84,11 +84,12 @@
   </a-drawer>
 </template>
 
-<script lang="jsx">
+<script lang="tsx">
 import { message, Modal } from "ant-design-vue";
-import { inject, ref } from "vue";
+import { computed, inject, Ref, ref } from "vue";
 import _ from "lodash";
 import { nanoid } from "nanoid";
+import { compute } from "@fast-crud/fast-crud";
 export default {
   name: "PiStepForm",
   props: {
@@ -98,21 +99,21 @@ export default {
     }
   },
   emits: ["update"],
-  setup(props, context) {
+  setup(props: any, context: any) {
     /**
      *  step drawer
      * @returns
      */
     function useStepForm() {
-      const stepPluginDefineList = inject("plugins");
+      const stepPluginDefineList: any = inject("plugins");
 
-      const mode = ref("add");
-      const callback = ref();
-      const currentStep = ref({ title: undefined, input: {} });
-      const currentPlugin = ref({});
-      const stepFormRef = ref(null);
-      const stepDrawerVisible = ref(false);
-      const rules = ref({
+      const mode: Ref = ref("add");
+      const callback: Ref = ref();
+      const currentStep: Ref = ref({ title: undefined, input: {} });
+      const currentPlugin: Ref = ref({});
+      const stepFormRef: Ref = ref(null);
+      const stepDrawerVisible: Ref = ref(false);
+      const rules: Ref = ref({
         name: [
           {
             type: "string",
@@ -122,7 +123,7 @@ export default {
         ]
       });
 
-      const stepTypeSelected = (item) => {
+      const stepTypeSelected = (item: any) => {
         currentStep.value.type = item.name;
         currentStep.value.title = item.title;
         console.log("currentStepTypeChanged:", currentStep.value);
@@ -155,13 +156,14 @@ export default {
         stepDrawerVisible.value = false;
       };
 
-      const stepDrawerOnAfterVisibleChange = (val) => {
+      const stepDrawerOnAfterVisibleChange = (val: any) => {
         console.log("stepDrawerOnAfterVisibleChange", val);
       };
 
-      const stepOpen = (step, emit) => {
+      const stepOpen = (step: any, emit: any) => {
         callback.value = emit;
         currentStep.value = _.merge({ input: {}, strategy: {} }, step);
+
         console.log("currentStepOpen", currentStep.value);
         if (step.type) {
           changeCurrentPlugin(currentStep.value);
@@ -169,9 +171,9 @@ export default {
         stepDrawerShow();
       };
 
-      const stepAdd = (emit) => {
+      const stepAdd = (emit: any) => {
         mode.value = "add";
-        const step = {
+        const step: any = {
           id: nanoid(),
           title: "新任务",
           type: undefined,
@@ -182,31 +184,49 @@ export default {
         stepOpen(step, emit);
       };
 
-      const stepEdit = (step, emit) => {
+      const stepEdit = (step: any, emit: any) => {
         mode.value = "edit";
         stepOpen(step, emit);
       };
 
-      const stepView = (step, emit) => {
+      const stepView = (step: any, emit: any) => {
         mode.value = "view";
         stepOpen(step, emit);
       };
 
-      const changeCurrentPlugin = (step) => {
+      const changeCurrentPlugin = (step: any) => {
         const stepType = step.type;
-        const pluginDefine = stepPluginDefineList.value.find((p) => {
+        const pluginDefine = stepPluginDefineList.value.find((p: any) => {
           return p.name === stepType;
         });
         if (pluginDefine) {
           step.type = stepType;
           step._isAdd = false;
-          currentPlugin.value = pluginDefine;
+          currentPlugin.value = _.cloneDeep(pluginDefine);
+          for (let key in currentPlugin.value.input) {
+            const input = currentPlugin.value.input[key];
+            if (input?.reference) {
+              for (const reference of input.reference) {
+                _.set(
+                  input,
+                  reference.dest,
+                  computed<any>(() => {
+                    const scope = {
+                      form: currentStep.value.input
+                    };
+                    return _.get(scope, reference.src);
+                  })
+                );
+              }
+            }
+          }
         }
+
         console.log("currentStepTypeChanged:", currentStep.value);
         console.log("currentStepPlugin:", currentPlugin.value);
       };
 
-      const stepSave = async (e) => {
+      const stepSave = async (e: any) => {
         console.log("currentStepSave", currentStep.value);
         try {
           await stepFormRef.value.validate();
diff --git a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/task-form/index.vue b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/task-form/index.vue
index cf532f24f..7d09cc82e 100644
--- a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/task-form/index.vue
+++ b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/task-form/index.vue
@@ -1,12 +1,5 @@
 <template>
-  <a-drawer
-    v-model:visible="taskDrawerVisible"
-    placement="right"
-    :closable="true"
-    width="600px"
-    class="pi-task-form"
-    :after-visible-change="taskDrawerOnAfterVisibleChange"
-  >
+  <a-drawer v-model:visible="taskDrawerVisible" placement="right" :closable="true" width="600px" class="pi-task-form" :after-visible-change="taskDrawerOnAfterVisibleChange">
     <template #title>
       编辑任务
       <a-button v-if="editMode" @click="taskDelete()">
@@ -15,13 +8,7 @@
     </template>
     <template v-if="currentTask">
       <pi-container>
-        <a-form
-          ref="taskFormRef"
-          class="task-form"
-          :model="currentTask"
-          :label-col="labelCol"
-          :wrapper-col="wrapperCol"
-        >
+        <a-form ref="taskFormRef" class="task-form" :model="currentTask" :label-col="labelCol" :wrapper-col="wrapperCol">
           <fs-form-item
             v-model="currentTask.title"
             :item="{
@@ -37,13 +24,7 @@
           />
 
           <div class="steps">
-            <a-form-item
-              :value="currentTask.steps"
-              name="steps"
-              label=""
-              :wrapper-col="{ span: 24 }"
-              :rules="[{ required: true, message: '至少需要一个步骤，或者你可以点击标题右边删除按钮删除此任务' }]"
-            >
+            <a-form-item :value="currentTask.steps" name="steps" label="" :wrapper-col="{ span: 24 }" :rules="[{ required: true, message: '至少需要一个步骤，或者你可以点击标题右边删除按钮删除此任务' }]">
               <a-descriptions title="任务步骤" size="small">
                 <template #extra>
                   <a-button type="primary" @click="stepAdd(currentTask)">添加步骤</a-button>
@@ -100,14 +81,14 @@ export default {
     }
   },
   emits: ["update"],
-  setup(props, ctx) {
+  setup(props: any, ctx: any) {
     function useStep() {
       const stepFormRef: Ref<any> = ref(null);
       const currentStepIndex = ref(0);
       provide("currentStepIndex", currentStepIndex);
-      const stepAdd = (task) => {
+      const stepAdd = (task: any) => {
         currentStepIndex.value = task.steps.length;
-        stepFormRef.value.stepAdd((type, value) => {
+        stepFormRef.value.stepAdd((type: any, value: any) => {
           if (type === "save") {
             task.steps.push(value);
             if (!task.title || task.title === "新任务") {
@@ -116,12 +97,12 @@ export default {
           }
         });
       };
-      const stepEdit = (task, step, stepIndex) => {
+      const stepEdit = (task: any, step: any, stepIndex: any) => {
         currentStepIndex.value = stepIndex;
         console.log("step.edit start", task, step, props.editMode);
         if (props.editMode) {
           console.log("step.edit", task, step);
-          stepFormRef.value.stepEdit(step, (type, value) => {
+          stepFormRef.value.stepEdit(step, (type: any, value: any) => {
             console.log("step.save", step, type, value);
             if (type === "delete") {
               task.steps.splice(stepIndex, 1);
@@ -131,11 +112,11 @@ export default {
             console.log("task.steps", task.steps);
           });
         } else {
-          stepFormRef.value.stepView(step, (type, value) => {});
+          stepFormRef.value.stepView(step, (type: any, value: any) => {});
         }
       };
 
-      const stepDelete = (task, stepIndex) => {
+      const stepDelete = (task: any, stepIndex: any) => {
         Modal.confirm({
           title: "确认",
           content: `确定要删除此步骤吗？`,
@@ -176,34 +157,34 @@ export default {
         taskDrawerVisible.value = false;
       };
 
-      const taskDrawerOnAfterVisibleChange = (val) => {
+      const taskDrawerOnAfterVisibleChange = (val: any) => {
         console.log("taskDrawerOnAfterVisibleChange", val);
       };
 
-      const taskOpen = (task, emit) => {
+      const taskOpen = (task: any, emit: any) => {
         callback.value = emit;
         currentTask.value = _.merge({ steps: {} }, task);
         console.log("currentTaskOpen", currentTask.value);
         taskDrawerShow();
       };
 
-      const taskAdd = (emit) => {
+      const taskAdd = (emit: any) => {
         mode.value = "add";
-        const task = { id: nanoid(), title: "新任务", steps: [], status: null };
+        const task: any = { id: nanoid(), title: "新任务", steps: [], status: null };
         taskOpen(task, emit);
       };
 
-      const taskEdit = (task, emit) => {
+      const taskEdit = (task: any, emit: any) => {
         mode.value = "edit";
         taskOpen(task, emit);
       };
 
-      const taskView = (task, emit) => {
+      const taskView = (task: any, emit: any) => {
         mode.value = "view";
         taskOpen(task, emit);
       };
 
-      const taskSave = async (e) => {
+      const taskSave = async (e: any) => {
         console.log("currentTaskSave", currentTask.value);
         try {
           await taskFormRef.value.validate();
diff --git a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/index.vue b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/index.vue
index 849bce6f6..b2d3396bf 100644
--- a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/index.vue
+++ b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/index.vue
@@ -113,18 +113,7 @@
                     <div class="task">
                       <a-button shape="round" type="dashed" @click="stageAdd()">
                         <fs-icon icon="ion:add-circle-outline"></fs-icon>
-                        新任务
-                      </a-button>
-                    </div>
-                  </div>
-                  <div v-for="(item, ii) of pipeline.notifications" :key="ii" class="task-container">
-                    <div class="line">
-                      <div class="flow-line"></div>
-                    </div>
-                    <div class="task">
-                      <a-button shape="round" @click="notificationEdit(item, ii as number)">
-                        <fs-icon icon="ion:notifications"></fs-icon>
-                        【通知】 {{ item.type }}
+                        添加任务
                       </a-button>
                     </div>
                   </div>
@@ -140,13 +129,24 @@
                       </a-button>
                     </div>
                   </div>
+                  <div v-for="(item, ii) of pipeline.notifications" :key="ii" class="task-container">
+                    <div class="line">
+                      <div class="flow-line"></div>
+                    </div>
+                    <div class="task">
+                      <a-button shape="round" @click="notificationEdit(item, ii as number)">
+                        <fs-icon icon="ion:notifications"></fs-icon>
+                        【通知】 {{ item.type }}
+                      </a-button>
+                    </div>
+                  </div>
                 </div>
               </div>
               <div v-else class="stage last-stage">
                 <div class="title">
                   <pi-editable model-value="结束" :disabled="true" />
                 </div>
-                <div class="tasks">
+                <div v-if="pipeline.notifications?.length > 0" class="tasks">
                   <div v-for="(item, index) of pipeline.notifications" :key="index" class="task-container" :class="{ 'first-task': index == 0 }">
                     <div class="line">
                       <div class="flow-line"></div>
@@ -160,6 +160,19 @@
                     </div>
                   </div>
                 </div>
+                <div v-else class="tasks">
+                  <div class="task-container first-task">
+                    <div class="line">
+                      <div class="flow-line"></div>
+                    </div>
+                    <div class="task">
+                      <a-button shape="round" type="dashed">
+                        <fs-icon icon="ion:notifications"></fs-icon>
+                        通知未设置
+                      </a-button>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -414,7 +427,7 @@ export default defineComponent({
       };
 
       function isLastStage(index: number) {
-        return !props.editMode && index === pipeline.value.stages.length - 1 && pipeline.value.notifications?.length < 1;
+        return false;
       }
       return {
         stageAdd,