dy-admin-manager/src/views/withdrawal-application/modals/quit.vue

<template>
  <div>
    <el-form
      :model="quitForm"
      ref="quitForm"
      :rules="quitRules"
      label-width="130px"
    >
      <el-form-item label="审核状态" prop="status">
        <el-radio v-model.trim="quitForm.status" label="APPROVED"
          >通过</el-radio
        >
        <el-radio v-model.trim="quitForm.status" label="DENIED">拒绝</el-radio>
      </el-form-item>
      <el-form-item
        label="退还云教练费用"
        prop="isCloudTeacherAmount"
        v-if="detail.cloudTeacherAmount > 0 && quitForm.status == 'APPROVED'"
      >
        <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 && quitForm.status == 'APPROVED'"
      >
        <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"
        v-if="quitForm.status == 'APPROVED'"
      >
        <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"
        v-if="quitForm.status == 'APPROVED'"
      >
        <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"
        v-if="quitForm.status == 'APPROVED'"
      >
        <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="detail.hasMaintenance&&quitForm.status == 'APPROVED'"
      >
        <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.trim="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"
          placeholder="请填写退团原因"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right">
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </div>
</template>
<script>
import { quitMusicGroup } from "@/api/journal";
import cleanDeep from "clean-deep";
export default {
  props: ["detail"],
  data() {
    return {
      quitForm: {
        status: "",
        isRefundCourseFee: null,
        isRefundInstrumentFee: null,
        isRefundTeachingAssistantsFee: null,
        isMaintenanceFee: null,
        maintenanceFee: 0,
        cloudTeacherAmount: null,
        isCloudTeacherAmount: null,
        reason: null,
      },
    };
  },
  mounted() {
    this.quitForm.cloudTeacherAmount = this.detail.cloudTeacherAmount
  },
  watch:{
        "quitForm.isMaintenanceFee"(val) {
      if (val) {
        this.quitForm.maintenanceFee = 300;
      } else {
        this.quitForm.maintenanceFee = 0;
      }
    },
  },
  computed: {
    quitRules() {
      const required = this.quitForm.status === "APPROVED";
      return {
        isCloudTeacherAmount: [{ required: true, message: "请输入云教练费用" }],
        cloudTeacherAmount: [{ required: true, message: "请输入云教练金额", trigger: 'blur' }],
        status: [{ required: true, message: "请选择审核状态" }],
        isRefundCourseFee: [{ required, message: "请选择是否退还课程费用" }],
        isRefundInstrumentFee: [{ required, message: "选择是否退还乐器费用" }],
        isRefundTeachingAssistantsFee: [
          { required, message: "选择是否退还教辅费用" },
        ],
        isMaintenanceFee: [{ required: true, message: "选择是否退还乐保费用" }],
        maintenanceFee: [{ required: true, message: "请输入退还乐保金额" }],
        reason: [{ required: true, message: "请填写退团原因" }],
      };
    },
  },
  methods: {
    submit() {
      this.$refs.quitForm.validate(async (valid) => {
        if (valid) {
          try {
            await this.$confirm("是否确定提交?", "提示", {
              type: "warning",
            });
            await quitMusicGroup(
              cleanDeep({
                id: this.detail.id,
                ...this.quitForm,
              })
            );
            this.$emit("close");
            this.$emit("submited");
            this.$message.success("提交成功");
          } catch (error) {}
        }
      });
    },
  },
};
</script>