<template>
|
<GlobalWindow
|
:title="title"
|
width="100%"
|
text="投保申请"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<div class="list">
|
<el-form :inline="true" ref="form" :model="form" :rules="rules" class="demo-form-inline">
|
<el-form-item label="保险方案" prop="solutionId">
|
<el-select v-model="form.solutionId" filterable @change="changeSolution" placeholder="请选择">
|
<el-option
|
v-for="item in company"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="期望保险生效起期" prop="applyStartTime">
|
<div style="display: flex; flex-direction: column;">
|
<el-date-picker
|
@change="getTimeVal"
|
v-model="form.applyStartTime"
|
type="date"
|
class="date_picker"
|
:clearable="false"
|
:disabled="!form.solutionId"
|
:picker-options="pickerOptions"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择日期">
|
</el-date-picker>
|
<span style="color: #F95601; font-size: 14px;">（次日生效投保请于17:30前提交，超时提交以保险单为准）</span>
|
</div>
|
</el-form-item>
|
<el-form-item label="保险生效止期" prop="applyEndTime">
|
<el-date-picker
|
disabled
|
v-model="form.applyEndTime"
|
type="date"
|
class="date_picker"
|
:picker-options="pickerOptions"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择日期">
|
</el-date-picker>
|
</el-form-item>
|
<!-- <el-form-item label="投保年龄" v-if="item && item.id !=null">
|
<span>{{item.minAge}} 至 {{item.maxAge}}</span>
|
</el-form-item>
|
<el-form-item label="费用" v-if="item && item.id !=null">
|
<span>{{item.price}}元</span>
|
<span v-if="item.timeUnit === 0">/天</span>
|
<span v-if="item.timeUnit === 1">/半月</span>
|
<span v-if="item.timeUnit === 2">/月</span>
|
<span v-if="item.timeUnit === 3">/年</span>
|
<span>/人</span>
|
</el-form-item>-->
|
</el-form>
|
</div>
|
<div class="btns">
|
<div class="btns_item">
|
<el-button type="primary" @click="seleUser">选取员工</el-button>
|
<el-button type="primary" @click="uploadUser">导入员工</el-button>
|
<el-button type="primary" @click="addUser">添加员工</el-button>
|
<el-button type="danger" @click="deleItem">删除</el-button>
|
</div>
|
<div class="btns_item">
|
<div style="display: inline-block;margin-right: 30px;font-size: 14px" v-if="item && item.id !=null">
|
<span>投保年龄：</span>
|
<span>{{item.minAge}} 至 {{item.maxAge}}周岁</span>
|
<span style="margin-left: 20px">费用：</span>
|
<span>{{item.price}}元</span>
|
<span v-if="item.timeUnit === 0">/天</span>
|
<span v-if="item.timeUnit === 1">/半月</span>
|
<span v-if="item.timeUnit === 2">/月</span>
|
<span v-if="item.timeUnit === 3">/年</span>
|
<span>/人</span>
|
</div>
|
<div style="display: inline-block;margin-right: 30px;font-size: 14px"><span>合计费用：</span>
|
<span style="font-weight: bold;color: red">{{sumFee}}</span>元
|
</div>
|
<el-button type="primary" @click="sele(1)" v-if="item && item.hasDispatchUnit !== 1">选取派遣单位</el-button>
|
<el-button type="primary" @click="sele(2)" v-if="item && item.hasDispatchUnit === 1">选取工种</el-button>
|
</div>
|
</div>
|
<!-- show-summary
|
:summary-method="getSummaries"-->
|
<u-table
|
:data="tableData"
|
border
|
use-virtual
|
:row-height="30"
|
:height="680"
|
ref="multipleTable"
|
@selection-change="handleSelectionChange"
|
style="width: 100%;margin-bottom: 15px;">
|
<u-table-column
|
type="selection"
|
width="55">
|
</u-table-column>
|
<u-table-column label="序号" width="80px">
|
<template slot-scope="scope">
|
<span>{{scope.$index + 1}}</span>
|
</template>
|
</u-table-column>
|
<u-table-column
|
prop="memberName"
|
label="姓名">
|
</u-table-column>
|
<u-table-column
|
prop="idCard"
|
label="身份证号">
|
</u-table-column>
|
<u-table-column
|
label="年龄">
|
<template slot-scope="{row}">
|
<template v-if="item">
|
<span style="color: red;" v-if="row.idCard && (getAgeByIdCard(row.idCard) < item.minAge || getAgeByIdCard(row.idCard) > item.maxAge)">{{ getAgeByIdCard(row.idCard) }}</span>
|
<span v-else>{{ getAgeByIdCard(row.idCard) }}</span>
|
</template>
|
</template>
|
</u-table-column>
|
<u-table-column
|
v-if="item && item.hasDispatchUnit !== 1"
|
prop="duName"
|
label="派遣单位">
|
</u-table-column>
|
<u-table-column
|
prop="workTypeName"
|
label="所属工种">
|
</u-table-column>
|
<u-table-column
|
prop="fee"
|
label="费用">
|
<template slot-scope="{row}">
|
{{row.fee}}
|
</template>
|
</u-table-column>
|
<u-table-column
|
prop="remark"
|
align="center"
|
label="备注">
|
<template slot-scope="{row}">
|
<el-input v-model="row.remark" placeholder="请输入"></el-input>
|
</template>
|
</u-table-column>
|
<u-table-column
|
label="操作">
|
<template slot-scope="scope">
|
<el-button type="text" style="color: red;" @click="dele(scope.$index)">删除</el-button>
|
</template>
|
</u-table-column>
|
</u-table>
|
<div class="info" v-if="item">
|
<span v-if="item.specialAgreement" v-html="item.specialAgreement"></span>
|
<span v-if="item.specialInfo" v-html="item.specialInfo"> </span>
|
<span v-if="item.ortherInfo" v-html="item.ortherInfo"></span>
|
</div>
|
<!-- 选择员工 -->
|
<selectEmployees ref="selectEmployees" @result="getValue" />
|
<!-- 添加员工 -->
|
<addEmployee ref="addEmployee" @result="getValue" />
|
<!-- 导入名单 -->
|
<importEmployees ref="importEmployees" @result="getValue" />
|
<!-- 确认工种 -->
|
<confirmJobType ref="confirmJobType" @result="getUser" />
|
<!-- 查看详单 -->
|
<detailsPolicyholder ref="detailsPolicyholder" @success="successEvent" />
|
<!-- <!– 直保投保详情 –>
|
<OperaInsuranceApplyDetails ref="OperaInsuranceApplyDetails" />
|
<!– 委托投保详情 –>
|
<OperaWtbApplyShopWindow ref="OperaWtbApplyShopWindow" />-->
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import selectEmployees from '@/components/enterprise/selectEmployees'
|
import addEmployee from '@/components/enterprise/addEmployeeWithDu'
|
import importEmployees from '@/components/enterprise/importEmployees'
|
import confirmJobType from '@/components/enterprise/confirmJobType'
|
import detailsPolicyholder from '@/components/business/detailsPolicyholder'
|
import { all, getNewVersion, getUseList } from '@/api/business/solutions'
|
import { mapState } from 'vuex'
|
import { create, getCountCyclePriceVO, getDetail, findList } from '@/api/business/insuranceApply'
|
import { UTable, UTableColumn } from 'umy-ui'
|
export default {
|
name: 'OperaInsuranceApplyAddWindowNew',
|
extends: BaseOpera,
|
components: {
|
GlobalWindow,
|
selectEmployees,
|
addEmployee,
|
importEmployees,
|
confirmJobType,
|
detailsPolicyholder,
|
UTable,
|
UTableColumn
|
},
|
data () {
|
return {
|
sumFee: 0,
|
form: {
|
id: null,
|
ID: null,
|
solutionId: '',
|
applyStartTime: '',
|
applyEndTime: '',
|
companyId: null
|
},
|
solutionName: '',
|
type: '',
|
pickerOptions: {}, // 存放picker options的变量
|
price: '',
|
company: [],
|
seleData: [],
|
item: null,
|
// 验证规则
|
rules: {
|
solutionId: [
|
{ required: true, message: '请选择保险方案' }
|
],
|
applyStartTime: [
|
{ required: true, message: '请选择期望保险生效起期' }
|
]
|
},
|
tableData: []
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/insuranceApply',
|
'field.id': 'id'
|
})
|
},
|
computed: {
|
...mapState(['userInfo'])
|
},
|
watch: {
|
// 监听tableData的变化
|
tableData: {
|
deep: true,
|
handler (newVal, oldVal) {
|
// 数据变化时的处理逻辑
|
this.getSummaries2()
|
console.log(this.tableData.length)
|
}
|
}
|
},
|
methods: {
|
successEvent () {
|
const arr = JSON.parse(JSON.stringify(this.tableData))
|
arr.forEach(item => {
|
item.idcardNo = item.idCard
|
})
|
this.isWorking = true
|
// if (!this.form.id) {
|
create({
|
companyId: this.form.companyId,
|
applyDetailList: arr,
|
applyStartTime: this.form.applyStartTime,
|
applyEndTime: this.form.applyEndTime,
|
solutionId: this.form.solutionId
|
}).then(res => {
|
console.log(res)
|
this.$emit('success', 1, { id: res,godetail:true,type:this.item.type})
|
this.$tip.apiSuccess('操作成功')
|
this.visible = false
|
// this.$emit('success','委托投保详情', { id: res })
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking = false
|
})
|
// } else {
|
// updateData({
|
// id: this.form.id,
|
// applyDetailList: arr,
|
// applyStartTime: this.form.applyStartTime,
|
// applyEndTime: this.form.applyEndTime,
|
// solutionId: this.form.solutionId
|
// }).then(() => {
|
// this.visible = false
|
// this.$tip.apiSuccess('操作成功')
|
// this.$emit('success')
|
// }).catch(e => {
|
// this.$tip.apiFailed(e)
|
// })
|
// .finally(() => {
|
// this.isWorking = false
|
// })
|
// }
|
},
|
open (title, target) {
|
this.title = title
|
this.tableData = []
|
this.form.id = null
|
this.item = {}
|
if (target.type) {
|
this.type = target.type
|
}
|
this.form.solutionId = ''
|
this.form.applyStartTime = ''
|
this.form.applyEndTime = ''
|
if (target.companyId) {
|
this.form.companyId = target.companyId
|
this.form.companyName = target.companyName
|
}
|
if (target && target.id) {
|
this.$nextTick(() => {
|
this.$refs.form.resetFields()
|
this.form.id = target.id
|
this.getDetails()
|
})
|
} else {
|
this.$nextTick(() => {
|
this.$refs.form.resetFields()
|
this.form[this.configData['field.id']] = null
|
})
|
}
|
this.getCompany()
|
this.visible = true
|
this.updatePickerOptions()
|
},
|
// 获取投保详情
|
getDetails () {
|
findList({ applyId: this.form.id })
|
.then(res => {
|
res.forEach(item => {
|
console.log(item)
|
item.idCard = item.idcardNo
|
item.fee = ''
|
if (this.type === 1) {
|
// item.duName = ''
|
// item.duId = ''
|
// item.worktypeId = ''
|
// item.workTypeName = ''
|
}
|
})
|
this.tableData = res
|
})
|
getDetail(this.form.id)
|
.then(res => {
|
// this.form.solutionId = res.solutionId
|
this.changeSolution1(res.solutionId)
|
})
|
},
|
getSummaries ({ columns, data }) {
|
const sums = []
|
// this.currentData = data; //记录当前页数据;
|
columns.forEach((column, index) => {
|
if (index == 0) {
|
sums[index] = '总价'
|
} else if (index == 7) {
|
// if (this.item || this.item.type == 1) {
|
// sums[index] = '-'
|
// } else {
|
let total = 0
|
this.tableData.forEach(item => {
|
total += item.fee
|
})
|
sums[index] = total.toFixed(2)
|
// }
|
} else {
|
sums[index] = ''
|
}
|
})
|
console.log(sums)
|
return sums
|
},
|
getSummaries2 () {
|
this.sumFee = 0
|
if (this.tableData && this.tableData.length) {
|
this.tableData.forEach((column, index) => {
|
this.sumFee = parseFloat(this.sumFee) + parseFloat(column.fee)
|
})
|
this.sumFee = (this.sumFee || 0).toFixed(2)
|
}
|
},
|
deleItem () {
|
if (this.seleData.length === 0) {
|
this.$message.warning('至少选择一项内容')
|
return
|
}
|
this.seleData.forEach(item => {
|
this.tableData.forEach((row, index) => {
|
if (item === row.idCard) {
|
this.tableData.splice(index, 1)
|
}
|
})
|
})
|
// this.getSummaries2()
|
},
|
confirm () {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
if (this.tableData.length === 0) {
|
this.$message.warning('至少添加一项员工')
|
return
|
}
|
if (this.item.hasDispatchUnit !== 1) {
|
for (let i = 0; i < this.tableData.length; i++) {
|
if (!this.tableData[i].worktypeId || !this.tableData[i].duId) {
|
this.$message.warning('请完善派遣单位和工种信息')
|
return
|
}
|
}
|
} else {
|
for (let i = 0; i < this.tableData.length; i++) {
|
if (!this.tableData[i].worktypeId) {
|
this.$message.warning('请完善派工种信息')
|
return
|
}
|
}
|
}
|
let price = 0
|
// if (this.item && this.item.type != 1) {
|
this.tableData.forEach(item => {
|
price = price + item.fee
|
})
|
// }
|
const endTime = Number(this.item.correctWarnTime.split(':')[0] + this.item.correctWarnTime.split(':')[1])
|
const now = new Date();
|
const hours = now.getHours();
|
const minutes = now.getMinutes();
|
const date = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
|
const startTime = Number(date.split(':')[0] + date.split(':')[1])
|
if (startTime > endTime) {
|
this.$confirm('您已超过当天最晚批改时间，保单实际生效时间以保险公司审核为准！', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
if (!this.form.companyId) {
|
this.$refs.detailsPolicyholder.open('投保详情单', {
|
companyName: this.userInfo.company.name,
|
solutionName: this.item.name,
|
solutionType: this.item.type,
|
applyStartTime: this.form.applyStartTime,
|
applyEndTime: this.form.applyEndTime,
|
insureNum: this.tableData.length,
|
totalPrice: price,
|
detailList: this.tableData
|
})
|
} else {
|
this.$refs.detailsPolicyholder.open('投保详情单', {
|
companyName: this.form.companyName,
|
solutionName: this.item.name,
|
solutionType: this.item.type,
|
applyStartTime: this.form.applyStartTime,
|
applyEndTime: this.form.applyEndTime,
|
insureNum: this.tableData.length,
|
totalPrice: price,
|
detailList: this.tableData
|
})
|
}
|
}).catch(() => {
|
|
});
|
} else {
|
if (!this.form.companyId) {
|
this.$refs.detailsPolicyholder.open('投保详情单', {
|
companyName: this.userInfo.company.name,
|
solutionName: this.item.name,
|
solutionType: this.item.type,
|
applyStartTime: this.form.applyStartTime,
|
applyEndTime: this.form.applyEndTime,
|
insureNum: this.tableData.length,
|
totalPrice: price,
|
detailList: this.tableData
|
})
|
} else {
|
this.$refs.detailsPolicyholder.open('投保详情单', {
|
companyName: this.form.companyName,
|
solutionName: this.item.name,
|
solutionType: this.item.type,
|
applyStartTime: this.form.applyStartTime,
|
applyEndTime: this.form.applyEndTime,
|
insureNum: this.tableData.length,
|
totalPrice: price,
|
detailList: this.tableData
|
})
|
}
|
}
|
}
|
})
|
},
|
// 获取结束时间和价格
|
getTimeVal (time) {
|
getCountCyclePriceVO({
|
solutionsId: this.form.solutionId,
|
startDate: time
|
}).then(res => {
|
this.price = res.cyclePrice
|
this.form.applyEndTime = res.endDate
|
this.tableData.forEach(item => {
|
item.fee = res.cyclePrice
|
})
|
this.$forceUpdate()
|
})
|
},
|
getDate (n) { // n为多少天，-代表往前，+代表往后
|
const date1 = new Date()
|
const time1 = date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate()// time1表示当前时间
|
const date2 = new Date(date1)
|
date2.setDate(date1.getDate() + n)
|
const time2 = date2.getFullYear() + '-' + ('0' + (date2.getMonth() + 1)).slice(-2) + '-' + ('0' + date2.getDate()).slice(-2)
|
return time2
|
},
|
updatePickerOptions () {
|
var that = this
|
this.pickerOptions = {
|
disabledDate (time) {
|
if (!that.item) return
|
if (that.item.validType === 1) {
|
// 次月
|
const currentDate = new Date()
|
currentDate.setMonth(currentDate.getMonth() + 1)
|
currentDate.setDate(1)
|
return time.getTime() <= new Date(currentDate.toLocaleString()).getTime() - 8.64e7
|
} else if (that.item.validType === 0) {
|
// 多少日后生效
|
return time.getTime() <= new Date(that.getDate(that.item.validTypeNum - 1)).getTime()
|
}
|
}
|
}
|
},
|
seleUser () {
|
if (!this.form.solutionId) {
|
this.$message.warning('请先选择保险方案')
|
return
|
}
|
this.$refs.selectEmployees.open('选取员工', { arr: this.tableData, price: this.price, type: 1, companyId: this.form.companyId })
|
},
|
addUser () {
|
if (!this.form.solutionId) {
|
this.$message.warning('请先选择保险方案')
|
return
|
}
|
this.$refs.addEmployee.open('添加员工', { arr: this.tableData, price: this.price, solutionId: this.form.solutionId, hasDispatchUnit: this.item.hasDispatchUnit, companyId: this.userInfo.type === 1 ? this.userInfo.companyId : this.form.companyId })
|
},
|
uploadUser () {
|
if (!this.form.solutionId) {
|
this.$message.warning('请先选择保险方案')
|
return
|
}
|
this.$refs.importEmployees.open('上传名单', { arr: this.tableData, solutionId: this.form.solutionId, type: 1, hasDispatchUnit: this.item.hasDispatchUnit, price: this.price })
|
},
|
// 切换方案
|
changeSolution (e) {
|
this.sumFee = 0
|
this.form.applyEndTime = ''
|
this.form.applyStartTime = ''
|
if (!this.form.id) {
|
this.tableData = []
|
} else {
|
this.price = 0
|
this.tableData.forEach(item => {
|
item.fee = 0
|
item.duName = ''
|
item.duId = ''
|
item.workTypeName = ''
|
item.workTypeId = ''
|
})
|
}
|
this.company.forEach(item => {
|
if (item.id === e) {
|
this.price = item.price
|
this.item = item
|
// if (this.item && this.item.type == 1) {
|
// this.item.fee = 0
|
// }
|
this.updatePickerOptions()
|
}
|
})
|
this.tableData.forEach(item => {
|
item.fee = this.price
|
})
|
},
|
// 切换方案
|
changeSolution1 (e) {
|
getNewVersion(e)
|
.then(res => {
|
this.form.solutionId = res.id
|
this.company.forEach(item => {
|
if (item.id === res.id) {
|
this.price = item.price
|
this.item = item
|
this.updatePickerOptions()
|
}
|
})
|
})
|
this.tableData.forEach(item => {
|
// if (this.item.type != 0) {
|
item.fee = this.price
|
// }
|
})
|
},
|
dele (index) {
|
this.tableData.splice(index, 1)
|
// this.getSummaries2()
|
},
|
getUser (obj) {
|
this.seleData.forEach(id => {
|
this.tableData.forEach(row => {
|
if (id === row.idCard) {
|
row.workTypeName = obj.workTypeName
|
row.worktypeId = obj.worktypeId
|
row.duName = obj.duName
|
row.duId = obj.duId
|
}
|
})
|
})
|
this.seleData = []
|
this.$refs.multipleTable.clearSelection()
|
},
|
// 选择员工
|
sele (type) {
|
if (!this.form.solutionId) {
|
this.$message.warning('请选择保险方案')
|
return
|
}
|
if (this.seleData.length === 0) {
|
this.$message.warning('请选择员工')
|
return
|
}
|
this.$refs.confirmJobType.open('确认工种', { solutionId: this.form.solutionId, type })
|
},
|
// 查询全部方案
|
getCompany () {
|
getUseList(this.form.companyId ? this.form.companyId : this.userInfo.companyId, 2)
|
.then(res => {
|
this.company = res
|
})
|
// all({ companyId: this.form.companyId })
|
// .then(res => {
|
// this.company = res
|
// })
|
},
|
getAgeByIdCard (idCard) {
|
const sexAndAge = {}
|
// 获取用户身份证号码
|
const userCard = idCard
|
// 如果用户身份证号码为undefined则返回空
|
if (!userCard) {
|
return sexAndAge
|
}
|
// 获取出生日期
|
const yearBirth = userCard.substring(6, 10)
|
const monthBirth = userCard.substring(10, 12)
|
const dayBirth = userCard.substring(12, 14)
|
// 获取当前年月日并计算年龄
|
const myDate = new Date()
|
const monthNow = myDate.getMonth() + 1
|
const dayNow = myDate.getDate()
|
let age = myDate.getFullYear() - yearBirth
|
if (monthNow < monthBirth || (monthNow == monthBirth && dayNow < dayBirth)) {
|
age--
|
}
|
// 得到年龄
|
sexAndAge.age = age
|
return sexAndAge.age
|
},
|
handleSelectionChange (e) {
|
this.seleData = e.map(item => item.idCard)
|
},
|
getValue (list) {
|
this.tableData.push(...list)
|
this.getSummaries2()
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.el-picker-panel__footer .el-button--text.el-picker-panel__link-btn {
|
display: none;
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.list {
|
width: 100%;
|
}
|
.btns {
|
width: 100%;
|
margin-bottom: 15px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.btns_item {
|
display: flex;
|
align-items: center;
|
}
|
}
|
.submit {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 15px;
|
}
|
.info {
|
width: 100%;
|
font-size: 14px;
|
color: black;
|
span{
|
display: block;
|
}
|
}
|
</style>
|
