dy-admin-manager/src/views/studentManager/modals/createMember.vue

<template>
  <div>
    <!-- <p class="title">已选择{{ multipleSelection.length }}名学员</p> -->
    <el-form :model="memberForm" label-width="100px" ref="memberForm">
      <el-form-item
        label="团练宝单位"
        prop="period"
        :rules="[
          { required: true, message: '请选择团练宝单位', trigger: 'blur' },
        ]"
      >
        <el-select
          placeholder="团练宝单位"
          clearable
          v-model.trim="memberForm.period"
          @change="getMemberList"
          style="width: 100% !important"
        >
          <el-option label="月度" value="MONTH"></el-option>
          <el-option label="季度" value="QUARTERLY"></el-option>
          <el-option label="半年" value="YEAR_HALF"></el-option>
          <el-option label="年度" value="YEAR"></el-option>
          <!-- <el-option label="固定天数" value="DAY"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item
        label="团练宝周期"
        prop="memberNum"
        :rules="[
          { required: true, message: '请输入团练宝周期', trigger: 'blur' },
        ]"
      >
        <el-input
          type="number"
          @input="getMemberList"
          onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          v-model="memberForm.memberNum"
          placeholder="请输入团练宝周期"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        label="缴费金额"
        prop="actualAmount"
        :rules="[
          { required: true, message: '请输入缴费金额', trigger: 'blur' },
          { validator: validateMember, trigger: 'blur' },
        ]"
      >
      <!-- onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" -->
        <el-input
          type="number"
          @keyup.native='keyupEvent($event)'
          v-model="memberForm.actualAmount"
          placeholder="请输入缴费金额"
        >
          <div slot="append">元/人</div>
        </el-input>
      </el-form-item>
      <p style="color: red; padding: 0 0 20px 100px">若修改默认金额需审核通过后生效</p>
      <el-form-item label="备注" prop="remark"
        :rules="[
          { required: true, message: '请输入备注', trigger: 'blur' },
        ]">
        <el-input
          type="textarea"
          show-word-limit
          :max="200"
          v-model.trim="memberForm.remark"
          placeholder="请输入备注"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { add, update } from "../api";
import { getmemberRankOrganizationFeeMapper } from '@/views/categroyManager/productSystem/api'
import { sysConfigList } from "@/api/generalSettings"; // 平台的修改和查
export default {
  props: ["multipleSelection", 'type'],
  data() {
    return {
      memberForm: {
        memberNum: null,
        actualAmount: null,
        period: null,
        remark: null
      },
      userIds: [],
      organId: null,
      rulesForm: null,// 范围
      memberFeeSetting: null
    };
  },
  mounted() {
    console.log(this.multipleSelection)
    if(this.type == 'update') {
      const { memberNum, actualAmount, period, remark, organId, id } = this.multipleSelection
      this.memberForm = {
        memberNum,
        period,
        actualAmount,
        remark,
        id
      }
      this.organId = organId
    } else {
      this.userIds = this.multipleSelection
        .map((stu) => {
          return stu.userId;
        });
      this.organId = this.multipleSelection[0].organId //
    }

    this.__init()
  },
  methods: {
    async __init() {
      try {
        const res = await sysConfigList({ group: "DEFAULT" });
        const paramName = 'cloud_price_range'
        res.data.forEach((item) => {
          if(item.paramName == paramName) {
            const itemValue = item.paranValue ? JSON.parse(item.paranValue) : null
            if(itemValue) {
              this.rulesForm = itemValue
            }
          }
        });

        const rankInfo = await getmemberRankOrganizationFeeMapper({ page: 1, rows: 10, organId: this.organId })
        // console.log(rankInfo)
        const { rows } = rankInfo.data
        if(!rows[0]?.memberFeeSetting){
           this.$bus.$emit("showguide", ['memberList']);
        }
        this.memberFeeSetting = rows[0]?.memberFeeSetting
      } catch(e) {

      }
    },
    getMemberList() {
      let money = 0
      const memberForm = this.memberForm
      const memberFeeSetting = this.memberFeeSetting
      if(memberFeeSetting) {
        switch (memberForm?.period) {
          case "MONTH": {
            money = Number(memberFeeSetting.groupPurchaseMonthFee * memberForm.memberNum)
            break;
          }
          case "QUARTERLY": {
            money = Number(memberFeeSetting.groupPurchaseQuarterlyFee * memberForm.memberNum)
            break;
          }
          case "YEAR_HALF": {
            money = Number(memberFeeSetting.groupPurchaseHalfYearFee * memberForm.memberNum)
            break;
          }
          case "YEAR": {
            money = Number(memberFeeSetting.groupPurchaseYearFee * memberForm.memberNum)
            break;
          }
        }
      }
      if(memberForm.memberNum && memberForm.period) {
        this.memberForm.actualAmount = money
      }
    },
    submit() {
      this.$refs.memberForm.validate(async (res) => {
        console.log(res, this.type, 'res')
        if (res) {
          try {
            if(this.type == 'update') {
              await update({
                ...this.memberForm,
                organId: this.organId
              });
              this.$message.success('创建团练宝成功')
            } else {
              await add({
                ...this.memberForm,
                userIds: this.userIds,
                organId: this.organId
              });
              this.$message.success('创建团练宝成功')
            }
            this.$emit("close");
            this.$emit("submited");
          } catch (e) {
            console.log(e);
          }
        }
      });
    },
    validateMember(rule, value, callback) {
      const one = Number(value);
      let min = 0;
      let max = 0;
      switch (this.memberForm?.period) {
        case "MONTH": {
          min =
            Number(this.rulesForm.minMonthFee) * this.memberForm.memberNum;
          max =
            Number(this.rulesForm.maxMonthFee) * this.memberForm.memberNum;
          break;
        }
        case "QUARTERLY": {
          min =
            Number(this.rulesForm.minQuarterlyFee) *
            this.memberForm.memberNum;
          max =
            Number(this.rulesForm.maxQuarterlyFee) *
            this.memberForm.memberNum;
          break;
        }
        case "YEAR_HALF": {
          min =
            Number(this.rulesForm.minHalfYearFee) * this.memberForm.memberNum;
          max =
            Number(this.rulesForm.maxHalfYearFee) * this.memberForm.memberNum;
          break;
        }
        case "YEAR": {
          min = Number(this.rulesForm.minYearFee) * this.memberForm.memberNum;
          max = Number(this.rulesForm.maxYearFee) * this.memberForm.memberNum;
          break;
        }
      }

      if (one >= min && one <= max) {
        return callback();
      }
      return callback(new Error(`定价应在${min}-${max}之间`));
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  margin-bottom: 30px;
  font-size: 16px;
  color: #000;
}
</style>