<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">减保人数</div>
|
<div class="box_table_head_item">批单生效期</div>
|
</div>
|
<div class="box_table_content">
|
<div class="box_table_content_item box_table_content_header">{{form.companyName}}</div>
|
<div class="box_table_content_item box_table_content_header">{{form.solutionsName}}</div>
|
<div class="box_table_content_item box_table_content_header">{{form.code}}</div>
|
<div class="box_table_content_item box_table_content_header">{{form.startTime}}</div>
|
<div class="box_table_content_item box_table_content_header">{{form.endTime}}</div>
|
<div class="box_table_content_item box_table_content_header">{{arr1.length}}</div>
|
<div class="box_table_content_item box_table_content_header">{{arr2.length}}</div>
|
<div class="box_table_content_item box_table_content_header">{{form.applyStartTime}}</div>
|
</div>
|
</div>
|
<div class="box_table">
|
<div class="box_table_head">
|
<div class="box_table_head_item1">加保员工</div>
|
<div class="box_table_head_item1">减保员工</div>
|
</div>
|
<div style="width: 100%; display: flex;">
|
<div class="box_table_head" style="width: 50%;">
|
<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_head" style="width: 50%;">
|
<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>
|
<div style="width: 100%; display: flex;">
|
<div style="width: 50%; border-bottom: 1px solid #b4bbc5;">
|
<div class="box_table_content" style="width: 100%;" v-for="(item, index) in arr1" :key="index">
|
<div class="box_table_content_item">{{index + 1}}</div>
|
<div class="box_table_content_item">{{item.name}}</div>
|
<div class="box_table_content_item">{{item.idCard}}</div><!--
|
<div class="box_table_content_item">{{item.sex === 0 ? '男' : '女'}}</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 style="width: 50%; border-bottom: 1px solid #b4bbc5;">
|
<div class="box_table_content" style="width: 100%;" v-for="(item, index) in arr2" :key="index">
|
<div class="box_table_content_item">{{index + 1}}</div>
|
<div class="box_table_content_item">{{item.name}}</div>
|
<div class="box_table_content_item">{{item.idCard}}</div><!--
|
<div class="box_table_content_item">{{item.sex === 0 ? '男' : '女'}}</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>
|
</div>
|
</div>
|
<template v-slot:footer>
|
<el-button type="primary" @click="submit">确认</el-button>
|
<el-button @click="go">返回</el-button>
|
</template>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
export default {
|
name: 'ApplyChangeDetails',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data () {
|
return {
|
form: {
|
companyName: '',
|
solutionsName: '',
|
code: '',
|
startTime: '',
|
endTime: '',
|
applyStartTime: ''
|
},
|
arr1: [],
|
arr2: []
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/insuranceApply',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
submit () {
|
this.$emit('success')
|
this.visible = false
|
},
|
go () {
|
this.visible = false
|
},
|
open (title, arr1, arr2, obj) {
|
this.title = title
|
this.arr1 = arr1
|
this.arr2 = arr2
|
this.visible = true
|
this.$nextTick(() => {
|
for (const key in this.form) {
|
this.form[key] = obj[key]
|
}
|
})
|
},
|
confirm () {
|
this.$emit('success')
|
}
|
}
|
}
|
</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) {
|
flex: 1.5;;
|
}
|
&:nth-child(9) {
|
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;
|
border-left: 1px solid #b4bbc5;
|
.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) {
|
flex: 1.5;
|
}
|
&:nth-child(9) {
|
flex: 1.5;
|
}
|
span{
|
width: 100%;
|
white-space: nowrap;
|
word-wrap: break-word;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
