From 5450246f064207b6773bbd30de0dd15fd0cccc7a Mon Sep 17 00:00:00 2001
From: xiaojunnuo <xiaojunnuo@qq.com>
Date: Sat, 23 Nov 2024 00:25:30 +0800
Subject: [PATCH] chore:

---
 .../certd/access/access-selector/index.vue    | 44 +++++++-----
 .../src/views/certd/history/crud.tsx          |  1 -
 .../src/views/certd/notification/common.tsx   |  5 ++
 .../notification-selector/index.vue           | 68 +++++++++++--------
 .../notification-selector/modal/crud.tsx      |  2 +-
 .../notification-selector/modal/index.vue     | 23 +------
 .../src/views/certd/pipeline/detail.vue       |  1 +
 .../component/notification-form/index.vue     | 66 +++++++++++++++---
 .../views/certd/pipeline/pipeline/index.vue   |  8 +--
 9 files changed, 133 insertions(+), 85 deletions(-)

diff --git a/packages/ui/certd-client/src/views/certd/access/access-selector/index.vue b/packages/ui/certd-client/src/views/certd/access/access-selector/index.vue
index 19ccb499..0c3a1dac 100644
--- a/packages/ui/certd-client/src/views/certd/access/access-selector/index.vue
+++ b/packages/ui/certd-client/src/views/certd/access/access-selector/index.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="access-selector">
-    <span v-if="target.name" class="mr-5 cd-flex-inline">
+    <span v-if="target?.name" class="mr-5 cd-flex-inline">
       <a-tag class="mr-5" color="green">{{ target.name }}</a-tag>
       <fs-icon class="cd-icon-button" icon="ion:close-circle-outline" @click="clear"></fs-icon>
     </span>
     <span v-else class="mlr-5 text-gray">{{ placeholder }}</span>
-    <a-button class="ml-5" :size="size" @click="chooseForm.open">选择</a-button>
+    <a-button class="ml-5" :disabled="disabled" :size="size" @click="chooseForm.open">选择</a-button>
     <a-form-item-rest v-if="chooseForm.show">
       <a-modal v-model:open="chooseForm.show" title="选择授权提供者" width="900px" @ok="chooseForm.ok">
         <div style="height: 400px; position: relative">
