From 3cbee766a52a4b5c500393020659bc92cb33d626 Mon Sep 17 00:00:00 2001
From: opensnail <598092184@qq.com>
Date: Tue, 30 Apr 2024 17:15:54 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat(sj=5F1.0.0):=20=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E9=80=9A=E7=9F=A5=E4=BA=BA=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/langs/en-us.ts                    |  1 +
 src/locales/langs/zh-cn.ts                    |  1 +
 src/typings/app.d.ts                          |  1 +
 src/views/notify/recipient/index.vue          | 21 +++++-
 .../notify-recipient-detail-drawer.vue        | 74 +++++++++++++++++++
 src/views/notify/scene/index.vue              | 15 +---
 6 files changed, 100 insertions(+), 13 deletions(-)
 create mode 100644 src/views/notify/recipient/modules/notify-recipient-detail-drawer.vue

diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index 98bb323..c78c5c1 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -711,6 +711,7 @@ const local: App.I18n.Schema = {
     },
     notifyRecipient: {
       title: 'Notify Recipient List',
+      detail: 'Notify Recipient Detail',
       recipientName: 'Recipient Name',
       notifyType: 'Notification Type',
       notifyAttribute: 'Attribute Information',
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index 72bfb87..141e8aa 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -707,6 +707,7 @@ const local: App.I18n.Schema = {
     },
     notifyRecipient: {
       title: '通知人列表',
+      detail: '通知人详情',
       recipientName: '接收人名称',
       notifyType: '通知类型',
       notifyAttribute: '属性信息',
diff --git a/src/typings/app.d.ts b/src/typings/app.d.ts
index de7d32b..d89eef3 100644
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@@ -855,6 +855,7 @@ declare namespace App {
         };
         notifyRecipient: {
           title: string;
+          detail: string;
           recipientName: string;
           notifyType: string;
           notifyAttribute: string;
diff --git a/src/views/notify/recipient/index.vue b/src/views/notify/recipient/index.vue
index 27a16b6..6e48d70 100644
--- a/src/views/notify/recipient/index.vue
+++ b/src/views/notify/recipient/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="tsx">
 import { NButton, NPopconfirm, NTag } from 'naive-ui';
+import { ref } from 'vue';
 import { fetchGetNotifyRecipientPageList } from '@/service/api';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
@@ -7,8 +8,13 @@ import { useTable, useTableOperate } from '@/hooks/common/table';
 import { alarmTypeRecord } from '@/constants/business';
 import NotifyRecipientOperateDrawer from './modules/notify-recipient-operate-drawer.vue';
 import NotifyRecipientSearch from './modules/notify-recipient-search.vue';
+import NotifyRecipientDetailDrawer from './modules/notify-recipient-detail-drawer.vue';
 
 const appStore = useAppStore();
+const detailData = ref();
+const detailVisible = defineModel<boolean>('detailVisible', {
+  default: false
+});
 
 const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: fetchGetNotifyRecipientPageList,
@@ -36,7 +42,19 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
       key: 'recipientName',
       title: $t('page.notifyRecipient.recipientName'),
       align: 'left',
-      minWidth: 120
+      minWidth: 120,
+      render: row => {
+        function showDetailDrawer() {
+          detailData.value = row || null;
+          detailVisible.value = true;
+        }
+
+        return (
+          <n-button text tag="a" type="primary" onClick={showDetailDrawer} class="ws-normal">
+            {row.recipientName}
+          </n-button>
+        );
+      }
     },
     {
       key: 'notifyType',
@@ -150,6 +168,7 @@ function edit(id: string) {
         @submitted="getData"
       />
     </NCard>
+    <NotifyRecipientDetailDrawer v-model:visible="detailVisible" :row-data="detailData" />
   </div>
 </template>
 
diff --git a/src/views/notify/recipient/modules/notify-recipient-detail-drawer.vue b/src/views/notify/recipient/modules/notify-recipient-detail-drawer.vue
new file mode 100644
index 0000000..19f27f7
--- /dev/null
+++ b/src/views/notify/recipient/modules/notify-recipient-detail-drawer.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { alarmTypeRecord } from '@/constants/business';
+import { $t } from '@/locales';
+import { tagColor } from '@/utils/common';
+import DingDingNotify = Api.NotifyRecipient.DingDingNotify;
+import EmailNotify = Api.NotifyRecipient.EmailNotify;
+
+defineOptions({
+  name: 'NotifyRecipientDetailDrawer'
+});
+
+interface Props {
+  /** row data */
+  rowData?: Api.NotifyRecipient.NotifyRecipient | null;
+}
+
+const props = defineProps<Props>();
+const notifyAttribute = ref<DingDingNotify | EmailNotify>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+watch(
+  () => props.rowData,
+  () => {
+    console.log(props.rowData);
+    // notifyAttribute.value = JSON.parse(props?.rowData?.notifyAttribute!) || {};
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <OperateDrawer v-model="visible" :title="$t('page.notifyRecipient.detail')">
+    <NDescriptions label-placement="top" bordered :column="2">
+      <NDescriptionsItem :label="$t('page.notifyRecipient.recipientName')" :span="2">
+        {{ rowData?.recipientName }}
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.notifyRecipient.notifyType')" :span="2">
+        <NTag :type="tagColor(rowData?.notifyType!)">{{ $t(alarmTypeRecord[rowData?.notifyType!]) }}</NTag>
+      </NDescriptionsItem>
+      <NDescriptionsItem v-if="rowData?.notifyType !== 2" :label="$t('page.notifyRecipient.notifyType')" :span="2">
+        {{ (notifyAttribute as DingDingNotify)?.webhookUrl }}
+      </NDescriptionsItem>
+      <NDescriptionsItem v-if="rowData?.notifyType !== 2" :label="$t('page.notifyRecipient.ats')" :span="2">
+        <NTag
+          v-for="(item, index) in (notifyAttribute as DingDingNotify)?.ats"
+          :key="index"
+          :type="tagColor(index)"
+          style="margin-right: 10px"
+        >
+          {{ item }}
+        </NTag>
+      </NDescriptionsItem>
+      <NDescriptionsItem v-if="rowData?.notifyType == 2" :label="$t('page.notifyRecipient.tos')" :span="2">
+        <NTag
+          v-for="(item, index) in (notifyAttribute as EmailNotify)?.tos"
+          :key="index"
+          :type="tagColor(index)"
+          style="margin-right: 10px"
+        >
+          {{ item }}
+        </NTag>
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.notifyRecipient.description')" :span="2">
+        {{ rowData?.description }}
+      </NDescriptionsItem>
+    </NDescriptions>
+  </OperateDrawer>
+</template>
+
+<style scoped></style>
diff --git a/src/views/notify/scene/index.vue b/src/views/notify/scene/index.vue
index 33bf9db..05bc1b0 100644
--- a/src/views/notify/scene/index.vue
+++ b/src/views/notify/scene/index.vue
@@ -8,6 +8,7 @@ import NotifyConfigOperateDrawer from '@/views/notify/scene/modules/notify-confi
 import NotifyConfigSearch from '@/views/notify/scene/modules/notify-config-search.vue';
 import StatusSwitch from '@/components/common/status-switch.vue';
 import { jobNotifyScene, retryNotifyScene } from '@/constants/business';
+import { tagColor } from '@/utils/common';
 
 const appStore = useAppStore();
 
@@ -74,24 +75,14 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
           return null;
         }
 
-        const tagMap: Record<number, NaiveUI.ThemeColor> = {
-          1: 'warning',
-          2: 'info',
-          3: 'warning',
-          4: 'success'
-        };
-
-        const index = row.notifyScene! % 4;
-
         if (row.systemTaskType === 1) {
           const label = $t(retryNotifyScene[row.notifyScene! as Api.NotifyConfig.RetryNotifyScene]);
-          const type = tagMap[index as Api.NotifyConfig.RetryNotifyScene];
-          return <NTag type={type}>{label}</NTag>;
+          return <NTag type={tagColor(row.notifyScene)}>{label}</NTag>;
         }
 
         if (row.systemTaskType === 3) {
           const label = $t(jobNotifyScene[row.notifyScene! as Api.NotifyConfig.JobNotifyScene]);
-          return <NTag type={tagMap[row.notifyScene!]}>{label}</NTag>;
+          return <NTag type={tagColor(row.notifyScene)}>{label}</NTag>;
         }
 
         return null;

From b915522ca6fdb2adbebc7170fb4bbfc9efedcfe4 Mon Sep 17 00:00:00 2001
From: opensnail <598092184@qq.com>
Date: Tue, 30 Apr 2024 17:18:49 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat(sj=5F1.0.0):=20=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E9=80=9A=E7=9F=A5=E4=BA=BA=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../recipient/modules/notify-recipient-detail-drawer.vue       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/notify/recipient/modules/notify-recipient-detail-drawer.vue b/src/views/notify/recipient/modules/notify-recipient-detail-drawer.vue
index 19f27f7..45ac9c8 100644
--- a/src/views/notify/recipient/modules/notify-recipient-detail-drawer.vue
+++ b/src/views/notify/recipient/modules/notify-recipient-detail-drawer.vue
@@ -26,7 +26,8 @@ watch(
   () => props.rowData,
   () => {
     console.log(props.rowData);
-    // notifyAttribute.value = JSON.parse(props?.rowData?.notifyAttribute!) || {};
+    const rowData = props.rowData?.notifyAttribute;
+    notifyAttribute.value = JSON.parse(rowData!) || {};
   },
   { immediate: true }
 );