<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: 1.5">投保企业</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"  style="flex: 1.5">{{ apply.companyName }}</div> 
 | 
              <div class="box_table_content_item box_table_content_header">{{ 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">{{ apply.startTime }}</div> 
 | 
              <div class="box_table_content_item box_table_content_header">{{ apply.endTime }}</div> 
 | 
              <div class="box_table_content_item box_table_content_header">{{ detailList.length }}</div> 
 | 
              <div class="box_table_content_item box_table_content_header">{{ apply.applyStartTime }}</div> 
 | 
            </div> 
 | 
          </div> 
 | 
            <div class="box_table"> 
 | 
                <div class="box_table_head"> 
 | 
                    <div class="box_table_head_item"  style="flex: 0.5">序号</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" style="flex: 0.5">{{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.idCard }}</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 class="box_table_content_item" style="align-items: baseline;cursor: pointer; " :title="item.remark">{{item.remark}}</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: 'ApplyChangeUnitDetails1', 
 | 
        extends: BaseOpera, 
 | 
        components: { GlobalWindow }, 
 | 
        data () { 
 | 
            return { 
 | 
                apply: {}, 
 | 
              detailList:[] 
 | 
            } 
 | 
        }, 
 | 
        created () { 
 | 
            this.config({ 
 | 
                api: '/business/insuranceApply', 
 | 
                'field.id': 'id' 
 | 
            }) 
 | 
        }, 
 | 
        methods: { 
 | 
            open(title,target, target1){ 
 | 
              this.title=title 
 | 
                this.detailList = target 
 | 
                this.apply = target1 
 | 
              this.visible=true 
 | 
            }, 
 | 
            submit() { 
 | 
                this.$emit('success') 
 | 
                this.visible = false 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
</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; 
 | 
                    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(2) { 
 | 
                   flex: 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; 
 | 
                  word-break: break-all; 
 | 
                  word-wrap: break-word; 
 | 
                    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> 
 |