| <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 { | 
|                     flex: 1; | 
|                     height: 50px; | 
|                     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; | 
|                     } | 
|                 } | 
|             } | 
|         } | 
|     } | 
| </style> |