品类模块，填入属性组组件
parent
e525cb67ef
commit
eec179b0af
|
|
@ -0,0 +1,150 @@
|
|||
<template>
|
||||
<el-row>
|
||||
<el-card class="box-card" >
|
||||
<div slot="header" class="clearfix">
|
||||
<span>属性关联关系</span>
|
||||
</div>
|
||||
<el-card class="box-card" >
|
||||
<div slot="header" class="clearfix">
|
||||
<span>已选属性</span>
|
||||
<span>已选属性ids ：：{{this.checkedAttributeIds}}</span>
|
||||
<span>属性：：{{this.checkedAttributeList}} </span>
|
||||
</div>
|
||||
<el-row :gutter="20" style="height: 100px">
|
||||
<el-col :span="3" v-for="(attribute,index) in checkedAttributeList">
|
||||
<el-tag
|
||||
style="margin: 0 10px"
|
||||
:key="attribute.name"
|
||||
closable
|
||||
@close="removeCheck(index)">
|
||||
{{attribute.name}}
|
||||
</el-tag>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card >
|
||||
<el-divider></el-divider>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>可选属性</span>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span="3"
|
||||
v-for="attribute in attributeList">
|
||||
<el-checkbox
|
||||
v-model="checkedAttributeIds"
|
||||
:value="attribute.id"
|
||||
:key="attribute.id"
|
||||
:label="attribute.id"
|
||||
@change="handleCheckedAttributeChange(attribute)"
|
||||
border>
|
||||
{{attribute.name}}
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import {listAttribute} from "@/api/product/attribute";
|
||||
|
||||
export default {
|
||||
name:"AttributeElement",
|
||||
// 接参
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
checkedAttribute:{
|
||||
type: Array,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
// 数据
|
||||
return{
|
||||
checkedAttributeIds: [],
|
||||
//已选属性数组
|
||||
checkedAttributeList: [],
|
||||
//商品属性表
|
||||
attributeList: [],
|
||||
// 属性组数据
|
||||
groupList: [],
|
||||
// 总条数
|
||||
total: 0,
|
||||
|
||||
}
|
||||
},
|
||||
// 挂载方法
|
||||
created() {
|
||||
this.getAttribute()
|
||||
},
|
||||
watch:{
|
||||
value: {
|
||||
handler(val) {
|
||||
console.log("进入初始化value::"+val.toString())
|
||||
if (val.toString() !== this.checkedAttributeIds.toString()){
|
||||
this.checkedAttributeIds = val
|
||||
this.checkedAttributeList = []
|
||||
}
|
||||
console.log("选中的ids：："+this.checkedAttributeIds)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
checkedAttribute:{
|
||||
handler(val) {
|
||||
console.log("进入初始化checkedAttribute::"+val.toString())
|
||||
if (val !==undefined && val.length>0){
|
||||
this.checkedAttributeList = val
|
||||
this.checkedAttributeIds = this.checkedAttributeList.map(checked => checked.id)
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
// 方法
|
||||
methods: {
|
||||
/** 属性复选框选择事件 */
|
||||
handleCheckedAttributeChange(attribute){
|
||||
let isChecked = this.checkedAttributeIds.indexOf(attribute.id) > -1;
|
||||
if (isChecked){
|
||||
this.checkedAttributeList.push(attribute)
|
||||
}else {
|
||||
//删除属性
|
||||
this.checkedAttributeList.splice(
|
||||
this.checkedAttributeList.indexOf(attribute),1
|
||||
)
|
||||
}
|
||||
this.$emit("input",this.checkedAttributeIds)
|
||||
console.log(this.checkedAttributeList)
|
||||
// this.checkedAttributeList.splice(this.checkedAttributeIds.indexOf(attribute.id),1)
|
||||
},
|
||||
//关闭标签
|
||||
removeCheck(index) {
|
||||
console.log(index)
|
||||
this.checkedAttributeList.splice(index,1);
|
||||
this.checkedAttributeIds.splice(index,1)
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
/** 查询属性列表 */
|
||||
getAttribute(){
|
||||
listAttribute(this.queryParams).then(response => {
|
||||
console.log('属性集合')
|
||||
console.log(response)
|
||||
this.attributeList = response.data.rows;
|
||||
this.total = response.data.total;
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
@ -48,7 +48,6 @@
|
|||
<script>
|
||||
|
||||
import {listAttribute} from "@/api/product/attribute";
|
||||
import {listGroup} from "@/api/product/attribute_group";
|
||||
|
||||
export default {
|
||||
name:"AttributeGroupElement",
|
||||
|
|
|
|||
|
|
@ -39,6 +39,8 @@ import VueMeta from 'vue-meta'
|
|||
import DictData from '@/components/DictData'
|
||||
//属性组组件
|
||||
import AttributeGroupElement from '@/components/CheckedAttribute'
|
||||
//属性组件
|
||||
import AttributeElement from '@/components/CheckAttributes'
|
||||
|
||||
// 全局方法挂载
|
||||
Vue.prototype.getDicts = getDicts
|
||||
|
|
@ -59,7 +61,9 @@ Vue.component('Editor', Editor)
|
|||
Vue.component('FileUpload', FileUpload)
|
||||
Vue.component('ImageUpload', ImageUpload)
|
||||
Vue.component('ImagePreview', ImagePreview)
|
||||
//自定义组件全局挂载
|
||||
Vue.component('AttributeGroupElement', AttributeGroupElement)
|
||||
Vue.component('AttributeElement', AttributeElement)
|
||||
|
||||
Vue.use(directive)
|
||||
Vue.use(plugins)
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 属性组件-->
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
|
|
@ -99,27 +100,47 @@
|
|||
<!-- 添加或修改品类信息对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="品类名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入品类名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图片" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="父级品类" prop="parentId">
|
||||
<treeselect v-model="form.parentId" :options="category_infoOptions" :normalizer="normalizer" placeholder="请选择父级品类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否启用" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.sys_yes_no"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="父级品类" prop="parentId">
|
||||
<treeselect v-model="form.parentId" :options="category_infoOptions" :normalizer="normalizer" placeholder="请选择父级品类" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否启用" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.sys_yes_no"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="品类名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入品类名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图片" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<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>
|
||||
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
|
||||
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
|
|
@ -142,6 +163,8 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'second',
|
||||
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
|
|
@ -185,6 +208,11 @@ export default {
|
|||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
},
|
||||
|
||||
|
||||
/** 查询品类信息列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
|
|
|
|||
Loading…
Reference in New Issue