irc_web/.svn/pristine/23/23a6424201bd57359189fc9c36590a3a103a224c.svn-base

<template>
  <div class="app-container exchange-rate data-list">
    <div class="filter-container">
      <el-date-picker
        v-model="listQuery.SearchMonth"
        size="small"
        placeholder="Search Month"
        value-format="yyyy-MM"
        format="yyyy-MM"
        type="month"
        style="width:150px;margin-right:5px"
        :picker-options="pickerOption"
      />
      <el-button size="small" type="text" @click="handleReset">Reset</el-button>
      <el-button type="primary" size="small" @click="handleSearch">Search</el-button>
      <el-button style="margin-left:auto" type="primary" size="small" @click="handleNew">New</el-button>
    </div>
    <div class="list-container">
      <el-table
        v-loading="listLoading"
        :data="list"
        stripe
        class="table"
        height="100%"
        size="small"
      >
        <el-table-column type="index" width="50" />

        <el-table-column prop="YearMonth" label="Month" min-width="60" show-overflow-tooltip />
        <el-table-column prop="Rate" label="Rate" min-width="60" show-overflow-tooltip />
        <el-table-column prop="UpdateTime" label="Update Time" min-width="70" show-overflow-tooltip />

        <el-table-column fixed="right" label="Action" min-width="150">
          <template slot-scope="scope" min-width="130">
            <el-button
              size="small"
              type="text"
              @click="handleEdit(scope.row)"
            >Edit</el-button>
            <el-button
              size="small"
              type="text"
              @click="handleDelete(scope.row)"
            >Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <pagination :total="total" :page.sync="listQuery.PageIndex" :limit.sync="listQuery.PageSize" @pagination="getList" />
    </div>
    <el-dialog
      :key="timer"
      :title="title"
      :visible.sync="dialogVisible"
      width="500px"
      :close-on-click-modal="false"
      size="small"
    >
      <el-form ref="rateForm" label-width="150px" :rules="rules" :model="form" size="small">
        <el-form-item label="Month: " prop="YearMonth">
          <el-date-picker
            v-model="form.YearMonth"
            type="month"
            value-format="yyyy-MM"
            :disabled="form.Id !=''&& form.Id !=undefined"
          />
        </el-form-item>
        <el-form-item label="Exchange Rate: " prop="Rate">
          <el-input v-model="form.Rate" type="number" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" :disabled="btnDisabled" size="small" @click="handleSave">Ok</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getRateList, addOrUpdateExchangeRate, deleteExchangeRate } from '@/api/financials'
import Pagination from '@/components/Pagination'
export default {
  name: 'ExchangeRate',
  components: { Pagination },
  data() {
    return {
      listQuery: { SearchMonth: '', PageIndex: 1, PageSize: 20 },
      list: [],
      listLoading: false,
      total: 0,
      dialogVisible: false,
      title: '',
      timer: '',
      form: {},
      rules: {
        Rate: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        YearMonth: [{ required: true, message: 'Please specify', trigger: 'blur' }]
      },
      btnDisabled: false,
      pickerOption: {
        disabledDate: time => {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  mounted() { this.getList() },
  methods: {
    getList() {
      this.listLoading = true
      getRateList(this.listQuery).then(res => {
        this.listLoading = false
        this.list = res.Result.CurrentPageData
        this.total = res.Result.TotalCount
      }).catch(() => { this.listLoading = false })
    },
    handleNew() {
      this.form = {}
      this.title = 'Add'
      this.timer = new Date().getTime()
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.title = 'Edit'
      this.form = JSON.parse(JSON.stringify(row))
      this.timer = new Date().getTime()
      this.dialogVisible = true
    },
    handleSave() {
      this.$refs.rateForm.validate(valid => {
        if (valid) {
          this.btnDisabled = true
          const param = {
            Rate: this.form.Rate,
            YearMonth: this.form.YearMonth
          }
          this.form.Id ? param.Id = this.form.Id : ''
          addOrUpdateExchangeRate(param).then(res => {
            if (res.IsSuccess) {
              this.getList()
              this.$message.success('Updated successfully!')
              this.dialogVisible = false
            }
            this.btnDisabled = false
          })
            .catch(() => { this.btnDisabled = false })
        }
      })
    },
    handleDelete(row) {
      this.$confirm('Confirm to delete?', {
        type: 'warning',
        distinguishCancelAndClose: true,
        confirmButtonText: 'Yes',
        cancelButtonText: 'No'
      })
        .then(() => {
          deleteExchangeRate(row.Id)
            .then(res => {
              if (res.IsSuccess) {
                this.list.splice(this.list.findIndex(item => item.Id === row.Id), 1)
                this.$message.success('Deleted successfully!')
              }
            })
        })
        .catch(action => {})
    },
    handleSearch() {
      this.listQuery.PageIndex = 1
      this.getList()
    },
    handleReset() {
      this.listQuery.SearchMonth = ''
      this.listQuery.PageIndex = 1
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
.exchange-rate{
  padding: 0;
  .filter-container{
    display: flex;
    align-items: center;
  }
  .list-container{
    height: calc(100% - 70px);
  }
  .el-date-editor.el-input{
    width: 100%;
  }
  .el-date-editor.el-input__inner {
    width: 100%;
  }
}
</style>