zhongshen_project/addon/cashier---/source/os/pages/stock/storage.vue

<template>
	<base-page>
		<view class="goodslist">
			<view class="goodslist-box">
				<view class="goodslist-left">
					<view class="goods-title">
						入库单查询
						<text class="iconfont icongengduo1"></text>
					</view>
					<view class="goods-search">
						<view class="search">
							<text class="iconfont icon31sousuo"></text>
							<input type="text" v-model="search_text" @input="search" placeholder="搜索入库单号" />
						</view>
					</view>
					<scroll-view scroll-y="true" class="goods-list-scroll" :show-scrollbar="false" @scrolltolower="getListData">
						<view
							class="item"
							@click="getDetailData(item.document_id, index)"
							v-for="(item, index) in list"
							:key="index"
							:class="{ itemhover: selectGoodsKeys == index }"
						>
							<view class="title">
								<view>{{ item.document_no }}</view>
								<view>{{ item.type_name }}</view>
							</view>
							<view class="other-info">
								<view>￥{{ item.document_money }}</view>
								<view>{{ item.operater_name }}</view>
								<view>{{ $util.timeFormat(item.create_time) }}</view>
							</view>
						</view>
						<view class="notYet" v-if="!list.length">暂无数据</view>
					</scroll-view>

					<button type="default" class="add-wastage" v-if="storeInfo && storeInfo.stock_type == 'store'" @click="add()">添加入库单</button>
				</view>
				<view class="goodslist-right">
					<view class="goods-title">入库单详情</view>
					<view class="order-information" v-if="Object.keys(detail).length">
						<view class="order-status">基本信息</view>
						<view class="order-types">
							<view class="type type1">
								<view>制单人：</view>
								<view>{{ detail.operater_name || '--' }}</view>
							</view>
							<view class="type type1">
								<view>制单时间：</view>
								<view class="message">{{ detail.create_time }}</view>
							</view>
							<view class="type type1">
								<view>单据类型：</view>
								<view class="message">{{ detail.type_name }}</view>
							</view>
						</view>

						<view class="goods-info">
							<view class="title">商品明细</view>
							<view class="table">
								<view class="table-th table-all">
									<view class="table-td" style="width:45%;justify-content: flex-start;">商品名称/规格/条形码</view>
									<view class="table-td" style="width:15%">单位</view>
									<view class="table-td" style="width:10%">数量</view>
									<view class="table-td" style="width:15%">单价(元)</view>
									<view class="table-td" style="width:15%;justify-content: flex-end;">金额(元)</view>
								</view>
								<view class="table-tr table-all" v-for="(item, index) in detail.goods_sku_list_array" :key="index">
									<view class="table-td table-goods-name" style="width:45%;justify-content: flex-start;">
										<image :src="$util.img(item.goods_sku_img)" mode="aspectFill"></image>
										<text class="multi-hidden">{{ item.goods_sku_name }}</text>
									</view>
									<view class="table-td" style="width:15%">{{ item.goods_unit }}</view>
									<view class="table-td" style="width:10%">{{ item.goods_num }}</view>
									<view class="table-td" style="width:15%">{{ item.goods_price }}</view>
									<view class="table-td" style="width:15%;justify-content: flex-end;">{{ parseFloat(item.goods_sum).toFixed(2) }}</view>
								</view>
							</view>

							<view class="total-money-num">
								<view class="box">
									<view>商品种类</view>
									<view class="money">{{ detail.goods_count }}种</view>
								</view>
								<view class="box">
									<view>商品数量</view>
									<view class="money">{{ detail.goods_piece }}{{ detail.goods_unit }}</view>
								</view>
								<view class="box total">
									<view>合计金额</view>
									<view class="money">￥{{ parseFloat(detail.goods_total_price).toFixed(2) }}</view>
								</view>
							</view>
						</view>
					</view>
					<block v-else><image class="cart-empty" :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image></block>
				</view>
			</view>
		</view>
	</base-page>
</template>

<script>
export default {
	data() {
		return {
			selectGoodsKeys: 0,
			//获取订单的页数
			page: 1,
			//每次获取订单的条数
			page_size: 9,
			// 订单搜索是用到的数据
			search_text: '',
			//初始时加载详情数据判断
			one_judge: true,
			// 订单列表数据
			list: [],
			//订单详情数据
			detail: {}
		};
	},
	onLoad(option) {
		if (option.id) {
			this.search_text = option.id;
		}
		this.getListData();
	},

	methods: {
		// 搜索
		search() {
			this.page = 1;
			this.list = [];
			this.one_judge = true;
			this.getListData();
		},
		/**
		 * 获取订单列表
		 */
		getListData() {
			this.$api.sendRequest({
				url: '/stock/storeapi/storage/lists',
				data: {
					page: this.page,
					page_size: this.page_size,
					search_text: this.search_text
				},
				success: res => {
					if (res.data.list.length == 0 && this.one_judge) {
						this.detail = {};
						this.one_judge = false;
					}
					if (res.code >= 0 && res.data.list.length != 0) {
						this.page += 1;

						if (this.list.length == 0) {
							this.list = res.data.list;
						} else {
							this.list = this.list.concat(res.data.list);
						}

						//初始时加载一遍详情数据
						if (this.one_judge) {
							this.getDetailData(this.list[0].document_id);
						}
					}
				}
			});
		},

		/**
		 * 获取订单详情数据
		 */
		getDetailData(document_id, keys = 0) {
			this.selectGoodsKeys = keys;
			this.type = 'detail';
			this.$api.sendRequest({
				url: '/stock/storeapi/storage/detail',
				data: {
					document_id
				},
				success: res => {
					if (res.code >= 0) {
						this.detail = res.data;
						this.$forceUpdate();
						this.one_judge = false;
					}
				}
			});
		},
		add(data) {
			this.$util.redirectTo('/pages/stock/stockin');
		}
	}
};
</script>

<style scoped lang="scss">
@import './public/css/orderlist.scss';
</style>