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.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
              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-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"
        label-width="160px"
        :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>
    <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"
    />
    <el-alert title="其它"
              :closable="false"
              class="alert"
              type="info">
    </el-alert>
    <otherform :form="other"
               ref="other" />
    <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 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'
// console.log(Math.round(numeral(item.courseTotalMinuties || 1).multiply(active.unitPrice || 1).value()))
export default {
  props: ["snapList", "highList", "mixList", "signList", 'createdUserId', 'organizationCourseUnitPriceSettings', 'musicGroupId', 'baseInfo'],
  components: {
    paymentCycle,
    otherform,
    extraClass
  },
  data() {
    return {
      courseTypeOptions: courseType,
      ids: '',
      form: {
        signClass: '',
        mixClass: '',
        highClass: '',
        snapClass: '',
      },
      payment: {
        paymentPattern: null,
      },
      other: {},
      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()
    },
    'payment.paymentPattern'() {
      this.syncAllMoney()
    },
    baseInfo() {
      this.formatCourse()
    }
  },
  mounted() {
    console.log([...this.snapList])
    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
      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)
      }

      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.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,
          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: 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>