<template>
|
<GlobalWindow
|
:title="title"
|
width="50%"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<div class="box">
|
<div class="box_header">
|
<div class="box_header_item">
|
<div class="box_header_item_label">投保企业</div>
|
<div class="box_header_item_val">安徽格力机械制造厂</div>
|
</div>
|
<div class="box_header_item">
|
<div class="box_header_item_label">保险方案</div>
|
<div class="box_header_item_val">平安保险雇主责任险A版</div>
|
</div>
|
<div class="box_header_item">
|
<div class="box_header_item_label">关联保单号</div>
|
<div class="box_header_item_val">11121241241241</div>
|
</div>
|
<div class="box_header_item">
|
<div class="box_header_item_label">投保人数</div>
|
<div class="box_header_item_val">50</div>
|
</div>
|
</div>
|
<div class="box_table">
|
<div class="box_table_headText">加保员工</div>
|
<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>
|
<div class="box_table_content" v-for="(item, index) in 3" :key="index">
|
<div class="box_table_content_item">{{index + 1}}</div>
|
<div class="box_table_content_item">王某某</div>
|
<div class="box_table_content_item">340411190001010011</div>
|
<div class="box_table_content_item">安徽格力机械制造厂</div>
|
<div class="box_table_content_item">4类 机械加工/制造</div>
|
<div class="box_table_content_item">200</div>
|
</div>
|
</div>
|
<div class="box_table">
|
<div class="box_table_headText">减保员工</div>
|
<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>
|
<div class="box_table_content" v-for="(item, index) in 3" :key="index">
|
<div class="box_table_content_item">{{index + 1}}</div>
|
<div class="box_table_content_item">王某某</div>
|
<div class="box_table_content_item">340411190001010011</div>
|
<div class="box_table_content_item">安徽格力机械制造厂</div>
|
<div class="box_table_content_item">4类 机械加工/制造</div>
|
<div class="box_table_content_item">-200</div>
|
</div>
|
</div>
|
<div class="box_header">
|
<div class="box_header_item">
|
<div class="box_header_item_label">加保人数</div>
|
<div class="box_header_item_val">2</div>
|
</div>
|
<div class="box_header_item">
|
<div class="box_header_item_label">减保人数</div>
|
<div class="box_header_item_val">1</div>
|
</div>
|
<div class="box_header_item" style="flex: 1;">
|
<div class="box_header_item_label" style="flex: 0.333 !important;">费用变更</div>
|
<div class="box_header_item_val">100</div>
|
</div>
|
</div>
|
</div>
|
<template v-slot:footer>
|
<el-button type="primary">企业证件</el-button>
|
<el-button type="primary">导出详单</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: 'applyChangeDetails',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data () {
|
return {
|
// 表单数据
|
form: {
|
id: null,
|
editDate: ''
|
},
|
// 验证规则
|
rules: {
|
},
|
formInline: {
|
user: '',
|
region: ''
|
},
|
reverse: true,
|
activities: [{
|
content: '活动按期开始',
|
timestamp: '2018-04-15'
|
}, {
|
content: '通过审核',
|
timestamp: '2018-04-13'
|
}, {
|
content: '创建成功',
|
timestamp: '2018-04-11'
|
}],
|
tableData: [],
|
activeName: 'first',
|
currentPage: 1
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/insuranceApply',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
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%;
|
.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-left: 1px solid #b4bbc5;
|
box-sizing: border-box;
|
.box_table_headText {
|
width: 100%;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: #f2f2f2;
|
font-size: 14px;
|
color: black;
|
border-right: 1px solid #b4bbc5;
|
border-bottom: 1px solid #b4bbc5;
|
}
|
.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_content {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
.box_table_content_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;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
