dy-admin-manager/src/views/teamDetail/components/modals/create-user-pay.vue

<template>
  <div>
    <el-alert title="班级信息" :closable="false" class="alert" type="info">
    </el-alert>
    <el-form :model="form" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="声部班">
            <el-select v-model.trim="form.signClass" filterable clearable>
              <el-option
                v-for="(item, index) in signList.filter(
                  (item) => item.lockFlag != 1
                )"
                :key="index"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合奏班">
            <el-select v-model.trim="form.mixClass" filterable clearable>
              <el-option
                v-for="(item, index) in mixList.filter(
                  (item) => item.lockFlag != 1
                )"
                :key="index"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="基础技能班">
            <el-select v-model.trim="form.highClass" filterable clearable>
              <el-option
                v-for="(item, index) in highList.filter(
                  (item) => item.lockFlag != 1
                )"
                :key="index"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="临时班">
            <select-all
              style="width:230px!important"
              v-model.trim="form.snapClass"
              filterable
              clearable
              multiple
            >
              <el-option
                v-for="(item, index) in snapList.filter(
                  (item) => item.lockFlag != 1
                )"
                :key="index"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </select-all>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="线上基础技能班">
            <el-select v-model.trim="form.highonline" filterable clearable>
              <el-option
                v-for="(item, index) in highonlineList.filter(
                  (item) => item.lockFlag != 1
                )"
                :key="index"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- highonlineList -->
    </el-form>
    <el-alert title="课程信息设置" :closable="false" class="alert" type="info">
    </el-alert>
    <extraClass
      :form="eclass"
      ref="eclass"
      :isUserType="true"
      :isCommon="false"
      :isDisabled="true"
      :courseUnitPriceSettingsByType="organizationCourseUnitPriceSettingsByType"
      @priceChange="priceChange"
      @moneyChange="syncAllMoney"
    />
    <el-alert
      title="会员设置"
      :closable="false"
      class="alert"
      style="margin-top: 20px"
      type="info"
      v-if="courseViewType == 1"
    >
    </el-alert>
    <memberSetting
      v-if="courseViewType == 1"
      :addStudent="true"
      :form="memberForm"
      :isUserType="isUserType"
      :organId="baseInfo.organId"
    />
    <el-alert title="缴费设置" :closable="false" class="alert" type="info">
    </el-alert>
    <el-form ref="payment" :model="payment">
      <el-form-item
        label="缴费方式"
        prop="paymentPattern"
        label-width="160px"
        :rules="[
          { required: true, message: '请选择缴费方式', trigger: 'change' },
        ]"
      >
        <el-select
          style="width: 100% !important"
          v-model="payment.paymentPattern"
          placeholder="请选择缴费方式"
          :disabled="courseViewType == 1"
        >
          <el-option
            v-for="item in paymentPatternTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template v-if="payment.paymentPattern == 0">
      <el-collapse :value="collapse" @change="collapseChange">
        <el-collapse-item
          v-for="(item, index) in cycles"
          :key="index"
          :name="index"
        >
          <template slot="title">
            <div class="collapse-title">
              <span>缴费周期 {{ index + 1 }}</span>
              <i
                v-if="cycles.length > 1"
                class="el-icon-circle-close"
                @click.stop="removeCycle(index)"
              ></i>
            </div>
          </template>
          <paymentCycle
            ref="cycles"
            :form="item"
            :hidePaymentPattern="true"
            :isUserType="true"
            :isCommon="false"
            :isDisabled="true"
          />
        </el-collapse-item>
      </el-collapse>
      <el-button
        icon="el-icon-circle-plus-outline"
        plain
        type="info"
        size="small"
        style="width: 100%; margin: 20px 0"
        @click="addCycle"
        >新增缴费周期</el-button
      >
    </template>
    <paymentCycle
      v-else
      ref="cycle"
      :isUserType="true"
      :hidePaymentPattern="true"
      :form.sync="cycle"
      :isCommon="false"
      :isDisabled="true"
      :courseViewType="courseViewType"
    />

    <el-alert title="其它" :closable="false" class="alert" type="info">
    </el-alert>
    <otherform :form="other" ref="other" />
    <div slot="footer" class="dialog-footer">
      <p>缴费总金额:{{ money || 0 }}元</p>
      <div>
        <el-button @click="$listeners.close">取 消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import numeral from "numeral";
