oil-station/fuintAdmin/src/views/staffCommission/staffCommission.vue

<template>
  <div class="app-container">

    <div class="tab-box">
      <div class="tab_" :class="{active:index== tabindex }" @click="getindex(index)" v-for="(item,index) in  tabs"
           :key="index">
        {{ item.name }}
      </div>
    </div>

    <div class="cot-box">
      <div v-if="tabindex==0">
        <div>
          <el-form :model="queryParams1" ref="queryForm" size="small" :inline="true" label-width="68px">
            <el-form-item label="" prop="staffId">
              <el-select
                v-model="queryParams1.staffId"
                clearable
                placeholder="请选择员工"
              >
                <el-option v-for="item in staffList" :key="item.id" :label="item.realName" :value="item.id+''">
                  <span style="float: left">{{ item.realName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.mobile }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="roleId">
              <el-select
                v-model="queryParams1.roleId"
                clearable
                placeholder="请选择角色名称"
              >
                <el-option
                  v-for="item in roleList"
                  :key="item.dutyId+''"
                  :label="item.dutyName"
                  :value="item.dutyId+''"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-date-picker
                v-model="beginTime"
                style="width: 160px"
                type="date"
                placeholder="开始日期">
              </el-date-picker>
              至
              <el-date-picker
                v-model="endTime"
                style="width: 160px"
                type="date"
                placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item style="float: right;margin-right: 0px">
              <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div style="height: 72vh;overflow: auto">
          <el-table ref="tables" v-loading="loading" :data="staffCommissionList" border>
            <el-table-column type="index" width="80" align="center" label="序号"/>
            <!--            <el-table-column label="员工信息" align="center">-->
            <el-table-column label="员工姓名" prop="staffName" align="center"/>
            <el-table-column label="角色名称" prop="dutyName" align="center"/>
            <el-table-column label="联系方式" prop="staffMobile" align="center"/>
            <!--            </el-table-column>-->
            <!--            <el-table-column label="提成类型" align="center">-->
            <el-table-column label="储值卡充值提成（元）" prop="oilCardRecharge" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.oilCardRecharge || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="囤油卡充值提成（元）" prop="oilStorageRecharge" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.oilStorageRecharge || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="车主加油提成（元）" prop="oilSale" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.oilSale || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="非油品提成（元）" prop="goodsCommission" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.goodsCommission || 0 }}</span>
              </template>
            </el-table-column>
            <!--            </el-table-column>-->
            <el-table-column label="汇总（元）" prop="summary" align="center" width="260">
              <template slot-scope="scope">
                <span>{{ scope.row.summary || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="统计周期" prop="summary" align="center" width="260">
              <template slot-scope="scope">
                <span v-if="beginTime && endTime">{{ parseTime(beginTime) }} ~ {{ parseTime(endTime) }}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="160">
              <template slot-scope="scope">
                <el-button type="text" icon="el-icon-document" @click="lookDetail(scope.row.staffId)">查看详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <pagination
          v-show="total1>0"
          :total="total1"
          :page.sync="queryParams1.page"
          :limit.sync="queryParams1.pageSize"
          @pagination="getStaffCommissionList"
        />
      </div>


      <div  v-if="tabindex==1">
        <div>
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
            <el-form-item label="" prop="name">
              <el-input v-model="queryParams.name" placeholder="请输入方案名称"></el-input>
            </el-form-item>
            <el-form-item label="" prop="classify">
              <el-select
                v-model="queryParams.classify"
                clearable
                placeholder="请选择分类"
              >
                <el-option label="油品提成方案" value="0"></el-option>
                <el-option label="商品提成方案" value="1"></el-option>
                <el-option label="会员充值提成方案" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="staffRoleGroup">
              <el-select
                v-model="queryParams.staffRoleGroup"
                clearable
                placeholder="请选择角色"
              >
                <el-option
                  v-for="item in roleList"
                  :key="item.dutyId+''"
                  :label="item.dutyName"
                  :value="item.dutyId+''"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-date-picker
                v-model="beginTime2"
                style="width: 160px"
                type="date"
                placeholder="开始日期">
              </el-date-picker>
              至
              <el-date-picker
                v-model="endTime2"
                style="width: 160px"
                type="date"
                placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item style="float: right;margin-right: 0px">
              <el-button type="primary" icon="el-icon-search" @click="handleQuery2">搜索</el-button>
              <el-button icon="el-icon-refresh" @click="resetQuery2">重置</el-button>
              <el-button
                type="primary"
                icon="el-icon-plus"
                @click="handleAdd"
                v-hasPermi="['staffCommission:staffCommission:add']"
              >新增提成方案
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div style="height: 72vh; overflow: auto ">


        <el-table ref="tables" v-loading="loading" :data="list" border
                  @selection-change="handleSelectionChange" :default-sort="defaultSort"
                  @sort-change="handleSortChange">
          <el-table-column type="index" width="80" align="center" label="序号"/>
          <el-table-column label="方案名称" prop="name" align="center"/>
          <el-table-column label="分类" prop="classify" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.classify==0">油品提成方案</span>
              <span v-if="scope.row.classify==1">商品提成方案</span>
              <span v-if="scope.row.classify==2">会员充值提成方案</span>
            </template>
          </el-table-column>
          <el-table-column label="适用角色" prop="dutyName" align="center">
            <!--            <template slot-scope="scope">-->
            <!--              <span>{{scope.row.staffRoleGroup ? getStaffDuty(roleList,scope.row.staffRoleGroup) : "&#45;&#45;"}}</span>-->
            <!--            </template>-->
          </el-table-column>
          <el-table-column label="提成来源" prop="commissionSource" align="center"/>
          <el-table-column label="满足条件" prop="meetCondition" align="center" width="260">
            <template slot-scope="scope">
              <span v-if="scope.row.type == 'orderAmount'">
                订单金额消费满{{ scope.row.meetCondition }}元
              </span>
              <span v-if="scope.row.type == 'payAmount'">
                实际金额消费满{{ scope.row.meetCondition }}元
              </span>
              <span v-if="scope.row.type == 'refuleNum'">
                加油数量消费满{{ scope.row.meetCondition }}单位（升/立方）
              </span>
            </template>
          </el-table-column>
          <el-table-column label="提成信息" prop="royaltyRate" align="center"/>
          <el-table-column label="方案状态" align="center" prop="status">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                disabled="true"
                active-value="qy"
                inactive-value="jy"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="创建人" align="center" width="160" prop="accountName"></el-table-column>
          <el-table-column label="创建时间" align="center" width="160" prop="createTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="120" fixed='right'>
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
              >修改
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        </div>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>

    </div>

    <!-- 添加或修改提成方案对话框 -->
    <el-dialog center :close-on-click-modal="false" :title="title" width="30%" :visible.sync="open" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="方案名称" prop="name" >
              <el-input v-model="form.name" placeholder="请输入方案名称" maxlength="30"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="分类" prop="classify" >
              <div class="d-s">
                <div class="icon-type" v-for="(item,index) in classifyList" :key="index"
                     :class="{ 'acvtive' : index === tindex1 }" @click="Typeindex1(index)">
                  <img src="../../assets/images/wx.png" style="width: 20px;height: 20px" v-if="index != tindex1">
                  <img src="../../assets/images/xz.png" style="width: 20px;height: 20px" v-if="index == tindex1">
                  {{ item }}
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="适用角色" prop="staffRoleGroup">
              <el-select v-model="staffRoleGroup"
                         multiple
                         style="width: 100%"
                         placeholder="请选择角色名称（多选）"
                         @change="getCheckbox">
                <el-option
                  v-for="item in roleList"
                  :key="item.dutyId+''"
                  :label="item.dutyName"
                  :value="item.dutyId+''"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="display: flex;">
            <el-form-item label="提成来源" prop="commissionSource" style="width: 90%;margin-bottom: 0px">
              <el-checkbox-group v-model="form.commissionSource">
                <el-checkbox label="油品"></el-checkbox>
                <el-checkbox label="便利店"></el-checkbox>
                <el-checkbox label="积分商城"></el-checkbox>
                <el-checkbox label="会员充值-电子储值卡"></el-checkbox>
                <el-checkbox label="会员充值-囤油卡"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="提成类型" prop="type">
              <div class="d-s">
                <div class="icon-type" v-for="(item,index) in commissionTypeList" :key="index"
                     :class="{ 'acvtive' : index === tindex }" @click="Typeindex(index,item)">
                  <img src="../../assets/images/wx.png" style="width: 20px;height: 20px" v-if="index != tindex">
                  <img src="../../assets/images/xz.png" style="width: 20px;height: 20px" v-if="index == tindex">
                  {{ item }}
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="消费条件" prop="meetCondition">
              <el-input v-if="form.type == 'orderAmount'" maxlength="10"
                        oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" v-model="form.meetCondition">
                <template slot="prepend">订单金额消费满</template>
                <template slot="append">元</template>
              </el-input>
              <el-input v-if="form.type == 'payAmount'" maxlength="10"
                        oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" v-model="form.meetCondition">
                <template slot="prepend">实际金额消费满</template>
                <template slot="append">元</template>
              </el-input>
              <el-input v-if="form.type == 'refuleNum'" maxlength="10"
                        oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" v-model="form.meetCondition">
                <template slot="prepend">加油数量消费满</template>
                <template slot="append">单位（升/立方）</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="提成金额" prop="royaltyRate">
              <el-input v-model="form.royaltyRate" placeholder="请输入提成" maxlength="10"
                        oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                <el-select v-model="select" style="width: 70px" slot="append" placeholder="请选择">
                  <el-option label="元" value="元"></el-option>
                  <el-option label="%" value="%"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="方案状态" prop="status">
              <el-switch
                v-model="form.status"
                active-value="qy"
                inactive-value="jy"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>

      </div>
    </el-dialog>


    <el-drawer
      title="提成明细"
      :visible.sync="drawer"
      direction="rtl"
      size="60%"
      :before-close="handleClose">
      <div style="width: 94%;margin: 0 auto">
        <div>
          <el-form :model="queryParams2" ref="queryForm" size="small" :inline="true" label-width="0px">
            <el-form-item label="">
              <el-select
                v-model="queryParams2.type"
                clearable
                placeholder="请选择订单分类"
              >
                <el-option label="油品订单提成" :value="1"></el-option>
                <el-option label="商品订单提成" :value="2"></el-option>
                <el-option label="储值卡充值提成" :value="3"></el-option>
                <el-option label="囤油卡充值提成" :value="4"></el-option>
                <!--                <el-option label="商品退款" :value="5"></el-option>-->
                <!--                <el-option label="囤油卡充值提成" :value="6"></el-option>-->
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-input v-model="queryParams2.orderNo" placeholder="请输入订单号"></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-date-picker
                v-model="beginTime"
                style="width: 160px"
                type="date"
                placeholder="开始日期">
              </el-date-picker>
              至
              <el-date-picker
                v-model="endTime"
                style="width: 160px"
                type="date"
                placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item style="float: right;margin-right: 0px">
              <el-button type="primary" icon="el-icon-search" @click="handleQuery1">搜索</el-button>
              <el-button icon="el-icon-refresh" @click="resetQuery1">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div style="margin-top: 15px">
          <div v-if="tabindex==0">
            <el-table ref="tables" v-loading="loading" border :data="commissionList">
              <el-table-column type="index" width="80" align="center" label="序号"/>
              <el-table-column label="关联订单号" prop="orderNo" align="center" width="260"/>
              <el-table-column label="订单分类" prop="type" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.type==1">油品订单提成</span>
                  <span v-if="scope.row.type==2">商品订单提成</span>
                  <span v-if="scope.row.type==3">储值卡充值提成</span>
                  <span v-if="scope.row.type==4">油品退款</span>
                  <span v-if="scope.row.type==5">商品退款</span>
                  <span v-if="scope.row.type==4">囤油卡充值提成</span>
                </template>
              </el-table-column>
              <el-table-column label="提成金额（元）" prop="amount" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.amount || 0 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="订单分类" prop="description" align="center"/>
              <el-table-column label="订单完成时间" prop="createTime" align="center" width="160">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
              </el-table-column>
            </el-table>

            <pagination
              v-show="total2>0"
              :total="total2"
              :page.sync="queryParams2.page"
              :limit.sync="queryParams2.pageSize"
              @pagination="getCommissionList"
            />
          </div>
        </div>
      </div>
    </el-drawer>

  </div>
</template>

<script>


import {
  addCommission, delCommission,
  getCommission,
  listCommission, listCommissionRecord, listStaffCommissionRecord,
  updateCommission
} from "../../api/staffCommission/staffcommission";
import {listDuty} from "../../api/staff/duty";
import {queryStaffs} from "@/api/order/staff";
import {dutyList} from "@/api/duty/duty";

export default {
  dicts: ['source', 'role', 'zhzt', 'comissionType'],
  data() {
    return {
      tabindex: 0,
      tabs: [
        {
          name: "提成统计",
        },
        {
          name: "提成方案",
        },
      ],
      // 提成总额
      allAmount: 0,
      changeCom: false,
      activeName: 'oil',
      select: "元",
      commissionSource: [],
      // 遮罩层
      loading: true,
      // 标题
      title: "",
      // 总条数
      total: 0,
      total1: 0,
      total2: 0,
      // 表格数据
      list: [],
      commissionList: [],
      staffCommissionList: [],
      // 是否显示修改对话框
      open: false,
      // 默认排序
      defaultSort: {prop: 'updateTime', order: 'descending'},
      // 查询参数
      queryParams: {
        page: 1,
        pageSize: 10,
        id: '',
        name: '',
        commissionSource: '油品'
      },
      queryParams1: {
        page: 1,
        pageSize: 10,
      },
      queryParams2: {
        page: 1,
        pageSize: 10,
      },
      // 弹出层
      drawer: false,
      staffList: [],
      // 日期范围
      dateRange: [],
      beginTime: "",
      endTime: "",
      beginTime2: "",
      endTime2: "",
      // 表单参数
      form: {
        type: 'orderAmount',
        status: 'qy'
      },
      commissionTypeList: ["订单金额", "实收金额"],
      tindex: 0,
      classifyList: ["油品提成方案", "商品提成方案", "会员充值提成方案"],
      tindex1: 0,
      // 显示搜索条件
      showSearch: true,
      roleList: [],
      staffRoleGroup: [],
      // 表单校验
      rules: {
        name: [
          {required: true, message: "提成方案名称不能为空", trigger: "blur"},
        ],
        commissionSource: [
          {required: true, message: "请选择提成来源", trigger: "blur"},
        ],
        staffRoleGroup: [
          {required: true, message: "请选择角色组", trigger: "blur"},
        ],
        classify:[
          {required: true, message: "请选择分类", trigger: "blur"},
        ],
        type: [
          {required: true, message: "请选择提成类型", trigger: "blur"},
        ],
        meetCondition: [
          {required: true, message: "请填写提成消费条件", trigger: "blur"},
        ],
        royaltyRate: [
          {required: true, message: "请填写提成金额/提成比例", trigger: "blur"},
        ],
        // takeEffect: [
        //   { required: true, message: "请选择方案生效时间", trigger: "change" },
        // ],
        status: [
          {required: true, message: "请选择方案状态", trigger: "blur"},
        ],
      }
    }
  },
  created() {
    this.getStaffCommissionList();
    // this.getList();
    this.getStaffList();
    this.getRoleList1()
  },
  methods: {
    Typeindex(index, type) {
      this.tindex = index
      if (type == '订单金额') {
        this.form.type = "orderAmount"
      } else if (type == '实收金额') {
        this.form.type = "payAmount"
      }
    },
    Typeindex1(index, type) {
      this.tindex1 = index
      this.form.classify = index
    },
    getindex(index) {
      this.tabindex = index
      if (index == 0) {
        this.queryParams1 = {
          page: 1,
          pageSize: 10,
        };
        this.getStaffCommissionList();
      } else if (index == 1) {
        this.queryParams = {
          page: 1,
          pageSize: 10,
        };
        this.getList();
      }
    },
    // 获取角色信息
    getRoleList1() {
      let data = {
        page: 1,
        pageSize: 10000,
        dutyType: 3
      }
      dutyList(data).then(res => {
        this.roleList = res.data.records
      })
    },
    getStaffCommissionList() {
      this.loading = true
      this.dateRange = []
      if (this.beginTime && this.endTime) {
        this.dateRange.push(this.beginTime.toLocaleDateString())
        this.dateRange.push(this.endTime.toLocaleDateString())
      }
      listStaffCommissionRecord(this.addDateRange(this.queryParams1, this.dateRange)).then(res => {
        this.staffCommissionList = res.data.records;
        this.total1 = res.data.total;
        this.loading = false
      })
    },
    getStaffDuty(list, ids) {
      let id = ids.split(",")
      let name = ""
      let dutyName = ""
      list.forEach(item => {
        id.forEach(i => {
          if (item.dutyId = i) {
            name = item.dutyName
            dutyName += name + ","
          }
        })
      })
      return name
    },
    getStaffList() {
      queryStaffs().then(response => {
        this.staffList = response.data;
      })
    },
    // 查询角色列表
    getDuty() {
      listDuty().then(response => {
        this.roleList = response.data
      })
    },
    // 是否关闭弹框
    handleClose(done) {
      done();
    },
    // 点击标签页
    handleClick(tab, event) {
      if (this.activeName == 'oil') {
        this.queryParams = {
          page: 1,
          pageSize: 10,
          id: '',
          name: '',
          commissionSource: '油品'
        };
        this.getList();
      }
      if (this.activeName == 'nonOil') {
        this.queryParams = {
          page: 1,
          pageSize: 10,
          id: '',
          name: '',
          commissionSource: '非油品'
        };
        this.getList();
      }
      if (this.activeName == 'staffCommission') {
        this.queryParams1 = {
          page: 1,
          pageSize: 10,
        };
        this.getStaffCommissionList();
      }
    },
    // 查看详情
    lookDetail(staffId) {
      this.drawer = true
      this.queryParams2.staffId = staffId
      this.getCommissionList()
    },
    getCheckbox() {
      console.log(this.staffRoleGroup)
      // this.form.commissionSource = this.commissionSource.toString()
      this.form.staffRoleGroup = this.staffRoleGroup.toString()
    },
// 查询列表
    getList() {
      this.loading = true;
      let dateRange = []
      if (this.beginTime2 && this.endTime2) {
        dateRange.push(this.beginTime2.toLocaleDateString())
        dateRange.push(this.endTime2.toLocaleDateString())
      }
      listCommission(this.addDateRange(this.queryParams, dateRange)).then(response => {
        this.list = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    // 查询员工提成记录信息
    getCommissionList() {
      this.loading = true;
      this.dateRange = []
      if (this.beginTime && this.endTime) {
        this.dateRange.push(this.beginTime.toLocaleDateString())
        this.dateRange.push(this.endTime.toLocaleDateString())
      }
      listCommissionRecord(this.addDateRange(this.queryParams2, this.dateRange)).then(res => {
        this.commissionList = res.data.records;
        this.total2 = res.data.total;
        this.loading = false;
      })
      // allAmountCommissionRecord(this.addDateRange(this.queryParams1, this.dateRange)).then(res => {
      //   if (res.data){
      //     this.allAmount = res.data
      //   }
      // })
    },
    // 表单重置
    reset() {
      this.resetForm("form");
      this.staffRoleGroup = []
      this.form = {
        type: 'orderAmount',
        status: 'qy',
        commissionSource: [],
        classify:0,
      };
      this.tindex = 0
      this.tindex1 = 0
    },
    // 新增按钮操作
    handleAdd() {
      this.reset();
      this.open = true;
      this.getRoleList1()
      this.title = "新增提成方案";
    },
    // 修改按钮操作
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getCommission(id).then(response => {
        this.form = response.data;
        // this.commissionSource = this.form.commissionSource.split(",")
        // this.form.takeEffect = JSON.parse(this.form.takeEffect)
        this.form.royaltyRate = this.form.royaltyRate.slice(0, this.form.royaltyRate.length - 1)
        this.open = true;
        this.title = "编辑提成方案";
        if (response.data.staffRoleGroup) {
          this.staffRoleGroup = response.data.staffRoleGroup.split(",");
        }
        if (response.data.commissionSource) this.form.commissionSource = response.data.commissionSource.split(",")
        this.tindex1 = this.form.classify
        if (response.data.type=='orderAmount'){
          this.tindex = 0;
        }else {
          this.tindex = 1
        }
        this.getRoleList1()
      });
    },

    // 搜索按钮操作
    handleQuery() {
      this.queryParams1.page = 1;
      this.getStaffCommissionList();
    },
    // 搜索按钮操作
    handleQuery2() {
      this.queryParams.page = 1;
      this.getList();
    },
    // 搜索按钮操作
    handleQuery1() {
      this.queryParams1.page = 1;
      this.getCommissionList();
    },
    // 重置按钮操作
    resetQuery() {
      this.dateRange = [];
      this.queryParams1 = {
        page: 1,
        pageSize: 10,
      }
      this.beginTime = ""
      this.endTime = ""
      // this.resetForm("queryForm");
      this.handleQuery();
    },
    // 重置按钮操作
    resetQuery1() {
      this.dateRange = [];
      this.queryParams2 = {
        page: 1,
        pageSize: 10,
      }
      // this.resetForm("queryForm");
      this.handleQuery1();
    },
    // 重置按钮操作
    resetQuery2() {
      this.queryParams = {
        page: 1,
        pageSize: 10,
      }
      this.beginTime2 = ''
      this.endTime2 = ''
      // this.resetForm("queryForm");
      this.handleQuery2();
    },
    // 删除按钮操作
    handleDelete(row) {
      const name = row.name
      this.$modal.confirm('是否删除本条数据，删除后无法恢复！').then(function () {
        return delCommission(row.id);
      }).then(() => {
        this.queryParams.page = 1
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    // 判断提成来源是否改变
    isChange() {
      this.changeCom = true;
    },
    add0(m) {
      return m < 10 ? '0' + m : m
    },
    // 提交按钮
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // if (/^\d+$/.test(this.form.royaltyRate)){
          this.form.royaltyRate = this.form.royaltyRate + this.select
          // }
          this.form.staffRoleGroup = this.staffRoleGroup.toString()
          this.form.commissionSource = this.form.commissionSource.toString()
          if (this.form.id) {
            updateCommission(this.form).then(response => {
              if (response.data == 1) {
                this.$modal.msgSuccess("提成方案更新成功");
                this.open = false;
                this.getList();
              } else {
                this.$modal.msgError("同一个角色组只能对应一个" + this.form.commissionSource + "提成方案")
              }
            });
          } else {
            addCommission(this.form).then(response => {
              if (response.data == 1) {
                this.$modal.msgSuccess("提成方案新增成功");
                this.open = false;
                this.getList();
              } else {
                this.$modal.msgError("同一个角色组只能对应一个" + this.form.commissionSource + "提成方案")
              }
            });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.multiple = !selection.length
    },
    // 排序触发事件
    handleSortChange(column, prop, order) {
      this.queryParams.orderByColumn = column.prop;
      this.queryParams.isAsc = column.order;
      this.getList();
    },
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  background: #f6f8f9;
  height: 93vh;
  margin: 0;
  padding: 0;
}

.cot-box {
  width: 99%;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
  padding: 20px;

  margin: 0 auto;
}

.clearfix {
  width: 100%;

}

.box-card {
  width: 100%;
  margin-bottom: 15px;
}

.box-gang {
  width: 100%;
  display: flex;
  align-items: center;
}

.box {
  width: 200px;
  box-sizing: border-box;
  padding: 10px;
  background: #f9f9f9;
  height: 86px;
  margin-right: 10px;
}

.size-hui {
  font-size: 14px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.size-bole {
  font-weight: bold;
}

.el-form--inline .el-form-item {
  margin-right: 25px;
}

.tab-box {
  width: 100%;
  height: 40px;
  background: #fff;
  display: flex;
  box-sizing: border-box;
  margin-bottom: 10px;
  border-top: 1px solid #e6e6e6;

}

.tab_ {
  width: 75px;
  height: 100%;
  //border-bottom: 2px solid #FF770F;
  display: flex;
  font-weight: 500;
  font-size: 14px;
  color: #999999;
  align-items: center;
  justify-content: center;
  margin-left: 50px;
  cursor: pointer;
}

.active {
  border-bottom: 2px solid #FF770F !important;
  color: #FF770F !important;
}

.d-s {
  display: flex;
  align-items: center;
}

.icon-type {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
  margin-right: 20px;
  cursor: pointer;
}

.acvtive {
  color: #FF770F !important;
}
</style>