wms / wms-cloud-ui · Files

<template>
	<view>
		<view class="search">
			<uni-search-bar @confirm="handleSearch" @clear="handleClear" placeholder="输入物料编码"></uni-search-bar>
		</view>
		<view class='material-list'>
			<view class="list-item plr-10" v-for="(item,index) in materialList" :key="index">
				<view class="item-header u-f u-f-jcsb" @tap="goDetail(item,index)">
					<view class="left-content ">
						<view class="name">
							[{{materialTypeFormat(item.type)}}]{{item.name}}
						</view>
						<view class="code">
							编码：{{item.code}}
						</view>
						<view class="spec">
							型号：{{item.spec}}
						</view>
					</view>
					<view>
						<uni-tag text="已启用" type="success" size="small" v-if="item.enable == 0"></uni-tag>
						<uni-tag text="已停用" type="warning" size="small" v-else></uni-tag>
					</view>
				</view>
				<view class="item-footer u-f u-f-aic u-f-jce">
					<view class="operate">
						<view class="delete" @tap="delMaterial(item.id,index)">删除</view>
						<view class="modify" @tap="editMaterial(item.id)">修改</view>
					</view>
				</view>
			</view>
			<uni-load-more :iconSize="18" :status="loadStatus"></uni-load-more>
		</view>
		<uni-fab :pattern="pattern" :horizontal="'right'" :popMenu="false" @fabClick="fabClick"></uni-fab>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 查询参数
				queryParams: {
					code: undefined,
					pageNum: 1,
					pageSize: 10
				},
				loadStatus: "",
				total: null,
				materialList: [],
				materialTypeArr: [],
				timer: null,
				pattern: {
					buttonColor: '#007aff'
				},
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: "add-edit?type=add"
			})

		},
		onLoad() {
			this.getMaterial();
			this.getMaterialType();
			uni.$on('addUpdateMaterial', () => {
				this.queryParams.pageNum = 1;
				this.getMaterial();
				this.$msg('保存成功！');
			});
			uni.$on('editUpdateMaterial', () => {
				this.queryParams.pageNum = 1;
				this.getMaterial();
				this.$msg('保存成功！');
			});
			uni.$on('detailMaterialDel', (data) => {
				console.log(data)
				this.$msg('删除成功！');
				this.handleDel(data.index)

			});
		},
		onPullDownRefresh() {
			this.queryParams.pageNum = 1;
			this.getMaterial()
		},
		onReachBottom() {
			if (this.queryParams.pageNum >= this.total / 10) {
				this.loadStatus = "noMore";
				return
			}
			this.loadStatus = "loading";
			this.queryParams.pageNum++;
			this.getMaterial();
		},
		onUnload() {
			uni.$off('addUpdateMaterial');
			uni.$off('editUpdateMaterial');
			uni.$off('detailMaterialDel');
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}

		},
		methods: {
			// 顶部搜索
			handleSearch(e) {
				this.queryParams.code = e.value;
				this.getMaterial();
				this.loadStatus = "";
			},
			// 清除搜索
			handleClear() {
				this.queryParams.code = undefined;
				this.getMaterial()
			},
			// 获取物料
			getMaterial() {
				this.loadStatus = "loading";
				this.$http.material.listMaterial(this.queryParams).then(res => {
					console.log(res);
					res.data.rows.forEach(item => {
						item.qty = 0
					});
					if (this.queryParams.pageNum > 1) {
						this.materialList = this.materialList.concat(res.data.rows);
					} else {
						this.materialList = res.data.rows
					}
					this.total = res.data.total;
					uni.stopPullDownRefresh();
				})
			},
			// 获取物料类型
			getMaterialType() {
				this.$http.material.getMaterialType().then(res => {
					console.log(res);
					this.materialTypeArr = res.data.data
				})
			},
			// 物料类型字典翻译
			materialTypeFormat(type) {
				return this.selectCommonLabel(this.materialTypeArr, type);
			},
			// 删除方法
			handleDel(index) {
				this.materialList.splice(index, 1);
			},
			// 删除物料
			delMaterial(id, index) {
				this.$http.material.delMaterial(id).then(res => {
					if (res.data.code == 200) {
						this.materialList.splice(index, 1)
					}
				})
			},
			// 修改按钮点击
			editMaterial(id) {
				uni.navigateTo({
					url: 'add-edit?type=edit&id=' + id
				})
			},
			// 列表点击
			goDetail(data, index) {
				uni.navigateTo({
					url: "detail",
					url: 'detail?id=' + data.id + '&index=' + index
				});
			},
			// 悬浮按钮点击
			fabClick() {
				uni.navigateTo({
					url: "add"
				})
			},
		}

	}
</script>
<style lang='scss' scoped>
	.search {
		position: fixed;
		top: 88rpx;
		width: 100%;
		z-index: 1;
	}

	.material-list {
		margin-top: 130rpx;

		.list-item {
			margin-top: $uni-spacing-col-base;
			padding-top: $uni-spacing-col-base;
			background-color: $uni-bg-color;

			.item-header {
				.left-content {
					color: $uni-text-color-gray;

					.code,
					.spec {
						margin-top: $uni-spacing-col-sm;
					}

					.name {
						color: $uni-text-color;
						font-size: $uni-font-size-lg;
						font-weight: bold;
					}
				}
			}

			.item-footer {
				hegiht: 90rpx;
				line-height: 90rpx;
				margin-top: $uni-spacing-col-base;
				border-top: 2rpx solid $uni-border-color;

				.operate {

					.delete,
					.modify {
						display: inline-block;
						width: 100rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						border: 2rpx solid $uni-border-color;
						border-radius: 25rpx;
					}

					.delete {
						margin-right: $uni-spacing-row-base;
					}

				}
			}
		}
	}
</style>