feat(sj_1.0.0): 优化通知人列表和查询

2024-04-19 12:33:18 +08:00 · 2024-04-19 12:33:18 +08:00 · 8095eb4295
commit 8095eb4295
parent 6a2c763663
12 changed files with 71 additions and 45 deletions
--- a/src/constants/business.ts
+++ b/src/constants/business.ts
@ -42,3 +42,11 @@ export const idGeneratorModeRecord: Record<Api.GroupConfig.IdGeneratorModeType,
  '1': 'page.groupConfig.idMode.segment',
  '2': 'page.groupConfig.idMode.idWorker'
 };
+
+export const alarmTypeRecord: Record<Api.NotifyRecipient.AlarmType, App.I18n.I18nKey> = {
+  '1': 'page.notifyRecipient.dingDing',
+  '2': 'page.notifyRecipient.email',
+  '3': 'page.notifyRecipient.weCom',
+  '4': 'page.notifyRecipient.lark'
+};
+export const alarmTypeRecordOptions = transformRecordToOption(alarmTypeRecord);
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@ -549,25 +549,29 @@ const local: App.I18n.Schema = {
    },
    notifyRecipient: {
      title: 'Notify Recipient List',
-      recipientName: 'Recipient name',
-      notifyType: 'Notification type',
-      notifyAttribute: 'Attribute information',
-      description: 'Describe',
+      recipientName: 'Recipient Name',
+      notifyType: 'Notification Type',
+      notifyAttribute: 'Attribute Information',
+      description: 'Description',
      form: {
-        description: 'Please enter Describe',
-        notifyAttribute: 'Please enter Attribute information',
-        recipientName: 'Please enter Recipient name',
-        notifyType: 'lease select Notification type',
-        dingdingAts: "请输入被{'@'}人手机号或钉钉号",
-        qiYeWechatAts: "请输入被{'@'}人企业微信用户id",
-        larkAts: "请输入被{'@'}人open_id",
-        webhookUrl: '请输入URL'
+        description: 'Please enter description',
+        notifyAttribute: 'Please enter attribute information',
+        recipientName: 'Please enter recipient name',
+        notifyType: 'Please select notification type',
+        dingDingAts: "Please enter the {'@'} phone number or DingTalk ID",
+        weComAts: "Please enter the {'@'} Enterprise WeChat user ID",
+        larkAts: "Please enter the {'@'} open_id",
+        webhookUrl: 'Please enter URL'
      },
-      addNotifyRecipient: 'Add Notify recipients',
-      editNotifyRecipient: 'Add Notify recipients',
-      ats: "{'@'}通知人",
-      webhookUrl: '通知地址',
-      tos: '通知人邮箱地址'
+      addNotifyRecipient: 'Add Notify Recipient',
+      editNotifyRecipient: 'Edit Notify Recipient',
+      ats: "{'@'} Notification Recipient",
+      webhookUrl: 'Notification Address',
+      tos: 'Recipient Email Address',
+      dingDing: 'DingTalk',
+      email: 'Email',
+      weCom: 'WeCom',
+      lark: 'Lark'
    }
  },
  form: {
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@ -544,7 +544,7 @@ const local: App.I18n.Schema = {
      editNotifyConfig: '编辑告警通知'
    },
    notifyRecipient: {
-      title: 'NotifyRecipient 列表',
+      title: '通知人列表',
      recipientName: '接收人名称',
      notifyType: '通知类型',
      notifyAttribute: '属性信息',
@ -554,8 +554,8 @@ const local: App.I18n.Schema = {
        notifyAttribute: '请输入属性信息',
        recipientName: '请输入接收人名称',
        notifyType: '请选择通知类型',
-        dingdingAts: "请输入被{'@'}人手机号或钉钉号",
-        qiYeWechatAts: "请输入被{'@'}人企业微信用户id",
+        dingDingAts: "请输入被{'@'}人手机号或钉钉号",
+        weComAts: "请输入被{'@'}人企业微信用户id",
        larkAts: "请输入被{'@'}人open_id",
        webhookUrl: '请输入URL'
      },
@ -563,7 +563,11 @@ const local: App.I18n.Schema = {
      editNotifyRecipient: '编辑通知接收人',
      ats: "{'@'}通知人",
      webhookUrl: '通知地址',
-      tos: '通知人邮箱地址'
+      tos: '通知人邮箱地址',
+      dingDing: '钉钉',
+      email: '邮箱',
+      weCom: '企业微信',
+      lark: '飞书'
    }
  },
  form: {
--- a/src/typings/api.d.ts
+++ b/src/typings/api.d.ts
@ -590,6 +590,6 @@ declare namespace Api {
    type NotifyRecipientList = Common.PaginatingQueryRecord<NotifyRecipient>;

    /** 1: 钉钉通知 2: 邮件通知 3: 企业通知 4: 飞书 */
-    type AlarmType = 1 | 2 | 3 | 4;
+    type AlarmType = '1' | '2' | '3' | '4';
  }
 }
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@ -729,8 +729,8 @@ declare namespace App {
            notifyAttribute: string;
            recipientName: string;
            notifyType: string;
-            dingdingAts: string;
-            qiYeWechatAts: string;
+            dingDingAts: string;
+            weComAts: string;
            larkAts: string;
            webhookUrl: string;
          };
@ -739,6 +739,10 @@ declare namespace App {
          ats: string;
          webhookUrl: string;
          tos: string;
+          dingDing: string;
+          email: string;
+          weCom: string;
+          lark: string;
        };
      };
      form: {
--- a/src/views/notify/recipient/index.vue
+++ b/src/views/notify/recipient/index.vue
@ -1,9 +1,10 @@
 <script setup lang="tsx">
-import { NButton, NPopconfirm } from 'naive-ui';
+import { NButton, NPopconfirm, NTag } from 'naive-ui';
 import { fetchGetNotifyRecipientList } from '@/service/api';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 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';

@ -41,13 +42,11 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
      key: 'notifyType',
      title: $t('page.notifyRecipient.notifyType'),
      align: 'left',
-      minWidth: 120
-    },
-    {
-      key: 'notifyAttribute',
-      title: $t('page.notifyRecipient.notifyAttribute'),
-      align: 'left',
-      minWidth: 120
+      minWidth: 120,
+      render: row => {
+        const label = $t(alarmTypeRecord[row.notifyType!]);
+        return <NTag type="primary">{label}</NTag>;
+      }
    },
    {
      key: 'description',
--- a/src/views/notify/recipient/modules/dingding-form.vue
+++ b/src/views/notify/recipient/modules/dingding-form.vue
@ -27,7 +27,7 @@ function createDefaultModel(): Model {
  return {
    id: '',
    recipientName: '',
-    notifyType: 1,
+    notifyType: '1',
    webhookUrl: '',
    ats: [],
    description: ''
--- a/src/views/notify/recipient/modules/email-form.vue
+++ b/src/views/notify/recipient/modules/email-form.vue
@ -24,7 +24,7 @@ function createDefaultModel(): Model {
  return {
    id: '',
    recipientName: '',
-    notifyType: 2,
+    notifyType: '2',
    tos: [],
    description: ''
  };
--- a/src/views/notify/recipient/modules/lark-form.vue
+++ b/src/views/notify/recipient/modules/lark-form.vue
@ -27,7 +27,7 @@ function createDefaultModel(): Model {
  return {
    id: '',
    recipientName: '',
-    notifyType: 4,
+    notifyType: '4',
    webhookUrl: '',
    ats: [],
    description: ''
--- a/src/views/notify/recipient/modules/notify-recipient-operate-drawer.vue
+++ b/src/views/notify/recipient/modules/notify-recipient-operate-drawer.vue
@ -7,7 +7,7 @@ import { fetchAddNotifyRecipient, fetchEditNotifyRecipient } from '@/service/api
 import DingDingForm from './dingding-form.vue';
 import LarkForm from './lark-form.vue';
 import EmailForm from './email-form.vue';
-import QiyeWechtForm from './qiye-wecht-form.vue';
+import WeComForm from './wecom-form.vue';

 defineOptions({
  name: 'NotifyRecipientOperateDrawer'
@ -100,16 +100,16 @@ watch(visible, () => {
 <template>
  <OperateDrawer v-model="visible" :title="title" @handle-submit="handleSubmit">
    <NTabs v-model:value="defaultTabPane" type="segment" animated>
-      <NTabPane name="1" tab="钉钉">
+      <NTabPane name="1" :tab="$t('page.notifyRecipient.dingDing')">
        <DingDingForm ref="CommonRef" @fetch-add="commonFetchAdd" @fetch-update="commonFetchUpdate" />
      </NTabPane>
-      <NTabPane name="2" tab="邮箱">
+      <NTabPane name="2" :tab="$t('page.notifyRecipient.email')">
        <EmailForm ref="CommonRef" @fetch-add="commonFetchAdd" @fetch-update="commonFetchUpdate" />
      </NTabPane>
-      <NTabPane name="3" tab="企业微信">
-        <QiyeWechtForm ref="CommonRef" @fetch-add="commonFetchAdd" @fetch-update="commonFetchUpdate" />
+      <NTabPane name="3" :tab="$t('page.notifyRecipient.weCom')">
+        <WeComForm ref="CommonRef" @fetch-add="commonFetchAdd" @fetch-update="commonFetchUpdate" />
      </NTabPane>
-      <NTabPane name="4" tab="飞书">
+      <NTabPane name="4" :tab="$t('page.notifyRecipient.lark')">
        <LarkForm ref="CommonRef" @fetch-add="commonFetchAdd" @fetch-update="commonFetchUpdate" />
      </NTabPane>
    </NTabs>
--- a/src/views/notify/recipient/modules/notify-recipient-search.vue
+++ b/src/views/notify/recipient/modules/notify-recipient-search.vue
@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { $t } from '@/locales';
 import SearchForm from '@/components/common/search-form.vue';
+import { alarmTypeRecordOptions } from '@/constants/business';
+import { translateOptions } from '@/utils/common';

 defineOptions({
  name: 'NotifyRecipientSearch'
@ -36,7 +38,12 @@ function search() {
      <NInput v-model:value="model.recipientName" :placeholder="$t('page.notifyRecipient.form.recipientName')" />
    </NFormItemGi>
    <NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyRecipient.notifyType')" path="userName" class="pr-24px">
-      <NSelect v-model:value="model.notifyType" :placeholder="$t('page.notifyRecipient.notifyType')" clearable />
+      <NSelect
+        v-model:value="model.notifyType"
+        :options="translateOptions(alarmTypeRecordOptions)"
+        :placeholder="$t('page.notifyRecipient.notifyType')"
+        clearable
+      />
    </NFormItemGi>
  </SearchForm>
 </template>
--- a/src/views/notify/recipient/modules/qiye-wecht-form.vue
+++ b/src/views/notify/recipient/modules/qiye-wecht-form.vue
@ -27,7 +27,7 @@ function createDefaultModel(): Model {
  return {
    id: '',
    recipientName: '',
-    notifyType: 3,
+    notifyType: '3',
    webhookUrl: '',
    ats: [],
    description: ''
@ -96,7 +96,7 @@ defineExpose({
            <template #trigger>
              {{ $t('page.notifyRecipient.ats') }}
            </template>
-            {{ $t('page.notifyRecipient.form.qiYeWechatAts') }}
+            {{ $t('page.notifyRecipient.form.weComAts') }}
          </NTooltip>
        </a>
      </template>