PDA/pages/query/query.vue

<template>
	<view class="query-wrap">
		<uni-easyinput prefixIcon="search" v-model="value" placeholder="请输入耗材名称" @input="searchData">
		</uni-easyinput>
		<view class="inner-item" v-for="(item,index) in dataList" :key="index">
			<view class="inventory-item">
				<view class="shuo-item-name">
					<view class="shuo-label-podnme">
						{{item.prodName}}
					</view>
					<!-- <view class="shuo-unit">
						{{item.unit}}
					</view> -->
				</view>
			</view>
			<view class="inventory-item">
				<view class="shuo-item">
					<view class="shuo-label">
						规格:
					</view>
					<view class="shuo-cont">
						{{item.spec}}
					</view>
				</view>
				<view class="shuo-item">
					<view class="shuo-label">
						型号:
					</view>
					<view class="shuo-cont">
						{{item.mol}}
					</view>
				</view>
			</view>
			<view class="inventory-item">
				<view class="shuo-item">
					<view class="shuo-label">
						耗材类别:
					</view>
					<view class="shuo-cont-blue">
						<span v-if="item.mcsType == '0'"> 普通耗材 </span>
						<span v-if="item.mcsType == '1'"> 高值耗材 </span>
						<span v-if="item.mcsType == '2'"> 试剂 </span>
						<span v-if="item.mcsType == '3'"> 总务耗材 </span>
					</view>
				</view>
				<view class="shuo-item">
					<view class="shuo-label">
						生产来源:
					</view>
					<view class="shuo-cont-blue">
						<span v-if="item.prodSouc == '1'" type="success"> 国产 </span>
						<span v-if="item.prodSouc == '2'" type="danger"> 进口 </span>
					</view>
				</view>
			</view>
			<view class="inventory-item">
				<view class="shuo-item-name">
					<view class="shuo-label">
						生产企业:
					</view>
					<view class="shuo-cont">
						{{item.prodEntp}}
					</view>
				</view>
			</view>
			<view class="inventory-item">
				<view class="shuo-item">
					<view class="shuo-label">
						所在仓库:
					</view>
					<view class="shuo-cont">
						{{houseSelectData.houseName}}
					</view>
				</view>
			</view>
			<view class="inventory-item">
				<view class="shuo-item">
					<view class="shuo-label">
						现有库存:
					</view>
					<view class="shuo-cont-blue">
						{{item.invCnt}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	import {
		debounce
	} from 'lodash';
	export default {
		data() {
			return {
				value: '',
				queryData: [],
				dataList: [],
			}
		},
		computed: {
			...mapState(['houseSelectData'])
		},
		async mounted() {
			await this.queryList({
				current: 1,
				size: 10
			})
		},
		methods: {
			queryList(data) {
				let that = this;
				this.$http('query.getListData', {
					...data,
					stroomId: this.houseSelectData.houseId,
				}, '加载中', true).then((res) => {
					if (res.success == true) {
						that.dataList = res.data.records;
					}
				})
			},
			//搜索数据
			searchData: debounce(function(e) {
				this.queryList({
					mcsInfo: e,
					current: 1,
					size: 10
				})
			}, 500)
		}
	}
</script>
<style lang="scss">
	uni-page-body {
		width: 100%;
		height: 100%;
	}

	.query-wrap {
		width: 100%;
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #F1F1F1;
		overflow-y: scroll;
		overflow-x: hidden;
	}
</style>