|
|
@@ -1,21 +1,49 @@
|
|
|
+<!--
|
|
|
+ 供货商采购入库单列表。
|
|
|
+ 顶栏：搜索 + 采购人；筛选条：发货时间、账单时间（入库日 entryTime）两套 DateSelect + 重置。
|
|
|
+ 日历不嵌进列表滚动区，避免 App 端被订单卡片盖住。
|
|
|
+-->
|
|
|
<template>
|
|
|
<view class="app-content">
|
|
|
<view class="order-page">
|
|
|
- <view class="input-wrap_box">
|
|
|
- <view>
|
|
|
- <AppSearchModule placeholder="核销码 / 名称 / 手机号" @input="searchFn"/>
|
|
|
+ <view class="page-header">
|
|
|
+ <view class="search-row">
|
|
|
+ <view class="search-hold">
|
|
|
+ <AppSearchModule placeholder="核销码 / 名称 / 手机号" @input="searchFn"/>
|
|
|
+ </view>
|
|
|
+ <button
|
|
|
+ :class="['admin-button-com', 'middle', 'staff-btn', cgStaffId ? 'blue' : 'default']"
|
|
|
+ @click="showCgStaff"
|
|
|
+ >{{ cgStaffName == '' ? '采购人' : cgStaffName }}</button>
|
|
|
</view>
|
|
|
- <view style="padding:0 0upx 0 20upx;" >
|
|
|
- <button class="admin-button-com middle blue" @click="showCgStaff">{{ cgStaffName==''?'采购人':'已选择'}}</button>
|
|
|
+ <view class="filter-row">
|
|
|
+ <view class="date-chip">
|
|
|
+ <DateSelect
|
|
|
+ ref="sendDateSelect"
|
|
|
+ class="date-select"
|
|
|
+ top="0"
|
|
|
+ defaultShowName="发货时间"
|
|
|
+ @selectDateFn="selectSendDateFn"
|
|
|
+ @overlay-change="onSendDateOverlayChange"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="date-chip date-chip-gap">
|
|
|
+ <DateSelect
|
|
|
+ ref="billDateSelect"
|
|
|
+ class="date-select"
|
|
|
+ top="0"
|
|
|
+ defaultShowName="入库时间"
|
|
|
+ @selectDateFn="selectBillDateFn"
|
|
|
+ @overlay-change="onBillDateOverlayChange"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <button class="admin-button-com default date-reset-btn" @click="resetDateFilters">重置</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="tabs">
|
|
|
+ <view class="tabs-wrap">
|
|
|
<Tabs :isFixed="false" :tabs="tabs" :currentTab="tabIndex" @change="changeTabEvent" itemWidth="25%"></Tabs>
|
|
|
</view>
|
|
|
- <view scroll-y class="order-list">
|
|
|
- <view style="margin-left:50upx;padding-bottom:25upx;">
|
|
|
- <DateSelect class="bar" top="0" @selectDateFn="selectDateFn" defaultShowName='时间' />
|
|
|
- </view>
|
|
|
+ <view class="order-list" :class="{ 'is-covered': dateOverlayVisible }">
|
|
|
<block v-if="!$util.isEmpty(list.data)">
|
|
|
<OrderItem v-for="(item, index) in list.data" :key="index" :info="item" @click="gotoDetails(item)"></OrderItem>
|
|
|
</block>
|
|
|
@@ -23,8 +51,8 @@
|
|
|
<AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
|
|
|
</block>
|
|
|
</view>
|
|
|
- <view class="app-footer open_btn">
|
|
|
- <view @click="addEvent" class="admin-button-com big blue">新增采购</view>
|
|
|
+ <view class="app-footer open_btn" :class="{ 'is-covered': dateOverlayVisible }">
|
|
|
+ <view @click="addEvent" class="admin-button-com big blue add-btn">新增采购</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -43,6 +71,10 @@
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
+/**
|
|
|
+ * 采购入库列表页：按状态 Tab + 发货/账单时间筛选拉 /purchase-order/list。
|
|
|
+ * 账单时间对应 xhGhsCgOrder.entryTime（入库/记账日）；发货时间对应 sendTime。
|
|
|
+ */
|
|
|
import Tabs from "@/components/plugin/tabs";
|
|
|
import OrderItem from "./orderItem";
|
|
|
import AppWrapperEmpty from "@/components/app-wrapper-empty";
|
|
|
@@ -91,12 +123,22 @@ export default {
|
|
|
}
|
|
|
],
|
|
|
T:null,
|
|
|
- searchContent:'',
|
|
|
+ searchContent:'',
|
|
|
searchTime:'',
|
|
|
startTime:'',
|
|
|
endTime:'',
|
|
|
+ sendSearchTime:'',
|
|
|
+ sendStartTime:'',
|
|
|
+ sendEndTime:'',
|
|
|
cgStaffName:'',
|
|
|
- cgStaffId:0
|
|
|
+ cgStaffId:0,
|
|
|
+ sendDateOverlayVisible: false,
|
|
|
+ billDateOverlayVisible: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ dateOverlayVisible() {
|
|
|
+ return !!(this.sendDateOverlayVisible || this.billDateOverlayVisible)
|
|
|
}
|
|
|
},
|
|
|
onPullDownRefresh() {
|
|
|
@@ -175,21 +217,78 @@ export default {
|
|
|
that.resetList()
|
|
|
that.getCgList()
|
|
|
},700)
|
|
|
- },
|
|
|
- selectDateFn(val) {
|
|
|
+ },
|
|
|
+ // 账单时间筛入库日 entryTime，可与发货时间同时生效
|
|
|
+ selectBillDateFn(val) {
|
|
|
this.searchTime = val.searchTime
|
|
|
this.startTime = val.startTime
|
|
|
this.endTime = val.endTime
|
|
|
this.resetList();
|
|
|
this.getCgList();
|
|
|
- },
|
|
|
+ },
|
|
|
+ // 发货时间筛 sendTime，可与账单时间同时生效
|
|
|
+ selectSendDateFn(val) {
|
|
|
+ this.sendSearchTime = val.searchTime
|
|
|
+ this.sendStartTime = val.startTime
|
|
|
+ this.sendEndTime = val.endTime
|
|
|
+ this.resetList();
|
|
|
+ this.getCgList();
|
|
|
+ },
|
|
|
+ onBillDateOverlayChange(visible) {
|
|
|
+ this.billDateOverlayVisible = !!visible
|
|
|
+ if (visible) {
|
|
|
+ this.closeDateSelect(this.$refs.sendDateSelect)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onSendDateOverlayChange(visible) {
|
|
|
+ this.sendDateOverlayVisible = !!visible
|
|
|
+ if (visible) {
|
|
|
+ this.closeDateSelect(this.$refs.billDateSelect)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 两套日历互斥打开，避免弹层叠在一起
|
|
|
+ closeDateSelect(ref) {
|
|
|
+ if (ref && (ref.dropdownShow || ref.showPicker)) {
|
|
|
+ ref.dropdownShow = false
|
|
|
+ ref.showPicker = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 清空发货/账单两套时间筛选，列表回到未按时段过滤的状态
|
|
|
+ resetDateFilters() {
|
|
|
+ this.searchTime = ''
|
|
|
+ this.startTime = ''
|
|
|
+ this.endTime = ''
|
|
|
+ this.sendSearchTime = ''
|
|
|
+ this.sendStartTime = ''
|
|
|
+ this.sendEndTime = ''
|
|
|
+ if (this.$refs.billDateSelect && this.$refs.billDateSelect.reset) {
|
|
|
+ this.$refs.billDateSelect.reset()
|
|
|
+ }
|
|
|
+ if (this.$refs.sendDateSelect && this.$refs.sendDateSelect.reset) {
|
|
|
+ this.$refs.sendDateSelect.reset()
|
|
|
+ }
|
|
|
+ this.resetList()
|
|
|
+ this.getCgList()
|
|
|
+ },
|
|
|
init(){
|
|
|
|
|
|
},
|
|
|
getCgList() {
|
|
|
let ghsId = this.option.ghsId || 0
|
|
|
let status = this.tabs[this.tabIndex].key
|
|
|
- let options = {page:this.list.page,status:status,ghsId:ghsId,search:this.searchContent,searchTime:this.searchTime,startTime:this.startTime,endTime:this.endTime,cgStaffId:this.cgStaffId}
|
|
|
+ let options = {
|
|
|
+ page: this.list.page,
|
|
|
+ status: status,
|
|
|
+ ghsId: ghsId,
|
|
|
+ search: this.searchContent,
|
|
|
+ searchTime: this.searchTime,
|
|
|
+ startTime: this.startTime,
|
|
|
+ endTime: this.endTime,
|
|
|
+ sendSearchTime: this.sendSearchTime,
|
|
|
+ sendStartTime: this.sendStartTime,
|
|
|
+ sendEndTime: this.sendEndTime,
|
|
|
+ cgStaffId: this.cgStaffId
|
|
|
+ }
|
|
|
return getPurchaseListApi(options) .then(res => {
|
|
|
this.completes(res);
|
|
|
this.tabs[this.tabIndex].value = res.data.totalNum?res.data.totalNum:0
|
|
|
@@ -218,98 +317,95 @@ export default {
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- background-color: #f9fbfc;
|
|
|
- .input-wrap_box {
|
|
|
+ background-color: #f4f6f8;
|
|
|
+ .page-header {
|
|
|
+ flex-shrink: 0;
|
|
|
background-color: #fff;
|
|
|
- height: 100upx;
|
|
|
+ box-shadow: 0upx 2upx 8upx 0upx rgba(0, 0, 0, 0.06);
|
|
|
+ position: relative;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
+ .search-row {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- padding: 0 30upx;
|
|
|
- & > view:nth-child(1) {
|
|
|
+ padding: 12upx 24upx 0;
|
|
|
+ .search-hold {
|
|
|
flex: 1;
|
|
|
+ min-width: 0;
|
|
|
}
|
|
|
- }
|
|
|
- .order-list {
|
|
|
- padding-top:20upx;
|
|
|
- padding-bottom:100upx;
|
|
|
- flex: 1;
|
|
|
- .allot-item {
|
|
|
- margin-bottom: 1upx;
|
|
|
- padding: 30upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- box-shadow: 0upx 1upx 0upx 0upx #eeeeee;
|
|
|
- background-color: #fff;
|
|
|
- .info {
|
|
|
- flex: 1;
|
|
|
- margin-right: 20upx;
|
|
|
- .info-order {
|
|
|
- font-size: 32upx;
|
|
|
- font-weight: 600;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- .info-name {
|
|
|
- margin: 40upx 0 20upx;
|
|
|
- font-size: 28upx;
|
|
|
- font-weight: 400;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- .info-time {
|
|
|
- margin-right: 30upx;
|
|
|
- font-size: 28upx;
|
|
|
- font-weight: 400;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- }
|
|
|
- .status {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- flex-shrink: 0;
|
|
|
- width: 100upx;
|
|
|
- color: #cccccc;
|
|
|
- .status-name {
|
|
|
- margin-top: 10upx;
|
|
|
- font-size: 24upx;
|
|
|
- }
|
|
|
- .iconfont {
|
|
|
- font-size: 46upx;
|
|
|
- }
|
|
|
- &.primary {
|
|
|
- color: #3385ff;
|
|
|
- }
|
|
|
- &.gray {
|
|
|
- color: #cccccc;
|
|
|
- }
|
|
|
- &.warn {
|
|
|
- color: #ffaf1d;
|
|
|
- }
|
|
|
- }
|
|
|
+ .staff-btn {
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-left: 16upx;
|
|
|
+ max-width: 160upx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
}
|
|
|
- .bar-view {
|
|
|
- flex-shrink: 0;
|
|
|
+ .filter-row {
|
|
|
display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
align-items: center;
|
|
|
- padding: 0 30upx;
|
|
|
- width: 100%;
|
|
|
- height: 100upx;
|
|
|
-
|
|
|
- box-shadow: 0upx -1upx 6upx 0upx rgba(4, 0, 0, 0.06);
|
|
|
-
|
|
|
- .btn-view {
|
|
|
+ padding: 8upx 24upx 20upx;
|
|
|
+ .date-chip {
|
|
|
+ min-width: 180upx;
|
|
|
+ height: 64upx;
|
|
|
+ padding: 0 16upx;
|
|
|
+ border-radius: 8upx;
|
|
|
display: flex;
|
|
|
- .admin-button-com {
|
|
|
- margin: 0 10upx;
|
|
|
- width: 140upx;
|
|
|
- }
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-shrink: 1;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #f7f8fa;
|
|
|
+ border: 1upx solid #e8eaed;
|
|
|
}
|
|
|
+ .date-chip-gap {
|
|
|
+ margin-left: 16upx;
|
|
|
+ }
|
|
|
+ .date-select {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .date-reset-btn {
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin: 0 0 0 16upx;
|
|
|
+ height: 64upx;
|
|
|
+ line-height: 64upx;
|
|
|
+ padding: 0 24upx;
|
|
|
+ font-size: 26upx;
|
|
|
+ border-radius: 8upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tabs-wrap {
|
|
|
+ flex-shrink: 0;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 16upx;
|
|
|
+ border-bottom: 1upx solid #f0f0f0;
|
|
|
}
|
|
|
- .cg-set{
|
|
|
- margin-right:60upx;
|
|
|
- color:#3385ff;
|
|
|
- font-size:30upx;
|
|
|
+ .order-list {
|
|
|
+ padding-top: 16upx;
|
|
|
+ padding-bottom: 140upx;
|
|
|
+ flex: 1;
|
|
|
+ &.is-covered {
|
|
|
+ /* #ifdef APP-PLUS */
|
|
|
+ visibility: hidden;
|
|
|
+ /* #endif */
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .app-footer.open_btn {
|
|
|
+ justify-content: center;
|
|
|
+ padding-left: 30upx;
|
|
|
+ padding-right: 30upx;
|
|
|
+ &.is-covered {
|
|
|
+ /* #ifdef APP-PLUS */
|
|
|
+ visibility: hidden;
|
|
|
+ /* #endif */
|
|
|
+ }
|
|
|
+ .add-btn {
|
|
|
+ margin-right: 0;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
