front-end/ghsApp/src/pagesPurchase/order.vue

<template>
	<view class="app-content">
		<view class="order-page">
			<view class="input-wrap_box">
				<view>
					<AppSearchModule placeholder="核销码 / 名称 / 手机号" @input="searchFn"/>
				</view>
				<view style="padding:0 0upx 0 20upx;" >
					<button class="admin-button-com middle blue" @click="showCgStaff">{{ cgStaffName==''?'采购人':'已选择'}}</button>
				</view>
			</view>
			<view class="tabs">
				<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>
				<block v-if="!$util.isEmpty(list.data)">
					<OrderItem v-for="(item, index) in list.data" :key="index" :info="item" @click="gotoDetails(item)"></OrderItem>
				</block>
				<block v-else>
					<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>
		</view>

		<uni-popup ref="staffRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
			<view style="max-height:90vh;overflow: scroll;">
				<view style="margin-left:30upx;margin-top:19upx;font-size:27upx;font-weight:bold;">请选择：</view>
				<view style="display:flex;padding:20upx;height:auto;justify-content: space-between;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">
					<view v-for="(item, index) in staffData" :key="index" @tap.stop="getCgStaff(item)" style="margin-bottom:20upx;margin-left:3upx;">
						<view style="margin-top:8upx;overflow: hidden;white-space: nowrap;width:120upx;text-align:center;font-weight:bold;font-size:30upx;">{{item.name}}</view>
					</view>
				</view>
				<view style="text-align:center;padding:10upx 0 10upx 0;"><button class="admin-button-com big blue" @click="cancelSelectStaff()">取消选择</button></view>
			</view>
    	</uni-popup>

	</view>
</template>
<script>
import Tabs from "@/components/plugin/tabs";
import OrderItem from "./orderItem";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import { list } from "@/mixins";
import { getPurchaseListApi,getLsRunningOrderNum } from "@/api/purchase";
import AppSearchModule from "@/components/module/app-search";
import DateSelect from "@/components/module/dateSelect";
import { getAllStaff } from "@/api/shop-admin";
export default {
	components: {
		Tabs,
		OrderItem,
		AppWrapperEmpty,
		AppSearchModule,
		DateSelect
	},
	mixins: [list],
	data() {
		return {
			getappIdList: {},
			tabIndex: 0,
			lsFhNum:0,
			lsShNum:0,
			staffData:[],
			needRefresh:0,
			tabs: [
				{
					name: "全部",
					key: "",
					value: "0"
				},
				{
					name: "待入库",
					key: "3",
					value: "0"
				},
				{
					name: "已入库",
					key: "4",
					value: "0"
				},
				{
					name: "已取消",
					key: "5",
					value: "0"
				}
			],
			T:null,
			searchContent:'',			
			searchTime:'',
			startTime:'',
			endTime:'',
			cgStaffName:'',
			cgStaffId:0
		}
	},
	onPullDownRefresh() {
		this.resetList();
		this.getCgList().then(res => {
			uni.stopPullDownRefresh();
		});
	},
	onReachBottom() {
		if (!this.list.finished) {
			this.getCgList().then((res) => {
				uni.stopPullDownRefresh();
			})
		} else {
			uni.stopPullDownRefresh()
		}
	},
	onLoad(){

		if(this.option.cgStaffId){
			this.cgStaffId = this.option.cgStaffId
		}
		if(this.option.cgStaffName){
			this.cgStaffName = this.option.cgStaffName
		}

		this.getCgList()

		getAllStaff().then(res=>{
			if(res.code == 1){
				this.staffData = res.data.list ? res.data.list : []
			}
		})

	},
	onShow() {
		//采购成功之后的订单详情页过来不刷新
		if(this.needRefresh == 0){
			this.needRefresh = 1
		}else{
			this.resetList()
			this.getCgList()
		}
  	},
	methods: {
		cancelSelectStaff(){
			this.$refs.staffRef.close()
			this.cgStaffName = ''
			this.cgStaffId = 0
			this.resetList()
			this.getCgList()
		},
		cancelShowCgStaff(){
			this.$refs.staffRef.close()
		},
		getCgStaff(staff){
			this.$refs.staffRef.close()
			this.cgStaffName = staff.name
			this.cgStaffId = staff.id
			this.resetList()
			this.getCgList()
		},
		showCgStaff(){
			this.$refs.staffRef.open('center')
		},
		searchFn(e){
			if (this.$util.isEmpty(e) && this.$util.isEmpty(this.searchContent)){
				return false
			}
			let that = this
			if(that.T != null){
				clearTimeout(that.T)
			}
			that.T = setTimeout(function(){
				that.searchContent = e
				that.resetList()
				that.getCgList()
			},700)
		},		
		selectDateFn(val) {
			this.searchTime = val.searchTime
			this.startTime = val.startTime
			this.endTime = val.endTime
			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}
			return getPurchaseListApi(options) .then(res => {
					this.completes(res);
					this.tabs[this.tabIndex].value = res.data.totalNum?res.data.totalNum:0
			})
		},
		changeTabEvent(info) {
			const { index } = info;
			if (this.tabIndex == index) {
				return false;
			} 
			this.tabIndex = index;
			this.resetList();
			this.getCgList();
		},
		addEvent() {
			uni.navigateTo({ url: `/pagesPurchase/supplier` })
		},
		gotoDetails(item) {
			uni.navigateTo({ url: `/pagesPurchase/info?orderSn=${item.orderSn}` })
		}
	}
};
</script>
<style lang="scss" scoped>
.order-page {
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #f9fbfc;
	.input-wrap_box {
		background-color: #fff;
		height: 100upx;
		display: flex;
		align-items: center;
		padding: 0 30upx;
		& > view:nth-child(1) {
			flex: 1;
		}
  	}
	.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;
				}
			}
		}
	}
	.bar-view {
		flex-shrink: 0;
		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 {
			display: flex;
			.admin-button-com {
				margin: 0 10upx;
				width: 140upx;
			}
		}
	}
	.cg-set{
		margin-right:60upx;
		color:#3385ff;
		font-size:30upx;
	}
}
</style>