表格

src/pages/financial/CommissionDetail.vue

@@ -12,7 +12,24 @@
     .CommissionDetail  .text-bottom{
         height: 32px;line-height: 32px; margin-bottom: 10px;
     }
-
+    .CommissionDetail ._icon_btn i.icon-sousuo {
+    background-color: #47BF8C;
+  }
+    .CommissionDetail ._icon_btn i {
+    width: 30px;
+    height: 30px;
+    display: inline-block;
+    color: white !important;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 30px;
+    margin-right: 10px;
+    cursor: pointer;
+    outline: none;
+  }
+ .CommissionDetail .el-table td,.el-table th{
+    padding: 5px 0;
+  }
 
   
   </style>
@@ -39,10 +56,12 @@
             <el-table-column prop="qishu" label="额外扣除" sortable> </el-table-column>
             <el-table-column  label="操作" >
                 <template slot-scope="scope">
+                  <div class="_icon_btn">
                     <el-tooltip class="item" effect="dark" content="查看" placement="top">
-                    <i class="iconfont icon-sousuo" 
-                        @click="goUrl('CommissionDetail',Id)"></i>
-                    </el-tooltip>
+                      <i class="iconfont icon-sousuo" 
+                          @click="goUrl('CommissionDetail',Id)"></i>
+                      </el-tooltip>
+                  </div>
                   </template>
             </el-table-column>
         </el-table>

src/pages/financial/salesCommission.vue

@@ -12,7 +12,25 @@
     .salesCommission  .text-bottom{
         height: 32px;line-height: 32px; margin-bottom: 10px;
     }
-
+   .salesCommission ._icon_btn i.icon-sousuo {
+    background-color: #47BF8C;
+  }
+ .salesCommission ._icon_btn i {
+    width: 30px;
+    height: 30px;
+    display: inline-block;
+    color: white !important;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 30px;
+    margin-right: 10px;
+    cursor: pointer;
+    outline: none;
+  }
+ .salesCommission .el-table td,.el-table th{
+    padding: 5px 0;
+  }
+  
 
   
   </style>
@@ -21,7 +39,7 @@
         <div class="page-search row items-center">
             <div class="col row wrap q-mr-lg q-col-gutter-md">
               <div class="col-3">
-                
+                <q-input filled v-model="msg.Name"  @keyup.enter.native="msg.PageIndex = 1,getList()" label="周期名称" />
               </div>
             </div>
           </div>
@@ -29,24 +47,42 @@
         <el-table
             ref="filterTable"
             :data="tableData"
+            :header-cell-style="{backgroundColor:'#f5f6f7', color: '#a8a8b3'}"
             border
             style="width: 100%">
-            <el-table-column prop="qishu"  label="期数" sortable ></el-table-column>
-            <el-table-column prop="alljine" label="提成总金额"  width="180"></el-table-column>
-            <el-table-column prop="caoren" label="操作人" > </el-table-column>
-            <el-table-column prop="gstic" label="所属公司提成" > </el-table-column>
-            <el-table-column prop="caiwudanj" label="财务单据" > </el-table-column>
-            <el-table-column prop="riqi" label="日期" > </el-table-column>
+            <el-table-column prop="Id"  label="ID"  ></el-table-column>
+            <el-table-column prop="Periods" label="周期"  ></el-table-column>
+            <el-table-column prop="SumPrice" label="提成总金额" > </el-table-column>
+            <el-table-column prop="FrIdList" label="财务单据" >
+              <template slot-scope="scope">
+                <div style="display: flex;flex-wrap: wrap;" v-if='scope.row.FrIdList.length>0'>
+                  <span v-for="(x,y) in scope.row.FrIdList" @click="gocaiwuxiangq(x)" style="cursor: pointer;text-decoration: underline;margin-right: 5px; color: #409EFF;">{{x}}</span>
+                </div>
+                <div v-else>无</div>
+                
+              </template>  
+            </el-table-column>
+            <el-table-column prop="CreateByName" label="创建人" > </el-table-column>
+            <el-table-column prop="CreateTime" label="创建时间" > </el-table-column>
             <el-table-column  label="操作" >
                 <template slot-scope="scope">
+                  <div class="_icon_btn">
                     <el-tooltip class="item" effect="dark" content="查看" placement="top">
-                    <i class="iconfont icon-sousuo" 
-                        @click="goUrl('CommissionDetail',Id)"></i>
-                    </el-tooltip>
+                      <i class="iconfont icon-sousuo" 
+                          @click="goUrl('CommissionDetail',Id)"></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" :current-page.sync="msg.pageIndex"
+            :page-size="msg.pageSize" :total='total'>
+          </el-pagination>
+        </div>
+        
       </template>
       
     </div>
@@ -56,7 +92,7 @@
       GetClassTypePageList,
     } from '../../api/system/index';
     import{
-        getSellCommissionRuleList,
+      getSellCommissionPeriodsPageList,
         setSellCommissionRule
     } from '../../api/finance/index'
     export default {
@@ -71,29 +107,28 @@
        
           //列表数据参数
           msg: {
-            pageIndex: 1,
-            pageSize: 99
+            PageIndex: 1,
+            PageSize: 20,
+            Name:'',
           },
           pageCount: 0,
           persistent: false,
           listData:{},
-          tableData:[
-              {qishu:'201902',alljine:'10223',caoren:'徐总',gstic:'0.00',caiwudanj:2019,riqi:'2019-03-15'}
-          ],
+          tableData:[],
+          total:0
         }
       },
       created() {},
       mounted() {
-        
-        // this.getRuleList();//获取规则
+        this.getList();//获取提成周期列表
       },
       methods: {
-        getRuleList(){
+        getList(){
             this.loading = true;
-            getSellCommissionRuleList({}).then(res => {
+            getSellCommissionPeriodsPageList(this.msg).then(res => {
             if (res.Code == 1) {
-              this.listData = res.Data
-              this.GetClassTypePageList();//获取班级类型列表数据
+              this.tableData = res.Data.PageData
+              this.total = res.Data.Count
             }
           })
         },
@@ -101,6 +136,15 @@
         goUrl(path, id ) {
             this.$router.push({
             path: '/financial/' + path,
+            query: {
+                "id": id,
+                blank: 'y',
+            }
+            })
+        },
+        gocaiwuxiangq(id){
+          this.$router.push({
+            path: '/financial/financalDocument/FinancialDocumentsDetail',
             query: {
                 "id": id,
                 blank: 'y',
@@ -108,6 +152,11 @@
             }
             })
         },
+        handleCurrentChanges(val){
+          console.log(val)
+          this.msg.PageIndex= val;
+          this.getList()
+        },
      
       
       },