front-end/jdApp/src/pagesStorehouse/inventory/select.vue

<template>
	<view class="billing_box_bg">
		<view class="input-wrap">
			<app-search-module
				v-model="py"
				placeholder="请输入关键词，支持拼音首字母搜索"
				@input="searchFn"
			/>
		</view>
<!--		<app-tabs-->
<!--			:tabs="tabs"-->
<!--			:currentTab="tabIndex"-->
<!--			@change="change"-->
<!--			itemWidth="50%"-->
<!--		/>-->
		<view class="scroll-middle_bx">
			<scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-top="scrollTop">
				<div v-for="(item, index) in filterProductInfo" :key="index" class="tab-bar-item" :class="[classIndex == index ? 'active' : '']" :data-current="index" @tap.stop="swichClass(index)" >
					<text>{{ item.className || "" }}</text>
					<text class="tag"
						v-if=" getSelectClassById(item.classId).bigCount > 0 || getSelectClassById(item.classId).smallCount > 0">
						<text v-if="getSelectClassById(item.classId).bigCount > 0 || getSelectClassById(item.classId).smallCount > 0">
							{{ `${getSelectClassById(item.classId).bigCount}` }}
						</text>
						<text v-if="getSelectClassById(item.classId).smallCount > 0">/</text>
						<text v-if="getSelectClassById(item.classId).smallCount > 0">{{getSelectClassById(item.classId).smallCount}}</text>
					</text>
				</div>
				<view style="height: 120rpx"></view>
				<!-- <view class="switchover-unit" @tap="isSmallCount = !isSmallCount">{{isSmallCount?'支':'扎'}}</view> -->
			</scroll-view>

<!--			<scroll-view scroll-y class="right-box" v-if="tabIndex == 0" :scroll-into-view="scrollClassId">-->
				<scroll-view scroll-y class="right-box" v-if="tabIndex == 0" :scroll-into-view="scroll_into_view" scroll-with-animation="true"
																	@scroll="scroll_detail"
																	lower-threshold="100"
																	@scrolltolower="scroll_bottom">
				<!--内容部分 start -->
				<block v-if="!$util.isEmpty(filterProductInfo)">
					<view class="item_list_bx selectAll" v-for="(classItem, classIndex) in filterProductInfo" :key="classIndex" :id="`class_${classIndex}`">
						<view class="item_list_title">
							{{ classItem.className }}
						</view>
						<template v-for="(productItem, productIndex) in classItem.child">
							<view style="height: 160rpx" :id="`class_${classItem.classId}_${productItem.id}`" :key="productIndex">
							<Commondity v-if="classItem.isActive"
								:offPrice="true"
								:key="productIndex"
								:info="productItem"
								:bigCount="
									getSelectItemById(productItem.id, classItem.classId).bigCount
								"
								:smallCount="
									getSelectItemById(productItem.id, classItem.classId).smallCount
								"
								@customNum="customNum"
								@add="addEvent"
								@addOneEvent="addCustomNumEvent"
								@del="delEvent"
							></Commondity>
							</view>
						</template>
					</view>
				</block>
				<block v-else>
					<app-wrapper-empty
						title="暂无数据"
						:is-empty="$util.isEmpty(filterProductInfo)"
					/>
				</block>
				<!--内容部分 end -->
			</scroll-view>
			<block v-else>
				<view style="width:100%">
					<AppWrapperEmpty title="敬请期待" :is-empty="true" />
				</view>
			</block>
		</view>
		<!-- :maskClosable="false" -->
		<modal-module
			:show="isModel"
			@cancel="modalCancel"
			@click="affirm"
			:title="customData.itemName"
			color="#333"
			:size="32"
			padding="30rpx 30rpx"
		>
			<template slot="customContent">
				<view class="select-cmd_bx" v-if="customData">
					<view class="kc"> 库存{{ customData.stock }} </view>
					<view class="num_bx">
						<!--<allMoreSelectInput-->
							<!--:isActive="isActive" :isFocus="isFocus" :value="customData.bigCount"-->
							<!--:isActiveOne="isActiveOne" :isFocusOne="isFocusOne" :valueOne="customData.smallCount"-->
							<!--@deleteInputVal="deleteInputVal" @initAllInput="initAllInput" @moveAllInput="moveAllInput"-->
							<!--@deleteInputValOne="deleteInputValOne" @initAllInputOne="initAllInputOne" @moveAllInputOne="moveAllInputOne">-->
						<!--</allMoreSelectInput>-->
						<input v-model="customData.bigCount" :focus="isFocus" type="number" />扎
						<input v-model="customData.smallCount" type="number" style="margin-left:24upx"/>支
					</view>
				</view>
			</template>
		</modal-module>
		<modal-module
			:show="showSubmitModel"
			@cancel="cancelEvent"
			@click="submitEvent"
			:title="confirmContent"
			color="#333"
			:size="32"
			padding="30rpx 30rpx"
		>
		</modal-module>
		<FooterCart :offPrice="true" :price="allPrice" :count="allCount" @confirm="confirmSelectEvent"></FooterCart>
