feat: 商户中心展示商户全量关联信息
对齐后端 /merchant/info 聚合结构,页面按基本信息、资质合同、门店、员工、日志分区展示商户中心数据。
This commit is contained in:
@@ -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');
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user