新增op提成规则，新增op提成期数，提成期数查询

src/components/FinancialModule/OPCommissionDetail.vue

+<template>
+  <div class="commissionDetails-box">
+    <div class="query-box">
+      <ul>
+        <li>
+          <input type="button" class="normalBtn" value="导出" @click="exportExcel">
+        </li>
+      </ul>
+    </div>
+    <v-table
+      v-if="isReady"
+      is-horizontal-resize
+      column-width-drag
+      style="width:100%"
+      :columns="columns"
+      :table-data="dataList"
+      :filter-method="filterMethod"
+      :total="total"
+      :pageSize="msg.pageSize"
+      :pageIndex="msg.pageIndex"
+      :handleCurrentChange="handleCurrentChange"
+      :multiple-sort="multipleSort"
+      :is-loading="loading"
+      sort-always
+      @sort-change="sortChange"
+      @on-custom-comp="customCompFunc"
+    ></v-table>
+    <div style="height:20px;"> </div>
+  </div>
+</template>
+<script>
+import Vue from 'vue'
+import XLSX from 'xlsx'
+var FileSaver = require('file-saver')
+export default {
+  data() {
+    return {
+      activeName: "first",
+      commonName: "姓名",
+      loading: false,
+      msg: {
+        pageIndex: 1,
+        pageSize: 20,
+        ParentId: 0,
+        OrderStr: "RB_Branch_Id asc",
+        BName:-1
+      },
+      total: 0,
+      currentPage: 1,
+      columns: [],
+      remoteLoading: false,
+      total: 0,
+      dataList: [],
+      isReady: false,
+      multipleSort: false,
+      loading: true,
+      CompanyList:[],
+      dataListTwo: [],
+      stringPerons:''
+    };
+  },
+  methods: {
+    exportExcel(){
+      const defaultCellStyle =  {'!cols': [{wpx: 60}, {wpx: 200}, {wpx: 60}, {wpx: 150},{wpx:60}]};
+      const wopts = { bookType:'xlsx', bookSST:false, type:'binary', defaultCellStyle: defaultCellStyle, showGridLines: true};
+      const wb = { SheetNames: ['提成统计'], Sheets: {}, Props: {} }; 
+      let data = []
+      this.dataList.forEach(x=>{
+        let obj={
+          '公司':x.BName,
+          '部门':x.DepartmentName,
+          '员工':x.CreateByStr,
+          '应发提成':x.CommissionMoney.toFixed(2),
+          '收客数':x.PeopleCount,
+          '所属期数':x.Periods
+        }
+        data.push(obj)
+      })
+      wb.Sheets['提成统计'] = XLSX.utils.json_to_sheet(data)
+      
+      //创建二进制对象写入转换好的字节流
+      let tmpDown =  new Blob([this.s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" })
+      FileSaver.saveAs(tmpDown, "提成统计.xls");
+    },
+    s2ab (s) {
+      if (typeof ArrayBuffer !== 'undefined') {  
+        var buf = new ArrayBuffer(s.length);  
+        var view = new Uint8Array(buf);  
+        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;  
+        return buf;  
+      } else {  
+        var buf = new Array(s.length);  
+        for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;  
+        return buf;
+      }
+    },
+    filterMethod(filters){
+      console.log("filter", filters);
+      let data = JSON.parse(JSON.stringify(this.dataListTwo))
+      let dataListTwo = JSON.parse(JSON.stringify(this.dataListTwo))
+      if (filters.BName!='' && filters.BName!='__all__'){
+        data = data.filter(item => item.BName.indexOf(filters.BName)!=-1);
+      }
+      if (filters.DepartmentName!=''){
+        data = data.filter(item => item.DepartmentName.indexOf(filters.DepartmentName)!=-1);
+      }
+      if (filters.CreateByStr!=''){
+        data = data.filter(item => item.CreateByStr.indexOf(filters.CreateByStr)!=-1);
+      }
+      if ((filters.BName === '' || filters.BName==='__all__') && filters.DepartmentName === '' && filters.CreateByStr === ''){
+        data = dataListTwo
+      }
+      this.dataList = data
+      console.log(data)
+    },
+    customCompFunc(params) {
+      if (params.type === "see") {
+        this.getInfo(params.data)
+      } 
+    },
+    getCompanyList() {
+      //获取公司列表
+      this.apipost(
+        "admin_get_BranchGetList",
+        this.getCompanyMsg,
+        res => {
+          if (res.data.resultCode == 1) {
+            let data = res.data.data;
+            data.forEach(x => {
+              x.disabled = false;
+            });
+            this.CompanyList = data;
+            this.initColums();
+          } else {
+          }
+        },
+        err => {}
+      );
+    },
+    initColums() {
+      this.isReady = false;
+      let that = this;
+      let companyList = [];
+      this.CompanyList.forEach(x => {
+        let item = {};
+        item.label = x.BName;
+        item.value = x.BName;
+        companyList.push(item);
+      });
+      console.log(companyList)
+      let company = {
+        field: "BName",
+        title: "公司",
+        width: 40,
+        titleAlign: "left",
+        columnAlign: "left",
+        isResize: true,
+        result: "",
+        filterMultiple: false,
+        filters: companyList,
+        type: "select"
+        // filterMultiple: false,
+        // filters: companyList,
+        // result: "",
+        // type: "select",
+        // orderBy: "asc"
+        // isFrozen:true
+      };
+      let department = {
+        field: "DepartmentName",
+        title: "部门",
+        width: 80,
+        titleAlign: "left",
+        columnAlign: "left",
+        isResize: true,
+        result: "",
+        filterMultiple: false,
+        filters: companyList,
+        type: "text"
+      };
+      let userName = {
+        field: "CreateByStr",
+        title: "姓名",
+        titleAlign: "left",
+        columnAlign: "left",
+        isResize: true,
+        width: 80,
+        result: "",
+        filterMultiple: false,
+        filters: [{}],
+        type: "text"
+      };
+      let commissionMoney = {
+        field: "CommissionMoney",
+        title: "提成金额",
+        titleAlign: "left",
+        columnAlign: "left",
+        isResize: true,
+        width: 80,
+        orderBy: "",
+        formatter: function(rowData, rowIndex, pagingIndex, field) {
+          return `<span>${rowData.CommissionMoney.toFixed(2)}</span>`
+        }
+      };
+    //   let otherMoney = {
+    //     field: "otherMoney",
+    //     title: "额外奖励",
+    //     titleAlign: "left",
+    //     columnAlign: "left",
+    //     isResize: true,
+    //     width: 80,
+    //     orderBy: "",
+    //     formatter: function(rowData, rowIndex, pagingIndex, field) {
+    //       return `<span>${rowData.otherMoney.toFixed(2)}</span>`
+    //     }
+    //   };
+    //   let backMoney = {
+    //     field: "backMoney",
+    //     title: "额外扣除",
+    //     titleAlign: "left",
+    //     columnAlign: "left",
+    //     isResize: true,
+    //     width: 80,
+    //     orderBy: "",
+    //     formatter: function(rowData, rowIndex, pagingIndex, field) {
+    //       return `<span>${rowData.backMoney.toFixed(2)}</span>`
+    //     }
+    //   };
+    //   let sumMoney = {
+    //     title: "应发提成",
+    //     field: "CommissionMoney",
+    //     titleAlign: "left",
+    //     columnAlign: "left",
+    //     isResize: true,
+    //     width: 80,
+    //     orderBy: "",
+    //     formatter: function(rowData, rowIndex, pagingIndex, field) {
+    //       return `<span style='color:red'>${(rowData.CommissionMoney).toFixed(2)}</span>`
+    //     }
+    //   };
+      let peopleCount = {
+        field: "PeopleCount",
+        title: "收客人数",
+        titleAlign: "left",
+        columnAlign: "left",
+        isResize: true,
+        width: 80,
+        orderBy: "",
+        formatter: function(rowData, rowIndex, pagingIndex, field) {
+          return `<span style='color:blue'>${rowData.PeopleCount}人</span>`
+        }
+      };
+    //   let visaPeopleCount = {
+    //     field: "visaPeopleCount",
+    //     title: "单签证人数",
+    //     titleAlign: "left",
+    //     columnAlign: "left",
+    //     isResize: true,
+    //     width: 80,
+    //     formatter: function(rowData, rowIndex, pagingIndex, field) {
+    //       if(rowData.visaPeopleCount>0)
+    //         return `<span style='color:orange'>${rowData.visaPeopleCount}人</span>`
+    //       else
+    //         return ''
+    //     }
+    //   };
+      let periods = {
+        field: "Periods",
+        title: "期数",
+        titleAlign: "left",
+        columnAlign: "left",
+        isResize: true,
+        width: 80,
+        formatter: function(rowData, rowIndex, pagingIndex, field) {
+          if(rowData.Periods!=that.stringPerons)
+            return `<div style='height:40px;line-height:40px;color:#f1f1f1;background: red;margin: 0 -10px;padding-left: 10px;'>${rowData.Periods}</div>`
+          else
+            return rowData.Periods
+        }
+      };
+    //   let remark = {
+    //     field: "remark",
+    //     title: "备注",
+    //     titleAlign: "left",
+    //     columnAlign: "left",
+    //     isResize: true,
+    //     width: 80,
+    //     formatter: function(rowData, rowIndex, pagingIndex, field) {
+    //       return ``;
+    //     }
+    //   };
+      let opera = {
+        title: "操作",
+        titleAlign: "left",
+        columnAlign: "left",
+        width: 80,
+        isResize: false,
+        componentName: "commission-table-operation"
+      };
+      this.columns = [];
+      this.columns.push(company);
+      this.columns.push(department);
+      this.columns.push(userName);
+      this.columns.push(commissionMoney);
+    //   this.columns.push(otherMoney);
+    //   this.columns.push(backMoney);
+    //   this.columns.push(sumMoney);
+      this.columns.push(peopleCount);
+    //   this.columns.push(visaPeopleCount);
+      this.columns.push(periods);
+    //   this.columns.push(remark);
+      this.columns.push(opera);
+      this.isReady = true;
+    },
+    sortChange(param) {
+    //   console.log("param",param)
+    //   if(param.sumMoney==''){
+        if(param.BName!=''){
+          this.msg.OrderStr='RB_Branch_Id '+param.BName
+        }
+        if(param.CommissionMoney!=''){
+          this.msg.OrderStr='CommissionMoney '+param.CommissionMoney
+        }
+        if(param.PeopleCount!=''){
+          this.msg.OrderStr='PeopleCount '+param.PeopleCount
+        }
+        // if(param.backMoney!=''){
+        //   this.msg.OrderStr='BackMoney '+param.backMoney
+        // }
+        // if(param.otherMoney!=''){
+        //   this.msg.OrderStr='OtherMoney '+param.otherMoney
+        // }
+        //this.tableData = this.orderBy(d, ["incomeVal"], param.income).results;
+        this.getList();
+    // }
+    //   else{
+    //     let d=JSON.parse(JSON.stringify(this.dataList))
+    //     this.dataList = this.orderBy(d, ["sumMoney"], param.sumMoney).results;
+    //   }
+    },
+    handleCurrentChange(val) {
+      this.msg.pageIndex = val;
+      this.getList();
+    },
+    getList() {
+      this.loading = true;
+      this.apipost(
+        "sellcommission_GetOPCommissionDetailsList",
+        this.msg,
+        res => {
+            // console.log("ressfasf",res);
+          this.loading = false;
+          if (res.data.resultCode == 1) {
+            this.dataList = res.data.data.pageData;
+            this.total = res.data.data.count;
+            this.dataList.forEach(x=>{
+              x.sumMoney=x.CommissionMoney
+            })
+            this.dataListTwo = JSON.parse(JSON.stringify(this.dataList))
+          } else {
+            this.Error(res.data.message);
+          }
+        },
+        null
+      );
+    },
+    //切换排序
+    handleClick(tab, event) {
+      if (this.activeName == "first") {
+        // this.commonName='姓名'
+        this.msg.OrderStr = "UserId";
+      } else {
+        // this.commonName='公司名'
+        this.msg.OrderStr = "RB_Branch_Id";
+      }
+      this.getList();
+    },
+    //跳转
+    getInfo(item) {
+      var dateStr = item.Periods;
+      var year = dateStr.substring(0, 4);
+      var month = dateStr.substring(4, 6);
+
+      var nextMonthFirstDay = new Date(year, month, 1);
+
+      var oneDay = 1000 * 60 * 60 * 24;
+      var entDay = new Date(nextMonthFirstDay - oneDay).Format("yyyy-MM-dd");
+      var startDay = year + "-" + month + "-" + "01";
+      var userId = item.userId;
+
+      this.$router.push({
+        path: "enrollTotal",
+        query: {
+          EmployeeId: userId,
+          starTime: startDay,
+          endTime: entDay,
+          blank:'y'
+        }
+      });
+    }
+  },
+  mounted() {
+    this.msg.pageSize = 10000; //不分页
+    this.msg.ParentId = this.$route.query.ParentId;
+    let dt=new Date()
+    this.stringPerons=(dt.getMonth()==0?(dt.getFullYear()-1):dt.getFullYear())+''+(dt.getMonth().toString().length<2?'0':'')+(dt.getMonth()==0?12:dt.getMonth());
+    console.log(this.stringPerons)
+    this.getList();
+    this.getCompanyList();
+  },
+  created(){
+      Vue.component('commission-table-operation',{
+      template:`<div style='width:80px;height:40px;background:#fff;text-align:center;position: relative;left:-5px;padding-top: 6px;padding-top:6px;'><el-button type="primary" size='mini' icon="el-icon-view" circle @click="see(rowData,index)"></el-button></div>`,
+      props:{
+          rowData:{
+              type:Object
+          },
+          field:{
+              type:String
+          },
+          index:{
+              type:Number
+          }
+      },
+      methods:{
+        see(){
+          let params = {type:'see',data:this.rowData};
+          this.$emit('on-custom-comp',params);
+        }
+      }
+    })
+  }
+  
+};
+</script>
+<style>
+
+.commissionDetails-box .el-button.is-circle{padding: 5px !important;}
+.commissionDetails-box .v-table-body-cell span {
+    display: block;
+    width: 100%;
+}
+</style>

src/components/FinancialModule/OPRules.vue

+
+<template>
+  <div class="Feedback">
+      <ul style="overflow: initial!important">
+         <li>
+          <span>
+            <em>公司</em>
+          </span>
+          <el-select filterable v-model="obj.BranchId" >
+            <el-option label="不限" :value='-1'></el-option>
+              <el-option v-for="item in companyList" :label='item.BName' :value='item.Id' :key='item.Id'>
+              </el-option>
+          </el-select>
+        </li>
+        <li>
+          <span>
+            <em>线路</em>
+          </span>
+          <el-select filterable v-model="obj.LineId" >
+            <el-option label="不限" :value='0'></el-option>
+            <el-option v-for="item in LineList" :label='item.LineName' :value='item.LineID' :key='item.LineID'></el-option>
+          </el-select>
+        </li>
+        
+        <li>
+          <input
+            type="button"
+            class="hollowFixedBtn"
+            value="查询"
+            @click="getList()"
+          >
+          <input
+            type="button"
+            class="hollowFixedBtn"
+            value="新增"
+            @click="addRule"
+          >
+        </li>
+      </ul>
+    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
+      <tr>
+        <th>公司名称</th>
+        
+        <th>线路名称</th>
+        <th>系列名称</th>
+        <th>参与人员</th>
+        <th>负责人金额</th>
+        <th>助理金额</th>
+        <th>描述</th>
+        <th>操作时间</th>
+        <th>操作人</th>
+        <th>操作</th>
+      </tr>
+      <tr v-for="(item,i) in dataList" :key="i">
+        <td>{{item.BranchName}}</td>
+        
+        <td>{{item.LineName}}</td>
+        <td>{{item.LtName}}</td>
+        <td>{{item.EmployeeName}}</td>
+        <td>{{item.ManagerMoney}}</td>
+        <td>{{item.InternMoney}}</td>
+        <td>{{item.Description}}</td>
+        <td>{{item.UpdateDate}}</td>
+        <td>{{item.UpdateBy}}</td>
+        <td>
+            <el-button @click="SetRules(item)" style="padding:4px" type="primary" icon="el-icon-edit" circle></el-button>
+            <el-button @click="Delete(item)" style="padding:4px" type="danger" icon="el-icon-delete" circle></el-button>
+            </td>
+       
+      </tr>
+      <tr v-if="dataList.length==0">
+        <td colspan="12" align="center">暂无数据</td>
+      </tr>
+    </table>
+    <el-dialog
+        title="提成规则"
+        :visible.sync="ruleVisible"
+        width="400px">
+        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+            <el-form-item label="公司" prop="BranchId">
+                <el-select filterable v-model="form.BranchId" >
+                    <el-option v-for="item in companyList" :label='item.BName' :value='item.Id' :key='item.Id'>
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="参与人员" prop="EmployeeIdList">
+                <el-select class="multiple_input" filterable multiple collapse-tags v-model="form.EmployeeIdList" >
+                    
+                    <el-option v-for="item in EmployeeList" :label="item.EmName"
+                          :value="item.EmployeeId" :key="item.EmployeeId"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="线路" prop="LineIdList">
+                <el-select class="multiple_input" filterable multiple collapse-tags v-model="form.LineIdList" @change="getLineTeamList">
+                    <el-option label='全线' :value='-1' :key='-1'></el-option>                    
+                    <el-option v-for="item in LineList" :label='item.LineName' :value='item.LineID' :key='item.LineID'></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="系列" v-show="form.LineIdList.length==1 && form.LineIdList[0]!=-1">
+                <el-select class="multiple_input" filterable multiple collapse-tags v-model="form.LtIdList" >
+                    <el-option v-for="item in LineTeamList" :label='item.LtName' :value='item.LtID' :key='item.LtID'></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="负责人金额" prop="ManagerMoney">
+                <el-input @keyup.native="checkInteger(form,'ManagerMoney')" v-model="form.ManagerMoney"></el-input>
+            </el-form-item>
+            <el-form-item label="助理金额" prop="InternMoney">
+                <el-input @keyup.native="checkInteger(form,'InternMoney')" v-model="form.InternMoney"></el-input>
+            </el-form-item>
+            <el-form-item label="描述">
+                <el-input v-model="form.Description"></el-input>
+            </el-form-item>
+        </el-form> 
+        <span slot="footer" class="dialog-footer">
+            <el-button size="small" @click="ruleVisible = false">取 消</el-button>
+            <el-button size="small" type="danger" @click="RulesOk('form')">确 定</el-button>
+        </span>
+        </el-dialog>
+  </div>
+</template>
+
+<script>
+import moment from "moment"
+import { constants } from 'fs';
+export default {
+    name: 'Feedback',
+    data (){
+        return{
+            obj:{
+                BranchId:-1,
+                LineId:0,
+            },
+            dataList:[],
+            loading:false,
+            dateList:[],
+            LineList:[],
+            companyList:[],
+            ruleVisible:false,
+            form:{
+                BranchId:"",
+                Description:"",
+                EmployeeIdList:[],
+                LineIdList:[],
+                LtIdList:[],
+                InternMoney:'',
+                ManagerMoney:'',
+            },
+            LineTeamList:[],
+            EmployeeList:[],
+            rules:{ 
+                BranchId: [
+                    { required: true, message: '请选择公司', trigger: 'change' }
+                ],
+                EmployeeIdList: [
+                    { required: true, message: '请选择参与人员', trigger: 'change' }
+                ],
+                LineIdList: [
+                    { required: true, message: '请选择线路', trigger: 'change' }
+                ],
+                ManagerMoney: [{ required: true, message: this.$t('rule.qsrjxmingcheng'), trigger: "blur" }],
+                InternMoney: [{ required: true, message: this.$t('rule.qsrjxmingcheng'), trigger: "blur" }],
+            },
+        }
+    },
+    created(){
+    },
+    mounted(){
+    this.getCompany();
+       this.getLineList();
+       this.getList();
+       this.getEmployeeList();
+       
+    },
+    methods:{
+        Delete(item) {
+            this.$confirm("是否删除? 删除后不可恢复", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+            })
+            .then(() => {
+                this.apipost('sellcommission_DelOPCommissionRule', {RuleId:item.Id}, res => {
+                if (res.data.resultCode == 1) {
+                    this.Success(res.data.message)
+                    this.getList()
+                }else{
+                    this.Error(res.data.message)
+                    
+                }
+                })
+            })
+            .catch(() => {});
+        },
+        addRule(){
+            this.ruleVisible=true;
+            this.form={
+                BranchId:"",
+                Description:"",
+                EmployeeIdList:[],
+                LineIdList:[],
+                LtIdList:[],
+                InternMoney:'',
+                ManagerMoney:'',
+            }
+        },
+        SetRules(item){
+            this.ruleVisible=true;
+            this.form={
+                Id:item.Id,
+                BranchId:item.BranchId,
+                Description:item.Description,
+                EmployeeIdList:item.EmployeeIdList,
+                LineIdList:item.LineIdList,
+                LtIdList:item.LtIdList,
+                InternMoney:item.InternMoney,
+                ManagerMoney:item.ManagerMoney,
+            }
+            // console.log("item",item);
+            // console.log("form",this.form);
+
+            this.getLineTeamList();
+        },
+        RulesOk(formName){
+             this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    this.apipost(
+                        'sellcommission_SetOPCommissionRule', this.form,
+                        res => {
+                            if (res.data.resultCode == 1) {
+                                this.getList();
+                                this.ruleVisible=false;
+                                this.Success(res.data.message)
+
+                            }else{
+                                this.Error(res.data.message)
+                            }
+                        },
+                        err => {
+                        }
+                        )
+                } else {
+                    
+                    
+                }
+                });
+            
+        },
+        getEmployeeList () {
+            let userInfo = this.getLocalStorage()
+            let msg = {
+            GroupId: userInfo.RB_Group_id,
+            BranchId: '-1',
+            DepartmentId: '-1',
+            PostId: '-1',
+            IsLeave: '0'
+            }
+            this.apipost(
+            'admin_get_EmployeeGetList', {},
+            res => {
+                if (res.data.resultCode == 1) {
+                this.EmployeeList = res.data.data
+                }
+            },
+            err => {
+            }
+            )
+        },
+        //获取系列列表
+      getLineTeamList() {
+        if(this.form.LineIdList.indexOf(-1)!=-1){
+            this.form.LineIdList=[-1];
+            this.form.LtIdList = [];
+            return;
+          }
+        if(this.form.LineIdList.length>1){
+            this.form.LtIdList = [];
+            return;
+        }
+        let msg = {
+          lineID: this.form.LineIdList[0],
+        }
+        console.log(" this.form.LineIdList[0]", this.form.LineIdList[0])
+        this.apipost('team_post_GetList', msg, res => {
+          if (res.data.resultCode == 1) {
+            this.LineTeamList = res.data.data;
+            console.log("this.LineTeamList",this.LineTeamList)
+          }
+        })
+      },
+        getCompany() {
+            let userInfo = this.getLocalStorage()
+            var RB_Group_id = userInfo.RB_Group_id
+            let msg = {
+            Status: 0,
+            is_show: 0,
+            RB_Group_Id: RB_Group_id
+            }
+            this.apipost(
+            'admin_get_BranchGetList',
+            msg,
+            res => {
+                if (res.data.resultCode == 1) {
+                this.companyList = res.data.data;
+                }else{
+                    this.Error(res.data.message);
+                }
+            },
+            err => {}
+            )
+        },
+      getLineList() {
+        this.apipost("line_post_GetAllList_V2", {LineDirection: 0}, res => {
+          if (res.data.resultCode == 1) {
+            this.LineList = res.data.data;
+          }
+        });
+      },
+        getList(){
+           
+            this.loading=true;
+            this.apipost("sellcommission_GetOPCommissionRuleList", this.obj, res => {
+                // console.log("ressfaf",res);
+                this.loading=false;
+            if (res.data.resultCode == 1) {
+                this.dataList = res.data.data;
+            }
+            });
+        },
+
+    }	
+}
+		
+</script>
+<style>
+.Feedback ul>li{
+    display: inline-block;
+    font-size: 12px;
+    color: #666;
+    margin: 20px 30px 0px 0;
+}
+.Feedback .singeRowTable{
+    margin-top: 20px;
+}
+</style>

