hyc
/
hyy-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完善父子组件传值的问题, 

并且在父组件调用子组件方法,来进行置空,更新父级品类选中列表的操作
master
20300 2024-03-11 20:55:08 +08:00
parent ed06a40cea
commit 561000160e
9 changed files with 195 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/api/product/category.js
View File

@ -16,3 +16,24 @@ export function insertCategory(insertCategoryReq) {
})
}
export function getAllCategoryAttribute(categoryId) {
return request({
url: '/product/category/getAllCategoryAttribute?categoryId='+categoryId,
method: 'get'
})
}
export function getAllCategoryAttributeGroup(categoryId) {
return request({
url: '/product/category/getAllCategoryAttributeGroup?categoryId='+categoryId,
method: 'get'
})
}
export function getAllCategoryBrand(categoryId) {
return request({
url: '/product/category/getAllCategoryBrand?categoryId='+categoryId,
method: 'get'
})
}

38
src/components/CheckAttribute/index.vue
View File

@ -3,11 +3,11 @@
<el-row>
<el-card class="box-card">
<div>
<span>选择品牌关联关系</span>
<span>选择属性关联关系</span>
</div>
<el-card class="box-card" style="height: 150px;">
<div>
<span>已选品牌</span>
<span>已选属性</span>
</div>
<el-col>
<el-tag
@ -22,7 +22,7 @@
</el-card>
<el-card class="box-card" style="height: 150px;">
<div>
<span>可选品牌</span>
<span>可选属性</span>
</div>
<el-col>
<el-checkbox
@ -42,12 +42,14 @@
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {list} from "@/api/product/attribute";
import {getAllCategoryAttribute} from "@/api/product/category";
export default {
name: 'CheckAttribute',
//import引入的组件需要注入到对象中才能使用"
components: {},
props: {},
props: {
},
data() {
//这里存放数据"
@ -58,7 +60,8 @@ export default {
selectAttributeList: [
],
//父类选中的brand属性
parentSelectAttributeList: []
parentSelectAttributeList: [],
parentId: null
};
},
//计算属性 类似于data概念",
@ -73,6 +76,31 @@ export default {
},
//方法集合",
methods: {
updateParentId(newParentId) {
if (newParentId == undefined){
newParentId = 0;
}
getAllCategoryAttribute(newParentId).then(
res => {
console.log("属性已选中:",res)
this.selectAttributeList = []
this.parentSelectAttributeList = res.data
this.attributeList.forEach(
attr => {
this.parentSelectAttributeList.forEach(
parentSelect => {
if (attr.id == parentSelect.id){
console.log("添加了吗?")
this.selectAttributeList.push(attr)
}
}
)
}
)
console.log("属性:",res)
}
)
},
setAttributeListToParent(newVal) {
this.$emit("setCheckAttributeList", newVal)
},

34
src/components/CheckAttributeGroup/index.vue
View File

@ -23,6 +23,7 @@
<el-card class="box-card" style="height: 150px;">
<div>
<span>可选属性组</span>
<el-input type="text" v-model="parentId"></el-input>
</div>
<el-col>
<el-checkbox
@ -43,12 +44,15 @@
//例如：import 《组件名称》 from '《组件路径》,
import {getBrandList} from "@/api/product/brand";
import {getAttributeGroupList} from "@/api/product/attribute";
import {getAllCategoryAttributeGroup} from "@/api/product/category";
export default {
name: 'CheckAttributeGroup',
//import引入的组件需要注入到对象中才能使用"
components: {},
props: {},
//子组件只需要一个props就可以得到父组件传来的值
props: {
},
data() {
//这里存放数据"
@ -59,7 +63,8 @@ export default {
selectAttributeGroupList: [
],
//父类选中的brand属性
parentSelectAttributeGroupList: []
parentSelectAttributeGroupList: [],
parentId: null
};
},
//计算属性 类似于data概念",
@ -74,8 +79,31 @@ export default {
},
//方法集合",
methods: {
updateParentId(newParentId) {
if (newParentId == undefined){
newParentId = 0;
}
getAllCategoryAttributeGroup(newParentId).then(
res => {
this.parentSelectAttributeGroupList = res.data
this.selectAttributeGroupList = []
this.attributeGroupList.forEach(
attrGroup => {
this.parentSelectAttributeGroupList.forEach(
parentSelect => {
if (attrGroup.id == parentSelect.id){
this.selectAttributeGroupList.push(attrGroup)
}
}
)
}
)
console.log("属性组",res)
}
)
},
setAttributeGroupListToParent(newVal) {
this.$emit("setCheckAttributeList", newVal)
this.$emit("setCheckAttributeGroupList", newVal)
},
handleClose(tag) {
this.selectAttributeGroupList.splice(this.selectAttributeGroupList.indexOf(tag), 1);

32
src/components/CheckBrand/index.vue
View File

@ -23,6 +23,7 @@
<el-card class="box-card" style="height: 150px;">
<div>
<span>可选品牌</span>
<el-input v-model="parentId"></el-input>
</div>
<el-col>
<el-checkbox
@ -42,12 +43,15 @@
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {getBrandList} from "@/api/product/brand";
import {getAllCategoryBrand} from "@/api/product/category";
import brand from "@/views/product/brand/index.vue";
export default {
name: 'CheckBrand',
//import引入的组件需要注入到对象中才能使用"
components: {},
props: {},
props: {
},
data() {
//这里存放数据"
@ -55,10 +59,10 @@ export default {
//所有brandList
brandList: [],
//已选中brand属性
selectBrandList: [
],
selectBrandList: [],
//父类选中的brand属性
parentSelectBrandList: []
parentSelectBrandList: [],
parentId: null
};
},
//计算属性 类似于data概念",
@ -73,6 +77,26 @@ export default {
},
//方法集合",
methods: {
updateParentId(newParentId) {
if (newParentId == undefined){
newParentId = 0;
}
getAllCategoryBrand(newParentId).then(
res => {
this.parentSelectBrandList = res.data
this.selectBrandList = []
if (this.parentSelectBrandList.length > 0){
this.parentSelectBrandList.forEach(parentSelect => this.brandList.forEach(
brand => {
if (brand.id == parentSelect.id){
this.selectBrandList.push(brand)
}
}
))
}
}
)
},
//像父组件中传递数据的方法
setBrandListToParent(newVal) {
this.$emit("setCheckBrandList",newVal)

10
src/views/product/attribute/attributeGroup.vue
View File

@ -120,7 +120,9 @@ export default {
name: "attributeGroup",
//import引入的组件需要注入到对象中才能使用"
components: {},
props: {},
props: {
},
data() {
//这里存放数据"
@ -138,7 +140,6 @@ export default {
//未选中
attributeList: [],
attr:{}
};
},
//计算属性 类似于data概念",
@ -147,6 +148,7 @@ export default {
watch: {},
//方法集合",
methods: {
//修改
handleDelete(index, row) {
this.isOpenAddAttributeGroup = true
@ -215,7 +217,7 @@ export default {
},
//得到属性组列表
getAttributeGroupList(){
getAttributeGroupList(this.attributeName).then(
getAttributeGroupList(0).then(
res => {
console.log(res);
this.attributeGroupList = res.data
@ -233,7 +235,7 @@ export default {
},
queryAttributeList(){
this.isOpenAddAttributeGroup = true
list(this.attributeQueryName).then(
list(0).then(
res => {
this.attributeList = res.data
}

9
src/views/product/attribute/index.vue
View File

@ -76,6 +76,7 @@
<el-input v-model="addAttribute.remark" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancelInsert">取 消</el-button>
<el-button type="primary" @click="insertAttribute">确 定</el-button>
@ -94,7 +95,8 @@ export default {
name: 'attribute',
//import引入的组件需要注入到对象中才能使用"
components: {},
props: {},
props: {
},
data() {
//这里存放数据"
@ -110,7 +112,7 @@ export default {
remark: ''
},
//是否显示新增谈话框
openAdd: false
openAdd: false,
};
},
//计算属性 类似于data概念",
@ -119,6 +121,7 @@ export default {
watch: {},
//方法集合",
methods: {
//获取父组件传值
//修改方法
handleEdit(index, row) {
console.log(index, row);
@ -140,7 +143,7 @@ export default {
},
//获取列表方法
getAttributeList(){
list(this.attributeName).then(
list(0).then(
res => {
this.attributeList = res.data
console.log(res)

9
src/views/product/brand/index.vue
View File

@ -86,7 +86,8 @@ import {deleteBrandInfo, getBrandList, insertBrand} from "@/api/product/brand";
components: {
UploadPic,
},
props: {},
props: {
},
data() {
//这里存放数据"
@ -95,7 +96,7 @@ import {deleteBrandInfo, getBrandList, insertBrand} from "@/api/product/brand";
insertBrandReg:{},
isInsertBrandOpen: false,
brandList: [],
brandName: ""
brandName: "",
};
},
//计算属性 类似于data概念",
@ -104,6 +105,8 @@ import {deleteBrandInfo, getBrandList, insertBrand} from "@/api/product/brand";
watch: {},
//方法集合",
methods: {
//获取父组件传递来的值
handleEdit(index, row) {
this.isInsertBrandOpen = true
this.insertBrandReg = row
@ -119,7 +122,7 @@ import {deleteBrandInfo, getBrandList, insertBrand} from "@/api/product/brand";
console.log(index, row);
},
getBrandList() {
getBrandList(this.brandName).then(
getBrandList(0).then(
res =>{
this.brandList = res.data
}

77
src/views/product/category/index.vue
View File

@ -1,12 +1,42 @@
<template>
<div>
<el-table
:data="categoryOptions"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
border
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
prop="id"
label="编号"
sortable
width="180">
</el-table-column>
<el-table-column
prop="name"
label="品类名称"
sortable
width="180">
</el-table-column>
<el-table-column
prop="introduction"
label="介绍">
</el-table-column>
<el-table-column label="图像">
<template slot-scope="scope">
<img :src="scope.row.image" alt="图片损坏">
</template>
</el-table-column>
</el-table>
<el-button size="mini" type="primary" @click="isInsertCategory=true">新增</el-button>
<el-dialog title="新增品类" :visible.sync="isInsertCategory" width="80%" append-to-body>
<el-form :model="insertCategoryReq">
<el-row>
<el-col :span="12" >
{{insertCategoryReq.parentId}}
<el-form-item label="父级品类" prop="parentId">
<treeselect v-model="insertCategoryReq.parentId" :options="categoryOptions" :normalizer="normalizer"/>
</el-form-item>
@ -33,13 +63,13 @@
<el-col :span="24">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="品牌管理" name="first">
<check-brand @setCheckBrandList="getCheckBrandList"></check-brand>
<check-brand @setCheckBrandList="getCheckBrandList" ref="checkBrand"></check-brand>
</el-tab-pane>
<el-tab-pane label="属性组管理" name="second">
<check-attribute-group @setCheckAttributeList="getCheckAttributeGroupList"></check-attribute-group>
<check-attribute-group @setCheckAttributeGroupList="getCheckAttributeGroupList" ref="checkAttributeGroup"></check-attribute-group>
</el-tab-pane>
<el-tab-pane label="属性管理" name="third">
<check-attribute @setCheckAttributeList="getCheckAttributeList"></check-attribute>
<check-attribute @setCheckAttributeList="getCheckAttributeList" ref="checkAttribute" ></check-attribute>
</el-tab-pane>
</el-tabs>
</el-col>
@ -55,6 +85,7 @@
</template>
<script>
//
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {getCategoryList, insertCategory} from "@/api/product/category";
@ -62,7 +93,7 @@ import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import UploadPic from "@/views/product/upload/uploadPic.vue";
import CheckBrand from "@/components/CheckBrand/index.vue";
import CheckAttributeGroup from "@/components/CheckAttributeGroup/index.vue";
import CheckAttributeGroup from "@/components/CheckAttributeGroup/index.vue"; //第一步引入子组件
import CheckAttribute from "@/components/CheckAttribute/index.vue";
@ -113,9 +144,27 @@ export default {
//计算属性 类似于data概念",
computed: {},
//监控data中的数据变化",
watch: {},
watch: {
'insertCategoryReq.parentId': function (newVal,oldVal){
this.$refs.checkAttribute.updateParentId(newVal)
this.$refs.checkAttributeGroup.updateParentId(newVal)
this.$refs.checkBrand.updateParentId(newVal)
},
'insertCategoryReq.image': function (newVal) {
this.$refs.uploadPic.deleteImage(newVal)
}
},
//方法集合",likeName不存在
methods: {
deleteImage() {
},
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
},
//新增品类
insertCategory() {
insertCategory(this.insertCategoryReq).then(
@ -132,10 +181,9 @@ export default {
attributeList: [],
attributeGroupList: []
}
this.getTreeSelect();
}
)
console.log(this.insertCategoryReq)
},
//获取属性组子组件的方法
getCheckAttributeGroupList(checkAttributeGroupList) {
@ -172,18 +220,11 @@ export default {
/** 查询品类信息下拉树结构 */
getTreeSelect() {
getCategoryList(this.likeName).then(response => {
console.log("获得的返回值是:",response)
this.categoryOptions = [];
const data = { id: 0, name: '顶级节点', children: [] };
data.children = this.handleTree(response.data, "id", "parentId");
this.categoryOptions.push(data);
this.categoryOptions = this.handleTree(response.data, "id", "parentId");
});
},
getCategoryList() {
getCategoryList(this.likeName).then(
res => {
this.categoryList = res.data
}
)
}
},
//生命周期 - 创建完成（可以访问当前this实例）",

3
src/views/product/upload/uploadPic.vue
View File

@ -35,6 +35,9 @@
watch: {},
//方法集合",
methods: {
deleteImage(newVal){
this.imageUrl = newVal
},
handleAvatarSuccess(res, file) {
console.log(res,file)