Skip to content

C
CRM
Commit d18f5969 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 96162b51
Show whitespace changes
Inline Side-by-side
Showing with 441 additions and 244 deletions
src/components/customerManage/customerConfiguration.vue
View file @ d18f5969
<style> <style>
@import '../../assets/css/customerManage.css'; @import '../../assets/css/customerManage.css';
.SelectedAccount_box{
.SelectedAccount_box {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.SelectedAccount{
.SelectedAccount {
margin: 5px; margin: 5px;
cursor: pointer; cursor: pointer;
} }
.sub-header div.active{
.sub-header div.active {
color: #409EFF; color: #409EFF;
border-bottom: 2px solid #409EFF; border-bottom: 2px solid #409EFF;
} }
.sub-header div{
.sub-header div {
padding: 20px 15px; padding: 20px 15px;
cursor: pointer; cursor: pointer;
} }
.sub-header{
.sub-header {
display: flex; display: flex;
padding: 0 20px; padding: 0 20px;
background-color: #fff; background-color: #fff;
} }
</style> </style>
<template> <template>
<div class="customerManage"> <div class="customerManage">
<div class="sub-header"> <div class="sub-header">
<div v-for="(item,index) in headerList" :key="index" <div v-for="(item,index) in headerList" :key="index" :class="selectTitle==item.id?'active':''"
:class="selectTitle==item.id?'active':''"
@click="clickTitle(item)">{{item.title}}</div> @click="clickTitle(item)">{{item.title}}</div>
</div> </div>
<!-- 客户来源 --> <!-- 客户来源 -->
<customerSource v-if="selectTitle==1"></customerSource> <customerSource v-if="selectTitle==1"></customerSource>
<!-- 分配规则 --> <!-- 分配规则 -->
<distributionRules v-if="selectTitle==2"></distributionRules> <distributionRules v-if="selectTitle==2"></distributionRules>
<!-- 排行统计配置 -->
<rankConfig v-if="selectTitle==3"></rankConfig>
</div> </div>
</template> </template>
<script> <script>
import customerSource from "./customerSource"; import customerSource from "./customerSource";
import distributionRules from "./distributionRules"; import distributionRules from "./distributionRules";
export default { import rankConfig from "./rankConfig";
export default {
components: { components: {
customerSource, customerSource,
distributionRules distributionRules,
rankConfig,
}, },
data() { data() {
return { return {
selectTitle:1, selectTitle: 1,
headerList:[ headerList: [{
{title:'客户来源',id:1}, title: '客户来源',
{title:'分配规则',id:2}, id: 1
},
{
title: '分配规则',
id: 2
},
{
title: '排行统计配置',
id: 3
},
] ]
}; };
}, },
...@@ -59,10 +76,9 @@ export default { ...@@ -59,10 +76,9 @@ export default {
}, },
methods: { methods: {
clickTitle(item) {
clickTitle(item){
this.selectTitle = item.id this.selectTitle = item.id
}, },
} }
}; };
</script> </script>
\ No newline at end of file
src/components/customerManage/rankConfig.vue 0 → 100644
View file @ d18f5969
<style scoped>
.distributionRules {}
.distributionRules_title {
font-weight: bold;
font-size: 18px;
font-family: perfectFont;
padding: 20px 0;
}
.page-content {
background-color: #fff;
padding: 20px;
}
.distributionRules_text {
padding: 0 0 20px 0;
}
.text-negative {
color: #f5576c
}
.distributionRules_num {
display: flex;
justify-content: space-between;
}
.distributionRules_num div {
flex: 1;
}
.dataText {
display: flex;
flex-wrap: wrap;
padding: 10px 0;
}
.dataText_text {
margin-right: 10px;
margin-bottom: 10px;
}
.select-radio {
display: flex;
align-items: center;
}
</style>
<template>
<div class="customerManage">
<h1 class="distributionRules_title">分配给以下部门/成员</h1>
<div class="page-content">
<div class="distributionRules_text">
<span>引流排行配置</span>
<span class="text-negative">*</span>
</div>
<div class="distributionRules_num">
<div>
<el-button @click="clickSelectPeople(1)">选择部门/成员</el-button>
</div>
<div><span>已选择：{{msg.FlowList.length}}人</span></div>
</div>
<div class="dataText">
<el-tag v-for="(item,index) in msg.FlowList" :key="index" class="dataText_text">{{item.EmName}}
</el-tag>
</div>
<div class="distributionRules_text">
<span>销售排行配置</span>
<span class="text-negative">*</span>
</div>
<div class="distributionRules_num">
<div>
<el-button @click="clickSelectPeople(2)">选择部门/成员</el-button>
</div>
<div><span>已选择：{{msg.SaleList.length}}人</span></div>
</div>
<div class="dataText">
<el-tag v-for="(item,index) in msg.SaleList" :key="index" class="dataText_text">{{item.EmName}}
</el-tag>
</div>
<br /><br />
<el-button class="add-box-btn add-box-cancel" @click="saveRankRule" :disabled="disabledOff">立即保存</el-button>
</div>
<!-- 添加账号弹窗 -->
<div v-if="isShowRuleForm">
<addDistributionRules :obj="chooseObj" @addCustomerOk="addCustomerOk" />
</div>
</div>
</template>
<script>
import addDistributionRules from "../dialogModel/addDistributionRules";
export default {
components: {
addDistributionRules
},
data() {
return {
disabledOff: false,
isShowRuleForm: false,
msg: {
ID: 0,
SNO: 1,
Content: "",//引流人员编号
Mask: "",//销售人员编号
FlowList: [], //引流排行配置
SaleList: [], //销售排行配置
},
chooseObj: {
chooseType: 1, //选择类型(1-引流人员配置，2-销售人员配置)
EmpList: [], //已选择的员工
}
};
},
mounted() {
this.GetRankRule()
let $this = this
this.MsgBus.$on('closeaaddDistributionRules', function () {
$this.isShowRuleForm = false
})
},
methods: {
saveRankRule() {
let flowIds = [];
let saleIds = [];
this.msg.FlowList.forEach(item => {
flowIds.push(item.EmployeeId)
})
this.msg.SaleList.forEach(item => {
saleIds.push(item.EmployeeId)
})
this.msg.Content = flowIds.join(',');
this.msg.Mask = saleIds.join(',');
this.disabledOff = true
this.apipost('/api/Customer/SetRankRule', this.msg, res => {
this.disabledOff = false
if (res.data.resultCode == 1) {
this.$message.success(res.data.message)
} else {
this.$message.error(res.data.message)
}
})
},
addCustomerOk() {
this.isShowRuleForm = false
},
clickSelectPeople(type) {
this.chooseObj.chooseType = type;
//引流人员配置
if (this.chooseObj.chooseType == 1) {
this.chooseObj.EmpList = this.msg.FlowList;
}
//销售人员配置
if (this.chooseObj.chooseType == 2) {
this.chooseObj.EmpList = this.msg.SaleList;
}
this.isShowRuleForm = true;
},
// 获取规则详情
GetRankRule() {
this.apipost('/api/Customer/GetRankRule', {}, res => {
if (res.data.resultCode == 1) {
var tempData = res.data.data;
this.msg.ID = tempData.ID;
this.msg.SNO = tempData.SNO;
this.msg.Content = tempData.Content;
this.msg.Mask = tempData.Mask;
this.msg.FlowList = tempData.FlowList;
this.msg.SaleList = tempData.SaleList;
}
})
},
}
};
</script>
\ No newline at end of file
src/components/dialogModel/addDistributionRules.vue
View file @ d18f5969
<style scoped> <style scoped>
.addDistributionRules .add-tit{ .addDistributionRules .add-tit {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 20px; height: 20px;
} }
.addDistributionRules .add-tit p{
.addDistributionRules .add-tit p {
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: bold; font-weight: bold;
color:rgba(17,17,17,1); color: rgba(17, 17, 17, 1);
font-size:14px; font-size: 14px;
} }
.addDistributionRules .add-tit p span{
.addDistributionRules .add-tit p span {
display: inline-block; display: inline-block;
width:6px; width: 6px;
height:6px; height: 6px;
background:rgba(13,36,129,1); background: rgba(13, 36, 129, 1);
border-radius:50%; border-radius: 50%;
margin-right: 10px; margin-right: 10px;
} }
.addDistributionRules .el-dialog__header{
.addDistributionRules .el-dialog__header {
padding: 15px 20px; padding: 15px 20px;
background:rgba(255,255,255,1); background: rgba(255, 255, 255, 1);
} }
.add_box{
.add_box {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
} }
.addSearch{
.addSearch {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.addSearch-left{
.addSearch-left {
height: 40px; height: 40px;
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.addSearch-left span{
.addSearch-left span {
flex-shrink: 0; flex-shrink: 0;
} }
.addSearch-s{
.addSearch-s {
height: 40px; height: 40px;
line-height: 4px; line-height: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.addCenter{
.addCenter {
margin-left: 20px; margin-left: 20px;
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.addCenter-left,.addCenter-right{
.addCenter-left,
.addCenter-right {
flex: 1; flex: 1;
margin-top: 20px; margin-top: 20px;
background-color: #fff; background-color: #fff;
padding: 10px; padding: 10px;
} }
.addCenter-left,.addCenter-right{
.addCenter-left,
.addCenter-right {
min-height: 400px; min-height: 400px;
max-height: 400px; max-height: 400px;
overflow: hidden; overflow: hidden;
} }
.addCenter-right-box{
.addCenter-right-box {
width: 50%; width: 50%;
float: left; float: left;
margin-bottom: 10px; margin-bottom: 10px;
} }
.addCenter-hidden{
.addCenter-hidden {
min-height: 400px; min-height: 400px;
max-height: 400px; max-height: 400px;
overflow: scroll; overflow: scroll;
} }
</style> </style>
<template> <template>
<el-dialog @closed="closedDialog" :modal="false" :visible.sync="dialogTableVisible" width="600px" :close-on-click-modal="false" class="addCustomer"> <el-dialog @closed="closedDialog" :modal="false" :visible.sync="dialogTableVisible" width="600px"
:close-on-click-modal="false" class="addCustomer">
<div class="add-tit" slot="title"> <div class="add-tit" slot="title">
<p><span></span>分配规则</p> <p><span></span>分配规则</p>
<span icon="el-icon-close"></span> <span icon="el-icon-close"></span>
...@@ -87,26 +103,17 @@ ...@@ -87,26 +103,17 @@
<div class="addSearch"> <div class="addSearch">
<div class="addSearch-left"> <div class="addSearch-left">
<span>选择：</span> <span>选择：</span>
<el-input placeholder="关键词进行过滤" v-model="filterText"/> <el-input placeholder="关键词进行过滤" v-model="filterText" />
</div> </div>
<div class="addCenter-left"> <div class="addCenter-left">
<div class="addCenter-hidden"> <div class="addCenter-hidden">
<el-tree <el-tree v-loading="loading" class='ApprovalProcessBg' :data="memberList" show-checkbox
v-loading="loading" :filter-node-method="filterNode" :default-checked-keys="memberSetCheckedUserKeys" ref="tree"
class='ApprovalProcessBg' :props="defaultProps" :render-after-expand="false" node-key="DepartmentId"
:data="memberList"
show-checkbox
:filter-node-method="filterNode"
:default-checked-keys="memberSetCheckedUserKeys"
ref="tree"
:props="defaultProps"
:render-after-expand="false"
node-key="DepartmentId"
@check-change="handleNodeChange"> @check-change="handleNodeChange">
</el-tree> </el-tree>
</div> </div>
</div> </div>
</div> </div>
<div class="addCenter"> <div class="addCenter">
<div class="addSearch-s"> <div class="addSearch-s">
...@@ -114,16 +121,12 @@ ...@@ -114,16 +121,12 @@
</div> </div>
<div class="addCenter-right"> <div class="addCenter-right">
<div class="addCenter-hidden"> <div class="addCenter-hidden">
<div class="addCenter-right-box" <div class="addCenter-right-box" v-for="(item,index) in showMember" :key="index">
v-for="(item,index) in showMember"
:key="index">
<el-tag closable @close="mySetCheckedKeys(item.EmployeeId)"> <el-tag closable @close="mySetCheckedKeys(item.EmployeeId)">
{{item.EmName}} {{item.EmName}}
</el-tag> </el-tag>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -134,42 +137,42 @@ ...@@ -134,42 +137,42 @@
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
obj:Object obj: Object
}, },
data() { data() {
return { return {
loading:false, loading: false,
filterText:"", filterText: "",
memberSetCheckedUserKeys:[], memberSetCheckedUserKeys: [],
showMember:[], showMember: [],
defaultProps: { defaultProps: {
children: 'ChildList', children: 'ChildList',
label: 'DepartmentName', label: 'DepartmentName',
}, },
memberList:[], memberList: [],
dialogTableVisible: false, dialogTableVisible: false,
}; };
}, },
watch:{ watch: {
filterText(val) { filterText(val) {
this.$refs.tree.filter(val); this.$refs.tree.filter(val);
} }
}, },
mounted() { mounted() {
this.getMember() this.getMember()
if(this.obj.EmpList){ if (this.obj.EmpList) {
this.showMember = this.obj.EmpList this.showMember = this.obj.EmpList
this.showMember.forEach(item=>{ this.showMember.forEach(item => {
this.memberSetCheckedUserKeys.push(item.EmployeeId) this.memberSetCheckedUserKeys.push(item.EmployeeId)
}) })
} }
let $this = this let $this = this
setTimeout(()=>{ setTimeout(() => {
$this.dialogTableVisible = true $this.dialogTableVisible = true
},50) }, 50)
}, },
methods: { methods: {
// 获取部门成员列表 // 获取部门成员列表
...@@ -182,7 +185,7 @@ export default { ...@@ -182,7 +185,7 @@ export default {
}, },
// 删除指定人员 // 删除指定人员
mySetCheckedKeys(id) { mySetCheckedKeys(id) {
if(this.memberSetCheckedUserKeys.length == 0) return if (this.memberSetCheckedUserKeys.length == 0) return
this.showMember.splice(this.showMember.findIndex(item => item.EmployeeId === id), 1) this.showMember.splice(this.showMember.findIndex(item => item.EmployeeId === id), 1)
this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === id), 1) this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === id), 1)
this.$refs.tree.setCheckedKeys(this.memberSetCheckedUserKeys); this.$refs.tree.setCheckedKeys(this.memberSetCheckedUserKeys);
...@@ -193,15 +196,15 @@ export default { ...@@ -193,15 +196,15 @@ export default {
}, },
handleNodeChange(data, checked) { //操作选中 handleNodeChange(data, checked) { //操作选中
data.IsCheck = checked; data.IsCheck = checked;
if(data.Type == 2 && data.IsCheck) { //是员工且选中 if (data.Type == 2 && data.IsCheck) { //是员工且选中
let isExsit = false let isExsit = false
this.showMember.forEach(x => { this.showMember.forEach(x => {
if(x.EmployeeId == data.DepartmentId) { if (x.EmployeeId == data.DepartmentId) {
isExsit = true isExsit = true
return false return false
} }
}) })
if(!isExsit) { if (!isExsit) {
this.showMember.push({ this.showMember.push({
EmName: data.DepartmentName, EmName: data.DepartmentName,
EmployeeId: data.DepartmentId, EmployeeId: data.DepartmentId,
...@@ -209,35 +212,39 @@ export default { ...@@ -209,35 +212,39 @@ export default {
}) })
this.memberSetCheckedUserKeys.push(data.DepartmentId) this.memberSetCheckedUserKeys.push(data.DepartmentId)
} }
} else if (data.Type == 2 && !data.IsCheck) {
if (this.showMember.findIndex(item => item.EmployeeId === data.DepartmentId) != -1) {
this.showMember.splice(this.showMember.findIndex(item => item.EmployeeId === data.DepartmentId),
1)
this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item ===
data.DepartmentId), 1)
if (this.showMember.findIndex(item => item.EmployeeId === data.ParentId) != -1) {
this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item =>
item === data.ParentId), 1)
} }
else if(data.Type == 2 && !data.IsCheck) {
if(this.showMember.findIndex(item => item.EmployeeId === data.DepartmentId) != -1) {
this.showMember.splice(this.showMember.findIndex(item => item.EmployeeId === data.DepartmentId), 1)
this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === data.DepartmentId), 1)
if(this.showMember.findIndex(item => item.EmployeeId === data.ParentId) != -1) {
this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === data.ParentId), 1)
} }
} }
} if (data.Type != 2 && data.IsCheck) {
if(data.Type != 2 && data.IsCheck) { if (this.memberSetCheckedUserKeys.findIndex(item => item === data.DepartmentId) == -1) {
if(this.memberSetCheckedUserKeys.findIndex(item => item === data.DepartmentId) == -1) {
this.memberSetCheckedUserKeys.push(data.DepartmentId) this.memberSetCheckedUserKeys.push(data.DepartmentId)
} }
} else if(data.Type == 2 && !data.IsCheck) { } else if (data.Type == 2 && !data.IsCheck) {
if(this.memberSetCheckedUserKeys.findIndex(item => item === data.DepartmentId) != -1) { if (this.memberSetCheckedUserKeys.findIndex(item => item === data.DepartmentId) != -1) {
this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === data.DepartmentId), 1) this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item ===
if(this.showMember.findIndex(item => item.EmployeeId === data.ParentId) != -1) { data.DepartmentId), 1)
this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === data.ParentId), 1) if (this.showMember.findIndex(item => item.EmployeeId === data.ParentId) != -1) {
this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item =>
item === data.ParentId), 1)
} }
} }
} }
}, },
closedDialog(){ closedDialog() {
this.MsgBus.$emit('closeaaddDistributionRules') this.MsgBus.$emit('closeaaddDistributionRules')
}, },
clickSure() { clickSure() {
this.dialogTableVisible = false this.dialogTableVisible = false
}, },
} }
} }
</script> </script>
\ No newline at end of file
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