| <template> | 
|     <GlobalWindow | 
|         :title="title" | 
|         width="100%" | 
|         :visible.sync="visible" | 
|         :confirm-working="isWorking" | 
|         @confirm="confirm" | 
|     > | 
|         <div class="box"> | 
|             <div class="top" style="border-right: 1px solid #b4bbc5;"> | 
|                 {{title}} | 
|             </div> | 
|             <div class="box_table"> | 
|                 <div class="box_table_head"> | 
|                     <div class="box_table_head_item"  style="flex:2">投保企业</div> | 
|                     <div class="box_table_head_item"  style="flex:2">保险方案</div> | 
|                     <div class="box_table_head_item" style="flex:2">保险生效起期</div> | 
|                     <div class="box_table_head_item" style="flex:2">保险生效止期</div> | 
|                     <div class="box_table_head_item">投保人数</div> | 
|                     <div class="box_table_head_item">总费用(元)</div> | 
|                 </div> | 
|                 <div class="box_table_content "  > | 
|                     <div class="box_table_content_item box_table_content_header"   style="flex:2"><span>{{ model.companyName }}</span></div> | 
|                     <div class="box_table_content_item box_table_content_header" style="flex:2"><span>{{ model.solutionName }}</span></div> | 
|                     <div class="box_table_content_item box_table_content_header" style="flex:2">{{ model.applyStartTime }}</div> | 
|                     <div class="box_table_content_item box_table_content_header" style="flex:2">{{ model.applyEndTime }}</div> | 
|                     <div class="box_table_content_item box_table_content_header">{{ model.insureNum }}</div> | 
|                     <div class="box_table_content_item box_table_content_header"  >{{model.solutionType==0?model.totalPrice:model.totalPrice}}</div> | 
|                 </div> | 
|             </div> | 
|             <div class="box_table" v-if="model"> | 
|                 <div class="box_table_head"> | 
|                     <div class="box_table_head_item"    >序号</div> | 
|                     <div class="box_table_head_item"    >员工姓名</div> | 
|                     <div class="box_table_head_item" style="flex:2"  >身份证号</div> | 
|                     <div class="box_table_head_item"  >性别</div> | 
|                     <div class="box_table_head_item" style="flex:2"  >派遣单位</div> | 
|                     <div class="box_table_head_item" style="flex:2"  >所属工种</div> | 
|                     <div class="box_table_head_item">备注</div> | 
|                 </div> | 
|                 <div class="box_table_content" v-for="(item, index) in model.detailList" :key="index"> | 
|                     <div class="box_table_content_item" >{{index + 1}}</div> | 
|                     <div class="box_table_content_item">{{ item.memberName }}</div> | 
|                     <div class="box_table_content_item" style="flex:2"><span>{{ item.idCard }}</span></div> | 
|                     <div class="box_table_content_item" >{{ item.sex==0?'男':'女' }}</div> | 
|                     <div class="box_table_content_item" style="flex:2" ><span>{{ item.duName }}</span></div> | 
|                     <div class="box_table_content_item" style="flex:2"> <span>{{ item.workTypeName}}</span></div> | 
|                     <div class="box_table_content_item" style="align-items: baseline;cursor: pointer; " :title="item.remark"> | 
|                       <span> {{ item.remark}}</span> | 
|                     </div> | 
|                 </div> | 
|             </div> | 
|         </div> | 
|         <template v-slot:footer> | 
|             <el-button type="primary" @click="submit">确定</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: 'InsuranceDetails', | 
|   extends: BaseOpera, | 
|   components: { GlobalWindow }, | 
|   data () { | 
|     return { | 
|       model: {} | 
|     } | 
|   }, | 
|   methods: { | 
|     open (title, target) { | 
|       this.title = title | 
|       this.visible = true | 
|       this.model = target | 
|     }, | 
|     submit () { | 
|       this.$emit('success') | 
|       this.visible = false | 
|     }, | 
|     getGender (idCardNumber) { | 
|       // 使用正则表达式提取身份证号码的第17位数字 | 
|       const genderCode = idCardNumber.substr(-2) | 
|   | 
|       if (genderCode % 2 === 0) { | 
|         return '女' | 
|       } else { | 
|         return '男' | 
|       } | 
|     } | 
|   } | 
| } | 
| </script> | 
|   | 
| <style lang="scss" scoped> | 
|     .box { | 
|         width: 100%; | 
|         .top{ | 
|             width: 100%; | 
|             align-items: center; | 
|             flex-wrap: wrap; | 
|             border-top: 1px solid #b4bbc5; | 
|             border-left: 1px solid #b4bbc5; | 
|             font-size: 14px; | 
|             font-weight: bold; | 
|             text-align: center; | 
|             padding: 15px; | 
|             box-sizing: border-box; | 
|         } | 
|         .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-top: 1px solid #b4bbc5; | 
|             border-left: 1px solid #b4bbc5; | 
|             box-sizing: border-box; | 
|             .box_table_head { | 
|                 width: 100%; | 
|                 display: flex; | 
|                 align-items: center; | 
|                 .box_table_head_item { | 
|                   white-space: nowrap; | 
|                   overflow: hidden; | 
|                   text-overflow: ellipsis; | 
|                   flex: 1; | 
|                   height: 50px; | 
|                   padding: 10px; | 
|                   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; | 
|   | 
|                 } | 
|             } | 
|             .box_table_content { | 
|                 width: 100%; | 
|                 display: flex; | 
|                 align-items: center; | 
|                 .box_table_content_header{ | 
|                     border-bottom: 0px solid #b4bbc5 !important; | 
|                 } | 
|                 .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; | 
|   | 
|                 } | 
|                 span{ | 
|                   width: 100%; | 
|                   white-space: nowrap; | 
|                   word-wrap: break-word; | 
|                   text-overflow: ellipsis; | 
|                   overflow: hidden; | 
|                 } | 
|             } | 
|         } | 
|     } | 
| </style> |