构建了半半成品的组件,明天要筛选值
parent
29f7d2bb11
commit
d928f8fe55
|
|
@ -0,0 +1,9 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export function getCategoryList(likeName) {
|
||||
return request({
|
||||
url: '/product/category/getCategoryList',
|
||||
method: 'get',
|
||||
data: likeName
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-card class="box-card">
|
||||
<div>
|
||||
<span>选择属性关联关系</span>
|
||||
</div>
|
||||
<el-card class="box-card">
|
||||
<div>
|
||||
<span>已选属性</span>
|
||||
</div>
|
||||
<el-col>
|
||||
<el-tag
|
||||
v-for="brand in selectBrandIdList"
|
||||
:key="brand.name"
|
||||
closable
|
||||
type="success">
|
||||
{{brand.name}}
|
||||
</el-tag>
|
||||
</el-col>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
<div>
|
||||
<span>可选属性</span>
|
||||
</div>
|
||||
<el-col>
|
||||
<el-checkbox
|
||||
v-for="brand in brandList"
|
||||
v-model="selectBrandIdList"
|
||||
:label="brand"
|
||||
:key="brand.id">
|
||||
{{brand.name}}</el-checkbox>
|
||||
</el-col>
|
||||
</el-card>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||||
//例如：import 《组件名称》 from '《组件路径》,
|
||||
import {getBrandList} from "@/api/product/brand";
|
||||
|
||||
export default {
|
||||
name: 'CheckBrand',
|
||||
//import引入的组件需要注入到对象中才能使用"
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
//这里存放数据"
|
||||
|
||||
return {
|
||||
//所有brandList
|
||||
brandList: [],
|
||||
//已选中brand属性
|
||||
selectBrandIdList: [
|
||||
],
|
||||
//父类选中的brand属性
|
||||
parentSelectBrandList: []
|
||||
};
|
||||
},
|
||||
//计算属性 类似于data概念",
|
||||
computed: {},
|
||||
//监控data中的数据变化",
|
||||
watch: {},
|
||||
//方法集合",
|
||||
methods: {
|
||||
getBrandList() {
|
||||
getBrandList("").then(
|
||||
res => {
|
||||
this.brandList = res.data
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
//生命周期 - 创建完成（可以访问当前this实例）",
|
||||
created() {
|
||||
this.getBrandList()
|
||||
},
|
||||
//生命周期 - 挂载完成（可以访问DOM元素）",
|
||||
mounted() {
|
||||
},
|
||||
beforeCreate() {
|
||||
}, //生命周期 - 创建之前",
|
||||
beforeMount() {
|
||||
}, //生命周期 - 挂载之前",
|
||||
beforeUpdate() {
|
||||
}, //生命周期 - 更新之前",
|
||||
updated() {
|
||||
}, //生命周期 - 更新之后",
|
||||
beforeDestroy() {
|
||||
}, //生命周期 - 销毁之前",
|
||||
destroyed() {
|
||||
}, //生命周期 - 销毁完成",
|
||||
activated() {
|
||||
} //如果页面有keep-alive缓存功能，这个函数会触发",
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
<template>
|
||||
<div>
|
||||
<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" >
|
||||
<el-form-item label="父级品类" prop="parentId">
|
||||
<treeselect v-model="categoryList.parentId" :options="categoryOptions" :normalizer="normalizer"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="品类名称" :label-width="100">
|
||||
<el-input v-model="insertCategoryReq.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="图片上传" :label-width="120">
|
||||
<upload-pic ref="uploadPic" @handle-image-url="handleImageUrl"></upload-pic>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="品类简介" :label-width="100">
|
||||
<el-input v-model="insertCategoryReq.introduction"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="isInsertCategory = false">取 消</el-button>
|
||||
<el-button type="primary" @click="isInsertCategory = false">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<check-brand></check-brand>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||||
//例如：import 《组件名称》 from '《组件路径》,
|
||||
import {getCategoryList} from "@/api/product/category";
|
||||
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";
|
||||
|
||||
export default {
|
||||
//import引入的组件需要注入到对象中才能使用"
|
||||
components: {Treeselect,UploadPic,CheckBrand},
|
||||
props: {},
|
||||
data() {
|
||||
//这里存放数据"
|
||||
|
||||
return {
|
||||
//查询品类所需参数
|
||||
likeName: "",
|
||||
isInsertCategory: false,
|
||||
formLabelWidth: 120,
|
||||
categoryOptions: [],
|
||||
//查询到的所有品类
|
||||
categoryList: [],
|
||||
//新增请求对象
|
||||
insertCategoryReq: {
|
||||
id: null,
|
||||
name: "",
|
||||
image: "",
|
||||
parentId: null,
|
||||
introduction: "",
|
||||
brandIdList: [],
|
||||
attributeIdList: [],
|
||||
attributeGroupList: []
|
||||
},
|
||||
//查询出的品牌,属性,属性组,集合
|
||||
brandList: [],
|
||||
attributeList: [],
|
||||
attributeGroupList: [],
|
||||
//已选中的品牌,属性 属性组集合
|
||||
selectBrandList: [],
|
||||
selectAttributeList: [],
|
||||
selectAttributeGroupList: [],
|
||||
//注: 上一级目录已选中的品牌,属性,属性组,不在可选列表展示
|
||||
//上一级目录所选中的品牌,属性,属性组,可以到后端先根据id查出来,然后添加到新品类目录
|
||||
//所有上级目录已选中品牌,属性,属性组
|
||||
parentSelectBrandList: [],
|
||||
parentSelectAttributeList: [],
|
||||
parentSelectAttributeGroupList: []
|
||||
};
|
||||
},
|
||||
//计算属性 类似于data概念",
|
||||
computed: {},
|
||||
//监控data中的数据变化",
|
||||
watch: {},
|
||||
//方法集合",
|
||||
methods: {
|
||||
handleImageUrl() {
|
||||
const imageUrl = this.$refs.uploadPic.imageUrl;
|
||||
this.insertCategoryReq.image = imageUrl
|
||||
console.log("获取到的图片地址：", imageUrl);
|
||||
},
|
||||
/** 转换品类信息数据结构 */
|
||||
normalizer(node) {
|
||||
if (node.children && !node.children.length) {
|
||||
delete node.children;
|
||||
}
|
||||
return {
|
||||
id: node.id,
|
||||
label: node.name,
|
||||
children: node.children
|
||||
};
|
||||
},
|
||||
/** 查询品类信息下拉树结构 */
|
||||
getTreeSelect() {
|
||||
getCategoryList(this.likeName).then(response => {
|
||||
this.categoryOptions = [];
|
||||
const data = { id: 0, name: '顶级节点', children: [] };
|
||||
data.children = this.handleTree(response.data, "id", "parentId");
|
||||
this.categoryOptions.push(data);
|
||||
});
|
||||
},
|
||||
getCategoryList() {
|
||||
getCategoryList(this.likeName).then(
|
||||
res => {
|
||||
this.categoryList = res.data
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
//生命周期 - 创建完成（可以访问当前this实例）",
|
||||
created() {
|
||||
this.getTreeSelect()
|
||||
},
|
||||
//生命周期 - 挂载完成（可以访问DOM元素）",
|
||||
mounted() {
|
||||
},
|
||||
beforeCreate() {
|
||||
}, //生命周期 - 创建之前",
|
||||
beforeMount() {
|
||||
}, //生命周期 - 挂载之前",
|
||||
beforeUpdate() {
|
||||
}, //生命周期 - 更新之前",
|
||||
updated() {
|
||||
}, //生命周期 - 更新之后",
|
||||
beforeDestroy() {
|
||||
}, //生命周期 - 销毁之前",
|
||||
destroyed() {
|
||||
}, //生命周期 - 销毁完成",
|
||||
activated() {
|
||||
} //如果页面有keep-alive缓存功能，这个函数会触发",
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue