electripper-v2-ui/src/views/bst/withdraw/components/WithdrawVerifyDialog.vue

<template>
  <el-dialog 
    title="提现详情" 
    :visible.sync="dialogVisible" 
    width="700px" 
    append-to-body 
    @open="handleOpen"
  >
    <el-descriptions :column="2" border v-loading="loading" title="申请信息">
      <el-descriptions-item label="提现单号" :span="2">
        {{ detail.no }}
        <dict-tag :options="dict.type.account_type" :value="detail.accountType" style="margin-left: 4px" size="small"/>
        <dict-tag :options="dict.type.withdraw_status" :value="detail.status" style="margin-left: 4px" size="small"/>
      </el-descriptions-item>
      <el-descriptions-item label="申请时间" :span="2">{{ detail.createTime | dv}}</el-descriptions-item>
      <el-descriptions-item label="用户">{{ detail.userName | dv}}</el-descriptions-item>
      <el-descriptions-item label="申请金额">{{ detail.amount | fix2 | dv }} 元</el-descriptions-item>
      <el-descriptions-item label="到账金额">{{ detail.arrivalAmount | fix2 | dv }} 元</el-descriptions-item>
      <el-descriptions-item label="服务费">
        {{ detail.serviceCharge | fix2 | dv }} 元
        <dict-tag :options="dict.type.withdraw_service_type" :value="detail.serviceType" size="mini" style="margin-left: 4px"/>
        <template v-if="detail.servicePoint">（{{ detail.servicePoint | fix2 | dv }} %）</template>
      </el-descriptions-item>
      <el-descriptions-item label="账号" v-if="AccountType.QR != detail.accountType">{{ detail.accountNo | dv}}</el-descriptions-item>
      <el-descriptions-item label="姓名">{{ detail.accountName | dv}}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{ detail.accountMobile | dv}}</el-descriptions-item>
      <el-descriptions-item label="身份证号">{{ detail.accountIdCard | dv}}</el-descriptions-item>
      <el-descriptions-item label="银行名称">{{ detail.bankName | dv}}</el-descriptions-item>
      <el-descriptions-item label="卡面名称">{{ detail.bankCardName | dv}}</el-descriptions-item>
      <el-descriptions-item label="二维码" :span="2" v-if="AccountType.QR == detail.accountType">
        <image-preview :src="detail.no" :width="100" :height="100" />
      </el-descriptions-item>

    </el-descriptions>

    <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-if="canVerify">
      <el-form-item label="审核意见" prop="remark">
        <el-input 
          type="textarea" 
          v-model="form.remark" 
          :rows="3"
          placeholder="请输入审核意见"
          maxlength="200"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <el-descriptions :column="2" border v-else title="审核结果">
      <el-descriptions-item label="审核时间">
        {{detail.verifyTime | dv}}
      </el-descriptions-item>
      <el-descriptions-item label="审核人">
        {{detail.verifyUserName | dv}}
      </el-descriptions-item>
      <el-descriptions-item label="审核意见" :span="2">
        {{ detail.verifyRemark | dv}}
      </el-descriptions-item>
    </el-descriptions>

    <div slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="submitForm(true)" v-if="canVerify" icon="el-icon-check" :loading="submitLoading">通 过</el-button>
      <el-button type="danger" plain @click="submitForm(false)" v-if="canVerify" icon="el-icon-close" :loading="submitLoading">驳 回</el-button>
      <el-button @click="cancel">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getWithdraw, verifyWithdraw } from "@/api/bst/withdraw";
import { AccountType, WithdrawStatus } from "@/utils/enums";

export default {
  name: 'WithdrawVerifyDialog',
  dicts: ['account_type', 'withdraw_service_type', 'withdraw_status', 'withdraw_verify_result'],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      loading: false,
      AccountType,
      WithdrawStatus,
      detail: {},
      form: {
        id: null,
        pass: null,
        remark: null
      },
      rules: {
      },
      submitLoading: false,
    }
  },
  computed: {
    canVerify() {
      return WithdrawStatus.canVerify().includes(this.detail.status) 
        && this.checkPermi(['bst:withdraw:verify']);
    },
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit('update:visible', val);
      }
    }
  },
  methods: {
    handleOpen() {
      this.reset();
      if (this.id != null) {
        this.getDetail();
      }
    },
    reset() {
      this.detail = {};
      this.form = {
        id: null,
        status: null,
        verifyRemark: null
      };
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.clearValidate();
      });
    },
    getDetail() {
      this.loading = true;
      getWithdraw(this.id).then(response => {
        this.detail = response.data;
        this.form.id = response.data.id;
      }).finally(() => {
        this.loading = false;
      });
    },
    submitForm(pass) {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.pass = pass;
          this.$confirm(`确定要${pass ? '通过' : '驳回'}吗？`).then(() => {
            this.submitLoading = true;
            verifyWithdraw(this.form).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.dialogVisible = false;
              this.$emit('success');
            }).finally(() => {
              this.submitLoading = false;
            });
          });
        }
      });
    },
    cancel() {
      this.dialogVisible = false;
      this.reset();
    }
  }
}
</script>

<style lang="scss" scoped>
.el-descriptions {
  margin-bottom: 20px;
}
</style>