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="isRefundMemberFee"
        v-if="quitForm.status == 'APPROVED' && courseViewType == 2"
      >
        <el-radio v-model.trim="quitForm.isRefundMemberFee" label="true"
          >是</el-radio
        >
        <el-radio v-model.trim="quitForm.isRefundMemberFee" label="false"
          >否</el-radio
        >
      </el-form-item>

      <el-form-item
        label="退还学练宝金额"
        prop="cloudTeacherAmount"
        v-if="
          quitForm.isRefundMemberFee &&
            quitForm.isRefundMemberFee != 'false' &&
            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' &&
            $helpers.tenantId == 1
        "
      >
        <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,
        isRefundMemberFee: null,
        reason: null
      },
      courseViewType: null
    };
  },
  mounted() {
    this.quitForm.cloudTeacherAmount = this.detail.cloudTeacherAmount;
    this.courseViewType = this.detail.musicGroup.courseViewType;
    console.log(this.courseViewType);
  },
  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: "请输入退还乐保金额" }],
        isRefundMemberFee: [
          { 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>