OpenDoorManageMini/pages/commodity/commoditylist.vue

<template>
	<view class="container">
		<u-navbar leftIconColor="#fff" titleStyle="color:#fff;fontSize:36rpx;" :autoBack="true" bgColor="#2C6FF3"
			:placeholder="true" :title="deviceName"></u-navbar>
		<view class="title">常用商品清单</view>
		<scroll-view class="scrollview" scroll-y="true" scroll-with-animation="true" lower-threshold="100"
			@scrolltolower="loadMore" :style="{height:fullHeight}">
			<view class="scroll-content" v-if="commodityList&&commodityList.length>0">
				<block v-for="(item,index) in commodityList" :key="item.modelId">
					<view class="commoditylist-container xy-card">
						<view class="commoditylist-content flex flex-direction justify-between">
							<view class="flex-sub">清单名称：{{item.name}}</view>
							<view class="flex-sub">设备类型：{{item.deviceTypeName}}</view>
							<view class="flex-sub">关联商品：{{item.goodsNum}}件</view>
						</view>
						<view class="flex align-center justify-end btn-box martop">
							<view class='marleft'>
								<xbutton size="medium" bgColor="red" round='25rpx' padding='0rpx 20rpx' @click='deleted(item)'>删除</xbutton>
							</view>
							<view class='marleft'>
								<xbutton size="medium" round='25rpx' padding='0rpx 20rpx' @click='modify(item)'>修改</xbutton>
							</view>
							<view class='marleft'>
								<xbutton size="medium" round='25rpx' padding='0rpx 20rpx' @click="relatedgoods(item)">关联商品
								</xbutton>
							</view>
							<view class='marleft'>
								<xbutton size="medium" round='25rpx' padding='0rpx 20rpx' @click="application(item)">应用到设备</xbutton>
							</view>
						</view>
					</view>
				</block>
				<u-loadmore :status="loadmoreStatus" />
			</view>

			<view style="margin-top: 120rpx;" v-else>
				<u-empty mode="data" text="数据为空"></u-empty>
			</view>
		</scroll-view>

		<view class="btn safe-bottom">
			<xbutton size='large' width='100%' @click="addcommoditylist">新增商品清单</xbutton>
		</view>

		<xpopup :show="addcommoditylistShow" @open="open" @close="cancel" @confirm="submit" :title="popTitle">
			<view class="addcommoditylist-container">

			<!-- 	<u--input class='martop' clearable suffixIcon="arrow-down" v-model="equipmentTypename"
					suffixIconStyle="color: #909399" placeholder="设备类型" border="surround" @focus="actionSheetShow=true">
				</u--input> -->
				<view class='martop'>
					<u--input placeholder="请输入商品清单名称" v-model="name" border="surround"></u--input>
				</view>
			</view>
		</xpopup>

		<!-- <u-action-sheet :show="actionSheetShow" :actions="equipmentTypeList" title="请选择设备类型"
			@close="actionSheetShow = false" @select="actionsheetSelect($event)"></u-action-sheet> -->
	</view>
</template>

