update permission and product
This commit is contained in:
Timi
@@ -2,16 +2,46 @@
|
||||
<div v-can="permissionCodes.salesOrder.read" class="sales-order-list">
|
||||
<div class="filters">
|
||||
<t-input v-model.trim="keyword" class="keyword" type="search" borderless clearable placeholder="搜索订单号、客户" />
|
||||
<t-dropdown-menu class="menus">
|
||||
<t-dropdown-item v-model="orderType" label="订单类型" :options="orderTypeOptions" @change="selectOrderType" />
|
||||
<t-dropdown-item v-model="status" label="订单状态" :options="statusOptions" @change="selectStatus" />
|
||||
<t-dropdown-item v-model="paymentStatus" label="收款状态" :options="paymentOptions" @change="selectPaymentStatus" />
|
||||
<t-dropdown-menu class="menus">
|
||||
<t-dropdown-item
|
||||
v-model="orderType"
|
||||
label="订单类型"
|
||||
:options="orderTypeOptions"
|
||||
@change="selectOrderType"
|
||||
/>
|
||||
<t-dropdown-item
|
||||
v-model="status"
|
||||
label="订单状态"
|
||||
:options="statusOptions"
|
||||
@change="selectStatus"
|
||||
/>
|
||||
<t-dropdown-item
|
||||
v-model="paymentStatus"
|
||||
label="收款状态"
|
||||
:options="paymentOptions"
|
||||
@change="selectPaymentStatus"
|
||||
/>
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<t-pull-down-refresh v-model="refreshing" :refresh-timeout="30000" @refresh="refresh" @scrolltolower="loadMore">
|
||||
<div v-if="viewMode" class="view-tip" v-text="viewMode === 'pending-receive' ? '当前显示未收清订单' : '当前显示待处理退款订单'" />
|
||||
<t-pull-down-refresh
|
||||
v-model="refreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="refresh"
|
||||
@scrolltolower="loadMore"
|
||||
>
|
||||
<div
|
||||
v-if="viewMode"
|
||||
class="view-tip"
|
||||
v-text="viewMode === 'pending-receive' ? '当前显示未收清订单' : '当前显示待处理退款订单'"
|
||||
/>
|
||||
<t-cell-group v-if="displayList.length" theme="card">
|
||||
<t-cell v-for="(item, index) in displayList" :key="item.id" arrow hover v-entrance-transition="index * 30" @click="toDetail(item)">
|
||||
<t-cell
|
||||
v-for="(item, index) in displayList"
|
||||
:key="item.id"
|
||||
arrow
|
||||
v-entrance-transition="index * 30"
|
||||
@click="toDetail(item)"
|
||||
>
|
||||
<template #title>
|
||||
<div class="title">
|
||||
<strong v-text="item.orderNo || item.id || '未命名订单'" />
|
||||
@@ -28,7 +58,7 @@
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<div v-else class="empty" v-text="loading ? '正在加载销售订单' : '暂无销售订单'" />
|
||||
<div v-else class="center-tips" v-text="loading ? '正在加载销售订单' : '暂无销售订单'" />
|
||||
<div class="center-tips" v-text="loading ? '正在加载' : noMore ? '已经到底了' : '上拉加载更多'" />
|
||||
</t-pull-down-refresh>
|
||||
</div>
|
||||
@@ -116,18 +146,83 @@ onUnmounted(() => { navBarStore.clearRight(); search.cancel(); });
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.sales-order-list { padding: var(--app-nav-height) 0 1rem;
|
||||
.filters { top: var(--app-nav-height); z-index: 10; padding: .75rem 1rem .5rem; position: sticky; background: var(--td-bg-color-page); box-shadow: var(--td-shadow-1);
|
||||
.keyword { border: 1px solid var(--td-component-border); background: var(--td-bg-color-container); border-radius: 1rem; }
|
||||
.menus { margin-top: .5rem; border-radius: .875rem;
|
||||
:deep(.t-dropdown-menu__item) { min-width: 0; }
|
||||
:deep(.t-dropdown-menu__title) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
||||
.sales-order-list {
|
||||
padding: var(--app-nav-height) 0 1rem;
|
||||
|
||||
.filters {
|
||||
top: var(--app-nav-height);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
padding: .75rem 1rem;
|
||||
position: sticky;
|
||||
background: #F5F5F8;
|
||||
box-shadow: var(--td-shadow-1);
|
||||
flex-direction: column;
|
||||
|
||||
.keyword {
|
||||
--td-input-vertical-padding: 8px 14px;
|
||||
|
||||
border: 1px solid var(--td-component-border);
|
||||
z-index: 1;
|
||||
background: var(--td-bg-color-container);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.menus {
|
||||
--td-spacer-1: 6px;
|
||||
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin-top: -1rem;
|
||||
padding-top: .8rem;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(148, 163, 184, .18);
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.t-dropdown-menu__item) {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:deep(.t-dropdown-menu__title) {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
.title, .description { gap: .5rem; display: flex; align-items: center; }
|
||||
.description { color: var(--td-text-color-secondary); flex-wrap: wrap; }
|
||||
.amount { color: var(--td-brand-color); font-weight: 700; }
|
||||
.view-tip { color: var(--td-text-color-secondary); padding: .75rem 1rem 0; font-size: .8125rem; }
|
||||
.empty { color: var(--td-text-color-secondary); padding: 3rem 1rem; text-align: center; }
|
||||
|
||||
.title, .description {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: var(--td-text-color-secondary);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.amount {
|
||||
color: var(--td-brand-color);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.view-tip {
|
||||
color: var(--td-text-color-secondary);
|
||||
padding: .75rem 1rem 0;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--td-text-color-secondary);
|
||||
padding: 3rem 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user