|
@@ -1,222 +0,0 @@
|
|
|
-<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>
|