saas_masterPlatform/src/components/audit/dislogSet.vue

<template>
  <div>
    <BaseDialog
      width="600px"
      :isShow.sync="isShow"
      :title="ShowStatus() ? '付款审核' : '退款审核'"
      @close="close"
      @submit="submitForm"
      :confirmName="form.checkType === 2 ? '确定支付' : '确定'"
    >
      <template v-if="form.checkType === 1">
        <p style="margin-top: 0">申请时间：{{ $methodsTools.onlyForma(form.applyTime) }}</p>
        <p style="margin-top: 0" v-if="ShowStatus()">
          订单单号：{{ form.orderSn }}
        </p>
        <p>
          <span class="color_1890ff">{{form.applyName}}</span>
          <span v-if="!ShowStatus()">,发起退款申请</span>
        </p>
        <div class="bgc_pink" v-if="ShowStatus()">
          <p>待付账款：<span class="color_red">￥252.00</span></p>
          <p>预付时间：2023-12-12 10:10:10</p>
          <p>剩余天数：10</p>
        </div>
        <div class="bgc_pink" v-else>
          <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 === 2">
        <em>收款信息：</em>
        <p>开户名称：<em>广东中正教育科技有限公司</em></p>
        <p>开户银行：<em>农业银行燕塘支行</em></p>
        <p>收款账号：<em>4565 1561 1515 1222</em></p>
        <el-divider></el-divider>
        <em>订单信息：</em>
        <p>
          支付金额：<span
            class="color_red"
            style="font-size: 28px; font-weight: 400"
            >¥ 5,107.49</span
          >
        </p>
        <p>
          支付方式：<el-radio v-model="form.payType" :label="1"
            >微信支付</el-radio
          >
          <el-radio v-model="form.payType" :label="2" v-if="!ShowStatus()"
            >网银支付、对公转账</el-radio
          >
        </p>
        <p>下单时间：<em>2022-12-12</em></p>
        <p>订单单号：<em>54664666661464154</em></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 auditProgress from "@/components/audit/auditProgress.vue";
export default {
  name: "DislogSet",
  components: {
    auditProgress,
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    type: {
      type: Number,
      default: 0, //1付款  2退款
    },
    orderSn: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      auditProgress: false,
      formData: {
        checkResult: "",
        checkReason: "",
      },
      form: {
        checkLogVos: []
      },
      rules: {
        checkResult: [
          { required: true, message: "请选择审核结果", trigger: "change" },
        ],
        checkReason: [
          { required: true, message: "请输入审核意见", trigger: "blur" },
        ],
      },
    };
  },

  mounted() {},

  methods: {
    ShowStatus() {
      return this.type === 1 ? true : false;
    },
    init() {
      this.resetForm();
      if (this.id) {
      }
      this.$api.systemtoporderrefunddetail(this.orderSn).then((res) => {
        this.form = res.data;
      });
    },
    close() {
      if (this.form.checkType === 1) {
        this.$refs["formData"].resetFields();
      }
    },
    resetForm() {
      this.formData = {
        checkResult: "",
        checkReason: "",
      };
    },
    submitForm() {
      if (this.form.checkType === 2) {
        this.$confirm("确定支付账款吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.isShow = false;
            this.$emit("search");
            this.$message({
              type: "success",
              message: "支付成功!",
            });
          })
          .catch(() => {});
      } else {
        this.$refs["formData"].validate((valid) => {
          if (valid) {
            this.$api
              .systemtoporderrefundcheck({
                orderSn: this.orderSn,
                ...this.formData,
              })
              .then((res) => {});
            this.isShow = false;
            this.$emit("search");
          } 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>