<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" style="flex: 3">投保企业</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 class="box_table_head_item" style="flex: 2">{{getChangApplyTimeTitle(2,model)}}</div> 
 | 
            </div> 
 | 
            <div class="box_table_content "  > 
 | 
              <div class="box_table_content_item box_table_content_header" style="flex: 3">{{ apply.companyName }}</div> 
 | 
              <div class="box_table_content_item box_table_content_header" style="flex: 2">{{ apply.solutionsName }}</div> 
 | 
              <div class="box_table_content_item box_table_content_header" >{{ apply.code }}</div> 
 | 
              <div class="box_table_content_item box_table_content_header" style="flex: 2">{{ apply.startTime }}</div> 
 | 
              <div class="box_table_content_item box_table_content_header" style="flex: 2">{{ apply.endTime }}</div> 
 | 
              <div class="box_table_content_item box_table_content_header">{{ model.changeNum}}</div> 
 | 
              <div class="box_table_content_item box_table_content_header" style="flex: 2">{{ model.applyStartTime}}</div> 
 | 
            </div> 
 | 
          </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 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">{{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.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==1" 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> 
 | 
            <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, exportChangeUnitExcel} from "@/api/business/insuranceApply"; 
 | 
    import {exportComFiles} from "@/api/business/company"; 
 | 
    import {check} from "@/api/business/applyChange"; 
 | 
    // import {all as solutionAll} from "@/api/business/solutions"; 
 | 
    export default { 
 | 
        name: 'ApplyChangeUnitDetails', 
 | 
        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.type=target3 
 | 
              this.form.id=target2.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 => { 
 | 
                   that.detailList= res 
 | 
                 }).catch(err => {}) 
 | 
           }, 
 | 
          exportDetail(){ 
 | 
            this.$dialog.exportConfirm('确认导出详单吗?') 
 | 
                .then(() => { 
 | 
                  this.isWorking = true 
 | 
                  exportChangeUnitExcel({ 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> 
 | 
    .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_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_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; 
 | 
                  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; 
 | 
                  &:nth-child(4) { 
 | 
                    flex: 1.5; 
 | 
                  } 
 | 
                  &:nth-child(6) { 
 | 
                    flex: 1.5; 
 | 
                  } 
 | 
                  &:nth-child(8) { 
 | 
                    flex: 1.5; 
 | 
                  } 
 | 
                } 
 | 
              .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(1) { 
 | 
                   flex: 1; 
 | 
                } 
 | 
                &:nth-child(2) { 
 | 
                   flex: 8.5; 
 | 
                } 
 | 
              } 
 | 
              .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) { 
 | 
                  //flex: 0.5; 
 | 
                } 
 | 
              } 
 | 
            } 
 | 
            .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(4) { 
 | 
                      flex: 1.5; 
 | 
                    } 
 | 
                    &:nth-child(6) { 
 | 
                      flex: 1.5; 
 | 
                    } 
 | 
                    &:nth-child(8) { 
 | 
                      flex: 1.5; 
 | 
                    } 
 | 
                    span{ 
 | 
                      width: 100%; 
 | 
                      white-space: nowrap; 
 | 
                      word-wrap: break-word; 
 | 
                      text-overflow: ellipsis; 
 | 
                      overflow: hidden; 
 | 
                    } 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
</style> 
 |