@@ -45,9 +45,13 @@ export default defineComponent({
     from: {
       type: String, //user | sys
       default: "user"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "change", "selectedChange"],
   setup(props, ctx) {
     const api = createAccessApi(props.from);
 
@@ -61,13 +65,27 @@ export default defineComponent({
     }
 
     function clear() {
-      if (pipeline && pipeline.userId !== target.value.userId) {
+      if (props.disabled) {
+        return;
+      }
+      emitValue(null);
+    }
+
+    async function emitValue(value) {
+      if (pipeline?.value && target?.value && pipeline.value.userId !== target.value.userId) {
         message.error("对不起，您不能修改他人流水线的授权");
         return;
       }
-      selectedId.value = "";
-      target.value = null;
+      if (value == null) {
+        selectedId.value = "";
+        target.value = null;
+      } else {
+        selectedId.value = value;
+        await refreshTarget(selectedId.value);
+      }
+      ctx.emit("change", selectedId.value);
       ctx.emit("update:modelValue", selectedId.value);
+      ctx.emit("selectedChange", target.value);
     }
 
     watch(
@@ -76,7 +94,7 @@ export default defineComponent({
       },
       async (value) => {
         selectedId.value = null;
-        target.value = {};
+        target.value = null;
         if (value == null) {
           return;
         }
@@ -113,17 +131,9 @@ export default defineComponent({
         chooseForm.show = true;
       },
       ok: () => {
-        chooseForm.show = false;
         console.log("choose ok:", selectedId.value);
-        refreshTarget(selectedId.value);
-
-        if (pipeline && pipeline.userId !== target.value.userId) {
-          message.error("对不起，您不能修改他人流水线的授权");
-          return;
-        }
-
-        ctx.emit("change", selectedId.value);
-        ctx.emit("update:modelValue", selectedId.value);
+        emitValue(selectedId.value);
+        chooseForm.show = false;
       }
     });
 
diff --git a/packages/ui/certd-client/src/views/certd/history/crud.tsx b/packages/ui/certd-client/src/views/certd/history/crud.tsx
index 4b2c5c60..837f6262 100644
--- a/packages/ui/certd-client/src/views/certd/history/crud.tsx
+++ b/packages/ui/certd-client/src/views/certd/history/crud.tsx
@@ -138,7 +138,6 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
           column: {
             width: 300,
             cellRender: ({ row, value }) => {
-              debugger;
               return (
                 <router-link to={{ path: "/certd/pipeline/detail", query: { id: row.pipelineId, editMode: false, historyId: row.id } }}>{value}</router-link>
               );
diff --git a/packages/ui/certd-client/src/views/certd/notification/common.tsx b/packages/ui/certd-client/src/views/certd/notification/common.tsx
index ff92ecd5..296bf791 100644
--- a/packages/ui/certd-client/src/views/certd/notification/common.tsx
+++ b/packages/ui/certd-client/src/views/certd/notification/common.tsx
@@ -86,6 +86,11 @@ export function getCommonColumnDefine(crudExpose: any, typeRef: any, api: any) {
           color: "auto"
         }
       },
+      editForm: {
+        component: {
+          disabled: false
+        }
+      },
       form: {
         component: {
           disabled: false,
diff --git a/packages/ui/certd-client/src/views/certd/notification/notification-selector/index.vue b/packages/ui/certd-client/src/views/certd/notification/notification-selector/index.vue
index c6dc9bcf..5a0f720c 100644
--- a/packages/ui/certd-client/src/views/certd/notification/notification-selector/index.vue
+++ b/packages/ui/certd-client/src/views/certd/notification/notification-selector/index.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="notification-selector">
-    <span v-if="target.name" class="mr-5 cd-flex-inline">
+    <span v-if="target?.name" class="mr-5 cd-flex-inline">
       <a-tag class="mr-5" color="green">{{ target.name }}</a-tag>
       <fs-icon class="cd-icon-button" icon="ion:close-circle-outline" @click="clear"></fs-icon>
     </span>
     <span v-else class="mlr-5 text-gray">{{ placeholder }}</span>
-    <a-button class="ml-5" :size="size" @click="chooseForm.open">选择</a-button>
+    <a-button class="ml-5" :disabled="disabled" :size="size" @click="chooseForm.open">选择</a-button>
     <a-form-item-rest v-if="chooseForm.show">
       <a-modal v-model:open="chooseForm.show" title="选择通知" width="900px" @ok="chooseForm.ok">
         <div style="height: 400px; position: relative">
-          <cert-notification-modal v-model="selectedId" :type="type" :from="from"></cert-notification-modal>
+          <cert-notification-modal v-model="selectedId"></cert-notification-modal>
         </div>
       </a-modal>
     </a-form-item-rest>
@@ -41,9 +41,13 @@ export default defineComponent({
     size: {
       type: String,
       default: "middle"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "selectedChange", "change"],
   setup(props, ctx) {
     const api = createApi();
 
@@ -57,13 +61,27 @@ export default defineComponent({
     }
 
     function clear() {
-      if (pipeline && pipeline.userId !== target.value.userId) {
+      if (props.disabled) {
+        return;
+      }
+      emitValue(null);
+    }
+
+    async function emitValue(value) {
+      if (pipeline?.value && target?.value && pipeline.value.userId !== target.value.userId) {
         message.error("对不起，您不能修改他人流水线的通知");
         return;
       }
-      selectedId.value = "";
-      target.value = null;
+      if (value == null) {
+        selectedId.value = "";
+        target.value = null;
+      } else {
+        selectedId.value = value;
+        await refreshTarget(selectedId.value);
+      }
+      ctx.emit("change", selectedId.value);
       ctx.emit("update:modelValue", selectedId.value);
+      ctx.emit("selectedChange", target.value);
     }
 
     watch(
@@ -72,7 +90,7 @@ export default defineComponent({
       },
       async (value) => {
         selectedId.value = null;
-        target.value = {};
+        target.value = null;
         if (value == null) {
           return;
         }
@@ -88,17 +106,17 @@ export default defineComponent({
     async function refreshProviderDefine(type) {
       providerDefine.value = await api.GetProviderDefine(type);
     }
-    watch(
-      () => {
-        return props.type;
-      },
-      async (value) => {
-        await refreshProviderDefine(value);
-      },
-      {
-        immediate: true
-      }
-    );
+    // watch(
+    //   () => {
+    //     return props.type;
+    //   },
+    //   async (value) => {
+    //     await refreshProviderDefine(value);
+    //   },
+    //   {
+    //     immediate: true
+    //   }
+    // );
 
     //当不在pipeline中编辑时，可能为空
     const pipeline = inject("pipeline", null);
@@ -109,17 +127,9 @@ export default defineComponent({
         chooseForm.show = true;
       },
       ok: () => {
-        chooseForm.show = false;
         console.log("choose ok:", selectedId.value);
-        refreshTarget(selectedId.value);
-
-        if (pipeline && pipeline.userId !== target.value.userId) {
-          message.error("对不起，您不能修改他人流水线的授权");
-          return;
-        }
-
-        ctx.emit("change", selectedId.value);
-        ctx.emit("update:modelValue", selectedId.value);
+        emitValue(selectedId.value);
+        chooseForm.show = false;
       }
     });
 
diff --git a/packages/ui/certd-client/src/views/certd/notification/notification-selector/modal/crud.tsx b/packages/ui/certd-client/src/views/certd/notification/notification-selector/modal/crud.tsx
index dc11f819..3c62890c 100644
--- a/packages/ui/certd-client/src/views/certd/notification/notification-selector/modal/crud.tsx
+++ b/packages/ui/certd-client/src/views/certd/notification/notification-selector/modal/crud.tsx
@@ -41,7 +41,7 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
   const typeRef = ref("");
   context.typeRef = typeRef;
   const commonColumnsDefine = getCommonColumnDefine(crudExpose, typeRef, api);
-  commonColumnsDefine.type.form.component.disabled = true;
+  commonColumnsDefine.type.editForm.component.disabled = true;
   return {
     typeRef,
     crudOptions: {
diff --git a/packages/ui/certd-client/src/views/certd/notification/notification-selector/modal/index.vue b/packages/ui/certd-client/src/views/certd/notification/notification-selector/modal/index.vue
index 5af8aeb9..89349511 100644
--- a/packages/ui/certd-client/src/views/certd/notification/notification-selector/modal/index.vue
+++ b/packages/ui/certd-client/src/views/certd/notification/notification-selector/modal/index.vue
@@ -13,10 +13,6 @@ import { createApi } from "../../api";
 export default defineComponent({
   name: "CertNotificationModal",
   props: {
-    type: {
-      type: String,
-      default: ""
-    },
     modelValue: {}
   },
   emits: ["update:modelValue"],
@@ -24,25 +20,8 @@ export default defineComponent({
     const api = createApi();
     const context: any = { props, ctx, api };
     const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
-
-    // 你可以调用此方法，重新初始化crud配置
-    function onTypeChanged(value: any) {
-      context.typeRef.value = value;
-      crudExpose.setSearchFormData({ form: { type: value }, mergeForm: true });
-      crudExpose.doRefresh();
-    }
-    watch(
-      () => {
-        return props.type;
-      },
-      (value) => {
-        console.log("access type changed:", value);
-        onTypeChanged(value);
-      }
-    );
-    // 页面打开后获取列表数据
     onMounted(() => {
-      onTypeChanged(props.type);
+      crudExpose.doRefresh();
     });
 
     return {
diff --git a/packages/ui/certd-client/src/views/certd/pipeline/detail.vue b/packages/ui/certd-client/src/views/certd/pipeline/detail.vue
index 6497c77b..e9b47c17 100644
--- a/packages/ui/certd-client/src/views/certd/pipeline/detail.vue
+++ b/packages/ui/certd-client/src/views/certd/pipeline/detail.vue
@@ -30,6 +30,7 @@ const pipelineOptions: PipelineOptions = {
     return {
       pipeline: {
         id: detail.pipeline.id,
+        userId: detail.pipeline.userId,
         stages: [],
         triggers: [],
         ...JSON.parse(detail.pipeline.content || "{}")
diff --git a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/notification-form/index.vue b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/notification-form/index.vue
index abf8c066..cce9ba40 100644
--- a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/notification-form/index.vue
+++ b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/component/notification-form/index.vue
@@ -19,6 +19,7 @@
       <pi-container>
         <a-form ref="notificationFormRef" class="notification-form" :model="currentNotification" :label-col="labelCol" :wrapper-col="wrapperCol">
           <fs-form-item
+            v-if="currentNotification.type === 'email'"
             v-model="currentNotification.type"
             :item="{
               title: '类型',
@@ -28,7 +29,10 @@
                 name: 'a-select',
                 vModel: 'value',
                 disabled: !editMode,
-                options: [{ value: 'email', label: '邮件' }]
+                options: [
+                  { value: 'email', label: '邮件' },
+                  { value: 'other', label: '其他通知方式' }
+                ]
               },
               rules: [{ required: true, message: '此项必填' }]
             }"
@@ -47,15 +51,35 @@
                 options: [
                   { value: 'start', label: '开始时' },
                   { value: 'success', label: '成功时' },
-                  { value: 'turnToSuccess', label: '错误转成功时' },
-                  { value: 'error', label: '错误时' }
+                  { value: 'turnToSuccess', label: '失败转成功时' },
+                  { value: 'error', label: '失败时' }
                 ]
               },
-              helper: `建议仅选择'错误时'和'错误转成功'两种即可`,
+              helper: `建议仅选择'失败时'和'失败转成功'两种即可`,
+              rules: [{ required: true, message: '此项必填' }]
+            }"
+          />
+          <pi-notification-form-email
+            v-if="currentNotification.type === 'email'"
+            ref="optionsRef"
+            v-model:options="currentNotification.options"
+          ></pi-notification-form-email>
+
+          <fs-form-item
+            v-else
+            v-model="currentNotification.notificationId"
+            :item="{
+              title: '通知配置',
+              key: 'type',
+              component: {
+                disabled: !editMode,
+                name: NotificationSelector,
+                onSelectedChange
+              },
+              helper: '请选择通知方式',
               rules: [{ required: true, message: '此项必填' }]
             }"
           />
-          <pi-notification-form-email ref="optionsRef" v-model:options="currentNotification.options"></pi-notification-form-email>
         </a-form>
 
         <template #footer>
@@ -70,14 +94,16 @@
 
 <script lang="ts">
 import { Modal } from "ant-design-vue";
-import { ref } from "vue";
+import { ref, Ref } from "vue";
 import * as _ from "lodash-es";
 import { nanoid } from "nanoid";
 import PiNotificationFormEmail from "./pi-notification-form-email.vue";
+import NotificationSelector from "/@/views/certd/notification/notification-selector/index.vue";
 
 export default {
   name: "PiNotificationForm",
-  components: { PiNotificationFormEmail },
+  // eslint-disable-next-line vue/no-unused-components
+  components: { NotificationSelector, PiNotificationFormEmail },
   props: {
     editMode: {
       type: Boolean,
@@ -93,7 +119,7 @@ export default {
     function useNotificationForm() {
       const mode = ref("add");
       const callback = ref();
-      const currentNotification = ref({ type: undefined, when: [], options: {} });
+      const currentNotification: Ref<any> = ref({ type: undefined, when: [], options: {}, notificationId: undefined, title: "" });
       const currentPlugin = ref({});
       const notificationFormRef = ref(null);
       const notificationDrawerVisible = ref(false);
@@ -112,6 +138,13 @@ export default {
             required: true,
             message: "请选择通知时机"
           }
+        ],
+        notificationId: [
+          {
+            type: "number",
+            required: true,
+            message: "请选择通知配置"
+          }
         ]
       });
 
@@ -135,7 +168,7 @@ export default {
 
       const notificationAdd = (emit: any) => {
         mode.value = "add";
-        const notification = { id: nanoid(), type: "email", when: ["error"] };
+        const notification = { id: nanoid(), type: "custom", when: ["error", "turnToSuccess"] };
         notificationOpen(notification, emit);
       };
 
@@ -150,7 +183,10 @@ export default {
       };
 
       const notificationSave = async (e: any) => {
-        currentNotification.value.options = await optionsRef.value.getValue();
+        if (optionsRef.value) {
+          currentNotification.value.options = await optionsRef.value.getValue();
+        }
+
         console.log("currentNotificationSave", currentNotification.value);
         try {
           await notificationFormRef.value.validate();
@@ -177,8 +213,13 @@ export default {
       const blankFn = () => {
         return {};
       };
+
+      function onSelectedChange(node: any) {
+        currentNotification.value.title = node?.name || null;
+      }
       return {
         notificationFormRef,
+        onSelectedChange,
         mode,
         notificationAdd,
         notificationEdit,
@@ -201,6 +242,11 @@ export default {
       labelCol: { span: 6 },
       wrapperCol: { span: 16 }
     };
+  },
+  computed: {
+    NotificationSelector() {
+      return NotificationSelector;
+    }
   }
 };
 </script>
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 0b1bd4e0..6ff6ae47 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
@@ -181,7 +181,7 @@
                       <div class="task">
                         <a-button shape="round" @click="notificationEdit(item, ii as number)">
                           <fs-icon icon="ion:notifications"></fs-icon>
-                          【通知】 {{ item.type }}
+                          【通知】 {{ item.title || item.type }}
                         </a-button>
                       </div>
                     </div>
@@ -199,8 +199,7 @@
                       <div class="task">
                         <a-button shape="round" @click="notificationEdit(item, index)">
                           <fs-icon icon="ion:notifications"></fs-icon>
-
-                          【通知】 {{ item.type }}
+                          【通知】 {{ item.title || item.type }}
                         </a-button>
                       </div>
                     </div>
@@ -883,8 +882,7 @@ export default defineComponent({
                 &.in-edit {
                   margin-right: 28px;
                 }
-                &.disabled{
-
+                &.disabled {
                 }
               }