Commit 0cc6a090 by xiaohai

stay up

parent 2adc37ab
<template>
<div>
<el-table
ref="clerkViewTable"
class="diy-table"
height="445"
:data="tableData">
<el-table-column
type="selection"
width="42"
></el-table-column>
<el-table-column
label="门店"
width="175"
prop="employeeStoreName"
></el-table-column>
<el-table-column
label="门店code"
prop="storeCode"
width="175"
></el-table-column>
<el-table-column>
<template slot="header" slot-scope="scope">
<ul class="diy-header">
<li class="name">姓名</li>
<li class="phone">手机号</li>
<li class="position">职位</li>
<li class="status">状态</li>
</ul>
</template>
<template slot-scope="scope">
<ul>
<li v-for="clerk in scope.row.ext.store.ext.employeeClerkList" :key="clerk.employeeClerkId" class="clerk-obj-li">
<div class="clerk-name clerk-cell">{{clerk.name}}</div>
<div class="clerk-cell clerk-phone">{{clerk.phoneNumber}}</div>
<div class="clerk-cell clerk-position">{{clerk.positionName}}</div>
<div class="clerk-cell clerk-status">
<div class="status-icon" :class="clerk.activationStatus == 1 ? 'is-active' : ''">
<i class="iconfont icon-shouji"></i>
</div>
</div>
</li>
</ul>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default {
name: "clerkView",
props: {
tableData: {
type: Array,
default() {
return [];
}
}
},
data() {
return {
storeType: 0,
typeArr: ["全部类型", "自营", "联营", "代理(加盟)", "代销", "托管"],
storeStatus:"",
showChildMember: false
};
},
methods: {
},
mounted() {
let list = this.tableData;
list.forEach(store => {
store.storeCode = store.ext.store.storeCode;
});
},
watch: {
tableData(table) {
table.forEach(store => {
store.storeCode = store.ext.store.storeCode;
});
}
}
};
</script>
<style lang="scss">
.diy-table {
.diy-header {
display: flex;
.name {
width: 130px;
}
.phone, .position {
width: 125px;
}
.status {
width: 100px;
}
}
.clerk-obj-li {
display: flex;
padding: 10px 0;
margin-bottom: 25px;
line-height: 32px;
&:last-child {
margin-bottom: 0;
}
.clerk-name {
width: 130px;
.manager {
display: inline-block;
width: 30px;
height: 15px;
line-height: 16px;
vertical-align: middle;
text-align: center;
background:rgba(247,203,39,1);
border-radius:2px;
color: #fff;
font-size: 10px;
}
}
.clerk-phone, .clerk-position {
width: 125px;
}
.clerk-status {
width: 100px;
.status-icon {
width: 34px;
height: 32px;
line-height: 32px;
text-align: center;
background: #ECF5FF;
border: 1px solid #D9ECFF;
border-radius: 4px;
&.is-active {
color: #409EFF;
}
}
}
}
}
</style>
......@@ -5,38 +5,23 @@
@selection-change="selectMember"
@row-click="linkToDetail"
:data="tableData">
<template v-for="prop in headList">
<el-table-column
:key="prop"
v-if="prop == 'selection'"
type="selection"
width="42">
</el-table-column>
<el-table-column
:key="prop"
v-if="prop == 'name'"
label="姓名"
>
<template slot-scope="scope">
<span>{{scope.row.name}}</span>
<span v-if="scope.row.isManager == 1" class="is-manager">部门负责人</span>
</template>
</el-table-column>
prop="name"
></el-table-column>
<el-table-column
:key="prop"
v-if="prop == 'phoneNumber'"
label="手机号"
prop="phoneNumber"
></el-table-column>
<el-table-column
:key="prop"
v-if="prop == 'positionName'"
label="职位"
prop="positionName"
></el-table-column>
<el-table-column
:key="prop"
v-if="prop == 'activationStatus'"
label="状态"
>
<template slot-scope="scope">
......@@ -45,7 +30,6 @@
</div>
</template>
</el-table-column>
</template>
</el-table>
</div>
</template>
......@@ -62,10 +46,15 @@ export default {
headList: {
type: Array,
default() {
return ["name", "phoneNumber", "positionName", "activationStatus"];
return ["selection", "name", "phoneNumber", "positionName", "activationStatus"];
}
}
},
data() {
return {
tableData: []
};
},
methods: {
/**
* table选择员工
......@@ -81,14 +70,12 @@ export default {
window.location.href = "#/employee?employeeClerkId="+row.employeeClerkId;
}
},
computed: {
tableData() {
mounted() {
let arr = [];
this.employeeList.forEach(clerk => {
arr.push(clerk.ext.employeeClerk);
});
return arr;
}
this.tableData = arr;
}
};
</script>
......
<template>
<div class="guid-div">
<div class="guid">
<p class="title">共享通讯录操作引导</p>
<div class="flex-div">
<div class="step">
<img src="../../../assets/guid1.png">
<p>点击建立共享企业,下载二维码 发给所要建立共享的企业</p>
</div>
<div class="step">
<img src="../../../assets/guid2.png">
<p>从企业通讯录中添加对方可见我方 企业的成员及门店</p>
</div>
<div class="step">
<img src="../../../assets/guid3.png">
<p>添加完成之后必须点击发布,所添加或 修改的信息才会同步至对方共享通讯录中</p>
</div>
</div>
</div>
<div class="guid">
<p class="des">应用场景</p>
<p class="des">适用于集团公司与子公司建立通讯录部分成员共享机制</p>
<p class="des">适用于总部与代理商、加盟商建立通讯录部分成员共享机制</p>
</div>
<div style="text-align: center;margin-top:50px;">
<a href="#/shareCode">
<el-button type="primary">建立共享企业</el-button>
</a>
</div>
</div>
</template>
<style lang="scss">
.guid-div {
width: 100%;
height:690px;
box-sizing: border-box;
background:rgba(255,255,255,1);
border-radius:2px;
padding: 30px;
.guid {
width:100%;
box-sizing: border-box;
background:rgba(255,255,255,1);
border:1px solid rgba(235,238,245,1);
border-radius:4px;
padding: 30px;
margin-bottom: 24px;
font-size:14px;
color:rgba(96,98,102,1);
.des {
text-align: center;
margin-bottom: 30px;
&:first-child {
font-size: 16px;
margin-bottom: 44px;
}
}
.title {
font-size:16px;
font-weight:500;
color:rgba(48,49,51,1);
margin-bottom: 50px;
text-align: center;
}
.flex-div {
display: flex;
.step {
flex: 1;
text-align: center;
height: 200px;
img {
height: 96px;
}
p {
width:260px;
height:34px;
line-height:24px;
margin: 40px auto 0;
}
}
}
}
}
</style>
<template>
<div class="searh-menu-container">
<div class="p-0-15">
<el-input prefix-icon="el-icon-search" v-model="searchKey" placeholder="姓名/手机号/部门名称" clearable @clear="clearFn" @keyup.enter.native="searchFn"></el-input>
<slot name="buttonBox"></slot>
</div>
<p class="share-title">我方共享给对方的所有人员</p>
<div class="p-0-15">
<el-tree
v-if="!searchResultShow"
class="search-menu"
node-key="id"
:default-expanded-keys="defaultOpen"
:data="menuDataMine"
:highlight-current="true"
:expand-on-click-node="false"
:props="myProps"
@node-click="handleNodeClick">
<span class="custom-tree-node" slot-scope="{ node, data }">
<i class="iconfont" :class="node.level == 1 ? 'icon-2zuzhijiagou' : 'icon-tongshi-zuzhijiagou'"></i>
<span>{{ node.label }}</span>
</span>
</el-tree>
</div>
<p class="share-title">对方共享给我方的所有人员<i class="el-icon-upload"></i></p>
<div class="p-0-15">
<el-tree
v-if="!searchResultShow"
class="search-menu"
node-key="id"
:default-expanded-keys="defaultOpen"
:data="menuData"
:highlight-current="true"
:expand-on-click-node="false"
:props="myProps"
@node-click="handleNodeClick">
<span class="custom-tree-node" slot-scope="{ node, data }">
<i class="iconfont" :class="node.level == 1 ? 'icon-2zuzhijiagou' : 'icon-tongshi-zuzhijiagou'"></i>
<span>{{ node.label }}</span>
</span>
</el-tree>
</div>
<div class="search-result-container m-t-15" v-if="searchResultShow">
<template v-if="storeFrame">
<template v-for="(brand, index) in brandList" v-if="brand.departmentList.length > 0 || brand.storeList.length > 0 || brand.searchList.length > 0">
<div :key="brand.topDepartment.brandId + '_' + index">
<p class="brand-title">{{brand.topDepartment.name}}</p>
<ul class="search-result-ul" v-if="brand.departmentList.length > 0">
<p class="title store-frame-title">分组列表</p>
<li class="group-item items" v-for="(department, index) in brand.departmentList" :key="index+'_'+department.groupId" @click="handleNodeClick(department)">
<i class="iconfont icon-tongshi-zuzhijiagou"></i>
{{department.name}}
</li>
</ul>
<ul class="search-result-ul" v-if="brand.storeList.length > 0">
<p class="title store-frame-title">门店列表</p>
<li class="group-item items" v-for="(store, index) in brand.storeList" :key="index+'_'+store.storeGroupId" @click="handleStoreClick(store)">
<i class="iconfont icon-tongshi-zuzhijiagou"></i>
{{store.storeName}}
</li>
</ul>
<ul class="search-result-ul" v-if="brand.searchList.length > 0">
<p class="title store-frame-title">人员列表</p>
<li class="person-item items" v-for="(employee, index) in brand.searchList" :key="index+'_'+employee.employeeClerkId" @click="selectEmployee(employee)">
<i class="iconfont icon-chengyuan"></i>
{{employee.name}}
<span class="from-group">{{employee.departmentName}}</span>
</li>
</ul>
</div>
</template>
<p class="no-data-tip" v-if="brandList.length < 1">暂无数据</p>
</template>
<template v-else>
<ul class="search-result-ul" v-if="departmentList.length > 0">
<p class="title">部门列表</p>
<li class="group-item items" v-for="(department, index) in departmentList" :key="index+'_'+department.groupId" @click="handleNodeClick(department)">
<i class="iconfont icon-tongshi-zuzhijiagou"></i>
{{department.name}}
</li>
</ul>
<ul class="search-result-ul" v-if="employeeList.length > 0">
<p class="title">人员列表</p>
<li class="person-item items" v-for="(employee, index) in employeeList" :key="index+'_'+employee.employeeClerkId" @click="selectEmployee(employee)">
<i class="iconfont icon-chengyuan"></i>
{{employee.name}}
<span class="from-group">{{employee.departmentName}}</span>
</li>
</ul>
<p class="no-data-tip" v-if="departmentList.length < 1 && employeeList.length < 1">暂无数据</p>
</template>
</div>
</div>
</template>
<script>
import { formatTreeData } from '@/utils/index';
export default {
name: "searchMenu",
components: {},
props: {
treeData: {
type: Array,
required: true
},
searchResult: {
type: Object,
required: true
},
storeFrame: {
type: Boolean,
default: false
}
},
data() {
return {
searchKey: "",
searchResultShow: false,
myProps: {
children: 'childrens',
label: 'label',
disabled: "disabled"
},
menuData: [],
menuDataMine: [],
defaultOpen: []
};
},
methods: {
/**
* 格式化树形菜单数据
*/
formatGroupData(treeData) {
let _this = this;
let data = [].concat(JSON.parse(JSON.stringify(treeData)));
let copyData = data.slice(0);
let userInfo = window.localStorage.getItem("userInfo");
let enterpriseId = JSON.parse(userInfo).enterpriseId;
data.forEach(group => {
group.allClerks = null;
group.childrens = null;
group.label = group.name || "";
group.id = group.groupId || "";
let arr = [];
copyData.forEach(cG => {
cG.label = cG.name || "";
cG.id = cG.groupId || "";
if (cG.enterpriseId == enterpriseId) {
cG["isMine"] = 1;
} else {
cG["isMine"] = 0;
}
if (cG.parentId == group.groupId) {
arr.push(cG);
}
});
if (arr.length > 0) group.childrens = arr;
if (group.level == 0) {
_this.defaultOpen.push(group.id);
if (group.enterpriseId == enterpriseId) {
group["isMine"] = 1;
_this.menuDataMine.push(group);
} else {
group["isMine"] = 0;
_this.menuData.push(group);
}
}
});
// this.menuData = data;
},
/**
* 清楚输入框
*/
clearFn() {
this.searchResultShow = false;
},
/**
* 关键字搜索
*/
searchFn() {
if (this.searchKey == "") {
this.searchResultShow = false;
return false;
}
this.searchResultShow = true;
this.$emit("handleSearchKey", this.searchKey);
},
/**
* 树形菜单选择
*/
handleNodeClick(obj, node) {
this.$emit("handleTreeSelection", obj, node, 'node');
},
/**
* 搜索结果中选人
*/
selectEmployee(person) {
this.$emit("handleEmployeeSelection", person, 'employee');
},
/**
* 搜索结果中选门店
*/
handleStoreClick(store) {
this.$emit("handleStoreSelection", store, 'store');
}
},
filter: {},
computed: {
employeeList() {
if (this.searchResult.searchList) {
return this.searchResult.searchList;
} else {
return [];
}
},
departmentList() {
if (this.searchResult.departmentList) {
return this.searchResult.departmentList;
} else {
return [];
}
},
brandList() {
if (this.searchResult.brandList) {
return this.searchResult.brandList;
} else {
return [];
}
}
},
watch: {
treeData(newArr, old) {
this.formatGroupData(newArr);
// this.defaultOpen = obj.defaultOpen;
// this.menuData = obj.menuArr;
}
},
mounted() {
this.formatGroupData(this.treeData);
}
};
</script>
<style lang="scss">
.searh-menu-container {
overflow-y: auto;
overflow-x: auto;
width: 260px;
background: #eef1f8;
height: 690px;
padding: 20px 0;
box-sizing: border-box;
.p-0-15 {
padding: 0 15px;
}
.share-title {
padding: 0 15px;
margin-top: 24px;
height:36px;
line-height: 36px;
background:rgba(228,231,237,1);
font-size:12px;
font-weight:400;
color:rgba(96,98,102,1);
i {
float: right;
color: #409EFF;
font-size: 16px;
margin-top: 10px;
}
}
.no-data-tip {
text-align: center;
margin-top: 50px;
color: #5b6a80;
}
.slot-button {
text-align: center;
margin-top: 20px;
.el-icon-question {
color: #C0C4CC;
cursor: pointer;
}
}
.search-menu {
margin-top: 20px;
color: #606266;
font-size: 14px;
background: #EEF1F8;
min-width: 100%;
display:inline-block !important;
.el-tree-node {
.el-tree-node__content {
height: 36px;
.iconfont {
color: #409EFF;
margin-right: 5px;
}
&:hover {
color: #fff;
background: #409EFF;
.iconfont {
color: #fff;
}
}
}
}
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background: #409EFF;
color: #fff;
.iconfont {
color: #fff;
}
}
.brand-title {
padding: 15px;
color: #303133;
}
.search-result-ul {
font-size: 14px;
color: #606266;
.title {
padding: 15px;
color: #303133;
&.store-frame-title {
background:rgba(228,231,237,1);
}
}
li.items {
padding: 15px;
background: #fff;
box-sizing: border-box;
border-bottom: 1px solid #E4E7ED;
cursor: pointer;
.iconfont {
color: #409EFF;
}
.from-group {
float: right;
}
&:hover {
background: #409EFF;
color: #fff;
.iconfont {
color: #fff;
}
}
}
}
}
</style>
<template>
<div>
<div class="sf-right-button-box">
<div class="sf-right-button-box common-right-button-box">
<el-select v-model="storeType" @change="selectByType" size="small">
<el-option
v-for="(type, index) in typeArr"
......
<template>
<div>
<div class="sf-right-button-box">
<div class="common-right-button-box">
<a href="#/storeInfo">
<el-button type="primary">添加门店</el-button>
</a>
......
<template>
<div class="administrative-estrutura-container">
<div class="administrative-estrutura-container common-frame-container">
<search-menu
@handleSearchKey="handleSearchKey"
@handleTreeSelection="handleTreeSelection"
......@@ -8,10 +8,10 @@
@handleEmployeeSelection="handleEmployeeSelection">
</search-menu>
<employee-info v-if="showEmployee == 'employee'" :info="selectedEmployee"></employee-info>
<div class="af-right-container"
<div class="af-right-container common-right-container"
v-loading="loading"
v-else>
<div class="af-right-header">
<div class="af-right-header common-right-header">
<span class="title-span">{{groupInfo.groupName}}{{total}}人)</span>
<span class="id-span">部门ID: {{groupInfo.departmentId}}</span>
<span class="handle-area">
......@@ -20,7 +20,7 @@
<el-button @click="goToEdit(groupInfo.level)" :href="'#/addGroup?groupId='+groupInfo.departmentId" :disabled="groupInfo.hasPression != 1" class="no-bdr-btn">编辑</el-button>
</span>
</div>
<div class="af-right-button-box">
<div class="af-right-button-box common-right-button-box">
<a :href="'#/employee?addnew=1&departmentId='+groupInfo.departmentId">
<el-button type="primary">添加成员</el-button>
</a>
......
<template>
<div class="administrative-estrutura-container">
<template v-if="menuData.length > 0">
<search-menu
@handleSearchKey="handleSearchKey"
@handleTreeSelection="handleTreeSelection"
......@@ -10,22 +11,39 @@
<employee-info v-if="showEmployee == 'employee'" :info="selectedEmployee"></employee-info>
<div class="af-right-container"
v-loading="loading"
v-else>
v-else-if="groupInfo.isStoreGroup != 1 && groupInfo.level !=0">
<div class="af-right-header">
<span class="title-span">{{groupInfo.groupName}}{{total}}人)</span>
<span class="id-span">部门ID: {{groupInfo.departmentId}}</span>
<span class="handle-area">
<span class="title-span">{{groupInfo.groupName}}{{total}}人)<span class="not-show-app">本企业通讯录APP中不展示</span></span>
<template v-if="!!groupInfo.isMine">
<span class="handle-area" v-if="groupInfo.isStoreGroup == 1">
<a class="a-href" :href="'#/addGroup?addnew=1&groupId='+groupInfo.departmentId">添加子分组</a>
<span class="hurdle"></span>
<a class="a-href" :href="'#/addGroup?groupId='+groupInfo.departmentId">编辑</a>
</span>
<span class="handle-area" v-else>
<a :href="'#/addDepartment?addnew=1&departmentId='+groupInfo.departmentId" class="J_add-child a-href">添加子部门</a>
<template v-if="groupInfo.level != 0">
<span class="hurdle"></span>
<a :href="'#/addDepartment?departmentId='+groupInfo.departmentId" class="J_edit a-href">编辑</a>
</template>
</span>
</template>
</div>
<div class="af-right-button-box">
<template v-if="!!groupInfo.isMine">
<a href="#/storeInfo" v-if="groupInfo.isStoreGroup == 1">
<el-button type="primary">添加门店</el-button>
</a>
<a v-else :href="'#/employee?addnew=1&departmentId='+groupInfo.departmentId">
<el-button type="primary">添加成员</el-button>
</a>
<el-button type="danger" plain @click="delMembers" :disabled="disabledDel">批量删除</el-button>
</template>
<el-button class="J_show-children"><el-checkbox class="m-r-10" v-model="showChildMember" @change="setChildMemberShow"></el-checkbox><a class="a-href">显示子成员</a></el-button>
</div>
<employee-list :employeeList="employeeList" @selectMember="selectMember"></employee-list>
<clerk-view v-if="groupInfo.isStoreGroup == 1" :tableData="employeeList"></clerk-view>
<employee-list v-else :employeeList="employeeList" @selectMember="selectMember"></employee-list>
<div class="pagination">
<el-pagination
background
......@@ -39,19 +57,34 @@
</el-pagination>
</div>
</div>
<div class="af-right-container" v-else-if="groupInfo.isStoreGroup == 1 && groupInfo.level ==0">
<p>共享门店及成员数据</p>
<el-checkbox-group v-model="checkList">
<el-checkbox label="sale">销售数据</el-checkbox>
<el-checkbox label="vip">会员数据</el-checkbox>
</el-checkbox-group>
</div>
</template>
<template v-else>
<guid-div></guid-div>
</template>
</div>
</template>
<script>
import searchMenu from "components/contacts/searchMenu";
import searchMenu from "components/contacts/share/searchMenu";
import employeeInfo from "components/contacts/employeeInfo";
import employeeList from "components/contacts/share/employeeList";
import clerkView from "components/contacts/share/clerkView";
import guidDiv from "components/contacts/share/guid";
import { getRequest, postRequest, postJsonRequest, postJson } from '@/api/api';
export default {
name: "administrativeEstrutura",
name: "shareContact",
components: {
searchMenu,
employeeInfo,
employeeList
employeeList,
guidDiv,
clerkView
},
data() {
return {
......@@ -70,15 +103,19 @@
employeeList: [],
searchResult: {},
showEmployee: false,
selectedEmployee: {}
selectedEmployee: {},
checkList: []
};
},
created() {},
beforeMount() {
this.getGroupData();
this.getEmployee();
// this.getEmployee();
},
methods: {
addSon() {
location.href = '#/addGroup?addnew=1&groupId='+this.groupInfo.departmentId;
},
handleSizeChange(val) {
this.pageSize = val;
this.getEmployee();
......@@ -111,6 +148,7 @@
*/
handleTreeSelection(obj, node, showEmployee) {
console.log(obj, node, "selection");
this.groupInfo = obj;
this.groupInfo.departmentId = obj.groupId;
this.groupInfo.groupName = obj.name;
this.showEmployee = showEmployee;
......@@ -208,7 +246,6 @@
sharedContactGroupId: _this.groupInfo.departmentId,
findChildren: _this.showChildMember,
};
// params = JSON.stringify(params);
postJson("/haoban-manage-web/shared-contact/find-shared-member", params)
.then(res => {
console.log(res, "menmers");
......@@ -216,7 +253,7 @@
let total = 0;
if (res.data.errorCode == 1) {
list = res.data.result.list || [];
total = res.data.result.total || 0;
total = res.data.result.pageInfo.total || 0;
}
_this.employeeList = list;
_this.total = total;
......@@ -252,6 +289,10 @@
.title-span {
color: #303133;
font-size: 20px;
.not-show-app {
font-size:14px;
color:rgba(144,147,153,1);
}
}
.handle-area {
float: right;
......
<template>
<div class="store-estrutura-container">
<div class="store-estrutura-container common-frame-container">
<search-menu
ref="searchMenu"
:storeFrame="true"
......@@ -24,10 +24,10 @@
</search-menu>
<clerk-info v-if="showEmployee == 'employee'" :clerkInfo="selectedEmployee"></clerk-info>
<store-info ref="store_info" v-else-if="showEmployee == 'store'" :storeInfo="storeInfo"></store-info>
<div class="sf-right-container"
<div class="sf-right-container common-right-container"
v-else
v-loading="loading">
<div class="sf-right-header">
<div class="sf-right-header common-right-header">
<span class="title-span">{{groupInfo.groupName}}({{total}}家)</span>
<span class="id-span">部门ID: {{groupInfo.departmentId}}</span>
<span class="handle-area">
......@@ -312,17 +312,4 @@ export default {
}
};
</script>
<style lang="scss">
.handle-area {
.no-bdr-btn {
background: none;
color: #409EFF;
border: none;
}
.el-button.is-disabled, .el-button.is-disabled:hover, .el-button.is-disabled:focus {
background: none;
color: #c0c4cc;
}
}
</style>
......@@ -32,14 +32,14 @@
}*/
}
.store-estrutura-container {
.common-frame-container {
display: flex;
.sf-right-container {
.common-right-container {
height: 690px;
background: #fff;
flex: 1;
padding: 0 24px;
.sf-right-header {
.common-right-header {
height: 70px;
line-height: 70px;
font-weight: 400;
......@@ -59,12 +59,21 @@
margin: 0 10px;
vertical-align: sub;
}
.no-bdr-btn {
background: none;
color: #409EFF;
border: none;
}
.el-button.is-disabled, .el-button.is-disabled:hover, .el-button.is-disabled:focus {
background: none;
color: #c0c4cc;
}
}
}
.tab-div {
margin-bottom: 20px;
}
.sf-right-button-box {
.common-right-button-box {
padding: 8px 15px;
background: #EBEEF5;
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