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>
@import '../../assets/css/customerManage.css';
.SelectedAccount_box{
display: flex;
flex-wrap: wrap;
}
.SelectedAccount{
margin: 5px;
cursor: pointer;
}
.sub-header div.active{
color: #409EFF;
border-bottom: 2px solid #409EFF;
}
.sub-header div{
padding: 20px 15px;
cursor: pointer;
}
.sub-header{
display: flex;
padding: 0 20px;
background-color: #fff;
}
@import '../../assets/css/customerManage.css';
.SelectedAccount_box {
display: flex;
flex-wrap: wrap;
}
.SelectedAccount {
margin: 5px;
cursor: pointer;
}
.sub-header div.active {
color: #409EFF;
border-bottom: 2px solid #409EFF;
}
.sub-header div {
padding: 20px 15px;
cursor: pointer;
}
.sub-header {
display: flex;
padding: 0 20px;
background-color: #fff;
}
</style>
<template>
<div class="customerManage">
<div class="sub-header">
<div v-for="(item,index) in headerList" :key="index"
:class="selectTitle==item.id?'active':''"
@click="clickTitle(item)">{{item.title}}</div>
<div v-for="(item,index) in headerList" :key="index" :class="selectTitle==item.id?'active':''"
@click="clickTitle(item)">{{item.title}}</div>
</div>
<!-- 客户来源 -->
<customerSource v-if="selectTitle==1"></customerSource>
<!-- 分配规则 -->
<distributionRules v-if="selectTitle==2"></distributionRules>
<!-- 排行统计配置 -->
<rankConfig v-if="selectTitle==3"></rankConfig>
</div>
</template>
<script>
import customerSource from "./customerSource";
import distributionRules from "./distributionRules";
export default {
import customerSource from "./customerSource";
import distributionRules from "./distributionRules";
import rankConfig from "./rankConfig";
export default {
components: {
customerSource,
distributionRules
distributionRules,
rankConfig,
},
data() {
return {
selectTitle:1,
headerList:[
{title:'客户来源',id:1},
{title:'分配规则',id:2},
]
};
return {
selectTitle: 1,
headerList: [{
title: '客户来源',
id: 1
},
{
title: '分配规则',
id: 2
},
{
title: '排行统计配置',
id: 3
},
]
};
},
mounted() {
},
beforeDestroy() {
},
methods: {
clickTitle(item){
methods: {
clickTitle(item) {
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>
.addDistributionRules .add-tit{
display: flex;
justify-content: space-between;
align-items: center;
height: 20px;
}
.addDistributionRules .add-tit p{
display: flex;
align-items: center;
font-weight: bold;
color:rgba(17,17,17,1);
font-size:14px;
}
.addDistributionRules .add-tit p span{
display: inline-block;
width:6px;
height:6px;
background:rgba(13,36,129,1);
border-radius:50%;
margin-right: 10px;
}
.addDistributionRules .el-dialog__header{
padding: 15px 20px;
background:rgba(255,255,255,1);
}
.add_box{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.addSearch{
display: flex;
flex-direction: column;
}
.addSearch-left{
height: 40px;
flex: 1;
display: flex;
align-items: center;
}
.addSearch-left span{
flex-shrink: 0;
}
.addSearch-s{
height: 40px;
line-height: 4px;
display: flex;
align-items: center;
}
.addCenter{
margin-left: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.addCenter-left,.addCenter-right{
flex: 1;
margin-top: 20px;
background-color: #fff;
padding: 10px;
}
.addCenter-left,.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;
}
.addDistributionRules .add-tit {
display: flex;
justify-content: space-between;
align-items: center;
height: 20px;
}
.addDistributionRules .add-tit p {
display: flex;
align-items: center;
font-weight: bold;
color: rgba(17, 17, 17, 1);
font-size: 14px;
}
.addDistributionRules .add-tit p span {
display: inline-block;
width: 6px;
height: 6px;
background: rgba(13, 36, 129, 1);
border-radius: 50%;
margin-right: 10px;
}
.addDistributionRules .el-dialog__header {
padding: 15px 20px;
background: rgba(255, 255, 255, 1);
}
.add_box {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.addSearch {
display: flex;
flex-direction: column;
}
.addSearch-left {
height: 40px;
flex: 1;
display: flex;
align-items: center;
}
.addSearch-left span {
flex-shrink: 0;
}
.addSearch-s {
height: 40px;
line-height: 4px;
display: flex;
align-items: center;
}
.addCenter {
margin-left: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.addCenter-left,
.addCenter-right {
flex: 1;
margin-top: 20px;
background-color: #fff;
padding: 10px;
}
.addCenter-left,
.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>
<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">
<p><span></span>分配规则</p>
<span icon="el-icon-close"></span>
......@@ -87,26 +103,17 @@
<div class="addSearch">
<div class="addSearch-left">
<span>选择：</span>
<el-input placeholder="关键词进行过滤" v-model="filterText"/>
<el-input placeholder="关键词进行过滤" v-model="filterText" />
</div>
<div class="addCenter-left">
<div class="addCenter-hidden">
<el-tree
v-loading="loading"
class='ApprovalProcessBg'
: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">
<el-tree v-loading="loading" class='ApprovalProcessBg' :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">
</el-tree>
</div>
</div>
</div>
<div class="addCenter">
<div class="addSearch-s">
......@@ -114,16 +121,12 @@
</div>
<div class="addCenter-right">
<div class="addCenter-hidden">
<div class="addCenter-right-box"
v-for="(item,index) in showMember"
:key="index">
<el-tag closable @close="mySetCheckedKeys(item.EmployeeId)">
{{item.EmName}}
</el-tag>
</div>
<div class="addCenter-right-box" v-for="(item,index) in showMember" :key="index">
<el-tag closable @close="mySetCheckedKeys(item.EmployeeId)">
{{item.EmName}}
</el-tag>
</div>
</div>
</div>
</div>
</div>
......@@ -134,110 +137,114 @@
</el-dialog>
</template>
<script>
export default {
props: {
obj:Object
},
data() {
return {
loading:false,
filterText:"",
memberSetCheckedUserKeys:[],
showMember:[],
defaultProps: {
children: 'ChildList',
label: 'DepartmentName',
export default {
props: {
obj: Object
},
memberList:[],
dialogTableVisible: false,
data() {
return {
loading: false,
filterText: "",
memberSetCheckedUserKeys: [],
showMember: [],
defaultProps: {
children: 'ChildList',
label: 'DepartmentName',
},
memberList: [],
dialogTableVisible: false,
};
},
watch:{
filterText(val) {
this.$refs.tree.filter(val);
}
},
mounted() {
this.getMember()
if(this.obj.EmpList){
this.showMember = this.obj.EmpList
this.showMember.forEach(item=>{
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
};
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
mounted() {
this.getMember()
if (this.obj.EmpList) {
this.showMember = this.obj.EmpList
this.showMember.forEach(item => {
this.memberSetCheckedUserKeys.push(item.EmployeeId)
})
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)
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)
}
} 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) {
this.memberSetCheckedUserKeys.push(data.DepartmentId)
}
} else if(data.Type == 2 && !data.IsCheck) {
if(this.memberSetCheckedUserKeys.findIndex(item => item === 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) {
this.memberSetCheckedUserKeys.push(data.DepartmentId)
}
} else if (data.Type == 2 && !data.IsCheck) {
if (this.memberSetCheckedUserKeys.findIndex(item => item === 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)
}
}
}
}
},
closedDialog() {
this.MsgBus.$emit('closeaaddDistributionRules')
},
clickSure() {
this.dialogTableVisible = false
},
}
},
closedDialog(){
this.MsgBus.$emit('closeaaddDistributionRules')
},
clickSure() {
this.dialogTableVisible = false
},
}
}
}
</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