|
@@ -0,0 +1,222 @@
|
|
|
+<template>
|
|
|
+ <div class="product">
|
|
|
+ <div class="top">
|
|
|
+ <div class="top-menu">
|
|
|
+ <selectTree
|
|
|
+ :props="props"
|
|
|
+ :options="optionData"
|
|
|
+ :value="valueId"
|
|
|
+ :clearable="isClearable"
|
|
|
+ :accordion="isAccordion"
|
|
|
+ @getValue="getValue($event)"/>
|
|
|
+ <span style="float: right;">
|
|
|
+ <search text="请输入关键词/拼音/首字母" type="header"></search>
|
|
|
+ <el-button type="primary" @click="handBrand">添加产品</el-button>
|
|
|
+ <addBrand ref="addBrand" title="添加品牌"></addBrand>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="sidebar">
|
|
|
+ <div class="title">产品分类</div>
|
|
|
+ <div class="product-classification">
|
|
|
+ <el-popover
|
|
|
+ trigger="hover"
|
|
|
+ placement="right"
|
|
|
+ width="600">
|
|
|
+ <p>某某系统</p>
|
|
|
+ <div class="sys">
|
|
|
+ <span>燃气调压箱</span>
|
|
|
+ <span>燃气调压箱</span>
|
|
|
+ <span>燃气调压箱</span>
|
|
|
+ <span>燃气调压箱</span>
|
|
|
+ <span>燃气调压箱</span>
|
|
|
+ <span>燃气调压箱</span>
|
|
|
+ <span>燃气调压箱</span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!-- <div style="text-align: right; margin: 0">-->
|
|
|
+ <!-- <el-button size="mini" type="text" @click="visible = false">取消</el-button>-->
|
|
|
+ <!-- <el-button type="primary" size="mini" @click="visible = false">确定</el-button>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <div slot="reference" class="classification">
|
|
|
+ <p class="name">给排水专业—WS</p>
|
|
|
+ <p class="introduce">建筑各类生活、景观用水给水排水系统、燃气系统</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-popover>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="brand">
|
|
|
+ <div class="brand-top">
|
|
|
+ <el-dropdown style="margin-left: 20px">
|
|
|
+ <span class="el-dropdown-link">
|
|
|
+ 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
+ </span>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item>黄金糕</el-dropdown-item>
|
|
|
+ <el-dropdown-item>狮子头</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ <!-- <search text="请输入品牌名称" type="content"></search>-->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import selectTree from "../components/public/selectTree";
|
|
|
+ import search from "../components/public/search"
|
|
|
+ import addBrand from "../components/business/addBrand";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "product",
|
|
|
+ components: {selectTree, search, addBrand},
|
|
|
+ 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}
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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; //返回第一层
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 取值
|
|
|
+ getValue(value) {
|
|
|
+ this.valueId = value
|
|
|
+ console.log(this.valueId);
|
|
|
+ },
|
|
|
+ handBrand() {
|
|
|
+ this.$refs.addBrand.outerVisible = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+ @bgc: #fff;
|
|
|
+ .product {
|
|
|
+ background: #F7F9FA;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ height: 70px;
|
|
|
+ width: 100%;
|
|
|
+ background: @bgc;
|
|
|
+
|
|
|
+ .top-menu {
|
|
|
+ width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 1200px;
|
|
|
+ margin: 20px auto 0 auto;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .sidebar {
|
|
|
+ /*margin-top: 20px;*/
|
|
|
+ width: 200px;
|
|
|
+ background: @bgc;
|
|
|
+ display: inline-block;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ background: #CBDFFC;
|
|
|
+ color: #3A8DDE;
|
|
|
+ padding-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-classification {
|
|
|
+ background: @bgc;
|
|
|
+ /*margin-top: -19px;*/
|
|
|
+
|
|
|
+ .classification {
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 10px;
|
|
|
+ border-bottom: 1px solid #EFF0F1;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ color: #1F2429;
|
|
|
+ }
|
|
|
+
|
|
|
+ .introduce {
|
|
|
+ color: #8D9399;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .classification:hover {
|
|
|
+ background: #E1F2FF;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ color: #3A8DDE;
|
|
|
+ }
|
|
|
+
|
|
|
+ .introduce {
|
|
|
+ color: #3A8DDE;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sys {
|
|
|
+ padding: 10px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin: 0 20px;
|
|
|
+ color: #8D9399;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .brand {
|
|
|
+ margin-left: 20px;
|
|
|
+ background: @bgc;
|
|
|
+ flex-grow: 1;
|
|
|
+
|
|
|
+ .brand-top {
|
|
|
+ height: 57px;
|
|
|
+ line-height: 57px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|