mirror of
https://github.com/hpd840321/craftlabs-authorization-sdk.git
synced 2026-06-09 18:10:30 +08:00
feat(web): I5 callback inbox and integration catalog UI
Made-with: Cursor
This commit is contained in:
@@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="toolbar">
|
||||
<div class="head-left">
|
||||
<el-button link type="primary" @click="goList">← 收件箱</el-button>
|
||||
<span class="title">Callback 详情</span>
|
||||
<el-tag v-if="row" :type="statusTagType(row.status)" size="small">{{ statusLabel(row.status) }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-skeleton v-if="loading" :rows="8" animated />
|
||||
|
||||
<template v-else-if="row">
|
||||
<el-descriptions :column="2" border class="block">
|
||||
<el-descriptions-item label="ID">{{ row.id ?? "—" }}</el-descriptions-item>
|
||||
<el-descriptions-item label="来源系统">{{ row.sourceSystem ?? "—" }}</el-descriptions-item>
|
||||
<el-descriptions-item label="外部消息 ID">{{ row.externalMessageId ?? "—" }}</el-descriptions-item>
|
||||
<el-descriptions-item label="事件类型">{{ row.eventType ?? "—" }}</el-descriptions-item>
|
||||
<el-descriptions-item label="Schema 版本">{{ row.schemaVersion ?? "—" }}</el-descriptions-item>
|
||||
<el-descriptions-item label="幂等键">{{ row.idempotencyKey ?? "—" }}</el-descriptions-item>
|
||||
<el-descriptions-item label="SN">{{ row.snCode ?? "—" }}</el-descriptions-item>
|
||||
<el-descriptions-item label="项目 ID">{{ row.projectId ?? "—" }}</el-descriptions-item>
|
||||
<el-descriptions-item label="合同 ID">{{ row.contractId ?? "—" }}</el-descriptions-item>
|
||||
<el-descriptions-item label="许可 SN ID">{{ row.licenseSnId ?? "—" }}</el-descriptions-item>
|
||||
<el-descriptions-item label="产品线 ID">{{ row.productLineId ?? "—" }}</el-descriptions-item>
|
||||
<el-descriptions-item label="环境 ID">{{ row.integrationEnvironmentId ?? "—" }}</el-descriptions-item>
|
||||
<el-descriptions-item label="收件时间">{{ formatDateTime(row.receivedAt) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="处理时间">{{ formatDateTime(row.processedAt) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="失败原因" :span="2">{{ row.failureReason ?? "—" }}</el-descriptions-item>
|
||||
<el-descriptions-item label="备注" :span="2">{{ row.operatorNote ?? "—" }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<h3 class="section-title">Payload（脱敏预览）</h3>
|
||||
<pre class="payload-pre">{{ payloadDisplay }}</pre>
|
||||
|
||||
<h3 v-if="isPending" class="section-title">状态处置</h3>
|
||||
<div v-if="isPending" class="status-row">
|
||||
<el-button type="success" :loading="patchingStatus" @click="setStatus('PROCESSED')">标为已处理</el-button>
|
||||
<el-button type="danger" :loading="patchingStatus" @click="setStatus('FAILED')">标为失败</el-button>
|
||||
<el-button type="info" :loading="patchingStatus" @click="setStatus('IGNORED')">忽略</el-button>
|
||||
</div>
|
||||
|
||||
<h3 class="section-title">人工挂接（可选）</h3>
|
||||
<el-form label-width="120px" style="max-width: 520px">
|
||||
<el-form-item label="许可 SN ID">
|
||||
<el-input v-model="linkForm.licenseSnId" clearable placeholder="UUID 或数字 ID" />
|
||||
</el-form-item>
|
||||
<el-form-item label="项目 ID">
|
||||
<el-input v-model="linkForm.projectId" clearable placeholder="选填" />
|
||||
</el-form-item>
|
||||
<el-form-item label="合同 ID">
|
||||
<el-input v-model="linkForm.contractId" clearable placeholder="选填" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="savingLink" @click="saveLink">保存挂接</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<el-empty v-else description="未加载到记录" />
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, watch, onMounted } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { useAuthStore } from "../stores/auth";
|
||||
import { getCallbackInbox, patchCallbackInboxStatus, patchCallbackInboxLink } from "../api/platform";
|
||||
import { apiErrorMessage } from "../utils/apiErrorMessage";
|
||||
import { formatRedactedPayloadJson } from "../utils/redactPayload";
|
||||
|
||||
const auth = useAuthStore();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const loading = ref(false);
|
||||
const patchingStatus = ref(false);
|
||||
const savingLink = ref(false);
|
||||
const row = ref(null);
|
||||
|
||||
const linkForm = reactive({
|
||||
licenseSnId: "",
|
||||
projectId: "",
|
||||
contractId: "",
|
||||
});
|
||||
|
||||
const inboxId = computed(() => route.params.id);
|
||||
|
||||
const isPending = computed(() => String(row.value?.status ?? "").toUpperCase() === "PENDING");
|
||||
|
||||
const payloadDisplay = computed(() => {
|
||||
const r = row.value;
|
||||
if (!r) return "—";
|
||||
const raw = r.rawPayload ?? r.raw_payload ?? null;
|
||||
if (raw == null || raw === "") return "—";
|
||||
return formatRedactedPayloadJson(raw);
|
||||
});
|
||||
|
||||
function statusLabel(s) {
|
||||
const u = String(s ?? "").toUpperCase();
|
||||
const map = { PENDING: "待处理", PROCESSED: "已处理", FAILED: "失败", IGNORED: "忽略" };
|
||||
return map[u] ?? String(s ?? "—");
|
||||
}
|
||||
|
||||
function statusTagType(s) {
|
||||
const u = String(s ?? "").toUpperCase();
|
||||
if (u === "PENDING") return "warning";
|
||||
if (u === "PROCESSED") return "success";
|
||||
if (u === "FAILED") return "danger";
|
||||
if (u === "IGNORED") return "info";
|
||||
return "";
|
||||
}
|
||||
|
||||
function formatDateTime(v) {
|
||||
if (v == null || v === "") return "—";
|
||||
if (typeof v === "string") return v.replace("T", " ").slice(0, 19);
|
||||
return String(v);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => row.value,
|
||||
(r) => {
|
||||
if (!r) return;
|
||||
linkForm.licenseSnId = r.licenseSnId != null ? String(r.licenseSnId) : "";
|
||||
linkForm.projectId = r.projectId != null ? String(r.projectId) : "";
|
||||
linkForm.contractId = r.contractId != null ? String(r.contractId) : "";
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
auth.restoreAxiosAuth();
|
||||
await load();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => route.params.id,
|
||||
async () => {
|
||||
await load();
|
||||
}
|
||||
);
|
||||
|
||||
function goList() {
|
||||
router.push({ name: "callback-inbox" });
|
||||
}
|
||||
|
||||
async function load() {
|
||||
const id = inboxId.value;
|
||||
if (id == null || id === "") return;
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await getCallbackInbox(id);
|
||||
row.value = data && typeof data === "object" ? data : null;
|
||||
} catch (e) {
|
||||
ElMessage.error(apiErrorMessage(e, "加载详情失败"));
|
||||
row.value = null;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function setStatus(status) {
|
||||
const id = inboxId.value;
|
||||
if (id == null) return;
|
||||
const label = statusLabel(status);
|
||||
try {
|
||||
await ElMessageBox.confirm(`确认将状态更新为「${label}」？`, "确认", { type: "warning" });
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
patchingStatus.value = true;
|
||||
try {
|
||||
await patchCallbackInboxStatus(id, { status });
|
||||
ElMessage.success("状态已更新");
|
||||
await load();
|
||||
} catch (e) {
|
||||
ElMessage.error(apiErrorMessage(e, "状态更新失败"));
|
||||
} finally {
|
||||
patchingStatus.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function saveLink() {
|
||||
const id = inboxId.value;
|
||||
if (id == null) return;
|
||||
const body = {};
|
||||
if (linkForm.licenseSnId?.trim()) body.licenseSnId = linkForm.licenseSnId.trim();
|
||||
if (linkForm.projectId?.trim()) body.projectId = linkForm.projectId.trim();
|
||||
if (linkForm.contractId?.trim()) body.contractId = linkForm.contractId.trim();
|
||||
if (Object.keys(body).length === 0) {
|
||||
ElMessage.warning("请至少填写一项挂接字段");
|
||||
return;
|
||||
}
|
||||
savingLink.value = true;
|
||||
try {
|
||||
await patchCallbackInboxLink(id, body);
|
||||
ElMessage.success("挂接已保存");
|
||||
await load();
|
||||
} catch (e) {
|
||||
ElMessage.error(apiErrorMessage(e, "保存挂接失败"));
|
||||
} finally {
|
||||
savingLink.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.head-left {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
.block {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.section-title {
|
||||
margin: 16px 0 8px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.status-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.payload-pre {
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
background: #1e1e1e;
|
||||
color: #d4d4d4;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
overflow: auto;
|
||||
max-height: 420px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="toolbar">
|
||||
<span class="title">Callback 收件箱</span>
|
||||
<div class="actions">
|
||||
<el-select v-model="filterStatus" clearable placeholder="状态" class="filter" style="width: 140px">
|
||||
<el-option label="待处理 (PENDING)" value="PENDING" />
|
||||
<el-option label="已处理 (PROCESSED)" value="PROCESSED" />
|
||||
<el-option label="失败 (FAILED)" value="FAILED" />
|
||||
<el-option label="忽略 (IGNORED)" value="IGNORED" />
|
||||
</el-select>
|
||||
<el-input v-model="filterEventType" clearable placeholder="事件类型" class="filter" style="width: 160px" @keyup.enter="load" />
|
||||
<el-input v-model="filterSnCode" clearable placeholder="SN 编码" class="filter" style="width: 140px" @keyup.enter="load" />
|
||||
<el-input v-model="filterProjectId" clearable placeholder="项目 ID" class="filter" style="width: 120px" @keyup.enter="load" />
|
||||
<el-button type="primary" :loading="loading" @click="load">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" :data="rows" stripe style="width: 100%">
|
||||
<el-table-column prop="sourceSystem" label="来源" width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="externalMessageId" label="外部消息 ID" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="eventType" label="事件类型" min-width="140" show-overflow-tooltip />
|
||||
<el-table-column prop="snCode" label="SN" width="120" show-overflow-tooltip />
|
||||
<el-table-column label="状态" width="110">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="statusTagType(row.status)" size="small">{{ statusLabel(row.status) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="收件时间" width="170">
|
||||
<template #default="{ row }">{{ formatDateTime(row.receivedAt) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="goDetail(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 { useRouter } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useAuthStore } from "../stores/auth";
|
||||
import { listCallbackInbox } from "../api/platform";
|
||||
import { apiErrorMessage } from "../utils/apiErrorMessage";
|
||||
|
||||
const auth = useAuthStore();
|
||||
const router = useRouter();
|
||||
|
||||
const loading = ref(false);
|
||||
const rows = ref([]);
|
||||
const total = ref(0);
|
||||
const page = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const filterStatus = ref("");
|
||||
const filterEventType = ref("");
|
||||
const filterSnCode = ref("");
|
||||
const filterProjectId = ref("");
|
||||
|
||||
onMounted(async () => {
|
||||
auth.restoreAxiosAuth();
|
||||
await load();
|
||||
});
|
||||
|
||||
function onSizeChange() {
|
||||
page.value = 1;
|
||||
load();
|
||||
}
|
||||
|
||||
function statusLabel(s) {
|
||||
const u = String(s ?? "").toUpperCase();
|
||||
const map = { PENDING: "待处理", PROCESSED: "已处理", FAILED: "失败", IGNORED: "忽略" };
|
||||
return map[u] ?? String(s ?? "—");
|
||||
}
|
||||
|
||||
function statusTagType(s) {
|
||||
const u = String(s ?? "").toUpperCase();
|
||||
if (u === "PENDING") return "warning";
|
||||
if (u === "PROCESSED") return "success";
|
||||
if (u === "FAILED") return "danger";
|
||||
if (u === "IGNORED") return "info";
|
||||
return "";
|
||||
}
|
||||
|
||||
function formatDateTime(v) {
|
||||
if (v == null || v === "") 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 listCallbackInbox({
|
||||
page: page.value - 1,
|
||||
size: pageSize.value,
|
||||
status: filterStatus.value || undefined,
|
||||
eventType: filterEventType.value?.trim() || undefined,
|
||||
snCode: filterSnCode.value?.trim() || undefined,
|
||||
projectId: filterProjectId.value?.trim() || 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, "加载 Callback 收件箱失败"));
|
||||
rows.value = [];
|
||||
total.value = 0;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function goDetail(id) {
|
||||
router.push({ name: "callback-inbox-detail", params: { id: String(id) } });
|
||||
}
|
||||
</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>
|
||||
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="toolbar">
|
||||
<span class="title">集成环境</span>
|
||||
<el-button type="primary" :loading="loading" @click="load">刷新</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" :data="rows" stripe style="width: 100%">
|
||||
<el-table-column prop="code" label="编码" width="140" show-overflow-tooltip />
|
||||
<el-table-column prop="name" label="名称" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="kind" label="类型" width="120" show-overflow-tooltip />
|
||||
<el-table-column label="比特 URL" min-width="220" show-overflow-tooltip>
|
||||
<template #default="{ row }">{{ row.bitanswerBaseUrl ?? row.bitanswer_base_url ?? "—" }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="产品线 ID" width="120">
|
||||
<template #default="{ row }">{{ row.productLineId ?? row.product_line_id ?? "—" }}</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 { listIntegrationEnvironments } 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(20);
|
||||
|
||||
onMounted(async () => {
|
||||
auth.restoreAxiosAuth();
|
||||
await load();
|
||||
});
|
||||
|
||||
function onSizeChange() {
|
||||
page.value = 1;
|
||||
load();
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await listIntegrationEnvironments({
|
||||
page: page.value - 1,
|
||||
size: pageSize.value,
|
||||
});
|
||||
const body = data && typeof data === "object" ? data : {};
|
||||
rows.value = Array.isArray(body.content) ? body.content : Array.isArray(data) ? data : [];
|
||||
total.value = Number(body.totalElements ?? body.total ?? rows.value.length);
|
||||
} catch (e) {
|
||||
ElMessage.error(apiErrorMessage(e, "加载集成环境失败"));
|
||||
rows.value = [];
|
||||
total.value = 0;
|
||||
} finally {
|
||||
loading.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;
|
||||
}
|
||||
.pager {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="toolbar">
|
||||
<span class="title">产品线</span>
|
||||
<el-button type="primary" :loading="loading" @click="load">刷新</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" :data="rows" stripe style="width: 100%">
|
||||
<el-table-column prop="code" label="编码" width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="name" label="名称" min-width="180" show-overflow-tooltip />
|
||||
<el-table-column label="描述" min-width="200" show-overflow-tooltip>
|
||||
<template #default="{ row }">{{ row.description ?? "—" }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="启用" width="90">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.enabled === false || row.active === false" type="info" size="small">否</el-tag>
|
||||
<el-tag v-else type="success" size="small">是</el-tag>
|
||||
</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 { listProductLines } 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(20);
|
||||
|
||||
onMounted(async () => {
|
||||
auth.restoreAxiosAuth();
|
||||
await load();
|
||||
});
|
||||
|
||||
function onSizeChange() {
|
||||
page.value = 1;
|
||||
load();
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await listProductLines({
|
||||
page: page.value - 1,
|
||||
size: pageSize.value,
|
||||
});
|
||||
const body = data && typeof data === "object" ? data : {};
|
||||
rows.value = Array.isArray(body.content) ? body.content : Array.isArray(data) ? data : [];
|
||||
total.value = Number(body.totalElements ?? body.total ?? rows.value.length);
|
||||
} catch (e) {
|
||||
ElMessage.error(apiErrorMessage(e, "加载产品线失败"));
|
||||
rows.value = [];
|
||||
total.value = 0;
|
||||
} finally {
|
||||
loading.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;
|
||||
}
|
||||
.pager {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user