feat(sj_1.0.0): 完成通知更新

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

@@ -9,6 +9,7 @@ defineOptions({
 
 interface Emits {
   (e: 'fetchAdd', model: Api.NotifyRecipient.NotifyRecipient): void;
+  (e: 'fetchUpdate', model: Api.NotifyRecipient.NotifyRecipient): void;
 }
 
 const emit = defineEmits<Emits>();
@@ -33,12 +34,11 @@ function createDefaultModel(): Model {
   };
 }
 
-type RuleKey = Extract<keyof Model, 'recipientName' | 'notifyType' | 'webhookUrl' | 'ats' | 'description'>;
+type RuleKey = Extract<keyof Model, 'recipientName' | 'notifyType' | 'webhookUrl' | 'ats'>;
 
 const rules: Record<RuleKey, App.Global.FormRule> = {
   recipientName: defaultRequiredRule,
   notifyType: defaultRequiredRule,
-  description: defaultRequiredRule,
   webhookUrl: defaultRequiredRule,
   ats: defaultRequiredRule
 };
@@ -49,13 +49,31 @@ const buildNotifyAttribute = (webhookUrl: string, ats: string[]) => {
 
 async function save() {
   await validate();
-  const { id, recipientName, notifyType, webhookUrl, ats, description } = model;
+  const { recipientName, notifyType, webhookUrl, ats, description } = model;
   const notifyAttribute = buildNotifyAttribute(webhookUrl, ats);
-  emit('fetchAdd', { id, recipientName, notifyType, notifyAttribute, description });
+  emit('fetchAdd', { recipientName, notifyType, notifyAttribute, description });
 }
 
+async function update() {
+  await validate();
+  const { id, recipientName, notifyType, webhookUrl, ats, description } = model;
+  const notifyAttribute = buildNotifyAttribute(webhookUrl, ats);
+  emit('fetchUpdate', { id, recipientName, notifyType, notifyAttribute, description });
+}
+
+const showData = (rowData: Api.NotifyRecipient.NotifyRecipient) => {
+  if (rowData.notifyAttribute) {
+    const notifyAttribute = JSON.parse(rowData.notifyAttribute);
+    Object.assign(model, rowData);
+    Object.assign(model, notifyAttribute);
+  }
+};
+
 defineExpose({
-  save
+  save,
+  createDefaultModel,
+  showData,
+  update
 });
 </script>
 
@@ -89,8 +107,8 @@ defineExpose({
         v-model:value="model.description"
         type="textarea"
         :placeholder="$t('page.notifyRecipient.form.description')"
-        round
         clearable
+        round
       />
     </NFormItem>
   </NForm>

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

@@ -9,6 +9,7 @@ defineOptions({
 
 interface Emits {
   (e: 'fetchAdd', model: Api.NotifyRecipient.NotifyRecipient): void;
+  (e: 'fetchUpdate', model: Api.NotifyRecipient.NotifyRecipient): void;
 }
 
 const emit = defineEmits<Emits>();
@@ -29,12 +30,11 @@ function createDefaultModel(): Model {
   };
 }
 
-type RuleKey = Extract<keyof Model, 'recipientName' | 'notifyType' | 'tos' | 'description'>;
+type RuleKey = Extract<keyof Model, 'recipientName' | 'notifyType' | 'tos'>;
 
 const rules: Record<RuleKey, App.Global.FormRule> = {
   recipientName: defaultRequiredRule,
   notifyType: defaultRequiredRule,
-  description: defaultRequiredRule,
   tos: defaultRequiredRule
 };
 
@@ -49,8 +49,26 @@ async function save() {
   emit('fetchAdd', { id, recipientName, notifyType, notifyAttribute, description });
 }
 
+const showData = (rowData: Api.NotifyRecipient.NotifyRecipient) => {
+  if (rowData.notifyAttribute) {
+    const notifyAttribute = JSON.parse(rowData.notifyAttribute);
+    Object.assign(model, rowData);
+    Object.assign(model, notifyAttribute);
+  }
+};
+
+async function update() {
+  await validate();
+  const { id, recipientName, notifyType, tos, description } = model;
+  const notifyAttribute = buildNotifyAttribute(tos);
+  emit('fetchUpdate', { id, recipientName, notifyType, notifyAttribute, description });
+}
+
 defineExpose({
-  save
+  save,
+  showData,
+  createDefaultModel,
+  update
 });
 </script>
 

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

@@ -9,6 +9,7 @@ defineOptions({
 
 interface Emits {
   (e: 'fetchAdd', model: Api.NotifyRecipient.NotifyRecipient): void;
+  (e: 'fetchUpdate', model: Api.NotifyRecipient.NotifyRecipient): void;
 }
 
 const emit = defineEmits<Emits>();
@@ -33,12 +34,11 @@ function createDefaultModel(): Model {
   };
 }
 
-type RuleKey = Extract<keyof Model, 'recipientName' | 'notifyType' | 'webhookUrl' | 'ats' | 'description'>;
+type RuleKey = Extract<keyof Model, 'recipientName' | 'notifyType' | 'webhookUrl' | 'ats'>;
 
 const rules: Record<RuleKey, App.Global.FormRule> = {
   recipientName: defaultRequiredRule,
   notifyType: defaultRequiredRule,
-  description: defaultRequiredRule,
   webhookUrl: defaultRequiredRule,
   ats: defaultRequiredRule
 };
@@ -54,8 +54,26 @@ async function save() {
   emit('fetchAdd', { id, recipientName, notifyType, notifyAttribute, description });
 }
 
+async function update() {
+  await validate();
+  const { id, recipientName, notifyType, webhookUrl, ats, description } = model;
+  const notifyAttribute = buildNotifyAttribute(webhookUrl, ats);
+  emit('fetchUpdate', { id, recipientName, notifyType, notifyAttribute, description });
+}
+
+const showData = (rowData: Api.NotifyRecipient.NotifyRecipient) => {
+  if (rowData.notifyAttribute) {
+    const notifyAttribute = JSON.parse(rowData.notifyAttribute);
+    Object.assign(model, rowData);
+    Object.assign(model, notifyAttribute);
+  }
+};
+
 defineExpose({
-  save
+  save,
+  showData,
+  createDefaultModel,
+  update
 });
 </script>
 

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed, reactive, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useNaiveForm } from '@/hooks/common/form';
 import OperateDrawer from '@/components/common/operate-drawer.vue';
 import { $t } from '@/locales';
-import { fetchAddNotifyRecipient } from '@/service/api';
+import { fetchAddNotifyRecipient, fetchEditNotifyRecipient } from '@/service/api';
 import DingDingForm from './dingding-form.vue';
 import LarkForm from './lark-form.vue';
 import EmailForm from './email-form.vue';
@@ -34,6 +34,10 @@ const visible = defineModel<boolean>('visible', {
   default: false
 });
 
+const defaultTabPane = defineModel<string>('defaultTabPane', {
+  default: '1'
+});
+
 const { restoreValidation } = useNaiveForm();
 
 const title = computed(() => {
@@ -44,30 +48,15 @@ const title = computed(() => {
   return titles[props.operateType];
 });
 
-type Model = Pick<
-  Api.NotifyRecipient.NotifyRecipient,
-  'id' | 'recipientName' | 'notifyType' | 'notifyAttribute' | 'description'
->;
-
-const model: Model = reactive(createDefaultModel());
-
-function createDefaultModel(): Model {
-  return {
-    recipientName: '',
-    notifyType: 1,
-    notifyAttribute: '',
-    description: ''
-  };
-}
-
 function handleUpdateModelWhenEdit() {
   if (props.operateType === 'add') {
-    Object.assign(model, createDefaultModel());
+    CommonRef.value?.createDefaultModel();
     return;
   }
 
   if (props.operateType === 'edit' && props.rowData) {
-    Object.assign(model, props.rowData);
+    defaultTabPane.value = props.rowData.notifyType.toString();
+    CommonRef.value?.showData(props.rowData);
   }
 }
 
@@ -78,15 +67,22 @@ async function handleSubmit() {
   }
 
   if (props.operateType === 'edit') {
-    console.log('更新');
+    CommonRef.value?.update();
   }
-  window.$message?.success($t('common.updateSuccess'));
+
   emit('submitted');
 }
 
 const commonFetchAdd = (dingDingModel: Api.NotifyRecipient.NotifyRecipient) => {
   const { recipientName, notifyAttribute, notifyType, description } = dingDingModel;
   fetchAddNotifyRecipient({ recipientName, notifyAttribute, notifyType, description });
+  window.$message?.success($t('common.addSuccess'));
+};
+
+const commonFetchUpdate = (dingDingModel: Api.NotifyRecipient.NotifyRecipient) => {
+  const { id, recipientName, notifyAttribute, notifyType, description } = dingDingModel;
+  fetchEditNotifyRecipient({ id, recipientName, notifyAttribute, notifyType, description });
+  window.$message?.success($t('common.updateSuccess'));
 };
 
 function closeDrawer() {
@@ -103,18 +99,18 @@ watch(visible, () => {
 
 <template>
   <OperateDrawer v-model="visible" :title="title" @handle-submit="handleSubmit">
-    <NTabs type="segment" animated>
-      <NTabPane name="dingding" tab="钉钉">
-        <DingDingForm ref="CommonRef" @fetch-add="commonFetchAdd" />
+    <NTabs v-model:value="defaultTabPane" type="segment" animated>
+      <NTabPane name="1" tab="钉钉">
+        <DingDingForm ref="CommonRef" @fetch-add="commonFetchAdd" @fetch-update="commonFetchUpdate" />
       </NTabPane>
-      <NTabPane name="feishu" tab="飞书">
-        <LarkForm ref="CommonRef" @fetch-add="commonFetchAdd" />
+      <NTabPane name="2" tab="邮箱">
+        <EmailForm ref="CommonRef" @fetch-add="commonFetchAdd" @fetch-update="commonFetchUpdate" />
       </NTabPane>
-      <NTabPane name="qiYeWeche" tab="企业微信">
-        <QiyeWechtForm ref="CommonRef" @fetch-add="commonFetchAdd" />
+      <NTabPane name="3" tab="企业微信">
+        <QiyeWechtForm ref="CommonRef" @fetch-add="commonFetchAdd" @fetch-update="commonFetchUpdate" />
       </NTabPane>
-      <NTabPane name="email" tab="邮箱">
-        <EmailForm ref="CommonRef" @fetch-add="commonFetchAdd" />
+      <NTabPane name="4" tab="飞书">
+        <LarkForm ref="CommonRef" @fetch-add="commonFetchAdd" @fetch-update="commonFetchUpdate" />
       </NTabPane>
     </NTabs>
     <template #footer>

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

@@ -9,6 +9,7 @@ defineOptions({
 
 interface Emits {
   (e: 'fetchAdd', model: Api.NotifyRecipient.NotifyRecipient): void;
+  (e: 'fetchUpdate', model: Api.NotifyRecipient.NotifyRecipient): void;
 }
 
 const emit = defineEmits<Emits>();
@@ -33,12 +34,11 @@ function createDefaultModel(): Model {
   };
 }
 
-type RuleKey = Extract<keyof Model, 'recipientName' | 'notifyType' | 'webhookUrl' | 'ats' | 'description'>;
+type RuleKey = Extract<keyof Model, 'recipientName' | 'notifyType' | 'webhookUrl' | 'ats'>;
 
 const rules: Record<RuleKey, App.Global.FormRule> = {
   recipientName: defaultRequiredRule,
   notifyType: defaultRequiredRule,
-  description: defaultRequiredRule,
   webhookUrl: defaultRequiredRule,
   ats: defaultRequiredRule
 };
@@ -54,8 +54,26 @@ async function save() {
   emit('fetchAdd', { id, recipientName, notifyType, notifyAttribute, description });
 }
 
+async function update() {
+  await validate();
+  const { id, recipientName, notifyType, webhookUrl, ats, description } = model;
+  const notifyAttribute = buildNotifyAttribute(webhookUrl, ats);
+  emit('fetchUpdate', { id, recipientName, notifyType, notifyAttribute, description });
+}
+
+const showData = (rowData: Api.NotifyRecipient.NotifyRecipient) => {
+  if (rowData.notifyAttribute) {
+    const notifyAttribute = JSON.parse(rowData.notifyAttribute);
+    Object.assign(model, rowData);
+    Object.assign(model, notifyAttribute);
+  }
+};
+
 defineExpose({
-  save
+  save,
+  showData,
+  createDefaultModel,
+  update
 });
 </script>