saas_masterPlatform/src/views/financed/components/refund/dislogSet.vue

<template>
  <div>
    <BaseDialog
      :disabledBtn="disabledBtn"
      width="600px"
      :isShow.sync="isShow"
      title="退款审核"
      @close="close"
      @submit="submitForm"
      :confirmName="form.checkType === 3 ? '确定支付' : '确定'"
    >
      <div v-if="formPay.toBankAcount">
        <em>收款信息：</em>
        <el-form
          :model="formPay"
          :rules="rulesPay"
          ref="rulesPay"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="银行账号：" prop="toBankAcount">
            <el-input
              readonly
              clearable
              v-model="formPay.toBankAcount"
            ></el-input>
          </el-form-item>
          <el-form-item label="账号名称：" prop="toBankName">
            <el-input
              readonly
              clearable
              v-model="formPay.toBankName"
            ></el-input>
          </el-form-item>
          <el-form-item label="银行名称：" prop="toBankTypeName">
            <el-input
              readonly
              clearable
              v-model="formPay.toBankTypeName"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-divider></el-divider>
      </div>
      <template v-if="form.checkType === 2">
        <p style="margin-top: 0">
          申请时间：{{ $methodsTools.onlyForma(form.applyTime) }}
        </p>
        <p>
          <span class="color_1890ff">{{ form.applyName }}</span>
          <span>,发起退款申请</span>
        </p>
        <div class="bgc_pink">
          <p>
            本次退款金额：<span class="color_red">￥{{ form.refundFee }}</span>
          </p>
          <p>退款理由：{{ form.refundReason }}</p>
        </div>
        <el-form
          :model="formData"
          :rules="rules"
          ref="formData"
          label-width="100px"
        >
          <el-form-item prop="checkResult" label="审核结果：">
            <el-radio-group v-model="formData.checkResult">
              <el-radio label="1">同意</el-radio>
              <el-radio label="-1">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="checkReason" label="审核意见：">
            <el-input
              type="textarea"
              placeholder="请输入审核意见"
              v-model="formData.checkReason"
            ></el-input> </el-form-item
        ></el-form>
        <template slot="slotBtn">
          <el-button @click="auditProgress = true">审核进度</el-button>
        </template>
        <audit-progress
          :auditProgress.sync="auditProgress"
          :checkLogVos="form.checkLogVos"
        ></audit-progress>
      </template>
      <template v-if="form.checkType === 3">
        <em>订单信息：</em>
        <p>
          支付金额：<span
            class="color_red"
            style="font-size: 28px; font-weight: 400"
            >¥ {{ form.refundMoney.toFixed(2) }}</span
          >
        </p>
        <p>
          下单时间：<em>{{ $methodsTools.onlyForma(form.applyTime) }}</em>
        </p>
        <p>
          订单单号：<em>{{ form.orderSn }}</em>
        </p>
        <p>
          支付方式：<el-radio disabled v-model="form.payType" :label="1"
            >微信支付</el-radio
          >
          <el-radio disabled v-model="form.payType" :label="2"
            >网银支付、对公转账</el-radio
          >
        </p>
        <el-divider></el-divider>
        <em>支付方式：</em>
        <el-tag type="success" v-if="form.payType === 1">原路返回</el-tag>
        <el-tag type="danger" v-if="form.payType === 2">网银支付</el-tag>
      </template>
    </BaseDialog>
  </div>
</template>

<script>
import { baseURL } from "@/utils/request.js";
import { getToken } from "@/utils/auth";
import axios from "axios";
import auditProgress from "./auditProgress.vue";
export default {
  name: "DislogSet",
  components: {
    auditProgress,
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    orderSn: {
      type: String,
      default: "",
    },
    checkRoleName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      disabledBtn: false,
      auditProgress: false,
      formData: {
        checkResult: "",
        checkReason: "",
      },
      form: {
        checkLogVos: [],
      },
      rules: {
        checkResult: [
          { required: true, message: "请选择审核结果", trigger: "change" },
        ],
        checkReason: [
          { required: false, message: "请输入审核意见", trigger: "blur" },
        ],
      },
      formPay: {
        toBankAcount: "",
        toBankName: "",
        toBankTypeName: "",
      },
      rulesPay: {
        toBankAcount: [
          { required: true, message: "请输入银行账号", trigger: "blur" },
        ],
        toBankName: [
          { required: true, message: "请输入账号名称", trigger: "blur" },
        ],
        toBankTypeName: [
          { required: true, message: "请输入银行名称", trigger: "blur" },
        ],
      },
    };
  },

  mounted() {},

  methods: {
    init() {
      this.resetForm();
      this.$api.systemtoporderrefunddetail(this.orderSn).then((res) => {
        this.form = res.data;
        this.formPay = {
          toBankAcount: res.data.proceedsAccount,
          toBankName: res.data.openingName,
          toBankTypeName: res.data.openingBank,
        };
      });
    },
    close() {
      this.$refs[
        this.form.checkType === 2 ? "formData" : "rulesPay"
      ].resetFields();
    },
    resetForm() {
      this.form = {
        checkLogVos: [],
      };
      this.formData = {
        checkResult: "",
        checkReason: "",
      };
      this.formPay = {
        toBankAcount: "",
        toBankName: "",
        toBankTypeName: "",
      };
    },
    submitForm() {
      if (this.form.checkType === 3) {
        this.$api
          .systemtoporderrefundpay({
            orderSn: this.orderSn,
            payType: this.form.payType,
            tenantId: this.form.tenantId,
            ...this.formPay,
          })
          .then((res) => {
            this.isShow = false;
            this.$emit("search");
          });
      } else {
        this.$refs["formData"].validate((valid) => {
          if (valid) {
            this.disabledBtn = true;
            this.$api
              .systemtoporderrefundcheck({
                orderSn: this.orderSn,
                ...this.formData,
              })
              .then((res) => {
                this.isShow = false;
                this.$emit("search");
              })
              .finally(() => {
                this.disabledBtn = false;
              });
          } else {
            return false;
          }
        });
      }
    },
  },
  computed: {
    isShow: {
      get() {
        if (this.dialogVisible) {
          this.init();
        }
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", false);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.bgc_pink {
  padding: 10px;
  background-color: rgb(252, 234, 236);
  color: #000;
}
.color_red {
  font-weight: bold;
  color: rgb(235, 59, 59);
}
.color_1890ff {
  color: #1890ff;
  font-weight: bold;
}
em {
  font-weight: bold;
  color: #000;
  font-style: unset;
}
</style>