第一次发布
This commit is contained in:
caolc
244
src/views/finance/openTicket/openTicketRecordAdd.vue
Normal file
244
src/views/finance/openTicket/openTicketRecordAdd.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user