parts_shop_ui_LT/pages/views/approve/index.vue

<template>
	<view style="background-color: #f2f2f6;padding-bottom: 0.01rpx;" :class="mask ? 'tl-show': ''">
		<view style="background-color: #fff;position: fixed;top: var(--window-top);width: 100%;z-index: 8;">
			<u-tabs :list="tabsList" keyName="dictValue" itemStyle="height:88rpx;" lineColor="#FD4B09"
				@click="tabsClick" :current="current">
				<view slot="right" style="padding:0 4px;" @tap="popupShow=true">
					<u-icon name="list" size="21" bold></u-icon>
				</view>
			</u-tabs>
			<view style="background-color: #fff;padding: 10rpx 20rpx;">
				<u-search placeholder="请输入业务编号" v-model="form.billNo" @custom="custom" @search="custom"></u-search>
			</view>
			<view class="tabClass">
				<u-tag plain :text="form.processType" closable :show="form.processType!=null"
					@close="tabClose(1)"></u-tag>
				<u-tag plain :text="form.billDate" closable :show="form.billDate!=null" @close="tabClose(2)"></u-tag>
				<u-tag plain :text="form.applyDate" closable :show="form.applyDate!=null" @close="tabClose(3)"></u-tag>
			</view>
		</view>
		<view class="content" :style="{'margin-top': (98+viewHeght)+'px'}">
			<view class="contentBox" v-for="(item,index) in dataList" :key="index">
				<view style="width: 100%;margin: 0 auto;">
					<u-cell-group :border="false">
						<u-cell :border="false" center :title="item.billNo" arrow-direction="down">
							<view slot="icon" style="width: 10rpx;height: 35rpx;background-color: #fd4b09;"></view>
							<view slot="value" style="padding: 5rpx 30rpx;border:1rpx solid #FD4B09;
								border-radius: 100rpx;color: #FD4B09;">
								{{item.auditStatus | textFilter(tabsList)}}
							</view>
						</u-cell>
					</u-cell-group>
					<view class="textBox">
						<view style="font-size: 32rpx;"> {{item.checkType | textFilter(typeList)}}</view>
						<view>{{item.billTime}}</view>
					</view>
					<!-- blade-system/dict-biz/dictionary?code=outbound_work_order_status -->
					<view class="textBox">
						<view>业务对象</view>
						<view>{{item.corpsName}}</view>
					</view>
					<view class="textBox">
						<view>数量</view>
						<view>{{item.orderQuantity}}</view>
					</view>
					<view class="textBox">
						<view>金额</view>
						<view>{{item.amount}}</view>
					</view>
					<view class="textBox">
						<view>申请人/日期</view>
						<view>{{item.sendName}}/{{item.sendTime}}</view>
					</view>
					<view class="textBox">
						<view>订单备注</view>
						<view class="textBox-text">{{item.orderRemark}}</view>
					</view>
					<view style="display: flex;" v-if="item.auditStatus=='S'">
						<u-button style="margin:0 5px 0 10px;" type="success" size="small" text="审核驳回"
							@click="approveSubmit(item,2)"></u-button>
						<u-button style="margin:0 5px 0 5px;" type="primary" size="small" text="审核通过"
							@click="approveSubmit(item,1)"></u-button>
						<u-button style="margin:0 10px 0 5px;" type="warning" size="small" text="审核进度"
							@click="inSchedule(item)"></u-button>
					</view>
					<view v-else style="margin: 0 10px;">
						<u-button type="warning" size="small" text="审核进度" @click="inSchedule(item)"></u-button>
					</view>

				</view>
			</view>
		</view>
		<u-popup :show="popupShow" :round="10" @close="popupClose" closeable>
			<view style="padding: 10px;">
				<view style="display: flex;justify-content: center;font-size: 36rpx;">
					<text>筛选</text>
				</view>
				<u--form style="margin-bottom: 20px;" labelPosition="left" :model="form" ref="uForm">
					<u-form-item label="业务类型" borderBottom :labelWidth='66'>
						<u-input readonly v-model="form.processType" placeholder="请选择业务类型" border="none"
							@click.native='typeShow=true'></u-input>
						<u-icon slot="right" name="arrow-right" @click="typeShow=true"></u-icon>
					</u-form-item>
					<u-form-item label="业务日期" borderBottom :labelWidth='66'>
						<u-input readonly v-model="form.billDate" placeholder="请选择业务日期" border="none"
							@click.native='dateShow=true'></u-input>
						<u-icon slot="right" name="arrow-right" @click="dateShow=true"></u-icon>
					</u-form-item>
					<u-form-item label="申请日期" :labelWidth='66'>
						<u-input readonly v-model="form.applyDate" placeholder="请选择申请日期" border="none"
							@click.native='dateShow2=true'></u-input>
						<u-icon slot="right" name="arrow-right" @click="dateShow2=true"></u-icon>
					</u-form-item>
				</u--form>
				<view style="display: flex;">
					<u-button style="margin-right: 4px;" text="重置" @click='reset'></u-button>
					<u-button type="primary" text="检索" @click='submit'></u-button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="scheduleShow" mode="center" :round="6" @close="scheduleClose" closeable>
			<view style="width:500rpx;margin: 100rpx 40rpx 40rpx 40rpx;">
				<u-steps :current="scheduleCurrent" dot direction="column">
					<u-steps-item v-for='(item,index) in scheduleList' :key='index' :title="item.title"
						:desc="item.time">
					</u-steps-item>
				</u-steps>
			</view>
		</u-popup>
		<u-picker :show="typeShow" :columns="columns" @close='typeShow=false' @cancel='typeShow=false'
			@confirm='typeConfirm' maxRange='无限制' closeOnClickOverlay></u-picker>
		<u-calendar :show="dateShow" mode="range" :minDate='minDate' monthNum='24' allowSameDay @confirm="dateConfirm"
			@close='dateShow=false'></u-calendar>
		<u-calendar :show="dateShow2" mode="range" :minDate='minDate' monthNum='24' allowSameDay @confirm="dateConfirm2"
			@close='dateShow2=false'></u-calendar>
		<!-- 	<u-empty v-if="total == 0" style="position: absolute;top: 45%;left: 50%;transform:translate(-50%,-50%)"
			mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
		<u-datetime-picker :show="timeOpen" v-model="datetime" mode="date" @cancel="timeOpen = false,mask = false"
			@confirm="confirmTiem"></u-datetime-picker>
		<uni-calendar ref="calendar" :insert="false" :range="true" @confirm="confirmCalendar" />
		<u-picker :show="show" :columns="columns" :keyName="keyName"
			@cancel="show = false,mask = false,sortOpen = false" @confirm="confirm"></u-picker>
		<u-loadmore v-if="total !== 0 && dataList.length != 0" :status="status" /> -->
		<u-back-top :scroll-top="scrollTop" icon="arrow-up" :customStyle="{backgroundColor:'#FD4B09'}"
			:iconStyle="{color:'#fff'}"></u-back-top>
	</view>
