<template> 
 | 
    <GlobalWindow 
 | 
        :title="title" 
 | 
        width="70%" 
 | 
        :visible.sync="visible" 
 | 
        :confirm-working="isWorking" 
 | 
        @confirm="confirm" 
 | 
    > 
 | 
        <div class="box"> 
 | 
            <el-table 
 | 
                :data="tableData" 
 | 
                border 
 | 
                style="width: 100%; margin-bottom: 15px;"> 
 | 
                <el-table-column 
 | 
                    prop="date" 
 | 
                    label="批单号"> 
 | 
                </el-table-column> 
 | 
                <el-table-column 
 | 
                    prop="name" 
 | 
                    label="关联保单号"> 
 | 
                </el-table-column> 
 | 
                <el-table-column 
 | 
                    prop="address" 
 | 
                    label="保险方案"> 
 | 
                </el-table-column> 
 | 
                <el-table-column 
 | 
                    prop="address" 
 | 
                    label="保险生效起期"> 
 | 
                </el-table-column> 
 | 
                <el-table-column 
 | 
                    prop="address" 
 | 
                    label="保险生效止期"> 
 | 
                </el-table-column> 
 | 
                <el-table-column 
 | 
                    prop="address" 
 | 
                    label="批单生效期"> 
 | 
                </el-table-column> 
 | 
            </el-table> 
 | 
            <el-table 
 | 
                :data="tableData" 
 | 
                border 
 | 
                style="width: 100%; margin-bottom: 15px;"> 
 | 
                <el-table-column 
 | 
                    prop="date" 
 | 
                    label="序号"> 
 | 
                </el-table-column> 
 | 
                <el-table-column 
 | 
                    prop="name" 
 | 
                    label="员工姓名"> 
 | 
                </el-table-column> 
 | 
                <el-table-column 
 | 
                    prop="address" 
 | 
                    label="身份证号"> 
 | 
                </el-table-column> 
 | 
                <el-table-column 
 | 
                    prop="address" 
 | 
                    label="原派遣单位"> 
 | 
                </el-table-column> 
 | 
                <el-table-column 
 | 
                    prop="address" 
 | 
                    label="原所属工种"> 
 | 
                </el-table-column> 
 | 
                <el-table-column 
 | 
                    prop="address" 
 | 
                    label="保险生效起期"> 
 | 
                </el-table-column> 
 | 
                <el-table-column 
 | 
                    prop="address" 
 | 
                    label="更换后派遣单位"> 
 | 
                </el-table-column> 
 | 
                <el-table-column 
 | 
                    prop="address" 
 | 
                    label="更换后所属工种"> 
 | 
                </el-table-column> 
 | 
                <el-table-column 
 | 
                    prop="address" 
 | 
                    label="保险生效止期"> 
 | 
                </el-table-column> 
 | 
            </el-table> 
 | 
            <el-pagination 
 | 
                @size-change="handleSizeChange" 
 | 
                @current-change="handleCurrentChange" 
 | 
                :current-page="currentPage" 
 | 
                :page-sizes="[100, 200, 300, 400]" 
 | 
                :page-size="100" 
 | 
                layout="total, sizes, prev, pager, next, jumper" 
 | 
                :total="400"> 
 | 
            </el-pagination> 
 | 
        </div> 
 | 
        <template v-slot:footer> 
 | 
            <el-button type="primary">企业证件</el-button> 
 | 
            <el-button type="primary">导出详单</el-button> 
 | 
            <el-button @click="visible = false">取消</el-button> 
 | 
        </template> 
 | 
    </GlobalWindow> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
    import BaseOpera from '@/components/base/BaseOpera' 
 | 
    import GlobalWindow from '@/components/common/GlobalWindow' 
 | 
    export default { 
 | 
        name: 'switchCourtDetaols', 
 | 
        extends: BaseOpera, 
 | 
        components: { GlobalWindow }, 
 | 
        data () { 
 | 
            return { 
 | 
                // 表单数据 
 | 
                form: { 
 | 
                    id: null, 
 | 
                    editDate: '' 
 | 
                }, 
 | 
                tableData: [], 
 | 
                currentPage: 1 
 | 
            } 
 | 
        }, 
 | 
        created () { 
 | 
            this.config({ 
 | 
                api: '/business/insuranceApply', 
 | 
                'field.id': 'id' 
 | 
            }) 
 | 
        }, 
 | 
        methods: { 
 | 
            handleSizeChange(val) { 
 | 
                console.log(`每页 ${val} 条`); 
 | 
            }, 
 | 
            handleCurrentChange(val) { 
 | 
                console.log(`当前页: ${val}`); 
 | 
            }, 
 | 
            onSubmit() { 
 | 
  
 | 
            } 
 | 
        } 
 | 
    } 
 | 
