✅P80_平台属性-查询分组关联属性-删除关联
大约 8 分钟
查询分组关联属性&删除关联
实现效果
属性分组菜单：要实现的页面效果，
页面改造
添加“关联”按钮，
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
<template slot-scope="scope">
<el-button type="text" size="small"
@click="relationHandle(scope.row.attrGroupId)">关联</el-button>
</template>
</el-table-column>
点击“关联”按钮后，触发relationHandle()函数，
relationHandle(attrGroupId) {
this.relationVisible = true;
this.$nextTick(() => {
this.$refs.relationUpdate.init(attrGroupId);
})
},
弹出属性组与属性关联列表，引入RelationUpdate组件，
import RelationUpdate from './attr-group-relation.vue'
注入组件，
components: { Category, AddOrUpdates, RelationUpdate },
使用组件，
<!-- 修改关联关系 -->
<relation-update v-if="relationVisible" ref="relationUpdate" @refreshData="getDataList"></relation-update>
此时src\views\modules\product\attrgroup.vue代码，src\views\modules\product\attr-group-relation.vue代码如下所示：
attrgroup.vue
<template>
<el-row :gutter="20">
<el-col :span="6">
<category @node-click="treeNodeClick"></category>
</el-col>
<el-col :span="18">
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">查询</el-button>
<el-button v-if="isAuth('product:attrgroup:save')" type="primary"
@click="addOrUpdateHandle()">新增</el-button>
<el-button v-if="isAuth('product:attrgroup:delete')" type="danger" @click="deleteHandle()"
:disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item>
</el-form>
<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
style="width: 100%;">
<el-table-column type="selection" header-align="center" align="center" width="50">
</el-table-column>
<el-table-column prop="attrGroupId" header-align="center" align="center" label="分组id">
</el-table-column>
<el-table-column prop="attrGroupName" header-align="center" align="center" label="组名">
</el-table-column>
<el-table-column prop="sort" header-align="center" align="center" label="排序">
</el-table-column>
<el-table-column prop="descript" header-align="center" align="center" label="描述">
</el-table-column>
<el-table-column prop="icon" header-align="center" align="center" label="组图标">
</el-table-column>
<el-table-column prop="catelogId" header-align="center" align="center" label="所属分类id">
</el-table-column>
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
<template slot-scope="scope">
<el-button type="text" size="small"
@click="relationHandle(scope.row.attrGroupId)">关联</el-button>
<el-button type="text" size="small"
@click="addOrUpdateHandle(scope.row.attrGroupId)">修改</el-button>
<el-button type="text" size="small" @click="deleteHandle(scope.row.attrGroupId)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
:current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> -->
<AddOrUpdates v-if="addOrUpdateVisible" ref="AddOrUpdates" @refreshDataList="getDataList"></AddOrUpdates>
<!-- 修改关联关系 -->
<relation-update v-if="relationVisible" ref="relationUpdate" @refreshData="getDataList"></relation-update>
</div>
</el-col>
</el-row>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Category from '../common/category.vue';
import AddOrUpdates from './attrgroup-add-or-update.vue';
import RelationUpdate from './attr-group-relation.vue'
export default {
//import引入的组件需要注入到对象中才能使用
components: { Category, AddOrUpdates, RelationUpdate },
props: {},
data() {
//这里存放数据
return {
catId: 0,
dataForm: {
key: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
relationVisible: false
};
},
//方法集合
methods: {
relationHandle(attrGroupId) {
this.relationVisible = true;
this.$nextTick(() => {
this.$refs.relationUpdate.init(attrGroupId);
})
},
//子组件传给父组件的参数
treeNodeClick(data, node, component) {
console.log("父组件接收到子组件传递过来的数据为：", data, node, component);
if (node.level == 3) {
this.catId = data.catId;
this.getDataList();
}
},
// 获取数据列表
getDataList() {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl(`/product/attrgroup/list/${this.catId}`),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'key': this.dataForm.key
})
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
// 每页数
sizeChangeHandle(val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle(val) {
this.pageIndex = val
this.getDataList()
},
// 多选
selectionChangeHandle(val) {
this.dataListSelections = val
},
// 新增 / 修改
addOrUpdateHandle(id) {
//启用对话框
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.AddOrUpdates.init(id)
})
},
// 删除
deleteHandle(id) {
var ids = id ? [id] : this.dataListSelections.map(item => {
return item.attrGroupId
})
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/product/attrgroup/delete'),
method: 'post',
data: this.$http.adornData(ids, false)
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
})
}
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
this.getDataList();
},
}
</script>
<style scoped></style>
attr-group-relation.vue
<template>
<div>
<el-dialog :close-on-click-modal="false" :visible.sync="visible" @closed="dialogClose">
<el-dialog width="40%" title="选择属性" :visible.sync="innerVisible" append-to-body>
<div>
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">查询</el-button>
</el-form-item>
</el-form>
<el-table
:data="dataList"
border
v-loading="dataListLoading"
@selection-change="innerSelectionChangeHandle"
style="width: 100%;"
>
<el-table-column type="selection" header-align="center" align="center"></el-table-column>
<el-table-column prop="attrId" header-align="center" align="center" label="属性id"></el-table-column>
<el-table-column prop="attrName" header-align="center" align="center" label="属性名"></el-table-column>
<el-table-column prop="icon" header-align="center" align="center" label="属性图标"></el-table-column>
<el-table-column prop="valueSelect" header-align="center" align="center" label="可选值列表"></el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper"
></el-pagination>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="innerVisible = false">取 消</el-button>
<el-button type="primary" @click="submitAddRealtion">确认新增</el-button>
</div>
</el-dialog>
<el-row>
<el-col :span="24">
<el-button type="primary" @click="addRelation">新建关联</el-button>
<el-button
type="danger"
@click="batchDeleteRelation"
:disabled="dataListSelections.length <= 0"
>批量删除</el-button>
<!-- -->
<el-table
:data="relationAttrs"
style="width: 100%"
@selection-change="selectionChangeHandle"
border
>
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
<el-table-column prop="attrId" label="#"></el-table-column>
<el-table-column prop="attrName" label="属性名"></el-table-column>
<el-table-column prop="valueSelect" label="可选值">
<template slot-scope="scope">
<el-tooltip placement="top">
<div slot="content">
<span v-for="(i,index) in scope.row.valueSelect.split(';')" :key="index">
{{i}}
</span>
</div>
<el-tag>{{scope.row.valueSelect.split(";")[0]+" ..."}}</el-tag>
</el-tooltip>
</template>
</el-table-column>
<el-table-column fixed="right" header-align="center" align="center" label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" @click="relationRemove(scope.row.attrId)">移除</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
</el-dialog>
</div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {
attrGroupId: 0,
visible: false,
innerVisible: false,
relationAttrs: [],
dataListSelections: [],
dataForm: {
key: ""
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
innerdataListSelections: []
};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
selectionChangeHandle(val) {
this.dataListSelections = val;
},
innerSelectionChangeHandle(val) {
this.innerdataListSelections = val;
},
addRelation() {
this.getDataList();
this.innerVisible = true;
},
batchDeleteRelation(val) {
let postData = [];
this.dataListSelections.forEach(item => {
postData.push({ attrId: item.attrId, attrGroupId: this.attrGroupId });
});
this.$http({
url: this.$http.adornUrl("/product/attrgroup/attr/relation/delete"),
method: "post",
data: this.$http.adornData(postData, false)
}).then(({ data }) => {
if (data.code == 0) {
this.$message({ type: "success", message: "删除成功" });
this.init(this.attrGroupId);
} else {
this.$message({ type: "error", message: data.msg });
}
});
},
//移除关联
relationRemove(attrId) {
let data = [];
data.push({ attrId, attrGroupId: this.attrGroupId });
this.$http({
url: this.$http.adornUrl("/product/attrgroup/attr/relation/delete"),
method: "post",
data: this.$http.adornData(data, false)
}).then(({ data }) => {
if (data.code == 0) {
this.$message({ type: "success", message: "删除成功" });
this.init(this.attrGroupId);
} else {
this.$message({ type: "error", message: data.msg });
}
});
},
submitAddRealtion() {
this.innerVisible = false;
//准备数据
console.log("准备新增的数据", this.innerdataListSelections);
if (this.innerdataListSelections.length > 0) {
let postData = [];
this.innerdataListSelections.forEach(item => {
postData.push({ attrId: item.attrId, attrGroupId: this.attrGroupId });
});
this.$http({
url: this.$http.adornUrl("/product/attrgroup/attr/relation"),
method: "post",
data: this.$http.adornData(postData, false)
}).then(({ data }) => {
if (data.code == 0) {
this.$message({ type: "success", message: "新增关联成功" });
}
this.$emit("refreshData");
this.init(this.attrGroupId);
});
} else {
}
},
init(id) {
this.attrGroupId = id || 0;
this.visible = true;
this.$http({
url: this.$http.adornUrl(
"/product/attrgroup/" + this.attrGroupId + "/attr/relation"
),
method: "get",
params: this.$http.adornParams({})
}).then(({ data }) => {
this.relationAttrs = data.data;
});
},
dialogClose() {},
//========
// 获取数据列表
getDataList() {
this.dataListLoading = true;
this.$http({
url: this.$http.adornUrl(
"/product/attrgroup/" + this.attrGroupId + "/noattr/relation"
),
method: "get",
params: this.$http.adornParams({
page: this.pageIndex,
limit: this.pageSize,
key: this.dataForm.key
})
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataList = data.page.list;
this.totalPage = data.page.totalCount;
} else {
this.dataList = [];
this.totalPage = 0;
}
this.dataListLoading = false;
});
},
// 每页数
sizeChangeHandle(val) {
this.pageSize = val;
this.pageIndex = 1;
this.getDataList();
},
// 当前页
currentChangeHandle(val) {
this.pageIndex = val;
this.getDataList();
}
}
};
</script>
<style scoped>
</style>
获取属性分组的关联的所有属性
接口：GET：/product/attrgroup/{attrgroupId}/attr/relation
cfmall-product/src/main/java/com/gyz/cfmall/product/controller/AttrGroupController.java
@Autowired
private AttrService attrService;
/**
* 获取属性分组有关联的其他属性
* @param attrgroupId
* @return
*/
@GetMapping(value = "/{attrgroupId}/attr/relation")
public R attrRelation(@PathVariable("attrgroupId") Long attrgroupId) {
List<AttrEntity> entities = attrService.getRelationAttr(attrgroupId);
return R.ok().put("data", entities);
}
cfmall-product/src/main/java/com/gyz/cfmall/product/service/impl/AttrServiceImpl.java
@Resource
public AttrAttrgroupRelationDao relationDao;
/**
* 根据分组id找到关联的所有属性
*
* @param attrgroupId
* @return
*/
@Override
public List<AttrEntity> getRelationAttr(Long attrgroupId) {
List<AttrAttrgroupRelationEntity> entities = relationDao.selectList
(new QueryWrapper<AttrAttrgroupRelationEntity>().eq("attr_group_id", attrgroupId));
List<Long> attrIds = entities.stream().map((attr) -> {
return attr.getAttrId();
}).collect(Collectors.toList());
//根据attrIds查找所有的属性信息
//Collection<AttrEntity> attrEntities = this.listByIds(attrIds);
//如果attrIds为空就直接返回一个null值出去
if (attrIds == null || attrIds.size() == 0) {
return null;
}
List<AttrEntity> attrEntityList = this.baseMapper.selectBatchIds(attrIds);
return attrEntityList;
}
测试
规格参数：“屏幕尺寸”与“颜色”所属分组为“主体”
在“属性分组”关联列表中展示如下
添加属性与分组关联关系
POST：/product/attrgroup/attr/relation
cfmall-product/src/main/java/com/gyz/cfmall/product/controller/AttrGroupController.java
@Autowired
private AttrAttrgroupRelationService attrAttrgroupRelationService;
@PostMapping(value = "/attr/relation")
public R addRelation(@RequestBody List<AttrGroupRelationVo> vos) {
attrAttrgroupRelationService.saveBatchRelation(vos);
return R.ok();
}
cfmall-product/src/main/java/com/gyz/cfmall/product/service/impl/AttrAttrgroupRelationServiceImpl.java
/**
* 批量添加属性与分组关联关系
* @param vos
*/
@Override
public void saveBatchRelation(List<AttrGroupRelationVo> vos) {
List<AttrAttrgroupRelationEntity> collect = vos.stream().map((item) -> {
AttrAttrgroupRelationEntity relationEntity = new AttrAttrgroupRelationEntity();
BeanUtils.copyProperties(item, relationEntity);
return relationEntity;
}).collect(Collectors.toList());
this.saveBatch(collect);
}
cfmall-product/src/main/java/com/gyz/cfmall/product/vo/AttrGroupRelationVo.java
@Data
public class AttrGroupRelationVo {
/**
* [{"attrId":1,"attrGroupId":2}]
*/
private Long attrId;
private Long attrGroupId;
}
测试
“属性分组”菜单，点击“关联”，“新建关联”
删除属性与分组的关联关系
POST：/product/attrgroup/attr/relation/delete
cfmall-product/src/main/java/com/gyz/cfmall/product/controller/AttrGroupController.java
@Autowired
private AttrService attrService;
@PostMapping(value = "/attr/relation/delete")
public R deleteRelation(@RequestBody AttrGroupRelationVo[] vos) {
attrService.deleteRelation(vos);
return R.ok();
}
cfmall-product/src/main/java/com/gyz/cfmall/product/service/impl/AttrServiceImpl.java
@Resource
public AttrAttrgroupRelationDao relationDao;
@Override
public void deleteRelation(AttrGroupRelationVo[] vos) {
//relationDao.delete(new QueryWrapper<>().eq("attr_id",1L).eq("attr_group_id",1L));
List<AttrAttrgroupRelationEntity> entities = Arrays.asList(vos).stream().map((item) -> {
AttrAttrgroupRelationEntity relationEntity = new AttrAttrgroupRelationEntity();
BeanUtils.copyProperties(item, relationEntity);
return relationEntity;
}).collect(Collectors.toList());
relationDao.deleteBatchRelation(entities);
}
cfmall-product/src/main/java/com/gyz/cfmall/product/dao/AttrAttrgroupRelationDao.java
@Mapper
public interface AttrAttrgroupRelationDao extends BaseMapper<AttrAttrgroupRelationEntity> {
//注意@Param("entities")要加上，否则报错，识别不到entities集合
void deleteBatchRelation(@Param("entities") List<AttrAttrgroupRelationEntity> entities);
}
cfmall-product/src/main/resources/mapper/product/AttrAttrgroupRelationDao.xml
<delete id="deleteBatchRelation">
DELETE FROM pms_attr_attrgroup_relation WHERE
<foreach collection="entities" item="item" separator=" OR ">
(attr_id = #{item.attrId} AND attr_group_id = #{item.attrGroupId})
</foreach>
</delete>
测试
点击“移除”后属性与分组的关联关系就被删除了
