修改

src/pages/financial/market/empBonus.vue

 <style>
+  .empBonus ._icon_btn i.icon-sousuo,
+  .empBonus ._icon_btn i.icon-add {
+    background-color: #47BF8C;
+  }
+  .empBonus ._icon_btn i {
+    width: 26px;
+    height: 26px;
+    display: inline-block;
+    color: white !important;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 26px;
+    margin-right: 10px;
+    cursor: pointer;
+    outline: none;
+  }
 
 </style>
 <template>
@@ -8,10 +24,9 @@
         <div>
           <div class="block" style="display:flex">
             <span style="margin-right: 5px;">选择月份</span>
-            <el-date-picker v-model="value2" type="month" placeholder="选择月">
+            <el-date-picker v-model="StartDate" size="small" value-format="yyyy-MM" type="month" placeholder="选择月">
             </el-date-picker>
-            <q-btn :loading="loading1"  color="primary"  size="11px"  label="生成提成"  @click="createBonus"
-               style="margin-left:10px" />
+            <q-btn color="primary"  size="11px"  label="生成提成"  @click="createBonus"  style="margin-left:10px" />
           </div>
         </div>
       </div>
@@ -34,13 +49,12 @@
               <el-tooltip class="item" effect="dark" content="查看" placement="top">
                 <i class="iconfont icon-sousuo" @click="goUrl(scope.row.Id)"></i>
               </el-tooltip>
-              <el-tooltip class="item" effect="dark" content="制单" placement="top"  >
-                <i class="iconfont icon-add" ></i>
+              <el-tooltip class="item" effect="dark" content="制单" placement="top">
+                <i class="iconfont icon-add"></i>
               </el-tooltip>
             </div>
           </template>
         </el-table-column>
-
       </el-table>
       <div style="margin-top: 10px;text-align: center;">
         <el-pagination background @current-change="handleCurrentChanges" layout="total,prev, pager, next, jumper"
@@ -67,32 +81,37 @@
     data() {
       return {
         loading: false,
-        loading1: false,
         //列表数据参数
         msg: {
           PageIndex: 1,
           PageSize: 10,
         },
+        StartDate: '',
         pageCount: 0,
-        total: 0,
-        dataList: [],
-        value2: "",
+        dataList: []
       }
     },
-    created() {
-    },
+    created() {},
     mounted() {
       this.getList();
     },
     methods: {
       //生成提成
       createBonus() {
-        console.log("value2", this.value2);
+        if (this.StartDate) {
+          let msg = {
+            StartDate: this.StartDate + '-01'
+          }
+          CreateEmpBonus(msg).then(res => {
+            if (res.Code == 1) {
+              this.getList();
+            }
+          });
+        }
       },
       //获取分页列表
       getList() {
         queryPersonnelPeriodPage(this.msg).then(res => {
-          console.log("res", res);
           this.dataList = res.Data.PageData
           this.pageCount = res.Data.PageCount;
         });
@@ -102,14 +121,16 @@
         this.getList()
       },
       //跳转详情
-      goUrl(Id){
+      goUrl(Id) {
         this.OpenNewUrl('../market/empBonusDetail', {
           Id: Id
         })
       }
     },
   }
+
 </script>
 <style lang="sass">
   @import url('~assets/css/table.sass')
+
 </style>

src/pages/financial/market/empBonusDetail.vue

 <style>
   .empDetailDiv {
     width: 400px;
-    height: 400px;
+    max-height: 400px;
     overflow: auto;
   }
 </style>
@@ -17,50 +17,55 @@
         <el-table-column prop="OpenBonus" label="开单奖金"> </el-table-column>
         <el-table-column prop="WorkAgeSalary" label="工龄工资"> </el-table-column>
         <el-table-column prop="ClueNumSalary" label="线索奖励"> </el-table-column>
-        <el-table-column prop="CurGuestNum" label="当月订单人数"> </el-table-column>
-        <el-table-column label="当月奖励金额">
+        <el-table-column prop="CurGuestNum" width="110" label="当月订单人数"> </el-table-column>
+        <el-table-column label="当月奖励金额" width="110">
           <template slot-scope="scope">
