dispacth_zhongpin/src/views/finance/openTicket/openTicketInfoUpdate.vue

<template>
  <div class="container">

    <section class="order-info">
      <div class="header">
        <span>订单信息</span>
      </div>
      <div class="my-cell">
        <div class="cell-item">
          <span class="color-999 test-tst">订单号</span>
          <br><br>
          <span class="inner-data">{{ openTicketInfo.orderSerialNumber }}</span>
        </div>
        <div class="cell-item">
          <span class="color-999 test-tst">订单金额</span>
          <br><br>
          <span class="inner-data">{{ openTicketInfo.invoicAmount }}</span>
        </div>

        <div class="cell-item">
          <span class="color-999 test-tst">司机信息</span>
          <br><br>
          <span class="inner-data">{{ openTicketInfo.userName }} - {{ openTicketInfo.phone }} </span>
        </div>
      </div>

      <div class="my-cell">
        <div class="cell-item">
          <span class="color-999 test-tst">加油时间</span>
          <br><br>
          <span class="inner-data">{{ openTicketInfo.createTime }}</span>
        </div>
        <div class="cell-item">
          <span class="color-999 test-tst">油站信息</span>
          <br><br>
          <span class="inner-data">{{ openTicketInfo.siteName }} </span>
        </div>
        <div class="cell-item" />
      </div>
    </section>

    <section class="invoic-info">
      <div class="header">
        <span>开票信息</span>
      </div>
      <div class="my-cell">
        <div class="cell-item">
          <span class="color-999 test-tst">开票抬头</span>
          <br><br>
          <el-input v-model="openTicketInfo.invoicName" />
        </div>
        <div class="cell-item">
          <span class="color-999 test-tst">纳税识别号</span>

          <br><br>
          <el-input v-model="openTicketInfo.invoicTaxIdentiNumber" />
        </div>
        <div class="cell-item">
          <span class="color-999 test-tst">公司地址</span>
          <br><br>
          <el-input v-model=" openTicketInfo.invoicAddress " />
        </div>

      </div>

      <div class="my-cell">
        <div class="cell-item">
          <span class="color-999 test-tst">公司电话号码</span>

          <br><br>
          <el-input v-model="openTicketInfo.invoicTel" />
        </div>

        <div class="cell-item">
          <span class="color-999 test-tst">账户号</span>
          <br><br>
          <el-input v-model="openTicketInfo.invoicBankNumber" />
        </div>
        <div class="cell-item">
          <span class="color-999 test-tst">开户行</span>
          <br><br>
          <el-input v-model=" openTicketInfo.invoicOpenBank" />
        </div>

      </div>

      <div class="my-cell">
        <div class="cell-item">
          <span class="color-999 test-tst">开票申请时间</span>
          <br><br>
          <span class="inner-data">{{ openTicketInfo.auditRecordTime }}</span>
        </div>
        <div class="cell-item">
          <span class="color-999 test-tst">收票邮箱</span>
          <br><br>
          <el-input v-model="openTicketInfo.invoicEmail " />
        </div>
        <div class="cell-item" />
      </div>

      <div class="my-cell">
        <div class="cell-item">
          <span class="color-999 test-tst">开票备注</span>
          <br><br>
          <el-input
            v-model="openTicketInfo.remark"
            type="textarea"
            style="width: 35vw;"
            :autosize="{ minRows: 4}"
            placeholder="请输入开票备注"
          />
        </div>
      </div>

    </section>

    <div style="float: right;">
      <el-button @click="$emit('close')">取消</el-button>
      <el-button @click="update">提交</el-button>
      <el-button type="primary" @click="updateAndAudit">提交并审核</el-button>
    </div>
  </div>
</template>

<script>
import openTicketApi from '@/api/finance/openTicketApi'
export default {
  props: {
    openTicketInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
    update() {
      const flag = this.resolveParams()
      if (!flag) {
        this.$emit('close')
        return
      }
      openTicketApi.update(this.openTicketInfo).then(e => {
        if (e.data != null && e.data.remark != null) {
          this.$message.error(e.data.remark)
          this.$emit('flush')
          return
        } else {
          this.$emit('flush')
          this.$emit('close')
        }
      })
    },
    updateAndAudit() {
      const flag = this.resolveParams()
      if (!flag) {
        this.$emit('close')
        return
      }
      openTicketApi.update(this.openTicketInfo).then(res => {
        if (res.data != null && res.data.remark != null) {
          this.$message.error(res.data.remark)
          return
        }
        this.openTicketInfo.originAuditMark = this.openTicketInfo.auditMark
        if (this.openTicketInfo.auditMark == -1) {
          this.openTicketInfo.originAuditMark = 0
        }
        this.openTicketInfo.auditMark = 1

        openTicketApi.audit(this.openTicketInfo).then(e => {
          this.$emit('flush')
          this.$emit('close')
        })
      })
    },
    resolveParams() {
      if (this.openTicketInfo.invoicName == null || this.openTicketInfo.invoicName == '') {
        this.$message.error('发票抬头不能为空')
        return false
      } else if (this.openTicketInfo.invoicTaxIdentiNumber == null || this.openTicketInfo.invoicTaxIdentiNumber == '') {
        this.$message.error('税号不能为空')
        return false
      } else if (this.openTicketInfo.invoicAddress == null || this.openTicketInfo.invoicAddress == '') {
        this.$message.error('公司地址不能为空')
        return false
      } else if (this.openTicketInfo.invoicTel == null || this.openTicketInfo.invoicTel == '') {
        this.$message.error('公司电话号码不能为空')
        return false
      } else if (this.openTicketInfo.invoicOpenBank == null || this.openTicketInfo.invoicOpenBank == '') {
        this.$message.error('开户银行不能为空')
        return false
      } else if (this.openTicketInfo.invoicBankNumber == null || this.openTicketInfo.invoicBankNumber == '') {
        this.$message.error('银行账号不能为空')
        return false
      } else if (this.openTicketInfo.orderSerialNumber == null || this.openTicketInfo.orderSerialNumber == '') {
        this.$message.error('订单编号不能为空')
        return false
      } else if (this.openTicketInfo.invoicEmail == null || this.openTicketInfo.invoicEmail == '') {
        this.$message.error('电子邮箱不能为空')
        return false
      } else if (this.openTicketInfo.invoicEmail != null && this.openTicketInfo.invoicEmail != '') {
        const emailRegex = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g
        if (!emailRegex.test(this.openTicketInfo.invoicEmail)) {
          this.$message.error('电子邮箱格式不准确')
          return false
        }
      }
      return true
    }
  }
}
</script>

<style scoped>
.container{
  width: 90%;
  margin: auto;

}
.order-info,.invoic-info{
  border: 2px solid #eee;
  border-radius: 5px;
  padding: 17px 25px;
  margin-bottom: 50px;
}
.header{
    margin-bottom: 25px;
}
.my-cell {
  color: #666;
  margin-bottom: 35px;
  display: flex;
  flex-direction: row;
  padding: 0 10px;
}

.cell-item {
  width: 50%;
}
.test-tst {
  padding-bottom: 0.3rem;
}

.el-input{
  width: 80%;
}
</style>