整体项目中的难点
1. 利用递归完成分配权限的渲染
// 通过递归的形式,获取角色下所有三级权限的id,并保存到 defKeys 数组中
getLeafKeys (node, arr) {
// 如果当前 node 节点不包含 children 属性,则是三级节点
if (!node.children) {
return arr.push(node.id)
}
node.children.forEach(item => {
this.getLeafKeys(item, arr)
})
},
2.添加商品的深拷贝
add () {
// console.log(this.addForm)
this.$refs.addFormRef.validate(async valid => {
if (!valid) {
return this.$message.error('请填写必要的表单项!')
}
// 执行添加业务逻辑
// lodash cloneDeep(obj)
const form = _.cloneDeep(this.addForm)
form.goods_cat = form.goods_cat.join(',')
// 处理动态参数
this.manyTableData.forEach(item => {
const newInfo = {
attr_id: item.attr_id,
attr_vals: item.attr_vals.join(' ')
}
this.addForm.attrs.push(newInfo)
})
// 处理静态属性
this.onlyTableData.forEach(item => {
const newInfo = {
attr_id: item.attr_id,
attr_vals: item.attr_vals
}
this.addForm.attrs.push(newInfo)
})
form.attrs = this.addForm.attrs
console.log(form)
// 发送请求添加商品
// 商品的名称,必须是唯一的
const { data: res } = await this.$http.post('goods', form)
if (res.meta.status !== 201) {
return this.$message.error('添加商品失败!')
}
this.$message.success('添加商品成功!')
this.$router.push('/goods')
})
}
这里使用的时lodash插件的深拷贝方法,我们也可以自己手写实现
3.element-UI图片上传组件的使用
template
<el-upload
action="http://127.0.0.1:8888/api/private/v1/upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
list-type="picture"
:headers="headers"
:on-success="handleSuccess"
>
<!-- action:必选参数,上传的地址,因为这使用的不是 axios ,所以要写完整的路径 -->
<!-- on-preview 点击文件列表中已上传的文件时的钩子 -->
<!-- on-remove 文件列表移除文件时的钩子 -->
<!-- list-type 文件列表的类型,这里不需要修改 -->
<!-- header 设置上传的请求头部 -->
<!-- on-success 文件上传成功时的钩子 -->
<!-- 点击图片,弹出的预览框 -->
<el-dialog :visible.sync="previewVisible" width="60%">
<img :src="previewImg" />
</el-dialog>
data
addForm: {
goods_name: "",
goods_price: 0,
goods_weight: 0,
goods_number: 0,
goods_cat: [],
pics: [], // 存储上传图片的数组
goods_introduce: "",
},
// 因为 element-ui 中没有封装 axios ,所以要单独设置请求头,
headers: {
Authorization: window.sessionStorage.getItem("token"),
},
// 需要预览的图片
previewImg: "",
// 控制预览窗口的显示和隐藏
previewVisible: false,
methods
// 点击文件列表中已上传的文件时的函数方法
handlePreview(preFile) {
// console.log(preFile);
// 将要预览的图片的路径提取出来,并赋给 data 中的 previewImg
this.previewImg = preFile.response.data.url;
console.log(this.previewImg);
// 点击图片弹出对话框
this.previewVisible = true;
},
// 文件列表移除文件时的函数方法
handleRemove(delFile) {
// 将要删除的图片的 tmp_path 提取出来
console.log(delFile.response.data.tmp_path);
// 用 findIndex 方法找到 data 中定义的 addForm.pics 数组里面对应的索引值
let index = this.addForm.pics.findIndex((item) => {
return item.pic == delFile.response.data.tmp_path;
});
console.log(index);
// 用 splice 方法删除数组中对应的数据
this.addForm.pics.splice(index, 1);
console.log(this.addForm.pics);
},
// 文件上传成功时的函数方法
handleSuccess(res) {
// 参数 res 为上传成功是返回的数据
console.log(res);
// 将 res 中的 tmp_path 提取出来,以对象的形式 push 到 data 中定义的 addForm.pics 数组中
this.addForm.pics.push({
pic: res.data.tmp_path,
});
console.log(this.addForm.pics);
},