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

<template>
  <div class="container">
    <div>
      <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 v-if="showFlag" class="inner-data">{{ oilCustomerInvoicRecord.orderSerialNumber }}</span>
            <el-input v-else v-model="orderSerialNumber " @input="getOrderInfo" />
          </div>
          <div class="cell-item">
            <span class="color-999 test-tst">订单金额</span>
            <br><br>
            <span class="inner-data">{{ oilCustomerInvoicRecord.invoicAmount }}</span>
          </div>

          <div class="cell-item">
            <span class="color-999 test-tst">司机信息</span>
            <br><br>
            <span class="inner-data">{{ oilCustomerInvoicRecord.oilCustomerInfo.name }} - {{ oilCustomerInvoicRecord.oilCustomerInfo.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">{{ oilCustomerInvoicRecord.createTime }}</span>
          </div>
          <div class="cell-item">
            <span class="color-999 test-tst">油站信息</span>
            <br><br>
            <span class="inner-data">{{ oilCustomerInvoicRecord.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="oilCustomerInvoicRecord.invoicName" />
          </div>
          <div class="cell-item">
            <span class="color-999 test-tst">纳税识别号</span>
            <br><br>
            <el-input v-model="oilCustomerInvoicRecord.invoicTaxIdentiNumber" />
          </div>
          <div class="cell-item">
            <span class="color-999 test-tst">公司地址</span>
            <br><br>
            <el-input v-model=" oilCustomerInvoicRecord.invoicAddress " />
          </div>
        </div>

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

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

        <div class="my-cell">
          <div class="cell-item">
            <span class="color-999 test-tst">收票邮箱</span>
            <br><br>
            <el-input v-model=" oilCustomerInvoicRecord.invoicEmail " />
          </div>
          <div class="cell-item">
            <span class="color-999 test-tst">开票备注</span>
            <br><br>
            <el-input
              v-model="oilCustomerInvoicRecord.remark "
              type="textarea"
              style="width: 18vw;"
              :autosize="{ minRows: 4}"
              placeholder="请输入开票审核备注"
            />
          </div>
        </div>
      </section>
      <div style="float: right;">
        <el-button @click="$emit('close')">取消</el-button>
        <el-button type="primary" @click="add()">提交</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import orderInfoApi from '@/api/order/orderInfo'
import openTicketApi from '@/api/finance/openTicketApi'
export default {
  props: {
    openTicketInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      orderSerialNumber: null,
      oilCustomerInvoicRecord: {
        orderSerialNumber: '',
        oilCustomerInfo: {
          name: '',
          phone: ''
        },
        invoicAmount: '',
        createTime: '',
        siteName: '',
        realAmount: '',
        invoicAddress: '',
        invoicTel: '',
        invoicBankNumber: '',
        invoicOpenBank: '',
        invoicEmail: ''
      },
      showFlag: false
    }
  },
  created() {

  },
  methods: {
    getOrderInfo() {
      if (this.orderSerialNumber != null && this.orderSerialNumber != '') {
        this.$nextTick(_ => {
          orderInfoApi.getOrderBySerialOrId(this.orderSerialNumber).then(res => {
            this.oilCustomerInvoicRecord = res.data
            this.oilCustomerInvoicRecord.invoicAmount = this.oilCustomerInvoicRecord.realAmount
            console.log(this.oilCustomerInvoicRecord)
            this.showFlag = true
          })
        })
      }
    },
    add() {
      this.resolveParams()
      openTicketApi.save(this.oilCustomerInvoicRecord).then(res => {
        if (res.data != null && res.data.remark != null) {
          this.$message.error(res.data.remark)
        }
        this.$emit('flush')
        this.$emit('close')
      })
    },
    resolveParams() {
      if (this.oilCustomerInvoicRecord.invoicName == null || this.oilCustomerInvoicRecord.invoicName == '') {
        console.log(this.oilCustomerInvoicRecord.invoicName)
        this.$message.error('发票抬头不能为空')
        return
      } else if (this.oilCustomerInvoicRecord.invoicTaxIdentiNumber == null || this.oilCustomerInvoicRecord.invoicTaxIdentiNumber == '') {
        this.$message.error('税号不能为空')
        return
      } else if (this.oilCustomerInvoicRecord.invoicAddress == null || this.oilCustomerInvoicRecord.invoicAddress == '') {
        this.$message.error('公司地址不能为空')
        return
      } else if (this.oilCustomerInvoicRecord.invoicTel == null || this.oilCustomerInvoicRecord.invoicTel == '') {
        this.$message.error('公司电话号码不能为空')
        return
      } else if (this.oilCustomerInvoicRecord.invoicOpenBank == null || this.oilCustomerInvoicRecord.invoicOpenBank == '') {
        this.$message.error('开户银行不能为空')
        return
      } else if (this.oilCustomerInvoicRecord.invoicBankNumber == null || this.oilCustomerInvoicRecord.invoicBankNumber == '') {
        this.$message.error('银行账号不能为空')
        return
      } else if (this.oilCustomerInvoicRecord.orderSerialNumber == null || this.oilCustomerInvoicRecord.orderSerialNumber == '') {
        this.$message.error('订单编号不能为空')
        return
      } else if (this.oilCustomerInvoicRecord.invoicEmail == null || this.oilCustomerInvoicRecord.invoicEmail == '') {
        this.$message.error('电子邮箱不能为空')
        return
      } else if (this.oilCustomerInvoicRecord.invoicEmail != null && this.oilCustomerInvoicRecord.invoicEmail != '') {
        const emailRegex = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g
        if (!emailRegex.test(this.oilCustomerInvoicRecord.invoicEmail)) {
          this.$message.error('电子邮箱格式不准确')
          return
        }
      }
    }
  }
}
</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>