|
@@ -0,0 +1,119 @@
|
|
|
+<template>
|
|
|
+ <div class="saga-toolbar-box">
|
|
|
+ <div class="saga-toolbar-main">
|
|
|
+ <div class="top-menu">
|
|
|
+ <!-- <selectTree-->
|
|
|
+ <!-- :props="props"-->
|
|
|
+ <!-- :options="optionData"-->
|
|
|
+ <!-- :value="valueId"-->
|
|
|
+ <!-- :clearable="isClearable"-->
|
|
|
+ <!-- :accordion="isAccordion"-->
|
|
|
+ <!-- @getValue="getValue($event)"/>-->
|
|
|
+ <span style="float: right;">
|
|
|
+ <el-input
|
|
|
+ v-model="value"
|
|
|
+ style="width: 360px"
|
|
|
+ placeholder="请输入关键词/拼音/首字母"
|
|
|
+ class="reset-input"
|
|
|
+ >
|
|
|
+ <i slot="prefix" class="el-input__icon el-icon-search"></i>
|
|
|
+ </el-input>
|
|
|
+ <el-button type="primary" @click="handBrand">添加产品</el-button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </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", rank: 1},
|
|
|
+ {id: 2, parentId: 0, name: "一级菜单B", rank: 1},
|
|
|
+ {id: 3, parentId: 0, name: "一级菜单C", rank: 1},
|
|
|
+ {id: 4, parentId: 1, name: "二级菜单A-A", rank: 2},
|
|
|
+ {id: 5, parentId: 1, name: "二级菜单A-B", rank: 2},
|
|
|
+ {id: 6, parentId: 2, name: "二级菜单B-A", rank: 2},
|
|
|
+ {id: 7, parentId: 4, name: "三级菜单A-A-A", rank: 3},
|
|
|
+ {id: 20, parentId: 0, name: "一级菜单C", rank: 1},
|
|
|
+ {id: 39, parentId: 0, name: "一级菜单C", rank: 1},
|
|
|
+ {id: 40, parentId: 0, name: "一级菜单end", rank: 1}
|
|
|
+ ],
|
|
|
+ value: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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: fixed;
|
|
|
+ top: 48px;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .saga-toolbar-main {
|
|
|
+ width: 1200px;
|
|
|
+ height: 100%;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-menu {
|
|
|
+ width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .reset-input {
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ background: #F6F6F6;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|