|  |  | 
 |  |  |               <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">{{getChangApplyTimeTitle(1,model)}}</div> | 
 |  |  |               <div class="box_table_head_item">{{getChangApplyTimeTitle(0,model)}}</div> | 
 |  |  |             </div> | 
 |  |  |             <div class="box_table_content "  > | 
 |  |  |               <div class="box_table_content_item box_table_content_header">{{ apply.companyName }}</div> | 
 |  |  | 
 |  |  |               <div class="box_table_content_item box_table_content_header">{{ model.addNum}}</div> | 
 |  |  |               <div class="box_table_content_item box_table_content_header">{{ model.delNum}}</div> | 
 |  |  |               <div class="box_table_content_item box_table_content_header">{{ model.applyStartTime}}</div> | 
 |  |  |               <div class="box_table_content_item box_table_content_header">{{ model.delValidTime}}</div> | 
 |  |  |             </div> | 
 |  |  |           </div> | 
 |  |  |             <div class="box_table"> | 
 |  |  | 
 |  |  |                     <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 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 detailList" :key="index"> | 
 |  |  |                     <div class="box_table_content_item">{{item.add.id!=null?(index + 1):''}}</div> | 
 |  |  |                     <div class="box_table_content_item" >{{ item.add.memberName }}</div> | 
 |  |  |                     <div class="box_table_content_item">{{ item.add.memberIdcardNo }}</div> | 
 |  |  | <!-- | 
 |  |  |                     <div class="box_table_content_item">{{  item.add.sex==0?"男":(item.add.sex==1?"女":"" )}}</div> | 
 |  |  | --> | 
 |  |  |                     <div class="box_table_content_item">{{ item.add.duName }}</div> | 
 |  |  |                     <div class="box_table_content_item">{{item.add.workTypeName}}</div> | 
 |  |  |                     <div class="box_table_content_item"  style="align-items: baseline; cursor: pointer; " :title="item.add.remark">{{item.add.remark}}</div> | 
 |  |  |                     <div class="box_table_content_item">{{item.del.id!=null?(index + 1):''}}</div> | 
 |  |  |                     <div class="box_table_content_item" >{{ item.del.memberName }}</div> | 
 |  |  |                     <div class="box_table_content_item">{{ item.del.memberIdcardNo }}</div> | 
 |  |  | <!-- | 
 |  |  |                     <div class="box_table_content_item">{{ item.del.sex==0?"男":(item.del.sex==1?"女":"" ) }}</div> | 
 |  |  | --> | 
 |  |  |                     <div class="box_table_content_item">{{ item.del.duName }}</div> | 
 |  |  |                     <div class="box_table_content_item">{{item.del.workTypeName}}</div> | 
 |  |  |                     <div class="box_table_content_item" style="align-items: baseline; cursor: pointer; " :title="item.del.remark">{{item.del.remark}}</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/> | 
 |  |  |                 <input v-model="form.checkInfo" style="width: 100%;height: 45px;border: 0px;outline: none;" placeholder="请输入" v-trim/> | 
 |  |  |               </div> | 
 |  |  |             </div> | 
 |  |  |           </div> | 
 |  |  | 
 |  |  |             <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="exportComFilesDo">企业证件</el-button> | 
 |  |  | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  |     import BaseOpera from '@/components/base/BaseOpera' | 
 |  |  |     import GlobalWindow from '@/components/common/GlobalWindow' | 
 |  |  |     import {getChangeDetailList, exportJiajianBaoExcel} from "@/api/business/insuranceApply"; | 
 |  |  |     import {exportComFiles} from "@/api/business/company"; | 
 |  |  |     // import {all as solutionAll} from "@/api/business/solutions"; | 
 |  |  |     export default { | 
 |  |  |         name: 'ApplyChangeDetails', | 
 |  |  |         extends: BaseOpera, | 
 |  |  |         components: { GlobalWindow }, | 
 |  |  |         data () { | 
 |  |  |             return { | 
 |  |  |                 model:{}, | 
 |  |  |                 apply:{}, | 
 |  |  |               type:0, | 
 |  |  |               detailList:[], | 
 |  |  |                 // 表单数据 | 
 |  |  |                 form: { | 
 |  |  |                     id: null, | 
 |  |  |                     dealBackApply:0, | 
 |  |  |                     checkInfo: '' | 
 |  |  |                 }, | 
 |  |  |                 // 验证规则 | 
 |  |  |                 rules: { | 
 |  |  |                 }, | 
 |  |  |                 reverse: true, | 
 |  |  |                 tableData: [] | 
 |  |  |             } | 
 |  |  |         }, | 
 |  |  |         created () { | 
 |  |  |             this.config({ | 
 |  |  |                 api: '/business/insuranceApply', | 
 |  |  |                 'field.id': 'id' | 
 |  |  |             }) | 
 |  |  |         }, | 
 |  |  |         methods: { | 
 |  |  |             open(title,target,target2){ | 
 |  |  |               this.title=title | 
 |  |  |               this.visible=true | 
 |  |  |               this.apply = target | 
 |  |  |               this.model = target2 | 
 |  |  |               this.form.id=target.id | 
 |  |  |               this.getDetailListDo() | 
 |  |  |             }, | 
 |  |  |            getDetailListDo() { | 
 |  |  |              this.detailList = [] | 
 |  |  |              var that = this | 
 |  |  |              getChangeDetailList({applyChangeId: this.model.id}) | 
 |  |  |                  .then(res => { | 
 |  |  |                    var addDetailList = [] | 
 |  |  |                    var delDetailList = [] | 
 |  |  |                    res.forEach(item1 => { | 
 |  |  |                      if (item1.type == 1) { | 
 |  |  |                        delDetailList.push(item1); | 
 |  |  |                      } else { | 
 |  |  |                        addDetailList.push(item1); | 
 |  |  |                      } | 
 |  |  |                    }) | 
 |  |  |                    var index = addDetailList.length > delDetailList.length?addDetailList.length : delDetailList.length | 
 |  |  |                    for(var i = 0;i<index;i++){ | 
 |  |  |                      var addModel = addDetailList.length > i?addDetailList[i]:{} | 
 |  |  |                      var delModel = delDetailList.length > i?delDetailList[i]:{} | 
 |  |  |                      that.detailList.push({add:addModel,del:delModel}); | 
 |  |  |                      console.log(detailList) | 
 |  |  |                    } | 
 |  |  |                  }).catch(err => {}) | 
 |  |  |            }, | 
 |  |  |           exportDetail(){ | 
 |  |  |             this.$dialog.exportConfirm('确认导出详单吗?') | 
 |  |  |                 .then(() => { | 
 |  |  |                   this.isWorking = true | 
 |  |  |                   exportJiajianBaoExcel({ id: this.model.id }) | 
 |  |  |                       .then(response => { | 
 |  |  |                         this.download(response) | 
 |  |  |                       }) | 
 |  |  |                       .catch(e => { | 
 |  |  |                         console.log(e) | 
 |  |  |                         this.$message.error('数据下载失败!') | 
 |  |  |                       }) | 
 |  |  |                       .finally(() => { | 
 |  |  |                         this.isWorking = false | 
 |  |  |                       }) | 
 |  |  |                 }) | 
 |  |  |                 .catch(() => { | 
 |  |  |                 }) | 
 |  |  |           }, | 
 |  |  |           exportComFilesDo(){ | 
 |  |  |             this.$dialog.exportConfirm('确认导出企业证件吗?') | 
 |  |  |                 .then(() => { | 
 |  |  |                   this.isWorking = true | 
 |  |  |                   exportComFiles({ id: this.apply.companyId }) | 
 |  |  |                       .then(response => { | 
 |  |  |                         this.download(response) | 
 |  |  |                       }) | 
 |  |  |                       .catch(e => { | 
 |  |  |                         console.log(e) | 
 |  |  |                         this.$message.error('数据下载失败!') | 
 |  |  |                       }) | 
 |  |  |                 }) | 
 |  |  |                 .catch(() => { | 
 |  |  |                 }) | 
 |  |  |  | 
 |  |  |           }, | 
 |  |  |             handleSizeChange(val) { | 
 |  |  |                 console.log(`每页 ${val} 条`); | 
 |  |  |             }, | 
 |  |  |             handleCurrentChange(val) { | 
 |  |  |                 console.log(`当前页: ${val}`); | 
 |  |  |             }, | 
 |  |  |             handleClick(tab, event) { | 
 |  |  |                 console.log(tab, event); | 
 |  |  |             }, | 
 |  |  |             onSubmit() { | 
 |  |  |  | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  | import BaseOpera from '@/components/base/BaseOpera' | 
 |  |  | import GlobalWindow from '@/components/common/GlobalWindow' | 
 |  |  | import { getChangeDetailList, exportJiajianBaoExcel } from '@/api/business/insuranceApply' | 
 |  |  | import { check } from '@/api/business/applyChange' | 
 |  |  | import { exportComFiles } from '@/api/business/company' | 
 |  |  | export default { | 
 |  |  |   name: 'ApplyChangeDetails', | 
 |  |  |   extends: BaseOpera, | 
 |  |  |   components: { GlobalWindow }, | 
 |  |  |   data () { | 
 |  |  |     return { | 
 |  |  |       model: {}, | 
 |  |  |       apply: {}, | 
 |  |  |       type: 0, | 
 |  |  |       detailList: [], | 
 |  |  |       // 表单数据 | 
 |  |  |       form: { | 
 |  |  |         id: null, | 
 |  |  |         dealBackApply: 0, | 
 |  |  |         checkInfo: '' | 
 |  |  |       }, | 
 |  |  |       // 验证规则 | 
 |  |  |       rules: { | 
 |  |  |       }, | 
 |  |  |       reverse: false, | 
 |  |  |       tableData: [] | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   created () { | 
 |  |  |     this.config({ | 
 |  |  |       api: '/business/insuranceApply', | 
 |  |  |       'field.id': 'id' | 
 |  |  |     }) | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     open (title, target, target2, target3) { | 
 |  |  |       this.title = title | 
 |  |  |       this.visible = true | 
 |  |  |       this.apply = target | 
 |  |  |       this.model = target2 | 
 |  |  |       this.form.id = target2.id | 
 |  |  |       this.type = target3 | 
 |  |  |       if(this.form.id){ | 
 |  |  |         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.detailList = [] | 
 |  |  |       var that = this | 
 |  |  |       getChangeDetailList({ applyChangeId: this.model.id }) | 
 |  |  |         .then(res => { | 
 |  |  |           var addDetailList = [] | 
 |  |  |           var delDetailList = [] | 
 |  |  |           res.forEach(item1 => { | 
 |  |  |             if (item1.type == 1) { | 
 |  |  |               delDetailList.push(item1) | 
 |  |  |             } else { | 
 |  |  |               addDetailList.push(item1) | 
 |  |  |             } | 
 |  |  |           }) | 
 |  |  |           var index = addDetailList.length > delDetailList.length ? addDetailList.length : delDetailList.length | 
 |  |  |           for (var i = 0; i < index; i++) { | 
 |  |  |             var addModel = addDetailList.length > i ? addDetailList[i] : {} | 
 |  |  |             var delModel = delDetailList.length > i ? delDetailList[i] : {} | 
 |  |  |             that.detailList.push({ add: addModel, del: delModel }) | 
 |  |  |           } | 
 |  |  |         }).catch(err => {}) | 
 |  |  |     }, | 
 |  |  |     exportDetail () { | 
 |  |  |       this.$dialog.exportConfirm('确认导出详单吗?') | 
 |  |  |         .then(() => { | 
 |  |  |           this.isWorking = true | 
 |  |  |           exportJiajianBaoExcel({ id: this.model.id }) | 
 |  |  |             .then(response => { | 
 |  |  |               this.download(response) | 
 |  |  |             }) | 
 |  |  |             .catch(e => { | 
 |  |  |               console.log(e) | 
 |  |  |               this.$message.error('数据下载失败!') | 
 |  |  |             }) | 
 |  |  |             .finally(() => { | 
 |  |  |               this.isWorking = false | 
 |  |  |             }) | 
 |  |  |         }) | 
 |  |  |         .catch(() => { | 
 |  |  |         }) | 
 |  |  |     }, | 
 |  |  |     exportComFilesDo () { | 
 |  |  |       this.$dialog.exportConfirm('确认导出企业证件吗?') | 
 |  |  |         .then(() => { | 
 |  |  |           this.isWorking = true | 
 |  |  |           exportComFiles({ id: this.apply.companyId }) | 
 |  |  |             .then(response => { | 
 |  |  |               this.download(response) | 
 |  |  |             }) | 
 |  |  |             .catch(e => { | 
 |  |  |               console.log(e) | 
 |  |  |               this.$message.error('数据下载失败!') | 
 |  |  |             }) | 
 |  |  |         }) | 
 |  |  |         .catch(() => { | 
 |  |  |         }) | 
 |  |  |     }, | 
 |  |  |     handleSizeChange (val) { | 
 |  |  |       console.log(`每页 ${val} 条`) | 
 |  |  |     }, | 
 |  |  |     handleCurrentChange (val) { | 
 |  |  |       console.log(`当前页: ${val}`) | 
 |  |  |     }, | 
 |  |  |     handleClick (tab, event) { | 
 |  |  |       console.log(tab, event) | 
 |  |  |     }, | 
 |  |  |     onSubmit () { | 
 |  |  |  | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <style lang="scss" scoped> | 
 |  |  | 
 |  |  |                     border-right: 1px solid #b4bbc5; | 
 |  |  |                     border-bottom: 1px solid #b4bbc5; | 
 |  |  |                     box-sizing: border-box; | 
 |  |  |                   &:nth-child(3) { | 
 |  |  |                     flex: 1.5;; | 
 |  |  |                   } | 
 |  |  |                   &:nth-child(9) { | 
 |  |  |                     flex: 1.5;; | 
 |  |  |                   } | 
 |  |  |                   //&:nth-child(3) { | 
 |  |  |                   //  flex: 1.5;; | 
 |  |  |                   //} | 
 |  |  |                   //&:nth-child(9) { | 
 |  |  |                   //  flex: 1.5;; | 
 |  |  |                   //} | 
 |  |  |                 } | 
 |  |  |               .box_table_head_item5 { | 
 |  |  |                 flex: 1; | 
 |  |  | 
 |  |  |                   border-bottom: 0px solid #b4bbc5 !important; | 
 |  |  |                 } | 
 |  |  |               .box_table_content_item { | 
 |  |  |                     flex: 1; | 
 |  |  |                     height: 50px; | 
 |  |  |                 //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; | 
 |  |  |                     word-wrap: break-word; | 
 |  |  |                     word-break: break-all; | 
 |  |  |                     border-right: 1px solid #b4bbc5; | 
 |  |  |                     border-bottom: 1px solid #b4bbc5; | 
 |  |  |                     box-sizing: border-box; | 
 |  |  |                 &:nth-child(3) { | 
 |  |  |                   flex: 1.5; | 
 |  |  |                 } | 
 |  |  |                 &:nth-child(9) { | 
 |  |  |                   flex: 1.5; | 
 |  |  |                 //&:nth-child(3) { | 
 |  |  |                 //  flex: 1.5; | 
 |  |  |                 //} | 
 |  |  |                 //&:nth-child(9) { | 
 |  |  |                 //  flex: 1.5; | 
 |  |  |                 //} | 
 |  |  |                 span{ | 
 |  |  |                   width: 100%; | 
 |  |  |                   white-space: nowrap; | 
 |  |  |                   word-wrap: break-word; | 
 |  |  |                   text-overflow: ellipsis; | 
 |  |  |                   overflow: hidden; | 
 |  |  |                 } | 
 |  |  |                 } | 
 |  |  |             } |