renli-pc/src/pages/statistics/staffBrokerage/staffBrokerage.vue

<template>
  <!-- 员工工资 -->
  <div>
    <div class="staffRanking_header padding-bottom-xs">
      <div>
        当前年/月份{{ month }}
        <el-button style="margin-left: 50px" size="mini" @click="seve" type="success" v-role="6006001">存档</el-button>
        <el-button size="mini" @click="del" type="primary" v-role="6006001">删除</el-button>
      </div>
      <div class="block">
        <span class="demonstration padding-left-xs">选择日</span>
        <el-date-picker v-model="days" :picker-options="pickerOptions" @change="changeMonth" type="daterange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <el-button size="mini" type="primary" @click="exit()">导出</el-button>
        <el-button size="mini" type="primary" @click="exits()">导出单据明细</el-button>
      </div>

    </div>
    <el-table @row-dblclick="confirm" :data="tableDate" :header-cell-style="{
        background: 'linear-gradient(#6cb3ff, #1873d4)',
        color: '#eeeeee',
      }" :summary-method="getSummaries" show-summary border max-height="700">
      <el-table-column align="center" prop="brandNumber" label="水牌号"></el-table-column>
      <el-table-column align="center" prop="staffName" label="员工名称"></el-table-column>
      <el-table-column align="center" min-width="80" prop="baseSalary" label="底薪">
        <template slot-scope="scope">
          {{scope.row.baseSalary?scope.row.baseSalary:'--'}}
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="80" prop="rechargeyj" label="充值业绩">
        <template slot-scope="scope">
          {{scope.row.rechargeyj?scope.row.rechargeyj:'--'}}
        </template>
      </el-table-column>

      <el-table-column align="center" min-width="80" prop="courseOfTreatmentYJ" label="疗程业绩">
        <template slot-scope="scope">
          {{scope.row.courseOfTreatmentYJ?scope.row.courseOfTreatmentYJ:'--'}}
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="80" prop="lcCardyj" label="充值卡售疗程">
        <template slot-scope="scope">
          {{scope.row.lcCardyj?scope.row.lcCardyj:'--'}}
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="80" prop="rechargeTurnCourseChia" label="疗程转充值卡">
        <template slot-scope="scope">
          {{scope.row.rechargeTurnCourseChia?scope.row.rechargeTurnCourseChia:'--'}}
        </template>
      </el-table-column>

      <el-table-column align="center" label="服务">
        <el-table-column align="center" min-width="80" prop="syxfyj" label="现付业绩">
          <template slot-scope="scope">
            {{scope.row.syxfyj?scope.row.syxfyj:'--'}}
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="80" prop="syczkfyj" label="充值销卡">
          <template slot-scope="scope">
            {{scope.row.syczkfyj?scope.row.syczkfyj:'--'}}
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="80" prop="sylcxkyj" label="疗程销卡">
          <template slot-scope="scope">
            {{scope.row.sylcxkyj?scope.row.sylcxkyj:'--'}}
          </template>
        </el-table-column>
      </el-table-column>
      <!-- <el-table-column align="center" label="促销">
        <el-table-column align="center" min-width="80" prop="cashcxyj" label="现付业绩">
          <template slot-scope="scope">
            {{scope.row.cashcxyj?scope.row.cashcxyj:'--'}}
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="80" prop="cardcxyj" label="卡付业绩">
          <template slot-scope="scope">
            {{scope.row.cardcxyj?scope.row.cardcxyj:'--'}}
          </template>
        </el-table-column>
      </el-table-column> -->
      <el-table-column align="center" label="技师">
        <el-table-column align="center" min-width="80" prop="footMassageChia" label="现付业绩">
          <template slot-scope="scope">
            {{scope.row.footMassageChia?scope.row.footMassageChia:'--'}}
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="80" prop="CardFootMassageChia" label="卡付业绩">
          <template slot-scope="scope">
            {{scope.row.CardFootMassageChia?scope.row.CardFootMassageChia:'--'}}
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="80" prop="marketChia" label="推销">
          <template slot-scope="scope">
            {{scope.row.marketChia?scope.row.marketChia:'--'}}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" min-width="80" prop="tkyj" label="退款业绩">
        <template slot-scope="scope">
          {{scope.row.tkyj?scope.row.tkyj:'--'}}
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="80" prop="kjhyj" label="扣减后业绩">
        <template slot-scope="scope">
          {{scope.row.kjhyj?scope.row.kjhyj:'--'}}
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="80" prop="xftlcczhjyj" label="消费退疗程充值合计">
        <template slot-scope="scope">
          {{scope.row.xftlcczhjyj?scope.row.xftlcczhjyj:'--'}}
        </template>
      </el-table-column>

      <el-table-column align="center" min-width="120" prop="ntmoney" label="内调金额"></el-table-column>
      <el-table-column align="center" min-width="120" prop="cooperationAchi" label="合作方业绩"></el-table-column>
      <el-table-column align="center" min-width="120" prop="zyj" label="总业绩"></el-table-column>
      <el-table-column align="center" min-width="120" prop="totaltc" label="总提成"></el-table-column>
      <el-table-column align="center" min-width="120" prop="totalWages" label="结算"></el-table-column>
    </el-table>
    <perform ref="perform"></perform>
  </div>
