cashier_app/components/my-components/my-popup-table.vue

<template>
	<view class="mask u-fixed position-all u-flex u-col-bottom u-font-28" v-if="show" @tap="close">
		<view class="bg-fff w-full  " @tap.stop="nullFunction">
			<view class="u-p-30">
				<view class="font-bold u-text-center">选择商品</view>
				<view class="u-m-t-32 u-flex">
					<view class=" ">
						<uni-data-picker :clear-icon="false" :map="{text:'name',value:'id'}" placeholder="请选择分类"
							popup-title="请选择分类" :localdata="category" v-model="goods.query.categoryId">
							<view class="u-flex  u-font-28" >
								<text class=" u-line-1"
									style="max-width: 100rpx;">{{goods.query.categoryId||'分类' }}</text>
								<up-icon name="arrow-down" size="16"></up-icon>
							</view>
						</uni-data-picker>
					</view>
					<view class="u-flex-1 u-p-l-16">
						<up-search @custom="getGoods" v-model="goods.query.name" placeholder="请输入商品名称" @search="getGoods" @clear="getGoods"></up-search>
					</view>
					
				</view>

			</view>

			<scroll-view :scroll-x="false" scroll-y="true" :style="computedStyle()">
				<view class="u-p-l-30 u-p-r-30 table">
					<view class="u-flex u-row-between no-wrap title">
						<view>
							<my-radio @change="radioAllChange" v-model="goods.allChecked" shape="square"
								:size="20"></my-radio>
						</view>
						<view>商品信息</view>
						<view>规格</view>
						<!-- <view>是否售尽</view> -->
						<!-- <view>是否分销</view> -->
						<view>售价</view>
						<view>销量/库存</view>
						<view>分类名称</view>
					</view>
					<view @click="changeChecked(item)" class="u-m-t-12 u-flex  u-p-24 u-row-between row" v-for="(item,index) in goods.list" :key="index">
						<view class="">
							<my-radio @change="radioChange($event,item)" v-model="item.checked" shape="square" :size="20"></my-radio>
						</view>
						<view class="u-text-left u-flex-1 u-p-l-20">
							<!-- <view class="u-flex">
								<image lazy-load class="coverImg" :src="item.coverImg" mode=""></image>
							</view> -->
							<view class="">{{item.name}}</view>
						</view>
						<view class="u-flex-1 u-p-l-4 u-p-r-4 box-size-border">
							{{item.type}}
						</view>
						<view class="u-flex-1">
							￥{{ item.lowPrice }}
						</view>
						<view class="u-flex-1">
							<!-- {{ item.realSalesNumber }}/{{ item.stockNumber }} -->
						{{ item.stockNumber }}
						</view>
						<view class="u-flex-1">
							{{item.categoryName}}
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="u-p-30">
				<my-pagination :totalElements="goods.totalElements" :size="goods.query.size"
					@change="pageChange"></my-pagination>
				<view class="u-m-t-20 u-flex">
					<view class="u-flex-1 u-p-r-16">
						<my-button type="cancel" plain @tap="close">取消</my-button>
					</view>
					<view class="u-flex-1 u-p-l-16">
						<my-button @tap="confrim">确定</my-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive, onMounted, ref, watch } from 'vue';
	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		},
		height: {
			type: [Number, String],
			default: '50vh'
		},
		category: {
			type: Array,
			default: () => {
				return []
			}
		}
	})
	function changeChecked(item){
		item.checked=!item.checked
		if(!item.checked&&$selGoodsMap[item.id]){
			delete $selGoodsMap[item.id]
		}else{
			$selGoodsMap[item.id]=item
		}
		goods.allChecked = goods.list.filter(v => v.checked).length != 0
	}
	function nullFunction() {

	}

	const show = ref(props.modelValue)
	
	let selArr=[]
	
	let $selGoodsMap={}
	async function open(arr) {
		show.value = true
		selArr=arr
		console.log(arr);
		for(let i in arr){
			$selGoodsMap[arr[i].proId
]=arr[i]
		}
		getGoods()
	}

	function close() {
		show.value = false
		resetQuery()
		$selGoodsMap={}
	}



	function resetQuery() {
		Object.assign(goods.query, $quey)
	}

	function computedStyle() {
		return `height:${typeof props.height==='string'?props.height:props.height+'rpx'};`
	}

	const emits = defineEmits(['update:modelValue', 'confirm'])

	const $quey = {
		categoryId: "",
		createdAt: [],
		id: "",
		name: "",
		sort: "createdAt,desc",
		type: "",
		page: 0,
		size: 10,
	}
	const query = reactive({
		...$quey
	})
	const goods = reactive({
		list: [],
		allChecked: false,
		totalElements: 0,
		query: {
			...$quey
		}
	})
	getGoods()
	function getGoods() {
		const arr=selArr
		// $tbProductList(goods.query).then(res => {
		// 	let selLen=0;
		// 	goods.list = res.content.map(v => {
		// 		const checked=$selGoodsMap[v.id]?true:false
		// 		selLen+=(checked?1:0)
		// 		return {
		// 			...v,
		// 			checked
		// 		}
		// 	})
		// 	goods.allChecked = selLen==res.content.length?true:false
		// 	goods.totalElements = res.totalElements
		// })
	}

	function pageChange(page) {
		goods.query.page = page - 1
		getGoods()
	}

	function radioChange(newval,item) {
		if(!newval&&$selGoodsMap[item.id]){
			delete $selGoodsMap[item.id]
		}else{
			$selGoodsMap[item.id]=item
		}
		goods.allChecked = goods.list.filter(v => v.checked).length != 0
	}

	function radioAllChange(newval) {
		goods.list.forEach(i => {
			i.checked = newval
			if($selGoodsMap[i.id]&&!newval){
				delete $selGoodsMap[i.id]
			}else{
				$selGoodsMap[i.id]=i
			}
		})
	}
	
	function confrim() {
		for(let i in goods.list){
			const item=goods.list[i]
			if($selGoodsMap[item.id]&&!item.checked){
				delete $selGoodsMap[item.id]
			}
		}
		console.log($selGoodsMap);
		const arr = Object.values($selGoodsMap)
		emits('confirm', arr)
	}
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss" scoped>
	.bg-fff{
		border-radius: 24rpx 24rpx 0 0 ;
	}
	.mask {
		background: rgba(51, 51, 51, 0.5);
		z-index: 900;
	}
	.box-size-border{
		box-sizing: border-box;
	}
	.coverImg {
		width: 60rpx;
		height: 60rpx;
		border-radius: 10rpx;
	}
	.table {
		background: #F9F9F9;
		border-radius: 8rpx;
		overflow: hidden;
	
		.title {
			padding: 12rpx 24rpx 12rpx 24rpx;
			background: #AEBAD2;
			border-radius: 8rpx 8rpx 0rpx 0rpx;
			color: #fff;
		}
	
		.row:nth-of-type(2n+1) {
			background: #F0F0F0;
		}
	}
</style>