refinery-admin/src/views/refineryAccount/rechargeManagement/components/rechargeTurn.vue

<template>
  <el-drawer title="充值圈回" direction="ltr" size="40%" :visible.sync="controlWindows.rechargeTurn" @opened="openDrawer" :before-close="closeWindow">
    <div class="recharge-turn">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="炼厂名称" prop="refineryId">
          <autocomplete ref="autocomplete" :params="form" :config="configAutocomplete" @change="changeRefineryId" />
        </el-form-item>
        <el-form-item label="炼厂账户" prop="refineryAccountId">
          <el-select v-model="form.refineryAccountId" placeholder="请选择">
            <el-option v-for="item in refineryAccountList" :key="item.id" :label="item.accountName" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.refineryAccountId && form.transactionType === 'TURN'">
          <el-descriptions title="炼厂账户信息" :column="1" border>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                炼厂账户
              </template>
              {{ refineryAccountInfo.accountName }}</el-descriptions-item
            >
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-bank-card"></i>
                账户余额
              </template>
              {{ refineryAccountInfo.balance }}
            </el-descriptions-item>
          </el-descriptions>
        </el-form-item>
        <el-form-item label="油批中心账户" prop="refineryCenterAccountId">
          <autocomplete :params="form" :config="accountNameAutocomplete" />
        </el-form-item>
        <el-form-item label="交易类型" prop="transactionType">
          <el-select v-model="form.transactionType" placeholder="请选择">
            <el-option label="充值" value="RECHARGE"> </el-option>
            <el-option label="圈回" value="TURN"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交易金额" prop="transactionAmount">
          <el-input v-checkNum v-model="form.transactionAmount" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="buttons">
      <el-button @click="closeWindow">取消 </el-button>
      <el-button @click="submit">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
import refineryInfoServe from 'api/refineryInfo.js'
import serve from '@/api/refineryAccount/rechargeManagement.js'
import commonServe from '@/api/common.js'

import autocomplete from 'components/autocomplete/index.vue'
export default {
  components: {
    autocomplete
  },
  props: {
    controlWindows: Object
  },
  data() {
    let validatorRefineryId = (rule, value, callback) => {
      if (this.form.refineryId) callback()
      else callback('请选择炼厂')
    }

    let validatorRefineryCenterAccountId = (rule, value, callback) => {
      if (this.form.refineryCenterAccountId) callback()
      else callback('请选择油批中心账户')
    }
    let validatorTransactionAmount = (rule, value, callback) => {
      if (!value) return callback('请输入交易金额或交易金额不可为0')
      if (this.form.transactionType === 'TURN' && +value > +this.refineryAccountInfo.balance) return callback('交易金额不可高于账户余额')
      callback()
    }
    return {
      form: { refineryAccountId: '', refineryCenterAccountId: '' },
      refineryAccountList: [],
      refineryList: [],
      configAutocomplete: {
        serveTarget: refineryInfoServe.findByEntity,
        autocompleteKey: 'refineryName',
        labelKey: 'refineryName',
        valueKey: 'id',
        placeholder: '炼厂名称',
        querykey: 'refineryId'
      },
      accountNameAutocomplete: {
        serveTarget: commonServe.findByEntity,
        autocompleteKey: 'accountName',
        labelKey: 'accountName',
        valueKey: 'id',
        placeholder: '油批中心账户',
        querykey: 'refineryCenterAccountId'
      },
      rules: {
        refineryId: [{ required: true, validator: validatorRefineryId, trigger: 'change' }],
        refineryAccountId: [{ required: true, message: '请选择炼厂账户', trigger: 'blur' }],
        transactionType: [{ required: true, message: '请选择交易类型', trigger: 'change' }],
        transactionAmount: [{ required: true, validator: validatorTransactionAmount, trigger: 'change' }],
        refineryCenterAccountId: [{ required: true, validator: validatorRefineryCenterAccountId, trigger: 'change' }]
      }
    }
  },
  computed: {
    refineryAccountInfo() {
      return this.refineryAccountList.find(item => item.id == this.form.refineryAccountId) || {}
    }
  },
  methods: {
    openDrawer() {},
    changeRefineryId(val) {
      this.form.refineryAccountId = ''
      this.refineryAccountList = []
      if (val) {
        serve.getByList({ refineryId: val }).then(res => {
          this.refineryAccountList = res.data
        })
      }
    },
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          serve.save(this.form).then(res => {
            if (res.code === 20000) {
              this.$message.success(res.msg)
              this.closeWindow()
            }
          })
        }
      })
    },
    closeWindow() {
      this.$emit('closeWindow')
      this.form = { refineryAccountId: '' }
      this.$nextTick(() => {
        this.$refs.autocomplete.list = []
        this.refineryAccountList = []
        this.$refs.form.clearValidate()
        this.controlWindows.rechargeTurn = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.recharge-turn {
  padding: 20px;
  .el-input,
  .el-select,
  .el-textarea,
  .el-autocomplete,
  .el-descriptions {
    width: 300px;
  }
}
.buttons {
  position: absolute;
  left: 0;
  bottom: 0;
  padding-right: 40px;
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: right;
  border-top: 1px solid #f2f3f5;
  .el-button {
    text-align: right;
    font-size: 14px;
    border-radius: 5px;
  }
}
</style>