vue添加规格分类

<template>
	<view class="main">
		<view class="header" @click="add_sp_name">
			<text class="title">新增规格</text>
			<text class="b_q">></text>
		</view>
		<!-- 新增列表 -->
		<view class="list_main">
			<view class="list_item" v-for="(i, n) in msg" :key="n">
				<view class="list_title">
					<text>{{ i.spName }}</text>
					<image class="fenlei_xx" src="../../static/ioc/fenlei_xx.png" mode=""></image>
				</view>
				<view class="list_item_item">
					<view class="item_text_main" v-for="(z, q) in i.specValueList" :key="q">
						<text
							@click="create_meney_store(i.spId, z.spValueId, z.spValueName, n)"
							@longpress="delsp(i.spName, z.spValueName, z.spValueId, i.spId)"
							class="item_text"
							:class="{ active: s_v_id.includes(z.spValueId) }"
						>
							{{ z.spValueName }}
						</text>
					</view>
					<view class="item_text_main"><text class="item_text" @click="upSpValueMame(i.spId)">自定义</text></view>
				</view>
			</view>
		</view>

		<!-- 价格库存 -->
		<view class="meney_story">
			<view class="meney_story_title"><text>价格/库存</text></view>
			<view class="" v-for="(i, index) in quanSpec" :key="index">
				<text class="money_story_text">
					<text>{{ i.specValueName }}</text>
				</text>
				<view class="input">
					<input v-model="i.specQuanPrice" placeholder="输入价格" type="text" value="" />
					<input v-model="i.specQuanStorage" placeholder="输入库存" type="text" value="" />
				</view>
			</view>
		</view>
		<button type="primary" class="bao_cun" @click="save">保存</button>
		<!-- 弹窗输入 -->
		<view class="tan_main" v-show="show_gg">
			<view class="tan">
				<image @click="colse_tan" class="tan_img" src="../../static/ioc/gg_xx.png" mode=""></image>
				<text class="tan_title">新增规格</text>
				<input v-model="data1.sp_name" class="tan_input" type="text" placeholder="请输入规格名" value="" />
				<text class="yes" @click="add_gg">确认</text>
			</view>
		</view>
		<!-- 分离弹窗 -->
		<view class="tan_main" v-show="show_fl">
			<view class="tan">
				<image @click="colse_tan" class="tan_img" src="../../static/ioc/gg_xx.png" mode=""></image>
				<text class="tan_title">添加规格值</text>
				<input v-model="data2.sp_value_name" class="tan_input" type="text" placeholder="请输入规格名" value="" />
				<text class="yes" @click="add_ggz()">确认</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show_gg: 0, //添加 显示规格弹出窗
			show_fl: 0, //添加 显示规格分类弹出窗
			data1: {
				//规格名
				sp_name: ''
			},
			data2: {
				//分类名
				sp_value_name: '', //规格值
				sp_id: '' //规格id
				// sp_value_id :'' //规格值id
			},
			data3: {
				//删除规格分类值
				sp_value_name: '',
				sp_id: '',
				sp_value_id: ''
			},
			msg: '',

			quanSpec: [],

			s_id: [], //规格id
			s_v_id: [],
			list: [
				// {id:1,item:[{id:11,name:'200ml'},{id:12,name:'600ml'}]},
				// {id:2,item:[{id:21,name:'红色'},{id:22,name:'蓝色'}]}
			]
		};
	},

	onLoad() {
		this.getdata();
	},
	methods: {
		save() {
			console.log(this.quanSpec);
			this.$emit('changes', this.quanSpec);
		},

		// 创建规格
		create_meney_store(sid, svalueid, svaluename, n) {
			//第一步,建立规格s_id和规格值s_v_id数组,为排序做准备
			if (this.s_id.indexOf(sid) == -1) {
				this.s_id.push(sid);
				this.s_v_id.push(svalueid);
				this.list.push({ id: sid, item: [{ id: svalueid, name: svaluename }] });
				//console.log('不存在sid就添加'+this.list)
			} else {
				if (this.s_v_id.indexOf(svalueid) == -1) {
					//console.log('存在sid就'+this.list)
					let i = this.s_id.indexOf(sid);
					this.s_v_id.push(svalueid);
					this.list[i].item.push({
						id: svalueid,
						name: svaluename
					});
					// console.log(this.list[i])
					// console.log(this.list)
				} else {
					let i = this.s_id.indexOf(sid);
					let s = this.s_v_id.indexOf(svalueid);

					let w_id = '';
					let w_v_id = '';
					for (let t = 0; t < this.list.length; t++) {
						if (sid == this.list[t].id) {
							w_id = t;
							for (let e = 0; e < this.list[t].item.length; e++) {
								if (svalueid == this.list[t].item[e].id) {
									w_v_id = e;
								}
							}
						}
					}
					console.log(w_id + '值为' + w_v_id);
					this.list[w_id].item.splice(w_v_id, 1);
					this.s_v_id.splice(s, 1);
					if (this.list[w_id].item.length == 0) {
						this.list.splice(w_id, 1);
						this.s_id.splice(i, 1);
					}
					console.log(this.list);
				}
			}
			// 第二步,将排序的名字转化对应二维数组
			let erwei = new Array();

			for (let i = 0; i < this.list.length; i++) {
				erwei.push(this.list[i].item);
				// [[{id:11,name:'200ml'},{id:12,name:'600ml'}],[{id:21,name:'红色'},{id:22,name:'蓝色'}]]
			}
			var newAry = [];
			for (var i = 0; i < erwei.length; i++) {
				var subAry = [];
				for (var j = 0; j < erwei[i].length; j++) {
					subAry.push(erwei[i][j].name);
				}
				newAry.push(subAry);
			}

			//转换成功
			//console.log(newAry)

			this.printResult(this.Zuhe(newAry));

			// 第三步,将排序id转化对应二维数组
			var newAry1 = [];
			for (var q = 0; q < erwei.length; q++) {
				var subAry1 = [];
				for (var w = 0; w < erwei[q].length; w++) {
					subAry1.push(erwei[q][w].id);
				}
				newAry1.push(subAry1);
			}
			this.printResult_id(this.Zuhe(newAry1));
			console.log(this.quanSpec);
		},

		//算法
		Zuhe() {
			var heads = arguments[0][0];
			for (var i = 1, len = arguments[0].length; i < len; i++) {
				heads = this.addNewType(heads, arguments[0][i]);
			}
			return heads;
		},
		printResult(result) {
			// console.log(result)
			this.quanSpec = [];
			for (var i = 0, len = result.length; i < len; i++) {
				console.log(result[i]);
				this.quanSpec.push({
					specValueId: '', //规格值id
					specQuanPrice: '', //价格
					specQuanStorage: '', //库存
					specValueName: result[i] //名称
				});
			}
			console.log(this.quanSpec);
		},
		printResult_id(result) {
			// console.log(result)

			for (var i = 0, len = result.length; i < len; i++) {
				console.log(result[i]);
				this.quanSpec[i].specValueId = result[i];
			}
		},
		addNewType(heads, choices) {
			var result = [];
			for (var i = 0, len = heads.length; i < len; i++) {
				for (var j = 0, lenj = choices.length; j < lenj; j++) {
					result.push(heads[i] + '+' + choices[j]);
				}
			}
			return result;
		},

		//删除规格名
		delsp(spname, spvaluename, spvalueid, spid) {
			this.data3.sp_id = spid;
			this.data3.sp_value_id = spvalueid;
			this.data3.sp_value_name = spvaluename;
			uni.showModal({
				title: '提示',
				content: '是否删除规格 ' + spname + '-->' + spvaluename,
				success: res => {
					if (res.confirm) {
						this.$apis.delSpecName(this.data3).then(res => {
							if (res.code == 0) {
								uni.showToast({
									title: res.msg,
									duration: 2000,
									icon: 'none'
								});
								this.getdata();
							}
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//新增规格名
		upSpValueMame(code) {
			this.show_fl = 1;
			this.data2.sp_id = code;
		},
		//新增规格
		add_gg() {
			this.$apis.insertSpecName(this.data1).then(res => {
				uni.showToast({
					title: res.msg,
					duration: 2000,
					icon: 'none'
				});
				this.getdata();
				this.colse_tan();
				this.data1.sp_name = '';
			});
		},
		add_ggz() {
			this.$apis.updateSpecName(this.data2).then(res => {
				uni.showToast({
					title: res.msg,
					duration: 2000,
					icon: 'none'
				});
				this.getdata();
				this.colse_tan();
				this.data2.sp_value_name = '';
			});
		},
		//显示规格弹窗
		add_sp_name() {
			this.show_gg = 1;
		},
		//关闭弹窗
		colse_tan() {
			this.show_fl = 0;
			this.show_gg = 0;
		},
		getdata() {
			this.$apis.quanSpValue().then(res => {
				this.msg = res.data;
			});
		}
	}
};
</script>

<style>
.fenlei_xx {
	height: 28upx;
	width: 28upx;
	margin-left: 10upx;
}
/* 添加选择 */
.xx {
	height: 100upx;
	background: #007aff;
}
/* 弹窗 */
.yes {
	font-size: 28upx;
	color: #3f6bac;
	margin-top: 50upx;
}
.tan_input {
	font-size: 28upx;
	margin-top: 50upx;
}
.tan_img {
	height: 28upx;
	width: 28upx;
	position: absolute;
	right: 20upx;
	top: 20upx;
}
.tan_title {
	font-size: 28upx;
	font-weight: bold;
	margin-top: 40upx;
}
.tan {
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	height: 300upx;
	width: 520upx;
	background: #ffffff;
	margin-top: 200upx;
}
.tan_main {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}
/* 保存 */
.bao_cun {
	background: #3f6bac;
	height: 88upx;
	width: 554upx;
	border-radius: 88upx;
	font-size: 28upx;
	line-height: 88upx;
	margin: 0 auto;
	margin-top: 60upx;
}
/* 价格库存 */
.input input {
	border: 1upx solid #999999;
	height: 60upx;
	width: 170upx;
	text-align: center;
	border-radius: 15upx;
	margin-left: 30upx;
	font-size: 28upx;
	margin-top: 20upx;
}
.input {
	display: flex;
}
.money_story_text {
	font-size: 28upx;
	color: #999999;
	margin-left: 30upx;
}
.meney_story {
	margin-top: 80upx;
}
.meney_story_title {
	font-size: 28upx;
	font-weight: bold;
	margin-left: 30upx;
}
/* 列表 */
.list_item {
	margin-top: 50upx;
}
.item_text_main {
	width: 25%;
	display: flex;
	justify-content: center;
	margin-top: 24upx;
}
.item_text {
	height: 60upx;
	width: 144upx;
	border: 2upx solid #999999;
	border-radius: 17upx;
	display: block;
	text-align: center;
	line-height: 60upx;
	font-size: 28upx;
	color: #999999;
}
.list_item_item {
	display: flex;
	flex-wrap: wrap;
}
.list_title {
	font-size: 28upx;
	font-weight: bold;
	margin-left: 30upx;
	display: flex;
	align-items: center;
}
/* 头部 */
.title {
	margin-left: 30upx;
}
.b_q {
	margin-right: 30upx;
}
.header {
	height: 100upx;
	width: 100%;
	align-items: center;
	display: flex;
	justify-content: space-between;
	font-size: 28upx;
	font-weight: bold;
}
.active {
	border-color: #3f6bac;
	color: #3f6bac;
}
</style>