src/components/FinancialModule/OPcommissionPeriods.vue

+<style>
+  .CM_look{
+      padding:4px!important;
+      position: relative;
+      top:1px;
+  }
+</style>
+<template>
+  <div class="flexOne">
+    <!-- <div class="query-box">
+      <ul>
+        <li>
+            <input type="button" class="normalBtn" @click="generateTable" value="生成提成报表"/>
+        </li>
+      </ul>
+    </div> -->
+    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
+      <tr>
+        <th>期数</th>
+        <th>提成总金额</th>
+        <th>{{$t('admin.admin_czPerson')}}</th>
+        <th>日期</th>
+        <th>{{$t('system.table_operation')}}</th>
+      </tr>
+      <tr v-for="item in dataList">
+        <td>{{item.Periods}}</td>
+        <td>{{item.SumPrice}}</td>
+        <td>{{item.CreateByStr}}</td>
+        <td>{{item.CreateStr}}</td>
+        <td>
+          
+          <el-tooltip class="item" effect="dark" content="查看" placement="top">
+            <el-button type="primary" class="CM_look" @click="goUrl('OPCommissionDetail',item.ID)" icon="iconfont icon-chakan" circle></el-button>
+          </el-tooltip>
+        </td>
+      </tr>
+    </table>
+    <!-- 分页 -->
+    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
+          layout="total,prev, pager, next, jumper" :page-size='msg.PageSize' :total='total'>
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        msg: {
+          PageIndex: 1,
+          PageSize: 20
+        },
+        loading:false,
+        //数据源
+        dataList:[],
+        total:0,
+        currentPage: 1,
+      }
+    },
+    mounted() {
+      this.getList();
+    },
+    methods: {
+      handleCurrentChange(val) {
+        this.msg.PageIndex = val;
+        this.getList();
+      },
+      goUrl(path,id) {
+        this.$router.push({
+          path: path,
+          query: {
+            ParentId:id,
+            blank: 'y',
+            tab: '期数详情'
+          }
+        });
+      },
+      //获取数据
+      getList() {
+        this.loading = true;
+        this.apipost(
+          "sellcommission_GetOPCommissionPageList",
+          this.msg,
+          res => {
+            this.loading = false;
+            if(res.data.resultCode==1){
+              this.dataList = res.data.data.pageData;
+              console.log(res);
+              this.total = res.data.data.count;
+            }else{
+              this.Error(res.data.message);
+            }
+          },
+          null
+        );
+      },
+      //生成提成报表
+      generateTable(){
+       let msg = {
+          UserId: 0
+        }
+        this.apipost(
+            "sellcommission_SetGenerateCommission",msg,
+            res => {
+              if(res.data.resultCode==1){
+                this.getList();
+                this.Success('报表生成成功')
+              }else{
+                this.Error(res.data.message);
+              }
+            },
+            null
+          );
+        }
+    }
+  }
+</script>

src/router/config.js

@@ -3414,6 +3414,30 @@ export default {
                                 title: '销售提成规则'
                             }
                         },
+                        {
+                            path: '/OPRules',
+                            name: 'OPRules',
+                            component: resolve => require(['@/components/FinancialModule/OPRules'], resolve),
+                            meta: {
+                                title: 'op提成规则'
+                            }
+                        },
+                        {
+                            path: '/OPcommissionPeriods',
+                            name: 'OPcommissionPeriods',
+                            component: resolve => require(['@/components/FinancialModule/OPcommissionPeriods'], resolve),
+                            meta: {
+                                title: 'op提成期数'
+                            }
+                        },
+                        {
+                            path: '/OPCommissionDetail',
+                            name: 'OPCommissionDetail',
+                            component: resolve => require(['@/components/FinancialModule/OPCommissionDetail'], resolve),
+                            meta: {
+                                title: 'op提成期数详情'
+                            }
+                        },
                         {
                             path: '/CouponList',
                             name: 'CouponList',