refinery-admin/src/views/financialCenter/accountManagement/components/recharge.vue

<template>
  <el-dialog
    title="充值"
    :visible.sync="controlWindows.recharge"
    width="55%"
    :before-close="closeWindow"
    @opened="openDrawer"
  >
    <div class="recharge.vue">
      <el-form ref="form" :rules="rules" :model="oilCompanyAccountReverse" label-width="120px">
        <el-row :gutter="gridNum.row.gutter">
          <el-col :span="12">
            <el-form-item label="交易类型" prop="transactionType" @click="transactionTypeChange">
              <el-select v-model="oilCompanyAccountReverse.transactionType" >
                <el-option label="充值" value="RECHARGE" />
<!--                <el-option label="销账" value="REVOKE" />-->
<!--                <el-option label="赊销" value="CHARGE_SALES" />-->
<!--                <el-option label="消费返利" value="CONSUME_REBATE" />-->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交易金额" prop="transactionAmount">
              <el-input v-model="oilCompanyAccountReverse.transactionAmount" placeholder="交易金额" clearable />
            </el-form-item>
          </el-col>
          <el-col v-if="(companyFinance.settlementModes===1||companyFinance.settlementModes===3) && oilCompanyAccountReverse.transactionType === 'RECHARGE'" :span="12">
            <el-form-item label="充值返利比例" prop="rechargeRebate">
              <el-input v-model="oilCompanyAccountReverse.rechargeRebate" clearable />
            </el-form-item>
          </el-col>
          <el-col v-if="oilCompanyAccountReverse.transactionType !== 'REVOKE'" :span="12">
            <el-form-item label="线下汇款公司账户" prop="offlinePaymentCompany">
              <el-input v-model="oilCompanyAccountReverse.offlinePaymentCompany" placeholder="线下汇款公司账户" clearable />
            </el-form-item>
          </el-col>
          <el-col v-if="oilCompanyAccountReverse.transactionType !== 'REVOKE'" :span="12">
            <el-form-item label="线下交易发起时间" prop="offlineStartTime">
              <el-date-picker
                v-model="oilCompanyAccountReverse.offlineStartTime"
                clearable
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"

                type="datetime"
                placeholder="线下交易发起时间"
              />
            </el-form-item>
          </el-col>
          <el-col v-if="oilCompanyAccountReverse.transactionType !== 'REVOKE'" :span="12">
            <el-form-item label="线下交易完成时间" prop="offlineCompleteTime">
              <el-date-picker
                v-model="oilCompanyAccountReverse.offlineCompleteTime"
                clearable
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"

                type="datetime"
                placeholder="线下交易完成时间"
              />
            </el-form-item>
          </el-col>
          <el-col v-if="oilCompanyAccountReverse.transactionType !== 'REVOKE'" :span="12">
            <el-form-item label="线下交易凭证" prop="offlineTransactionProof">
              <el-upload
                :action="uploadUrl"
                list-type="picture-card"
                :on-preview="offlineTransactionProofPreview"
                :on-success="offlineTransactionProofSuccess"
                :on-remove="offlineTransactionProofRemove"
                :headers="headers"
                :data="{'code':'A003'}"
                :limit="1"
              >
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>
            <el-dialog
              v-el-drag-dialog
              :visible.sync="imgeDialogVisible"
              title="线下交易凭证"
              :modal="false"
            >
              <img width="100%" :src="oilCompanyAccountReverse.offlineTransactionProofImageShow" alt="">
            </el-dialog>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="controlWindows.recharge = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import serve from "api/financialCenter/accountManagement.js";
import utils from "utils/encode";
const JSESSIONID = utils.uuid();
export default {
  props: {
    controlWindows: Object,
    oilCompanyAccount: {
      type: Object,
      default() {

      }
    }
  },
  data() {
    return {
      uploadUrl:
        process.env.VUE_APP_ENV === "development"
          ? "/api/oil-oss/obejct/uploadFile"
          : "/adminapi/oil-oss/obejct/uploadFile",
      imgDialog: false,
      headers: {
        dataSources: "WEB",
        Authorization: localStorage.getItem("token"),
        JSESSIONID: JSESSIONID,
        token: utils.bcrypt(JSESSIONID),
      },
      oilCompanyAccountReverse: {
        offlineTransactionProof: undefined,
        offlineTransactionProofImageShow: undefined,
        companyId: this.oilCompanyAccount.companyId,
        transactionType: undefined,
        transactionAmount: undefined,
        rechargeRebate: undefined,
        offlinePaymentCompany: undefined,
        offlineStartTime: undefined,
        offlineCompleteTime: undefined,
        transactionState: 0,
        auditMark: 0,
        createSource: 'WEBM'
      },
      imgeDialogVisible: false, // 线下交易凭证弹窗
      gridNum: {
        row: {
          gutter: 2
        },
        cols: {
          xs: 24,
          sm: 24,
          md: 12,
          lg: 12,
          xl: 6
        }
      },
      rules: {
      transactionType: [
        { required: true, message: '请选择交易类型', trigger: 'change' }
      ],
        transactionAmount: [
        { required: true, message: '请输入交易金额', trigger: 'blur' },
        { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '金额格式有误' }
      ],
        rechargeRebate: [
        { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '格式有误' }
      ],
        offlinePaymentCompany: [
        { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }

      ]
    },
    companyFinance: {
    }// 财务信息
    };
  },
  methods: {
    openDrawer() {},
    transactionTypeChange(type) { // 交易类型发生改变
      if (this.oilCompanyAccountReverse.transactionType === 'CHARGE_SALES' || this.oilCompanyAccountReverse.transactionType === 'REVOKE') {
        this.oilCompanyAccountReverse.rechargeRebate = 0
        this.oilCompanyAccountReverse.rechargeRebateAmount = 0
      }
    },
    offlineTransactionProofRemove() { // 线下交易凭证删除
      this.oilCompanyAccountReverse.offlineTransactionProofImageShow = undefined
      this.oilCompanyAccountReverse.offlineTransactionProof = undefined
    },
    offlineTransactionProofSuccess(response, file) { // 线下交易凭证上传成功
      console.log('response', response)
      if (response.code === 20000) {
        this.oilCompanyAccountReverse.offlineTransactionProof = response.data.path
      }
    },
    offlineTransactionProofPreview(file) { // 查询大图
      this.oilCompanyAccountReverse.offlineTransactionProofImageShow = file.url
      this.imgeDialogVisible = true
    },
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.save(this.oilCompanyAccountReverse)
        }
      })
    },
    save() {
      // 保存
      serve.save(this.oilCompanyAccountReverse).then(res => {
        this.$message.success(res.msg)
        this.$emit('closeDialog')
        this.$emit('getByPage')
      })
    },
    closeWindow() {
      this.form = {};
      this.$emit("closeWindow");
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
        this.controlWindows.recharge = false;
      });
    },
  },
};
</script>