<script lang="ts" setup>
|
import type { WxCpNoticeApi } from '#/api/wxcp/notice';
|
|
import { ref } from 'vue';
|
|
import { useVbenModal } from '@vben/common-ui';
|
import { Alert, Button, message } from 'ant-design-vue';
|
|
import { pushNotice } from '#/api/wxcp/notice';
|
|
import PushScopePicker from '../../components/push-scope-picker.vue';
|
import { PUSH_SCOPE } from '../../data';
|
|
defineOptions({ name: 'WxCpNoticePushModal' });
|
|
const emit = defineEmits<{ success: [] }>();
|
|
const notice = ref<WxCpNoticeApi.Notice>({});
|
const scope = ref<number>(PUSH_SCOPE.ALL);
|
const target = ref<string>('');
|
const pushing = ref(false);
|
const resultMessage = ref('');
|
|
const [Modal, modalApi] = useVbenModal({
|
onOpenChange(isOpen: boolean) {
|
if (!isOpen) {
|
notice.value = {};
|
resultMessage.value = '';
|
return;
|
}
|
const data = modalApi.getData<{ notice: WxCpNoticeApi.Notice }>();
|
notice.value = data.notice ?? {};
|
scope.value = data.notice?.pushScope ?? PUSH_SCOPE.ALL;
|
target.value = data.notice?.pushTarget ?? '';
|
},
|
});
|
|
async function handlePush() {
|
if (!notice.value.id) {
|
return;
|
}
|
if (scope.value !== PUSH_SCOPE.ALL && !target.value.trim()) {
|
message.warning('选择「指定部门」或「指定成员」时，请先选择推送目标');
|
return;
|
}
|
pushing.value = true;
|
resultMessage.value = '';
|
try {
|
const res = await pushNotice({
|
id: notice.value.id,
|
pushScope: scope.value,
|
pushTarget: scope.value === PUSH_SCOPE.ALL ? '' : target.value,
|
});
|
if (res?.success) {
|
message.success('推送成功');
|
emit('success');
|
await modalApi.close();
|
} else {
|
resultMessage.value = res?.message || '推送失败';
|
}
|
} catch (error: unknown) {
|
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">{{ notice.title }}</div>
|
<div class="text-gray-500">
|
推送后成员的企业微信会收到纯文本消息，内容超过 600 字会自动截断。
|
</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="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>
|
