platform-customsdeclaration-ssr/components/clientPage/paymentAlert.vue

<template>
  <alert @closeAlert="closeAlert" :AlertTitle="AlertTitle" v-if="showAlert">
    <ul class="form-list">
      <li class="clearfix">
        <div class="pull-left name"><span v-if="IslookOrUpdate !== 'look'">*</span>客户中文名称</div>
        <div class="pull-left">
          <template v-if="IslookOrUpdate !== 'look'">
            <el-input placeholder="请输入客户中文名称" v-model="chooseItem.coNameCn" clearable class="input-text2">
            </el-input>
          </template>
          <template v-else>
            <div class="text">{{chooseItem.coNameCn}}</div>
          </template>
        </div>
      </li>

      <li class="clearfix">
        <div class="pull-left name">客户英文名称</div>
        <div class="pull-left">
          <template v-if="IslookOrUpdate !== 'look'">
            <el-input placeholder="请输入客户英文名称" v-model="chooseItem.coNameEn" clearable class="input-text2">
            </el-input>
          </template>
          <template v-else>
            <div class="text">{{chooseItem.coNameEn}}</div>
          </template>
        </div>
      </li>

      <li class="clearfix">
        <div class="pull-left name">客户地址</div>
        <div class="pull-left">
          <template v-if="IslookOrUpdate !== 'look'">
            <el-input placeholder="建议您填写详细地址，例如街道/门牌号，楼层和房间号等信息" v-model="chooseItem.coAdd" clearable class="input-text2">
            </el-input>
          </template>
          <template v-else>
            <div class="text">{{chooseItem.coAdd}}</div>
          </template>
        </div>
      </li>

      <li class="clearfix">
        <div class="pull-left name"><span v-if="IslookOrUpdate !== 'look'">*</span>银行名称</div>
        <div class="pull-left">
          <template v-if="IslookOrUpdate !== 'look'">
            <el-input placeholder="请输入银行名称" v-model="chooseItem.bankName" clearable class="input-text2">
            </el-input>
          </template>
          <template v-else>
            <div class="text">{{chooseItem.bankName}}</div>
          </template>
        </div>
      </li>

      <li class="clearfix">
        <div class="pull-left name"><span v-if="IslookOrUpdate !== 'look'">*</span>银行账号</div>
        <div class="pull-left">
          <template v-if="IslookOrUpdate !== 'look'">
            <el-input placeholder="请输入银行账号" v-model="chooseItem.accNo" clearable class="input-text2">
            </el-input>
          </template>
          <template v-else>
            <div class="text">{{chooseItem.accNo}}</div>
          </template>
        </div>
      </li>

      <li class="clearfix">
        <div class="pull-left name">银行代码</div>
        <div class="pull-left">
          <template v-if="IslookOrUpdate !== 'look'">
            <el-input placeholder="请输入银行代码" v-model="chooseItem.swiftCode" clearable class="input-text2">
            </el-input>
          </template>
          <template v-else>
            <div class="text">{{chooseItem.swiftCode}}</div>
          </template>
        </div>
      </li>

      <li class="clearfix">
        <div class="pull-left name">银行地址</div>
        <div class="pull-left">
          <template v-if="IslookOrUpdate !== 'look'">
            <el-input placeholder="建议您填写详细地址，例如街道/门牌号，楼层和房间号等信息" v-model="chooseItem.bankAdd" clearable class="input-text2">
            </el-input>
          </template>
          <template v-else>
            <div class="text">{{chooseItem.bankAdd}}</div>
          </template>
        </div>
      </li>
    </ul>

    <div class="control-btn">
      <template v-if="IslookOrUpdate !== 'look'">
        <div class="save" @click="closeAlert('save')">保存</div>
        <div class="cancel" @click="closeAlert()">取消</div>
      </template>
      <template v-else>
        <div class="save" @click="closeAlert()">关闭</div>
      </template>
    </div>
  </alert>
</template>

<script>
  import { Alert } from '@/components/common'
  export default {
    components: {
      Alert
    },
    props: {
      IslookOrUpdate: {
        type: String,
        default: 'update'
      },
      AlertTitle: {
        type: String,
        default: '新增外汇账号'
      },
      chooseItem: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        showAlert: false
      }
    },
    methods: {
      closeAlert(_tp) {
        if (_tp) {
          if (!this.chooseItem.coNameCn || this.chooseItem.coNameCn.trim() === '') {
            this.$message({
              type: 'error',
              message: '请填写客户中文名称'
            })
            return;
          } else if (!this.chooseItem.bankName || this.chooseItem.bankName.trim() === '') {
            this.$message({
              type: 'error',
              message: '请填写银行名称'
            })
            return;
          } else if (!this.chooseItem.accNo || this.chooseItem.accNo.trim() === '') {
            this.$message({
              type: 'error',
              message: '请填写银行账号'
            })
            return;
          }
        }
        this.$emit('closeAlert', _tp, this.chooseItem)
      },
      hide() {
        this.showAlert = false
      },
      show() {
        this.showAlert = true
      }
    }
  }
</script>

<style>

</style>