cashier_admin_app/pageConsumables/outbound.vue

<template>
	<view class="warehouseEntry">
		<ul>
			<li>
				<view>
					出库数量
				</view>
				<view>
					<input type="text" placeholder="请输入数量" v-model="datas.form.list.stockNumber" name="" id="">
				</view>
			</li>
			<li>
				<view>
					进价
				</view>
				<view>
					<input type="text" placeholder="请输入进价(元)" v-model="datas.form.list.price" name="" id="">
				</view>
			</li>
			<li>
				<view>
					应付金额
				</view>
				<view>
					{{datas.form.list.stockNumber*datas.form.list.price|0}}
				</view>
			</li>
			<li>
				<view>
					实付金额
				</view>
				<view>
					<input placeholder="请输入现有库存" type="text" v-model="datas.form.actualPayment" />
				</view>
			</li>
			<!-- <li>
				<view>
					总价值
				</view>
				<view>
					<input type="text" placeholder="请输入总价值(元)" name="" id="">
				</view>
			</li> -->
			<li style="justify-content: space-between;">
				<view>
					供应商
				</view>
				<view style="width: 54%;" @tap="showStatusToggle">
					{{datas.status[nowStatusIndex]}}
				</view>
				<uni-icons type="bottom" size="16"></uni-icons>
				<up-button type="text" style="color: #318AFE;width: 64rpx;" @tap="toggle" :plain="true"
					text="新增"></up-button>
			</li>
		</ul>
		<view :style="{height:showStatus?statusHeight:0}" class="tranistion status  overflow-hide">
			<view @tap="changeNowStatusIndex(index)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between"
				v-for="(item,index) in datas.status" :key="index">
				<view :class="{'color-main':nowStatusIndex===index}">{{item}}</view>
				<uni-icons v-if="nowStatusIndex===index" type="checkmarkempty" :color="color.ColorMain"></uni-icons>
			</view>
			<view :style="{height: '14px'}"></view>
		</view>
	</view>
	<view class="bottombutton">
		<up-button type="primary" style="background-color:  #318AFE;color: #fff;" @tap="sumbit" :plain="true"
			text="保存"></up-button>
		<!-- 	<up-button type="text" style="background-color:  #f9f9f9;color: #999;" @tap="toggle" :plain="true"
			text="取消"></up-button> -->
	</view>
</template>


<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import color from '@/commons/color.js';
	import go from '@/commons/utils/go.js';
	import {
		tbConsInfostockInOut,
		tbConsInfoList,
		tbShopPurveyor
	} from '@/http/yskApi/requestAll.js';
	let showStatus = ref(false)
	let datas = reactive({
		// 供应商列表
		list: [],
		// 供应商渲染数组
		status: [],
		form: {
			shopId: uni.getStorageSync("shopId"),
			type: "out",
			list: {},
			actualPayment: 0
		},
	})
	const props = defineProps({
		consId: {
			type: String
		}
	})
	onMounted(() => {
		getList()
	})

	function getList() {
		tbShopPurveyor({
			shopId: uni.getStorageSync("shopId"),
			page: 0,
			size: 100,
		}).then(res => {
			datas.list = res.content
			res.content.forEach(ele => {
				datas.status.push(ele.purveyorName)
			})
		})
	}

	function showStatusToggle() {
		showStatus.value = !showStatus.value
	}
	let nowStatusIndex = ref(0)

	function changeNowStatusIndex(i) {
		nowStatusIndex.value = i
		showStatus.value = false
	}

	function sumbit() {
		datas.form.list.conInfoId = props.consId
		datas.form.list = [datas.form.list]
		tbConsInfostockInOut({
			...datas.form,
			// 供应商id
			supplierId: datas.list[nowStatusIndex.value].id,
			accountsPayable: datas.form.list[0].stockNumber * datas.form.list[0].price,
		}).then(res => {
			go.to('PAGES_SALES_CONSUMABLES')
		})
	}
	// 获取供应商
	const statusHeight = computed(() => {
		return 30 * datas.status.length + 14 + 'px'
	})
</script>

<style scoped lang="less">
	page {
		background-color: #f9f9f9;
	}

	.df() {
		display: flex;
		align-items: center;
	}

	ul,
	li {
		list-style: none;
		padding: 0;
	}

	.status {
		margin: 0 32rpx;
		position: absolute;
		// top: 100%;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #fff;
	}

	.warehouseEntry {
		width: 694rpx;
		height: 640rpx;
		background: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		margin: 32rpx;
		padding: 1rpx 24rpx;
		box-sizing: border-box;

		>ul {
			>li {
				width: 646rpx;
				height: 84rpx;
				background: #fcfcfc;
				border: 2rpx solid #F9F9F9;
				margin-top: 32rpx;
				.df;

				>view:first-child {
					width: 190rpx;
					height: 84rpx;
					line-height: 84rpx;
					// text-align: left;
					padding-left: 24rpx;
					background: #F9F9F9;
					border-radius: 8rpx 0rpx 0rpx 8rpx;
					border: 2rpx solid #F9F9F9;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
				}
			}
		}
	}

	.bottombutton {
		margin-top: 84rpx;

		>button {
			width: 530rpx;
			height: 80rpx;
			border-radius: 56rpx 56rpx 56rpx 56rpx;
		}
	}
</style>