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>
    <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";
export default {
  props: ["snapList", "highList", "mixList", "signList", 'createdUserId', 'organizationCourseUnitPriceSettings', 'musicGroupId', 'baseInfo'],
  components: {
    paymentCycle,
    extraClass
  },
  data() {
    return {
      courseTypeOptions: courseType,
      ids: '',
      form: {
        signClass: '',
        mixClass: '',
        highClass: '',
        snapClass: '',
      },
      cycle: {},
      eclass: [],
      organizationCourseUnitPriceSettingsByType: {},
    }
  },
  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 (!money) {
        this.$set(this.cycle, "paymentAmount", undefined);
      } else {
        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
      }
      console.log(_)
      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]
        .filter((item) => !!item)
        .map((item) => item.$refs.form);
    },
    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 { paymentDate, paymentValid, ...rest} = this.cycle
        const data = {
          attribute1: this.ids,
          ...rest,
          musicGroupId: this.musicGroupId,
          paymentType: 'ADD_STUDENT',
          studentIds: this.createdUserId,
          musicGroupPaymentCalenderCourseSettingsList: this.eclass,
          ...getTimes(paymentDate, ["startPaymentDate", "deadlinePaymentDate"]),
          ...getTimes(paymentValid, [
            "paymentValidStartDate",
            "paymentValidEndDate",
          ]),
        }
        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;
}
</style>