<script lang="ts" setup>
|
import type { WxCpActivityApi } from '#/api/wxcp/activity';
|
|
import { ref } from 'vue';
|
|
import { useVbenModal } from '@vben/common-ui';
|
import { Alert, Button, message } from 'ant-design-vue';
|
|
import { pushActivity } from '#/api/wxcp/activity';
|
|
import PushScopePicker from '../../components/push-scope-picker.vue';
|
import { PUSH_SCOPE } from '../../data';
|
|
defineOptions({ name: 'WxCpActivityPushModal' });
|
|
const emit = defineEmits<{ success: [] }>();
|
|
const activity = ref<WxCpActivityApi.Activity>({});
|
const scope = ref<number>(PUSH_SCOPE.ALL);
|
const target = ref<string>('');
|
const pushing = ref(false);
|
const resultMessage = ref('');
|
const resultSuccess = ref(true);
|
|
const [Modal, modalApi] = useVbenModal({
|
onOpenChange(isOpen: boolean) {
|
if (!isOpen) {
|
activity.value = {};
|
resultMessage.value = '';
|
return;
|
}
|
const data = modalApi.getData<{ activity: WxCpActivityApi.Activity }>();
|
activity.value = data.activity ?? {};
|
// 沿用活动上已配置的推送范围与目标，避免每次都要重选
|
scope.value = data.activity?.pushScope ?? PUSH_SCOPE.ALL;
|
target.value = data.activity?.pushTarget ?? '';
|
},
|
});
|
|
async function handlePush() {
|
if (!activity.value.id) {
|
return;
|
}
|
if (scope.value !== PUSH_SCOPE.ALL && !target.value.trim()) {
|
message.warning('选择「指定部门」或「指定成员」时，请先选择推送目标');
|
return;
|
}
|
pushing.value = true;
|
resultMessage.value = '';
|
try {
|
const res = await pushActivity({
|
id: activity.value.id,
|
pushScope: scope.value,
|
pushTarget: scope.value === PUSH_SCOPE.ALL ? '' : target.value,
|
});
|
resultSuccess.value = !!res?.success;
|
if (res?.success) {
|
message.success('推送成功');
|
emit('success');
|
await modalApi.close();
|
} else {
|
// 推送失败不抛异常，把企业微信给的原因直接展示给用户
|
resultMessage.value = res?.message || '推送失败';
|
}
|
} catch (error: unknown) {
|
resultSuccess.value = false;
|
resultMessage.value = (error as Error)?.message || '推送失败';
|
} finally {
|
pushing.value = false;
|
}
|
}
|
</script>
|
|
<template>
|
<Modal title="推送活动" class="w-2/5">
|
<div class="px-4">
|
<div class="mb-4 rounded bg-gray-50 p-3 text-sm dark:bg-gray-800">
|
<div class="mb-1 font-medium">{{ activity.title }}</div>
|
<div class="text-gray-500">
|
推送后成员的企业微信会收到卡片消息，点击「立即报名」直接打开报名页。
|
</div>
|
</div>
|
|
<div class="mb-2 text-sm font-medium">推送范围</div>
|
<PushScopePicker v-model:scope="scope" v-model:target="target" />
|
|
<Alert
|
v-if="resultMessage"
|
class="mt-4"
|
:type="resultSuccess ? 'success' : 'error'"
|
:message="resultMessage"
|
show-icon
|
/>
|
</div>
|
|
<template #footer>
|
<div class="flex justify-end gap-2">
|
<Button @click="modalApi.close()">取消</Button>
|
<Button type="primary" :loading="pushing" @click="handlePush">
|
确认推送
|
</Button>
|
</div>
|
</template>
|
</Modal>
|
</template>
|
