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

<template>
  <div>
    <el-form
      :model="quitForm"
      ref="quitForm"
      label-width="150px"
      :rules="quitRules"
      :inline="true"
    >
      <el-row>
        <el-col :span="10">
          <el-form-item label="学员姓名" >
            <span>{{quitForm.studentName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="乐团名称">
            <span>{{quitForm.musicGroupName}}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-form-item label="是否回访" prop="isVisit"   >
          <el-radio v-model.trim="quitForm.isVisit" :label="true"
          :disabled='isDisabled'
            >是</el-radio
          >
          <el-radio  :disabled='isDisabled' v-model.trim="quitForm.isVisit" :label="false"
            >否</el-radio
          >
        </el-form-item>
        <el-form-item label="回访时间" v-if="quitForm.isVisit" :rules="[{required: true, message: '请选择回访回访时间'}]">
          <el-date-picker
           :disabled='isDisabled'
            v-model.trim="quitForm.visitTime"
            align="right"
            type="date"
            style="width: 180px !important"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
      </el-row>
      <!-- <el-row>
        <el-form-item label="是否退费">
          <el-radio v-model.trim="quitForm.isQuiteFee" :label="true"
            >是</el-radio
          >
          <el-radio v-model.trim="quitForm.isQuiteFee" :label="false"
            >否</el-radio
          >
        </el-form-item>
      </el-row> -->
      <!-- v-if="quitForm.isQuiteFee" -->
      <div>
        <el-row>
          <el-form-item
            label="退还会员费用"
            prop="isReturnMemberFee"
            v-if="quitForm.courseViewType == 2"
            :rules="[{required: true, message: '请选择是否退还会员费用'}]"
          >
            <el-radio  :disabled='isDisabled' v-model.trim="quitForm.isReturnMemberFee" :label="true"
              >是</el-radio
            >
            <el-radio  :disabled='isDisabled' v-model.trim="quitForm.isReturnMemberFee" :label="false"
              >否</el-radio
            >
          </el-form-item>
          <el-form-item
            label="退还会员金额"
             :rules="[{required: true, message: '请输入会员金额'}]"
            prop="memberFee"
            v-if="
              quitForm.isReturnMemberFee
            "
          >
            <el-input
             :disabled='isDisabled'
              type="number"
              v-model.trim="quitForm.memberFee"
              style="width: 180px"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-row>

        <!-- v-if="activeRow.cloudTeacherAmount > 0" -->

        <el-row>
          <el-form-item label="退还课程费用" prop="isReturnCourseFee"   :rules="[{required: true, message: '请选择是否退还课程费用'}]">
            <el-radio  :disabled='isDisabled' v-model.trim="quitForm.isReturnCourseFee" :label="true"
              >是</el-radio
            >
            <el-radio  :disabled='isDisabled' v-model.trim="quitForm.isReturnCourseFee" :label="false"
              >否</el-radio
            >
          </el-form-item>
          <el-form-item
            label="退还课程金额"
            prop="courseFee"
            v-if="
            quitForm.isReturnCourseFee
            "
          >
            <el-input
            disabled
              type="number"
              v-model.trim="quitForm.courseFee"
              style="width: 180px"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="退还乐器费用" prop="isReturnMusicalFee"  :rules="[{required: true, message: '请选择是否退还乐器费用'}]">
            <el-radio
             :disabled='isDisabled'
              v-model.trim="quitForm.isReturnMusicalFee"
              :label="true"
              >是</el-radio
            >
            <el-radio
             :disabled='isDisabled'
              v-model.trim="quitForm.isReturnMusicalFee"
              :label="false"
              >否</el-radio
            >
          </el-form-item>
          <el-form-item
            label="退还乐器金额"
            prop="musicalFee"
            v-if="
              quitForm.isReturnMusicalFee
            "
          >
            <el-input
              type="number"
              disabled
              v-model.trim="quitForm.musicalFee"
              style="width: 180px"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
          :rules="[{required: true, message: '请选择是否退还教辅费用'}]"
            label="退还教辅费用"
            prop="isReturnAccessoriesFee"
          >
            <el-radio
             :disabled='isDisabled'
              v-model.trim="quitForm.isReturnAccessoriesFee"
              :label="true"
              >是</el-radio
            >
            <el-radio
             :disabled='isDisabled'
              v-model.trim="quitForm.isReturnAccessoriesFee"
              :label="false"
              >否</el-radio
            >
          </el-form-item>
          <el-form-item
            label="退还教辅金额"
            prop="accessoriesFee"
            v-if="quitForm.isReturnAccessoriesFee"
          >
            <el-input
               disabled
              type="number"
              v-model.trim="quitForm.accessoriesFee"
              style="width: 180px"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            label="退还乐保费用"
            :rules="[{required: true, message: '请选择是否退还乐保费用'}]"
            prop="isReturnMaintenanceFee"
            v-if="quitForm.hasMaintenance"
          >
            <el-radio
             :disabled='isDisabled'
             v-model.trim="quitForm.isReturnMaintenanceFee" :label="true"
              >是</el-radio
            >
            <el-radio
             :disabled='isDisabled'
             v-model.trim="quitForm.isReturnMaintenanceFee" :label="false"
              >否</el-radio
            >
          </el-form-item>
          <el-form-item
            label="退还乐保金额"
            :rules="[{required: true, message: '请输入乐保金额'}]"
            prop="maintenanceFee"
            v-if="quitForm.hasMaintenance&&quitForm.isReturnMaintenanceFee"
          >
            <el-input
              type="number"
              v-model="quitForm.maintenanceFee"
              style="width: 180px"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-row>
      </div>
      <el-row>
        <el-form-item label="申请理由" prop="userComment">
          <el-input
            type="textarea"
            :rows="3"
             :disabled='isDisabled'
            v-model.trim="quitForm.userComment"
            style="width: 455px !important"
          ></el-input>
        </el-form-item>
      </el-row>
      <el-form-item label="审批理由" prop="reason">
        <el-input
         :disabled='isDisabled'
          type="textarea"
          :rows="3"
          v-model.trim="quitForm.reason"
          style="width: 455px !important"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: ["quitForm",'isDisabled'],
  mounted() {
    console.log("quitForm", this.quitForm);
  },
  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: "请填写退团退费原因" }],
        isRefundMemberFee: [
          { required: true, message: "请选择是否退还会员费用" },
        ],
      },
      pickerOptions: {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() > new Date().getTime();
        },
      },
    };
  },
};
</script>
<style lang="scss" scoped>
</style>