distribution-uni/package1/inventory/gategoryLow.vue

<template>
	<view class="u-wrap">
		<!-- <view style="width: 100%;position: fixed;z-index: 99;">
			<button size="default" type="default" @tap="inputDialogToggle('attrAdd',categoryId)"
				hover-class="is-hover">添加分类</button>
		</view> -->
		<view class="card-list">
			<ul>
				<li v-for="items in attrList" :key="items.id">
					<view class="title-fur">
						<view class="name">{{items.attributeName}}</view>
						<view class="rightBox">
							<u-icon size="20" name="plus" color="#5fd9ee"
								@tap="inputDialogToggle('attrValAdd', items.id) "></u-icon>
							<!-- <u-icon size="24" name="edit-pen"  color="#5fd9ee" @tap="inputDialogToggle('attrEdit', items, item) "></u-icon> -->
							<!-- <u-icon size="24" name="trash" color="#f56c6c" @tap="delItem(items, 'attrDel')"></u-icon> -->
						</view>
					</view>
					<view class="content-fur">
						<view class="content-low" v-for="item in items.attributeValue" :key="item.id"
							@tap="delItem(item, 'attrNameDel')">{{item.value}}</view>
					</view>
				</li>
			</ul>
		</view>
		<u-modal :show="show" :title="'删除'" :content="'是否确认删除此分类？'" showCancelButton="true" @cancel="show = false"
			@confirm="delItemModal"></u-modal>
		<uni-popup ref="inputDialog" type="dialog">
			<view class="type-popup" style="width:100%;margin-bottom: 0;border-radius: 0;height: 450rpx;border-radius: 10px;">
				<view style="height: 120rpx;font-size: 36rpx;font-weight: bold;line-height: 120rpx;text-align: center;">
					新增规格
				</view>
				<view style="height: 80rpx;font-size: 28rpx;line-height: 80rpx;text-align: center;">
					请在下方输入框中输入新规格
				</view>
				<view style="width: 90%;margin: 40rpx auto 0;">
					<uni-easyinput type="text" v-model="categoryText" @blur="handleBlur" placeholder="请输入规格值" />
				</view>
				<view style="width: 100%;height: 90rpx;line-height: 90rpx;text-align: center;border-radius: 0;background: linear-gradient(90deg, #60F3FF, #088FEB);color: #fff;display: flex;position: absolute;bottom: 0;">
					<view style="width:50%;" @tap="$refs.inputDialog.close()">取消</view>
					<view style="width:50%;background: linear-gradient(90deg, #FF9797, #FFC1E0);" @tap="dialogInputConfirm">确认</view>
				</view>
			</view>
		</uni-popup>
		<!-- 查看商品库存弹出层 -->
		<uni-popup ref="carPopup" background-color="#fff">
			<view class="popup-content" style="height:auto !important;">
				<view style="font-size: 36rpx;font-weight: bold;text-align: center;">提示</view>
				<view v-if="goodsList !=''"
					style="width:100%;font-weight:bold;text-align: center;font-size: 28rpx;margin: 20rpx 0;">
					{{goodsList[0].productName}}商品有以下库存，确认继续删除吗？
				</view>
				<view class="tui-order-item boxbg">
					<view style="display: flex;border-bottom: 1px solid #eee;height: 50rpx;line-height: 50rpx;">
						<view style="width: 70%;text-align: center;border-right: 1px solid #eee;">商品规格</view>
						<view style="width: 29%;text-align: center;">数量</view>
					</view>
					<view class="shop-box" v-for="(item,index) in goodsList" :key="index" style="position: relative;">
						<view style='height: 50rpx;line-height: 50rpx;'>
							<view
								style="width: 70%;text-align: center;border-right: 1px solid #eee;float: left;height: 50rpx;overflow: hidden;">
								{{item.attributeList | sliceMsg}}
							</view>
							<view style="width: 29%;text-align: center;float: left;">
								{{item.stockCount}}
							</view>
						</view>
					</view>
				</view>
				<!-- <u-loadmore :status="status" /> -->
				<view class="popup-bottom">
					<view class="popup-bottom-left">
						<view class="bottom-btn" @tap="this.$refs.carPopup.close()"
							style="background: linear-gradient(90deg, #FF9797, #FFC1E0);">再想想</view>
					</view>
					<view class="popup-bottom-right">
						<view class="bottom-btn" @tap="this.show = true">确认删除</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				// indexList: [],
				show: false,
				inputVal: '',
				typeModel: '',
				editItem: {},
				delItems: {},
				isOpenId: '',
				attrList: [],
				openIndex: '',
				delType: '',
				dialogTit: '输入分类名',
				categoryId: '',
				goodsList: [],
				categoryText:''
			}
		},
		computed: {

		},
		filters: {
			sliceMsg(val) {
				var name = ''
				if (typeof(val) == 'string') {
					let newObj = JSON.parse(val)
					for (let as in newObj) {
						name += newObj[as] + '/'
					}
				}
				return name;
			}
		},
		onLoad(options) {
			this.categoryId = options.id
			this.getGategoryList(options.id)
		},
		methods: {
			//初始化获取子分类列表
			getGategoryList() {
				let data = []
				this.tui.request("/app/productAttribute/selectByCategoryId", "POST", {
					categoryId: this.categoryId
				}, false, true).then((res1) => {
					if (res1.code == 200) {
						data = res1.result;
						if (res1.result.length > 0) {
							data.forEach((items) => {
								this.tui.request(
									"/app/productAttributeValue/selectByAttributeId",
									"get", {
										id: items.id
									}, false, true).then((res2) => {
									if (res2.code == 200) {
										items.attributeValue = res2.result;
										this.$forceUpdate()
									} else {
										this.tui.toast(res.message)
									}

								}).catch((res) => {})
							})
						}
						
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
				this.$forceUpdate()
				setTimeout(() => {
					this.attrList = data
				}, 1000)
			},
			//查询分类下有没有库存
			getTypeToNum() {
				let that = this;
				this.tui.request("/app/stock/getlistByAttributeList", "post", {
					categoryId: this.categoryId,
					attributeList: this.delItems.attributeName || this.delItems.value,
				}, false, true).then((res) => {
					if (res.code == 200) {
						if (res.result != '') {
							this.goodsList = res.result
							this.$refs.carPopup.open('bottom')
						} else {
							that.show = true
						}
					}
				}).catch((res) => {})
			},
			inputDialogToggle(type, item, parent) {
				this.typeModel = type;
				if (type == 'edit') {
					this.inputVal = item.categoryName;
					this.editItem = item;
				} else if (type == 'add' || type == 'attrAdd' || type == 'attrValAdd') {
					this.inputVal = '';
					this.isOpenId = item;
					if (type == 'add') {
						this.dialogTit = '输入分类名'
					} else if (type == 'attrAdd') {
						this.dialogTit = '输入分类名'
						// this.$refs.addTypeDialog.open('bottom')
					} else if (type == 'attrValAdd') {
						this.dialogTit = '输入属性值'
					}
				} else if (type == 'attrEdit') {
					this.inputVal = item.attributeName;
					this.editItem = item;
				}
				this.$refs.inputDialog.open('bottom')
			},
			handleBlur(e){
				this.categoryText = e.detail.value
			},
			dialogInputConfirm(e) {
				switch (this.typeModel) {
					case 'add':

						this.tui.request("/app/productCategory/save", "post", {
							categoryName: this.categoryText
						}, false, true).then((res) => {

							if (res.code == 200) {
								this.getGategoryList()
								uni.showToast({
									title: "添加成功",
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: "添加失败",
									icon: 'none'
								})
							}

						}).catch((res) => {})
						break;
					case 'edit':
						this.tui.request("/app/productCategory/edit", "post", {
							categoryName: this.categoryText,
							id: this.editItem.id
						}, false, true).then((res) => {
							if (res.code == 200) {
								this.getGategoryList()
								uni.showToast({
									title: "修改成功",
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: "修改失败",
									icon: 'none'
								})
							}
						}).catch((res) => {})
						break;
					case 'attrAdd':
						for (let i = 0; i < this.attrList.length; i++) {
							if (this.attrList[i].attributeName == e) {
								uni.showToast({
									title: "请勿重复添加",
									icon: 'none'
								})
								return
							}
						}
						this.tui.request("/app/productAttribute/save", "post", {
							attributeName: this.categoryText,
							categoryId: this.isOpenId
						}, false, true).then((res) => {
							if (res.code == 200) {
								this.getGategoryList()
								uni.showToast({
									title: "添加成功",
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: "添加失败",
									icon: 'none'
								})
							}
						}).catch((res) => {})
						break;
					case 'attrValAdd':
						if (e == '') {
							uni.showToast({
								title: "不能为空！",
								icon: 'none'
							})
							return
						}
						this.tui.request("/app/productAttributeValue/save", "post", {
							value: this.categoryText,
							attributeId: this.isOpenId
						}, false, true).then((res) => {
							if (res.code == 200) {
								this.getGategoryList()
								uni.showToast({
									title: "添加成功",
									icon: 'none'
								})
								this.$refs.inputDialog.close()
							} else {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							}
						}).catch((res) => {})
						break;
					case 'attrEdit':
						this.tui.request("/app/productAttribute/edit", "post", {
							attributeName: this.categoryText,
							categoryId: this.editItem.categoryId,
							id: this.editItem.id
						}, false, true).then((res) => {

							if (res.code == 200) {
								this.getGategoryList()
								uni.showToast({
									title: "修改成功",
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: "修改失败",
									icon: 'none'
								})
							}
						}).catch((res) => {})
						break;
					default:
				}
				this.$refs.inputClose.val = ''
			},
			dialogClose() {
				this.inputVal = '';
				this.$refs.inputClose.val = ''
			},
			dialogDel() {
				this.delItem(this.editItem, 'del')
			},
			delItemModal() {
				this.show = false;
				if (this.delType == 'del') {
					this.tui.request("/app/productCategory/delById", "post", {
						id: this.delItems.id,
					}, false, true).then((res) => {

						if (res.code == 200) {
							this.getGategoryList()
							uni.showToast({
								title: "删除成功",
								icon: 'none'
							})
							this.$refs.carPopup.close()
						} else {
							uni.showToast({
								title: "删除失败",
								icon: 'none'
							})
						}
					}).catch((res) => {})
				} else if (this.delType == 'attrDel') {
					this.tui.request("/app/productAttribute/delById", "post", {
						categoryId: this.delItems.categoryId,
						attributeName: this.delItems.attributeName,
						id: this.delItems.id,
					}, false, true).then((res) => {

						if (res.code == 200) {
							this.getGategoryList()
							uni.showToast({
								title: "删除成功",
								icon: 'none'
							})
							this.$refs.carPopup.close()
						} else {
							uni.showToast({
								title: "删除失败",
								icon: 'none'
							})
						}
					}).catch((res) => {})
				} else if (this.delType == 'attrNameDel') {
					this.tui.request("/app/productAttributeValue/delById", "post", {
						attributeId: this.delItems.attributeId,
						value: this.delItems.value,
						id: this.delItems.id,
					}, false, true).then((res) => {

						if (res.code == 200) {
							this.getGategoryList()
							uni.showToast({
								title: "删除成功",
								icon: 'none'
							})
							this.$refs.carPopup.close()
						} else {
							uni.showToast({
								title: "删除失败",
								icon: 'none'
							})
						}
					}).catch((res) => {})
				}
			},
			delItem(item, type) {
				this.delType = type;
				this.delItems = item;
				this.getTypeToNum()
				// this.show = true;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
	}

	button {
		color: #ffffff;
		background: #5fd9ee;
		width: 90%;
		margin-top: 20rpx;
	}

	.card-list {
		width: 95%;
		border-radius: 10rpx;
		background: #fff;
		height: auto;
		margin: 40rpx auto 0;

	}

	.title-fur {
		width: 95%;
		height: 70rpx;
		margin: 0 auto;
		border-bottom: 1px solid #eee;
	}

	.name {
		font-size: 30rpx;
		width: 50%;
		float: left;
		height: 70rpx;
		line-height: 70rpx;
	}

	.rightBox {
		display: flex;
		float: right;
	}

	.content-fur {
		padding-bottom: 25rpx;
	}

	.content-low {
		width: auto;
		border: 1px solid #eee;
		display: inline-block;
		min-width: 90rpx;
		padding: 5rpx;
		font-size: 35rpx;
		text-align: center;
		color: #777;
		margin: 20rpx 0 0 20rpx;
	}

	.popup-content {
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		height: 1200rpx;
		background-color: #fff;
		margin-bottom: 30rpx;
		overflow: scroll;
	}

	.popup-container {
		width: 100%;
		background: #fff;
		height: 50rpx;
	}

	.checkList {
		display: flex;
		height: 50rpx;
		font-size: 28rpx;
		line-height: 50rpx;
		margin: 20rpx 0;
	}

	.checkList-box {
		height: 50rpx;
		width: 60%;
	}

	.popup-bottom {
		width: 95%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 2.5%;
		display: flex;
		z-index: 99;
		background: #fff;
	}

	.popup-bottom-left {
		width: 50%;
		line-height: 80rpx;
	}

	.popup-bottom-right {
		width: 50%;
		line-height: 100rpx;
	}

	.bottom-btn {
		width: 70%;
		line-height: 70rpx;
		height: 70rpx;
		text-align: center;
		/* margin-top: 10rpx; */
		color: #fff;
		font-size: 28rpx;
		margin: 0 auto;
		background: linear-gradient(90deg, #60F3FF, #088FEB);
		border-radius: 70rpx;
	}
	.checked{
		background: #60F3FF;
		color: #fff;
	}
	
	
	.add-popup-content {
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		width: 100%;
		height: 1300rpx;
		background-color: #fff;
	}
	
	.add-popup-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		position: relative;
	}
	
	.add-popup-container {
		margin-top: 20rpx;
	}
	
	.add-popup-bottom {
		display: flex;
		height: 80rpx;
		color: #fff;
		line-height: 80rpx;
		margin-top: 50rpx;
	}
	
	.add-popup-btn {
		flex: 1;
		text-align: center;
		background: linear-gradient(90deg, #60F3FF, #088FEB);
	}
	.type-popup{
		width: 500rpx;
		height: auto;
		background: #fff;
		border-radius: 10px;
		position: relative;
		margin-bottom: 40rpx;
	}
</style>