|
|
@@ -1,12 +1,34 @@
|
|
|
+<!--
|
|
|
+ 花材销售排行:按花材汇总数量/金额/毛利;timeType 切换记账时间(bill) / 发货时间(send)。
|
|
|
+-->
|
|
|
<template>
|
|
|
<view class="app-content">
|
|
|
<view class="ex-page">
|
|
|
- <view class="top-bar">
|
|
|
- <DateSelect class="bar" top="0" @selectDateFn="selectDateFn" />
|
|
|
- <button class="admin-button-com middle blue" style="margin-left:30upx;position: absolute;top:0;right:130upx;" @click="changeStaff()">
|
|
|
- {{selectStaff.id == 0 ?'选采购人':selectStaff.name}}
|
|
|
- </button>
|
|
|
- </view>
|
|
|
+ <!-- 筛选区两行:上时间类型+采购人,下日期选择,避免互相遮挡 -->
|
|
|
+ <view class="filter-panel">
|
|
|
+ <view class="filter-row filter-row-main">
|
|
|
+ <view class="time-type-row">
|
|
|
+ <view
|
|
|
+ class="time-type-item"
|
|
|
+ :class="{ active: params.timeType === 'bill' }"
|
|
|
+ @click="changeTimeType('bill')"
|
|
|
+ >记账时间</view>
|
|
|
+ <view
|
|
|
+ class="time-type-item"
|
|
|
+ :class="{ active: params.timeType === 'send' }"
|
|
|
+ @click="changeTimeType('send')"
|
|
|
+ >发货时间</view>
|
|
|
+ </view>
|
|
|
+ <button
|
|
|
+ class="admin-button-com staff-btn"
|
|
|
+ :class="selectStaff.id == 0 ? 'default' : 'blue'"
|
|
|
+ @click="changeStaff()"
|
|
|
+ >{{ selectStaff.id == 0 ? '选采购人' : selectStaff.name }}</button>
|
|
|
+ </view>
|
|
|
+ <view class="filter-row filter-row-date">
|
|
|
+ <DateSelect class="bar" top="0" @selectDateFn="selectDateFn" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<scroll-view scroll-y scroll-with-animation class="main-view">
|
|
|
<view class="space-view ex-table">
|
|
|
<block v-if="!$util.isEmpty(profile)">
|
|
|
@@ -98,7 +120,9 @@ export default {
|
|
|
endTime: "",
|
|
|
sort:"num",
|
|
|
staffId:0,
|
|
|
- staffName:''
|
|
|
+ staffName:'',
|
|
|
+ // bill=记账时间(默认) / send=发货时间
|
|
|
+ timeType: 'bill',
|
|
|
},
|
|
|
profile:[],
|
|
|
staffData:[],
|
|
|
@@ -144,6 +168,12 @@ export default {
|
|
|
this.params = {...this.params,...val}
|
|
|
this.init();
|
|
|
},
|
|
|
+ /** 切换记账时间 / 发货时间并刷新 */
|
|
|
+ changeTimeType(type) {
|
|
|
+ if (this.params.timeType === type) return
|
|
|
+ this.params.timeType = type
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
rankByFn(rank){
|
|
|
this.getStatList(rank)
|
|
|
},
|
|
|
@@ -168,27 +198,84 @@ export default {
|
|
|
<style lang="scss" scoped>
|
|
|
.ex-page {
|
|
|
background: white;
|
|
|
- padding-top:20upx;
|
|
|
+ padding-top: 12upx;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- .top-bar {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
+ .filter-panel {
|
|
|
+ position: relative;
|
|
|
+ z-index: 20;
|
|
|
+ padding: 8upx 20upx 16upx;
|
|
|
+ background: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .filter-row {
|
|
|
display: flex;
|
|
|
+ align-items: center;
|
|
|
width: 100%;
|
|
|
- z-index: 20;
|
|
|
- .bar{
|
|
|
- width: 50%;
|
|
|
- height: 100%;
|
|
|
- text-align: center;
|
|
|
- &:nth-child(1){
|
|
|
- border-right: 1upx solid #eeeeec;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .filter-row-main {
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 12upx;
|
|
|
+ }
|
|
|
+ .filter-row-date {
|
|
|
+ min-height: 56upx;
|
|
|
+ padding: 0 8upx;
|
|
|
+ background: #f7f8fa;
|
|
|
+ border-radius: 12upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .time-type-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .time-type-item {
|
|
|
+ height: 56upx;
|
|
|
+ line-height: 56upx;
|
|
|
+ padding: 0 22upx;
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #666;
|
|
|
+ background: #f0f2f5;
|
|
|
+ border-radius: 28upx;
|
|
|
+ margin-right: 12upx;
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
}
|
|
|
+ &.active {
|
|
|
+ color: #fff;
|
|
|
+ background: #08b955;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .staff-btn {
|
|
|
+ flex-shrink: 0;
|
|
|
+ height: 56upx;
|
|
|
+ line-height: 56upx;
|
|
|
+ min-width: 160upx;
|
|
|
+ max-width: 240upx;
|
|
|
+ padding: 0 24upx;
|
|
|
+ margin: 0;
|
|
|
+ font-size: 26upx;
|
|
|
+ border-radius: 28upx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ &.default {
|
|
|
+ color: #3385ff;
|
|
|
+ background: #eef5ff;
|
|
|
+ border: 1upx solid #b7d4ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bar {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
.main-view {
|
|
|
- margin-top: 90upx;
|
|
|
+ margin-top: 0;
|
|
|
flex: 1;
|
|
|
background-color: #f9fbfc;
|
|
|
.space-view {
|