uniapp-商城-57-后台 新增商品（弹窗属性数据添加父级）

后台增加商品，需要添加相关的数据信息，这里还要添加属性，前面已经对相关的界面布局继续了编写。这里还要对页面添加的数据，置入到云数据库，继续永久保存，便于后期的使用。这里主要是讲属性数据 父级信息的添加，后面再继续子级数据添加。（父级就是颜色，子级就是红，绿等）

1、概述

本文介绍了在后台系统中添加商品属性（父级信息）并存储到云数据库的过程。首先，回顾了界面布局和属性显示的嵌套结构。接着，详细说明了如何通过云对象处理商品属性数据，包括建立数据库模式（db schema）和创建云对象以定义数据库操作。文章还描述了页面逻辑的实现，如通过云对象获取和添加数据，以及如何处理父级和子级属性的添加。最后，介绍了如何通过弹窗交互实现属性的动态添加，并将新数据即时更新到页面和数据库中，确保数据的永久保存和后续使用。

2、界面情况回顾

属性显示其实是个一嵌套的数据显示。

3、需要添加的商品属性（父级）

这里涉及一个sku，就一个库存量单位，商品的库存量。包含商品信息、规格、数量、价格等等。

从前面商家信息 52 章节看出，我们还是要使用云对象，云对象是一种通用的处理方式。

3.1 第一步，建立db  schema文件（常用方式，最好这样处理）

这样后期移植代码就比较方便，直接上传 db schema 就可以创建数据库了

注：但是在云对象使用中，你不创建db schema 也可以，云对象会自己创建数据库

内容默认就好：不用修改

// 文档教程: https://uniapp.dcloud.net.cn/uniCloud/schema
{
	"bsonType": "object",
	"required": [],
	"permission": {
		"read": false,
		"create": false,
		"update": false,
		"delete": false
	},
	"properties": {
		"_id": {
			"description": "ID，系统自动生成"
		}
	}
}

3.2 第二步，创建云对象

主要是定义 db 定义dbcmd等等

使用方法，还是预处理获取前台传来的值，this.getParams()[0]

然后定义 get add update等等，另外也要注意，我们前端页面传来的数据中，选中的标识是true。

这是为了在我们添加当前商品时是选中的

但是在后台数据应该是默认不选中，便于下一个商品添加时，看到的是干净的，可选的。不然一上来就都是选中的，也很搞笑。  慢慢悟一下。

里面注意写法和格式：

const db = uniCloud.database();
const cmd = db.command
module.exports = {
	_before: function () { // 通用预处理器
		this.params = this.getParams()[0]
	},
	async get(){
		return await db.collection("green-mall-sku").get()
	},
	async add(){
		this.params.checked = false;
		return await db.collection("green-mall-sku").add(this.params)
	},
	async updateChild(id,obj){
		obj.checked=false
		return await db.collection("green-mall-sku").doc(id).update({			
			children:cmd.push([obj])
		})
	}
}

3.3 页面的使用

3.3.1 页面使用需要先引入：

    const skuCloudObj = uniCloud.importObject("green-mall-sku", {
        "customUI": true
    });

这里写了一个  "customUI": true   表示不用提示 加载，但一般保持为默认，不用添加这一项，保持有提示的情况更加人性化。

3.3.2 页面逻辑，前面定义了skuArr的数据，这里我们就不用固定死了，直接通过云对象添加，传到数库，以后使用就可以调用数据库的数据了。

所以就讲固定的删除，直接定义一个空 skuArr

				/*
				skuArr: [{
					_id:1,
					skuName:"颜色",
					checked:false,
					children:[{
						name:"红",
						checked:false
					},{
						name:"蓝",
						checked:false
					}]
				},{
					_id:2,
					skuName:"规格",
					checked:false,
					children:[{
						name:"M",
						checked:false
					},{
						name:"S",
						checked:false
					}]
				}],
				*/
				// 上面是一个数据结构例子，后台数据就应该着这样存
				// 实际是下面的[]
				skuArr: [],

3.3.3 点击选择属性，弹出选择属性的窗口

继续页面数据的获取，并使用云对象中的get 方法

			//点击选择属性
			clickSelect() {
				this.$refs.attrWrapPop.open(); //使用open方法弹出来
				if (this.skuArr.length) return;
				this.getSkuData();

			//获取sku列表
			async getSkuData() {
				let res = await skuCloudObj.get();
				this.skuArr = res.data
				console.log(res);
			},

3.3.4 添加属性（父级）

两个函数，一个点击添加的方法，一个是点击后的弹窗处理。

如果有index 就是子级点击添加，且定义个子级child 属性；如果没有index 就是父级添加，第一个父级属性 parent 实现的是一个函数两个功能使用

针对弹窗，就是弹出一个添加值的对话窗口  请输入新增内容    使用的 addAttrPop 弹窗  ，该弹窗的动作就是  dialogConfirm   唯一的差异就是带的属性值不一样。

如果  dialogConfirm   中的没有获取到值 e，那么就不会再继续执行下面的操作。

是父级就添加到数据库中，调用add ，

然后还要将刚刚添加的值更新到本地的data 中定义的skuArr数组，用于页面立即回显。

是子级就更新对应id 的子级 数据。然后将刚刚添加的数据，传入到 skuArr 对应id的数组中。用于页面立即回显。

另外这里的 id 我也回填到 skuArr中，便于这里添加父级下的子级，不然你添加子级你都不知道往哪里添加。

			//点击添加属性 index 存在就是嵌套下 父类属性的子类选项 ，不存在就是添加父类属性
			clickAddAttr(index = null) {
				if (index == null) {
					this.addAttrType = "parent"
					this.attrIndex = null
				} else {
					this.addAttrType = "child"
					this.attrIndex = index
				}
				this.$refs.addAttrPop.open();
			},
			//添加属性弹窗的确认按钮
			async dialogConfirm(e) {
				if (!e) return;
				if (this.addAttrType == "parent") {
					let obj = {
						skuName: e,
						checked: true,
						children: []
					}
					let res = await skuCloudObj.add(obj)
					obj._id = res.id;
					this.skuArr.push(obj)
					//向数组中添加一个元素，就弹窗的确认按钮

				} else if (this.addAttrType == "child") {
					let obj = {
						name: e,
						checked: true
					}
					let id = this.skuArr[this.attrIndex]._id;
					let res = await skuCloudObj.updateChild(id, obj)
					this.skuArr[this.attrIndex].children.push(obj)
				}
			},