页面修改

src/components/customerManage/customerConfiguration.vue

 <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

+<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