aslan-admin/src/components/data/UserInfo/BankCardDrawer/index.vue

<template>
  <div class="user-bank-card-list">
    <el-drawer
      :title="$t('pages.bankCardDrawer.drawer.title')"
      :visible="true"
      :before-close="handleClose"
      :close-on-press-escape="false"
      :wrapper-closable="false"
      :modal-append-to-body="true"
      :append-to-body="true"
      custom-class="drawer-auto-layout"
    >
      <div class="filter-container">
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-edit"
          style="margin: 10px;"
          @click="handleCreate"
        >
          {{ $t('pages.bankCardDrawer.action.create') }}
        </el-button>
      </div>
      <div v-loading="listLoading">
        <el-row v-for="(item, index) in list" :key="index">
          <el-card style="margin: 10px;">
            <div>
              <el-tag effect="plain">{{ $t('pages.bankCardDrawer.label.cardNo') }}: {{ item.cardNo }}</el-tag>
              <el-tag effect="plain">{{ $t('pages.bankCardDrawer.label.payee') }}: {{ item.payee }}</el-tag>
              <el-tag effect="plain">{{ $t('pages.bankCardDrawer.label.bank') }}: {{ item.cardName }}</el-tag>
              <el-tag
                v-if="item.status === 'PENDING'"
                effect="plain"
                type="info"
              >{{ $t('pages.bankCardDrawer.label.auditStatus') }}: {{ $t('pages.bankCardDrawer.status.pending') }}</el-tag>
              <el-tag
                v-if="item.status === 'PASS'"
                effect="plain"
                type="success"
              >{{ $t('pages.bankCardDrawer.label.auditStatus') }}: {{ $t('pages.bankCardDrawer.status.pass') }}</el-tag>
              <el-tag
                v-if="item.status === 'NOT_PASS'"
                effect="plain"
                type="danger"
              >{{ $t('pages.bankCardDrawer.label.auditStatus') }}: {{ $t('pages.bankCardDrawer.status.notPass') }}</el-tag>
              <el-tag
                v-if="item.use"
                effect="plain"
                type="success"
              >{{ $t('pages.bankCardDrawer.label.inUse') }}: {{ $t('pages.bankCardDrawer.word.yes') }}</el-tag>
              <el-tag
                v-if="!item.use"
                effect="plain"
                type="info"
              >{{ $t('pages.bankCardDrawer.label.inUse') }}: {{ $t('pages.bankCardDrawer.word.no') }}</el-tag>
            </div>
            <div class="bottom clearfix">
              <time class="time">{{ $t('pages.bankCardDrawer.label.createdAt') }}:{{ item.createTime }}</time>
            </div>
            <div class="clearfix">
              <el-button
                type="text"
                @click.native="handleUpdate(item)"
              >{{ $t('pages.bankCardDrawer.action.edit') }}</el-button>
              <el-button
                v-if="!item.use"
                type="text"
                @click.native="handleUse(item)"
              >{{ $t('pages.bankCardDrawer.action.use') }}</el-button>
              <el-button
                type="text"
                @click.native="handleDelete(item)"
              >{{ $t('pages.bankCardDrawer.action.delete') }}</el-button>
            </div>
          </el-card>
        </el-row>
      </div>
      <el-dialog
        width="450px"
        :title="formDialogTitle"
        :visible.sync="form2Visible"
        :modal-append-to-body="true"
        append-to-body
      >
        <div v-loading="submitLoading">
          <el-form
            ref="dataForm"
            :rules="localizedRules"
            :model="dataForm"
            label-position="left"
            label-width="70px"
            style="width: 300px; margin-left:50px;"
          >
            <el-form-item
              v-if="dataForm.id === ''"
              :label="$t('pages.bankCardDrawer.form.cardType')"
              prop="cardType"
            >
              <el-select
                v-model="dataForm.cardType"
                :placeholder="$t('pages.bankCardDrawer.placeholder.cardType')"
                style="width: 120px"
                class="filter-item"
                @change="getBankCardTypeName(dataForm)"
              >
                <el-option
                  v-for="(item, index) in bankCardType"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item
              v-if="dataForm.id === '' && dataForm.cardType === 'BANK'"
              :label="$t('pages.bankCardDrawer.form.cardName')"
              prop="cardName"
            >
              <el-input
                v-model.trim="dataForm.cardName"
                :placeholder="$t('pages.bankCardDrawer.placeholder.cardName')"
              />
            </el-form-item>

            <el-form-item :label="$t('pages.bankCardDrawer.form.payee')" prop="payee">
              <el-input v-model.trim="dataForm.payee" :placeholder="$t('pages.bankCardDrawer.placeholder.payee')" />
            </el-form-item>

            <el-form-item :label="$t('pages.bankCardDrawer.form.cardNo')" prop="cardNo">
              <el-input v-model.trim="dataForm.cardNo" :placeholder="$t('pages.bankCardDrawer.placeholder.cardNo')" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align: center;">
            <el-button @click="form2Visible = false">
              {{ $t('pages.bankCardDrawer.action.cancel') }}
            </el-button>
            <el-button
              v-loading="listLoading"
              type="primary"
              @click="handleSubmit()"
            >
              {{ $t('pages.bankCardDrawer.action.submit') }}
            </el-button>
          </div>
        </div>
      </el-dialog>
    </el-drawer>
  </div>
