Skip to content

O
office-web
Commit 7a56bc8b by xiaohai
Options

门店架构

parent 78b2ad9b
Showing with 600 additions and 123 deletions
src/components/contacts/employeeInfo.vue
<template>
<div class="employee-info">
<p class="title">员工信息</p>
<el-form
class="employee-info-form"
label-width="70px"
>
<el-form-item label="姓名" prop="name">
<el-input v-model="info.name"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phoneNumber">
<el-input v-model="info.phoneNumber"></el-input>
</el-form-item>
<el-form-item label="部门" prop="departmentName">
<el-input v-model="info.departmentName"></el-input>
</el-form-item>
<el-form-item label="职位" prop="positionName">
<el-input v-model="info.positionName"></el-input>
</el-form-item>
</el-form>
<div class="info-cell">
<p class="title">员工信息</p>
<el-form
class="employee-info-form"
label-width="70px"
>
<el-form-item label="姓名" prop="name">
<el-input v-model="info.name"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phoneNumber">
<el-input v-model="info.phoneNumber"></el-input>
</el-form-item>
<el-form-item label="部门" prop="departmentName">
<el-input v-model="info.departmentName"></el-input>
</el-form-item>
<el-form-item label="职位" prop="positionName">
<el-input v-model="info.positionName"></el-input>
</el-form-item>
</el-form>
</div>
<div class="info-cell">
<p class="title">隐私设置</p>
<p class="tip">开启后所有员工不可见手机号码，不可发起电话、短信管理层之间不受影响</p>
<div class="set-manager-mode">
管理层模式
<el-switch
v-model="info.managerMode"
@change="switchManagerMode"
active-color="#409EFF"
inactive-color="#DCDFE6">
</el-switch>
</div>
</div>
</div>
</template>
<script>
......@@ -37,22 +52,42 @@
departmentName: ""
}
};
},
methods: {
switchManagerMode() {
console.log(this.info.managerMode);
}
}
};
</script>
<style lang="scss">
.employee-info {
width: 100%;
background: #fff;
>.title {
line-height: 55px;
text-indent: 32px;
border-bottom: 1px solid #E4E7ED;
}
.employee-info-form {
padding: 24px 60px;
.el-input {
width: 380px;
flex: 1;
.info-cell {
margin-bottom: 24px;
background: #fff;
padding-bottom: 24px;
>.title {
line-height: 55px;
text-indent: 32px;
border-bottom: 1px solid #E4E7ED;
}
.tip {
color: #909399;
text-indent: 32px;
font-size: 14px;
margin-top: 24px;
}
.set-manager-mode {
text-indent: 52px;
color: #606266;
margin-top: 35px;
}
.employee-info-form {
padding: 24px 60px 0;
.el-input {
width: 380px;
}
}
}
}
......
src/components/contacts/employeeList.vue 0 → 100644
<template>
<div class="employee-table">
<el-table
height="495"
@selection-change="selectMember"
@row-click="linkToDetail"
:data="employeeList">
<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>
<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">
<div class="status-icon" :class="scope.row.activationStatus == 1 ? 'is-active' : ''">
<i class="iconfont icon-shouji"></i>
</div>
</template>
</el-table-column>
</template>
</el-table>
</div>
</template>
<script>
export default {
name: "employee-table",
props: {
employeeList: {
type: Array,
default() {
return [];
}
},
headList: {
type: Array,
default() {
return ["selection", "name", "phoneNumber", "positionName", "activationStatus"];
}
}
},
methods: {
/**
* table选择员工
*/
selectMember(selection) {
this.$emit("selectMember", selection);
},
/**
* 跳转至员工详情
*/
linkToDetail(row) {
console.log(row);
window.open("#/employee?employeeClerkId="+row.employeeClerkId);
}
}
};
</script>
<style lang="scss">
.el-table .cell .is-manager {
display: inline-block;
font-size: 10px;
color: #fff;
width:56px;
height:13px;
text-align: center;
line-height: 15px;
background:rgba(247,203,39,1);
border-radius:2px;
}
.el-table tr {
cursor: pointer;
}
</style>
src/components/contacts/permissionSet/permissionSetting.vue 0 → 100644
<template>
<div class="jurisdiction-setting">
<div class="only-visivble-there permission-div">
本部门员工仅可见本部门员工
<el-switch
v-model="visibleThere"
@change="switchPermission(visibleThere, 'visibleThere', 'visibleSelf')"
active-color="#409EFF"
inactive-color="#DCDFE6">
</el-switch>
<div class="particular-setting" v-if="visibleThere">
<!-- <div>
<div class="setting-name">
个别员工不设置该权限
<a class="J_add a-href"><i class="el-icon-plus"></i>添加</a>
<a class="a-href J_check-detail">查看详情</a>
</div>
<ul class="particular-list">
<li class="item person-item" v-for="(li, index) in visibleApartList" :key="index+'_'+li.employeeClerkId" v-if="index < 14">
<img :src="li.headPic">
<p class="name">{{li.name}}</p>
<i class="el-icon-circle-close" @click="delCurrent(li, 'vaList')"></i>
</li>
</ul>
<p class="check-more" v-if="vsList.length > 14">查看更多</p>
<div class="setting-name">
允许指定部门/人员可见
<a class="J_add a-href"><i class="el-icon-plus"></i>添加</a>
<a class="a-href J_check-detail">查看详情</a>
</div>
<ul class="particular-list">
<li class="item person-item" v-for="(li, index) in visibleSpecialLsit" :key="index+'_'+li.employeeClerkId" v-if="index < 14">
<img :src="li.headPic">
<p class="name">{{index}}{{li.name}}</p>
<i class="el-icon-circle-close" @click="delCurrent(li, 'vsList')"></i>
</li>
</ul>
<p class="check-more" v-if="vsList.length > 14">查看更多</p>
</div> -->
<select-area></select-area>
</div>
</div>
<div class="only-visivble-self permission-div">
本部门员工仅可见自己
<el-switch
v-model="visibleSelf"
@change="switchPermission(visibleSelf, 'visibleSelf', 'visibleThere')"
active-color="#409EFF"
inactive-color="#DCDFE6">
</el-switch>
</div>
</div>
</template>
<script>
import selectArea from "components/contacts/permissionSet/selectArea";
export default {
name: "permissionSetting",
components: {
selectArea
},
props: {
visibleApartList: {
type: Array,
default() {
return [];
}
},
visibleSpecialLsit: {
type: Array,
default() {
return [];
}
},
onlySelfApartList: {
type: Array,
default() {
return [];
}
}
},
data() {
return {
visibleThere: false,
visibleSelf: false
};
},
methods: {
/**
* 切换权限设置
*/
switchPermission(val, _this, _there) {
val && (this[_there] = !val);
}
},
computed: {
vaList() {
return this.visibleApartList;
},
vsList() {
return this.visibleSpecialLsit;
},
osaList() {
return this.onlySelfApartList;
}
}
};
</script>
<style lang="scss">
.jurisdiction-setting {
padding: 36px 32px 55px;
.permission-div {
margin-bottom: 30px;
.particular-setting {
width: 480px;
min-height: 300px;
border-radius: 2px;
background: #F5F7FA;
margin: 32px 0;
padding: 20px 20px 1px;
}
}
}
</style>
src/utils/index.js
......@@ -261,3 +261,12 @@ export function deepClone(source) {
})
return targetObj
}
export function deepCopy(obj) {
var o = obj.constructor === Array ? [] : {};
for (let i in obj) {
if (obj.hasOwnProperty(i)) {
o[i] = typeof obj[i] === "object" ? deepCopy(obj[i]) : obj[i];
}
}
return o;
}
src/views/contacts/administrativeFrame.vue
<template>
<div class="administrative-estrutura-container">
<search-menu @handleSearchKey="handleSearchKey" @handleTreeSelection="handleTreeSelection" :treeData="menuData" :searchResult="searchResult" @handleEmployeeSelection="handleEmployeeSelection"></search-menu>
<search-menu
@handleSearchKey="handleSearchKey"
@handleTreeSelection="handleTreeSelection"
:treeData="menuData"
:searchResult="searchResult"
@handleEmployeeSelection="handleEmployeeSelection">
</search-menu>
<employee-info v-if="showEmployee" :info="selectedEmployee"></employee-info>
<div class="af-right-container" v-else>
<div class="af-right-container"
v-loading="loading"
v-else>
<div class="af-right-header">
<span class="title-span">{{groupInfo.groupName}}（{{total}}人）</span>
<span class="id-span">部门ID： {{groupInfo.departmentId}}</span>
......@@ -18,41 +26,7 @@
<el-button type="danger" plain @click="delMembers" :disabled="disabledDel">批量删除</el-button>
<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>
<el-table
height="495"
v-loading="loading"
@selection-change="selectMember"
:data="employeeList">
<el-table-column
type="selection"
width="42">
</el-table-column>
<el-table-column
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>
<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>
<employee-list :employeeList="employeeList" @selectMember="selectMember"></employee-list>
<div class="pagination">
<el-pagination
background
......@@ -71,12 +45,14 @@
<script>
import searchMenu from "components/contacts/searchMenu";
import employeeInfo from "components/contacts/employeeInfo";
import employeeList from "components/contacts/employeeList";
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default {
name: "administrativeEstrutura",
components: {
searchMenu,
employeeInfo
employeeInfo,
employeeList
},
data() {
return {
......@@ -148,7 +124,6 @@
* table选择员工
*/
selectMember(selection) {
console.log(selection);
this.selectedList = selection;
},
/**
......@@ -199,12 +174,13 @@
};
getRequest("/haoban-manage-web/dept/deptListForCompany", params)
.then(res => {
_this.menuData = res.data.result;
res.data.result.forEach(li => {
_this.menuData = res.data.result || [];
res.data.result.some(li => {
if (li.level == 0) {
_this.groupInfo.departmentId = li.groupId;
_this.groupInfo.groupName = li.name;
}
return li.level == 0;
});
_this.getEmployee();
})
......@@ -232,6 +208,7 @@
})
.catch(e => {
console.log(e, "error");
_this.loading = false;
});
}
},
......@@ -295,17 +272,6 @@
}
}
}
.el-table .cell .is-manager {
display: inline-block;
font-size: 10px;
color: #fff;
width:56px;
height:13px;
text-align: center;
line-height: 15px;
background:rgba(247,203,39,1);
border-radius:2px;
}
}
</style>
......
src/views/contacts/employee.vue
<template>
<div class="employee-wrap">
</div>
<div class="employee-detail">
<employee-info :info="info"></employee-info>
<div class="btn-box">
<el-button @click="saveEmployeeInfo" type="primary">保存</el-button>
<el-button type="primary">保存并继续添加</el-button>
<el-button>取消</el-button>
</div>
</div>
</template>
<script>
import employeeInfo from "components/contacts/employeeInfo";
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default {
name: "employee",
data() {
return {
name: "employeeDetail",
components: {
employeeInfo
},
data() {
return {
info: {},
managerMode: false
};
},
methods: {
getEmployInfo() {
let that = this;
let params = {
id: that.$route.query.employeeClerkId
};
getRequest("/haoban-manage-web/emp/findOne", params)
.then(res => {
console.log(res, "employeeDetail");
that.info = res.data.result;
that.info.managerMode = !!res.data.result.managerMode;
})
.catch(e => {
console.log(e, "error");
});
},
saveEmployeeInfo() {
let that = this;
let info = that.info;
let params = {
name: info.name,
phoneNumber: info.phoneNumber,
positionName: info.positionName,
employeeClerkId: info.employeeClerkId,
managerMode: info.managerMode * 1
};
console.log(info, params);
getRequest("/haoban-manage-web/emp/update", params)
.then(res => {
console.log(res, "update result");
})
.catch(e => {
console.log(e, "error");
});
}
},
beforeMount() {
this.getEmployInfo();
}
},
computed: {
},
methods: {
},
mounted() {
},
}
};
</script>
<style lang="less" scoped>
<style lang="scss">
.employee-detail {
overflow: auto;
height: 460px;
.btn-box {
width: calc(100% - 200px);
padding: 12px 0;
background: #fff;
position: fixed;
bottom: 0;
right: 0;
text-align: center;
}
}
</style>
src/views/contacts/storeFrame.vue
<template>
<div class="storeFrame-wrap">
</div>
<div class="store-estrutura-container">
<search-menu
:treeData="menuData"
:searchResult="searchResult"
@handleSearchKey="handleSearchKey"
@handleTreeSelection="handleTreeSelection"
@handleEmployeeSelection="handleEmployeeSelection">
</search-menu>
<div class="sf-right-container"
v-loading="loading">
<div class="sf-right-header">
<span class="title-span">{{groupInfo.groupName}}（{{total}}家）</span>
<span class="id-span">部门ID： {{groupInfo.departmentId}}</span>
<span class="handle-area">
<a :href="'#/addDepartment?departmentId='+groupInfo.departmentId" target="_blank" class="J_add-child a-href">添加子部门</a>
<span class="hurdle"></span>
<a class="J_edit a-href">编辑</a>
</span>
</div>
<div class="sf-right-button-box">
<el-button type="primary">添加门店</el-button>
<a><el-button>批量导入/导出</el-button></a>
<el-button type="danger" plain @click="delStores" :disabled="disabledDel">批量删除</el-button>
<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>
<el-table
height="495"
:data="storeList"
@selection-change="selectMember"
@row-click="linkToDetail"
>
<el-table-column
type="selection"
width="42"
></el-table-column>
<el-table-column
label="门店"
prop="storeName"
></el-table-column>
<el-table-column
label="代码"
prop="storeCode"
width="80"
></el-table-column>
<el-table-column
label="类型"
prop="storeType"
width="50"
>
<template slot-scope="scope">
{{typeArr[scope.row.storeType]}}
</template>
</el-table-column>
<el-table-column
label="地区"
prop="areaChainName"
></el-table-column>
<el-table-column
label="所属分组"
prop="groupChainName"
></el-table-column>
<el-table-column
label="状态"
prop="status"
width="80"
>
<template slot-scope="scope">
{{statusArr[scope.row.status]}}
</template>
</el-table-column>
<el-table-column
label="操作"
>
<template slot-scope="scope">
<a class="a-href" @click="editStore(scope.row)">编辑</a>
<a class="a-href" @click="delStore(scope.row)">删除</a>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import searchMenu from "components/contacts/searchMenu";
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default {
name: "storeFrame",
data() {
return {
name: "storeEstruturaContainer",
components: {
searchMenu
},
data() {
return {
menuData: [],
searchResult: {},
loading: false,
groupInfo: {
groupName: "test",
departmentId: "0001"
},
total: 100,
showChildMember: false,
pageSize: 100,
pageNumber: 1,
showType: 1,
storeList: [],
typeArr: ["自营", "联营", "代理(加盟)", "代销", "托管"],
statusArr: ["待审核", "正常", "审核失败", "停业整顿", "回收站", "删除"]
};
},
methods: {
handleSearchKey() {},
handleTreeSelection() {},
handleEmployeeSelection() {},
editStore(store) {},
delStore(store) {},
getGroupData() {
let _this = this;
let params = {
isStoreGroup: 1
};
getRequest("/haoban-manage-web/dept/deptList", params)
.then(res => {
console.log(res, "groupData");
_this.menuData = res.data.result || [];
res.data.result.some(li => {
if (li.level == 0) {
_this.groupInfo.departmentId = li.groupId;
_this.groupInfo.groupName = li.name;
}
return li.level == 0;
});
_this.getStoreList();
})
.catch(e => {
console.log(e, "error");
});
},
getStoreList() {
let _this = this;
let params = {
departmentId: _this.groupInfo.departmentId,
showChild: _this.showChildMember * 1,
showType: _this.showType,
pageSize: _this.pageSize,
pageSize: _this.pageNumber,
status: 1
};
getRequest("/haoban-manage-web/store/findSimplePage", params)
.then(res => {
console.log(res, "storeList");
// _this.employeeList = res.data.result.list;
_this.total = res.data.result.total;
// _this.loading = false;
})
.catch(e => {
console.log(e, "error");
_this.loading = false;
});
},
/**
* 树形菜单选择项处理
*/
handleTreeSelection(obj, node) {
console.log(obj, node, "selection");
this.groupInfo.departmentId = obj.groupId;
this.groupInfo.groupName = obj.name;
this.getStoreList();
},
delStores() {},
selectMember() {},
linkToDetail() {}
},
beforeMount() {
this.getGroupData();
}
},
computed: {
},
methods: {
},
mounted() {
},
}
};
</script>
<style lang="less" scoped>
<style lang="scss">
.store-estrutura-container {
display: flex;
.sf-right-container {
height: 690px;
background: #fff;
flex: 1;
padding: 0 24px;
.sf-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;
}
}
}
.sf-right-button-box {
padding: 8px 15px;
background: #EBEEF5;
}
}
}
</style>
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