qnadmin/src/views/Shareholders/CommissionStatistic.vue

<template>
  <Container>
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="180"></el-table-column>
        <el-table-column
          prop="staffName"
          label="姓名"
          width="180"
        ></el-table-column>
        <el-table-column prop="target" label="目标"></el-table-column>
        <el-table-column prop="completed" label="已完成"></el-table-column>
        <el-table-column prop="rewardOrder" label="订单奖金"></el-table-column>
        <el-table-column prop="rewardGoods" label="商品奖金"></el-table-column>
        <el-table-column prop="rewardOut" label="已经发放"></el-table-column>
        <el-table-column prop="reward" label="未发放"></el-table-column>
        <el-table-column fixed="right" label="操作" width="210">
          <template slot-scope="scope">
            <el-button
              v-if="
                $accessCheck(
                  $Access.CommissionStatisticDetailCommissionStatistic
                )
              "
              type="text"
              size="small"
              @click="
                $router.push(
                  `/saleCommission/CommissionList?id=${scope.row.id}&name=${scope.row.staffName}`
                )
              "
            >
              明细
            </el-button>
            <el-button
              v-if="$accessCheck($Access.CommissionStatisticSetTarget)"
              type="text"
              size="small"
              @click="handleClick(scope.row)"
            >
              设置目标
            </el-button>
            <el-button
              v-if="$accessCheck($Access.CommissionStatisticAmountIssued)"
              type="text"
              size="small"
              @click="moneyClick(scope.row)"
            >
              发放金额
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    分页查询-->
    <FooterPage
      :page-size="pageSize"
      :total-page.sync="total"
      :current-page.sync="page"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
    ></FooterPage>
  </Container>
</template>

<script>
  import { getAllStaff, updateStaffTargetAndReward } from "@/api/Department";
  export default {
    data() {
      return {
        total: 0,
        page: 1,
        pageSize: 10,
        tableData: [],
        departmentId: "",
        search_key: "",
      };
    },
    created() {
      this.getAllStaff();
    },
    activated() {
      if (this.$_isInit()) return;
      this.getAllStaff();
    },
    methods: {
      //  获取列表
      async getAllStaff() {
        const data = await getAllStaff({
          page: this.page,
          pageSize: this.page_size,
          departmentId: this.departmentId,
          keyword: this.search_key,
        });

        this.tableData = data.data;
        this.total = data.pageTotal;
      },
      pageChange(page) {
        this.page = page;
        this.getAllStaff();
      },
      sizeChange(size) {
        this.page_size = size;
        this.pageChange(1);
      },
      // 设置目标
      handleClick(item) {
        this.$prompt("请输入金额", "设置目标", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(({ value }) => {
          this.updateStaffTargetAndReward(item.id, value, 0);
        });
      },
      // 设置金额
      moneyClick(item) {
        this.$prompt("请输入金额", "发放金额", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(({ value }) => {
          this.updateStaffTargetAndReward(item.id, 0, value);
        });
      },
      async updateStaffTargetAndReward(id, target, rewardGo) {
        let params = {};
        if (target) {
          params.target = target;
        }
        if (rewardGo) {
          params.rewardGo = rewardGo;
        }

        const { data } = await updateStaffTargetAndReward(id, params);
        this.$message.success("设置成功");
        this.getAllStaff();
      },
    },
  };
</script>

<style scoped></style>