Merge branch 'master' of http://gitlab.oytour.com/huaguohao/crm

src/components/dev/payroll.vue

 <template>
-    <div class="payroll-box customerManage">
+    <div class="payroll-box">
         <div class="tools">
             <!-- <h1>订单管理</h1> -->
             <div class="rightmenu">
@@ -49,7 +49,7 @@
                 </el-table-column>
                 <el-table-column label="工资规则">
                     <template slot-scope="scope">
-                        {{scope.row.WageType!=1?'上季度定档':'新员工比例'}}
+                        <span :class="scope.row.WageType!=1?'cursor-p':''" @click="scope.row.WageType!=1?GenerateScale(scope.row):''">{{scope.row.WageType!=1?'上季度定档':'新员工比例'}}</span>
                     </template>
                 </el-table-column>
                 <el-table-column label="本次提成比例">
@@ -91,6 +91,113 @@
                 @size-change="handleSizeChange" :total="total">
             </el-pagination>
         </div>
+        <!-- 查看生成比例 -->
+        <el-dialog custom-class='w1006' title="员工生成比例" :visible.sync="outerVisible" center>
+            <template>
+                <div
+                  class="cm_content"
+                  style="width: 100%;margin-bottom: 35px;margin-top: 30px;"
+                >
+                  
+                <div class="ITUDWageMoney-box" style="margin-bottom: 20px;">
+                    <span>姓名：{{EmName}}</span>
+                </div>
+                  <table
+                    class="po_content singeRowTable"
+                    style="border:1px solid #E6E6E6;"
+                    cellspacing="0"
+                    cellpadding="0"
+                    v-loading="loading">
+                    <tr>
+                        <th>期数</th>
+                        <th>类型</th>
+                        <th>利润</th>
+                        <th>引流数量</th>
+                        <th>成交订单</th>
+                        
+                    </tr>
+                    <tr v-for="(item,index) in commissionratioList.List"
+                        :key="index">
+                        <td>{{item.Month}}</td>
+                        <td>{{item.EmpType!=1?'引流':'销售'}}</td>
+                        <td>{{item.ProfitMoney}}</td>
+                        <td>{{item.EmpType!=1?item.LureNum:'-'}}</td>
+                        <td>{{item.EmpType!=1?item.OrderNum:'-'}}</td>
+                    </tr>
+                    <tr>
+                        <td>平均</td>
+                        <td>-</td>
+                        <td>{{commissionratioList.AvgProfit}}</td>
+                        <td>{{commissionratioList.AvgLureNum}}</td>
+                        <td>{{commissionratioList.AvfOrderNum}}</td>
+                    </tr>
+                  </table>
+                  
+                  <div class="ITUDschedule-Box-box">
+                    <div class="ITUDschedule-box">
+                        <div class="ITUDWageMoney-box">
+                            <span>工资：{{commissionratioList.WageMoney}}</span>
+                        </div>
+                        <div class="progress-box">
+                            <div v-for="(item,index) in commissionratioList.WageRateList" :key="index" 
+                            class="relative-position">
+                            <el-progress :text-inside="true" :stroke-width="20"
+                              :percentage="setItemProgress(item)"
+                              :status="setItemStatus(item)"
+                              :format="setItemTextW(item)">
+                              </el-progress>
+                              <div class="rate-box" v-if="commissionratioList.AvgLureNum>item.StartValue&&
+                                commissionratioList.AvfOrderNum>item.EndValue">
+                                <div class="sanjiao" :style="{'border-bottom-color':commissionratioList.AvgLureNum>item.StartValue&&
+                                commissionratioList.AvfOrderNum>item.EndValue?'#FF7262':'#CACACA'}"></div>
+                                <div class="rate full-width" :class="{'active-rate':commissionratioList.AvgLureNum>item.StartValue&&
+                                    commissionratioList.AvfOrderNum>item.EndValue}">
+                                  <i class="el-icon-check" style="font-size:8px"></i> {{item.Rate}}%
+                                </div>
+                              </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ITUDschedule-box" style="margin-left: 20px;">
+                        <div class="ITUDWageMoney-box">
+                            <span>提成比例：{{commissionratioList.CommissionRate}}%</span>
+                        </div>
+                        <div class="progress-box">
+                            <div v-for="(item,index) in commissionratioList.CommissionRateList" :key="index" 
+                            class="relative-position">
+                              <el-progress :text-inside="true" :stroke-width="20"
+                              :percentage="setItemProgress(item)"
+                              :status="setItemStatus(item)"
+                              :format="setItemText(item)">
+                              </el-progress>
+                              <div class="rate-box" v-if="commissionratioList.AvgLureNum>item.StartValue&&
+                                commissionratioList.AvfOrderNum>item.EndValue">
+                                <div class="sanjiao" :style="{'border-bottom-color':commissionratioList.AvgLureNum>item.StartValue&&
+                                commissionratioList.AvfOrderNum>item.EndValue?'#FF7262':'#CACACA'}"></div>
+                                <div class="rate full-width" :class="{'active-rate':commissionratioList.AvgLureNum>item.StartValue&&
+                                    commissionratioList.AvfOrderNum>item.EndValue}">
+                                  <i class="el-icon-check" style="font-size:8px"></i> {{item.Rate}}%
+                                </div>
+                    
+                              </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                  </div>
+                  
+                </div>
+                <div v-if="!commissionratioList"
+                  style="width: 100%;border:1px solid #fff;display: flex;align-items: center;justify-content: center;height: 60px;margin-top: 30px;"
+                >暂无数据</div>
+               
+              </template>
+			<div slot="footer" class="dialog-footer">
+				<el-button @click="outerVisible = false">取消</el-button>
+				<el-button type="primary" @click="outerVisible = false">确定</el-button>
+			</div>
+            
+		</el-dialog>
     </div>
 </template>
 
