<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.taxAddr}}</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 ?totalPrice.toFixed(2):0}}</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="请输入"></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="请输入"></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" 
 | 
                    label="保单号"> 
 | 
                    <template slot-scope="{row}"> 
 | 
                        <span>{{row.insuranceCode ? row.insuranceCode : '-'}}</span> 
 | 
                    </template> 
 | 
                </el-table-column> 
 | 
                <el-table-column 
 | 
                    align="center" 
 | 
                    label="批单号"> 
 | 
                    <template slot-scope="{row}"> 
 | 
                        <span>{{row.validCode ? row.validCode : '-'}}</span> 
 | 
                    </template> 
 | 
                </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 
 | 
            } 
 | 
        }, 
 | 
        methods: { 
 | 
            open (title, target) { 
 | 
                this.title = title 
 | 
                this.visible = true 
 | 
                this.type = '0' 
 | 
                this.val = '' 
 | 
                this.val1 = '' 
 | 
                this.list1 = [] 
 | 
                this.list2 = [] 
 | 
                this.val = this.userInfo.company.invoiceEmail 
 | 
                this.val1 = this.userInfo.company.invoiceAddr 
 | 
                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.list2.length > 0 && this.setectData.length === 0) { 
 | 
                //     this.$message.warning('至少勾选一项冲红单数据') 
 | 
                //     return 
 | 
                // } 
 | 
                let price = 0 
 | 
                this.list1.forEach(item => { 
 | 
                    price += item.amount 
 | 
                }) 
 | 
                if (price < 0 && this.setectData.length === 0) { 
 | 
                    this.$message.warning('至少勾选一项冲红单数据') 
 | 
                    return 
 | 
                } 
 | 
                this.isWorking = true 
 | 
                directInvoicing({ 
 | 
                    address: this.type == 1 ? 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.toFixed(2) 
 | 
                    } 
 | 
                }) 
 | 
                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.toFixed(2) 
 | 
                    } 
 | 
                }) 
 | 
                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> 
 |