dy-admin-manager/src/views/teamDetail/components/modals/quite-team.vue

<template>
  <div>
    <el-form
      :model="quitForm"
      ref="quitForm"
      label-width="150px"
      :rules="quitRules"
    >
      <el-form-item
        label="退还云教练费用"
        prop="isCloudTeacherAmount"
        v-if="activeRow.cloudTeacherAmount > 0"
      >
        <el-radio v-model.trim="quitForm.isCloudTeacherAmount" :label="true"
          >是</el-radio
        >
        <el-radio v-model.trim="quitForm.isCloudTeacherAmount" :label="false"
          >否</el-radio
        >
      </el-form-item>
      <el-form-item
        label="退还云教练金额"
        prop="cloudTeacherAmount"
        v-if="quitForm.isCloudTeacherAmount"
      >
        <el-input
          type="number"
          v-model.trim="quitForm.cloudTeacherAmount"
          style="width: 180px"
        >
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="退还课程费用" prop="isRefundCourseFee">
        <el-radio v-model.trim="quitForm.isRefundCourseFee" :label="true"
          >是</el-radio
        >
        <el-radio v-model.trim="quitForm.isRefundCourseFee" :label="false"
          >否</el-radio
        >
      </el-form-item>
      <el-form-item label="退还乐器费用" prop="isRefundInstrumentFee">
        <el-radio v-model.trim="quitForm.isRefundInstrumentFee" :label="true"
          >是</el-radio
        >
        <el-radio v-model.trim="quitForm.isRefundInstrumentFee" :label="false"
          >否</el-radio
        >
      </el-form-item>
      <el-form-item label="退还教辅费用" prop="isRefundTeachingAssistantsFee">
        <el-radio
          v-model.trim="quitForm.isRefundTeachingAssistantsFee"
          :label="true"
          >是</el-radio
        >
        <el-radio
          v-model.trim="quitForm.isRefundTeachingAssistantsFee"
          :label="false"
          >否</el-radio
        >
      </el-form-item>
      <el-form-item
        label="退还乐保费用"
        prop="isMaintenanceFee"
        v-if="activeRow.hasMaintenance"
      >
        <el-radio v-model.trim="quitForm.isMaintenanceFee" :label="true"
          >是</el-radio
        >
        <el-radio v-model.trim="quitForm.isMaintenanceFee" :label="false"
          >否</el-radio
        >
      </el-form-item>
      <el-form-item
        label="退还乐保金额"
        prop="maintenanceFee"
        v-if="quitForm.isMaintenanceFee"
      >
        <el-input
          type="number"
          v-model="quitForm.maintenanceFee"
          style="width: 180px"
        >
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="退团原因" prop="reason">
        <el-input type="textarea" v-model.trim="quitForm.reason"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: ["quitForm","activeRow"],
  data() {
    return {
      quitRules: {
        isCloudTeacherAmount: [{ required: true, message: "请输入云教练费用" }],
        cloudTeacherAmount: [
          { required: true, message: "请输入云教练金额", trigger: "blur" },
        ],
        isRefundCourseFee: [
          { required: true, message: "请选择是否退还课程费用" },
        ],
        isRefundInstrumentFee: [
          { required: true, message: "选择是否退还乐器费用" },
        ],
        isRefundTeachingAssistantsFee: [
          { required: true, message: "选择是否退还教辅费用" },
        ],
        isMaintenanceFee: [{ required: true, message: "选择是否退还乐保费用" }],
        maintenanceFee: [{ required: true, message: "请输入退还乐保金额" }],
        reason: [{ required: true, message: "请填写退团退费原因" }],
      },
    };
  },
};
</script>
<style lang="scss" scoped>
</style>