<template>
|
<div class="manuallnvoiceStyle">
|
<!-- {{form}} -->
|
<el-form ref="form" size="mini" :rules="formRules" :model="form" label-width="120px">
|
<p class="formTitle">订单信息</p>
|
<el-form-item label="原始订单编号：" prop="sourceOrderCode">
|
<el-col :span="6">
|
<el-input v-model="form.sourceOrderCode" :disabled="true"></el-input>
|
</el-col>
|
</el-form-item>
|
<el-form-item label="订单号：" prop="orderId">
|
<el-col :span="6">
|
<el-input v-model="form.orderId" @blur="pcc" clearable></el-input>
|
</el-col>
|
</el-form-item>
|
<el-form-item label="买家名称：" prop="creatorName">
|
<el-col :span="6">
|
<el-input v-model="form.creatorName" :disabled="true"></el-input>
|
</el-col>
|
</el-form-item>
|
<el-form-item label="订单状态：" prop="orderStatus">
|
<el-col :span="6">
|
<el-input v-model="form.orderStatus" :disabled="true"></el-input>
|
</el-col>
|
</el-form-item>
|
<el-form-item label="买家电话：" prop="memberPhone">
|
<el-col :span="6">
|
<el-input v-model="form.memberPhone" :disabled="true"></el-input>
|
</el-col>
|
</el-form-item>
|
<p class="formTitle">发票信息</p>
|
<el-form-item label="开票金额：" class="emphasize" prop="invoiceAmount">
|
<span class="emphasize">{{form.invoiceAmount ? '￥' + form.invoiceAmount : ' '}}</span>
|
</el-form-item>
|
<el-form-item label="发票类型：" prop="invoiceTypeDetail">
|
<el-col :span="6">
|
<el-radio v-model="form.invoiceTypeDetail" label="0">增值税电子普通发票</el-radio>
|
</el-col>
|
</el-form-item>
|
<el-form-item label="抬头类型：" prop="invoiceType">
|
<el-col :span="6">
|
<el-radio-group v-model="form.invoiceType">
|
<el-radio label="0">个人</el-radio>
|
<el-radio label="1">企业</el-radio>
|
</el-radio-group>
|
</el-col>
|
</el-form-item>
|
<el-form-item label="发票抬头：" prop="invoiceTitle">
|
<el-col :span="6">
|
<el-input v-model="form.invoiceTitle" clearable></el-input>
|
</el-col>
|
</el-form-item>
|
<el-form-item label="单位税号：" prop="itins" v-if="form.invoiceType !== '0'">
|
<el-col :span="6">
|
<el-input v-model="form.itins" clearable></el-input>
|
</el-col>
|
</el-form-item>
|
<el-form-item label="注册地址：" prop="companyAddress">
|
<el-col :span="6">
|
<el-input v-model="form.companyAddress" clearable></el-input>
|
</el-col>
|
</el-form-item>
|
<el-form-item label="注册电话：" prop="telephone">
|
<el-col :span="6">
|
<el-input v-model="form.telephone" clearable></el-input>
|
</el-col>
|
</el-form-item>
|
<el-form-item label="开户银行：" prop="bank">
|
<el-col :span="6">
|
<el-input v-model="form.bank" clearable></el-input>
|
</el-col>
|
</el-form-item>
|
<el-form-item label="银行账号：" prop="accno">
|
<el-col :span="6">
|
<el-input v-model="form.accno" clearable></el-input>
|
</el-col>
|
</el-form-item>
|
<el-form-item label="发票接收邮箱：" prop="email">
|
<el-col :span="6">
|
<el-input v-model="form.email" clearable></el-input>
|
</el-col>
|
</el-form-item>
|
<div v-if="form.orderInfo">
|
<p class="formTitle">商品信息</p>
|
<div id="productdetails">
|
<el-table :data="form.orderInfo.omsOrderItems" border>
|
<el-table-column type="index" align="center" label="序号" width="80px"></el-table-column>
|
<el-table-column label="商品图片" align="center">
|
<template slot-scope="scope">
|
<product-img :imgUrl="scope.row.imgUrl"></product-img>
|
</template>
|
</el-table-column>
|
<el-table-column label="商品名称" prop="spuName">
|
<template slot-scope="scope">
|
<span class="giftStyle"
|
v-if="scope.row.promotionType === '2'">赠</span><span>{{scope.row.spuName}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="商品规格">
|
<template slot-scope="scope">
|
{{scope.row.skuProps && JSON.parse(scope.row.skuProps).length ? JSON.parse(scope.row.skuProps).map(item=>item.propValueName).join('/') : '-'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="数量">
|
<template slot-scope="scope">
|
{{scope.row.buyQuantity}} * {{scope.row.expInfo ? JSON.parse(scope.row.expInfo).skuReduceStorage : scope.row.skuReduceStorage}}
|
({{scope.row.spuUnit ? scope.row.spuUnit : '瓶'}})
|
</template>
|
</el-table-column>
|
<el-table-column label="销售金额（元）">
|
<template slot-scope="scope">
|
<span v-if="scope.row.promotionType !== '2'">
|
￥ {{scope.row.totelAmt ? scope.row.totelAmt.toFixed(2) : 0}}
|
</span>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="实收金额（元）">
|
<template slot-scope="scope">
|
<span v-if="scope.row.promotionType !== '2'">
|
￥ {{scope.row.totelAmtAct ? scope.row.totelAmtAct.toFixed(2) : 0}}
|
</span>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="优惠金额">
|
<template slot-scope="scope">
|
<div v-if="scope.row.promotionType !== '2'">
|
<div>优惠券：￥ {{scope.row.consumeCoupon ? scope.row.consumeCoupon.toFixed(2) : 0}}
|
</div>
|
<div>活动优惠金额：￥
|
{{scope.row.consumePromotion ? scope.row.consumePromotion.toFixed(2) : 0}}</div>
|
</div>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="运费（元）">
|
<template slot-scope="scope">
|
<span v-if="scope.row.promotionType !== '2'">
|
￥ {{scope.row.freight ? scope.row.freight.toFixed(2) : 0}}
|
</span>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="couponInfo">
|
<div class="couponInfoItem">
|
<el-form-item label="商品金额：">￥
|
{{form.orderInfo && form.orderInfo.orderPrice ? form.orderInfo.orderPrice.toFixed(2) : 0}}
|
</el-form-item>
|
<el-form-item label="优惠券：">￥
|
{{form.orderInfo && form.orderInfo.consumeCoupon ? form.orderInfo.consumeCoupon.toFixed(2) : 0}}
|
</el-form-item>
|
<el-form-item label="活动优惠金额：">￥
|
{{form.orderInfo && form.orderInfo.consumePromotion ? form.orderInfo.consumePromotion.toFixed(2) : 0}}
|
</el-form-item>
|
<el-form-item label="运费：">￥
|
{{form.orderInfo && form.orderInfo.freight ? form.orderInfo.freight.toFixed(2) : 0}}
|
</el-form-item>
|
<el-form-item label="其他优惠：">￥
|
{{form.orderInfo && form.orderInfo.otherDiscount ? form.orderInfo.otherDiscount.toFixed(2) : 0}}
|
</el-form-item>
|
<el-form-item label="订单总价：">￥
|
{{form.orderInfo && form.orderInfo.orderTotalPayPrice ? form.orderInfo.orderTotalPayPrice.toFixed(2):0}}
|
</el-form-item>
|
<hr />
|
<el-form-item label="实付金额："><span class="emphasize">￥
|
{{form.orderInfo && form.orderInfo.orderPayPrice ? form.orderInfo.orderPayPrice.toFixed(2) : 0}}</span>
|
</el-form-item>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 备注 -->
|
<el-form-item prop="creatorRemark" label="备注：">
|
<el-input type="textarea" v-model="form.creatorRemark" placeholder="请输入备注"></el-input>
|
</el-form-item>
|
<el-form-item label="图片：">
|
<custom-upload-img :limitNumber="6" @handle-success="handleSuccess"
|
@handle-remove="handleRemove" :fileList="fileList"></custom-upload-img>
|
</el-form-item>
|
</el-form>
|
<el-row class="buttonPosition">
|
<el-button size="mini" @click="submit" type="primary" :loading="loading"
|
:disabled="isDisable">确认提交</el-button>
|
<el-button size="mini" @click="cancel">取消</el-button>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import invoiceApi from '@/api/invoice/invoiceapi.js'
|
import uploadFileApi from '@/api/uploadFile'
|
import productImg from '@/views/product/components/productImg.vue'
|
import { limitNumType } from '@/utils/validator'
|
export default {
|
components: { productImg },
|
data() {
|
const validateBankNo = (rule, value, callback) => {
|
const reg = /^([1-9]{1})(\d{15}|\d{14}|\d{18}|\d{16})$/
|
if (value) {
|
if (!reg.test(value)) {
|
callback(new Error('请输入正确的银行账号'))
|
} else {
|
callback()
|
}
|
} else {
|
callback()
|
}
|
}
|
const validateEmail = (rule, value, callback) => {
|
const reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
|
if (value) {
|
if (!reg.test(value)) {
|
callback(new Error('请输入正确的邮箱地址'))
|
} else {
|
callback()
|
}
|
} else {
|
callback()
|
}
|
}
|
const validateMobile = (rule, value, callback) => {
|
const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$|^0\d{2,3}-?\d{7,8}$/
|
if (value) {
|
if (!reg.test(value)) {
|
callback(new Error('请输入正确的手机或座机号码'))
|
} else {
|
callback()
|
}
|
} else {
|
callback()
|
}
|
}
|
return {
|
loading: false,
|
form: {
|
sourceOrderCode: null, // 原始订单编号
|
orderId: null, // 订单编号
|
creatorName: null, // 买家名称
|
orderStatus: null, // 订单状态
|
memberPhone: null, // 电话
|
invoiceAmount: null, // 开票金额
|
invoiceType: null, // 开票类型
|
itins: null, // 单位税号
|
companyAddress: null, // 注册地址
|
telephone: null, // 电话
|
bank: null, // 银行
|
accno: null, // 银行账号
|
email: null,
|
invoiceTitle: null,
|
creatorRemark: null,
|
orderMemberMemo: null, // 备注
|
creatorFileId: null,
|
invoiceTypeDetail: '0' // 增值税
|
},
|
isDisable: false,
|
// invoiceTypeDetail: '123',
|
fileList: [],
|
creatorFileId: null,
|
formRules: {
|
orderId: [
|
{ required: true, message: '请输入订单编号' },
|
{ validator: limitNumType }
|
],
|
invoiceTitle: [
|
{ required: true, message: '请输入发票抬头' }
|
],
|
itins: [
|
{ required: true, message: '请输入单位税号' },
|
{ validator: limitNumType }
|
],
|
email: [
|
{ required: true, message: '请输入邮箱' },
|
{ validator: validateEmail }
|
],
|
creatorRemark: [
|
{ required: true, message: '请输入备注' }
|
],
|
invoiceTypeDetail: [
|
{ required: true, message: '请选择发票类型', trigger: 'change' }
|
],
|
invoiceType: [
|
{ required: true, message: '请选择抬头类型', trigger: 'change' }
|
],
|
accno: [
|
{ validator: validateBankNo, trigger: 'change' }
|
],
|
telephone: [
|
{ validator: validateMobile, trigger: 'change' }
|
]
|
}
|
}
|
},
|
methods: {
|
setState(state) {
|
if (state === '05') {
|
return '已完成'
|
} else if (state === '06') {
|
return '已评价'
|
} else {
|
return ''
|
}
|
},
|
async pcc() {
|
if (this.form.orderId === this.form.sourceOrderCode) {
|
return
|
}
|
if (!this.form.orderId) return
|
try {
|
const res = await invoiceApi.manualInvoicing(this.form.orderId)
|
if (res.code === '0' && res.data === null) {
|
this.$message({
|
message: '没有该订单号，不能手动开票',
|
type: 'warning'
|
})
|
this.form.orderId = ''
|
}
|
if (res.code === '0' && res.data) {
|
if (res.data.orderInfo.orderStatus === '06' || res.data.orderInfo.orderStatus === '05' || res.data.orderInfo.orderStatus === '07') {
|
res.data.content = null
|
this.form = res.data
|
this.form.orderStatus = this.setState(res.data.orderInfo.orderStatus)
|
this.form.creatorName = res.data.orderInfo.creatorName
|
this.form.memberPhone = res.data.orderInfo.memberInfoResult.memberPhone
|
this.form.sourceOrderCode = JSON.parse(res.data.orderInfo.expInfo).sourceOrderCode ? JSON.parse(res.data.orderInfo.expInfo).sourceOrderCode : res.data.orderId
|
this.form.orderId = res.data.orderId
|
this.form.invoiceTypeDetail = '0'
|
} else if (res.data.orderInfo.orderType === 'T04') {
|
this.$message({
|
message: '该订单为系统下单，不能手动开票',
|
type: 'warning'
|
})
|
this.form.orderId = ''
|
} else {
|
this.$message({
|
message: '该订单未确认收货，不能手动开票',
|
type: 'warning'
|
})
|
this.form.orderId = ''
|
}
|
} else {
|
// this.form.orderInfo.omsOrderItems = []
|
this.form.sourceOrderCode = null
|
this.form.creatorName = null
|
this.form.memberPhone = null
|
this.form.orderStatus = null
|
}
|
} catch (error) {
|
}
|
},
|
/**
|
* 获取上传成功的图片
|
*/
|
handleSuccess(data) {
|
this.creatorFileId = data.businessId
|
this.fileList.push({
|
url: data.url,
|
id: data.id
|
})
|
},
|
/**
|
* 移除图片
|
*/
|
handleRemove(file) {
|
uploadFileApi.removeFile({ key: file.id }).then(res => {
|
this.fileList = this.fileList.filter(v => {
|
return v.id !== file.id
|
})
|
if (!this.fileList.length) {
|
this.creatorFileId = null
|
}
|
})
|
},
|
cancel() {
|
this.$router.push({ name: 'invoiceList' })
|
},
|
submit() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
this.loading = false
|
this.isDisable = true
|
const params = {
|
orderId: this.form.orderId,
|
creatorFileId: this.creatorFileId,
|
accno: this.form.accno,
|
bank: this.form.bank,
|
companyAddress: this.form.companyAddress,
|
companyName: this.form.companyName,
|
creatorRemark: this.form.creatorRemark,
|
email: this.form.email,
|
invoiceAmount: this.form.invoiceAmount,
|
invoiceContent: this.form.invoiceContent,
|
invoiceTitle: this.form.invoiceTitle,
|
invoiceType: this.form.invoiceType,
|
invoiceTypeDetail: this.form.invoiceTypeDetail,
|
itins: this.form.itins,
|
telephone: this.form.telephone
|
}
|
this.invoiceReturn(params)
|
// this.invoicePass(params)
|
}
|
}).catch(() => { })
|
},
|
invoiceReturn(params) {
|
this.$confirm('是否确认提交？', '提交', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.invoicePass(params)
|
}).catch(() => {
|
this.loading = false
|
this.isDisable = false
|
})
|
},
|
invoicePass(params) {
|
invoiceApi.postmanualInvoicing(params).then(res => {
|
this.isDisable = false
|
this.loading = false
|
if (res.data) {
|
this.$message({
|
message: '提交成功',
|
type: 'success'
|
})
|
this.loading = false
|
this.$router.push({ name: 'invoiceList' })
|
}
|
}).catch(() => {
|
this.loading = false
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.manuallnvoiceStyle {
|
background-color: #fff;
|
padding: 20px;
|
}
|
$color: #ebeef5;
|
.emphasize {
|
font-weight: bold;
|
color: #d70012;
|
}
|
.formTitle {
|
border-bottom: 1px solid #ccc;
|
padding-bottom: 10px;
|
margin-bottom: 20px;
|
}
|
.couponInfo {
|
border: solid $color;
|
border-width: 0 1px 1px 1px;
|
padding-top: 20px;
|
display: -webkit-flex; /* Safari */
|
display: flex;
|
flex-direction: row-reverse;
|
margin-bottom: 15px;
|
.couponInfoItem {
|
right: 0;
|
width: 300px;
|
}
|
hr {
|
border: none;
|
height: 1px;
|
background-color: $color;
|
}
|
}
|
</style>
|
