vue-insagent-pc/src/views/DistributionManage/PartnerManagement/CommissionRule.vue

<!-- 模板区域 -->
<template>
  <div class="p-2" style="padding-bottom: 100px;box-sizing: border-box;">
    <h5>佣金规则</h5>
    <el-form ref="formRef" :model="from" label-width="150px" size="small" :rules="rules" style="width: 1000px;">
      <el-form-item label="创始人佣金比例" prop="originator">
        <el-input v-model="from.originator"></el-input>
      </el-form-item>
      <el-form-item label="管理人佣金比例">
        <div class="flex f-c ">
          <div class="flex ">
            <el-form-item label="管理人与合伙人共享" prop="administrator.sharedRatio">
              <el-input v-model="from.administrator.sharedRatio"></el-input>
            </el-form-item>
            <el-form-item label="管理人默认佣金比例" class="ml-1" prop="administrator.defaultRatio">
              <el-input v-model="from.administrator.defaultRatio"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="佣金有效期" class="m-top-10 spacing " prop="administrator.validityPeriod">
            <el-radio-group v-model="from.administrator.validityPeriod" class="flex f-c ">
              <el-radio label="1">不限期</el-radio>
              <el-radio label="2" class="flex a-c">
                <span class="mr-2">固定天数</span>
                <el-form-item v-if="from.administrator.validityPeriod === '2'" label=" 成为该等级后，限期"
                  prop="administrator.fixedDays">
                  <el-input class="width" v-model="from.administrator.fixedDays" size="small" style="margin: 0 5px;"
                    placeholder="请输入1～365的正整数" :maxlength="3">
                    <template slot="append">天</template>
                  </el-input>
                </el-form-item>
              </el-radio>
              <el-radio label="3" class="flex a-c">
                <span>固定日期</span>
                <div class="flex a-c" v-if="from.administrator.validityPeriod === '3'">
                  <el-form-item label="成为该等级后，限期" label-width="200px" prop="administrator.startDate">
                    <el-date-picker class="width" v-model="from.administrator.startDate"
                      :disabled="['1', '2'].includes(from.administrator.validityPeriod)" type="date" placeholder="选择日期"
                      value-format="yyyy-MM-dd">
                    </el-date-picker>
                  </el-form-item>
                  <span style="margin: 0 5px;">至</span>
                  <el-form-item prop="administrator.endDate">
                    <el-date-picker class="width" v-model="from.administrator.endDate"
                      :disabled="['1', '2'].includes(from.administrator.validityPeriod)" type="date" placeholder="选择日期"
                      value-format="yyyy-MM-dd">
                    </el-date-picker>
                  </el-form-item>
                </div>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="row flex f-c " v-for="(ruleitem, ruleindex) in from.administrator.rulesRatioList"
            :key="ruleindex">
            <div class="flex j-s a-c">
              <span>合伙人佣金-阶梯{{ ruleindex + 1 }}</span>
              <span v-if="ruleindex != 0" class="cursor" @click="del('administrator', ruleindex)">删除</span>
            </div>
            <div class="flex f-c ">
              <div class="flex a-c mb-2" v-for="(item, index) in ruleitem.partnerRatioList" :key="index">
                <!-- 复选框 -->
                <el-checkbox v-if="index==0" v-model="item.ry"
                  @change="handleCheckboxChange(ruleindex, index, 'administrator')"></el-checkbox>
                <el-checkbox v-if="index==1" v-model="item.bf"
                  @change="handleCheckboxChange(ruleindex, index, 'administrator')"></el-checkbox>
                  <el-checkbox v-if="index==2" v-model="item.gr"
                  @change="handleCheckboxChange(ruleindex, index, 'administrator')"></el-checkbox>
                <span style="margin: 0 10px;">{{ index == 0 ?
                  `人员考核&nbsp;&nbsp;&nbsp;&nbsp;邀请工作室达` : index == 1 ? `保费考核&nbsp;&nbsp;&nbsp;&nbsp;下属工作室出单保费` :
                  `保费考核&nbsp;&nbsp;&nbsp;&nbsp;自己的出单费用`
                  }}</span>
                <!-- 输入框 -->
                <el-form-item :prop="`administrator.rulesRatioList.${ruleindex}.partnerRatioList.${index}.min`"
                  :rules="getRules(ruleindex, index, 'min', 'administrator')">
                  <el-input-number v-model="item.min" size="small" controls-position="right" :min="1"
                    :max="index ? 100000000 : 10000" :precision="index ? 2 : 0"
                    style="margin: 0 5px;width: 200px;"></el-input-number>
                  <span>{{ index ? '元' : '人' }}</span>
                </el-form-item>
              </div>
              <div class="flex a-c">
                以上条件
                <el-form-item :prop="`administrator.rulesRatioList.${ruleindex}.allSatisfied`"
                  :rules="rules.allSatisfied">
                  <el-select v-model="ruleitem.allSatisfied" placeholder="请选择">
                    <el-option label="全部满足" :value="1"></el-option>
                    <el-option label="满足任意一条" :value="2"></el-option>
                  </el-select>
                </el-form-item>
                合伙人获取共享佣金的
                <el-form-item :prop="`administrator.rulesRatioList.${ruleindex}.kickback`" :rules="rules.kickback">
                  <el-input class="width" v-model="ruleitem.kickback" size="small" style="margin: 0 5px;"
                    placeholder="请输入">
                    <template slot="append">%</template>
                  </el-input>
                </el-form-item>
              </div>
            </div>
          </div>
          <span class="cursor" v-if="from.administrator.rulesRatioList && from.administrator.rulesRatioList.length < 5"
            @click="rulesAdd('administrator')">添加</span>
        </div>
      </el-form-item>
      <el-form-item label="合伙人佣金比例">
        <div class="flex f-c ">
          <div class="flex ">
            <el-form-item label="合伙人与工作室共享" prop="partner.sharedRatio">
              <el-input v-model="from.partner.sharedRatio"></el-input>
            </el-form-item>
            <el-form-item label="合伙人默认佣金比例" class="ml-1" prop="partner.defaultRatio">
              <el-input v-model="from.partner.defaultRatio"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="佣金有效期" class="m-top-10 spacing " prop="partner.validityPeriod">
            <el-radio-group v-model="from.partner.validityPeriod" class="flex f-c ">
              <el-radio label="1">不限期</el-radio>
              <el-radio label="2" class="flex a-c">
                <span class="mr-2">固定天数</span>
                <el-form-item v-if="from.partner.validityPeriod === '2'" label=" 成为该等级后，限期" prop="partner.fixedDays">
                  <el-input class="width" v-model="from.partner.fixedDays" type="number" size="small"
                    style="margin: 0 5px;" placeholder="请输入1～365的正整数" :maxlength="3">
                    <template slot="append">天</template>
                  </el-input>
                </el-form-item>
              </el-radio>
              <el-radio label="3" class="flex a-c">
                <span>固定日期</span>
                <div class="flex a-c" v-if="from.partner.validityPeriod === '3'">
                  <el-form-item label="成为该等级后，限期" label-width="200px" prop="partner.startDate">
                    <el-date-picker class="width" v-model="from.partner.startDate"
                      :disabled="['1', '2'].includes(from.partner.validityPeriod)" type="date" placeholder="选择日期"
                      value-format="yyyy-MM-dd">
                    </el-date-picker>
                  </el-form-item>
                  <span style="margin: 0 5px;">至</span>
                  <el-form-item prop="partner.endDate">
                    <el-date-picker class="width" v-model="from.partner.endDate"
                      :disabled="['1', '2'].includes(from.partner.validityPeriod)" type="date" placeholder="选择日期"
                      value-format="yyyy-MM-dd">
                    </el-date-picker>
                  </el-form-item>
                </div>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="row flex f-c " v-for="(ruleitem, ruleindex) in from.partner.rulesRatioList" :key="ruleindex">
            <div class="flex j-s a-c">
              <span>工作室佣金-阶梯{{ ruleindex + 1 }}</span>
              <span v-if="ruleindex != 0" class="cursor" @click="del('partner', ruleindex)">删除</span>
            </div>
            <div class="flex f-c ">
              <div class="flex a-c mb-2" v-for="(item, index) in ruleitem.partnerRatioList" :key="index">
                <!-- 复选框 -->
                <el-checkbox v-if="index==0" v-model="item.ry"
                  @change="handleCheckboxChange(ruleindex, index, 'partner')"></el-checkbox>
                <el-checkbox v-if="index==1" v-model="item.bf"
                  @change="handleCheckboxChange(ruleindex, index, 'partner')"></el-checkbox>
                  <el-checkbox v-if="index==2" v-model="item.gr"
                  @change="handleCheckboxChange(ruleindex, index, 'partner')"></el-checkbox>
                <span style="margin: 0 10px;">{{ index == 0 ?
                  `人员考核&nbsp;&nbsp;&nbsp;&nbsp;邀请团队达` : index == 1 ? `保费考核&nbsp;&nbsp;&nbsp;&nbsp;下属团队出单保费` : `保费考核&nbsp;&nbsp;&nbsp;&nbsp;自己的出单费用`
                }}</span>
                <!-- 输入框 -->
                <el-form-item :prop="`partner.rulesRatioList.${ruleindex}.partnerRatioList.${index}.min`"
                  :rules="getRules(ruleindex, index, 'min', 'partner')">
                  <el-input-number v-model="item.min" size="small" controls-position="right" :min="1"
                    :max="index ? 100000000 : 10000" :precision="index ? 2 : 0"
                    style="margin: 0 5px;width: 200px;"></el-input-number>
                  <span>{{ index ? '元' : '人' }}</span>
                </el-form-item>

              </div>
              <div class="flex a-c">
                以上条件
                <el-form-item :prop="`partner.rulesRatioList.${ruleindex}.allSatisfied`" :rules="rules.allSatisfied">
                  <el-select v-model="ruleitem.allSatisfied" placeholder="请选择">
                    <el-option label="全部满足" :value="1"></el-option>
                    <el-option label="满足任意一条" :value="2"></el-option>
                  </el-select>
                </el-form-item>
                工作室获取共享佣金的
                <el-form-item :prop="`partner.rulesRatioList.${ruleindex}.kickback`" :rules="rules.kickback">
                  <el-input class="width" v-model="ruleitem.kickback" size="small" style="margin: 0 5px;"
                    placeholder="请输入">
                    <template slot="append">%</template>
                  </el-input>
                </el-form-item>
              </div>
            </div>
          </div>
          <span class="cursor" v-if="from.partner.rulesRatioList && from.partner.rulesRatioList.length < 5"
            @click="rulesAdd('partner')">添加</span>
        </div>
      </el-form-item>

    </el-form>
    <div class="footer flex a-c j-c">
      <el-button type="primary" size="small" @click="save">保存</el-button>
    </div>
  </div>
