|
@@ -0,0 +1,107 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="saga-toolbar-box">
|
|
|
|
+ <div class="saga-toolbar-main">
|
|
|
|
+ <selectTree
|
|
|
|
+ :props="props"
|
|
|
|
+ :options="optionData"
|
|
|
|
+ :value="valueId"
|
|
|
|
+ :clearable="isClearable"
|
|
|
|
+ :accordion="isAccordion"
|
|
|
|
+ @getValue="getValue($event)"/>
|
|
|
|
+ <span style="float: right;">
|
|
|
|
+ <el-button type="primary" @click="handBrand">添加产品</el-button>
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <addBrand ref="addBrand" title="添加品牌"></addBrand>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import selectTree from "@/components/public/selectTree";
|
|
|
|
+ import addBrand from "@/components/business/addBrand";
|
|
|
|
+
|
|
|
|
+ export default {
|
|
|
|
+ components: {selectTree, addBrand},
|
|
|
|
+
|
|
|
|
+ created() {
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ isClearable: true, // 可清空(可选)
|
|
|
|
+ isAccordion: true, // 可收起(可选)
|
|
|
|
+ valueId: 20, // 初始ID(可选)
|
|
|
|
+ props: { // 配置项(必选)
|
|
|
|
+ value: 'id',
|
|
|
|
+ label: 'name',
|
|
|
|
+ children: 'children',
|
|
|
|
+ // disabled:true
|
|
|
|
+ },
|
|
|
|
+ // 选项列表(必选)
|
|
|
|
+ list: [
|
|
|
|
+ {id: 1, parentId: 0, name: "一级菜单A",},
|
|
|
|
+ {id: 2, parentId: 0, name: "一级菜单B",},
|
|
|
|
+ {id: 3, parentId: 0, name: "一级菜单C",},
|
|
|
|
+ {id: 4, parentId: 1, name: "二级菜单A-A",},
|
|
|
|
+ {id: 5, parentId: 1, name: "二级菜单A-B",},
|
|
|
|
+ {id: 6, parentId: 2, name: "二级菜单B-A",},
|
|
|
|
+ {id: 7, parentId: 4, name: "三级菜单A-A-A",},
|
|
|
|
+ {id: 20, parentId: 0, name: "一级菜单C",},
|
|
|
|
+ {id: 39, parentId: 0, name: "一级菜单C",},
|
|
|
|
+ {id: 40, parentId: 0, name: "一级菜单end",}
|
|
|
|
+ ],
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ handBrand() {
|
|
|
|
+ this.$refs.addBrand.outerVisible = true
|
|
|
|
+ },
|
|
|
|
+ // 取值
|
|
|
|
+ getValue(value) {
|
|
|
|
+ this.valueId = value
|
|
|
|
+ console.log(this.valueId);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ /* 转树形数据 */
|
|
|
|
+ optionData() {
|
|
|
|
+ let cloneData = JSON.parse(JSON.stringify(this.list)) // 对源数据深度克隆
|
|
|
|
+ return cloneData.filter(father => { // 循环所有项,并添加children属性
|
|
|
|
+ let branchArr = cloneData.filter(child => father.id == child.parentId); // 返回每一项的子级数组
|
|
|
|
+ branchArr.length > 0 ? father.children = branchArr : '' //给父级添加一个children属性,并赋值
|
|
|
|
+ return father.parentId == 0; //返回第一层
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+ .saga-toolbar-box {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 70px;
|
|
|
|
+ background: #fff;
|
|
|
|
+
|
|
|
|
+ .saga-toolbar-main {
|
|
|
|
+ width: 1200px;
|
|
|
|
+ height: 100%;
|
|
|
|
+ margin: auto;
|
|
|
|
+ padding-top: 20px;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ .reset-input {
|
|
|
|
+ /deep/ .el-input__inner {
|
|
|
|
+ background: #F6F6F6;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|