104 lines
2.3 KiB
Vue
104 lines
2.3 KiB
Vue
<script lang="ts" setup>
|
|
import { useTemplateRef } from 'vue';
|
|
import { NSelect } from 'naive-ui';
|
|
import { client, safeClient } from '@/service/api';
|
|
import type { TableBaseColumns, TableFetchData, TableFilterColumns, TableInst } from '@/components/table';
|
|
|
|
defineOptions({
|
|
name: 'TeamDialog'
|
|
});
|
|
|
|
const props = defineProps<{
|
|
code: string;
|
|
}>();
|
|
|
|
const tableInst = useTemplateRef<TableInst>('tableInst');
|
|
|
|
const fetchData: TableFetchData = ({ pagination, filter }) => {
|
|
return safeClient(() =>
|
|
client.api.admin.team.members.get({ query: { referralCode: props.code, ...pagination, ...filter } })
|
|
);
|
|
};
|
|
|
|
const { data } = safeClient(client.api.admin.referrals.summary.get({ query: { referralCode: props.code } }));
|
|
|
|
const columns: TableBaseColumns = [
|
|
{
|
|
key: 'descendant.name',
|
|
title: '姓名'
|
|
},
|
|
{
|
|
key: 'descendant.username',
|
|
title: '手机号'
|
|
},
|
|
{
|
|
key: 'directCount',
|
|
title: '直属人数'
|
|
},
|
|
{
|
|
key: 'depthConfig.commissionRate',
|
|
title: '佣金比例(%)'
|
|
},
|
|
{
|
|
key: 'depthConfig.createdAt',
|
|
title: '加入时间'
|
|
},
|
|
{
|
|
key: 'depthConfig.depth',
|
|
title: '团队层级'
|
|
},
|
|
{
|
|
key: 'ancestorId',
|
|
title: '上级ID'
|
|
}
|
|
];
|
|
|
|
const filterColumns: TableFilterColumns = [
|
|
{
|
|
key: 'depth',
|
|
title: '团队层级',
|
|
component: NSelect,
|
|
componentProps: {
|
|
options: [
|
|
{ label: '一级', value: '1' },
|
|
{ label: '二级', value: '2' },
|
|
{ label: '三级', value: '3' }
|
|
]
|
|
}
|
|
}
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mt-5">
|
|
<NCard>
|
|
<NRow>
|
|
<NCol :span="6">
|
|
<NStatistic label="团队总人数" :value="data?.totalCount || 0" />
|
|
</NCol>
|
|
<NCol :span="6">
|
|
<NStatistic label="一级" :value="data?.level1Count || 0" />
|
|
</NCol>
|
|
<NCol :span="6">
|
|
<NStatistic label="二级" :value="data?.level2Count || 0" />
|
|
</NCol>
|
|
<NCol :span="6">
|
|
<NStatistic label="三级" :value="data?.level3Count || 0" />
|
|
</NCol>
|
|
</NRow>
|
|
</NCard>
|
|
|
|
<TableBase
|
|
ref="tableInst"
|
|
:fetch-data="fetchData"
|
|
:columns="columns"
|
|
:filter-columns="filterColumns"
|
|
:scroll-x="800"
|
|
:show-header-operation="false"
|
|
:filter-columns-count="3"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="css" scoped></style>
|