<template>
|
<GlobalWindow
|
:title="title"
|
width="100%"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<div class="info">
|
<div class="info_list">
|
<div class="info_list_item">
|
<div class="info_list_item_label">开票名称：</div>
|
<div class="info_list_item_val">{{userInfo.company.name}}</div>
|
</div>
|
<div class="info_list_item">
|
<div class="info_list_item_label">纳税人识别号：</div>
|
<div class="info_list_item_val">{{userInfo.company.code}}</div>
|
</div>
|
<div class="info_list_item">
|
<div class="info_list_item_label">开户行：</div>
|
<div class="info_list_item_val">{{userInfo.company.taxBank}}</div>
|
</div>
|
<div class="info_list_item">
|
<div class="info_list_item_label">账号：</div>
|
<div class="info_list_item_val">
|
{{userInfo.company.taxAccount}}
|
</div>
|
</div>
|
<div class="info_list_item" style="width: 100%;">
|
<div class="info_list_item_label">地址、电话：</div>
|
<div class="info_list_item_val">{{userInfo.company.invoiceAddr}} {{userInfo.company.phone}}</div>
|
</div>
|
<div class="info_list_item" style="width: 100%;">
|
<div class="info_list_item_label">开票金额：</div>
|
<div class="info_list_item_val" style="color:rgba(249, 86, 1, 0.996078431372549);">{{totalPrice}}</div>
|
</div>
|
<div class="list" style="width: 100%;">
|
<el-radio v-model="type" label="0">电子发票</el-radio>
|
<div class="list_val">
|
<div class="list_val_label">接收地址：</div>
|
<el-input v-model="val" :disabled="type === '1'" placeholder="111222333@qq.com"></el-input>
|
</div>
|
</div>
|
<div class="list" style="width: 100%;">
|
<el-radio v-model="type" label="1">纸质发票</el-radio>
|
<div class="list_val">
|
<div class="list_val_label">接收地址：</div>
|
<el-input v-model="val1" :disabled="type === '0'" placeholder="安徽省合肥市经济技术开发区莲花路以东、石门路以南莲花路1＃ 0551-63450845"></el-input>
|
</div>
|
</div>
|
</div>
|
<!-- 加减保 -->
|
<el-table
|
:data="list1"
|
border
|
show-summary
|
:summary-method="getSummaries1"
|
style="width: 100%; margin-bottom: 20px;">
|
<el-table-column
|
label="序号"
|
align="center"
|
width="80">
|
<template slot-scope="scope">
|
<span>{{scope.$index + 1}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="solutionsName"
|
label="保险方案">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="insuranceCode"
|
label="保单号">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="金额">
|
<template slot-scope="{row}">
|
<span style="color:rgba(249, 86, 1, 0.996078431372549);">{{row.amount}}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- 冲红单 -->
|
<el-table
|
:data="list2"
|
border
|
show-summary
|
:summary-method="getSummaries2"
|
@selection-change="handleSelectionChange"
|
style="width: 100%; margin-bottom: 20px;">
|
<el-table-column type="selection" fixed="left" width="55"></el-table-column>
|
<el-table-column
|
label="冲红单"
|
align="center"
|
width="80">
|
<template slot-scope="scope">
|
<span>{{scope.$index + 1}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="solutionsName"
|
label="保险方案">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="downCode"
|
label="发票号">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="createTime"
|
label="申请开票时间">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="金额">
|
<template slot-scope="{row}">
|
<span style="color:rgba(249, 86, 1, 0.996078431372549);">{{row.amount}}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { getDirectTaxes, directInvoicing } from '@/api/business/taxes'
|
import { mapState } from 'vuex'
|
export default {
|
name: 'directInvoicingApplication',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data () {
|
return {
|
list1: [],
|
list2: [],
|
form: {
|
id: null
|
},
|
setectData: [],
|
type: '0',
|
val: '',
|
val1: '',
|
rules: {
|
backInfo: [
|
{ required: true, message: '请输入退回说明' }
|
]
|
}
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/taxes',
|
'field.id': 'id'
|
})
|
},
|
computed: {
|
...mapState(['userInfo']),
|
totalPrice() {
|
let price = 0
|
this.list1.forEach(item => {
|
price += item.amount
|
})
|
this.setectData.forEach(item => {
|
this.list2.forEach(row => {
|
if (item.id === row.id) {
|
price += row.amount
|
}
|
})
|
})
|
return price
|
}
|
},
|
watch: {
|
type: {
|
handler(news) {
|
this.val = ''
|
this.val1 = ''
|
}
|
}
|
},
|
methods: {
|
open (title, target) {
|
this.title = title
|
this.visible = true
|
this.type = '0'
|
this.val = ''
|
this.val1 = ''
|
this.list1 = []
|
this.list2 = []
|
this.$nextTick(() => {
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
this.getData()
|
})
|
},
|
confirm () {
|
if (!this.val && !this.val1) {
|
this.$message.warning('请输入接收地址')
|
return
|
}
|
if (this.setectData.length === 0) {
|
this.$message.warning('至少勾选一项冲红单数据')
|
return
|
}
|
this.isWorking = true
|
directInvoicing({
|
address: this.val1 || this.val,
|
id: this.form.id,
|
invoicingDetailDTOList: this.setectData.map(item => item.id),
|
invoicingMoney: this.totalPrice,
|
type: this.type
|
}).then(res => {
|
this.visible = false
|
this.$tip.apiSuccess('操作成功')
|
this.$emit('success')
|
}).catch(e => {
|
this.$tip.apiFailed(e)
|
}).finally(() => {
|
this.isWorking = false
|
})
|
},
|
handleSelectionChange(e) {
|
this.setectData = e
|
},
|
getData() {
|
getDirectTaxes(this.form.id)
|
.then(res => {
|
res.forEach(item => {
|
if (item.type === 2) {
|
this.list2.push(item)
|
} else {
|
this.list1.push(item)
|
}
|
})
|
})
|
},
|
getSummaries1 (param) {
|
const { columns, data } = param
|
const sums = []
|
columns.forEach((column, index) => {
|
if (index === 0) {
|
sums[index] = '合计'
|
} else if (index == 4) {
|
let price = 0
|
data.forEach(item => {
|
price += item.amount
|
})
|
sums[index] = price
|
}
|
})
|
return sums;
|
},
|
getSummaries2 (param) {
|
const { columns, data } = param
|
const sums = []
|
columns.forEach((column, index) => {
|
if (index === 0) {
|
sums[index] = '合计'
|
} else if (index == 5) {
|
let price = 0
|
data.forEach(item => {
|
price += item.amount
|
})
|
sums[index] = price
|
}
|
})
|
return sums;
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep .el-table__footer-wrapper tbody td {
|
cursor: pointer;
|
text-align: center;
|
&:nth-child(5) {
|
color:rgba(249, 86, 1, 0.996078431372549);
|
}
|
}
|
.red {
|
color: red;
|
}
|
.info {
|
width: 100%;
|
.info_label {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
span {
|
font-size: 14px;
|
font-weight: 500;
|
color: #000000;
|
}
|
}
|
.info_list {
|
width: 100%;
|
display: flex;
|
align-items: left;
|
flex-wrap: wrap;
|
.list::v-deep {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 15px;
|
.el-radio__label {
|
color: black;
|
font-size: 14px;
|
}
|
.list_val {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
.list_val_label {
|
font-size: 14px;
|
color: black;
|
flex-shrink: 0;
|
margin-right: 15px;
|
}
|
}
|
}
|
.info_list_item {
|
width: 50%;
|
display: flex;
|
align-items: start;
|
font-size: 14px;
|
margin-bottom: 20px;
|
.info_list_item_label {
|
width: 150px;
|
flex-shrink: 0;
|
}
|
.info_list_item_val {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
.image {
|
width: 100px;
|
height: 100px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
img {
|
width: 100%;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.form {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.form_item {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20px;
|
&:last-child {
|
margin-bottom: 0 !important;
|
}
|
.form_item_label {
|
width: 100px;
|
flex-shrink: 0;
|
font-size: 14px;
|
color: black;
|
}
|
.form_item_val {
|
flex: 1;
|
min-height: 35px;
|
display: flex;
|
align-items: center;
|
input {
|
width: 100%;
|
height: 100%;
|
font-size: 14px;
|
color: black;
|
padding: 5px 10px;
|
outline: none;
|
box-sizing: border-box;
|
border: 1px solid #ececec;
|
}
|
}
|
}
|
}
|
</style>
|
