fix: 修复通知人页面

This commit is contained in:
xlsea 2024-04-19 17:41:21 +08:00
parent 8095eb4295
commit 9dcb53905f
10 changed files with 152 additions and 175 deletions

2
.env
View File

@ -35,7 +35,7 @@ VITE_SERVICE_SUCCESS_CODE=1
VITE_SERVICE_LOGOUT_CODES=8888,8889
# modal logout codes of backend service, when the code is received, the user will be logged out by displaying a modal
VITE_SERVICE_MODAL_LOGOUT_CODES=0
VITE_SERVICE_MODAL_LOGOUT_CODES=5001
# token expired codes of backend service, when the code is received, it will refresh the token and resend the request
VITE_SERVICE_EXPIRED_TOKEN_CODES=9999,9998

View File

@ -14,7 +14,6 @@ interface Props {
const props = defineProps<Props>();
interface Emits {
(e: 'submitted'): void;
(e: 'update:modelValue', modelValue: boolean): void;
}
@ -64,7 +63,7 @@ const onUpdateShow = (value: boolean) => {
</script>
<template>
<NDrawer v-model:show="visible" display-directive="show" :width="drawerWidth" @update:show="onUpdateShow">
<NDrawer v-model:show="visible" display-directive="if" :width="drawerWidth" @update:show="onUpdateShow">
<NDrawerContent :title="props.title" :native-scrollbar="false" closable header-class="operate-dawer-header">
<template #header>
{{ props.title }}

View File

@ -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;
}
}

View File

