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> </div>
<el-card class="box-card" > <el-card class="box-card" >
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>已选属性</span> <span>已选属性组</span>
<span>已选属性ids ：：{{this.checkedAttributeIds}}</span> <span>已选属性组ids ：：{{this.checkedAttributeGroupIds}}</span>
<span>属性：：{{this.checkedAttributeList}} </span> <span>属性组：：{{this.checkedAttributeGroupList}} </span>
</div> </div>
<el-row :gutter="20" style="height: 100px"> <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 <el-tag
style="margin: 0 10px" style="margin: 0 10px"
:key="attribute.name" :key="attributeGroup.name"
closable closable
@close="removeCheck(index)"> @close="removeCheck(index)">
{{attribute.name}} {{attributeGroup.name}}
</el-tag> </el-tag>
</el-col> </el-col>
</el-row> </el-row>
@ -31,7 +31,7 @@
<el-col :span="3" <el-col :span="3"
v-for="attribute in attributeList"> v-for="attribute in attributeList">
<el-checkbox <el-checkbox
v-model="checkedAttributeIds" v-model="checkedAttributeGroupIds"
:value="attribute.id" :value="attribute.id"
:key="attribute.id" :key="attribute.id"
:label="attribute.id" :label="attribute.id"
@ -47,7 +47,7 @@
</template> </template>
<script> <script>
import {listAttribute} from "@/api/product/attribute"; import {listGroup} from "@/api/product/attribute_group";
export default { export default {
name:"AttributeElement", name:"AttributeElement",
@ -65,9 +65,9 @@ export default {
data() { data() {
// 数据 // 数据
return{ return{
checkedAttributeIds: [], checkedAttributeGroupIds: [],
//已选属性数组 //已选属性数组
checkedAttributeList: [], checkedAttributeGroupList: [],
//商品属性表 //商品属性表
attributeList: [], attributeList: [],
// 属性组数据 // 属性组数据
@ -79,26 +79,25 @@ export default {
}, },
// 挂载方法 // 挂载方法
created() { created() {
this.getAttribute() this.getList()
}, },
watch:{ watch:{
value: { value: {
handler(val) { handler(val) {
console.log("进入初始化value::"+val.toString()) console.log("进入初始化value::"+val.toString())
if (val.toString() !== this.checkedAttributeIds.toString()){ if (val.toString() !== this.checkedAttributeGroupIds.toString()){
this.checkedAttributeIds = val this.checkedAttributeGroupIds = val
this.checkedAttributeList = [] this.checkedAttributeGroupList = []
} }
console.log("选中的ids：："+this.checkedAttributeIds) console.log("选中的ids：："+this.checkedAttributeGroupIds)
}, },
immediate: true immediate: true
}, },
checkedAttribute:{ checkedAttributeGroup:{
handler(val) { handler(val) {
console.log("进入初始化checkedAttribute::"+val.toString())
if (val !==undefined && val.length>0){ if (val !==undefined && val.length>0){
this.checkedAttributeList = val this.checkedAttributeGroupList = val
this.checkedAttributeIds = this.checkedAttributeList.map(checked => checked.id) this.checkedAttributeGroupIds = this.checkedAttributeGroupList.map(checked => checked.id)
} }
}, },
immediate: true immediate: true
@ -108,24 +107,25 @@ export default {
methods: { methods: {
/** 属性复选框选择事件 */ /** 属性复选框选择事件 */
handleCheckedAttributeChange(attribute){ handleCheckedAttributeChange(attribute){
let isChecked = this.checkedAttributeIds.indexOf(attribute.id) > -1; let isChecked = this.checkedAttributeGroupIds.indexOf(attribute.id) > -1;
if (isChecked){ if (isChecked){
this.checkedAttributeList.push(attribute) this.checkedAttributeGroupList.push(attribute)
}else { }else {
//删除属性 //删除属性
this.checkedAttributeList.splice( this.checkedAttributeGroupList.splice(
this.checkedAttributeList.indexOf(attribute),1 this.checkedAttributeGroupList.indexOf(attribute),1
) )
} }
this.$emit("input",this.checkedAttributeIds) //将组件改变的值传给调用者
console.log(this.checkedAttributeList) this.$emit("input",this.checkedAttributeGroupIds)
// this.checkedAttributeList.splice(this.checkedAttributeIds.indexOf(attribute.id),1) console.log(this.checkedAttributeGroupList)
// this.checkedAttributeGroupList.splice(this.checkedAttributeGroupIds.indexOf(attribute.id),1)
}, },
//关闭标签 //关闭标签
removeCheck(index) { removeCheck(index) {
console.log(index) console.log(index)
this.checkedAttributeList.splice(index,1); this.checkedAttributeGroupList.splice(index,1);
this.checkedAttributeIds.splice(index,1) this.checkedAttributeGroupIds.splice(index,1)
}, },
// 取消按钮 // 取消按钮
cancel() { cancel() {
@ -133,12 +133,12 @@ export default {
this.reset(); this.reset();
}, },
/** 查询属性列表 */ /** 查询属性列表 */
getAttribute(){ getList(){
listAttribute(this.queryParams).then(response => { this.loading = true
console.log('属性集合') listGroup(this.queryParams).then(response => {
console.log(response) this.groupList = response.data.rows;
this.attributeList = response.data.rows;
this.total = response.data.total; 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-form-item>
</el-col> </el-col>
<el-col :span="12"> <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-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first"> <el-tab-pane label="属性" name="first">
<AttributeElement ></AttributeElement> <AttributeGroupElement v-model="form.checkedAttributeIds"></AttributeGroupElement>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> <el-tab-pane label="属性组" name="second">
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane> <AttributeElement v-model="form.checkedAttributeIds"></AttributeElement>
</el-tab-pane>
<el-tab-pane label="品牌" name="third">角色管理</el-tab-pane>
</el-tabs> </el-tabs>
</el-form> </el-form>
@ -163,7 +165,7 @@ export default {
}, },
data() { data() {
return { return {
activeName: 'second', activeName: 'first',
// 遮罩层 // 遮罩层
loading: true, loading: true,
@ -201,6 +203,16 @@ export default {
status: [ status: [
{ required: true, message: "是否启用不能为空", trigger: "change" } { 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, createBy: null,
createTime: null, createTime: null,
updateBy: null, updateBy: null,
updateTime: null updateTime: null,
checkedAttributeIds: [],
checkedAttributeGroupList: [],
checkedBrandList: []
}; };
this.resetForm("form"); this.resetForm("form");
}, },
@ -299,6 +314,7 @@ export default {
this.form.parentId = row.id; this.form.parentId = row.id;
} }
getCategory_info(row.id).then(response => { getCategory_info(row.id).then(response => {
console.log(response)
this.form = response.data; this.form = response.data;
this.open = true; this.open = true;
this.title = "修改品类信息"; this.title = "修改品类信息";