import paymentCycle from "../../../resetTeaming/modals/payment-cycle";
import otherform from "../../../resetTeaming/modals/other";
import extraClass from "../../../resetTeaming/modals/extra-class";
import { musicGroupPaymentCalenderAdd } from "../../../resetTeaming/api";
import { queryRemainCourseTypeDuration } from "../../api";
import { courseType } from "@/constant";
import { getTimes, objectToOptions } from "@/utils";
import { paymentPatternType } from "@/constant";
import memberSetting from "../../../resetTeaming/modals/member-setting";
export default {
  props: [
    "snapList",
    "highList",
    "mixList",
    "signList",
    "highonlineList",
    "createdUserId",
    "organizationCourseUnitPriceSettings",
    "musicGroupId",
    "baseInfo",
  ],
  components: {
    paymentCycle,
    otherform,
    extraClass,
    memberSetting,
  },
  data() {
    return {
      courseTypeOptions: courseType,
      ids: "",
      form: {
        signClass: "",
        mixClass: "",
        highClass: "",
        snapClass: "",
        highonline: "",
      },
      payment: {
        paymentPattern: null,
      },
      other: {},
      cycle: {},
      eclass: [],
      collapse: [0],
      cycles: [{}],
      organizationCourseUnitPriceSettingsByType: {},
      paymentPatternTypeOptions: objectToOptions(paymentPatternType),
      isUserType: true,
      memberForm: {
        memberRankSettingId: "",
        memberValidDate: 6,
        memberPaymentAmount: "",
        originalMemberPaymentAmount: "",
        paymentDate: [],
      },
      money: "",
      courseViewType: "",
    };
  },
  watch: {
    "form.signClass"() {
      this.classChange();
    },
    "form.mixClass"() {
      this.classChange();
    },
    "form.highClass"() {
      this.classChange();
    },
    "form.snapClass"() {
      this.classChange();
    },
    "form.highonline"() {
      this.classChange();
    },
    "payment.paymentPattern"() {
      this.syncAllMoney();
    },
    "memberForm.memberPaymentAmount"() {
      this.syncAllMoney();
    },
    baseInfo(val) {
      this.formatCourse();
      this.courseViewType = val.courseViewType;
      if (val.courseViewType == 1) {
        this.payment.paymentPattern = "1";
      }
    },
  },
  mounted() {
    this.courseViewType = this.baseInfo.courseViewType;
    if (this.baseInfo.courseViewType == 1) {
      this.payment.paymentPattern = "1";
    }
    this.formatCourse();
  },
  methods: {
    addExtraClass() {
      this.eclass.push({});
    },
    priceChange(item, index) {
      const _ = [...this.eclass];
      const active =
        this.organizationCourseUnitPriceSettingsByType[item.courseType] || {};
      const price = Math.round(
        numeral(item.courseTotalMinuties || 1)
          .multiply(active.unitPrice || 1)
          .value()
      );
      item.courseCurrentPrice = price;
      item.courseOriginalPrice = price;
      _[index] = item;
      this.eclass = [..._];
      this.syncAllMoney();
    },
    syncAllMoney() {
      let money = 0;
      let first = 0;
      let other = 0;
      console.log(this.eclass);
      for (const item of this.eclass) {
        money += item.courseCurrentPrice;
        if (this.cycles && this.cycles.length) {
          if (item.isStudentOptional) {
            first += item.courseCurrentPrice;
          } else {
            const floorMoney = Math.floor(
              item.courseCurrentPrice / this.cycles.length
            );
            const remainder = item.courseCurrentPrice % this.cycles.length;
            first += floorMoney + remainder;
            other += floorMoney;
          }
        }
      }
      if (this.cycles.length) {
        const floorMoney = Math.floor(money / this.cycles.length);
        const remainder = money % this.cycles.length;
        this.cycles = this.cycles.map((item, index) => {
          return {
            ...item,
            paymentAmount: index === 0 ? first : other,
          };
        });
      }
      if (this.$refs.cycle) {
        this.$set(this.cycle, "paymentAmount", money);
      }
      money += parseFloat(this.memberForm.memberPaymentAmount);
      this.money = money;
      return money;
    },
    removeExtraClass(index) {
      this.eclass[index] = null;
      this.eclass = this.eclass.filter((item) => !!item);
    },
    formatCourse() {
      const organId = this.baseInfo?.organId;
      const chargeTypeId = this.baseInfo?.chargeTypeId;
      const _ = {};
      const list = (this.organizationCourseUnitPriceSettings || []).filter(
        (item) =>
          organId &&
          organId == item.organId &&
          chargeTypeId &&
          chargeTypeId == item.chargeTypeId
      );
      for (const item of list) {
        _[item.courseType] = item;
      }
      this.organizationCourseUnitPriceSettingsByType = _;
      return _;
    },
    getAllIds() {
      return [
        this.form.signClass,
        this.form.mixClass,
        this.form.highClass,
        this.form.highonline,
        ...this.form.snapClass,
      ].filter((item) => !!item);
    },
    async classChange() {
      try {
        const ids = this.getAllIds().join(",");
        if (ids) {
          const res = await queryRemainCourseTypeDuration({
            classGroupIdList: ids,
          });
          this.ids = ids;
          const _ = res.data.map((item) => {
            const active =
              this.organizationCourseUnitPriceSettingsByType[item.courseType] ||
              {};
            const money = Math.round(
              numeral(active.unitPrice || 1)
                .multiply(item.remainMinutes || 1)
                .value()
            );
            return {
              courseType: item.courseType,
              courseTotalMinuties: item.remainMinutes,
              courseOriginalPrice: money,
              courseCurrentPrice: money,
            };
          });
          this.eclass = [..._];
          this.syncAllMoney();
        }
      } catch (error) {
        console.log(error);
      }
    },
    getForms() {
      const { $refs: refs } = this;
      return [
        refs.eclass,
        refs.cycle,
        refs.payment,
        refs.other,
        ...(refs.cycles || []),
      ]
        .filter((item) => !!item)
        .map((item) => item.$refs.form || item);
    },
    addCycle() {
      this.cycles.push({});
      this.collapse.push(this.cycles.length);
      this.syncAllMoney();
    },
    removeCycle(index) {
      this.cycles[index] = null;
      this.cycles = this.cycles.filter((item) => !!item);
      if (this.collapse.includes(index)) {
        this.collapse.splice(index, 1);
        this.collapse = this.collapse.map((item, _index) =>
          _index - 1 >= index ? item-- : item
        );
      }
      this.syncAllMoney();
    },
    collapseChange(val) {
      this.collapse = val;
    },
    async submit() {
      const forms = this.getForms();
      const valided = [];
      for (const form of forms) {
        form.validate((valid) => {
          if (valid) {
            valided.push(form);
          }
        });
      }
      if (!this.getAllIds().length) {
        this.$message.error("请至少选择一个班级");
        return;
      }
      if (forms.length === valided.length) {
        const cyclelist =
          this.payment.paymentPattern == 0 ? this.cycles : [this.cycle];
        const data = {
          attribute1: this.ids,
                ...this.memberForm,
          musicGroupPaymentDateRangeList: cyclelist.map((item) => {
            const { paymentDate, paymentValid, ...other } = item;
            return {

              ...other,
              ...getTimes(paymentDate, [
                "startPaymentDate",
                "deadlinePaymentDate",
              ]),
              ...getTimes(paymentValid, [
                "paymentValidStartDate",
                "paymentValidEndDate",
              ]),
              paymentPattern: this.payment.paymentPattern,
            };
          }),
          paymentPattern: this.payment.paymentPattern,
          musicGroupId: this.musicGroupId,
          paymentType: "ADD_STUDENT",
          payUserType: "STUDENT",
          studentIds: this.createdUserId,
          musicGroupPaymentCalenderCourseSettingsList: this.eclass,
          ...this.other,
        };
        try {
          await musicGroupPaymentCalenderAdd(data);
          this.$message.success("提交成功");
          this.$listeners.submited();
          this.$listeners.close();
        } catch (error) {
          console.log(error);
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.dialog-footer {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  // text-align: right;
  p {
    font-size: 16px;
    margin-right: 20px;
    color: red;
    margin-left: 40px;
  }
}
.alert {
  margin-bottom: 10px;
}
.collapse-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  .el-icon-circle-close {
    font-size: 16px;
    margin-right: 10px;
  }
}
/deep/ .el-collapse-item__wrap {
  padding-top: 20px;
}
</style>