</template>

<script>
import {
  selectSalary,
  addSalary,
  delSalary,
  achiCommListsgroup,
  exportachi,
  exportachiwhole,
} from "@/api/statistics.js";
import { partten } from "../../../../partten/index";
import perform from "./examine/index";
export default {
  components: { perform },
  data() {
    return {
      days:'',
      tableDate: [{}],
      month: partten.months,
      pickerOptions: {
        //组件限制方法
        onPick: ({ maxDate, minDate }) => {
          this.choiceDate = minDate.getTime();
          if (maxDate) {
            this.choiceDate = "";
          }
        },
        disabledDate: (time) => {
          const self = this;
          if (!!self.choiceDate) {
            const startDay =
              (new Date(self.choiceDate).getDate() - 1) * 24 * 3600 * 1000;
            const endDay =
              (new Date(
                new Date(self.choiceDate).getFullYear(),
                new Date(self.choiceDate).getMonth() + 1,
                0
              ).getDate() -
                new Date(self.choiceDate).getDate()) *
              24 *
              3600 *
              1000;
            let minTime = self.choiceDate - startDay;
            let maxTime = self.choiceDate + endDay;
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        },
      },
    };
  },
  created(){
    let sDate = this.formatTime(new Date(), "YYYY-MM-DD 00:00:00");
    let eDate = this.formatTime(new Date(), "YYYY-MM-DD 23:59:59");
    this.days = [sDate, eDate];
    this.changeMonth(this.days)
  },
  methods: {
    //导出方法
    exit() {
      let date1 = this.formatTime(this.days[0], "YYYY-MM-DD 00:00:00");
      let date2 = this.formatTime(this.days[1], "YYYY-MM-DD 23:59:59");
      let form = { startDate: date1, endDate: date2 };
      exportachi(form).then((res) => {
        let blob = new Blob([res]);
        var a = document.createElement("a");
        var url = window.URL.createObjectURL(blob);
        console.log(url);
        a.href = url;
        a.download = "员工业绩导出表.xlsx";
        a.click();
        window.URL.revokeObjectURL(url);
      });
    },
    exits() {
      let date1 = this.formatTime(this.days[0], "YYYY-MM-DD 00:00:00");
      let date2 = this.formatTime(this.days[1], "YYYY-MM-DD 23:59:59");
      let form = { startDate: date1, endDate: date2 };
      exportachiwhole(form).then((res) => {
        let blob = new Blob([res]);
        var a = document.createElement("a");
        var url = window.URL.createObjectURL(blob);
        console.log(url);
        a.href = url;
        a.download = "员工工资明细导出表.xlsx";
        a.click();
        window.URL.revokeObjectURL(url);
      });
    },
    handleStaffName(index) {
      let tableDate = Array.from(this.tableDate);
      tableDate[index].show = true;
      this.tableDate = Array.from(tableDate);
    },
    del() {
      this.$confirm("将之前保存数据库的数据进行删除 , 是否继续", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        cancelButtonClass: "cancelbtnFalses",
        confirmButtonClass: "confirmbtnFalses",
      }).then(() => {
        delSalary({ type: 3 }).then((res) => {
          if (res.code == "000000") {
            this.$message.success({ message: res.message });
          } else {
            this.$alert(res.message, "提示", {
              confirmButtonText: "确定",
              confirmButtonClass: "confirmbtnFalses",
              type: "warning",
              center: true,
              callback: (action) => {},
            });
          }
        });
      });
    },
    seve() {
      this.$confirm("将当前数据保存到数据库备份 , 是否继续保存", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        cancelButtonClass: "cancelbtnFalses",
        confirmButtonClass: "confirmbtnFalses",
      }).then(() => {
        addSalary(this.tableDate).then((res) => {
          if (res.code == "000000") {
            this.$message.success({ message: res.message });
          } else {
            this.$alert(res.message, "提示", {
              confirmButtonText: "确定",
              confirmButtonClass: "confirmbtnFalses",
              type: "warning",
              center: true,
              callback: (action) => {},
            });
          }
        });
      });
    },
    changeMonth(res) {
      console.log(res)
      let date = this.formatTime(res[1], "YYYY-MM-DD 23:59:59");
      var form = { startDate: res[0], endDate: date };
      let month = this.formatTime(this.month, "YYYY-MM");
      achiCommListsgroup(form).then((res) => {
        if (res.code == "000000") {
          res.rows.forEach((item) => {
            item.baseSalary = item.baseSalary == null ? 0 : item.baseSalary * 1;
            item.commSalary = item.commSalary == null ? 0 : item.commSalary * 1;
            item.sumNumber = (item.baseSalary + item.commSalary).toFixed(2) * 1;
            item.startDate = form.startDate;
            item.endDate = form.endDate;
            console.log(item);
          });

          this.tableDate = res.rows;
        } else {
          this.$alert(res.message, "提示", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },
    achiCommListsgroup() {
      let month = this.formatTime(new Date(), "YYYY-MM");
      let date1 = this.formatTime(new Date(), "YYYY-MM-DD 00:00:00");
      let date2 = this.formatTime(new Date(), "YYYY-MM-DD 23:59:59");
      let form = { startDate: date1, endDate: date2 };
      achiCommListsgroup(form).then((res) => {
        if (res.code == "000000") {
          res.rows.forEach((item) => {
            item.baseSalary = item.baseSalary == null ? 0 : item.baseSalary * 1;
            item.commSalary = item.commSalary == null ? 0 : item.commSalary * 1;
            item.sumNumber = (item.baseSalary + item.commSalary).toFixed(2) * 1;
            item.startDate = form.startDate;
            item.endDate = form.endDate;
          });
          this.tableDate = res.rows;
        } else {
          this.$alert(res.message, "提示", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },
    confirm(row) {
      row.type = 3;
      this.$refs.perform.show(row);
    },
    //指定列求和
    //数组按对应字段合计返回方法
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }

        const values = data.map((item) => Number(item[column.property]));
        if (column.property == "baseSalary") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return (prev + curr).toFixed(2) * 1;
            } else {
              sums[index] = "--";
            }
          }, 0);
          sums[index] += " ";
        } else if (column.property == "zyj") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return (prev + curr).toFixed(2) * 1;
            } else {
              sums[index] = "--";
            }
          }, 0);
          sums[index] += " ";
        } else if (column.property == "totalWages") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return (prev + curr).toFixed(2) * 1;
            } else {
              sums[index] = "--";
            }
          }, 0);
          sums[index] += " ";
        } else if (column.property == "totaltc") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return (prev + curr).toFixed(2) * 1;
            } else {
              sums[index] = "--";
            }
          }, 0);
          sums[index] += " ";
        } else {
          sums[index] = "--";
        }
      });
      return sums;
    },
  },
  activated() {
    let sDate = this.formatTime(new Date(), "YYYY-MM-DD 00:00:00");
    let eDate = this.formatTime(new Date(), "YYYY-MM-DD 23:59:59");
    this.days = [sDate, eDate];
    this.achiCommListsgroup();
  },
};
</script>

<style>
.staffRanking_header {
  display: flex;
  justify-content: space-between;
}
</style>