@ -75,15 +75,19 @@ async function handleSubmit() {
// request
if (props.operateType === 'add') {
const { name, uniqueId } = model;
fetchAddNamespace({ name, uniqueId });
const { error } = await fetchAddNamespace({ name, uniqueId });
if (error) return;
window.$message?.success($t('common.addSuccess'));
}
if (props.operateType === 'edit') {
const { id, name, uniqueId } = model;
fetchEditNamespace({ id, name, uniqueId });
}
const { error } = await fetchEditNamespace({ id, name, uniqueId });
if (error) return;
window.$message?.success($t('common.updateSuccess'));
visible.value = false;
}
closeDrawer();
emit('submitted');
}

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { reactive, watch } from 'vue';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { $t } from '@/locales';
@ -7,29 +7,35 @@ defineOptions({
name: 'DingDingForm'
});
interface Props {
value: Api.NotifyRecipient.NotifyRecipient;
}
const props = defineProps<Props>();
interface Emits {
(e: 'fetchAdd', model: Api.NotifyRecipient.NotifyRecipient): void;
(e: 'fetchUpdate', model: Api.NotifyRecipient.NotifyRecipient): void;
(e: 'update:value', value: Api.NotifyRecipient.NotifyRecipient): void;
}
const emit = defineEmits<Emits>();
const { formRef, validate } = useNaiveForm();
const { formRef, validate, restoreValidation } = useNaiveForm();
const { defaultRequiredRule } = useFormRules();
type Model = Pick<
Api.NotifyRecipient.DingDingNotify,
'id' | 'recipientName' | 'notifyType' | 'webhookUrl' | 'ats' | 'description'
'id' | 'recipientName' | 'notifyType' | 'webhookUrl' | 'ats' | 'description' | 'notifyAttribute'
>;
const model: Model = reactive(createDefaultModel());
function createDefaultModel(): Model {
const { webhookUrl, ats } = JSON.parse(props.value.notifyAttribute!) as { webhookUrl: string; ats: string[] };
return {
id: '',
recipientName: '',
notifyType: '1',
webhookUrl: '',
ats: [],
id: props.value.id,
recipientName: props.value.recipientName,
notifyType: 1,
webhookUrl,
ats,
description: ''
};
}
@ -47,33 +53,19 @@ const buildNotifyAttribute = (webhookUrl: string, ats: string[]) => {
return JSON.stringify({ webhookUrl, ats });
};
async function save() {
await validate();
const { recipientName, notifyType, webhookUrl, ats, description } = model;
const notifyAttribute = buildNotifyAttribute(webhookUrl, ats);
emit('fetchAdd', { recipientName, notifyType, notifyAttribute, description });
}
async function update() {
await validate();
watch(
() => model,
() => {
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);
}
};
emit('update:value', { id, recipientName, notifyType, notifyAttribute, description });
},
{ deep: true }
);
defineExpose({
save,
createDefaultModel,
showData,
update
validate,
restoreValidation
});
</script>
@ -96,7 +88,7 @@ defineExpose({
<template #trigger>
{{ $t('page.notifyRecipient.ats') }}
</template>
{{ $t('page.notifyRecipient.form.dingdingAts') }}
{{ $t('page.notifyRecipient.form.dingDingAts') }}
</NTooltip>
</a>
</template>

View File

@ -1,20 +1,25 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { reactive, watch } from 'vue';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { $t } from '@/locales';
defineOptions({
name: 'LarkForm'
name: 'EmailForm'
});
interface Props {
value: Api.NotifyRecipient.NotifyRecipient;
}
defineProps<Props>();
interface Emits {
(e: 'fetchAdd', model: Api.NotifyRecipient.NotifyRecipient): void;
(e: 'fetchUpdate', model: Api.NotifyRecipient.NotifyRecipient): void;
(e: 'update:value', value: Api.NotifyRecipient.NotifyRecipient): void;
}
const emit = defineEmits<Emits>();
const { formRef, validate } = useNaiveForm();
const { formRef, validate, restoreValidation } = useNaiveForm();
const { defaultRequiredRule } = useFormRules();
type Model = Pick<Api.NotifyRecipient.EmailNotify, 'id' | 'recipientName' | 'notifyType' | 'tos' | 'description'>;
@ -24,7 +29,7 @@ function createDefaultModel(): Model {
return {
id: '',
recipientName: '',
notifyType: '2',
notifyType: 2,
tos: [],
description: ''
};
@ -42,33 +47,19 @@ const buildNotifyAttribute = (tos: string[]) => {
return JSON.stringify({ tos });
};
async function save() {
await validate();
watch(
() => model,
() => {
const { id, recipientName, notifyType, tos, description } = model;
const notifyAttribute = buildNotifyAttribute(tos);
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 });
}
emit('update:value', { id, recipientName, notifyType, notifyAttribute, description });
},
{ immediate: true, deep: true }
);
defineExpose({
save,
showData,
createDefaultModel,
update
validate,
restoreValidation
});
</script>

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { reactive, watch } from 'vue';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { $t } from '@/locales';
@ -7,19 +7,24 @@ defineOptions({
name: 'LarkForm'
});
interface Props {
value: Api.NotifyRecipient.NotifyRecipient;
}
defineProps<Props>();
interface Emits {
(e: 'fetchAdd', model: Api.NotifyRecipient.NotifyRecipient): void;
(e: 'fetchUpdate', model: Api.NotifyRecipient.NotifyRecipient): void;
(e: 'update:value', value: Api.NotifyRecipient.NotifyRecipient): void;
}
const emit = defineEmits<Emits>();
const { formRef, validate } = useNaiveForm();
const { formRef, validate, restoreValidation } = useNaiveForm();
const { defaultRequiredRule } = useFormRules();
type Model = Pick<
Api.NotifyRecipient.DingDingNotify,
'id' | 'recipientName' | 'notifyType' | 'webhookUrl' | 'ats' | 'description'
'id' | 'recipientName' | 'notifyType' | 'webhookUrl' | 'ats' | 'description' | 'notifyAttribute'
>;
const model: Model = reactive(createDefaultModel());
@ -27,7 +32,7 @@ function createDefaultModel(): Model {
return {
id: '',
recipientName: '',
notifyType: '4',
notifyType: 4,
webhookUrl: '',
ats: [],
description: ''
@ -47,33 +52,19 @@ const buildNotifyAttribute = (webhookUrl: string, ats: string[]) => {
return JSON.stringify({ webhookUrl, ats });
};
async function save() {
await validate();
watch(
() => model,
() => {
const { id, recipientName, notifyType, webhookUrl, ats, description } = model;
const notifyAttribute = buildNotifyAttribute(webhookUrl, ats);
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);
}
};
emit('update:value', { id, recipientName, notifyType, notifyAttribute, description });
},
{ immediate: true, deep: true }
);
defineExpose({
save,
showData,
createDefaultModel,
update
validate,
restoreValidation
});
</script>
@ -107,8 +98,8 @@ defineExpose({
v-model:value="model.description"
type="textarea"
:placeholder="$t('page.notifyRecipient.form.description')"
round
clearable
round
/>
</NFormItem>
</NForm>

View File

@ -13,8 +13,6 @@ defineOptions({
name: 'NotifyRecipientOperateDrawer'
});
const CommonRef = ref();
interface Props {
/** the type of operation */
operateType: NaiveUI.TableOperateType;
@ -34,11 +32,11 @@ const visible = defineModel<boolean>('visible', {
default: false
});
const defaultTabPane = defineModel<string>('defaultTabPane', {
default: '1'
const notifyTabPane = defineModel<Api.NotifyRecipient.AlarmType>('notifyTabPane', {
default: 1
});
const { restoreValidation } = useNaiveForm();
const { formRef, validate, restoreValidation } = useNaiveForm();
const title = computed(() => {
const titles: Record<NaiveUI.TableOperateType, string> = {
@ -48,43 +46,52 @@ const title = computed(() => {
return titles[props.operateType];
});
type Model = Pick<
Api.NotifyRecipient.NotifyRecipient,
'id' | 'recipientName' | 'notifyType' | 'notifyAttribute' | 'description'
>;
const model = ref<Model>(createDefaultModel());
function createDefaultModel(): Model {
return {
recipientName: '',
notifyType: notifyTabPane.value!,
notifyAttribute: '{}',
description: ''
};
}
function handleUpdateModelWhenEdit() {
if (props.operateType === 'add') {
CommonRef.value?.createDefaultModel();
model.value = createDefaultModel();
return;
}
if (props.operateType === 'edit' && props.rowData) {
defaultTabPane.value = props.rowData.notifyType.toString();
CommonRef.value?.showData(props.rowData);
model.value = props.rowData;
}
}
async function handleSubmit() {
await validate();
// request
if (props.operateType === 'add') {
CommonRef.value?.save();
const { recipientName, notifyAttribute, notifyType, description } = model.value;
const { error } = await fetchAddNotifyRecipient({ recipientName, notifyAttribute, notifyType, description });
if (error) return;
window.$message?.success($t('common.addSuccess'));
}
if (props.operateType === 'edit') {
CommonRef.value?.update();
const { id, recipientName, notifyAttribute, notifyType, description } = model.value;
const { error } = await fetchEditNotifyRecipient({ id, recipientName, notifyAttribute, notifyType, description });
if (error) return;
window.$message?.success($t('common.updateSuccess'));
}
closeDrawer();
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() {
visible.value = false;
}
@ -98,19 +105,19 @@ watch(visible, () => {
</script>
<template>
<OperateDrawer v-model="visible" :title="title" @handle-submit="handleSubmit">
<NTabs v-model:value="defaultTabPane" type="segment" animated>
<NTabPane name="1" :tab="$t('page.notifyRecipient.dingDing')">
<DingDingForm ref="CommonRef" @fetch-add="commonFetchAdd" @fetch-update="commonFetchUpdate" />
<OperateDrawer v-model="visible" :title="title">
<NTabs v-model:value="notifyTabPane" type="segment" animated>
<NTabPane :name="1" tab="钉钉">
<DingDingForm ref="formRef" v-model:value="model" />
</NTabPane>
<NTabPane name="2" :tab="$t('page.notifyRecipient.email')">
<EmailForm ref="CommonRef" @fetch-add="commonFetchAdd" @fetch-update="commonFetchUpdate" />
<NTabPane :name="2" tab="邮箱">
<EmailForm ref="formRef" v-model:value="model" />
</NTabPane>
<NTabPane name="3" :tab="$t('page.notifyRecipient.weCom')">
<WeComForm ref="CommonRef" @fetch-add="commonFetchAdd" @fetch-update="commonFetchUpdate" />
<NTabPane :name="3" tab="企业微信">
<WeComForm ref="formRef" v-model:value="model" />
</NTabPane>
<NTabPane name="4" :tab="$t('page.notifyRecipient.lark')">
<LarkForm ref="CommonRef" @fetch-add="commonFetchAdd" @fetch-update="commonFetchUpdate" />
<NTabPane :name="4" tab="飞书">
<LarkForm ref="formRef" v-model:value="model" />
</NTabPane>
</NTabs>
<template #footer>

View File

@ -1,25 +1,30 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { reactive, watch } from 'vue';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { $t } from '@/locales';
defineOptions({
name: 'LarkForm'
name: 'WecomForm'
});
interface Props {
value: Api.NotifyRecipient.NotifyRecipient;
}
defineProps<Props>();
interface Emits {
(e: 'fetchAdd', model: Api.NotifyRecipient.NotifyRecipient): void;
(e: 'fetchUpdate', model: Api.NotifyRecipient.NotifyRecipient): void;
(e: 'update:value', value: Api.NotifyRecipient.NotifyRecipient): void;
}
const emit = defineEmits<Emits>();
const { formRef, validate } = useNaiveForm();
const { formRef, validate, restoreValidation } = useNaiveForm();
const { defaultRequiredRule } = useFormRules();
type Model = Pick<
Api.NotifyRecipient.DingDingNotify,
'id' | 'recipientName' | 'notifyType' | 'webhookUrl' | 'ats' | 'description'
'id' | 'recipientName' | 'notifyType' | 'webhookUrl' | 'ats' | 'description' | 'notifyAttribute'
>;
const model: Model = reactive(createDefaultModel());
@ -27,7 +32,7 @@ function createDefaultModel(): Model {
return {
id: '',
recipientName: '',
notifyType: '3',
notifyType: 3,
webhookUrl: '',
ats: [],
description: ''
@ -47,33 +52,19 @@ const buildNotifyAttribute = (webhookUrl: string, ats: string[]) => {
return JSON.stringify({ webhookUrl, ats });
};
async function save() {
await validate();
watch(
() => model,
() => {
const { id, recipientName, notifyType, webhookUrl, ats, description } = model;
const notifyAttribute = buildNotifyAttribute(webhookUrl, ats);
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);
}
};
emit('update:value', { id, recipientName, notifyType, notifyAttribute, description });
},
{ immediate: true, deep: true }
);
defineExpose({
save,
showData,
createDefaultModel,
update
validate,
restoreValidation
});
</script>
@ -107,8 +98,8 @@ defineExpose({
v-model:value="model.description"
type="textarea"
:placeholder="$t('page.notifyRecipient.form.description')"
round
clearable
round
/>
</NFormItem>
</NForm>

View File

@ -111,7 +111,7 @@ async function handleSubmit() {
notifyThreshold,
description
} = model;
fetchAddNotify({
const { error } = await fetchAddNotify({
groupName,
businessId,
notifyStatus,
@ -121,6 +121,7 @@ async function handleSubmit() {
notifyThreshold,
description
});
if (error) return;
}
if (props.operateType === 'edit') {
@ -135,7 +136,7 @@ async function handleSubmit() {
notifyThreshold,
description
} = model;
fetchEditNotify({
const { error } = await fetchEditNotify({
id,
groupName,
businessId,
@ -146,6 +147,7 @@ async function handleSubmit() {
notifyThreshold,
description
});
if (error) return;
}
window.$message?.success($t('common.updateSuccess'));
closeDrawer();