</template>

<script>
import {
  listBankCardTable,
  updateBankCard,
  addBankCard,
  deleteBankCard,
  useBankCard
} from '@/api/user'
import { bankCardType } from '@/constant/team-type'
function getFormData() {
  return {
    id: '',
    userId: '',
    cardType: '',
    payee: '',
    cardNo: '',
    sysOrigin: ''
  }
}
export default {
  name: 'BankCardList',
  props: {
    row: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      bankCardType,
      submitLoading: false,
      list: [],
      form2Visible: false,
      listLoading: false,
      dialogMode: 'create',
      dataForm: {
        id: '',
        userId: '',
        cardType: '',
        cardName: '',
        payee: '',
        cardNo: '',
        status: '',
        sysOrigin: ''
      }
    }
  },
  computed: {
    localizedRules() {
      return {
        cardType: [this.getRequiredRule('pages.bankCardDrawer.validation.cardTypeRequired')],
        payee: [this.getRequiredRule('pages.bankCardDrawer.validation.payeeRequired')],
        cardNo: [this.getRequiredRule('pages.bankCardDrawer.validation.cardNoRequired')],
        cardName: [this.getRequiredRule('pages.bankCardDrawer.validation.cardNameRequired')]
      }
    },
    formDialogTitle() {
      return this.$t(`pages.bankCardDrawer.dialog.${this.dialogMode}`)
    }
  },
  created() {
    this.renderData()
  },
  methods: {
    getRequiredRule(messageKey) {
      return {
        required: true,
        message: this.$t(messageKey),
        trigger: 'blur'
      }
    },
    renderData() {
      const that = this
      that.listLoading = true
      listBankCardTable(that.row.id).then(res => {
        const { body } = res
        that.list = body
        that.listLoading = false
      })
    },
    handleSubmit() {
      const that = this
      that.$refs.dataForm.validate(valid => {
        if (valid) {
          that.submitLoading = true
          that.dataForm.userId = that.row.id
          that.dataForm.sysOrigin = that.row.userProfile.originSys
          if (that.dataForm.id) {
            updateBankCard(that.dataForm)
              .then(res => {
                that.submitLoading = false
                that.formVisible = false
                that.form2Visible = false
                that.dataForm = getFormData()
                that.renderData()
              })
              .catch(er => {
                that.submitLoading = false
                console.error(er)
                this.$emit('fail')
              })
            return
          }
          addBankCard(that.dataForm)
            .then(res => {
              that.submitLoading = false
              that.formVisible = false
              that.dataForm = getFormData()
              that.form2Visible = false
              that.renderData()
            })
            .catch(er => {
              that.submitLoading = false
              console.error(er)
            })
        } else {
          console.error('error submit!!')
          return false
        }
      })
    },
    handleDelete(row) {
      const that = this
      that
        .$confirm(this.$t('pages.bankCardDrawer.confirm.delete'), this.$t('pages.bankCardDrawer.confirm.title'), {
          type: 'warning'
        })
        .then(() => {
          that.listLoading = true
          deleteBankCard(row.id)
            .then(res => {
              that.listLoading = false
              that.$opsMessage.success()
              that.renderData()
            })
            .catch(() => {
              that.listLoading = false
            })
        })
        .catch(() => {})
    },
    handleUse(row) {
      const that = this
      that
        .$confirm(this.$t('pages.bankCardDrawer.confirm.use'), this.$t('pages.bankCardDrawer.confirm.title'), {
          type: 'warning'
        })
        .then(() => {
          that.listLoading = true
          useBankCard(row.id)
            .then(res => {
              that.listLoading = false
              that.$opsMessage.success()
              that.renderData()
            })
            .catch(() => {
              that.listLoading = false
            })
        })
        .catch(() => {})
    },
    handleClose() {
      this.$emit('close')
    },
    handleCreate() {
      this.dialogMode = 'create'
      this.form2Visible = true
      this.dataForm = getFormData()
    },
    handleUpdate(row) {
      this.dialogMode = 'edit'
      this.form2Visible = true
      this.dataForm = Object.assign(this.dataForm, row)
    },
    getBankCardTypeName(_dataForm) {
      const that = this
      if (_dataForm.cardType === 'BANK') {
        return
      }
      that.bankCardType.forEach(function(v, i) {
        if (v.value === _dataForm.cardType) {
          that.dataForm.cardName = v.name
          return
        }
      })
    }
  }
}
</script>

<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 30%;
  margin-top: 10px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>