<template>
|
<GlobalWindow
|
:title="title"
|
width="80%"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<div class="desc">
|
<div class="desc_label">
|
<div class="desc_label_left">
|
<span class="desc_label_left_title">
|
报案详情
|
</span>
|
<span class="desc_label_left_time">
|
报案日期：2015-10-03 10:15:22
|
</span>
|
<span class="desc_label_left_code">
|
报案号：214141241241
|
</span>
|
</div>
|
<div class="desc_label_right">
|
<el-button type="primary" @click="visible1 = true">添加报案号</el-button>
|
<el-button type="primary" @click="visible2 = true">理赔处理</el-button>
|
<el-button type="primary" @click="visible4 = true">结案提交</el-button>
|
<el-button type="danger" @click="visible3 = true">撤销申请</el-button>
|
</div>
|
</div>
|
<div class="desc_list">
|
<div class="desc_list_item">
|
<div class="desc_list_item_label">
|
出险人姓名：
|
</div>
|
<div class="desc_list_item_val">
|
吴三万
|
</div>
|
</div>
|
<div class="desc_list_item">
|
<div class="desc_list_item_label">
|
出险人身份证号：
|
</div>
|
<div class="desc_list_item_val">
|
320224403660011111
|
</div>
|
</div>
|
<div class="desc_list_item">
|
<div class="desc_list_item_label">
|
事故发生时间：
|
</div>
|
<div class="desc_list_item_val">
|
2015-10-02 10:15:22
|
</div>
|
</div>
|
<div class="desc_list_item">
|
<div class="desc_list_item_label">
|
所属保单号：
|
</div>
|
<div class="desc_list_item_val" style="cursor: pointer; color: rgba(39, 157, 255, 0.968627450980392);">
|
11121624116241
|
<el-button type="primary" style="margin-left: 10px;">查看保险单</el-button>
|
</div>
|
</div>
|
<div class="desc_list_item">
|
<div class="desc_list_item_label">
|
保险生效起期：
|
</div>
|
<div class="desc_list_item_val">
|
2015-10-02 10:15:22
|
</div>
|
</div>
|
<div class="desc_list_item">
|
<div class="desc_list_item_label">
|
保险生效止期：
|
</div>
|
<div class="desc_list_item_val">
|
2015-10-02 10:15:22
|
</div>
|
</div>
|
<div class="desc_list_item">
|
<div class="desc_list_item_label">
|
派遣单位：
|
</div>
|
<div class="desc_list_item_val">
|
芜湖格力精密制造有限公司
|
</div>
|
</div>
|
<div class="desc_list_item">
|
<div class="desc_list_item_label">
|
所属工种：
|
</div>
|
<div class="desc_list_item_val">
|
4类机械加工
|
</div>
|
</div>
|
<div class="desc_list_item">
|
<div class="desc_list_item_label">
|
就诊医疗机构：
|
</div>
|
<div class="desc_list_item_val">
|
安徽省人民医院
|
</div>
|
</div>
|
<div class="desc_list_item">
|
<div class="desc_list_item_label">
|
事故类型：
|
</div>
|
<div class="desc_list_item_val">
|
工作期间受伤
|
</div>
|
</div>
|
<div class="desc_list_item">
|
<div class="desc_list_item_label">
|
是否住院：
|
</div>
|
<div class="desc_list_item_val">
|
否
|
</div>
|
</div>
|
<div class="desc_list_item">
|
<div class="desc_list_item_label">
|
是否有医疗保险：
|
</div>
|
<div class="desc_list_item_val">
|
否
|
</div>
|
</div>
|
<div class="desc_list_item">
|
<div class="desc_list_item_label">
|
出险地区：
|
</div>
|
<div class="desc_list_item_val">
|
安徽省合肥市
|
</div>
|
</div>
|
<div class="desc_list_item">
|
<div class="desc_list_item_label">
|
报案人姓名：
|
</div>
|
<div class="desc_list_item_val">
|
王林
|
</div>
|
</div>
|
<div class="desc_list_item">
|
<div class="desc_list_item_label">
|
报案人联系方式：
|
</div>
|
<div class="desc_list_item_val">
|
13355667788
|
</div>
|
</div>
|
<div class="desc_list_item" style="width: 100%;">
|
<div class="desc_list_item_label">
|
事故描述：
|
</div>
|
<div class="desc_list_item_val">
|
2021年01月24日凌晨03点左右，员工周光磊在苏州工业园区长宏光电科技有限公司光电生产部光学膜裁切课车间，用手动叉车搬运原材料时，原材料掉落砸到右脚，凌晨3：30左右公司派专车送往苏州工业园区星湖医院就诊，为员工伤口进行包扎止血后，凌晨05：45转送至苏州瑞华骨科医院进一步治疗。
|
</div>
|
</div>
|
<div class="desc_list_item" style="width: 100%;">
|
<div class="desc_list_item_label">
|
报案视频：
|
</div>
|
<div class="desc_list_item_videos">
|
<div class="desc_list_item_imgs_video">
|
<video src="blob:https://www.bilibili.com/f8718314-82c5-43d2-9b26-2c4d701b6bab"></video>
|
</div>
|
<div class="desc_list_item_imgs_video">
|
<video src="blob:https://www.bilibili.com/f8718314-82c5-43d2-9b26-2c4d701b6bab"></video>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="desc_xian"></div>
|
<div class="desc_label">
|
<div class="desc_label_left">
|
<span class="desc_label_left_title">
|
理赔资料
|
</span>
|
<span class="desc_label_left_time" style="color: black">
|
资料完成日期：2015-10-03 10:15:22
|
</span>
|
</div>
|
<div class="desc_label_right">
|
<el-button type="primary" @click="visible5 = true">备注标签</el-button>
|
<el-button type="primary" @click="submit">资料确认</el-button>
|
<el-button type="primary">资料下载</el-button>
|
</div>
|
</div>
|
<div class="desc_data">
|
<div class="desc_data_label">1. 员工关系证明资料</div>
|
<div class="desc_data_list">
|
<div class="desc_data_list_item" v-for="(item, index) in 2" :key="index">
|
<div class="desc_data_list_item_dele">删除</div>
|
<div class="desc_data_list_item_img">
|
<img src="@/assets/images/Galanz@2x.png" />
|
</div>
|
<div class="desc_data_list_item_info">
|
<span>考勤表.jpg</span>
|
<span>操作员-王某某</span>
|
<span>2023-05-22 10:10:11</span>
|
</div>
|
</div>
|
<div class="desc_data_list_item">
|
<div class="desc_data_list_item_img" style="cursor: pointer; background: #8c939d;">
|
<i class="el-icon-plus"></i>
|
</div>
|
<div class="desc_data_list_item_upload">
|
<el-button type="primary">上传</el-button>
|
<el-button>取消</el-button>
|
</div>
|
</div>
|
<div class="desc_data_list_item1"></div>
|
<div class="desc_data_list_item1"></div>
|
</div>
|
</div>
|
<div class="desc_data">
|
<div class="desc_data_label">2. 医疗资料</div>
|
<div class="desc_data_cate">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane label="门诊" name="first"></el-tab-pane>
|
<el-tab-pane label="住院资料" name="second"></el-tab-pane>
|
<el-tab-pane label="伤残" name="third"></el-tab-pane>
|
</el-tabs>
|
</div>
|
<div class="desc_data_list">
|
<div class="desc_data_list_item" v-for="(item, index) in 2" :key="index">
|
<div class="desc_data_list_item_dele">删除</div>
|
<div class="desc_data_list_item_img">
|
<img src="@/assets/images/Galanz@2x.png" />
|
</div>
|
<div class="desc_data_list_item_info">
|
<span>考勤表.jpg</span>
|
<span>操作员-王某某</span>
|
<span>2023-05-22 10:10:11</span>
|
</div>
|
</div>
|
<div class="desc_data_list_item">
|
<div class="desc_data_list_item_img" style="cursor: pointer; background: #8c939d;">
|
<i class="el-icon-plus"></i>
|
</div>
|
<div class="desc_data_list_item_upload">
|
<el-button type="primary">上传</el-button>
|
<el-button>取消</el-button>
|
</div>
|
</div>
|
<div class="desc_data_list_item1"></div>
|
<div class="desc_data_list_item1"></div>
|
</div>
|
</div>
|
<div class="desc_data">
|
<div class="desc_data_label">3. 赔付结案资料</div>
|
<div class="desc_data_list">
|
<div class="desc_data_list_item" v-for="(item, index) in 2" :key="index">
|
<div class="desc_data_list_item_dele">删除</div>
|
<div class="desc_data_list_item_img">
|
<img src="@/assets/images/Galanz@2x.png" />
|
</div>
|
<div class="desc_data_list_item_info">
|
<span>考勤表.jpg</span>
|
<span>操作员-王某某</span>
|
<span>2023-05-22 10:10:11</span>
|
</div>
|
</div>
|
<div class="desc_data_list_item">
|
<div class="desc_data_list_item_img" style="cursor: pointer; background: #8c939d;">
|
<i class="el-icon-plus"></i>
|
</div>
|
<div class="desc_data_list_item_upload">
|
<el-button type="primary">上传</el-button>
|
<el-button>取消</el-button>
|
</div>
|
</div>
|
<div class="desc_data_list_item1"></div>
|
<div class="desc_data_list_item1"></div>
|
</div>
|
</div>
|
<div class="desc_label">
|
<div class="desc_label_left">
|
<span class="desc_label_left_title">
|
案件进度
|
</span>
|
</div>
|
</div>
|
<div class="desc_times">
|
<el-timeline :reverse="reverse">
|
<el-timeline-item
|
v-for="(activity, index) in activities"
|
:key="index"
|
:timestamp="activity.timestamp">
|
{{activity.content}}
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
</div>
|
<el-dialog
|
title="添加报案号"
|
:visible.sync="visible1"
|
:show-close="false"
|
:close-on-click-modal="false"
|
width="30%"
|
center>
|
<div class="form">
|
<div class="form_item">
|
<div class="form_item_label">
|
<span>*</span>报案号：
|
</div>
|
<div class="form_item_val">
|
<input type="text" placeholder="请输入">
|
</div>
|
</div>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="visible1 = false">取 消</el-button>
|
<el-button type="primary" @click="visible1 = false">确 定</el-button>
|
</span>
|
</el-dialog>
|
<el-dialog
|
title="理赔处理"
|
:visible.sync="visible2"
|
:show-close="false"
|
:close-on-click-modal="false"
|
width="30%"
|
center>
|
<div class="form">
|
<div class="form_item">
|
<div class="form_item_label">
|
<span>*</span>处理进展：
|
</div>
|
<div class="form_item_val">
|
<textarea placeholder="请输入"></textarea>
|
</div>
|
</div>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="visible2 = false">取 消</el-button>
|
<el-button type="primary" @click="visible2 = false">确 定</el-button>
|
</span>
|
</el-dialog>
|
<el-dialog
|
title="撤销申请"
|
:visible.sync="visible3"
|
:show-close="false"
|
:close-on-click-modal="false"
|
width="30%"
|
center>
|
<div class="form">
|
<div class="form_item">
|
<div class="form_item_label">
|
<span>*</span>填写撤销说明：
|
</div>
|
<div class="form_item_val">
|
<textarea placeholder="请输入"></textarea>
|
</div>
|
</div>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="visible3 = false">取 消</el-button>
|
<el-button type="primary" @click="visible3 = false">确 定</el-button>
|
</span>
|
</el-dialog>
|
<el-dialog
|
title="理赔结案"
|
:visible.sync="visible4"
|
:show-close="false"
|
:close-on-click-modal="false"
|
width="30%"
|
center>
|
<div class="form">
|
<div class="form_item">
|
<div class="form_item_label">
|
<span>*</span>结案内容：
|
</div>
|
<div class="form_item_val">
|
<textarea placeholder="请输入"></textarea>
|
</div>
|
</div>
|
<div class="form_item">
|
<div class="form_item_label">
|
<span>*</span>理赔费用：
|
</div>
|
<div class="form_item_val">
|
<el-table
|
:data="tableData"
|
border
|
style="width: 100%">
|
<el-table-column
|
prop="date"
|
label="医疗理赔">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="误工理赔">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="伤残理赔">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="死亡理赔">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="理赔总额">
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="visible4 = false">取 消</el-button>
|
<el-button type="primary" @click="visible4 = false">确 定</el-button>
|
</span>
|
</el-dialog>
|
<el-dialog
|
title="备注标签"
|
:visible.sync="visible5"
|
:show-close="false"
|
:close-on-click-modal="false"
|
width="30%"
|
center>
|
<div class="form">
|
<div class="form_span">
|
<span>理赔员-王林 2023-11-11 10:33:12</span>
|
<span>李福贤 右中指远节指骨骨折打包处理5000(含医疗误工 伤)免鉴定和认定可以吗?</span>
|
</div>
|
<div class="form_span">
|
<span>理赔员-李某 2023-11-11 10:33:12</span>
|
<span>理赔试着申请下 需提供检查报告单 原件寄保司</span>
|
</div>
|
<div class="form_item">
|
<div class="form_item_label">
|
<span>*</span>填写撤销说明：
|
</div>
|
<div class="form_item_val">
|
<textarea placeholder="请输入"></textarea>
|
</div>
|
</div>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="visible5 = false">取 消</el-button>
|
<el-button type="primary" @click="visible5 = false">添 加</el-button>
|
</span>
|
</el-dialog>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
export default {
|
name: 'OperaSettleClaimsWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data () {
|
return {
|
// 表单数据
|
form: {
|
id: null,
|
},
|
// 验证规则
|
rules: {
|
},
|
activeName: 'first',
|
reverse: true,
|
activities: [
|
{
|
content: '提交报案申请\n' +
|
'\n' +
|
'\n' +
|
'提交意见：-',
|
timestamp: '操作员-张伟（安徽平安人力资源有限公司）\n' +
|
'\n' +
|
'2023-09-11 00:00:00'
|
}
|
],
|
tableData: [],
|
visible1: false,
|
visible2: false,
|
visible3: false,
|
visible4: false,
|
visible5: false
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/settleClaims',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
handleClick(tab, event) {
|
console.log(tab, event);
|
},
|
submit() {
|
this.$confirm('理赔材料收集完成，请及时提交保险公司！', '资料收集完成', {
|
confirmButtonText: '提交',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.$message({
|
type: 'success',
|
message: '提交成功!'
|
});
|
}).catch(() => {
|
|
});
|
}
|
}
|
}
|
</script>
|
<style>
|
.v-modal {
|
z-index: 2000 !important;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.form {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
.form_span {
|
width: 100%;
|
display: flex;
|
align-items: start;
|
flex-direction: column;
|
margin-bottom: 20px;
|
span {
|
font-size: 14px;
|
&:nth-child(1) {
|
color: black;
|
margin-bottom: 5px;
|
}
|
&:nth-child(2) {
|
color: #8c939d;
|
}
|
}
|
}
|
.form_item {
|
width: 100%;
|
display: flex;
|
align-items: start;
|
margin-bottom: 20px;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.form_item_label {
|
flex-shrink: 0;
|
color: black;
|
font-size: 14px;
|
span {
|
color: red;
|
font-size: 14px;
|
}
|
}
|
.form_item_val {
|
flex: 1;
|
/*height: 40px;*/
|
margin-left: 20px;
|
textarea {
|
width: 100%;
|
height: 70px;
|
border: 1px solid #cbcbcb;
|
padding: 10px;
|
outline: none;
|
box-sizing: border-box;
|
}
|
input {
|
width: 100%;
|
height: 100%;
|
outline: none;
|
border-radius: 5px;
|
border: 1px solid #cbcbcb;
|
padding: 0 20px;
|
box-sizing: border-box;
|
}
|
}
|
}
|
}
|
.desc {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
.desc_label {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.desc_label_left {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
.desc_label_left_title {
|
font-size: 20px;
|
font-weight: bold;
|
color: black;
|
}
|
.desc_label_left_time {
|
font-size: 14px;
|
color: rgba(249, 86, 1, 0.996);
|
margin-left: 10px;
|
}
|
.desc_label_left_code {
|
font-size: 15px;
|
color: black;
|
margin-left: 30px;
|
}
|
}
|
.desc_label_right {
|
flex-shrink: 0;
|
}
|
}
|
.desc_list {
|
width: 100%;
|
margin-top: 20px;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
.desc_list_item {
|
width: 33.3%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 10px;
|
.desc_list_item_label {
|
width: 130px;
|
flex-shrink: 0;
|
font-size: 15px;
|
color: black;
|
}
|
.desc_list_item_val {
|
flex: 1;
|
font-size: 15px;
|
color: black;
|
}
|
.desc_list_item_videos {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
.desc_list_item_imgs_video {
|
width: 150px;
|
height: 150px;
|
background: black;
|
margin-right: 10px;
|
video {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
}
|
.desc_xian {
|
width: 100%;
|
height: 1px;
|
margin: 10px 0;
|
background: #ececec;
|
}
|
.desc_data {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
margin-top: 20px;
|
.desc_data_label {
|
font-size: 16px;
|
color: black;
|
font-weight: 600;
|
margin-bottom: 20px;
|
}
|
.desc_data_cate {
|
width: 100%;
|
margin: 0 0 10px 0;
|
}
|
.desc_data_list {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
.desc_data_list_item1 {
|
width: 24.5%;
|
}
|
.desc_data_list_item {
|
width: 24.5%;
|
padding: 10px;
|
box-sizing: border-box;
|
border: 1px solid #e2e2e2;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
position: relative;
|
margin-bottom: 10px;
|
.desc_data_list_item_dele {
|
position: absolute;
|
top: 10px;
|
right: 10px;
|
font-size: 14px;
|
cursor: pointer;
|
color: rgba(249, 86, 1, 0.996078431372549);
|
}
|
.desc_data_list_item_upload {
|
flex: 1;
|
height: 80px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.desc_data_list_item_img {
|
flex-shrink: 0;
|
width: 80px;
|
height: 80px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
.el-icon-plus {
|
font-size: 26px;
|
color: #ffffff;
|
}
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.desc_data_list_item_info {
|
flex: 1;
|
height: 80px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
span {
|
&:nth-child(1) {
|
font-size: 14px;
|
color: black;
|
}
|
&:nth-child(2) {
|
font-size: 14px;
|
color: #888888;
|
}
|
&:nth-child(3) {
|
font-size: 14px;
|
color: #888888;
|
}
|
}
|
}
|
}
|
}
|
}
|
.desc_times {
|
width: 100%;
|
margin-top: 20px;
|
}
|
}
|
</style>
|
