wx-qhb/pageA/rule/rule.vue

<template>
	<view>
		<h2>管理规格</h2>
		<div style="border: 1px solid #000;margin-bottom: 20px;" v-for="(spec, index) in specs" :key="index">
			<div
				style="display: flex;justify-content: space-between;background: #ddd;height: 40px;align-items: center;padding: 0 20px;box-sizing: border-box;">
				<div>
					<label :for="`spec-${index}`">规格名称: </label>
					<input type="text" :id="`spec-${index}`" v-model="spec.name" @input="rulea" />
					<input type="text" :id="`spec-${index}`" v-model="spec.name" @input="rulea" />
					<input type="text" :id="`spec-${index}`" v-model="spec.name" @input="rulea" />
					<input type="text" :id="`spec-${index}`" v-model="spec.name" @input="rulea" />
				</div>
				<div>
					<button @click="removeSpec(index)" style="margin-right: 20px;">删除规格</button>
					<button @click="addValue(index)">添加值</button>
				</div>
			</div>
			<div style="display: flex;flex-wrap: wrap;padding: 0 20px;box-sizing: border-box;">
				<div style="margin: 10px 0;" v-for="(value, idx) in spec.values" :key="idx">
					<label :for="`value-${index}-${idx}`">规格值: </label>
					<input type="text" :id="`value-${idx}`" v-model="spec.values[idx].name" @input="rulea" />
					<input type="text" :id="`value-${idx}`" v-model="spec.values[idx].name_en" @input="rulea" />
					<input type="text" :id="`value-${idx}`" v-model="spec.values[idx].name_es" @input="rulea" />
					<input type="text" :id="`value-${idx}`" v-model="spec.values[idx].name_ita" @input="rulea" />
					<button style="margin:0 20px;" @click="removeValue(index,name)">删除值</button>
				</div>
			</div>
		</div>
		<button @click="addSpec">添加规格</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectArr: [],
				subIndex: [],
				specs: [],
				zu: [],
				formattedItems: []
			}
		},
		onLoad() {

		},
		created() {
			this.rulea()
		},
		methods: {
			addValue(index) {
				// this.specs[index].values.push('');
				this.specs[index].values.push('');
			},
			addSpec() {
				this.specs.push({
					name: '',
					values: []
				});
			},
			rulea() {
				var all = []
				console.log('specs', this.specs);
				this.specs.forEach((item) => {
					all.push(item.values)
				})
				this.$nextTick(() => {
					this.zu = this.cartesianProductOf.apply(this, all)  
					// console.log(('ruleaaaa', this.zu));
					if (this.zu) {
						this.formatItems();
					}
				})
			},
			removeValue(specIndex, valueIndex) {
				console.log('specIndex', specIndex);
				console.log('valueIndex', valueIndex);
				this.specs[specIndex].values.splice(valueIndex, 1);
				this.rulea()
			},
			// 多规格组合
			cartesianProductOf() { //笛卡尔积
				return Array.prototype.reduce.call(arguments, (a, b) => {
					var ret = [];
					a.forEach((item) => {
						b.forEach((child) => {
							// var c = item.concat([child.name])
							// console.log(c);
							// ret.push({item:c});
							ret.push(item.concat([child]))
						});
					});
					console.log('ret', ret);
					return ret;
				}, [
					[]
				]);
			},
			formatItems() {
				// 遍历原始数组并转换格式
				var obj = {}
				this.formattedItems.map(item => {})
				console.log('this.formattedItems', this.formattedItems);
				let formlist = (JSON.parse(JSON.stringify(this.formattedItems)))
				this.formattedItems = []
				let resultList = []
				this.zu.forEach((item, index) => {
					if (this.zu) {
						let newlist = []
						newlist.push({
							height: item.height,
							stock_total: item.stock_total,
							weight: item.weight,
							length: item.length,
							width: item.width,
							price: item.price,
							image: item.image,
							is_sales: item.is_sales
						})
						let itemV0 = []
						let itemV1 = []
						let itemV2 = []
						let itemV3 = []
						// resultList.push(itemV)
						item.forEach((itemC, indexC) => {
							itemV0.push(itemC.name)
							itemV1.push(itemC.name_en)
							itemV2.push(itemC.name_es)
							itemV3.push(itemC.name_ita)
						})
						console.log('itemV1', itemV0);
						console.log('itemV2', itemV1);
						console.log('itemV3', itemV2);
						console.log('itemV4', itemV3);

						this.formattedItems.push({
							item: itemV0.join(","),
							item_en: itemV1.join(","),
							item_es: itemV2.join(","),
							item_ita: itemV3.join(","),
							// ...newlist[index]
							height: '0', // 假设高度为20
							stock_total: '0', // 库存
							weight: '0', // 重量
							length: '0', // 长度
							width: '0', // 宽度
							price: '0.00', // 价格
							image: '', // 图片
							is_sales: true, // 是否售卖
						});
					} else {
						this.formattedItems = []
					}



				});

				// this.formattedItems = newlist.concat(this.formattedItems)
				console.log('formlist', formlist);
				console.log('formattedItems', this.formattedItems);
				this.formattedItems.forEach((item, index) => {
					formlist.forEach((child, indexC) => {
						if (formlist.length == this.formattedItems.length) {
							if (index == indexC) {
								item.stock_total = child.stock_total // 库存
								item.height = child.height // 假设高度为20
								item.weight = child.weight // 重量
								item.weight = child.weight // 长度
								item.width = child.width // 宽度
								item.price = child.price // 价格
								item.image = child.image // 图片
								item.is_sales = child.is_sales // 是否售卖
							}
						} else {
							if (item.item == child.item) {
								item.height = child.height // 假设高度为20
								item.stock_total = child.stock_total // 库存
								item.weight = child.weight // 重量
								item.weight = child.weight // 长度
								item.width = child.width // 宽度
								item.price = child.price // 价格
								item.image = child.image // 图片
								item.is_sales = child.is_sales // 是否售卖
							}
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.avatar {
		width: 60%;
		float: left;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatara {
		width: 178px;
		height: 178px;
		display: block;
	}

	.wp-80 {
		width: 80%;
	}

	.wp-47 {
		width: 47%;
	}

	.mg-auto {
		margin: 0 auto;
	}

	.pd-25 {
		padding: 25rpx;
	}

	.pd-b-20 {
		padding: 0 0 20rpx;
	}

	.pd-tb-40 {
		padding: 40rpx 0;
	}

	.bg-fff {
		background-color: #FFFFFF;
	}

	.radius5 {
		border-radius: 5rpx;
	}

	.radius50 {
		border-radius: 50rpx;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.fss {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.fbc {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.fcc {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.safe_area {
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
	}

	.dra_position {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		height: auto;
	}

	.scroll-view-box {
		font-size: 28rpx;
		bottom: 84rpx;
	}

	.dra_close {
		box-sizing: border-box;
		position: absolute;
		bottom: 0;
		width: 100%;
		padding: 15rpx 30rpx 20rpx;

		>view {
			height: 68rpx;
			line-height: 68rpx;
			text-align: center;
		}

		.btns {
			color: #a12a30;
			border: 1px solid #a12a30;
		}

		.btns1 {
			color: #FFFFFF;
			background-color: #a12a30;
		}
	}

	.scroll-view-div {
		>view:nth-child(3n-1) {
			margin: 0 10rpx;
		}

		>view {
			width: 32%;
			height: 72rpx;
			margin-bottom: 16rpx;
			text-align: center;
			background-color: #F5F5F5;
		}

		.active {
			color: #ff000b;
			background-color: #fff4f3;
		}
	}
</style>