<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">{{ getUnionChangTimeTitle(2,model) }}</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 { 
 | 
                //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(3) { 
 | 
                } 
 | 
                &:nth-child(9) { 
 | 
                } 
 | 
                span{ 
 | 
                  width: 100%; 
 | 
                  white-space: nowrap; 
 | 
                  word-wrap: break-word; 
 | 
                  text-overflow: ellipsis; 
 | 
                  overflow: hidden; 
 | 
                } 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
</style> 
 |