<template>
|
<view class="box">
|
<u-modal :show="show" title="特别提醒" @confirm="show = false" confirmColor="#437CB3" confirmText="知道了" content='根据《工伤保险条例》第三章第六条规定:员工上下班路上交通事故，非本人主要责任才算工伤。如果是员工自己的主要责任，只能算意外事故，不能算作工伤。如果不是工伤，雇主则无需承担赔偿责任。比如:小明上班路上骑电瓶车摔倒了导致擦伤，没有第三责任方，所以此案算意外，不能算工伤。'></u-modal>
|
<u--form
|
labelPosition="top"
|
:model="model"
|
:rules="rules"
|
labelWidth="150"
|
ref="uForm"
|
>
|
<view class="box_list">
|
<view class="box_list_Label">基本信息</view>
|
<view class="box_list_from">
|
<u-form-item label="出险人：" prop="memberName" borderBottom required v-if="!id">
|
<u--input v-model="model.memberName" placeholder="请选择出险人" @input="changeSearch" border="none"></u--input>
|
<scroll-view scroll-y class="box_list_data" v-if="model.memberName && columns2.length > 0">
|
<view class="box_list_data_item" v-for="(item, index) in columns2" :key="index" @click="clickItem(item)">
|
{{item.name}} - {{item.idcardNo}}
|
</view>
|
</scroll-view>
|
</u-form-item>
|
<u-form-item label="保险方案：" prop="solutionName" borderBottom required @click="openFA" v-if="!id">
|
<u--input v-model="model.solutionName" disabled disabledColor="#ffffff" placeholder="请选择保险方案" border="none"></u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item label="报案人：" prop="informantName" borderBottom required>
|
<u--input v-model="model.informantName" placeholder="请输入报案人姓名" border="none"></u--input>
|
</u-form-item>
|
<u-form-item label="报案人联系方式：" prop="informantPhone" required>
|
<u--input v-model="model.informantPhone" maxlength="11" placeholder="请输入报案人联系方式" border="none"></u--input>
|
</u-form-item>
|
</view>
|
</view>
|
<view class="box_list">
|
<view class="box_list_Label">事故信息</view>
|
<view class="box_list_from">
|
<u-form-item label="就诊医疗机构：" prop="hospital" borderBottom>
|
<u--input v-model="model.hospital" placeholder="请输入就诊医疗机构名称" border="none"></u--input>
|
</u-form-item>
|
<u-form-item label="事故时间：" prop="happenTime" borderBottom required @click="show1 = true">
|
<u--input v-model="model.happenTime" disabled disabledColor="#ffffff" placeholder="请选择事故发生时间" border="none"></u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item label="事故类型：" prop="typeName" borderBottom required @click="show2 = true">
|
<u--input v-model="model.typeName" disabled disabledColor="#ffffff" placeholder="请选择事故类型" border="none"></u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item label="是否住院：" prop="name" borderBottom required>
|
<view class="list">
|
<view :class="model.inHospital === 0 ? 'list_item active' : 'list_item'" @click="model.inHospital = 0">是</view>
|
<view :class="model.inHospital === 1 ? 'list_item active' : 'list_item'" @click="model.inHospital = 1">否</view>
|
</view>
|
</u-form-item>
|
<u-form-item label="是否有医疗保险：" prop="name" borderBottom required>
|
<view class="list">
|
<view :class="model.medicalInsurance === 0 ? 'list_item active' : 'list_item'" @click="model.medicalInsurance = 0">是</view>
|
<view :class="model.medicalInsurance === 1 ? 'list_item active' : 'list_item'" @click="model.medicalInsurance = 1">否</view>
|
</view>
|
</u-form-item>
|
<u-form-item label="出险地区：" prop="areaInfo" borderBottom @click="show3 = true">
|
<u--input v-model="model.areaInfo" disabled disabledColor="#ffffff" placeholder="请选择事故发生地" border="none"></u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item label="事故描述：" prop="content" borderBottom required v-if="!id">
|
<u--textarea placeholder="请描述事故经过" border="none" v-model="model.content"></u--textarea>
|
</u-form-item>
|
<u-form-item label="事故视频/图片：" prop="name" v-if="!id">
|
<view style="width: 100%; height: 15rpx;"></view>
|
<!-- <u-upload
|
:fileList="fileList"
|
@afterRead="afterRead"
|
@delete="deletePic"
|
multiple
|
:maxCount="10"
|
accept="media"
|
></u-upload> -->
|
<view class="meade">
|
<view class="meade_content" v-for="(item,index) in model.reportFileList" :key="index">
|
<image class="dele" src="@/static/icon/ic_delete@2x.png" mode="widthFix" @click="deletePic(index)"></image>
|
<image class="image" :src="item.url" mode="widthFix" v-if="item.type === 0"></image>
|
<video class="video" :src="item.url" controls v-if="item.type === 1"></video>
|
</view>
|
<view class="meade_upload" @click="upload">
|
<u-icon name="plus" color="#999999" size="20"></u-icon>
|
<text>点击上传</text>
|
</view>
|
<view class="meade_zw"></view>
|
<view class="meade_zw"></view>
|
<view class="meade_zw"></view>
|
</view>
|
</u-form-item>
|
</view>
|
</view>
|
</u--form>
|
<!-- 提交按钮 -->
|
<view class="box_footer">
|
<u-button type="primary" shape="circle" color="#437CB3" text="提交报案" @click="submit"></u-button>
|
</view>
|
<!-- 事故时间 -->
|
<u-datetime-picker :show="show1" v-model="date" mode="datetime" :defaultIndex="[11]" @confirm="confirm" @cancel="show1 = false"></u-datetime-picker>
|
<!-- 事故类型 -->
|
<u-picker :show="show2" keyName="name" :columns="columns" @confirm="confirm1" @cancel="show2 = false"></u-picker>
|
<!-- 省市区 -->
|
<u-picker ref="uPicker" :show="show3" keyName="name" :columns="columns1" @confirm="confirm2" @change="changeHandler" @cancel="show3 = false"></u-picker>
|
<!-- 出险人 -->
|
<u-picker :show="show4" keyName="label" :columns="columns2" @confirm="confirm3" @cancel="show4 = false"></u-picker>
|
<!-- 保险方案 -->
|
<u-picker :show="show5" keyName="solutionName" :columns="columns3" @confirm="confirm4" @cancel="show5 = false"></u-picker>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
id: null,
|
show: false,
|
show1: false,
|
show2: false,
|
show3: false,
|
show4: false,
|
show5: false,
|
date: Number(new Date()),
|
columns: [
|
[
|
{ name: '工作期间受伤', id: 0 },
|
{ name: '上下班途中受伤', id: 1 },
|
{ name: '非工作时间受伤', id: 2 },
|
{ name: '意外受伤', id: 3 }
|
]
|
],
|
columns1: [],
|
columns2: [],
|
columns3: [],
|
area: [],
|
model: {
|
memberId: '',
|
memberName: '',
|
solutionId: '',
|
solutionName: '',
|
informantName: '',
|
informantPhone: '',
|
hospital: '',
|
happenTime: '',
|
type: '',
|
duId: '',
|
duName: '',
|
worktypeId: '',
|
worktypeName: '',
|
typeName: '',
|
inHospital: 0,
|
medicalInsurance: 0,
|
content: '',
|
areaId: '',
|
areaInfo: '',
|
reportFileList: []
|
},
|
rules: {
|
'memberName': {
|
type: 'string',
|
required: true,
|
message: '请选择出险人',
|
trigger: ['change']
|
},
|
'solutionName': {
|
type: 'string',
|
required: true,
|
message: '请选择方案',
|
trigger: ['change']
|
},
|
'informantName': {
|
type: 'string',
|
required: true,
|
message: '请填写报案人',
|
trigger: ['blur']
|
},
|
'informantPhone': {
|
type: 'string',
|
required: true,
|
message: '请填写报案人联系方式',
|
trigger: ['blur']
|
},
|
'happenTime': {
|
type: 'string',
|
required: true,
|
message: '请选择事故时间',
|
trigger: ['change']
|
},
|
'type': {
|
type: 'string',
|
required: true,
|
message: '请选择事故类型',
|
trigger: ['change']
|
},
|
'content': {
|
type: 'string',
|
required: true,
|
message: '请输入事故描述',
|
trigger: ['blur']
|
}
|
},
|
fileList: []
|
};
|
},
|
onLoad(option) {
|
this.id = option.id
|
if (this.id) {
|
this.getDetails()
|
this.getArea()
|
this.getUser()
|
return
|
}
|
this.show = true
|
this.getArea()
|
this.getUser()
|
},
|
methods: {
|
clickItem(item) {
|
this.model.memberName = item.name
|
this.model.memberId = item.id
|
this.columns2 = []
|
},
|
// 搜索
|
changeSearch(name) {
|
this.columns2 = []
|
this.$u.api.memberFindListByDTO({
|
name
|
}).then(res => {
|
if (res.code === 200) {
|
this.columns2 = res.data
|
}
|
})
|
},
|
getDetails() {
|
this.$u.api.settleClaimsById(this.id)
|
.then(res => {
|
if (res.code === 200) {
|
this.model.memberName = res.data.memberName
|
this.model.memberId = res.data.memberId
|
this.model.solutionName = res.data.solutionName
|
this.model.solutionId = res.data.solutionId
|
this.model.worktypeId = res.data.worktypeId
|
this.model.worktypeName = res.data.worktypeName
|
this.model.duId = res.data.duId
|
this.model.duName = res.data.duName
|
this.model.content = res.data.content
|
this.model.reportFileList = res.data.reportFileList
|
|
this.model.informantName = res.data.informantName
|
this.model.informantPhone = res.data.informantPhone
|
this.model.hospital = res.data.hospital
|
this.model.happenTime = res.data.happenTime
|
this.model.type = res.data.type
|
if (res.data.type === 0) {
|
this.model.typeName = '工作期间受伤'
|
} else if (res.data.type === 1) {
|
this.model.typeName = '上下班途中受伤'
|
} else if (res.data.type === 2) {
|
this.model.typeName = '非工作时间受伤'
|
} else if (res.data.type === 3) {
|
this.model.typeName = '意外受伤'
|
}
|
this.model.inHospital = res.data.inHospital
|
this.model.medicalInsurance = res.data.medicalInsurance
|
this.model.areaInfo = res.data.areaInfo
|
this.model.areaId = res.data.areaId
|
}
|
})
|
},
|
// 提交报案
|
submit() {
|
this.$refs.uForm.validate().then(res => {
|
if (this.id) {
|
this.$u.api.settleClaimsUpdateById({ id: this.id, ...this.model })
|
.then(res => {
|
if (res.code === 200) {
|
uni.showToast({ title: '提交成功', icon: 'success' })
|
setTimeout(() => {
|
uni.navigateBack({ delta: 1 });
|
}, 1500)
|
}
|
})
|
} else {
|
this.$u.api.settleClaimsCreate(this.model)
|
.then(res => {
|
if (res.code === 200) {
|
uni.showToast({ title: '提交成功', icon: 'success' })
|
setTimeout(() => {
|
uni.navigateBack({ delta: 1 });
|
}, 1500)
|
}
|
})
|
}
|
}).catch(errors => {
|
|
})
|
},
|
openFA() {
|
if (!this.model.memberId) return uni.showToast({
|
title: '请先选择出险人',
|
icon: 'none'
|
})
|
this.$u.api.memberInsuranceFindList({
|
status: 1,
|
memberId: this.model.memberId
|
}).then(res => {
|
if (res.code === 200) {
|
this.columns3 = [res.data]
|
this.show5 = true
|
}
|
})
|
},
|
getUser() {
|
this.$u.api.memberFindListByDTO()
|
.then(res => {
|
if (res.code === 200) {
|
res.data.forEach(item => {
|
item.label = item.name + ' - '+ item.idcardNo
|
})
|
this.columns2 = [res.data]
|
}
|
})
|
},
|
changeHandler(e) {
|
const {
|
columnIndex,
|
value,
|
values,
|
index,
|
picker = this.$refs.uPicker
|
} = e
|
if (columnIndex === 0) {
|
picker.setColumnValues(1, this.columns1[0][index].childAreasList)
|
picker.setColumnValues(2, this.columns1[0][index].childAreasList[0].childAreasList)
|
}
|
if (columnIndex === 1) {
|
picker.setColumnValues(2, value[columnIndex].childAreasList)
|
}
|
},
|
getArea() {
|
this.$u.api.findTreeList()
|
.then(res => {
|
if (res.code === 200) {
|
this.columns1 = [res.data, res.data[0].childAreasList, res.data[0].childAreasList[0].childAreasList]
|
this.area = res.data
|
}
|
})
|
},
|
upload() {
|
var that = this
|
uni.chooseMedia({
|
count: 9,
|
mediaType: ['image','video'],
|
sourceType: ['album', 'camera'],
|
camera: 'back',
|
success(res) {
|
uni.showLoading({
|
title: '上传中',
|
mask: true
|
});
|
for (let i = 0; i < res.tempFiles.length; i++) {
|
uni.uploadFile({
|
url: `${that.$baseUrl}public/upload`,
|
filePath: res.tempFiles[i].tempFilePath,
|
name: 'file',
|
header: {
|
'doumee-auth-token': that.$store.state.cookies
|
},
|
formData: {
|
folder: 'settle'
|
},
|
success: (uploadFileRes) => {
|
let res = JSON.parse(uploadFileRes.data)
|
console.log(res)
|
that.fileList.push({ ...res.data })
|
that.model.reportFileList.push({
|
fileurl: res.data.imgaddr,
|
name: res.data.originname,
|
type: res.data.type,
|
url: res.data.url
|
})
|
},
|
complete() {
|
if (i === res.tempFiles.length - 1) {
|
uni.hideLoading();
|
}
|
}
|
});
|
}
|
}
|
})
|
},
|
afterRead(e) {
|
uni.showLoading({
|
title: '上传中',
|
mask: true
|
});
|
for (let i = 0; i < e.file.length; i++) {
|
uni.uploadFile({
|
url: `${this.$baseUrl}public/upload`,
|
filePath: e.file[i].url,
|
name: 'file',
|
header: {
|
'doumee-auth-token': this.$store.state.cookies
|
},
|
formData: {
|
folder: 'settle'
|
},
|
success: (uploadFileRes) => {
|
let res = JSON.parse(uploadFileRes.data)
|
this.model.reportFileList.push({
|
fileurl: res.data.imgaddr,
|
name: res.data.originname,
|
type: res.data.type
|
})
|
},
|
complete() {
|
if (i === e.file.length - 1) {
|
uni.hideLoading();
|
}
|
}
|
});
|
}
|
},
|
deletePic(index) {
|
this.model.reportFileList.splice(index, 1)
|
},
|
getTreeName(list, id){
|
let _this = this
|
for (let i = 0; i < list.length; i++) {
|
let a = list[i]
|
if (a.id === id) {
|
return a.name
|
} else {
|
if (a.childAreasList && a.childAreasList.length > 0) {
|
let res = _this.getTreeName(a.childAreasList, id)
|
if (res) {
|
return res
|
}
|
}
|
}
|
}
|
},
|
confirm4(e) {
|
this.model.solutionId = e.value[0].solutionId
|
this.model.solutionName = e.value[0].solutionName
|
this.model.duId = e.value[0].duId
|
this.model.duName = e.value[0].duName
|
this.model.worktypeId = e.value[0].worktypeId
|
this.model.worktypeName = e.value[0].worktypeName
|
this.show5 = false
|
},
|
confirm3(e) {
|
this.model.memberId = e.value[0].id
|
this.model.memberName = e.value[0].label
|
this.model.solutionId = ''
|
this.model.solutionName = ''
|
this.model.duId = ''
|
this.model.duName = ''
|
this.model.worktypeId = ''
|
this.model.worktypeName = ''
|
this.show4 = false
|
},
|
confirm2(e) {
|
let info = ''
|
e.value.forEach(item => {
|
info += this.getTreeName(this.area, item.id)
|
})
|
this.model.areaId = e.value.map(item => item.id).join(',')
|
this.model.areaInfo = info
|
this.show3 = false
|
},
|
confirm1(e) {
|
this.model.type = e.value[0].id
|
this.model.typeName = e.value[0].name
|
this.show2 = false
|
},
|
confirm(e) {
|
this.model.happenTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
|
this.show1 = false
|
}
|
}
|
}
|
</script>
|
<style>
|
page {
|
background-color: #f7f7f7;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
padding: 20rpx 30rpx;
|
box-sizing: border-box;
|
.box_footer {
|
width: 100%;
|
height: 88rpx;
|
margin-top: 40rpx;
|
}
|
.box_list {
|
width: 100%;
|
padding: 30rpx;
|
border-radius: 16rpx;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
margin-bottom: 20rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.box_list_Label {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #222222;
|
font-style: normal;
|
}
|
.box_list_from /deep/ {
|
width: 100%;
|
margin-top: 30rpx;
|
.u-textarea {
|
padding: 9px 0 !important;
|
}
|
.box_list_data {
|
width: 100%;
|
max-height: 400rpx;
|
margin-top: 10rpx;
|
.box_list_data_item {
|
width: 100%;
|
height: 80rpx;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
line-height: 80rpx;
|
border-bottom: 1px solid #dfdfdf;
|
&:last-child {
|
border: none;
|
}
|
}
|
}
|
.meade {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
flex-wrap: wrap;
|
.meade_zw {
|
width: 140rpx;
|
height: 0;
|
}
|
.meade_content {
|
width: 140rpx;
|
height: 140rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
position: relative;
|
.video {
|
width: 100%;
|
}
|
.dele {
|
width: 50rpx;
|
height: 50rpx;
|
position: absolute;
|
top: 0;
|
right: 0;
|
z-index: 9;
|
}
|
.image {
|
width: 100%;
|
}
|
}
|
.meade_upload {
|
width: 140rpx;
|
height: 140rpx;
|
background: #FFFFFF;
|
border-radius: 8rpx;
|
border: 1rpx solid #E5E5E5;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
text {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #666666;
|
font-style: normal;
|
margin-top: 5rpx;
|
}
|
}
|
}
|
.list {
|
width: 100%;
|
display: flex;
|
align-content: center;
|
margin-top: 24rpx;
|
.active {
|
background: #437CB3 !important;
|
color: #FFFFFF !important;
|
}
|
.list_item {
|
width: 92rpx;
|
height: 64rpx;
|
line-height: 64rpx;
|
text-align: center;
|
background: #F7F7F7;
|
border-radius: 4rpx;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
font-style: normal;
|
margin-right: 20rpx;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