@@ -98,6 +205,10 @@
     export default {
         data() {
             return {
+                commissionratioList:[],
+                EmName:'',
+                EmpType:'',
+                outerVisible:false,
                 loading:false,
                 PeroidsList: [],
                 titleList:[
@@ -119,6 +230,74 @@
             this.GetCommissionPeroidsList()
         },
         methods: {
+            // 自定义进度条文字
+            setItemTextW(row) {
+                return () => {
+                    return row.StartValue + ' - ' + row.EndValue
+                }
+            },
+            // 设置进度
+            setItemProgress(data) {
+                if(this.commissionratioList.AvgLureNum>=data.StartValue&&this.commissionratioList.AvfOrderNum>=data.EndValue){
+                    return 100
+                }else{
+                    return 0
+                }
+            },
+            // 自定义进度条文字
+            setItemText(row) {
+                this.formatProgress(row)
+                return () => {
+                    return row.StartValue + ' - ' + row.EndValue
+                }
+            },
+            // 设置当前进度条状态，显示不同颜色
+            setItemStatus(data) {
+                if(this.commissionratioList.AvgLureNum>=data.StartValue&&this.commissionratioList.AvfOrderNum>=data.EndValue){
+                    return 'exception'
+                }
+            },
+            formatProgress(data){
+                if (data.StartValue > 0) {
+                    const s = data.StartValue.toString().slice(0, -4) ? data.StartValue.toString().slice(0, -4) : '0'
+                    const e = data.StartValue.toString().slice(-4, -3)
+                    data.StartValue = s + (e > 0 ? ('.' + e) : '') + 'w';
+                } else if (data.StartValue == 0) {
+                    data.StartValue = 0
+                } else if (data.StartValue == -1) {
+                   data.StartValue = '∞'
+                }
+                if (data.EndValue > 0) {
+                    const s = data.EndValue.toString().slice(0, -4) ? data.EndValue.toString().slice(0, -4) : '0'
+                    const e = data.EndValue.toString().slice(-4, -3)
+                   data.EndValue = s + (e > 0 ? ('.' + e) : '') + 'w';
+                } else if (data.EndValue == 0) {
+                    data.EndValue = 0
+                } else if (data.EndValue == -1) {
+                    data.EndValue = '∞'
+                }
+            },
+            // 获取员工生成比例
+            GenerateScale(item){
+                if(!item.WageReId){
+                    return
+                }
+                this.EmName = item.EmName
+                this.EmpType = item.EmpType
+                let msg = {
+                    WageReId:item.WageReId//item.WageReId?item.WageReId:6
+                }
+                this.apipost(
+                    "/api/Commission/GetCommissionSource",msg,res => {
+                        if (res.data.resultCode == 1) {
+                            this.outerVisible = true
+                            this.commissionratioList = res.data.data
+                        } else {
+                            this.Error(res.data.message);
+                        }
+                    }
+                );
+            },
             GetCommissionPeroidsList() { //期数下拉
                 this.apipost(
                     "/api/Commission/GetCommissionPeroidsList",{},res => {
@@ -159,6 +338,129 @@
     }
 </script>
 
-<style>
+<style scoped>
+    .singeRowTable{
+        width: 100%;
+    }
+    .singeRowTable tr th {
+        background: #E6E6E6;
+        height: 40px;
+        font-size: 14px;
+        color: #333;
+    }
+    .singeRowTable tr td{
+        padding: 8px 5px !important;
+    }
     
+    .cursor-p{
+        cursor: pointer;
+    }
+    .cursor-p:hover{
+        color: #409EFF;
+    }
+    .ITUDWageMoney-box{
+        margin-top: 20px;
+        margin-bottom: 10px;
+    }
+    .ITUDschedule-Box-box{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+    .ITUDschedule-box{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+    .ITUD-title{
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+    .progress-box{
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        
+    }
+    .relative-position{
+        flex: 1;
+        margin-right: 0;
+        position: relative;
+    }
+    /deep/.relative-position .el-progress-bar__outer{
+        border-radius: 0 !important;
+    }
+    /deep/.relative-position .el-progress-bar__inner{
+        border-radius: 0 !important;
+    }
+    .ITUD-text-box{
+        position: relative;
+    }
+    .ITUD-text{
+        position: absolute;
+        z-index: 999;
+        color: red;
+    }
+    .rate-box {
+        position: absolute;
+        top: 30px;
+        left: 50%;
+        transform: translateX(-50%);
+        color: #000;
+        z-index: 9;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        
+    }
+  .sanjiao {
+      width: 0;
+      height: 0;
+      margin-left: 5%;
+      border-right: 4px solid transparent;
+      border-left: 4px solid transparent;
+      border-bottom: 3px solid #CACACA;
+    }
+    .rate {
+      min-width: 20px;
+      padding: 2px 6px;
+      background-color: #CACACA !important;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #666666;
+      font-size: 0.62vw;
+      font-family: PingFang SC;
+      border-radius: 7px;
+      line-height:12px;
+      white-space:nowrap;
+    }
+    .active-rate{
+      background-color: #FF7262 !important;
+      color: #FFFFFF !important;
+    }
+    /deep/.el-table tr:first-child th:nth-child(6){
+        background: #FFE082 !important;
+    }
+    /deep/.el-table tr:first-child th:nth-child(7){
+        background: #FFE082 !important;
+    }
+    /deep/.el-table tr:first-child th:nth-child(8){
+        background: #E1BEE7 !important;
+    }
+    /deep/.el-table tr:first-child th:nth-child(9){
+        background: #E1BEE7 !important;
+    }
+    /deep/.el-table tr td:nth-child(6){
+        background: #FFE082;
+    }
+    /deep/.el-table tr td:nth-child(7){
+        background: #FFE082;
+    }
+    /deep/.el-table tr td:nth-child(8){
+        background: #E1BEE7;
+    }
+    /deep/.el-table tr td:nth-child(9){
+        background: #E1BEE7;
+    }
 </style>
\ No newline at end of file