From 63981c945259a60ed1482fa6b14b7f141c20c3f6 Mon Sep 17 00:00:00 2001
From: YeMingfei666 <1619116647@qq.com>
Date: Mon, 2 Dec 2024 09:38:03 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=84=E5=87=86=E5=A4=87=EF=BC=9A=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/my-components/my-popup-table.vue   | 268 ++++++++++++++++++
 components/my-components/my-table-col.vue     |   8 +
 components/my-components/my-table.vue         |  76 +++++
 pageProduct/add-Product/add-Product.vue       |   4 +-
 .../add-Product/components/choose-goods.vue   |  12 +-
 5 files changed, 361 insertions(+), 7 deletions(-)
 create mode 100644 components/my-components/my-popup-table.vue
 create mode 100644 components/my-components/my-table-col.vue
 create mode 100644 components/my-components/my-table.vue

diff --git a/components/my-components/my-popup-table.vue b/components/my-components/my-popup-table.vue
new file mode 100644
index 0000000..bcd3b0e
--- /dev/null
+++ b/components/my-components/my-popup-table.vue
@@ -0,0 +1,268 @@
+<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.typeEnum}}
+						</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 {
+		$tbProductList
+	} from '@/http/yskApi/goods.js';
+	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>
\ No newline at end of file
diff --git a/components/my-components/my-table-col.vue b/components/my-components/my-table-col.vue
new file mode 100644
index 0000000..02409e3
--- /dev/null
+++ b/components/my-components/my-table-col.vue
@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/components/my-components/my-table.vue b/components/my-components/my-table.vue
new file mode 100644
index 0000000..77cb15b
--- /dev/null
+++ b/components/my-components/my-table.vue
@@ -0,0 +1,76 @@
+<template>
+	<view class="  table u-font-28">
+		<view class="u-flex u-row-between no-wrap title">
+			<slot name="title">
+				<view>
+					<my-radio @change="radioAllChange" v-model="allChecked" shape="square" :size="20"></my-radio>
+				</view>
+				<view>商品信息</view>
+				<view>规格</view>
+				<view>售价</view>
+				<view>销量/库存</view>
+				<view>分类名称</view>
+			</slot>
+		</view>
+		<view @click="changeChecked(item)" class="u-m-t-12 u-flex  u-p-24 u-row-between row"
+			v-for="(item,index) in 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="">{{item.name}}</view>
+			</view>
+			<view class="u-flex-1 u-p-l-4 u-p-r-4 box-size-border">
+				{{item.typeEnum}}
+			</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>
+</template>
+
+<script setup>
+	import {
+		reactive, ref
+	} from 'vue';
+	const props=defineProps({
+		list:{
+			type:Array,
+			default:()=>[]
+		}
+	})
+	let allChecked=ref(false)
+	const emits=defineEmits(['selectAllChange'])
+	function radioAllChange(e){
+		emits('selectAllChange')
+		console.log('selectAllChange');
+	}
+</script>
+
+<style lang="scss">
+	.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>
\ No newline at end of file
diff --git a/pageProduct/add-Product/add-Product.vue b/pageProduct/add-Product/add-Product.vue
index 31b6d2d..349ac0e 100644
--- a/pageProduct/add-Product/add-Product.vue
+++ b/pageProduct/add-Product/add-Product.vue
@@ -702,6 +702,8 @@
 		<choose-guige ref="refChooseGuige" @confirm="refChooseGuigeConfirm"></choose-guige>
 		<!-- 更多操作 -->
 		<my-action-sheet @itemClick="actionSheetClick" ref="refMoreSheet" :list="actionSheet.list"></my-action-sheet>
+		
+		
 	</view>
 
 
@@ -1500,7 +1502,7 @@
 			},
 			{
 				name: '称重商品',
-				value: 'weight'
+				value: 'weigh'
 			}
 		],
 		typeEnums: [{
diff --git a/pageProduct/add-Product/components/choose-goods.vue b/pageProduct/add-Product/components/choose-goods.vue
index c11c6c9..bcd3b0e 100644
--- a/pageProduct/add-Product/components/choose-goods.vue
+++ b/pageProduct/add-Product/components/choose-goods.vue
@@ -47,14 +47,15 @@
 							</view> -->
 							<view class="">{{item.name}}</view>
 						</view>
-						<view class="u-flex-1">
+						<view class="u-flex-1 u-p-l-4 u-p-r-4 box-size-border">
 							{{item.typeEnum}}
 						</view>
 						<view class="u-flex-1">
 							￥{{ item.lowPrice }}
 						</view>
 						<view class="u-flex-1">
-							{{ item.realSalesNumber }}/{{ item.stockNumber }}
+							<!-- {{ item.realSalesNumber }}/{{ item.stockNumber }} -->
+						{{ item.stockNumber }}
 						</view>
 						<view class="u-flex-1">
 							{{item.categoryName}}
@@ -79,9 +80,6 @@
 </template>
 
 <script setup>
-	import myButton from '@/components/my-components/my-button';
-	import myRadio from '@/components/my-components/my-radio';
-	import myPagination from '@/components/my-components/my-pagination'
 	import {
 		$tbProductList
 	} from '@/http/yskApi/goods.js';
@@ -243,7 +241,9 @@
 		background: rgba(51, 51, 51, 0.5);
 		z-index: 900;
 	}
-
+	.box-size-border{
+		box-sizing: border-box;
+	}
 	.coverImg {
 		width: 60rpx;
 		height: 60rpx;