aiot-app/pages/salesServiceManagement/demandList/components/Invoice.vue

<template>
	<view class="mainBox">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="发货单" @clickLeft="backAdd">
			<!--右菜单-->
		<!-- 	<template slot="right">
				<u-button type="success" size="small" class="u-reset-button" @click="invoiceSelect"
					text="选择发货单"></u-button>
			</template> -->
		</uni-nav-bar>
		<!-- <u-subsection :list="list" :current="current" @change="sectionChange"></u-subsection> -->
		<view class="top-wrapper">
			<view class="nav_box rx-sc">
				<view class="nav_item " :class="{active: current == 0}" @click="handNav(0)">
					发货单</view>
				<view class="nav_item" :class="{active: current == 1}" @click="handNav(1)">
					物品明细</view>
				<view class="menu_box" @click="handleSearch" v-show="current == 0">
					<image class="menu_icon" src="~@/static/moreSearch.svg"></image>
				</view>
			</view>
		</view>
		<view class="wrapper">
			<u-list v-show="current == 0" @scrolltolower="scrolltolower" class="listContent">
				<checkbox-group v-for="(item, index) in dataList" :key="index" @change="e => selectVal(e, item, index)">
					<label>
						<view class="listBox">
							<view class="listBox-sel">
								<checkbox :value="item.id" color="#fff" :disabled="item.disabled"
									:checked="item.checked" />
							</view>
							<view class="listBox-con">
								<view class="listBox-top">
									<view class="listBox-name">
										{{ item.contactName }}
									</view>

								</view>
								<view class="listBox-bottom">
									<view>发货单编码：{{ item.docNo }}</view>
									<view>销售订单编码：{{ item.orderNo }}</view>
									<view class="half">是否回执：{{ item.replied == 1?'是':'否' }}</view>
									<view class="half">状态：{{ orderStatus(item) }}</view>
									<view>创建时间：{{ item.createTime }}</view>
								</view>
							</view>
						</view>
					</label>
				</checkbox-group>
				<u-empty class="noDate" style="margin-top: 20vh" v-if="!dataList.length"></u-empty>
			</u-list>
			<itemSelect @getDetails="getDetails" ref="itemRef" v-show="current == 1" />
		</view>
		<view class="footer">
			<u-button type="success" size="small" class="u-reset-button" @click="jumpAdd">
				<view class="selBtn">选择( {{ checkListLen }} )</view>
			</u-button>
		</view>
		<screen ref="screen" @succeed="cabScreen"></screen>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		parameterGetByCode
	} from '@/api/mainData/index.js';
	import screen from './screen.vue'
	import itemSelect from './itemSelect.vue'
	import {
		reviewStatusEnum
	} from '@/enum/dict';
	import {
		saleordersendrecord
	} from '@/api/saleManage/saleorder/index.js'
	let [isEnd] = [false]
	export default {
		components: {
			screen,
			itemSelect
		},
		computed: {
			orderStatus() {
				return (row) => {
					return reviewStatusEnum[row.reviewStatus].label;
				};
			},
			checkListLen() {
				return this.detailsData.id ? 1 : 0
			},
		},
		data() {
			return {
				contactId: '',
				current: 0,
				page: 1,
				size: 10,
				dataList: [],
				detailsData: {},
			}
		},
		onLoad({
			contactId
		}) {
			this.contactId = contactId;
			this.getList();
			// this.getClassify()
		},
		methods: {
			//返回添加页
			backAdd() {
				uni.navigateBack()
			},
			invoiceSelect() {

			},
			handNav(index) {
				this.current = index;
			},
			handleSearch() {
				this.$refs.screen.open();
			},
			cabScreen(params) {
				console.log(params, 'params -')
				this.page = 1;
				this.getList(params);
			},
			async getList(data = {}) {
				let params = {
					pageNum: this.page,
					reviewStatus: 2,
					...data,
					contactId: this.contactId
				}
				isEnd = false
				const res = await saleordersendrecord(params)
				if (params.pageNum === 1) {
					this.dataList = []
				}
				this.dataList.push(...res.list)
				isEnd = this.dataList.length >= res.count

			},
			//勾选
			selectVal(e, val, index) {
				this.$set(this.dataList[index], 'checked', !this.dataList[index].checked)
				this.dataList.forEach((item, i) => {
					if (item.id != val.id) {
						this.$set(this.dataList[i], 'checked', false)
					}
				})

				// 勾选完 查询物品明细
				if (val.checked) {
					this.$refs.itemRef.getData(this.dataList[index]);
				} else {
					this.$refs.itemRef.resetTable();
				}
				this.detailsData = {};
			},
			// 选择
			jumpAdd() {
				if (!this.detailsData.id) {
					this.$refs.uToast.show({
						type: "warning",
						message: "请选择一条物品明细数据",
					})
					return;
				}
			  let obj =	this.dataList.filter(item => item.checked)[0];
				let data = {
					orderCode: obj.docNo,
					orderId: obj.id,
					tableList: [this.detailsData]
				}
				uni.$emit('goosData',data);
				uni.navigateBack();
			},

			getDetails(data) {
				this.detailsData = data;
			},

			scrolltolower() {
				if (isEnd) return
				this.page++
				this.getList()
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import './invoice.scss';

	/deep/.u-subsection__item__text {
		font-size: 28rpx !important;
	}

	.u-reset-button {
		position: absolute;
		right: 10rpx;
		top: 20rpx;
		width: 160rpx;
	}

	.mainBox {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.wrapper {
			// flex: 1;
			height: calc(100vh - 250rpx);
			overflow: hidden;
		}

		//底部按钮
		.footer {
			height: 45px;
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			bottom: 0;
			width: 100%;
			height: 50px;
			border-top: 1px solid #eeecec;
			background-color: #ffffff;
			z-index: 999;

			.bottom {
				margin-left: 10rpx;
			}

			.u-reset-button {
				position: absolute;
				right: 10rpx;
				top: 20rpx;
				width: 150rpx;
			}
		}

		.nav_box {
			padding: 6rpx 32rpx;
			position: relative;

			.nav_item {
				font-size: 28rpx;
				font-weight: 400;
				color: $theme-color;
				background: #F0F8F2;
				margin-right: 16rpx;
				padding: 4rpx 16rpx;
				border-radius: 8rpx;
				border: 2rpx solid #ACD4B5;

			}

			.menu_box {
				position: absolute;
				right: 20rpx;
				top: 10rpx;

				.menu_icon {
					width: 44rpx;
					height: 44rpx;
				}

			}

			.active {
				background: $theme-color;
				border: 2rpx solid $theme-color;
				color: #FFF;
			}
		}
	}
</style>