Mobai
/
ruoyi-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

品类模块，填入属性组组件

day-04
Saisai Liu 2024-03-05 20:46:58 +08:00
parent eec179b0af
commit 913570436e
2 changed files with 56 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/CheckAttributes/index.vue
View File

@ -6,18 +6,18 @@
</div>
<el-card class="box-card" >
<div slot="header" class="clearfix">
<span>已选属性</span>
<span>已选属性ids ：：{{this.checkedAttributeIds}}</span>
<span>属性：：{{this.checkedAttributeList}} </span>
<span>已选属性组</span>
<span>已选属性组ids ：：{{this.checkedAttributeGroupIds}}</span>
<span>属性组：：{{this.checkedAttributeGroupList}} </span>
</div>
<el-row :gutter="20" style="height: 100px">
<el-col :span="3" v-for="(attribute,index) in checkedAttributeList">
<el-col :span="3" v-for="(attributeGroup,index) in checkedAttributeGroupList">
<el-tag
style="margin: 0 10px"
:key="attribute.name"
:key="attributeGroup.name"
closable
@close="removeCheck(index)">
{{attribute.name}}
{{attributeGroup.name}}
</el-tag>
</el-col>
</el-row>
@ -31,7 +31,7 @@
<el-col :span="3"
v-for="attribute in attributeList">
<el-checkbox
v-model="checkedAttributeIds"
v-model="checkedAttributeGroupIds"
:value="attribute.id"
:key="attribute.id"
:label="attribute.id"
@ -47,7 +47,7 @@
</template>
<script>
import {listAttribute} from "@/api/product/attribute";
import {listGroup} from "@/api/product/attribute_group";
export default {
name:"AttributeElement",
@ -65,9 +65,9 @@ export default {
data() {
// 数据
return{
checkedAttributeIds: [],
checkedAttributeGroupIds: [],
//已选属性数组
checkedAttributeList: [],
checkedAttributeGroupList: [],
//商品属性表
attributeList: [],
// 属性组数据
@ -79,26 +79,25 @@ export default {
},
// 挂载方法
created() {
this.getAttribute()
this.getList()
},
watch:{
value: {
handler(val) {
console.log("进入初始化value::"+val.toString())
if (val.toString() !== this.checkedAttributeIds.toString()){
this.checkedAttributeIds = val
this.checkedAttributeList = []
if (val.toString() !== this.checkedAttributeGroupIds.toString()){
this.checkedAttributeGroupIds = val
this.checkedAttributeGroupList = []
}
console.log("选中的ids：："+this.checkedAttributeIds)
console.log("选中的ids：："+this.checkedAttributeGroupIds)
},
immediate: true
},
checkedAttribute:{
checkedAttributeGroup:{
handler(val) {
console.log("进入初始化checkedAttribute::"+val.toString())
if (val !==undefined && val.length>0){
this.checkedAttributeList = val
this.checkedAttributeIds = this.checkedAttributeList.map(checked => checked.id)
this.checkedAttributeGroupList = val
this.checkedAttributeGroupIds = this.checkedAttributeGroupList.map(checked => checked.id)
}
},
immediate: true
@ -108,24 +107,25 @@ export default {
methods: {
/** 属性复选框选择事件 */
handleCheckedAttributeChange(attribute){
let isChecked = this.checkedAttributeIds.indexOf(attribute.id) > -1;
let isChecked = this.checkedAttributeGroupIds.indexOf(attribute.id) > -1;
if (isChecked){
this.checkedAttributeList.push(attribute)
this.checkedAttributeGroupList.push(attribute)
}else {
//删除属性
this.checkedAttributeList.splice(
this.checkedAttributeList.indexOf(attribute),1
this.checkedAttributeGroupList.splice(
this.checkedAttributeGroupList.indexOf(attribute),1
)
}
this.$emit("input",this.checkedAttributeIds)
console.log(this.checkedAttributeList)
// this.checkedAttributeList.splice(this.checkedAttributeIds.indexOf(attribute.id),1)
//将组件改变的值传给调用者
this.$emit("input",this.checkedAttributeGroupIds)
console.log(this.checkedAttributeGroupList)
// this.checkedAttributeGroupList.splice(this.checkedAttributeGroupIds.indexOf(attribute.id),1)
},
//关闭标签
removeCheck(index) {
console.log(index)
this.checkedAttributeList.splice(index,1);
this.checkedAttributeIds.splice(index,1)
this.checkedAttributeGroupList.splice(index,1);
this.checkedAttributeGroupIds.splice(index,1)
},
// 取消按钮
cancel() {
@ -133,12 +133,12 @@ export default {
this.reset();
},
/** 查询属性列表 */
getAttribute(){
listAttribute(this.queryParams).then(response => {
console.log('属性集合')
console.log(response)
this.attributeList = response.data.rows;
getList(){
this.loading = true
listGroup(this.queryParams).then(response => {
this.groupList = response.data.rows;
this.total = response.data.total;
this.loading = false;
});
},
}

30
src/views/product/categoryInfo/index.vue
View File

@ -128,17 +128,19 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注" prop="remark">
<el-form-item label="备注" prop="remark" style="height: 150px">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-col>
</el-row>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first">
<AttributeElement ></AttributeElement>
<el-tab-pane label="属性" name="first">
<AttributeGroupElement v-model="form.checkedAttributeIds"></AttributeGroupElement>
</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="属性组" name="second">
<AttributeElement v-model="form.checkedAttributeIds"></AttributeElement>
</el-tab-pane>
<el-tab-pane label="品牌" name="third">角色管理</el-tab-pane>
</el-tabs>
</el-form>
@ -163,7 +165,7 @@ export default {
},
data() {
return {
activeName: 'second',
activeName: 'first',
// 遮罩层
loading: true,
@ -201,6 +203,16 @@ export default {
status: [
{ required: true, message: "是否启用不能为空", trigger: "change" }
],
checkedAttributeIds: [
{ required: true, message: "属性不能为空", trigger: "change" }
],
checkedAttributeGroupList: [
{ required: true, message: "属性组不能为空", trigger: "change" }
],
checkedBrandList: [
{ required: true, message: "品牌不能为空", trigger: "change" }
],
}
};
},
@ -258,7 +270,10 @@ export default {
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
updateTime: null,
checkedAttributeIds: [],
checkedAttributeGroupList: [],
checkedBrandList: []
};
this.resetForm("form");
},
@ -299,6 +314,7 @@ export default {
this.form.parentId = row.id;
}
getCategory_info(row.id).then(response => {
console.log(response)
this.form = response.data;
this.open = true;
this.title = "修改品类信息";