feat: 商户中心展示商户全量关联信息

对齐后端 /merchant/info 聚合结构,页面按基本信息、资质合同、门店、员工、日志分区展示商户中心数据。
This commit is contained in:
2026-02-06 13:45:50 +08:00
parent dc0259339e
commit c8b63cf0f5
2 changed files with 380 additions and 64 deletions

View File

@@ -1,41 +1,164 @@
import { requestClient } from '#/api/request';
/**
* 商户信息 DTO
* 商户门店信息
*/
export interface MerchantDto {
export interface MerchantStoreDto {
/** 门店ID */
id: string;
/** 门店名称 */
name: string;
/** 营业执照号 */
licenseNumber?: string;
/** 联系电话 */
contactPhone?: string;
/** 门店地址 */
address: string;
/** 门店状态 */
status: number;
}
/**
* 商户详情信息
*/
export interface MerchantDetailDto {
/** 商户ID */
id: string;
/** 租户ID */
tenantId: string;
/** 租户名称 */
tenantName?: string;
/** 商户名称 */
merchantName: string;
/** 联系人 */
contactName: string;
name: string;
/** 经营模式 */
operatingMode?: number;
/** 营业执照号 */
licenseNumber?: string;
/** 法人/负责人 */
legalRepresentative?: string;
/** 注册地址 */
registeredAddress?: string;
/** 联系电话 */
contactPhone: string;
/** 商户地址 */
address: string;
/** 商户状态 (1: 正常, 2: 禁用) */
contactPhone?: string;
/** 联系邮箱 */
contactEmail?: string;
/** 商户状态 */
status: number;
/** 营业执照代码 */
businessLicenseCode: string;
/** 商户简介 */
description: string;
/** 是否冻结 */
isFrozen: boolean;
/** 冻结原因 */
frozenReason?: string;
/** 冻结时间 */
frozenAt?: null | string;
/** 审核通过人 */
approvedBy?: string;
/** 审核通过时间 */
approvedAt?: null | string;
/** 关联门店 */
stores: MerchantStoreDto[];
/** 并发版本 */
rowVersion?: string;
/** 创建时间 */
createTime: string;
/** 商户Logo */
logo?: string;
createdAt: string;
/** 创建人 */
createdBy?: string;
/** 更新时间 */
updatedAt?: null | string;
/** 更新人 */
updatedBy?: string;
}
/**
* 获取当前商户信息
* 商户资质信息
*/
export interface MerchantDocumentDto {
id: string;
merchantId: string;
documentType: number;
status: number;
fileUrl: string;
documentNumber?: string;
issuedAt?: null | string;
expiresAt?: null | string;
remarks?: string;
createdAt: string;
}
/**
* 商户合同信息
*/
export interface MerchantContractDto {
id: string;
merchantId: string;
contractNumber: string;
status: number;
startDate: string;
endDate: string;
fileUrl: string;
signedAt?: null | string;
terminatedAt?: null | string;
terminationReason?: string;
}
/**
* 商户员工信息
*/
export interface MerchantStaffDto {
id: string;
tenantId: string;
merchantId: string;
storeId?: null | string;
name: string;
phone: string;
email?: string;
roleType: number;
status: number;
}
/**
* 商户审核日志
*/
export interface MerchantAuditLogDto {
id: string;
merchantId: string;
action: number;
operatorId?: string;
title: string;
description?: string;
operatorName?: string;
ipAddress?: string;
createdAt: string;
}
/**
* 商户变更日志
*/
export interface MerchantChangeLogDto {
id: string;
fieldName: string;
oldValue?: string;
newValue?: string;
changedBy?: string;
changedByName?: string;
changedAt: string;
changeReason?: string;
}
/**
* 商户中心聚合信息
*/
export interface CurrentMerchantCenterDto {
merchant: MerchantDetailDto;
documents: MerchantDocumentDto[];
contracts: MerchantContractDto[];
staffs: MerchantStaffDto[];
auditLogs: MerchantAuditLogDto[];
changeLogs: MerchantChangeLogDto[];
}
/**
* 获取当前商户中心信息
*/
export async function getMerchantInfoApi() {
return requestClient.get<MerchantDto>('/merchant/info');
}
/**
* 更新商户信息
*/
export async function updateMerchantInfoApi(data: Partial<MerchantDto>) {
return requestClient.post('/merchant/update', data);
return requestClient.get<CurrentMerchantCenterDto>('/merchant/info');
}

View File

@@ -1,5 +1,11 @@
<script setup lang="ts">
import type { MerchantDto } from '#/api/merchant';
import type {
CurrentMerchantCenterDto,
MerchantAuditLogDto,
MerchantChangeLogDto,
MerchantContractDto,
MerchantDocumentDto,
} from '#/api/merchant';
import { computed, onMounted, ref } from 'vue';
@@ -8,9 +14,9 @@ import { useUserStore } from '@vben/stores';
import { getMerchantInfoApi } from '#/api/merchant';
// 1. 状态定义
// 1. 定义页面状态
const userStore = useUserStore();
const merchantInfo = ref<MerchantDto | null>(null);
const merchantCenterInfo = ref<CurrentMerchantCenterDto | null>(null);
const loading = ref(false);
const tabsValue = ref('basic');
@@ -20,41 +26,174 @@ const tabs = [
value: 'basic',
},
{
label: '资质信息',
value: 'license',
label: '资质合同',
value: 'qualification',
},
{
label: '门店信息',
value: 'stores',
},
{
label: '员工信息',
value: 'staffs',
},
{
label: '日志记录',
value: 'logs',
},
];
// 2. 获取数据
// 2. 请求商户中心聚合信息
async function fetchMerchantInfo() {
loading.value = true;
try {
const data = await getMerchantInfoApi();
merchantInfo.value = data;
} catch (error) {
console.error('获取商户信息失败:', error);
merchantCenterInfo.value = await getMerchantInfoApi();
} finally {
loading.value = false;
}
}
onMounted(() => {
fetchMerchantInfo();
onMounted(async () => {
await fetchMerchantInfo();
});
// 3. 格式化显示
const displayInfo = computed(() => [
{ label: '商户名称', value: merchantInfo.value?.merchantName },
{ label: '联系人', value: merchantInfo.value?.contactName },
// 3. 计算视图展示数据
const merchantInfo = computed(() => merchantCenterInfo.value?.merchant ?? null);
const stores = computed(() => merchantInfo.value?.stores ?? []);
const staffs = computed(() => merchantCenterInfo.value?.staffs ?? []);
const documents = computed(() => merchantCenterInfo.value?.documents ?? []);
const contracts = computed(() => merchantCenterInfo.value?.contracts ?? []);
const auditLogs = computed(() => merchantCenterInfo.value?.auditLogs ?? []);
const changeLogs = computed(() => merchantCenterInfo.value?.changeLogs ?? []);
const basicInfo = computed(() => [
{ label: '商户ID', value: merchantInfo.value?.id },
{ label: '租户ID', value: merchantInfo.value?.tenantId },
{ label: '租户名称', value: merchantInfo.value?.tenantName },
{ label: '商户名称', value: merchantInfo.value?.name },
{ label: '经营模式', value: merchantInfo.value?.operatingMode },
{ label: '商户状态', value: merchantInfo.value?.status },
{ label: '营业执照号', value: merchantInfo.value?.licenseNumber },
{ label: '法人/负责人', value: merchantInfo.value?.legalRepresentative },
{ label: '注册地址', value: merchantInfo.value?.registeredAddress },
{ label: '联系电话', value: merchantInfo.value?.contactPhone },
{ label: '商户地址', value: merchantInfo.value?.address },
{ label: '创建时间', value: merchantInfo.value?.createTime },
{ label: '联系邮箱', value: merchantInfo.value?.contactEmail },
{ label: '是否冻结', value: merchantInfo.value?.isFrozen ? '是' : '否' },
{ label: '冻结原因', value: merchantInfo.value?.frozenReason },
{ label: '冻结时间', value: merchantInfo.value?.frozenAt },
{ label: '审核通过人', value: merchantInfo.value?.approvedBy },
{ label: '审核通过时间', value: merchantInfo.value?.approvedAt },
{ label: '创建时间', value: merchantInfo.value?.createdAt },
{ label: '更新时间', value: merchantInfo.value?.updatedAt },
]);
const licenseInfo = computed(() => [
{ label: '营业执照代码', value: merchantInfo.value?.businessLicenseCode },
{ label: '商户简介', value: merchantInfo.value?.description },
]);
const documentColumns = [
{ dataIndex: 'id', key: 'id', title: '证照ID' },
{ dataIndex: 'documentType', key: 'documentType', title: '证照类型' },
{ dataIndex: 'status', key: 'status', title: '审核状态' },
{ dataIndex: 'documentNumber', key: 'documentNumber', title: '证照编号' },
{ dataIndex: 'issuedAt', key: 'issuedAt', title: '签发时间' },
{ dataIndex: 'expiresAt', key: 'expiresAt', title: '到期时间' },
{ dataIndex: 'fileUrl', key: 'fileUrl', title: '文件地址' },
{ dataIndex: 'remarks', key: 'remarks', title: '备注' },
];
const contractColumns = [
{ dataIndex: 'id', key: 'id', title: '合同ID' },
{ dataIndex: 'contractNumber', key: 'contractNumber', title: '合同编号' },
{ dataIndex: 'status', key: 'status', title: '合同状态' },
{ dataIndex: 'startDate', key: 'startDate', title: '开始时间' },
{ dataIndex: 'endDate', key: 'endDate', title: '结束时间' },
{ dataIndex: 'signedAt', key: 'signedAt', title: '签署时间' },
{ dataIndex: 'terminatedAt', key: 'terminatedAt', title: '终止时间' },
{
dataIndex: 'terminationReason',
key: 'terminationReason',
title: '终止原因',
},
{ dataIndex: 'fileUrl', key: 'fileUrl', title: '文件地址' },
];
const storeColumns = [
{ dataIndex: 'id', key: 'id', title: '门店ID' },
{ dataIndex: 'name', key: 'name', title: '门店名称' },
{ dataIndex: 'licenseNumber', key: 'licenseNumber', title: '营业执照号' },
{ dataIndex: 'contactPhone', key: 'contactPhone', title: '联系电话' },
{ dataIndex: 'address', key: 'address', title: '门店地址' },
{ dataIndex: 'status', key: 'status', title: '状态' },
];
const staffColumns = [
{ dataIndex: 'id', key: 'id', title: '员工ID' },
{ dataIndex: 'name', key: 'name', title: '姓名' },
{ dataIndex: 'phone', key: 'phone', title: '手机号' },
{ dataIndex: 'email', key: 'email', title: '邮箱' },
{ dataIndex: 'roleType', key: 'roleType', title: '角色类型' },
{ dataIndex: 'status', key: 'status', title: '状态' },
{ dataIndex: 'storeId', key: 'storeId', title: '门店ID' },
];
const auditColumns = [
{ dataIndex: 'id', key: 'id', title: '日志ID' },
{ dataIndex: 'action', key: 'action', title: '操作类型' },
{ dataIndex: 'title', key: 'title', title: '标题' },
{ dataIndex: 'description', key: 'description', title: '描述' },
{ dataIndex: 'operatorName', key: 'operatorName', title: '操作人' },
{ dataIndex: 'ipAddress', key: 'ipAddress', title: 'IP地址' },
{ dataIndex: 'createdAt', key: 'createdAt', title: '创建时间' },
];
const changeColumns = [
{ dataIndex: 'id', key: 'id', title: '日志ID' },
{ dataIndex: 'fieldName', key: 'fieldName', title: '变更字段' },
{ dataIndex: 'oldValue', key: 'oldValue', title: '旧值' },
{ dataIndex: 'newValue', key: 'newValue', title: '新值' },
{ dataIndex: 'changedByName', key: 'changedByName', title: '变更人' },
{ dataIndex: 'changeReason', key: 'changeReason', title: '变更原因' },
{ dataIndex: 'changedAt', key: 'changedAt', title: '变更时间' },
];
function buildDocumentRows(items: MerchantDocumentDto[]) {
return items.map((item) => ({
...item,
expiresAt: item.expiresAt ?? '-',
issuedAt: item.issuedAt ?? '-',
remarks: item.remarks ?? '-',
}));
}
function buildContractRows(items: MerchantContractDto[]) {
return items.map((item) => ({
...item,
signedAt: item.signedAt ?? '-',
terminatedAt: item.terminatedAt ?? '-',
terminationReason: item.terminationReason ?? '-',
}));
}
function buildAuditRows(items: MerchantAuditLogDto[]) {
return items.map((item) => ({
...item,
description: item.description ?? '-',
ipAddress: item.ipAddress ?? '-',
operatorName: item.operatorName ?? '-',
}));
}
function buildChangeRows(items: MerchantChangeLogDto[]) {
return items.map((item) => ({
...item,
oldValue: item.oldValue ?? '-',
newValue: item.newValue ?? '-',
changedByName: item.changedByName ?? '-',
changeReason: item.changeReason ?? '-',
}));
}
const documentRows = computed(() => buildDocumentRows(documents.value));
const contractRows = computed(() => buildContractRows(contracts.value));
const auditRows = computed(() => buildAuditRows(auditLogs.value));
const changeRows = computed(() => buildChangeRows(changeLogs.value));
</script>
<template>
@@ -63,21 +202,21 @@ const licenseInfo = computed(() => [
v-model:model-value="tabsValue"
:title="$t('page.merchant.center')"
:user-info="{
realName: merchantInfo?.merchantName || '加载中...',
avatar: merchantInfo?.logo || userStore.userInfo?.avatar || '',
realName: merchantInfo?.name || '加载中...',
avatar: userStore.userInfo?.avatar || '',
userId: userStore.userInfo?.userId || '',
username: merchantInfo?.contactName || '',
username:
merchantInfo?.contactPhone || userStore.userInfo?.username || '',
}"
:tabs="tabs"
>
<template #content>
<div v-loading="loading" class="rounded-lg bg-card p-6">
<!-- 基本信息 -->
<div v-if="tabsValue === 'basic'">
<h3 class="mb-4 text-lg font-medium">基本信息</h3>
<a-descriptions :column="1" bordered>
<a-descriptions-item
v-for="item in displayInfo"
v-for="item in basicInfo"
:key="item.label"
:label="item.label"
>
@@ -86,18 +225,72 @@ const licenseInfo = computed(() => [
</a-descriptions>
</div>
<!-- 资质信息 -->
<div v-if="tabsValue === 'license'">
<h3 class="mb-4 text-lg font-medium">资质信息</h3>
<a-descriptions :column="1" bordered>
<a-descriptions-item
v-for="item in licenseInfo"
:key="item.label"
:label="item.label"
>
{{ item.value || '-' }}
</a-descriptions-item>
</a-descriptions>
<div v-else-if="tabsValue === 'qualification'" class="space-y-6">
<div>
<h3 class="mb-4 text-lg font-medium">商户资质</h3>
<a-table
:columns="documentColumns"
:data-source="documentRows"
:pagination="false"
row-key="id"
size="small"
/>
</div>
<div>
<h3 class="mb-4 text-lg font-medium">商户合同</h3>
<a-table
:columns="contractColumns"
:data-source="contractRows"
:pagination="false"
row-key="id"
size="small"
/>
</div>
</div>
<div v-else-if="tabsValue === 'stores'">
<h3 class="mb-4 text-lg font-medium">关联门店</h3>
<a-table
:columns="storeColumns"
:data-source="stores"
:pagination="false"
row-key="id"
size="small"
/>
</div>
<div v-else-if="tabsValue === 'staffs'">
<h3 class="mb-4 text-lg font-medium">商户员工</h3>
<a-table
:columns="staffColumns"
:data-source="staffs"
:pagination="false"
row-key="id"
size="small"
/>
</div>
<div v-else-if="tabsValue === 'logs'" class="space-y-6">
<div>
<h3 class="mb-4 text-lg font-medium">审核日志</h3>
<a-table
:columns="auditColumns"
:data-source="auditRows"
:pagination="false"
row-key="id"
size="small"
/>
</div>
<div>
<h3 class="mb-4 text-lg font-medium">变更日志</h3>
<a-table
:columns="changeColumns"
:data-source="changeRows"
:pagination="false"
row-key="id"
size="small"
/>
</div>
</div>
</div>
</template>