<!--		<FooterCart-->
<!--			:price="allPrice"-->
<!--			:count="allCount"-->
<!--			@confirm="confirmSelectEvent"-->
<!--		></FooterCart>-->
	</view>
</template>

<script>
import AppSearchModule from "@/components/module/app-search";
import AppTabs from "@/components/plugin/tabs";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import Commondity from "@/components/module/app-commodity";
import FooterCart from "@/components/module/app-footer-cart";
import ModalModule from "@/components/plugin/modal";
import productMins from "@/mixins/product";
import allMoreSelectInput from "@/components/module/allMoreSelectInput";
import allMoreSelectInputMins from "@/mixins/allMoreSelectInput";
import { mapGetters } from "vuex";
export default {
	name: "allotEx", // 开单
	components: {
		AppTabs,
		AppSearchModule,
		AppWrapperEmpty,
		Commondity,
		ModalModule,
		FooterCart,
		allMoreSelectInput
	},
	mixins: [productMins,allMoreSelectInputMins],
	data() {
		return {
			pageType: "inventory",
			isLimit: false,
			isFocus: false,
			isSmallCount:false,//是否是小单位（支）
			offVerifyRepertory:true,
			tabIndex: 0,
			tabs: [
				{
					name: "花材"
				},
				{
					name: "成品"
				}
				// {
				//     name: '课程'
				// },
			],
			isModel: false,
			customData: {
				bigCount: 0,
				smallCount: 0
			},
			showSubmitModel: false,
			autoLoad: false, //不自动请求数据  自定义请求
		};
	},
	computed: {
		confirmContent() {
			let content = "确认下一步？";
			return content;
		}
	},
	computed:{
		...mapGetters(["getMyShopInfo","getLoginInfo"]),
	},
	onLoad() {
		let type = '';
		this.initData({ type,status:0});
	},
	methods: {
		//自定义数量
		customNum(info) {
			this.isModel = true;
			this.customData = info;
			this.isFocus = false;

			this.$nextTick(()=>{
				this.customData.smallCount = 	this.customData.smallCount==0?null:this.customData.smallCount;
				this.customData.bigCount = 	this.customData.bigCount==0?null:this.customData.bigCount;
				this.isFocus = true;
			})

			// this.$nextTick(()=>{
			// 	this.initAllInput();
			// })
		},
		modalCancel() {
			this.isModel = false;
			this.customData = {};
		},
		// 取消 确认
		affirm(val) {
			this.isFocus = false;
			this.isFocusOne = false;
			this.$nextTick(()=>{
				//取消
				if (val.index === 0) {
					if(this.customData.bigCount>0 || this.customData.smallCount>0){
					}else{
						this.delAllEvent(this.customData)
					}
					this.modalCancel();
					return;
				}

				//二个都不是数值
				if(/(^[1-9]\d*$)/.test(this.customData.bigCount) == false && /(^[1-9]\d*$)/.test(this.customData.smallCount) == false){
					this.delAllEvent(this.customData)
					this.modalCancel();
					return;
				}

				if(/(^[1-9]\d*$)/.test(this.customData.bigCount)){
					if(this.customData.bigCount<=0){
						uni.showToast({title:"数量要大于0",icon:"none"})
						return;
					}
				}

				if(/(^[1-9]\d*$)/.test(this.customData.smallCount)){
					if(this.customData.smallCount<=0){
						uni.showToast({title:"数量要大于0",icon:"none"})
						return;
					}
				}

				this.updateItemEvent(this.customData);
				this.modalCancel();
			})
		},
		cancelEvent() {
			this.showSubmitModel = false;
		},
		submitEvent(val) {
			if (val.index === 0) {
				this.cancelEvent();
			} else {
				uni.navigateBack({
					delta: 1
				});
				this.cancelEvent();
			}
		},
		confirmSelectEvent() {
			
			if (this.selectList.length > 0) {

				//因历史遗留原因，打开花材页马上点花材出现数量0或null的情况，需要过滤 shish 20210716
				let selectList = this.selectList;
				let list = [];
				console.log('过滤前',selectList)
				for (let i=0;i<selectList.length;i++){
					if(/(^[1-9]\d*$)/.test(selectList[i].bigCount) == false && /(^[1-9]\d*$)/.test(selectList[i].smallCount) == false){
						continue
					}
					list.push(selectList[i])
				}
				if(list.length <= 0){
					this.$msg("请选择花材")
					return
				}
				console.log('过滤后',list)
				this.setSelectInfoByType({ type: this.pageType, info: list });

				this.submitEvent(1);

			} else {
        		this.$msg('请选择花材')
      		}
		},
		change(e) {
			if (this.tabIndex == e.index) {
				return false;
			} else {
				this.tabIndex = e.index;
			}
		},
		scrollTop() {}
	}
};
</script>