<script>
	import request from '@/utils/request'
	import {
		page,
		save,
		update,
		saveGoodsDevice,
		del
	} from "@/api/commoditylist/commoditylist.js"
	import {
		detail
	} from "@/api/device/device.js"
	export default {
		data() {
			return {
				fullHeight: 0,
				commodityList: [], //商品清单
				name: '',
				loadmoreStatus: 'loadmore',
				popTitle: '新增清单',
				type: '',
				equipmentTypename: '',
				page: 1, //当前分页
				size: 10, //分页数据条数
				deviceType: '',
				actionSheetShow: false,
				addcommoditylistShow: false,
				
				deviceId:null,
				deviceName:null,
				
				equipmentTypeList:[]
			}
		},

		onLoad(o) {
			let _this = this;
			const query = uni.createSelectorQuery().in(this);
			query.select(".scrollview").boundingClientRect((data) => {
				uni.getSystemInfo({
					success(res) {
						// 针对iPhone X等机型底部安全距离做适配
						const model = res.model;
						const modelInclude = ["iPhone X", 'iPhone XR', "iPhone XS", "iPhone XS MAX",
							"iPhone XS Max"
						];
						let safeDistance = modelInclude.includes(model)
						//动态设置商品区域高度
						console.log(res.windowHeight, data.top)
						if (safeDistance) {
							_this.fullHeight = res.windowHeight - data.top - 40 + 'px';
						} else {
							_this.fullHeight = res.windowHeight - data.top + 'px';
						}
					},
				});
			}).exec();
			this.deviceId=o.id
		},

		async onShow() {
			await this.getDeviceType()
			this.reset()
			this.getpage()
		},
		methods: {
			getDeviceType(){
				return new Promise((resolve,reject)=>{
					detail({
						deviceId: this.deviceId,
						isSysinfo: false,
						isStatus: false,
						isRegister: false
					}).then(res => {
						this.deviceType = res.data.deviceType
						this.deviceName=res.data.deviceName
						resolve(res)
					}).catch(err=>{
						resolve(err)
					})
				})
			},
			
			//分页查询
			getpage() {
				page({
					page: {
						current: this.page,
						size: this.size,
					},
					deviceType:this.deviceType
				}).then(res => {
					let dicts=res.data.dicts[0]
					for (let key in dicts) {
						let item=dicts[key]
						this.equipmentTypeList.push(item)
					}
					let newList=res.data.records
					newList.forEach(i=>{
						this.equipmentTypeList.forEach(j=>{
							if(i.deviceType==j.value){
								i.deviceTypeName=j.msg
							}
						})
					})
					
					this.commodityList = this.commodityList.concat(newList)
					console.log(this.commodityList)
					if (newList.length<10) {
						this.loadmoreStatus = 'nomore'
					} else {
						this.loadmoreStatus = 'loadmore'
					}
				})
			},
			
			reset(){
				this.page=1
				this.commodityList=[]
			},
			
			loadMore(e) {
				if (this.loadmoreStatus == 'nomore') return
				this.page++
				this.getpage()
			},


			open() {
				this.addcommoditylistShow = true
			},
			
			//新增商品清单
			addcommoditylist() {
				this.popTitle = '新增清单'
				this.addcommoditylistShow = true
			},
			
			actionsheetSelect(e) {
				this.equipmentTypename = e.name
				this.deviceType = e.deviceType
			},
			cancel() {
				this.addcommoditylistShow = false
			},
			deleted(item) {
				uni.showModal({
					title: '提示',
					content: '是否确认删除',
					success: res=> {
						if (res.confirm) {
							del({
								ids: [item.modelId]
							}).then(res => {
								if (res.code == 200) {
									this.addcommoditylistShow = false
									this.reset()
									this.getpage()
									setTimeout(()=>{
										this.$modal.msg('删除成功~')
									},500)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			modify(item) {
				this.popTitle = '修改清单'
				this.name = item.name
				this.modelId=item.modelId
				this.addcommoditylistShow = true
			},
			
			// 新增商品清单
			submit() {
				if (!this.name) {
					uni.$u.toast('请填写清单名称')
					return;
				}
				if (this.popTitle == '新增清单') {
					save({
						name: this.name, //清单名称
						deviceType: this.deviceType, //设备类型
					}).then(res => {
						if (res.code == 200) {
							this.addcommoditylistShow = false
							this.reset()
							this.getpage()
							setTimeout(()=>{
								this.$modal.msg('新增成功~')
							},500)
						}
					})
				}
				if (this.popTitle == '修改清单') {
					update({
						modelId: this.modelId, //id
						name: this.name, //清单名称
						deviceType: this.deviceType //设备类型
					}).then(res => {
						if (res.code == 200) {
							this.addcommoditylistShow = false
							this.reset()
							this.getpage()
							setTimeout(()=>{
								this.$modal.msg('修改成功~')
							},500)
						}
					})
				}
			
			},
			
			//清单关联商品
			relatedgoods(item) {
				this.$tab.navigateTo(`comListEdit?modelId=${item.modelId}&title=${item.name}`)
			},
			
			//清单应用到设备
			application(item) {
				uni.showModal({
					title: '提示',
					content: `是否确认应用清单至设备${this.deviceName}`,
					success: res=> {
						if (res.confirm) {
							saveGoodsDevice({
								deviceIds: [this.deviceId], //设备信息id
								modelId: item.modelId //商品清单ID
							}).then(res => {
								this.$tab.navigateBack()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				// this.$tab.navigateTo(`application?modelId=${item.modelId}&title=${item.name}`)
			},

			
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		.martop {
			margin-top: 20rpx;
		}

		.marleft {
			margin-left: 20rpx;
		}

		.title {
			margin: 20rpx;
		}
		
		.scroll-content{
			overflow: hidden;
			padding-bottom: calc(120rpx + env(safe-area-inset-bottom) / 2);
		}

		.commoditylist-container {
			margin: 0 13rpx;
			&+.commoditylist-container{
				margin-top: 20rpx;
			}

			.commoditylist-content {
				padding: 20rpx;
				>view{
					line-height: 50rpx;
				}
			}
			
			.btn-box{
				
			}
		}

		.btn {
			width: 724rpx;
			position: fixed;
			left: 13rpx;
			bottom: calc(24rpx + env(safe-area-inset-bottom) / 2);
			border-radius: 88rpx;
			overflow: hidden;
		}

		.addcommoditylist-container {
			padding: 20rpx 30rpx 40rpx;
		}
	}
</style>