<template> 
 | 
    <TableLayout> 
 | 
        <!-- 表格和分页 --> 
 | 
        <template v-slot:table-wrap> 
 | 
            <ul style="margin-bottom: 30px;width: 100%;display: flex;align-items: center;justify-content: space-between;"> 
 | 
                <li style="font-size: 18px;font-weight: bold;">申请开票</li> 
 | 
            </ul> 
 | 
            <el-table 
 | 
                v-loading="isWorking.search" 
 | 
                :data="tableData.list" 
 | 
                stripe 
 | 
            > 
 | 
                <el-table-column label="序号" width="80px"> 
 | 
                    <template slot-scope="scope"> 
 | 
                        <span>{{scope.$index + 1}}</span> 
 | 
                    </template> 
 | 
                </el-table-column> 
 | 
                <el-table-column prop="statusInfo" label="状态"> 
 | 
                  <template slot-scope="{row}"> 
 | 
                    <span :class="'apply-status'+row.status" >{{row.statusInfo}}</span> 
 | 
                  </template> 
 | 
                </el-table-column> 
 | 
                <el-table-column prop="solutionsName" label="保险方案"></el-table-column> 
 | 
                <el-table-column prop="code" label="保单号"></el-table-column> 
 | 
                <el-table-column label="总费用(元)"> 
 | 
                    <template slot-scope="{row}"> 
 | 
                        <span>{{row.fee}}</span> 
 | 
                    </template> 
 | 
                </el-table-column> 
 | 
                <el-table-column label="已开票费用(元)"> 
 | 
                    <template slot-scope="{row}"> 
 | 
                        <span>{{row.taxesMoney}}</span> 
 | 
                    </template> 
 | 
                </el-table-column> 
 | 
                <el-table-column prop="fee" label="未开票费用(元)"> 
 | 
                    <template slot-scope="{row}"> 
 | 
                        <span>{{row.fee - row.taxesMoney}}</span> 
 | 
                    </template> 
 | 
                </el-table-column> 
 | 
                <el-table-column prop="taxesLast" label="上次开票时间"></el-table-column> 
 | 
                <el-table-column prop="startTime" label="投保生效日期"></el-table-column> 
 | 
                <el-table-column prop="endTime" label="投保失效日期"></el-table-column> 
 | 
                <el-table-column label="操作" min-width="180px"> 
 | 
                    <template slot-scope="{row}"> 
 | 
                        <el-button type="text" @click="$refs.entrustmentHistory.open('开票历史', row)">开票历史</el-button> 
 | 
                        <el-button type="text" @click="$refs.directInvoicingApplication.open('开票申请', row)">申请开票</el-button> 
 | 
                    </template> 
 | 
                </el-table-column> 
 | 
            </el-table> 
 | 
            <pagination 
 | 
                @size-change="handleSizeChange" 
 | 
                @current-change="handlePageChange" 
 | 
                :pagination="tableData.pagination" 
 | 
            > 
 | 
            </pagination> 
 | 
        </template> 
 | 
        <!--   申请    --> 
 | 
        <directInvoicingApplication ref="directInvoicingApplication" @success="handlePageChange" /> 
 | 
        <!--    开票历史    --> 
 | 
        <entrustmentHistory ref="entrustmentHistory" @success="handlePageChange" /> 
 | 
    </TableLayout> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
    import BaseTable from '@/components/base/BaseTable' 
 | 
    import TableLayout from '@/layouts/TableLayout' 
 | 
    import Pagination from '@/components/common/Pagination' 
 | 
    import directInvoicingApplication from '@/components/enterprise/directInvoicingApplication' 
 | 
    import entrustmentHistory from '@/components/enterprise/entrustmentHistory' 
 | 
    export default { 
 | 
        name: 'directInvoicing', 
 | 
        extends: BaseTable, 
 | 
        components: { TableLayout, Pagination, directInvoicingApplication, entrustmentHistory }, 
 | 
        data () { 
 | 
            return { 
 | 
                searchForm: { 
 | 
                    type: 0, 
 | 
                    status: '5,7' 
 | 
                } 
 | 
            } 
 | 
        }, 
 | 
        created () { 
 | 
            this.config({ 
 | 
                module: '投保申请信息表', 
 | 
                api: '/business/insuranceApply', 
 | 
                'field.id': 'id', 
 | 
                'field.main': 'id' 
 | 
            }) 
 | 
            this.search() 
 | 
        }, 
 | 
        methods: { 
 | 
  
 | 
        } 
 | 
    } 
 | 
</script> 
 | 
  
 | 
<style lang="scss" scoped> 
 | 
    .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> 
 |