97 lines
2.4 KiB
Vue
97 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { Page } from '@vben/common-ui';
|
|
|
|
import CustomerDetailDrawer from './components/CustomerDetailDrawer.vue';
|
|
import CustomerFilterBar from './components/CustomerFilterBar.vue';
|
|
import CustomerProfileDrawer from './components/CustomerProfileDrawer.vue';
|
|
import CustomerStatsBar from './components/CustomerStatsBar.vue';
|
|
import CustomerTableCard from './components/CustomerTableCard.vue';
|
|
import { useCustomerListPage } from './composables/useCustomerListPage';
|
|
|
|
const {
|
|
canManage,
|
|
detail,
|
|
filters,
|
|
handleExport,
|
|
handlePageChange,
|
|
handleReset,
|
|
handleSearch,
|
|
isDetailDrawerOpen,
|
|
isDetailLoading,
|
|
isExporting,
|
|
isListLoading,
|
|
isProfileDrawerOpen,
|
|
isProfileLoading,
|
|
isStoreLoading,
|
|
openDetail,
|
|
openProfile,
|
|
openProfilePage,
|
|
pagination,
|
|
profile,
|
|
rows,
|
|
selectedStoreId,
|
|
setDetailDrawerOpen,
|
|
setKeyword,
|
|
setOrderCountRange,
|
|
setProfileDrawerOpen,
|
|
setRegisterPeriod,
|
|
setSelectedStoreId,
|
|
setTag,
|
|
stats,
|
|
storeOptions,
|
|
} = useCustomerListPage();
|
|
</script>
|
|
|
|
<template>
|
|
<Page title="客户列表" content-class="page-customer-list">
|
|
<div class="cl-page">
|
|
<CustomerFilterBar
|
|
:selected-store-id="selectedStoreId"
|
|
:store-options="storeOptions"
|
|
:is-store-loading="isStoreLoading"
|
|
:filters="filters"
|
|
:show-export="canManage"
|
|
:is-exporting="isExporting"
|
|
@update:selected-store-id="setSelectedStoreId"
|
|
@update:tag="setTag"
|
|
@update:order-count-range="setOrderCountRange"
|
|
@update:register-period="setRegisterPeriod"
|
|
@update:keyword="setKeyword"
|
|
@search="handleSearch"
|
|
@reset="handleReset"
|
|
@export="handleExport"
|
|
/>
|
|
|
|
<CustomerStatsBar :stats="stats" />
|
|
|
|
<CustomerTableCard
|
|
:rows="rows"
|
|
:loading="isListLoading"
|
|
:pagination="pagination"
|
|
@page-change="handlePageChange"
|
|
@detail="openDetail"
|
|
/>
|
|
</div>
|
|
|
|
<CustomerDetailDrawer
|
|
:open="isDetailDrawerOpen"
|
|
:loading="isDetailLoading"
|
|
:detail="detail"
|
|
@close="setDetailDrawerOpen(false)"
|
|
@profile="openProfile"
|
|
@profile-page="openProfilePage"
|
|
/>
|
|
|
|
<CustomerProfileDrawer
|
|
:open="isProfileDrawerOpen"
|
|
:loading="isProfileLoading"
|
|
:profile="profile"
|
|
@close="setProfileDrawerOpen(false)"
|
|
/>
|
|
</Page>
|
|
</template>
|
|
|
|
<style lang="less">
|
|
@import './styles/index.less';
|
|
</style>
|