Skip to content

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

页面修改

parent 96162b51
Hide 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{
display: flex; .SelectedAccount_box {
flex-wrap: wrap; display: flex;
} flex-wrap: wrap;
.SelectedAccount{ }
margin: 5px;
cursor: pointer; .SelectedAccount {
} margin: 5px;
.sub-header div.active{ cursor: pointer;
color: #409EFF; }
border-bottom: 2px solid #409EFF;
} .sub-header div.active {
.sub-header div{ color: #409EFF;
padding: 20px 15px; border-bottom: 2px solid #409EFF;
cursor: pointer; }
}
.sub-header{ .sub-header div {
display: flex; padding: 20px 15px;
padding: 0 20px; cursor: pointer;
background-color: #fff; }
}
.sub-header {
display: flex;
padding: 0 20px;
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
},
]
};
}, },
mounted() { mounted() {
}, },
beforeDestroy() { beforeDestroy() {
}, },
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{
display: flex; .addDistributionRules .add-tit p {
align-items: center; display: flex;
font-weight: bold; align-items: center;
color:rgba(17,17,17,1); font-weight: bold;
font-size:14px; color: rgba(17, 17, 17, 1);
} font-size: 14px;
.addDistributionRules .add-tit p span{ }
display: inline-block;
width:6px; .addDistributionRules .add-tit p span {
height:6px; display: inline-block;
background:rgba(13,36,129,1); width: 6px;
border-radius:50%; height: 6px;
margin-right: 10px; background: rgba(13, 36, 129, 1);
} border-radius: 50%;
.addDistributionRules .el-dialog__header{ margin-right: 10px;
padding: 15px 20px; }
background:rgba(255,255,255,1);
} .addDistributionRules .el-dialog__header {
.add_box{ padding: 15px 20px;
display: flex; background: rgba(255, 255, 255, 1);
flex-direction: row; }
justify-content: space-between;
} .add_box {
.addSearch{ display: flex;
display: flex; flex-direction: row;
flex-direction: column; justify-content: space-between;
}
}
.addSearch-left{ .addSearch {
height: 40px; display: flex;
flex: 1; flex-direction: column;
display: flex;
align-items: center; }
}
.addSearch-left span{ .addSearch-left {
flex-shrink: 0; height: 40px;
} flex: 1;
.addSearch-s{ display: flex;
height: 40px; align-items: center;
line-height: 4px; }
display: flex;
align-items: center; .addSearch-left span {
} flex-shrink: 0;
.addCenter{ }
margin-left: 20px;
flex: 1; .addSearch-s {
display: flex; height: 40px;
flex-direction: column; line-height: 4px;
} display: flex;
.addCenter-left,.addCenter-right{ align-items: center;
flex: 1; }
margin-top: 20px;
background-color: #fff; .addCenter {
padding: 10px; margin-left: 20px;
} flex: 1;
.addCenter-left,.addCenter-right{ display: flex;
min-height: 400px; flex-direction: column;
max-height: 400px; }
overflow: hidden;
} .addCenter-left,
.addCenter-right-box{ .addCenter-right {
width: 50%; flex: 1;
float: left; margin-top: 20px;
margin-bottom: 10px; background-color: #fff;
} padding: 10px;
.addCenter-hidden{ }
min-height: 400px;
max-height: 400px; .addCenter-left,
overflow: scroll; .addCenter-right {
} min-height: 400px;
max-height: 400px;
overflow: hidden;
}
.addCenter-right-box {
width: 50%;
float: left;
margin-bottom: 10px;
}
.addCenter-hidden {
min-height: 400px;
max-height: 400px;
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" @check-change="handleNodeChange">
show-checkbox
:filter-node-method="filterNode"
:default-checked-keys="memberSetCheckedUserKeys"
ref="tree"
:props="defaultProps"
:render-after-expand="false"
node-key="DepartmentId"
@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" <el-tag closable @close="mySetCheckedKeys(item.EmployeeId)">
:key="index"> {{item.EmName}}
<el-tag closable @close="mySetCheckedKeys(item.EmployeeId)"> </el-tag>
{{item.EmName}} </div>
</el-tag>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -134,110 +137,114 @@ ...@@ -134,110 +137,114 @@
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
obj:Object obj: Object
},
data() {
return {
loading:false,
filterText:"",
memberSetCheckedUserKeys:[],
showMember:[],
defaultProps: {
children: 'ChildList',
label: 'DepartmentName',
}, },
memberList:[], data() {
dialogTableVisible: false, return {
loading: false,
filterText: "",
memberSetCheckedUserKeys: [],
showMember: [],
defaultProps: {
children: 'ChildList',
label: 'DepartmentName',
},
memberList: [],
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
setTimeout(()=>{
$this.dialogTableVisible = true
},50)
},
methods: {
// 获取部门成员列表
getMember() {
this.loading = true
this.apipost2('WorkFlow_get_GetTempLateDepartMentEmployee', {}, res => {
this.memberList = res.data.data
this.loading = false
}, err => {})
},
// 删除指定人员
mySetCheckedKeys(id) {
if(this.memberSetCheckedUserKeys.length == 0) return
this.showMember.splice(this.showMember.findIndex(item => item.EmployeeId === id), 1)
this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === id), 1)
this.$refs.tree.setCheckedKeys(this.memberSetCheckedUserKeys);
},
filterNode(value, data) {
if (!value) return true;
return data.DepartmentName.indexOf(value) !== -1;
},
handleNodeChange(data, checked) { //操作选中
data.IsCheck = checked;
if(data.Type == 2 && data.IsCheck) { //是员工且选中
let isExsit = false
this.showMember.forEach(x => {
if(x.EmployeeId == data.DepartmentId) {
isExsit = true
return false
}
})
if(!isExsit) {
this.showMember.push({
EmName: data.DepartmentName,
EmployeeId: data.DepartmentId,
Sort: this.showMember.length + 1
}) })
this.memberSetCheckedUserKeys.push(data.DepartmentId)
} }
} let $this = this
else if(data.Type == 2 && !data.IsCheck) { setTimeout(() => {
if(this.showMember.findIndex(item => item.EmployeeId === data.DepartmentId) != -1) { $this.dialogTableVisible = true
this.showMember.splice(this.showMember.findIndex(item => item.EmployeeId === data.DepartmentId), 1) }, 50)
this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === data.DepartmentId), 1) },
if(this.showMember.findIndex(item => item.EmployeeId === data.ParentId) != -1) { methods: {
this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === data.ParentId), 1) // 获取部门成员列表
getMember() {
this.loading = true
this.apipost2('WorkFlow_get_GetTempLateDepartMentEmployee', {}, res => {
this.memberList = res.data.data
this.loading = false
}, err => {})
},
// 删除指定人员
mySetCheckedKeys(id) {
if (this.memberSetCheckedUserKeys.length == 0) return
this.showMember.splice(this.showMember.findIndex(item => item.EmployeeId === id), 1)
this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === id), 1)
this.$refs.tree.setCheckedKeys(this.memberSetCheckedUserKeys);
},
filterNode(value, data) {
if (!value) return true;
return data.DepartmentName.indexOf(value) !== -1;
},
handleNodeChange(data, checked) { //操作选中
data.IsCheck = checked;
if (data.Type == 2 && data.IsCheck) { //是员工且选中
let isExsit = false
this.showMember.forEach(x => {
if (x.EmployeeId == data.DepartmentId) {
isExsit = true
return false
}
})
if (!isExsit) {
this.showMember.push({
EmName: data.DepartmentName,
EmployeeId: data.DepartmentId,
Sort: this.showMember.length + 1
})
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)
}
}
} }
} if (data.Type != 2 && data.IsCheck) {
} if (this.memberSetCheckedUserKeys.findIndex(item => item === data.DepartmentId) == -1) {
if(data.Type != 2 && data.IsCheck) { this.memberSetCheckedUserKeys.push(data.DepartmentId)
if(this.memberSetCheckedUserKeys.findIndex(item => item === data.DepartmentId) == -1) { }
this.memberSetCheckedUserKeys.push(data.DepartmentId) } else if (data.Type == 2 && !data.IsCheck) {
} if (this.memberSetCheckedUserKeys.findIndex(item => item === data.DepartmentId) != -1) {
} else if(data.Type == 2 && !data.IsCheck) { this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item ===
if(this.memberSetCheckedUserKeys.findIndex(item => item === data.DepartmentId) != -1) { data.DepartmentId), 1)
this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === data.DepartmentId), 1) if (this.showMember.findIndex(item => item.EmployeeId === data.ParentId) != -1) {
if(this.showMember.findIndex(item => item.EmployeeId === data.ParentId) != -1) { this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item =>
this.memberSetCheckedUserKeys.splice(this.memberSetCheckedUserKeys.findIndex(item => item === data.ParentId), 1) item === data.ParentId), 1)
}
}
} }
} },
closedDialog() {
this.MsgBus.$emit('closeaaddDistributionRules')
},
clickSure() {
this.dialogTableVisible = false
},
} }
}, }
closedDialog(){
this.MsgBus.$emit('closeaaddDistributionRules')
},
clickSure() {
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