<style lang="scss" scoped>
.billing_box_bg {
	height: 100%;
	display: flex;
	flex-direction: column;
	.input-wrap {
		padding: 22px 20px 22px 30px;
	}
	.scroll-middle_bx {
		flex: 1;
		display: flex;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.tab-view {
		height: 100%;
		width: 170upx;
		flex-shrink: 0;
		background-color: #f0f2f6;
		.tab-bar-item {
			position: relative;
			width: 170upx;
			height: 90upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26upx;
			color: #444;
			font-weight: 400;
			.tag {
				display: flex;
				padding: 0 20px;
				align-items: center;
				position: absolute;
				right: 0;
				top: 0;
				height: 32px;
				background: #ff2842;
				border-radius: 16px;
				color: #fff;
				font-size: 20px;
			}
      &:last-child{
        margin-bottom: 110upx;
      }
		}
		.active {
			position: relative;
			color: $mainColor;
			font-size: 26px;
			background: #fff;
		}
		.active::before {
			content: "";
			position: absolute;
			border-left: 8upx solid $mainColor;
			height: 100%;
			left: 0;
		}
	}
	.right-box {
		height: 100%;
		flex: 1;
		box-sizing: border-box;
	}
	.item_list_bx {
		padding: 40px 16px;
    &:last-child{
      margin-bottom: 70upx;
    }
	}
	.item_list_title {
		margin-bottom: 20px;
		font-size: 24px;
		font-weight: 600;
		color: #666666;
	}
	.select-cmd_bx {
		& .kc {
			color: #999999;
			font-size: 28px;
			font-weight: 400;
			margin-bottom: 60px;
			text-align: center;
			margin-top: 10px;
		}
		& .num_bx {
			display: flex;
			align-items: center;
			margin-bottom: 80px;
			& > input {
				width: 212px;
				height: 80px;
				border: 1px solid #dddddd;
				border-radius: 4px;
				text-align: center;
				margin-right: 24px;
			}
		}
	}
}
</style>