PropertyApp/components/resource/view-resource-store-info.vue

<template>
	<view class="select-single-resource">
		<view class="resource-header flex justify-between bg-white">
			<view class="text-bold">{{cName}}</view>
			<view>
				<button class="cu-btn line-blue sm round" @tap="_openChooseResourceModel()">选择物品</button>
			</view>
		</view>
		<view class=" ">
			<view class="resource-item bg-white" v-for="(item,index) in resourceList" :key="index">
				<view class=" " style="">
					<view class=" flex-around">
						<text class="ellip text-df">{{item.resName}}({{item.parentRstName}}>{{item.rstName}})</text>
						<text class="item-remove line-red text-df" @click="_removeItem(index, item.resId)">移除</text>
					</view>
					<view class=" flex-around">
						<label class="text-df">库存:</label>
						<text class="text-df">{{_getTimesStock(item)}}{{item.unitCodeName}}</text>
					</view>
					<view class=" flex-around ">
						<label class="text-df">价格:</label>
						<picker :range="item.times" :range-key="'price'" @change="timesChange($event, index)">
							<view class="picker">{{item.selectedTimesIndex <0?'请选择': item.times[item.selectedTimesIndex].price}} >
							</view>
						</picker>
					</view>
					<view class=" flex-around">
						<label class="text-df">数量:</label>
						<input class="  text-right" type="number" v-model="item.quantity" placeholder="请输入数量"
							placeholder-class="text-grey text-df" value="" />
					</view>
					<view class=" flex-around">
						<label class="text-df">备注:</label>
						<input class="  text-right" type="text" placeholder="选填,请输入备注"
							placeholder-class="text-grey text-df" v-model="item.remark" value="" />
					</view>
				</view>
			</view>
		</view>
		<select-resource @getResourceInfo="_getResourceInfo" ref="selectresource" :resOrderType="resOrderType"
			:shType="shType"></select-resource>
	</view>
</template>

<script>
	import {
		queryResourceSupplier,
		queryRepairInfo
	} from '../../api/resource/resource.js'
	import selectResource from '../resource/select-resource.vue'

	export default {
		components: {
			selectResource
		},
		data() {
			return {
				resourceList: [],
				supplierIndex: 0,
				resourceSuppliers: [{
					supplierName: '请选择'
				}],
				suppliersList: [],
			}
		},
		props: {
			resOrderType: {
				type: String
			},
			shType: {
				type: String
			},
			shId: {
				type: String
			},
			cName:{
				type: String,
				default:'采购物品'
			}
		},
		methods: {
			_setResourceStore: function(_resourceStores) {
				this._getResourceInfo(_resourceStores);
			},
			_openChooseResourceModel: function() {
				this.$refs.selectresource.switchShow(this.shId);
			},
			_loadResourceSuppliers: function() {
				let _that = this;
				let _data = {
					page: 1,
					row: 100
				};
				queryResourceSupplier(this, _data)
					.then(function(res) {
						_that.resourceSuppliers = _that.resourceSuppliers.concat(res.data);
					});
			},
			_resourceSuppliersChange: function(i, e) {
				this.$set(this.suppliersList, i, e.target.value)
				this.resourceList[i].rsId = this.resourceSuppliers[this.suppliersList[i]].rsId
			},
			_getResourceInfo: function(list) {
				this.resourceList = list;
				this.resourceList.forEach((item) => {
					item.timesId = '';
					if (item.times && item.times.length > 0) {
						item.timesId = item.times[0].timesId;
						item.selectedTimesIndex = 1;
						item.selectedTimesStock = item.times[0].stock;
					} else {
						item.selectedTimesIndex = 0;
						item.selectedTimesStock = 0;
					}
					item.times.unshift({
						timesId: '',
						price: '请选择'
					})
					this.suppliersList.push(0);
				})
			},
			getResourceStores: function() {
				this.$emit('getResourceStores', this.resourceList);
			},
			_removeItem: function(index, resId) {
				this.resourceList.splice(index, 1);
				// 通知子组件 取消选中checkbox
				this.$refs.selectresource.removeSelectedItem(resId);
			},
			timesChange: function(e, index) {
				let timeIndex = e.target.value;
				this.resourceList[index].selectedTimesIndex = timeIndex;
				if (timeIndex == 0) {
					this.resourceList[index].timesId = '';
					this.resourceList[index].selectedTimesStock = 0;
				} else {
					this.resourceList[index].timesId = this.resourceList[index].times[timeIndex].timesId;
					this.resourceList[index].selectedTimesStock = this.resourceList[index].times[timeIndex].stock;
				}
				this.$forceUpdate();
			},
			_getTimesStock: function(_resourceStore) {
				if (!_resourceStore.timesId) {
					return "-";
				}
				let _stock = 0;
				_resourceStore.times.forEach(_item => {
					if (_item.timesId == _resourceStore.timesId) {
						_stock = _item.stock;
					}
				});
				if (!_resourceStore.quantity) {
					_resourceStore.quantity = '';
				}
				return _stock;
			}
		}
	}
</script>

<style lang="scss">
	.item-remove {
		border-radius: 15rpx;
		padding: 2rpx 10rpx;
	}

	.resource-header {
		margin-top: 30upx;
		padding: 20upx
	}

	.resource-item {
		margin-top: 2upx;
		padding: 20upx;

		.flex-around {
			display: flex;
			justify-content: space-between;
			margin-top: 15upx;
		}
	}
</style>