platform-customsdeclaration-ssr/pages/clientPage/paymentAccount/index.vue

<template>
  <div>
    <div class="headline">
      <span>付汇账号管理</span>
      <div class="search_time">
        <a @click="updateItem()"><i class="border_radius">+</i>新增外汇账号</a>
      </div>
    </div>
    <ctable
      :data="tableData"
      :headArr="headArr"
      :StyleWidth="StyleWidth"
      :totalElements="totalElements"
      :controlArray="controlArray"
      @lookItem="lookItem"
      @updateItem="updateItem"
      @deleteItem="deleteItem"
      @handleCurrentChange="handleCurrentChange"
      :currentPage="currentPage"
    >

    </ctable>
    <payment-alert :AlertTitle="AlertTitle"
                    @closeAlert="closeAlert"
                    :chooseItem="chooseItem"
                    ref="paymentAlert"
                    :IslookOrUpdate="IslookOrUpdate">
    </payment-alert>
  </div>
</template>

<script>
  import { Ctable } from '@/components/base/table'
  import { clone, Vuehttp } from '@/utils/tools'
  import { CtableClass } from '@/utils/CtableClass'
  import { paymentAlert } from '@/components/clientPage'
  export default {
    name: 'PaymentAccountView',
    data() {
      return {
        currentPage: 1,
        chooseItem: {},
        IslookOrUpdate: 'update'
      }
    },
    fetch ({store}) {
      return Promise.all([
        store.dispatch('loadremittanceInfo', {page: this.currentPage, count: 10})
      ])
    },
    computed: {
      headArr() {
        return ['客户名称', '银行名称', '银行代码', '银行账号', '创建时间', '操作']
      },
      StyleWidth() {
        return [236, 182, 182, 202, 184, 178]
      },
      tableData() {
        return CtableClass(this.getHttpResource, ['coNameCn', 'bankName', 'swiftCode', 'accNo', ['时间戳', 'createTime'], '操作'])
      },
      getHttpResource() {
        return this.$store.state.payment.list.data.content.content
      },
      totalElements() {
        return this.$store.state.payment.list.data.content.totalElements
      },
      controlArray() {
        return [['查看', 'lookItem'],['编辑', 'updateItem'],['删除', 'deleteItem']]
      },
      AlertTitle() {
        return this.IslookOrUpdate === 'add' ? '新增外汇账号' : (this.IslookOrUpdate === 'update' ? '修改信息' : '查看信息')
      }
    },
    methods: {
      lookItem(index) {
        this.IslookOrUpdate = 'look'
        this.chooseItem = clone(this.getHttpResource[index])
        this.$refs.paymentAlert.show()
      },
      updateItem(index) {
        this.chooseItem = {}
        this.IslookOrUpdate = 'add'
        if (index !== undefined) {
          this.IslookOrUpdate = 'update'
          this.chooseItem = clone(this.getHttpResource[index])
        }
        this.$refs.paymentAlert.show()
      },
      handleCurrentChange(page) {
        this.currentPage = page
        this.$store.dispatch('loadremittanceInfo', {count: 10, page: this.currentPage})
      },
      deleteItem(index) {
        let item = clone(this.getHttpResource[index])
        this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.delete(`/customer/remittanceAccount/delete?id=${item.id}`).then(res => {
            if (res.data.code !== 1) {
              this.$message.error(res.data.message)
            } else {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.handleCurrentChange(1)
            }
          })
        }).catch(() => {
        });
      },
      closeAlert(tp, item) {
        if (tp === 'save') {
          let params = {
            exchangeRate: {
              coNameCn: item.coNameCn || '',
              coNameEn: item.coNameEn,
              coAdd: item.coAdd || '',
              bankName: item.bankName,
              bankAdd: item.bankAdd || '',
              accNo: item.accNo,
              swiftCode: item.swiftCode
            }
          }
          let url = '/customer/remittanceAccount/persist'
          if (this.IslookOrUpdate === 'update') {
            params = {
              exchangeRate: item
            }
          }
          Vuehttp(params, url).then(res => {
            if (res.data.code !== 1) {
              this.$message.error(res.data.message)
            } else {
              this.$refs.paymentAlert.hide()
              this.handleCurrentChange(1)
            }
          })
        } else {
          this.$refs.paymentAlert.hide()
        }
      }
    },
    components: {
      Ctable,
      paymentAlert
    }
  }
</script>

<style scoped type="text/scss" lang="scss">

</style>