feat(sj_1.0.0): 接入飞书、企业微信、邮箱

src/locales/langs/en-us.ts

@@ -566,7 +566,8 @@ const local: App.I18n.Schema = {
       addNotifyRecipient: 'Add Notify recipients',
       editNotifyRecipient: 'Add Notify recipients',
       ats: "{'@'}通知人",
-      webhookUrl: '通知地址'
+      webhookUrl: '通知地址',
+      tos: '通知人邮箱地址'
     }
   },
   form: {

src/locales/langs/zh-cn.ts

@@ -562,7 +562,8 @@ const local: App.I18n.Schema = {
       addNotifyRecipient: '新增通知接收人',
       editNotifyRecipient: '编辑通知接收人',
       ats: "{'@'}通知人",
-      webhookUrl: '通知地址'
+      webhookUrl: '通知地址',
+      tos: '通知人邮箱地址'
     }
   },
   form: {

src/typings/api.d.ts

@@ -568,11 +568,18 @@ declare namespace Api {
     type DingDingNotify = Common.CommonRecord<{
       /** 接收人名称 */
       webhookUrl: string;
-      /** 通知类型 */
+      /** @的用户 */
       ats: string[];
     }> &
       NotifyRecipient;
 
+    /** email Notify */
+    type EmailNotify = Common.CommonRecord<{
+      /** 通知人 */
+      tos: string[];
+    }> &
+      NotifyRecipient;
+
     /** notifyRecipient search params */
     type NotifyRecipientParams = CommonType.RecordNullable<
       Pick<Api.NotifyRecipient.NotifyRecipient, 'recipientName' | 'notifyType' | 'notifyAttribute' | 'description'> &

src/typings/app.d.ts

@@ -738,6 +738,7 @@ declare namespace App {
           editNotifyRecipient: string;
           ats: string;
           webhookUrl: string;
+          tos: string;
         };
       };
       form: {

src/typings/components.d.ts

@@ -59,6 +59,7 @@ declare module 'vue' {
     NFormItemGi: typeof import('naive-ui')['NFormItemGi']
     NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
+    NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
     NInputGroup: typeof import('naive-ui')['NInputGroup']
     NInputNumber: typeof import('naive-ui')['NInputNumber']

src/views/notify/recipient/modules/dingding-form.vue

@@ -62,13 +62,36 @@ defineExpose({
 <template>
   <NForm ref="formRef" :model="model" :rules="rules">
     <NFormItem :label="$t('page.notifyRecipient.recipientName')" path="recipientName">
-      <NInput v-model:value="model.recipientName" :placeholder="$t('page.notifyRecipient.form.recipientName')" />
+      <NInput
+        v-model:value="model.recipientName"
+        :placeholder="$t('page.notifyRecipient.form.recipientName')"
+        clearable
+      />
     </NFormItem>
     <NFormItem :label="$t('page.notifyRecipient.webhookUrl')" path="webhookUrl">
-      <NInput v-model:value="model.webhookUrl" :placeholder="$t('page.notifyRecipient.form.webhookUrl')" />
+      <NInput v-model:value="model.webhookUrl" :placeholder="$t('page.notifyRecipient.form.webhookUrl')" clearable />
     </NFormItem>
     <NFormItem :label="$t('page.notifyRecipient.ats')" path="ats">
-      <NDynamicTags v-model:value="model.ats" :placeholder="$t('page.notifyRecipient.form.dingdingAts')" />
+      <template #label>
+        <a href="#">
+          <NTooltip trigger="hover">
+            <template #trigger>
+              {{ $t('page.notifyRecipient.ats') }}
+            </template>
+            {{ $t('page.notifyRecipient.form.dingdingAts') }}
+          </NTooltip>
+        </a>
+      </template>
+      <NDynamicTags v-model:value="model.ats" />
+    </NFormItem>
+    <NFormItem :label="$t('page.notifyRecipient.description')" path="description">
+      <NInput
+        v-model:value="model.description"
+        type="textarea"
+        :placeholder="$t('page.notifyRecipient.form.description')"
+        round
+        clearable
+      />
     </NFormItem>
   </NForm>
 </template>

src/views/notify/recipient/modules/email-form.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'LarkForm'
+});
+
+interface Emits {
+  (e: 'fetchAdd', model: Api.NotifyRecipient.NotifyRecipient): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const { formRef, validate } = useNaiveForm();
+const { defaultRequiredRule } = useFormRules();
+
+type Model = Pick<Api.NotifyRecipient.EmailNotify, 'id' | 'recipientName' | 'notifyType' | 'tos' | 'description'>;
+const model: Model = reactive(createDefaultModel());
+
+function createDefaultModel(): Model {
+  return {
+    id: '',
+    recipientName: '',
+    notifyType: 2,
+    tos: [],
+    description: ''
+  };
+}
+
+type RuleKey = Extract<keyof Model, 'recipientName' | 'notifyType' | 'tos' | 'description'>;
+
+const rules: Record<RuleKey, App.Global.FormRule> = {
+  recipientName: defaultRequiredRule,
+  notifyType: defaultRequiredRule,
+  description: defaultRequiredRule,
+  tos: defaultRequiredRule
+};
+
+const buildNotifyAttribute = (tos: string[]) => {
+  return JSON.stringify({ tos });
+};
+
+async function save() {
+  await validate();
+  const { id, recipientName, notifyType, tos, description } = model;
+  const notifyAttribute = buildNotifyAttribute(tos);
+  emit('fetchAdd', { id, recipientName, notifyType, notifyAttribute, description });
+}
+
+defineExpose({
+  save
+});
+</script>
+
+<template>
+  <NForm ref="formRef" :model="model" :rules="rules">
+    <NFormItem :label="$t('page.notifyRecipient.recipientName')" path="recipientName">
+      <NInput v-model:value="model.recipientName" :placeholder="$t('page.notifyRecipient.form.recipientName')" />
+    </NFormItem>
+    <NFormItem :label="$t('page.notifyRecipient.tos')" path="tos">
+      <NDynamicTags v-model:value="model.tos" />
+    </NFormItem>
+    <NFormItem :label="$t('page.notifyRecipient.description')" path="description">
+      <NInput
+        v-model:value="model.description"
+        type="textarea"
+        :placeholder="$t('page.notifyRecipient.form.description')"
+        round
+        clearable
+      />
+    </NFormItem>
+  </NForm>
+</template>
+
+<style scoped></style>

src/views/notify/recipient/modules/lark-form.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'LarkForm'
+});
+
+interface Emits {
+  (e: 'fetchAdd', model: Api.NotifyRecipient.NotifyRecipient): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const { formRef, validate } = useNaiveForm();
+const { defaultRequiredRule } = useFormRules();
+
+type Model = Pick<
+  Api.NotifyRecipient.DingDingNotify,
+  'id' | 'recipientName' | 'notifyType' | 'webhookUrl' | 'ats' | 'description'
+>;
+const model: Model = reactive(createDefaultModel());
+
+function createDefaultModel(): Model {
+  return {
+    id: '',
+    recipientName: '',
+    notifyType: 4,
+    webhookUrl: '',
+    ats: [],
+    description: ''
+  };
+}
+
+type RuleKey = Extract<keyof Model, 'recipientName' | 'notifyType' | 'webhookUrl' | 'ats' | 'description'>;
+
+const rules: Record<RuleKey, App.Global.FormRule> = {
+  recipientName: defaultRequiredRule,
+  notifyType: defaultRequiredRule,
+  description: defaultRequiredRule,
+  webhookUrl: defaultRequiredRule,
+  ats: defaultRequiredRule
+};
+
+const buildNotifyAttribute = (webhookUrl: string, ats: string[]) => {
+  return JSON.stringify({ webhookUrl, ats });
+};
+
+async function save() {
+  await validate();
+  const { id, recipientName, notifyType, webhookUrl, ats, description } = model;
+  const notifyAttribute = buildNotifyAttribute(webhookUrl, ats);
+  emit('fetchAdd', { id, recipientName, notifyType, notifyAttribute, description });
+}
+
+defineExpose({
+  save
+});
+</script>
+
+<template>
+  <NForm ref="formRef" :model="model" :rules="rules">
+    <NFormItem :label="$t('page.notifyRecipient.recipientName')" path="recipientName">
+      <NInput
+        v-model:value="model.recipientName"
+        :placeholder="$t('page.notifyRecipient.form.recipientName')"
+        clearable
+      />
+    </NFormItem>
+    <NFormItem :label="$t('page.notifyRecipient.webhookUrl')" path="webhookUrl">
+      <NInput v-model:value="model.webhookUrl" :placeholder="$t('page.notifyRecipient.form.webhookUrl')" clearable />
+    </NFormItem>
+    <NFormItem path="ats">
+      <template #label>
+        <a href="#">
+          <NTooltip trigger="hover">
+            <template #trigger>
+              {{ $t('page.notifyRecipient.ats') }}
+            </template>
+            {{ $t('page.notifyRecipient.form.larkAts') }}
+          </NTooltip>
+        </a>
+      </template>
+      <NDynamicTags v-model:value="model.ats" />
+    </NFormItem>
+    <NFormItem :label="$t('page.notifyRecipient.description')" path="description">
+      <NInput
+        v-model:value="model.description"
+        type="textarea"
+        :placeholder="$t('page.notifyRecipient.form.description')"
+        round
+        clearable
+      />
+    </NFormItem>
+  </NForm>
+</template>
+
+<style scoped></style>

src/views/notify/recipient/modules/notify-recipient-operate-drawer.vue

@@ -5,12 +5,15 @@ import OperateDrawer from '@/components/common/operate-drawer.vue';
 import { $t } from '@/locales';
 import { fetchAddNotifyRecipient } 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';
 
 defineOptions({
   name: 'NotifyRecipientOperateDrawer'
 });
 
-const DingDingRef = ref();
+const CommonRef = ref();
 
 interface Props {
   /** the type of operation */
@@ -57,13 +60,6 @@ function createDefaultModel(): Model {
   };
 }
 
-// const rules: Record<RuleKey, App.Global.FormRule> = {
-//   recipientName: defaultRequiredRule,
-//   notifyType: defaultRequiredRule,
-//   notifyAttribute: defaultRequiredRule,
-//   description: defaultRequiredRule
-// };
-
 function handleUpdateModelWhenEdit() {
   if (props.operateType === 'add') {
     Object.assign(model, createDefaultModel());
@@ -78,7 +74,7 @@ function handleUpdateModelWhenEdit() {
 async function handleSubmit() {
   // request
   if (props.operateType === 'add') {
-    DingDingRef.value?.save();
+    CommonRef.value?.save();
   }
 
   if (props.operateType === 'edit') {
@@ -88,7 +84,7 @@ async function handleSubmit() {
   emit('submitted');
 }
 
-const dingDingFetchAdd = (dingDingModel: Api.NotifyRecipient.NotifyRecipient) => {
+const commonFetchAdd = (dingDingModel: Api.NotifyRecipient.NotifyRecipient) => {
   const { recipientName, notifyAttribute, notifyType, description } = dingDingModel;
   fetchAddNotifyRecipient({ recipientName, notifyAttribute, notifyType, description });
 };
@@ -109,18 +105,16 @@ watch(visible, () => {
   <OperateDrawer v-model="visible" :title="title" @handle-submit="handleSubmit">
     <NTabs type="segment" animated>
       <NTabPane name="dingding" tab="钉钉">
-        <DingDingForm ref="DingDingRef" @fetch-add="dingDingFetchAdd" />
+        <DingDingForm ref="CommonRef" @fetch-add="commonFetchAdd" />
       </NTabPane>
-      <NTabPane name="feishu" tab="飞书"></NTabPane>
-      <NTabPane name="email" tab="企业微信">
-        <NFormItem :label="$t('page.notifyRecipient.recipientName')" path="recipientName">
-          <NInput v-model:value="model.recipientName" :placeholder="$t('page.notifyRecipient.form.recipientName')" />
-        </NFormItem>
+      <NTabPane name="feishu" tab="飞书">
+        <LarkForm ref="CommonRef" @fetch-add="commonFetchAdd" />
+      </NTabPane>
+      <NTabPane name="qiYeWeche" tab="企业微信">
+        <QiyeWechtForm ref="CommonRef" @fetch-add="commonFetchAdd" />
       </NTabPane>
       <NTabPane name="email" tab="邮箱">
-        <NFormItem :label="$t('page.notifyRecipient.recipientName')" path="recipientName">
-          <NInput v-model:value="model.recipientName" :placeholder="$t('page.notifyRecipient.form.recipientName')" />
-        </NFormItem>
+        <EmailForm ref="CommonRef" @fetch-add="commonFetchAdd" />
       </NTabPane>
     </NTabs>
     <template #footer>

src/views/notify/recipient/modules/qiye-wecht-form.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'LarkForm'
+});
+
+interface Emits {
+  (e: 'fetchAdd', model: Api.NotifyRecipient.NotifyRecipient): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const { formRef, validate } = useNaiveForm();
+const { defaultRequiredRule } = useFormRules();
+
+type Model = Pick<
+  Api.NotifyRecipient.DingDingNotify,
+  'id' | 'recipientName' | 'notifyType' | 'webhookUrl' | 'ats' | 'description'
+>;
+const model: Model = reactive(createDefaultModel());
+
+function createDefaultModel(): Model {
+  return {
+    id: '',
+    recipientName: '',
+    notifyType: 3,
+    webhookUrl: '',
+    ats: [],
+    description: ''
+  };
+}
+
+type RuleKey = Extract<keyof Model, 'recipientName' | 'notifyType' | 'webhookUrl' | 'ats' | 'description'>;
+
+const rules: Record<RuleKey, App.Global.FormRule> = {
+  recipientName: defaultRequiredRule,
+  notifyType: defaultRequiredRule,
+  description: defaultRequiredRule,
+  webhookUrl: defaultRequiredRule,
+  ats: defaultRequiredRule
+};
+
+const buildNotifyAttribute = (webhookUrl: string, ats: string[]) => {
+  return JSON.stringify({ webhookUrl, ats });
+};
+
+async function save() {
+  await validate();
+  const { id, recipientName, notifyType, webhookUrl, ats, description } = model;
+  const notifyAttribute = buildNotifyAttribute(webhookUrl, ats);
+  emit('fetchAdd', { id, recipientName, notifyType, notifyAttribute, description });
+}
+
+defineExpose({
+  save
+});
+</script>
+
+<template>
+  <NForm ref="formRef" :model="model" :rules="rules">
+    <NFormItem :label="$t('page.notifyRecipient.recipientName')" path="recipientName">
+      <NInput
+        v-model:value="model.recipientName"
+        :placeholder="$t('page.notifyRecipient.form.recipientName')"
+        clearable
+      />
+    </NFormItem>
+    <NFormItem :label="$t('page.notifyRecipient.webhookUrl')" path="webhookUrl">
+      <NInput v-model:value="model.webhookUrl" :placeholder="$t('page.notifyRecipient.form.webhookUrl')" clearable />
+    </NFormItem>
+    <NFormItem path="ats">
+      <template #label>
+        <a href="#">
+          <NTooltip trigger="hover">
+            <template #trigger>
+              {{ $t('page.notifyRecipient.ats') }}
+            </template>
+            {{ $t('page.notifyRecipient.form.qiYeWechatAts') }}
+          </NTooltip>
+        </a>
+      </template>
+      <NDynamicTags v-model:value="model.ats" />
+    </NFormItem>
+    <NFormItem :label="$t('page.notifyRecipient.description')" path="description">
+      <NInput
+        v-model:value="model.description"
+        type="textarea"
+        :placeholder="$t('page.notifyRecipient.form.description')"
+        round
+        clearable
+      />
+    </NFormItem>
+  </NForm>
+</template>
+
+<style scoped></style>