</template>

<script>
	import {
		getList,
		listAll,
		approvePass,
		findAuditProcessList
	} from '@/api/views/approve/index.js'
	export default {
		data() {
			return {
				viewHeght: 0,
				scheduleCurrent: 0,
				scheduleList: [],
				scheduleShow: false,
				minDate: null,
				maxDate: null,
				dateShow: false,
				dateShow2: false,
				typeShow: false,
				popupShow: false,
				timeOpen: false,
				datetime: Number(new Date()),
				// 列表的参数
				dataList: [],
				screen: [],
				columns: [
					['采购审核', '退货审批', '退款审批']
				],
				show: false,
				sortOpen: false,
				mask: false,

				total: 0,
				keyName: 'cname',
				status: 'loadmore',
				// 请求的参数
				form: {
					current: 1,
					size: 10,
					auditStatus: 'S',
					billNo: null,
					processType: null,
					billDate: null,
					applyDate: null,
					applybegintime: null,
					applyendtime: null,
					billTimeStart: null,
					billTimeEnd: null,
				},
				formTwo: {},
				// tabs切换数据
				tabsList: [{
						dictKey: 'S',
						dictValue: '待审核'

					}, {
						dictKey: 'A',
						dictValue: '已通过'

					}, {
						dictKey: 'B',
						dictValue: '已驳回'

					},
					{
						dictKey: null,
						dictValue: '全部'

					}
				],
				typeList: [{
						dictKey: 'XSTD',
						dictValue: '销售退单请核'

					},
					{
						dictKey: 'YPJ-XSTH',
						dictValue: '销售退款退货'

					}, {
						dictKey: 'PJTK',
						dictValue: '销售退货'

					}, {
						dictKey: 'PJCG',
						dictValue: '采购'

					}, {
						dictKey: 'PJCGTK',
						dictValue: '采购退货'

					}, {
						dictKey: 'RZCG',
						dictValue: '采购融资审核'

					}
				],
				// tabs当前选择的
				current: 0,
				scrollTop: 0
			}
		},
		filters: {
			textFilter(val, list) {
				let name;
				list.forEach(e => {
					if (e.dictKey == val) {
						name = e.dictValue
					}
				})
				return name;
			}
		},
		onLoad() {
			this.form = uni.getStorageSync('approveForm') ? uni.getStorageSync('approveForm') : this.form
			this.form.auditStatus = "S"
			const now = new Date();
			this.minDate = now.setFullYear(now.getFullYear() - 1);
			this.dataList = []
			this.getList()
		},
		onReachBottom() {
			this.status = 'loading'
			if (this.dataList.length < this.total) {
				this.form.current++
				this.getList()
			} else {
				this.status = 'nomore'
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			tabClose(type) {
				if (type == 1) {
					this.form.processType = null
				}
				if (type == 2) {
					this.form.billDate = null
					this.form.billTimeStart = null
					this.form.billTimeEnd = null
				}
				if (type == 3) {
					this.form.applyDate = null
					this.form.applybegintime = null
					this.form.applyendtime = null
				}
				uni.setStorageSync('approveForm', this.form);
				this.form.current = 1
				this.dataList = []
				this.getList()
			},
			custom() {
				this.form.current = 1
				this.dataList = []
				this.getList()
			},
			getList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				getList(this.form).then(res => {
					if (res.data.length == 0) {
						this.dataList = []
						this.total = 0
					} else {
						this.total = res.data.total || 0
						this.dataList = this.dataList.concat(res.data.records)
					}
					uni.hideLoading();
					if (this.total < 10) {
						this.status = 'nomore'
					}
					this.getViewHeight()
				})
			},
			// tabs切换
			tabsClick(item) {
				this.current = item.index
				this.form.auditStatus = item.dictKey
				this.form.current = 1
				this.dataList = []
				this.getList()
			},
			popupClose() {
				this.popupShow = false
			},
			typeConfirm(e) {
				this.form.processType = e.value[0]
				this.typeShow = false
			},
			dateConfirm(e) {
				this.form.billDate = e[0] + '~' + e[e.length - 1]
				this.dateShow = false
			},
			dateConfirm2(e) {
				this.form.applyDate = e[0] + '~' + e[e.length - 1]
				this.dateShow2 = false
			},
			getViewHeight() {
				uni.createSelectorQuery().select('.tabClass').boundingClientRect(data => {
					this.viewHeght = data.height
				}).exec();
			},
			submit() {
				if (this.form.billDate) {
					let arr = []
					arr = this.form.billDate.split("~")
					this.form.billTimeStart = arr[0]
					this.form.billTimeEnd = arr[1]
				}
				if (this.form.applyDate) {
					let arr = []
					arr = this.form.applyDate.split("~")
					this.form.applybegintime = arr[0] + " " + "00:00:00"
					this.form.applyendtime = arr[1] + " " + "23:59:59"
				}

				uni.setStorageSync('approveForm', this.form);
				this.popupShow = false
				this.form.current = 1
				this.dataList = []
				this.getList()
			},
			reset() {
				this.form.processType = null
				this.form.billDate = null
				this.form.billTimeStart = null
				this.form.billTimeEnd = null
				this.form.applyDate = null
				this.form.applybegintime = null
				this.form.applyendtime = null
				uni.setStorageSync('approveForm', this.form);
			},
			approveSubmit(row, type) {
				console.log(row, type, uni.getStorageSync('username'), )
				let obj = {}
				obj = {
					...row,
					operate: type,
					auditName: uni.getStorageSync('username'),
					auditOpTime: this.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss')
				}
				approvePass(obj).then(res => {
					uni.showToast({
						icon: "none",
						title: '操作成功',
						mask: true
					});
					this.form.current = 1
					this.dataList = []
					this.getList()
				})
			},
			inSchedule(row) {
				this.scheduleShow = true
				this.scheduleList = []
				let obj = {}
				obj = {
					id: row.srcBillId,
					batchNo: row.batchNo,
				}
				findAuditProcessList(obj).then(res => {
					res.data.forEach(e => {
						this.scheduleList.push({
							title: '提交',
							time: '申请人:' + (e.sendName ? e.sendName : '') + '\n' +
								'提交日期:' + (e.sendTime ? e.sendTime : '') + '\n' +
								'备注:' + (e.sendMsg ? e.sendMsg : '')
						})
						if (e.auditStatus == 'S') {
							this.scheduleCurrent = 0
							this.scheduleList.push({
								title: '待审核',
								time: '审批人:' + (e.auditName ? e.auditName : '') + '\n' +
									'审批日期:' + (e.auditOpTime ? e.auditOpTime : '') + '\n' +
									'审批意见:' + (e.auditMsg ? e.auditMsg : '')
							})
						}
						if (e.auditStatus == 'A') {
							this.scheduleCurrent = 1
							this.scheduleList.push({
								title: '已通过',
								time: '审批人:' + (e.auditName ? e.auditName : '') + '\n' +
									'审批日期:' + (e.auditOpTime ? e.auditOpTime : '') + '\n' +
									'审批意见:' + (e.auditMsg ? e.auditMsg : '')
							})
						}
						if (e.auditStatus == 'B') {
							this.scheduleCurrent = 1
							this.scheduleList.push({
								title: '已驳回',
								time: '审批人:' + (e.auditName ? e.auditName : '') + '\n' +
									'审批日期:' + (e.auditOpTime ? e.auditOpTime : '') + '\n' +
									'审批意见:' + (e.auditMsg ? e.auditMsg : '')
							})
						}
					})
				})
			},
			scheduleClose() {
				this.scheduleShow = false
			}
		}
	}
</script>

<style scoped>
	.contentBox {
		width: 96%;
		margin: 20rpx auto;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		/* box-shadow: 0 5rpx 14rpx 0 rgba(101, 176, 249, 0.42); */
		padding-top: 15rpx;
		padding-bottom: 10rpx;
	}

	.textBox {
		padding: 0 15px;
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		margin-bottom: 10rpx;
		align-items: flex-end;

	}

	.textBox-text {
		width: 400rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.dropdown {
		position: absolute;
		z-index: 9;
		background: rgba(0, 0, 0, .3);
		width: 100%;
		left: 0;
		top: calc(var(--status-bar-height) + 90px);
		bottom: 0;
	}

	.tl-show {
		overflow: hidden;
		position: fixed;
		height: 100%;
		width: 100%;
	}

	.tabClass {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0 20rpx 10rpx;
	}
</style>