</script> 
 | 
  
 | 
<style lang="scss" scoped> 
 | 
    .box { 
 | 
        width: 100%; 
 | 
        .box_header { 
 | 
            width: 100%; 
 | 
            display: flex; 
 | 
            align-items: center; 
 | 
            flex-wrap: wrap; 
 | 
            border-top: 1px solid #b4bbc5; 
 | 
            border-left: 1px solid #b4bbc5; 
 | 
            .box_header_item { 
 | 
                width: 50%; 
 | 
                height: 50px; 
 | 
                display: flex; 
 | 
                align-items: center; 
 | 
                border-right: 1px solid #b4bbc5; 
 | 
                border-bottom: 1px solid #b4bbc5; 
 | 
                box-sizing: border-box; 
 | 
                .box_header_item_label { 
 | 
                    flex: 1; 
 | 
                    height: 100%; 
 | 
                    display: flex; 
 | 
                    align-items: center; 
 | 
                    justify-content: center; 
 | 
                    font-size: 14px; 
 | 
                    color: black; 
 | 
                    background: #f2f2f2; 
 | 
                    border-right: 1px solid #b4bbc5; 
 | 
                } 
 | 
                .box_header_item_val { 
 | 
                    flex: 1; 
 | 
                    height: 100%; 
 | 
                    display: flex; 
 | 
                    align-items: center; 
 | 
                    justify-content: center; 
 | 
                    font-size: 14px; 
 | 
                    color: black; 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
        .box_table { 
 | 
            width: 100%; 
 | 
            border-left: 1px solid #b4bbc5; 
 | 
            box-sizing: border-box; 
 | 
            .box_table_headText { 
 | 
                width: 100%; 
 | 
                height: 50px; 
 | 
                display: flex; 
 | 
                align-items: center; 
 | 
                justify-content: center; 
 | 
                background: #f2f2f2; 
 | 
                font-size: 14px; 
 | 
                color: black; 
 | 
                border-right: 1px solid #b4bbc5; 
 | 
                border-bottom: 1px solid #b4bbc5; 
 | 
            } 
 | 
            .box_table_head { 
 | 
                width: 100%; 
 | 
                display: flex; 
 | 
                align-items: center; 
 | 
                .box_table_head_item { 
 | 
                    flex: 1; 
 | 
                    height: 50px; 
 | 
                    background: #f2f2f2; 
 | 
                    display: flex; 
 | 
                    align-items: center; 
 | 
                    justify-content: center; 
 | 
                    font-size: 14px; 
 | 
                    color: black; 
 | 
                    border-right: 1px solid #b4bbc5; 
 | 
                    border-bottom: 1px solid #b4bbc5; 
 | 
                    box-sizing: border-box; 
 | 
                    &:nth-child(1) { 
 | 
                        flex: 0.5; 
 | 
                    } 
 | 
                } 
 | 
            } 
 | 
            .box_table_content { 
 | 
                width: 100%; 
 | 
                display: flex; 
 | 
                align-items: center; 
 | 
                .box_table_content_item { 
 | 
                  //white-space: nowrap; 
 | 
                  overflow: hidden; 
 | 
                  //text-overflow: ellipsis; 
 | 
                    flex: 1; 
 | 
                    height: 50px; 
 | 
                  padding: 10px; 
 | 
                    background: #ffffff; 
 | 
                    display: flex; 
 | 
                    align-items: center; 
 | 
                    justify-content: center; 
 | 
                    font-size: 14px; 
 | 
                    color: black; 
 | 
                    border-right: 1px solid #b4bbc5; 
 | 
                    border-bottom: 1px solid #b4bbc5; 
 | 
                    box-sizing: border-box; 
 | 
                    &:nth-child(1) { 
 | 
                        flex: 0.5; 
 | 
                    } 
 | 
                  span{ 
 | 
                    width: 100%; 
 | 
                    white-space: nowrap; 
 | 
                    word-wrap: break-word; 
 | 
                    text-overflow: ellipsis; 
 | 
                    overflow: hidden; 
 | 
                  } 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
</style> 
 |