构建了半半成品的组件,明天要筛选值
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