<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" @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">
|
<span>{{item.minAge}} 至 {{item.maxAge}}</span>
|
</el-form-item>
|
<el-form-item label="费用" v-if="item">
|
<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">
|
<el-button type="primary" @click="sele">选取派遣单位</el-button>
|
</div>
|
</div>
|
<el-table
|
:data="tableData"
|
border
|
show-summary
|
:summary-method="getSummaries"
|
ref="multipleTable"
|
@selection-change="handleSelectionChange"
|
style="width: 100%;margin-bottom: 15px;">
|
<el-table-column
|
type="selection"
|
width="55">
|
</el-table-column>
|
<el-table-column label="序号" width="80px">
|
<template slot-scope="scope">
|
<span>{{scope.$index + 1}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="memberName"
|
label="姓名">
|
</el-table-column>
|
<el-table-column
|
prop="idCard"
|
label="身份证号">
|
</el-table-column>
|
<el-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>
|
</el-table-column>
|
<el-table-column
|
prop="duName"
|
label="派遣单位">
|
</el-table-column>
|
<el-table-column
|
prop="workTypeName"
|
label="所属工种">
|
</el-table-column>
|
<el-table-column
|
prop="fee"
|
label="费用">
|
</el-table-column>
|
<el-table-column
|
label="操作">
|
<template slot-scope="scope">
|
<el-button type="text" style="color: red;" @click="dele(scope.$index)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="info" v-if="item">
|
<span v-if="item.specialAgreement">{{item.specialAgreement}}</span>
|
<span v-if="item.specialInfo">{{item.specialInfo}}</span>
|
<span v-if="item.ortherInfo">{{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" />
|
</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/addEmployee'
|
import importEmployees from '@/components/enterprise/importEmployees'
|
import confirmJobType from '@/components/enterprise/confirmJobType'
|
import detailsPolicyholder from '@/components/business/detailsPolicyholder'
|
import { all, getNewVersion } from '@/api/business/solutions'
|
import { mapState } from 'vuex'
|
import { create, getCountCyclePriceVO, getDetail, findList, updateData } from '@/api/business/insuranceApply'
|
export default {
|
name: 'OperaInsuranceApplyWindow2',
|
extends: BaseOpera,
|
components: { GlobalWindow, selectEmployees, addEmployee, importEmployees, confirmJobType, detailsPolicyholder },
|
data () {
|
return {
|
form: {
|
id: null,
|
ID: null,
|
solutionId: '',
|
applyStartTime: '',
|
applyEndTime: ''
|
},
|
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'])
|
},
|
methods: {
|
successEvent() {
|
let arr = JSON.parse(JSON.stringify(this.tableData))
|
arr.forEach(item => {
|
item.idcardNo = item.idCard
|
})
|
this.isWorking = true
|
// if (!this.form.id) {
|
create({
|
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
|
})
|
// } 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 = null
|
if (target.type) {
|
this.type = target.type
|
}
|
this.form.solutionId = ''
|
this.form.applyStartTime = ''
|
this.form.applyEndTime = ''
|
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(param) {
|
const { columns, data } = param
|
const sums = []
|
columns.forEach((column, index) => {
|
if (index === 0) {
|
sums[index] = '总价'
|
return
|
} else if (index === 7) {
|
let total = 0
|
this.tableData.forEach(item => {
|
total += item.fee
|
})
|
sums[index] = total
|
return
|
}
|
})
|
return sums
|
},
|
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)
|
}
|
})
|
})
|
},
|
confirm() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
if (this.tableData.length === 0) {
|
this.$message.warning('至少添加一项员工')
|
return
|
}
|
for (let i = 0; i < this.tableData.length; i++) {
|
console.log(this.tableData[i].worktypeId)
|
console.log(this.tableData[i].duId)
|
if (!this.tableData[i].worktypeId || !this.tableData[i].duId) {
|
this.$message.warning('请完善派遣单位和工种信息')
|
return
|
}
|
}
|
|
let price = 0
|
this.tableData.forEach(item => {
|
price = price + item.fee
|
})
|
this.$refs.detailsPolicyholder.open('投保详情单', {
|
companyName: this.userInfo.company.name,
|
solutionName: this.item.name,
|
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为多少天，-代表往前，+代表往后
|
let date1 = new Date(),
|
time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();//time1表示当前时间
|
let date2 = new Date(date1);
|
date2.setDate(date1.getDate() + n);
|
let 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 })
|
},
|
addUser() {
|
if (!this.form.solutionId) {
|
this.$message.warning('请先选择保险方案')
|
return
|
}
|
this.$refs.addEmployee.open('添加员工', { arr: this.tableData, price: this.price })
|
},
|
uploadUser() {
|
if (!this.form.solutionId) {
|
this.$message.warning('请先选择保险方案')
|
return
|
}
|
this.$refs.importEmployees.open('上传名单', { arr: this.tableData, solutionId: this.form.solutionId, type: 1, price: this.price })
|
},
|
// 切换方案
|
changeSolution(e) {
|
if (!this.form.id) {
|
this.tableData = []
|
} else {
|
this.price = ''
|
this.form.applyEndTime = ''
|
this.form.applyStartTime = ''
|
this.tableData.forEach(item => {
|
item.fee = ''
|
item.duName = ''
|
item.duId = ''
|
item.workTypeName = ''
|
item.workTypeId = ''
|
})
|
}
|
this.company.forEach(item => {
|
if (item.id === e) {
|
// this.price = item.price
|
this.item = item
|
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 => {
|
item.fee = this.price
|
})
|
},
|
dele(index) {
|
this.tableData.splice(index, 1)
|
},
|
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() {
|
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 })
|
},
|
// 查询全部方案
|
getCompany() {
|
all({})
|
.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)
|
}
|
}
|
}
|
</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;
|
}
|
</style>
|
