mirror of
https://github.com/hpd840321/craftlabs-authorization-sdk.git
synced 2026-06-09 18:10:30 +08:00
feat(web): add M8 todo center and notification settings pages
This commit is contained in:
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="toolbar">
|
||||
<span class="title">通知设置</span>
|
||||
<div class="actions">
|
||||
<el-button type="primary" :loading="saving" @click="handleSave">保存配置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-form label-position="top" style="max-width: 800px">
|
||||
<el-divider content-position="left">通知通道</el-divider>
|
||||
<el-checkbox-group v-model="channels" :disabled="loading">
|
||||
<el-checkbox value="IN_APP" checked disabled>站内待办</el-checkbox>
|
||||
<el-checkbox value="EMAIL" disabled>
|
||||
邮件
|
||||
<el-tooltip content="邮件通道将在后续版本支持" placement="top">
|
||||
<el-icon style="margin-left: 4px"><WarningFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</el-checkbox>
|
||||
<el-checkbox value="WECOM" disabled>
|
||||
企业微信
|
||||
<el-tooltip content="企业微信通道将在后续版本支持" placement="top">
|
||||
<el-icon style="margin-left: 4px"><WarningFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
|
||||
<el-divider content-position="left">事件订阅</el-divider>
|
||||
<el-table v-loading="loading" :data="subscriptions" stripe style="width: 100%">
|
||||
<el-table-column prop="eventType" label="事件类型" min-width="160" />
|
||||
<el-table-column prop="roleCode" label="角色" width="140" />
|
||||
<el-table-column label="站内通知" width="120">
|
||||
<template #default="{ row, $index }">
|
||||
<el-switch v-model="row.channelInApp" @change="onSwitchChange($index)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="聚合策略" width="160">
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.aggregationRule" placeholder="选择策略" style="width: 130px">
|
||||
<el-option label="即时" value="INSTANT" />
|
||||
<el-option label="按小时聚合" value="HOURLY" />
|
||||
<el-option label="按天聚合" value="DAILY" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { WarningFilled } from "@element-plus/icons-vue";
|
||||
import { useAuthStore } from "../stores/auth";
|
||||
import { getNotificationConfig, updateNotificationConfig } from "../api/platform";
|
||||
import { apiErrorMessage } from "../utils/apiErrorMessage";
|
||||
|
||||
const auth = useAuthStore();
|
||||
|
||||
const loading = ref(false);
|
||||
const saving = ref(false);
|
||||
const channels = ref(["IN_APP"]);
|
||||
const subscriptions = ref([]);
|
||||
|
||||
onMounted(async () => {
|
||||
auth.restoreAxiosAuth();
|
||||
await loadConfig();
|
||||
});
|
||||
|
||||
async function loadConfig() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await getNotificationConfig({});
|
||||
const body = data && typeof data === "object" ? data : {};
|
||||
subscriptions.value = Array.isArray(body.subscriptions) ? body.subscriptions : [];
|
||||
if (Array.isArray(body.channels)) {
|
||||
channels.value = body.channels;
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error(apiErrorMessage(e, "加载通知配置失败"));
|
||||
subscriptions.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onSwitchChange(index) {
|
||||
if (!subscriptions.value[index]) return;
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
saving.value = true;
|
||||
try {
|
||||
await updateNotificationConfig({
|
||||
channels: channels.value,
|
||||
subscriptions: subscriptions.value,
|
||||
});
|
||||
ElMessage.success("配置已保存");
|
||||
} catch (e) {
|
||||
ElMessage.error(apiErrorMessage(e, "保存配置失败"));
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.el-checkbox {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="toolbar">
|
||||
<span class="title">待办中心</span>
|
||||
<div class="actions">
|
||||
<el-select v-model="filterType" clearable placeholder="待办类型" class="filter" style="width: 160px">
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="Callback" value="CALLBACK" />
|
||||
<el-option label="SN 发放" value="SN_GRANT" />
|
||||
<el-option label="激活超期" value="ACTIVATION_OVERDUE" />
|
||||
<el-option label="换机审批" value="SWAP_APPROVAL" />
|
||||
</el-select>
|
||||
<el-button type="primary" :loading="loading" @click="handleQuery">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" :data="rows" stripe style="width: 100%">
|
||||
<el-table-column label="待办类型" width="140">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="todoTypeTagType(row.todoType)" size="small">
|
||||
{{ todoTypeLabel(row.todoType) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="优先级" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="priorityTagType(row.priority)" size="small">
|
||||
{{ priorityLabel(row.priority) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" width="170">
|
||||
<template #default="{ row }">{{ formatTime(row.createdAt) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="160" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link :loading="claimingId === row.id" @click="handleClaim(row.id)">认领</el-button>
|
||||
<el-button type="danger" link :loading="ignoringId === row.id" @click="handleIgnore(row.id)">忽略</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pager">
|
||||
<el-pagination
|
||||
v-model:current-page="page"
|
||||
v-model:page-size="pageSize"
|
||||
:total="total"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
background
|
||||
@current-change="load"
|
||||
@size-change="onSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useAuthStore } from "../stores/auth";
|
||||
import { listTodos, patchTodoStatus } from "../api/platform";
|
||||
import { apiErrorMessage } from "../utils/apiErrorMessage";
|
||||
|
||||
const auth = useAuthStore();
|
||||
|
||||
const loading = ref(false);
|
||||
const rows = ref([]);
|
||||
const total = ref(0);
|
||||
const page = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const filterType = ref("");
|
||||
const claimingId = ref(null);
|
||||
const ignoringId = ref(null);
|
||||
|
||||
onMounted(async () => {
|
||||
auth.restoreAxiosAuth();
|
||||
await load();
|
||||
});
|
||||
|
||||
function handleQuery() {
|
||||
page.value = 1;
|
||||
load();
|
||||
}
|
||||
|
||||
function onSizeChange() {
|
||||
page.value = 1;
|
||||
load();
|
||||
}
|
||||
|
||||
function todoTypeLabel(s) {
|
||||
const map = {
|
||||
CALLBACK: "Callback",
|
||||
SN_GRANT: "SN 发放",
|
||||
ACTIVATION_OVERDUE: "激活超期",
|
||||
SWAP_APPROVAL: "换机审批",
|
||||
};
|
||||
return map[s] ?? String(s ?? "—");
|
||||
}
|
||||
|
||||
function todoTypeTagType(s) {
|
||||
if (s === "CALLBACK") return "warning";
|
||||
if (s === "SN_GRANT") return "primary";
|
||||
if (s === "ACTIVATION_OVERDUE") return "danger";
|
||||
if (s === "SWAP_APPROVAL") return "";
|
||||
return "";
|
||||
}
|
||||
|
||||
function priorityLabel(s) {
|
||||
const map = { HIGH: "HIGH", MEDIUM: "MEDIUM", LOW: "LOW" };
|
||||
return map[s] ?? String(s ?? "—");
|
||||
}
|
||||
|
||||
function priorityTagType(s) {
|
||||
if (s === "HIGH") return "danger";
|
||||
if (s === "MEDIUM") return "warning";
|
||||
if (s === "LOW") return "info";
|
||||
return "";
|
||||
}
|
||||
|
||||
function formatTime(v) {
|
||||
if (v == null) return "—";
|
||||
if (typeof v === "string") return v.replace("T", " ").slice(0, 19);
|
||||
return String(v);
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await listTodos({
|
||||
page: page.value - 1,
|
||||
size: pageSize.value,
|
||||
todoType: filterType.value || undefined,
|
||||
});
|
||||
const body = data && typeof data === "object" ? data : {};
|
||||
rows.value = Array.isArray(body.content) ? body.content : [];
|
||||
total.value = Number(body.totalElements ?? body.total ?? 0);
|
||||
} catch (e) {
|
||||
ElMessage.error(apiErrorMessage(e, "加载待办列表失败"));
|
||||
rows.value = [];
|
||||
total.value = 0;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleClaim(id) {
|
||||
claimingId.value = id;
|
||||
try {
|
||||
await patchTodoStatus(id, { status: "PROCESSED" });
|
||||
ElMessage.success("已认领");
|
||||
await load();
|
||||
} catch (e) {
|
||||
ElMessage.error(apiErrorMessage(e, "认领失败"));
|
||||
} finally {
|
||||
claimingId.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleIgnore(id) {
|
||||
ignoringId.value = id;
|
||||
try {
|
||||
await patchTodoStatus(id, { status: "IGNORED" });
|
||||
ElMessage.success("已忽略");
|
||||
await load();
|
||||
} catch (e) {
|
||||
ElMessage.error(apiErrorMessage(e, "忽略失败"));
|
||||
} finally {
|
||||
ignoringId.value = null;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.pager {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user