</template>

<!-- 行为区域 -->
<script>
export default {
  // 数据存放区域
  data() {
    return {
      from: {
        administrator: {},
        partner: {},
      },
      rules: {
        originator: [
          { required: true, message: '请输入创始人佣金比例', trigger: 'blur' },
        ],
        'administrator.sharedRatio': [
          { required: true, message: '请输入管理人与合伙人共享比例', trigger: 'blur' }
        ],
        'administrator.defaultRatio': [
          { required: true, message: '请输入管理人默认佣金比例', trigger: 'blur' }
        ],
        'administrator.validityPeriod': [
          { required: true, message: '请选择佣金有效期', trigger: 'change' }
        ],
        'administrator.fixedDays': [
          { required: true, message: '请输入固定天数', trigger: 'blur' },
          { type: 'number', message: '必须为数字', trigger: 'blur', transform: (value) => Number(value) },
          {
            validator: (rule, value, callback) => {
              if (value < 1 || value > 365 || !Number.isInteger(value)) {
                callback(new Error('必须是1-365的整数'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        'administrator.startDate': [
          { required: true, message: '请选择开始日期', trigger: 'change' }
        ],
        'administrator.endDate': [
          { required: true, message: '请选择结束日期', trigger: 'change' }
        ],
        'partner.sharedRatio': [
          { required: true, message: '请输入管理人与合伙人共享比例', trigger: 'blur' }
        ],
        'partner.defaultRatio': [
          { required: true, message: '请输入管理人默认佣金比例', trigger: 'blur' }
        ],
        'partner.validityPeriod': [
          { required: true, message: '请选择佣金有效期', trigger: 'change' }
        ],
        'partner.fixedDays': [
          { required: true, message: '请输入固定天数', trigger: 'blur' },
          { type: 'number', message: '必须为数字', trigger: 'blur', transform: (value) => Number(value) },

          {
            validator: (rule, value, callback) => {
              if (value < 1 || value > 365 || !Number.isInteger(value)) {
                callback(new Error('必须是1-365的整数'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        'partner.startDate': [
          { required: true, message: '请选择开始日期', trigger: 'change' }
        ],
        'partner.endDate': [
          { required: true, message: '请选择结束日期', trigger: 'change' }
        ],
        min: [
          { required: true, message: '请输入最小值', trigger: 'blur' },
          { type: 'number', message: '必须为数字', trigger: 'blur', transform: (value) => Number(value) }
        ],
        allSatisfied: [
          { required: true, message: '请选择条件', trigger: 'change' }
        ],
        kickback: [
          { required: true, message: '请输入佣金比例', trigger: 'blur' },
          { type: 'number', message: '必须为数字', trigger: 'blur', transform: (value) => Number(value) }
        ]
      }
    }
  },
  // 生命周期函数
  created() {
    this.Query();
  },
  mounted() {

  },
  // 方法函数
  methods: {
    // 处理复选框变化
    handleCheckboxChange(ruleindex, index, typename) {
      // 手动触发表单校验
      this.$refs.formRef.validateField([
        `${typename}.rulesRatioList.${ruleindex}.partnerRatioList.${index}.min`,
      ]);
    },
    // 动态获取校验规则

    getRules(ruleindex, index, field, typename) {
      const item = this.from[typename].rulesRatioList[ruleindex].partnerRatioList[index];
      const isRequired = index == 0 ? item.ry : index == 1 ? item.bf : item.gr; // 根据复选框决定是否必填

      // 动态生成规则数组
      const rules = [];

      // 如果必填，添加 required 规则
      if (isRequired) {
        rules.push({
          required: true,
          message: `请输入${field === 'min' ? '最小值' : '最大值'}`,
          trigger: 'blur',
        });
      }

      // 如果有值，则校验是否为数字
      rules.push({
        validator: (rule, value, callback) => {
          if (value !== null && value !== undefined && value !== '') {
            if (isNaN(Number(value))) {
              callback(new Error('必须为数字'));
            } else {
              callback();
            }
          } else {
            callback();
          }
        },
        trigger: 'blur',
      });

      return rules;
    },

    Query() {
      this.$api.retail.commissionQuery().then((res) => {
        if (res.code == '200') {
          this.from = Object.assign({}, res.data);
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          });
        }
      });
    },
    rulesAdd(Name) {
      const info = this.from[Name].rulesRatioList[this.from[Name].rulesRatioList.length - 1]
      // console.log(this.from[Name].rulesRatioList[this.from[Name].rulesRatioList.length - 1])
      if (info.partnerRatioList[0].min) {
        this.from[Name].rulesRatioList.push({
          allSatisfied: "",
          kickback: "",
          partnerRatioList: [
            {
              bf: false,
              ry: false,
              gr: false,
              min: info.partnerRatioList[0].min + 1,
            },
            {
              bf: false,
              ry: false,
              gr: false,
              min: info.partnerRatioList[1].min + 1,
            },
            {
              bf: false,
              ry: false,
              gr: false,
              min: info.partnerRatioList[1].min + 1,
            }
          ]
        })
      } else {
        this.$message({
          type: 'error',
          message: '请先将最小值补充完整',
        });
      }

    },
    del(Name, index) {
      this.from[Name].rulesRatioList.splice(index, 1)
    },
    save() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$api.retail.commissionsave(this.from).then((res) => {
            if (res.code == '200') {
              this.$message({
                type: 'success',
                message: res.msg,
              });
            } else {
              this.$message({
                type: 'error',
                message: res.msg,
              });
            }
          });
        } else {
          console.log('校验失败');
        }
      });
    }
  },
  // 计算属性
  computed: {
    propfixedDays() {
      console.log(this.from.administrator.validityPeriod)
      return this.from.administrator.validityPeriod == '2' ? 'administrator.fixedDays' : '';
    }
  }
}
</script>
<!-- 样式区域 -->
<style lang='scss' scoped>
.spacing {
  .el-radio {
    margin: 10px 0;
  }
}

.cursor {
  color: #2680F0;
  cursor: pointer;
}

.width {
  width: 220px;
}

.row {
  background-color: #f2f2f2;
  padding: 6px 20px;
  box-sizing: border-box;
  width: 100%;
  border-radius: 5px;
  margin-bottom: 10px;
}

.footer {
  position: fixed;
  bottom: 0;
  right: 0;
  background-color: #fff;
  z-index: 9;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 0 1px 0 #ccc;
  transition: all 0.1s, box-shadow 0.5s;
}

/deep/ .el-form-item__content .el-input-group {
  vertical-align: unset;
}

/deep/ {
  .el-radio,
  .el-radio__label {
    display: flex;
    align-items: center;
  }

  .el-form {
    .el-input {
      width: 200px;
    }

    .el-form-item .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>