-            <el-popover placement="left" title="标题" width="420" trigger="click">
+            <el-popover placement="left" width="420" trigger="click">
               <div class="empDetailDiv">
-                <el-table ref="filterTable" :data="scope.row.DetailList">
+                <el-table ref="filterTable" max-height="300" :data="scope.row.DetailList">
                   <el-table-column prop="OrderId" label="订单编号"> </el-table-column>
                   <el-table-column prop="OrderGuestNum" label="订单人数"></el-table-column>
                   <el-table-column prop="OrderMoney" label="订单金额"> </el-table-column>
                 </el-table>
               </div>
-              <el-button slot="reference" size="mini">{{scope.row.CurRewardMoney}}</el-button>
+              <el-button slot="reference" type="primary" plain size="mini">{{scope.row.CurRewardMoney}}</el-button>
             </el-popover>
           </template>
         </el-table-column>
-        <el-table-column prop="BeforeMoney" label="以前月份的冲抵金额"></el-table-column>
+        <el-table-column prop="BeforeMoney" width="150" label="以前月份的冲抵金额"></el-table-column>
         <el-table-column prop="CreateByName" label="创建人"> </el-table-column>
-        <el-table-column prop="CreateTime" label="创建时间"> </el-table-column>
-        <el-table-column prop="CurOrderMoney" label="当月订单金额"> </el-table-column>
-        <el-table-column prop="DeductionMoney" label="待抵扣金额"> </el-table-column>
-        <el-table-column label="已抵扣金额">
+        <el-table-column prop="CreateTime" label="创建时间" width="150"> </el-table-column>
+        <el-table-column prop="CurOrderMoney" width="110" label="当月订单金额"> </el-table-column>
+        <el-table-column prop="DeductionMoney" width="100" label="待抵扣金额"> </el-table-column>
+        <el-table-column label="已抵扣金额" width="100">
           <template slot-scope="scope">
-            <el-popover placement="left" title="标题" width="420" trigger="click">
+            <el-popover placement="left" width="420" trigger="click">
               <div class="empDetailDiv">
-                <el-table ref="filterTable" :data="scope.row.DeductionList">
+                <el-table ref="filterTable" max-height="300" :data="scope.row.DeductionList">
                   <el-table-column prop="CreateTime" label="抵扣时间"> </el-table-column>
                   <el-table-column prop="DeductionMoney" label="抵扣金额"></el-table-column>
                   <el-table-column prop="DeductionContent" label="备注"> </el-table-column>
                 </el-table>
               </div>
-              <el-button slot="reference" size="mini">{{scope.row.FinishDeductionMoney}}</el-button>
+              <el-button slot="reference" type="primary" plain size="mini">{{scope.row.FinishDeductionMoney}}</el-button>
             </el-popover>
           </template>
         </el-table-column>
-        <el-table-column prop="IsReachStr" label="是否达标"> </el-table-column>
-        <el-table-column label="日志">
+        <el-table-column prop="IsReachStr" label="是否达标">
             <template slot-scope="scope">
-            <el-popover placement="left" title="标题" width="420" trigger="click">
+                <span class="text-negative" v-if="scope.row.IsReach==0">{{scope.row.IsReachStr}}</span>
+                <span class="text-primary" v-if="scope.row.IsReach==1">{{scope.row.IsReachStr}}</span>
+            </template>
+        </el-table-column>
+        <el-table-column label="日志" width="110">
+          <template slot-scope="scope">
+            <el-popover placement="left" width="420" trigger="click">
               <div class="empDetailDiv">
-                <el-table ref="filterTable" :data="scope.row.BonusLogList">
+                <el-table ref="filterTable" max-height="300" :data="scope.row.BonusLogList">
                   <el-table-column prop="LogContent" label="备注"> </el-table-column>
                 </el-table>
               </div>
-              <el-button slot="reference" size="mini">日志信息</el-button>
+              <el-button slot="reference" type="primary" plain size="mini">日志信息</el-button>
             </el-popover>
           </template>
         </el-table-column>