Skip to content

O
office-web
Commit 092395d1 by xiaohai
Options

.

parent b0133da7
Showing with 102 additions and 114 deletions
src/components/contacts/searchMenu.vue
<template> <template>
<div class="searh-menu-container"> <div class="searh-menu-container">
<el-input prefix-icon="el-icon-search" placeholder="请输入内容"></el-input> <el-input prefix-icon="el-icon-search" v-model="searchKey" placeholder="请输入内容" clearable @clear="clearFn" @keyup.enter.native="searchFn"></el-input>
<ul class="search-menu"> <el-tree
<li class="cpn-submenu" style="padding: 0;"> v-show="!searchResultShow"
<div class="cpn-submenu_title">
<i class="iconfont icon-2zuzhijiagou"></i>
<span>品牌一</span>
</div>
<ul>
<li class="menuitem cpn-submenu-item">
<i class="iconfont icon-chengyuan"></i>
<span>陈景良</span>
</li>
<li class="cpn-submenu">
<div class="cpn-submenu_title">
<i class="iconfont icon-tongshi-zuzhijiagou"></i>
<span>人事部</span>
</div>
<ul>
<li class="menuitem cpn-submenu-item">
<i class="iconfont icon-chengyuan"></i>
<span>陈景良</span>
</li>
<li class="cpn-submenu">
<div class="cpn-submenu_title">
<i class="iconfont icon-tongshi-zuzhijiagou"></i>
<span>人事部</span>
</div>
<ul>
<li class="menuitem cpn-submenu-item">
<i class="iconfont icon-chengyuan"></i>
<span>陈景良</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- <el-menu
class="search-menu" class="search-menu"
@open="handleOpen" :default-expanded-keys="[1, 2]"
@close="handleClose"> :data="data"
<el-submenu index="1"> :highlight-current="true"
<template slot="title"> :expand-on-click-node="false"
<i class="iconfont icon-2zuzhijiagou"></i> @node-click="handleNodeClick">
<span>品牌一</span> <span class="custom-tree-node" slot-scope="{ node, data }">
</template> <i class="iconfont" :class="node.level == 1 ? 'icon-2zuzhijiagou' : node.isLeaf ? 'icon-chengyuan' : 'icon-tongshi-zuzhijiagou'"></i>
<el-submenu index="1-1"> <span>{{ node.label }}</span>
<template slot="title"> </span>
<i class="icon-tongshi-zuzhijiagou iconfont"></i> </el-tree>
<span>选项4</span>
</template>
<el-menu-item index="1-1-1">
<i class="iconfont icon-chengyuan"></i>
<span>张三</span>
</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu> -->
</div> </div>
</template> </template>
<script> <script>
...@@ -68,20 +21,84 @@ ...@@ -68,20 +21,84 @@
name: "searchMenu", name: "searchMenu",
components: {}, components: {},
props: {}, props: {},
data: { data() {
data: [ return {
data: [ // el-tree mock data
{ {
brand_name: "江南布衣", id: 1,
brand_code: "001", label: '一级 1',
brand_id: "jnby001", children: [
sort: 1, {
status: 1, id: 4,
label: '二级 1-1',
children: [
{
id: 9,
label: '三级 1-1-1'
},
{
id: 10,
label: '三级 1-1-2'
}
]
}
]
},
{
id: 2,
label: '一级 2',
children: [
{
id: 5,
label: '二级 2-1'
},
{
id: 6,
label: '二级 2-2'
}
]
},
{
id: 3,
label: '一级 3',
children: [
{
id: 7,
label: '二级 3-1'
},
{
id: 8,
label: '二级 3-2'
} }
] ]
}
],
searchKey: "",
searchResultShow: false,
};
}, },
created() {}, created() {},
metods: {}, methods: {
/**
* 清楚输入框
*/
clearFn() {},
/**
* 关键字搜索
*/
searchFn() {
console.log(this.searchKey);
},
/**
* 树形菜单选择
*/
handleNodeClick(obj, node) {
console.log(obj, node);
this.$emit("handleTreeSelection", obj, node);
}
},
filter: {}, filter: {},
computed: {}, computed: {},
watch: {} watch: {}
...@@ -89,42 +106,38 @@ ...@@ -89,42 +106,38 @@
</script> </script>
<style lang="scss"> <style lang="scss">
.searh-menu-container { .searh-menu-container {
overflow-y: scroll;
overflow-x: scroll;
width: 260px; width: 260px;
background: #eef1f8; background: #eef1f8;
height: 100%; height: 690px;
min-height: 600px;
padding: 20px 15px; padding: 20px 15px;
box-sizing: border-box;
.search-menu { .search-menu {
margin-top: 30px; margin-top: 30px;
color: #606266; color: #606266;
font-size: 14px; font-size: 14px;
background: #EEF1F8; background: #EEF1F8;
min-width: 100%;
display:inline-block !important;
.el-tree-node {
.el-tree-node__content {
height: 36px;
.iconfont { .iconfont {
color: #409EFF; color: #409EFF;
font-size: 16px;
margin-right: 5px; margin-right: 5px;
} }
.cpn-submenu {
list-style: none;
margin: 0;
}
.cpn-submenu_title {
height: 36px;
line-height: 36px;
padding: 0 20px;
&:hover { &:hover {
background:#409EFF;
color: #fff; color: #fff;
background: #409EFF;
.iconfont { .iconfont {
color: #fff; color: #fff;
} }
} }
} }
.cpn-submenu-item { }
height: 36px; }
line-height: 36px; .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
padding: 0 40px;
&:hover {
background: #409EFF; background: #409EFF;
color: #fff; color: #fff;
.iconfont { .iconfont {
...@@ -132,34 +145,6 @@ ...@@ -132,34 +145,6 @@
} }
} }
} }
}
// .search-menu {
// margin-top: 30px;
// background: none;
// border: none;
// .el-submenu__title {
// height: 36px;
// line-height: 36px;
// .iconfont {
// font-size: 16px;
// color: #409EFF;
// margin-right: 5px;
// }
// }
// .el-menu {
// background: none;
// .el-menu-item {
// height: 36px;
// line-height: 36px;
// .iconfont {
// font-size: 16px;
// color: #409EFF;
// margin-right: 5px;
// }
// }
// }
// }
}
</style> </style>
static/css/public.css
...@@ -327,6 +327,9 @@ input:focus { ...@@ -327,6 +327,9 @@ input:focus {
.m-t-10 { .m-t-10 {
margin-top: 10px; margin-top: 10px;
} }
.m-t-30 {
margin-top: 30px;
}
.font-0 .el-form-item__content, .dialog-footer { .font-0 .el-form-item__content, .dialog-footer {
font-size: 0; font-size: 0;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment