TuBaoSoft-AP/pages/home/procurementApplicationApproval/index.vue

<template>
	<view>
		<view style="box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);margin-bottom: 20rpx">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<u-action-sheet :list="whetherList" v-model="whetherShow" @click="whetherClick" @close="whetherClose">
		</u-action-sheet>
		<u-calendar v-model="timeInterval" mode="range" max-date="2050" @change="timeIntervalChange" :mask-close-able="false" :closeable="false"></u-calendar>
		<view v-for="(item,index) in dataList" :key="index" style="box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);width: 96%;border-top-right-radius: 10rpx;margin: 10rpx auto;padding-top: 10rpx;">
			<span style="width: 10rpx;height: 40rpx;background-color: #2979ff;display: block;float: left;margin-top: 10rpx;"></span>
			<h4 style="width: 140rpx;border-radius: 200rpx;text-align: center;color: #2979ff;border: 2rpx solid #1785FF;float: right;margin-right: 10rpx;margin-top: 10rpx;">
				{{item.fBillstatusName}}
			</h4>
			<view style="width: 90%;margin: 0 auto;margin: 0 auto;">
				<view style="display: flex;justify-content: space-between;height: 60rpx;line-height: 60rpx;border-bottom: 1rpx solid #eff4ff;">
					<h4>系统编号：{{item.fBillno}}</h4>
				</view>
				<view>
					<view style="width: 100%;height: 60rpx;line-height: 60rpx;">
						<view style="float: left;">提货日期</view>
						<view style="float: right;">{{item.fBsdate}}</view>
					</view>
					<view style="width: 100%;height: 60rpx;line-height: 60rpx;">
						<view style="float: left;">项目名称</view>
						<view style="float: right;">{{item.projectName}}</view>
					</view>
					<view style="width: 100%;height: 60rpx;line-height: 60rpx;">
						<view style="float: left;">申请人</view>
						<view style="float: right;">{{item.createBy}}</view>
					</view>
					<view style="width: 100%;height: 60rpx;line-height: 60rpx;">
						<view style="float: left;">申请日期</view>
						<view style="float: right;">{{item.createTime}}</view>
					</view>
					<view style="width: 100%;height: 60rpx;line-height: 60rpx;">
						<view style="float: left;">是否接单</view>
						<view style="float: right;">{{item.fTakeOrders==0?'待接单':item.fTakeOrders==1?'已接单':'已拒绝'}}</view>
					</view>
					<view style="width: 100%;height: 60rpx;line-height: 60rpx;" v-if="item.fTakeOrders == '2'">
						<view style="float: left;">拒绝理由</view>
						<view style="float: right;">{{item.fReason}}</view>
					</view>
					<view style="width: 100%;height: 60rpx;line-height: 60rpx;">
						<view style="float: left;">备注</view>
						<view style="float: right;">{{item.remark}}</view>
					</view>
				</view>
				<view
					style="width: 100%;margin: 0 auto;height: 80rpx;margin: 0 auto;line-height: 80rpx;border-top: 1rpx solid #eff4ff;"
					@click="expenseDetails(item)">
					<view style="float: left;">
						<h3>查看详情</h3>
					</view>
					<view style="float: right;">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore v-if="total > 0" :status="status" :icon-type="iconType" :load-text="loadText" />
		<u-empty v-else style="width: 50%;
			margin: 0 auto;
			height: 220rpx;
			align-items: center;
			position: absolute;
			top: 45%;
			left: 50%;
			transform:translate(-50%,-50%)" text="无申请数据" mode="data"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeInterval: false,
				whetherList: [{
					text: '待接单',
					value: 0
				}, {
					text: '已接单',
					value: 1
				}, {
					text: '已拒绝',
					value: 2
				}],
				whetherShow: false,
				list: [{
					name: '全部'
				}, {
					name: '是否接单'
				}, {
					name: '提货日期'
				}],
				current: 0,
				dataList: [],
				status: 'loadmore',
				total: 0,
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				form: {
					pageNum: 1,
					pageSize: 5,
				},
				iconType: 'flower',
				deptName: ''
			}
		},
		created() {
			this.deptName = uni.getStorageSync('deptName')
			if (this.deptName == '外部用户') {
				this.$u.get('/anPin/anPinApp/supplier', this.form).then(res => {
					this.dataList = res.rows
					this.total = res.total
				})
			} else {
				this.$u.get('/anPin/anPinApp/list', this.form).then(res => {
					this.dataList = res.rows
					this.total = res.total
				})
			}
		},
		methods: {
			change(index) {
				this.current = index
				if (index == 1) {
					this.whetherShow = true
				} else if (index == 2) {
					this.timeInterval = true
				} else if (index == 0) {
					this.form = {
						pageNum: 1,
						pageSize: 10,
					}
					this.dataList = []
					this.query()
				}
			},
			timeIntervalChange(e) {
				this.form = {
					pageNum: 1,
					pageSize: 10,
					timeInterval:[e.startDate,e.endDate]
				}
				this.dataList = []
				this.current = null;
				this.query()
			},
			whetherClick(index) {
				this.form = {
					pageNum: 1,
					pageSize: 10,
					fTakeOrders: this.whetherList[index].value
				}
				this.dataList = []
				this.current = null;
				this.query()
			},
			whetherClose() {
				this.current = null;
			},
			onReachBottom() {
				this.status = 'loading'
				if (this.dataList.length < this.total) {
					this.form.pageNum++
					this.query()
				} else {
					this.status = 'nomore'
				}
			},
			query() {
				if (this.deptName == '外部用户') {
					this.$u.get('/anPin/anPinApp/supplier', this.form).then(res => {
						this.dataList = this.dataList.concat(res.rows)
						this.total = res.total
						if (res.total === 0) this.status = 'nomore'
					})
				} else {
					this.$u.get('/anPin/anPinApp/list', this.form).then(res => {
						this.dataList = this.dataList.concat(res.rows)
						this.total = res.total
						if (res.total === 0) this.status = 'nomore'
					})
				}
			},
			expenseDetails(item) {
				this.$u.route('/pages/home/procurementApplicationApproval/detailsOrUpdates', {
					form: JSON.stringify(item),
					toExamine: JSON.stringify(false)
				})
			}
		}
	}
</script>

<style>
</style>