调整提成详情界面功能

package.json

 {
-  "name": "vue0404",
+  "name": "mage",
   "version": "1.0.0",
-  "description": "A Vue.js project",
-  "author": "ZK",
+  "description": "MAGE ERP Manager",
+  "author": "VIITTO",
   "private": true,
   "scripts": {
     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

src/components/administrative/CommissionDetail.vue

-<style>
-  .ComDetail_nav{margin: 20px 0 0 0 ;background-color: #f5f5f5;margin-bottom:20px;}
-  .ComDetail_nav li{float: left;font-size: 14px;color: #666666;padding: 15px 20px;cursor: pointer;position: relative;background-color: #f1f1f1;margin-right: 5px}
-  .ComDetail_nav li._active{background-color:#FFFFFF;color: #333333 }
-  .ComDetail_nav li._active::after{content: "";width: 20px;height: 3px;background-color: #E95252;display: inline-block;position: absolute;bottom: 0;left: 38%;}
-  .CD_orderNum{
-    color: #3980C8;
-    border-bottom: 1px dotted #3980C8;
-    cursor: pointer;      
-  }
-</style>
-
 <template>
-    <div>
-        <!-- <ul class="ComDetail_nav clearfix">
-            <li :class="active==1?'_active':''" @click="active=1,commonName='姓名'">按人排序</li>
-            <li :class="active==2?'_active':''" @click="active=2,commonName='公司名'">按公司排序</li>
-        </ul> -->
-        <el-tabs v-model="activeName" @tab-click="handleClick">
-            <el-tab-pane label="按人排序" name="first"></el-tab-pane>
-            <el-tab-pane label="按公司排序" name="second"></el-tab-pane>
-        </el-tabs>
-        <table border="0" cellspacing="0" cellpadding="0" class="singeRowTable">
-            <tr>
-                <th width="300">{{commonName}}</th>
-                <th>提成金额</th>
-                <th>期数</th>
-                <th width="500">备注</th>
-                <th>操作</th>
-            </tr>
-            <tr v-for="item in dataList">
-                <td>{{item.createByStr}}</td>
-                <td>{{item.commissionMoney}}</td>
-                <td>{{item.periods}}</td>
-                <!-- <td>{{item.ruleName}}</td> -->
-                <td></td>
-                <td>
-                    <input type="button" @click="getInfo(item)" class="normalBtn" value="详情"/>
-                </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>
+    <div style="height:20px;"> </div>
+    <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>
-  export default {
-    data(){
-      return{
-        activeName: "first",    
-        commonName:'姓名',
-        loading:false,
-        msg:{
-          pageIndex: 1,
-          pageSize: 20,
-          ParentId:0,
-          OrderStr:'UserId'
-        },
-        total:0,
-        currentPage: 1,
-        dataList:[]
+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:[]
+    };
+  },
+  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.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;
       }
-    },methods:{
-        handleCurrentChange(val) {
-            this.msg.pageIndex = val;
-            this.getList();
-        },
-        getList(){
-            this.loading = true;
-            this.apipost(
-            "sellcommission_GetDetailsList",
-            this.msg,
-            res => {
-                this.loading = false;
-                if(res.data.resultCode==1){
-                    this.dataList = res.data.data.pageData;
-                    this.total = res.data.data.count;
-                    console.log(this.dataList,'dataList');
-                }else{
-                    this.Error(res.data.message);
-                }
-            },
-            null
-            );
+    },
+    filterMethod(filters){
+      if(filters.bName=='')
+        this.msg.BName=-1
+      else
+        this.msg.BName=filters.bName
+    },
+    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 {
+          }
         },
-        //切换排序
-        handleClick(tab, event) {
-            if (this.activeName == "first") {
-                // this.commonName='姓名'
-                this.msg.OrderStr = 'UserId'
-            }else {
-                // this.commonName='公司名'
-                this.msg.OrderStr = 'RB_Branch_Id'
-            }
-            this.getList();
+        err => {}
+      );
+    },
+    initColums() {
+      this.isReady = false;
+      let that = this;
+      let companyList = [];
+      this.CompanyList.forEach(x => {
+        let item = {};
+        item.label = x.BName;
+        item.value = x.Id;
+        companyList.push(item);
+      });
+      let company = {
+        field: "bName",
+        title: "公司",
+        width: 40,
+        titleAlign: "left",
+        columnAlign: "left",
+        isResize: true,
+        // filterMultiple: false,
+        // filters: companyList,
+        // result: "",
+        // type: "select",
+        orderBy: "asc"
+        // isFrozen:true
+      };
+      let department = {
+        field: "departmentName",
+        title: "部门",
+        width: 80,
+        titleAlign: "left",
+        columnAlign: "left",
+        isResize: true
+      };
+      let userName = {
+        field: "createByStr",
+        title: "姓名",
+        titleAlign: "left",
+        columnAlign: "left",
+        isResize: true,
+        width: 80
+      };
+      let commissionMoney = {
+        field: "commissionMoney",
+        title: "提成金额",
+        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 periods = {
+        field: "periods",
+        title: "期数",
+        titleAlign: "left",
+        columnAlign: "left",
+        isResize: true,
+        width: 80
+      };
+      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(periods);
+      this.columns.push(remark);
+      this.columns.push(opera);
+      this.isReady = true;
+    },
+    sortChange(param) {
+      // if (param.Royalty != "") {
+      //   this.msg.OrderBy = `Royalty ${param.Royalty}`;
+      // } else if (param.Initialbalance != "") {
+      //   this.msg.OrderBy = `Initialbalance ${param.Initialbalance}`;
+      // }
+      
+      // this.getList();
+      if(param.BName!=''){
+        this.msg.OrderStr='RB_Branch_Id '+param.bName
+      }
+      if(param.commissionMoney!=''){
+        this.msg.OrderStr='CommissionMoney '+param.commissionMoney
+      }
+      this.getList();
+    },
+    handleCurrentChange(val) {
+      this.msg.pageIndex = val;
+      this.getList();
+    },
+    getList() {
+      this.loading = true;
+      this.apipost(
+        "sellcommission_GetDetailsList",
+        this.msg,
+        res => {
+          this.loading = false;
+          if (res.data.resultCode == 1) {
+            this.dataList = res.data.data.pageData;
+            this.total = res.data.data.count;
+            console.log(this.dataList, "dataList");
+          } else {
+            this.Error(res.data.message);
+          }
         },
-        //跳转
-        getInfo(item){
-            var dateStr = item.periods;
-            var year = dateStr.substring(0,4);
-            var month = dateStr.substring(4,6);
+        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 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,
-                }
-            });
+      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
         }
-    },mounted(){
-        this.msg.ParentId = this.$route.query.ParentId;
-        this.getList();
+      });
     }
+  },
+  mounted() {
+    this.msg.pageSize = 10000; //不分页
+    this.msg.ParentId = this.$route.query.ParentId;
+    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>
+.ComDetail_nav {
+  margin: 20px 0 0 0;
+  background-color: #f5f5f5;
+  margin-bottom: 20px;
+}
+.ComDetail_nav li {
+  float: left;
+  font-size: 14px;
+  color: #666666;
+  padding: 15px 20px;
+  cursor: pointer;
+  position: relative;
+  background-color: #f1f1f1;
+  margin-right: 5px;
+}
+.ComDetail_nav li._active {
+  background-color: #ffffff;
+  color: #333333;
+}
+.ComDetail_nav li._active::after {
+  content: "";
+  width: 20px;
+  height: 3px;
+  background-color: #e95252;
+  display: inline-block;
+  position: absolute;
+  bottom: 0;
+  left: 38%;
+}
+.CD_orderNum {
+  color: #3980c8;
+  border-bottom: 1px dotted #3980c8;
+  cursor: pointer;
+}
+</style>