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="100px">
      <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"
                :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"
                :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"
                :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.snapClass"
              filterable
              clearable
              multiple
            >
              <el-option
                v-for="(item, index) in snapList"
                :key="index"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </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" type="info">
    </el-alert>
    <el-form ref="payment" :model="payment">
        <el-form-item
          label="缴费方式"
          prop="paymentPattern"
          :rules="[{required: true, message: '请选择缴费方式', trigger: 'change'}]"
        >
          <el-select style="width: 100%!important;" v-model="payment.paymentPattern" placeholder="请选择缴费方式">
            <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>
    <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>
    <!-- <paymentCycle
      ref="cycle"
      :isUserType="true"
      :form.sync="cycle"
      :isCommon="false"
      :isDisabled="true"
    /> -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="$listeners.close">取 消</el-button>
      <el-button type="primary" @click="submit">确认</el-button>
    </div>
  </div>
</template>
<script>
import paymentCycle from "../../../resetTeaming/modals/payment-cycle";
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'
export default {
  props: ["snapList", "highList", "mixList", "signList", 'createdUserId', 'organizationCourseUnitPriceSettings', 'musicGroupId', 'baseInfo'],
  components: {
    paymentCycle,
    extraClass
  },
  data() {
    return {
      courseTypeOptions: courseType,
      ids: '',
      form: {
        signClass: '',
        mixClass: '',
        highClass: '',
        snapClass: '',
      },
      payment: {
        paymentPattern: null,
      },
      cycle: {},
      eclass: [],
      collapse: [0],
      cycles: [{}],
      organizationCourseUnitPriceSettingsByType: {},
      paymentPatternTypeOptions: objectToOptions(paymentPatternType),
    }
  },
  watch: {
    'form.signClass'() {
      this.classChange()
    },
    'form.mixClass'() {
      this.classChange()
    },
    'form.highClass'() {
      this.classChange()
    },
    'form.snapClass'() {
      this.classChange()
    },
    baseInfo() {
      this.formatCourse()
    }
  },
  mounted() {
    this.formatCourse()
  },
  methods: {
    addExtraClass() {
      this.eclass.push({});
    },
    priceChange (item, index) {
      const _ = [...this.eclass]
      const active = this.organizationCourseUnitPriceSettingsByType[item.courseType] || {}
      const price = Math.ceil((item.courseTotalMinuties || 1) * (active.unitPrice || 1))
      item.courseCurrentPrice = price
      item.courseOriginalPrice = price
      _[index] = item
      this.eclass = [..._]
      this.syncAllMoney()
    },
    syncAllMoney() {
      let money = 0;
      for (const item of this.eclass) {
        money += item.courseCurrentPrice;
      }
      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 ? floorMoney + remainder : floorMoney)
          }
        })
      }

      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 _
    },
    async classChange() {
      try {
        const ids = [this.form.signClass, this.form.mixClass, this.form.highClass, ...this.form.snapClass].filter(item => !!item).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.ceil((active.unitPrice || 1) * (item.remainMinutes || 1))
            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.cycles]
        .filter((item) => !!item)
        .map((item) => item.$refs.form);
    },
    addCycle () {
      this.cycles.push({});
      this.collapse.push(this.collapse.length);
      this.syncAllMoney()
    },
    removeCycle (index) {
      this.cycles[index] = null;
      this.cycles = this.cycles.filter((item) => !!item);
      this.collapse.pop();
      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 (forms.length === valided.length) {
        const data = {
          attribute1: this.ids,
          musicGroupPaymentDateRangeList: [...this.cycles.map(item => {
            const { paymentDate, paymentValid, ...other } = item
            return {
              ...other,
              ...getTimes(paymentDate, ["startPaymentDate", "deadlinePaymentDate"]),
              ...getTimes(paymentValid, [
                "paymentValidStartDate",
                "paymentValidEndDate",
              ]),
              paymentPattern: this.payment.paymentPattern,
            }
          })],
          musicGroupId: this.musicGroupId,
          paymentType: 'ADD_STUDENT',
          studentIds: this.createdUserId,
          musicGroupPaymentCalenderCourseSettingsList: this.eclass,
        }
        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: block;
  text-align: right;
}
.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>