<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">{{model.solutionType == 1?'被保险人':'投保企业'}}</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.companyName }}</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.guaranteeNum }} / {{ model.insureNum }}</div> 
 | 
              <div class="box_table_content_item box_table_content_header">{{model.fee!=null?model.fee:'-'}}</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> 
 | 
                <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.idcardNo }}</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 class="box_table_content_item">{{ item.sex==0?"男":"女" }}</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="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 {check, exportDetailExcel, getDetailList} from "@/api/business/insuranceApply"; 
 | 
    import {exportComFiles} from "@/api/business/company"; 
 | 
    // import {all as solutionAll} from "@/api/business/solutions"; 
 | 
    export default { 
 | 
        name: 'InsuranceDetails', 
 | 
        extends: BaseOpera, 
 | 
        components: { GlobalWindow }, 
 | 
        data () { 
 | 
            return { 
 | 
                model:{}, 
 | 
              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,type){ 
 | 
              this.title=title 
 | 
              this.visible=true 
 | 
              this.model = target 
 | 
              this.type=type 
 | 
              this.form.id=target.id 
 | 
              this.form.checkInfo='' 
 | 
              this.getDetailListDo() 
 | 
            }, 
 | 
           getDetailListDo(){ 
 | 
              getDetailList({applyId: this.model.id, 
 | 
                isExcel:1}).then(res => { 
 | 
                this.detailList = res 
 | 
              }).catch(err => { 
 | 
              }) 
 | 
            }, 
 | 
          exportDetail(){ 
 | 
            this.$dialog.exportConfirm('确认导出详单吗?') 
 | 
                .then(() => { 
 | 
                  this.isWorking = true 
 | 
                  exportDetailExcel({ 
 | 
                      isExcel:1, 
 | 
                      id: this.model.id }) 
 | 
                      .then(response => { 
 | 
                        this.download(response) 
 | 
                      }) 
 | 
                      .catch(e => { 
 | 
                        console.log(e) 
 | 
                        this.$message.error('数据下载失败!') 
 | 
                      }) 
 | 
                      .finally(() => { 
 | 
                        this.isWorking = false 
 | 
                      }) 
 | 
                }) 
 | 
                .catch(() => { 
 | 
                }) 
 | 
  
 | 
          }, 
 | 
          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(() => { 
 | 
                }) 
 | 
  
 | 
          }, 
 | 
          exportComFilesDo(){ 
 | 
            this.$dialog.exportConfirm('确认导出企业证件吗?') 
 | 
                .then(() => { 
 | 
                  this.isWorking = true 
 | 
                  exportComFiles({ id: this.model.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_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(1) { 
 | 
                        //flex: 0.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; 
 | 
                    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; 
 | 
                    } 
 | 
                span{ 
 | 
                  width: 100%; 
 | 
                  white-space: nowrap; 
 | 
                  word-wrap: break-word; 
 | 
                  text-overflow: ellipsis; 
 | 
                  overflow: hidden; 
 | 
                } 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
</style> 
 |