msumshk/TakeoutSaaS.TenantUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复商户中心仅展示基础信息

Browse Source
This commit is contained in:
MSuMshk
2026-02-06 16:51:11 +08:00
parent dc65dfc382
commit 0a161d185e
1 changed files with 360 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

364
apps/web-antd/src/views/merchant/center/index.vue
View File

@@ -1,13 +1,29 @@
<script setup lang="ts">
import { ref } from 'vue';
import type {
CurrentMerchantCenterDto,
MerchantAuditLogDto,
MerchantChangeLogDto,
MerchantContractDto,
MerchantDocumentDto,
MerchantStaffDto,
MerchantStoreDto,
} from '#/api/merchant';
import { computed, onMounted, ref } from 'vue';
import { Profile } from '@vben/common-ui';
import { useUserStore } from '@vben/stores';
import { Alert, Empty, List, message, Spin, Tag } from 'ant-design-vue';
import { getMerchantInfoApi } from '#/api/merchant';
import MerchantSetting from './merchant-setting.vue';
const userStore = useUserStore();
const tabsValue = ref('basic');
const loading = ref(false);
const merchantCenter = ref<CurrentMerchantCenterDto | null>(null);
const tabs = [
{ label: '基本信息', value: 'basic' },
@@ -16,6 +32,146 @@ const tabs = [
{ label: '员工信息', value: 'staffs' },
{ label: '日志记录', value: 'logs' },
];
const merchantStores = computed<MerchantStoreDto[]>(() => {
return merchantCenter.value?.merchant.stores ?? [];
});
const merchantDocuments = computed<MerchantDocumentDto[]>(() => {
return merchantCenter.value?.documents ?? [];
});
const merchantContracts = computed<MerchantContractDto[]>(() => {
return merchantCenter.value?.contracts ?? [];
});
const merchantStaffs = computed<MerchantStaffDto[]>(() => {
return merchantCenter.value?.staffs ?? [];
});
const merchantAuditLogs = computed<MerchantAuditLogDto[]>(() => {
return merchantCenter.value?.auditLogs ?? [];
});
const merchantChangeLogs = computed<MerchantChangeLogDto[]>(() => {
return merchantCenter.value?.changeLogs ?? [];
});
function formatDateTime(value?: null | string) {
if (!value) {
return '--';
}
return new Date(value).toLocaleString('zh-CN', { hour12: false });
}
function resolveStoreStatus(status: number) {
if (status === 1) {
return '营业中';
}
if (status === 2) {
return '停业中';
}
return `状态${status}`;
}
function resolveContractStatus(status: number) {
if (status === 1) {
return '生效中';
}
if (status === 2) {
return '已终止';
}
if (status === 3) {
return '已过期';
}
return `状态${status}`;
}
function resolveDocumentType(documentType: number) {
if (documentType === 1) {
return '营业执照';
}
if (documentType === 2) {
return '食品经营许可证';
}
if (documentType === 3) {
return '法人身份证';
}
if (documentType === 4) {
return '门头照';
}
return `类型${documentType}`;
}
function resolveDocumentStatus(status: number) {
if (status === 1) {
return '待审核';
}
if (status === 2) {
return '已通过';
}
if (status === 3) {
return '已驳回';
}
return `状态${status}`;
}
function resolveStaffRole(roleType: number) {
if (roleType === 1) {
return '店长';
}
if (roleType === 2) {
return '店员';
}
if (roleType === 3) {
return '财务';
}
return `角色${roleType}`;
}
function resolveStaffStatus(status: number) {
if (status === 1) {
return '在职';
}
if (status === 2) {
return '离职';
}
return `状态${status}`;
}
async function loadMerchantCenter() {
loading.value = true;
try {
merchantCenter.value = await getMerchantInfoApi();
} catch {
message.error('商户中心信息加载失败');
} finally {
loading.value = false;
}
}
onMounted(() => {
loadMerchantCenter();
});
</script>
<template>
@@ -31,12 +187,210 @@ const tabs = [
:tabs="tabs"
>
<template #content>
<div class="rounded-lg bg-card">
<!-- 基本信息：使用表单形式，支持展示和修改 -->
<div class="rounded-lg bg-card p-4">
<Spin :spinning="loading">
<MerchantSetting v-if="tabsValue === 'basic'" />
<!-- 其他 Tab 暂时保留或后续根据需要优化 -->
<div v-else class="p-6 text-center text-gray-400">正在开发中...</div>
<template v-else-if="tabsValue === 'qualification'">
<div class="mb-3 text-base font-medium">资质证照</div>
<Empty
v-if="merchantDocuments.length === 0"
description="暂无资质证照"
/>
<List
v-else
:data-source="merchantDocuments"
item-layout="vertical"
>
<template #renderItem="{ item }">
<List.Item>
<div class="mb-2 flex flex-wrap items-center gap-2">
<Tag color="blue">
{{ resolveDocumentType(item.documentType) }}
</Tag>
<Tag>{{ resolveDocumentStatus(item.status) }}</Tag>
<span class="text-gray-500">
编号：{{ item.documentNumber || '--' }}
</span>
</div>
<div class="text-gray-600">
签发时间：{{ formatDateTime(item.issuedAt) }}
</div>
<div class="text-gray-600">
到期时间：{{ formatDateTime(item.expiresAt) }}
</div>
<div class="text-gray-600">
文件地址：
<a
:href="item.fileUrl"
class="text-blue-500"
target="_blank"
>
{{ item.fileUrl }}
</a>
</div>
<div class="text-gray-600">
备注：{{ item.remarks || '--' }}
</div>
</List.Item>
</template>
</List>
<div class="mb-3 mt-6 text-base font-medium">合同信息</div>
<Empty
v-if="merchantContracts.length === 0"
description="暂无合同"
/>
<List
v-else
:data-source="merchantContracts"
item-layout="vertical"
>
<template #renderItem="{ item }">
<List.Item>
<div class="mb-2 flex flex-wrap items-center gap-2">
<Tag color="purple">
合同号：{{ item.contractNumber }}
</Tag>
<Tag>{{ resolveContractStatus(item.status) }}</Tag>
</div>
<div class="text-gray-600">
生效日期：{{ formatDateTime(item.startDate) }}
</div>
<div class="text-gray-600">
截止日期：{{ formatDateTime(item.endDate) }}
</div>
<div class="text-gray-600">
签署时间：{{ formatDateTime(item.signedAt) }}
</div>
<div class="text-gray-600">
终止时间：{{ formatDateTime(item.terminatedAt) }}
</div>
<div class="text-gray-600">
终止原因：{{ item.terminationReason || '--' }}
</div>
</List.Item>
</template>
</List>
</template>
<template v-else-if="tabsValue === 'stores'">
<Empty
v-if="merchantStores.length === 0"
description="暂无门店信息"
/>
<List v-else :data-source="merchantStores" item-layout="vertical">
<template #renderItem="{ item }">
<List.Item>
<div class="mb-2 flex items-center gap-2">
<Tag color="green">{{ item.name }}</Tag>
<Tag>{{ resolveStoreStatus(item.status) }}</Tag>
</div>
<div class="text-gray-600">
门店地址：{{ item.address }}
</div>
<div class="text-gray-600">
联系电话：{{ item.contactPhone || '--' }}
</div>
<div class="text-gray-600">
营业执照号：{{ item.licenseNumber || '--' }}
</div>
</List.Item>
</template>
</List>
</template>
<template v-else-if="tabsValue === 'staffs'">
<Empty
v-if="merchantStaffs.length === 0"
description="暂无员工信息"
/>
<List v-else :data-source="merchantStaffs" item-layout="vertical">
<template #renderItem="{ item }">
<List.Item>
<div class="mb-2 flex items-center gap-2">
<Tag color="cyan">{{ item.name }}</Tag>
<Tag>{{ resolveStaffRole(item.roleType) }}</Tag>
<Tag>{{ resolveStaffStatus(item.status) }}</Tag>
</div>
<div class="text-gray-600">联系电话：{{ item.phone }}</div>
<div class="text-gray-600">
联系邮箱：{{ item.email || '--' }}
</div>
<div class="text-gray-600">
所属门店ID：{{ item.storeId || '--' }}
</div>
</List.Item>
</template>
</List>
</template>
<template v-else-if="tabsValue === 'logs'">
<Alert class="mb-4" message="审核日志" type="info" />
<Empty
v-if="merchantAuditLogs.length === 0"
description="暂无审核日志"
/>
<List
v-else
:data-source="merchantAuditLogs"
item-layout="vertical"
>
<template #renderItem="{ item }">
<List.Item>
<div class="mb-2 flex items-center gap-2">
<Tag color="orange">{{ item.title }}</Tag>
<Tag>动作{{ item.action }}</Tag>
</div>
<div class="text-gray-600">
操作人：{{ item.operatorName || '--' }}
</div>
<div class="text-gray-600">
操作描述：{{ item.description || '--' }}
</div>
<div class="text-gray-600">
操作IP：{{ item.ipAddress || '--' }}
</div>
<div class="text-gray-600">
操作时间：{{ formatDateTime(item.createdAt) }}
</div>
</List.Item>
</template>
</List>
<Alert class="mb-4 mt-6" message="变更日志" type="info" />
<Empty
v-if="merchantChangeLogs.length === 0"
description="暂无变更日志"
/>
<List
v-else
:data-source="merchantChangeLogs"
item-layout="vertical"
>
<template #renderItem="{ item }">
<List.Item>
<div class="mb-2 flex items-center gap-2">
<Tag color="gold">{{ item.fieldName }}</Tag>
<Tag>{{ item.changedByName || '--' }}</Tag>
</div>
<div class="text-gray-600">
旧值：{{ item.oldValue || '--' }}
</div>
<div class="text-gray-600">
新值：{{ item.newValue || '--' }}
</div>
<div class="text-gray-600">
变更原因：{{ item.changeReason || '--' }}
</div>
<div class="text-gray-600">
变更时间：{{ formatDateTime(item.changedAt) }}
</div>
</List.Item>
</template>
</List>
</template>
</Spin>
</div>
</template>
</Profile>