| <template> | 
|     <GlobalWindow | 
|         :title="title" | 
|         width="100%" | 
|         :visible.sync="visible" | 
|         :confirm-working="isWorking" | 
|         @confirm="confirm" | 
|     > | 
|         <div class="box"> | 
|           <div class="top"> | 
|             {{title}} | 
|           </div> | 
|           <div class="box_table"> | 
|             <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">保险生效起期</div> | 
|               <div class="box_table_head_item">保险生效止期</div> | 
|               <div class="box_table_head_item">保单号</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">{{ model.shopName }}</div> | 
|               <div class="box_table_content_item box_table_content_header">{{ model.solutionsName }}</div> | 
|               <div class="box_table_content_item box_table_content_header">{{ model.startTime }}</div> | 
|               <div class="box_table_content_item box_table_content_header">{{ model.endTime }}</div> | 
|               <div class="box_table_content_item box_table_content_header">{{ model.applyCode }}</div> | 
|               <div class="box_table_content_item box_table_content_header">{{ model.changeNum}}</div> | 
|               <div class="box_table_content_item box_table_content_header">{{ model.applyStartTime}}</div> | 
|             </div> | 
|           </div> | 
|           <div class="box_table"> | 
|             <div class="box_table_head box_table_content"> | 
|               <div class="box_table_head_item" style=" flex: 1;border-bottom: 0px">被保险人</div> | 
|               <div class="box_table_content_item box_table_content_header" style=" flex: 6;"> | 
|                 <p v-for="(item, index) in companyList" :key="index" > | 
|                   {{index>0?',':''}} {{ item[1]}} | 
|                 </p> | 
|                </div> | 
|               </div> | 
|           </div> | 
|             <div class="box_table" v-if="addList && addList.length>0"> | 
|                 <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">性别</div> | 
|                   <div class="box_table_head_item">身份证号</div> | 
|                   <div class="box_table_head_item">被保险人</div> | 
|                     <div class="box_table_head_item">原派遣单位</div> | 
|                     <div class="box_table_head_item">原所属工种</div> | 
|                     <div class="box_table_head_item">更换后派遣单位</div> | 
|                     <div class="box_table_head_item">更换后所属工种</div> | 
|                 </div> | 
|                 <div class="box_table_content" v-for="(item, index) in addList" :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">{{  item.sex==0?"男":(item.sex==1?"女":"" )}}</div> | 
|                   <div class="box_table_content_item">{{ item.memberIdcardNo }}</div> | 
|                   <div class="box_table_content_item">{{ item.companyName }}</div> | 
|                   <div class="box_table_content_item">{{ item.oldDuName }}</div> | 
|                   <div class="box_table_content_item">{{item.oldWorkTypeName}}</div> | 
|                   <div class="box_table_content_item">{{ item.duName }}</div> | 
|                   <div class="box_table_content_item">{{item.workTypeName}}</div> | 
|                 </div> | 
|             </div> | 
|           <div class="box_table" v-if="type==1" style="border-top: 0px solid #b4bbc5;" > | 
|             <div class="box_table_head"> | 
|               <div class="box_table_head_item5">备注</div> | 
|               <div class="box_table_head_item5"> | 
|                 <input v-model="form.checkInfo" style="width: 100%;height: 45px;border: 0px;outline: none;" placeholder="请输入" v-trim/> | 
|               </div> | 
|             </div> | 
|           </div> | 
|         </div> | 
|         <template v-if="type==1" v-slot:footer> | 
|             <el-button type="primary"  :loading="isWorking.export" @click="check(0)">提交通过</el-button> | 
| <!--            <el-button type="danger"  :loading="isWorking.export" @click="check(1)">审核不通过</el-button>--> | 
|             <el-button @click="visible=false">取消</el-button> | 
|         </template> | 
|         <template v-else-if="type==2" v-slot:footer> | 
|             <el-button @click="visible=false">返回</el-button> | 
|         </template> | 
|         <template v-else v-slot:footer> | 
|             <el-button type="primary"  :loading="isWorking.export" @click="exportDetail">导出详单</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' | 
|     import {getChangeDetailList} from "@/api/business/insuranceApply"; | 
|     import {check } from "@/api/business/applyChange"; | 
|     import {exportDetailExcel} from "@/api/business/unionChange"; | 
|     export default { | 
|         name: 'ApplyChangeDetails', | 
|         extends: BaseOpera, | 
|         components: { GlobalWindow }, | 
|         data () { | 
|             return { | 
|                 model:{}, | 
|                 apply:{}, | 
|               type:0, | 
|               delList:[], | 
|               addList:[], | 
|               companyList:new Map(), | 
|                 // 表单数据 | 
|                 form: { | 
|                     id: null, | 
|                     dealBackApply:0, | 
|                     checkInfo: '' | 
|                 }, | 
|                 // 验证规则 | 
|                 rules: { | 
|                 }, | 
|                 reverse: false, | 
|                 tableData: [] | 
|             } | 
|         }, | 
|         created () { | 
|             this.config({ | 
|                 api: '/business/insuranceApply', | 
|                 'field.id': 'id' | 
|             }) | 
|         }, | 
|         methods: { | 
|             open(title,target,target2){ | 
|               this.title=title | 
|               this.visible=true | 
|               this.model = target | 
|               this.form.id=target.id | 
|               this.type=target2 | 
|               this.getDetailListDo() | 
|             }, | 
|            check (type) { | 
|             this.form.dealBackApply = type | 
|             this.$dialog.messageConfirm('确认进行该操作吗?') | 
|                 .then(() => { | 
|                   this.isWorking = true | 
|                   check(this.form) | 
|                       .then(response => { | 
|                         this.visible = false | 
|                         this.$emit('success') | 
|                       }).catch(err => { | 
|                     this.$tip.apiFailed(err) | 
|                   }) | 
|                 }) | 
|                 .catch(() => { | 
|                 }) | 
|           }, | 
|            getDetailListDo() { | 
|              this.delList=[] | 
|              this.addList=[] | 
|              getChangeDetailList({unionChangeId: this.model.id}) | 
|                  .then(res => { | 
|                    var index =0 | 
|                    res.forEach(item1 => { | 
|                      this.companyList.set(item1.companyId, item1.companyName) | 
|                      if (item1.type == 1) { | 
|                        this.delList.push(item1); | 
|                      } else { | 
|                        this.addList.push(item1); | 
|                      } | 
|                    }) | 
|   | 
|                  }).catch(err => {}) | 
|            }, | 
|           exportDetail(){ | 
|             this.$dialog.exportConfirm('确认导出详单吗?') | 
|                 .then(() => { | 
|                   this.isWorking = true | 
|                   exportDetailExcel({ id: this.model.id }) | 
|                       .then(response => { | 
|                         this.download(response) | 
|                       }) | 
|                       .catch(e => { | 
|                         console.log(e) | 
|                         this.$message.error('数据下载失败!') | 
|                       }) | 
|                       .finally(() => { | 
|                         this.isWorking = false | 
|                       }) | 
|                 }) | 
|                 .catch(() => { | 
|                 }) | 
|           }, | 
|             handleSizeChange(val) { | 
|                 console.log(`每页 ${val} 条`); | 
|             }, | 
|             handleCurrentChange(val) { | 
|                 console.log(`当前页: ${val}`); | 
|             }, | 
|             handleClick(tab, event) { | 
|                 console.log(tab, event); | 
|             }, | 
|             onSubmit() { | 
|   | 
|             } | 
|         } | 
|     } | 
| </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-sizing: border-box; | 
|             .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-sizing: border-box; | 
|                 } | 
|                 .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_item1 { | 
|                     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; | 
|                     } | 
|                 .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(3) { | 
|                   } | 
|                   &:nth-child(9) { | 
|                   } | 
|                 } | 
|               .box_table_head_item5 { | 
|                 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(2) { | 
|                 } | 
|               } | 
|               .box_form_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) { | 
|                 } | 
|               } | 
|             } | 
|             .box_table_content { | 
|                 width: 100%; | 
|                 display: flex; | 
|                 align-items: center; | 
|                 .box_table_content_header{ | 
|                   border-bottom: 0px solid #b4bbc5 !important; | 
|                 } | 
|               .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(3) { | 
|                 } | 
|                 &:nth-child(9) { | 
|                 } | 
|                 } | 
|             } | 
|         } | 
|     } | 
| </style> |