Skip to content

O
office-web
Commit b330db63 by xiaohai
Options

.

parent 34640c32
Showing with 430 additions and 7 deletions
src/components/contacts/searchMenu.vue
......@@ -4,7 +4,8 @@
<el-tree
v-show="!searchResultShow"
class="search-menu"
:default-expanded-keys="[1, 2]"
node-key="id"
:default-expanded-keys="[1, 2, 3]"
:data="data"
:highlight-current="true"
:expand-on-click-node="false"
......@@ -73,30 +74,95 @@
]
}
],
testData: [ // 方法测试数据，可删
{
name: 'w',
groupId: "001",
level: 0
},
{
name: '2w',
groupId: "002",
level: 0
},
{
name: '22w',
groupId: "00232",
level: 1
},
{
name: '32w',
groupId: "004412",
level: 1
},
{
name: '2sw',
groupId: "0042",
level: 2
},
{
name: '2dw',
groupId: "00244",
level: 3
},
{
name: '2fw',
groupId: "00222",
level: 3
},
{
name: '2gw',
groupId: "0022",
level: 3
}
],
searchKey: "",
searchResultShow: false,
};
},
created() {},
created() {
this.sortGroupByLevel();
},
methods: {
/**
* 清楚输入框
*/
clearFn() {},
clearFn() {
this.searchResultShow = false;
},
/**
* 关键字搜索
*/
searchFn() {
console.log(this.searchKey);
if (this.searchKey == "") {
this.searchResultShow = false;
return false;
}
this.searchResultShow = true;
// console.log(this.searchKey);
this.$emit("handleSearchKey", this.searchKey);
},
/**
* 树形菜单选择
*/
handleNodeClick(obj, node) {
console.log(obj, node);
// console.log(obj, node);
this.$emit("handleTreeSelection", obj, node);
},
/**
* 按层级排序部门
*/
sortGroupByLevel() {
let arr = this.testData;
for (let i = 6; i > 0; i--) {
console.log(i);
// arr.forEach(item => {
// });
}
}
},
filter: {},
......
src/router/index.js
......@@ -50,6 +50,11 @@ export const constantRouterMap = [
component: _import('contacts','administrativeFrame')
},
{
path: '/addDepartment',
name: '添加部门',
component: _import('contacts','addDepartment')
},
{
path: '/storeFrame',
name: '门店架构',
component: _import('contacts','storeFrame')
......
src/views/contacts/addDepartment.vue 0 → 100644
<template>
<div class="add-department-container">
<div class="setting-cell depart-info">
<p class="title">部门信息</p>
<el-form
class="department-info-form"
label-position="right"
label-width="100px">
<el-form-item label="部门名称" required>
<el-input v-model="departInfo.name"></el-input>
</el-form-item>
<el-form-item label="部门排序调整">
<el-input v-model="departInfo.name"></el-input>
</el-form-item>
</el-form>
</div>
<div class="setting-cell">
<p class="title">权限设置</p>
<div class="jurisdiction-setting">
<div class="only-visivble-there">
本部门员工仅可见本部门员工
<el-switch
v-model="visibleThere"
active-color="#409EFF"
inactive-color="#DCDFE6">
</el-switch>
</div>
<div class="particular-setting">
<div>
<p>个别员工不设置该权限</p>
<ul class="particular-list">
<li></li>
<li></li>
<li></li>
<div class="add-btn item">
<i class="el-icon-plus"></i>
</div>
</ul>
<p>允许指定部门/人员可见</p>
<ul class="particular-list">
<li class="item person-item">
<img src="http://www.vstou.com/upload/image/1/201806/1528248938430018.jpeg" alt="haoban">
<p class="name">陈景良</p>
<i class="el-icon-circle-close"></i>
</li>
<li class="item group-item">
市场部
<i class="el-icon-circle-close"></i>
</li>
<div class="add-btn item">
<i class="el-icon-plus"></i>
</div>
</ul>
</div>
</div>
<div class="only-visivble-self">
本部门员工仅可见本部门员工
<el-switch
v-model="visibleThere"
active-color="#409EFF"
inactive-color="#DCDFE6">
</el-switch>
</div>
</div>
</div>
<div class="setting-cell"></div>
</div>
</template>
<script>
export default {
name: "addDepartment",
data() {
return {
visibleThere: false,
departInfo: {
name: ""
}
};
}
};
</script>
<style lang="scss">
.add-department-container {
.setting-cell {
background: #fff;
margin-bottom: 24px;
.title {
height: 55px;
line-height: 55px;
border-bottom: 1px solid #E4E7ED;
text-indent: 32px;
font-size:16px;
font-weight:500;
color:#303133;
}
.department-info-form {
padding: 24px 32px;
.el-input {
width: 380px;
}
}
.jurisdiction-setting {
padding: 36px 32px 55px;
.particular-setting {
width: 480px;
min-height: 300px;
border-radius: 2px;
background: #F5F7FA;
margin: 32px 0;
padding: 20px;
.particular-list {
display: flex;
flex-wrap: wrap;
margin-bottom: 30px;
.add-btn {
width:40px;
height:40px;
background:rgba(251,253,255,1);
border:1px dashed rgba(192,204,218,1);
border-radius:50%;
box-sizing: border-box;
line-height: 40px;
text-align: center;
.el-icon-plus {
font-size: 16px;
color: #8C939D;
}
}
.item {
position: relative;
margin-right: 24px;
margin-top: 30px;
.el-icon-circle-close {
position: absolute;
font-size: 16px;
color: #808995;
right: -8px;
top: -8px;
}
}
.person-item {
width:40px;
position: relative;
img {
width: 100%;
border-radius:4px;
}
.name {
font-size: 12px;
text-align: center;
margin-top: 20px;
}
}
.group-item {
width:57px;
height:30px;
background:rgba(236,245,255,1);
border:1px solid rgba(217,236,255,1);
border-radius:4px;
font-size:12px;
color:rgba(64,158,255,1);
line-height: 32px;
text-align: center;
}
}
}
}
}
}
</style>
src/views/contacts/administrativeFrame.vue
<template>
<div class="administrative-estrutura-container">
<search-menu></search-menu>
<search-menu @handleSearchKey="handleSearchKey" @handleTreeSelection="handleTreeSelection"></search-menu>
<div class="af-right-container">
<div class="af-right-header">
<span class="title-span">人事部（5人）</span>
<span class="id-span">部门ID： 1233344</span>
<span class="handle-area">
<a class="J_add-child a-href">添加子部门</a>
<span class="hurdle"></span>
<a class="J_edit a-href">编辑</a>
</span>
</div>
<div class="af-right-button-box">
<el-button type="primary">添加成员</el-button>
<el-button>批量导入/导出</el-button>
<el-button type="danger" plain>批量删除</el-button>
<el-button class="J_show-children"><el-checkbox class="m-r-10" v-model="showChildMember"></el-checkbox><a class="a-href">显示子成员</a></el-button>
</div>
<el-table
:data="employeeList">
<el-table-column
type="selection"
width="42">
</el-table-column>
<el-table-column
label="姓名"
prop="name"
></el-table-column>
<el-table-column
label="手机号"
prop="phoneNumber"
></el-table-column>
<el-table-column
label="职位"
prop="positionName"
></el-table-column>
<el-table-column
label="状态"
>
<template slot-scope="scope">
<div class="status-icon" :class="scope.row.activationStatus == 1 ? 'is-active' : ''">
<i class="iconfont icon-shouji"></i>
</div>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[100, 200, 300, 400]"
:page-size="pageSize"
:current-page="currentPage"
layout="total, sizes, prev, pager, next"
:total="total">
</el-pagination>
</div>
</div>
</div>
</template>
<script>
......@@ -9,11 +66,126 @@
name: "administrativeEstrutura",
components: {
searchMenu
},
data() {
return {
showChildMember: false,
pageSize: 100,
currentPage: 1,
total: 0,
employeeList: [
{
employeeClerkId: 222,
name: "陈景良",
phoneNumber: "13777800255",
isManager: 0,
positionName: "HRM",
sort: 1,
activationStatus: 1,
userId: 111,
departmentId: "hr001",
hireDate: "2018-12-12"
},
{
employeeClerkId: 223,
name: "陈景良2",
phoneNumber: "13777800256",
isManager: 0,
positionName: "HRM",
sort: 2,
activationStatus: 0,
userId: 112,
departmentId: "hr002",
hireDate: "2018-12-12"
},
{
employeeClerkId: 224,
name: "陈景良3",
phoneNumber: "13777800257",
isManager: 0,
positionName: "HRM",
sort: 3,
activationStatus: 1,
userId: 113,
departmentId: "hr003",
hireDate: "2018-12-12"
}
]
};
},
methods: {
handleSizeChange() {},
handleCurrentChange() {},
/**
* 树形菜单搜索
*/
handleSearchKey(key) {
console.log(key, "searchKey");
},
/**
* 树形菜单选择项处理
*/
handleTreeSelection(obj, node) {
console.log(obj, node, "selection");
}
}
};
</script>
<style lang="scss">
.administrative-estrutura-container {
display: flex;
.af-right-container {
height: 690px;
background: #fff;
flex: 1;
padding: 0 24px;
.af-right-header {
height: 70px;
line-height: 70px;
font-weight: 400;
font-size: 14px;
color: #606266;
.title-span {
color: #303133;
font-size: 20px;
}
.handle-area {
float: right;
.hurdle {
width:1px;
height:16px;
display: inline-block;
background: #DCDFE6;
margin: 0 10px;
vertical-align: sub;
}
}
}
.af-right-button-box {
padding: 8px 15px;
background: #EBEEF5;
}
.pagination {
margin-top: 30px;
text-align: right;
}
.status-icon {
width: 34px;
height: 32px;
line-height: 32px;
text-align: center;
background: #ECF5FF;
border: 1px solid #D9ECFF;
border-radius: 4px;
&.is-active {
.iconfont {
color: #409EFF;
}
}
}
}
}
</style>
static/css/public.css
......@@ -134,6 +134,11 @@ a {
-webkit-backface-visibility: hidden;
}
.a-href {
color: #409EFF;
cursor: pointer;
}
li {
list-style: none;
}
......@@ -330,6 +335,9 @@ input:focus {
.m-t-30 {
margin-top: 30px;
}
.m-r-10 {
margin-right: 10px;
}
.font-0 .el-form-item__content, .dialog-footer {
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