irc_web/.svn/pristine/cd/cdd1111060f8927e8fc346ec39f5d7526d699887.svn-base

<template>
  <el-form
    ref="adjustmentForm"
    size="small"
    :model="adjustmentForm"
    label-width="120px"
    :rules="rules"
    class="demo-ruleForm adjustmentForm"
  >
    <el-form-item label="Reviewer" prop="ReviewerId">
      <el-select v-model="adjustmentForm.ReviewerId" filterable placeholder="Please select">
        <el-option
          v-for="item in reviewerList"
          :key="item.Code"
          :label="item.info"
          :value="item.Id"
        >
          <span style="float: left">{{ item.info }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.ChineseName }}</span>
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="Adjust Month" prop="YearMonth">
      <el-date-picker
        v-model="adjustmentForm.YearMonth"
        type="month"
        placeholder="Please select"
        value-format="yyyy-MM"
        format="yyyy-MM"
        disabled
      />
    </el-form-item>
    <el-form-item label="Amount($)" prop="AdjustPaymentUSD">
      <el-input-number v-model="adjustmentForm.AdjustPaymentUSD" controls-position="right" />
      <span
        v-if="adjustmentForm.AdjustPaymentUSD && exchangeRate"
        style="font-size: 12px;color: #428bca;margin-right:10px"
      >Tips: Exchange Rate: {{ exchangeRate }}</span>
      <span
        v-if="adjustmentForm.AdjustPaymentUSD && exchangeRate"
        style="font-size: 12px;color: #428bca;"
      >Amount(￥): {{ (adjustmentForm.AdjustPaymentUSD*exchangeRate).toFixed(2) }}</span>
      <span
        v-else-if="!exchangeRate"
        style="font-size: 12px;color: #f44336;"
      >Exchange rate is not set.</span>
    </el-form-item>
    <el-form-item label="Note" prop="Note">
      <el-input v-model="adjustmentForm.Note" type="textarea" :autosize="{ minRows: 4 }" />
    </el-form-item>
    <el-form-item>
      <el-button size="small" type="primary" @click="handleCancel">Cancel</el-button>
      <el-button size="small" type="primary" :disabled="btnDisabled" @click="handleSave">Save</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import store from '@/store'
import { mapGetters } from 'vuex'
import { addOrUpdatePaymentAdjustment } from '@/api/financials'
export default {
  name: 'AdjustmentForm',
  props: {
    row: {
      type: Object,
      default: function() {
        return {}
      }
    },
    date: {
      type: String,
      default: ''
    },
    exchangeRate: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      adjustmentForm: { Id: '', ReviewerId: '', YearMonth: '', AdjustPaymentUSD: '', Note: '' },
      rules: {
        ReviewerId: [{ required: true, message: 'Please select', trigger: ['blur', 'change'] }],
        AdjustPaymentUSD: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        Note: [{ max: 500, message: 'The maximum length is 500' }]
      },
      btnDisabled: false
    }
  },
  computed: {
    ...mapGetters(['reviewerList'])
  },

  mounted() {
    store.dispatch('financials/getReviewer')
    this.adjustmentForm.YearMonth = this.date
    if (this.row.Id) {
      this.adjustmentForm.Id = this.row.Id
      this.adjustmentForm.ReviewerId = this.row.ReviewerId
      // this.adjustmentForm.AdjustedYearMonth = this.row.AdjustedYearMonth
      this.adjustmentForm.AdjustPaymentUSD = this.row.AdjustPaymentUSD
      this.adjustmentForm.Note = this.row.Note
    }
  },
  methods: {
    handleSave() {
      this.$refs.adjustmentForm.validate(valid => {
        if (valid) {
          if (this.adjustmentForm.AdjustPaymentUSD === 0) {
            this.$alert('Amount cannot be 0!')
          } else {
            this.btnDisabled = true
            addOrUpdatePaymentAdjustment(this.adjustmentForm)
              .then(res => {
                if (res.IsSuccess) {
                  this.btnDisabled = false
                  this.$message.success('Saved successfully')
                  this.$emit('closeDialog')
                  this.$emit('getList')
                }
              })
              .catch(() => {
                this.btnDisabled = false
              })
          }
        }
      })
    },
    handleCancel() {
      this.$emit('closeDialog')
    }
  }
}
</script>
<style lang="scss">
.adjustmentForm{
  .el-input{width: 100%}
  .el-select{width: 100%}
  .el-input-number{
    width: 100%
  }
}

</style>