<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="unionApplyId" >
|
<div style=" display: flex; flex-direction: column;">
|
<el-button type="primary" size="small" @click="selectBaoxiandan"> 选择保险单</el-button>
|
<span style="color: #F95601; font-size: 14px;">（1. 请选择保险单后进行操作）</span>
|
</div>
|
</el-form-item>
|
<el-form-item label="批单生效起期：" prop="applyDate" style="margin-left: 40px">
|
<div style="display: flex; flex-direction: column;">
|
<el-date-picker
|
v-model="form.applyDate"
|
placeholder="请选择日期"
|
:picker-options="pickerOptions"
|
type="date"
|
format="yyyy-MM-dd"
|
value-format="yyyy-MM-dd" />
|
<span style="color: #F95601; font-size: 14px;">（2. 次日生效投保请于17:30前提交，超时提交以保险单为准）</span>
|
</div>
|
</el-form-item>
|
<el-form-item label="费用" v-if="model">
|
<span>{{model.price}}元</span>
|
<span v-if="model.timeUnit === 0">/天</span>
|
<span v-if="model.timeUnit === 1">/半月</span>
|
<span v-if="model.timeUnit === 2">/月</span>
|
<span v-if="model.timeUnit === 3">/年</span>
|
<span>/人</span>
|
</el-form-item>
|
<el-form-item label="投保年龄" v-if="item">
|
<span>{{model.minAge}} 至 {{model.maxAge}}</span>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div style="display: block;margin:0 0 30px 30px " v-if="model">
|
<div style="display: inline-block;width: 300px">保险方案：{{model.solutionName}}</div>
|
<div style="display: inline-block">保单号：{{model.code}}</div>
|
</div>
|
<el-table
|
:data="list"
|
border
|
ref="multipleTable"
|
@row-click="rowselect"
|
@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="companyName"
|
label="被保险人">
|
</el-table-column>
|
<el-table-column
|
prop="validCode"
|
label="保单号">
|
</el-table-column>
|
<el-table-column
|
prop="startTime"
|
label="保险生效起期">
|
</el-table-column>
|
<el-table-column
|
prop="endTime"
|
label="保险生效止期">
|
</el-table-column>
|
<el-table-column
|
prop="changeNum"
|
label="换厂人数">
|
</el-table-column>
|
<el-table-column label="操作">
|
<template slot-scope="{row}">
|
<el-button type="text" @click="checkDetial(row)">查看名单</el-button>
|
<!-- <el-button type="text" style="color: #ff0000;">删除</el-button>-->
|
</template>
|
</el-table-column>
|
</el-table>
|
<div style="color: #F95601; font-size: 14px;width: 100%;text-align: left">（3. 请先选择至少一条申请后提交投保申请）</div>
|
<div class="info" v-if="model">
|
<span v-if="model.specialAgreement" v-html="model.specialAgreement"></span>
|
<span v-if="model.specialInfo" v-html="model.specialInfo"> </span>
|
<span v-if="model.ortherInfo" v-html="model.ortherInfo"> </span>
|
</div>
|
<!-- 选择申请单 -->
|
<ApplyChangeDetails ref="ApplyChangeDetails" @success="getValue" />
|
<el-dialog
|
title="选择保险单"
|
:visible.sync="visibleSelect"
|
width="80%"
|
:modal="true"
|
:show-close="false"
|
append-to-body
|
center>
|
<div class="desc_item_from">
|
<el-table
|
ref="multipleTable1"
|
v-loading="isWorking.search"
|
:data="tableData.list"
|
@row-click="rowselect1"
|
row-key="id"
|
@selection-change="handleSelectionChange1"
|
stripe
|
>
|
<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="statusInfo" label="状态" min-width="100px">
|
<template slot-scope="{row}">
|
<span :class="'union-apply-status'+row.status" >{{ row.statusInfo}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="code" label="保单号" min-width="100px"></el-table-column>
|
<el-table-column prop="solutionName" label="保险方案" min-width="100px"></el-table-column>
|
<el-table-column prop="insureNum" label="投保人数" min-width="100px"></el-table-column>
|
<el-table-column prop="guaranteeNum" label="在保人数" min-width="100px"></el-table-column>
|
<el-table-column prop="changeApplyNum" label="申请单数" min-width="100px"></el-table-column>
|
<el-table-column prop="fee" label="总费用（元）" min-width="100px"></el-table-column>
|
<el-table-column prop="createDate" label="提交时间" min-width="100px"></el-table-column>
|
</el-table>
|
<div class="desc_item_from_page">
|
<el-pagination
|
@current-change="handleCurrentChange"
|
:current-page="currentPage"
|
:page-size="10"
|
layout="total, prev, pager, next, jumper"
|
:total="tableTotal">
|
</el-pagination>
|
</div>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="selectDo()">确 定</el-button>
|
<el-button @click="model=null;visibleSelect=false">取 消</el-button>
|
</span>
|
</el-dialog>
|
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import selectApplicationForm from '@/components/business/selectApplicationForm'
|
import { listAll } from '@/api/business/applyChange'
|
import { merge } from '@/api/business/unionChange'
|
import ApplyChangeDetails from '@/components/business/ApplyChangeUnitDetails'
|
import { fetchList as pageUnionList } from '@/api/business/unionApply'
|
import { getDetail } from '@/api/business/insuranceApply'
|
export default {
|
name: 'add_subtract_entrust',
|
extends: BaseOpera,
|
components: { GlobalWindow, ApplyChangeDetails, selectApplicationForm },
|
data () {
|
return {
|
form: {
|
unionApplyId: null,
|
applyIds: [],
|
applyDate: null,
|
businessType: 1
|
},
|
visibleSelect: false,
|
solutions: [],
|
currentPage: 0,
|
list: [],
|
pickerOptions: {},
|
tableData: [],
|
tableTotal: 0,
|
endTime: '',
|
item: null,
|
model: null,
|
time: [],
|
// 验证规则
|
rules: {
|
unionApplyId: [
|
{ required: true, message: '请选择保险单' }
|
],
|
applyDate: [
|
{ required: true, message: '请选择保险生效起期' }
|
]
|
}
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/insuranceApply',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
rowselect (row) {
|
this.$refs.multipleTable.toggleRowSelection(row, true)
|
},
|
rowselect1 (row) {
|
this.$refs.multipleTable1.toggleRowSelection(row, true)
|
},
|
checkDetial (row) {
|
getDetail(row.applyId).then(res => {
|
// this.apply = res
|
this.$refs.ApplyChangeDetails.open('更换派遣单位人员', res, row, 2)
|
}).catch(err => {
|
})
|
},
|
handleSelectionChange (rows) {
|
this.form.applyIds = []
|
// 假设取出 id 字段
|
rows.forEach(item => {
|
const id = item.id
|
if (this.form.applyIds.indexOf(id) === -1) {
|
this.form.applyIds.push(id)
|
}
|
})
|
},
|
handleSelectionChange1 (rows) {
|
console.log(rows)
|
if (rows.length > 1) {
|
// clearSelection 用于多选表格，清空用户的选择
|
this.$refs.multipleTable1.clearSelection()
|
this.$refs.multipleTable1.toggleRowSelection(rows[rows.length - 1])
|
}
|
if (rows.length >= 1) {
|
// 选中的行对像放进数组，方便后续对数据进行操作
|
this.model = rows[rows.length - 1]
|
} else if (rows.length === 0) {
|
this.model = null
|
}
|
},
|
selectDo () {
|
if (!this.model) {
|
this.$tip.apiFailed({
|
type: 'error',
|
message: '请选择至少一条申请记录进行操作'
|
})
|
return
|
}
|
this.visibleSelect = false
|
this.form.unionApplyId = this.model.id
|
var that = this
|
this.pickerOptions = {
|
disabledDate (time) {
|
var start = new Date(that.model.startTime)
|
start.setDate(start.getDate() + 1)
|
var end = new Date(that.model.endTime)
|
return (time.getTime() < start.getTime() || time.getTime() > end.getTime())
|
}
|
}
|
this.getList()
|
},
|
confirm () {
|
this.$refs.form.validate((valid) => {
|
// debugger
|
if (!valid) {
|
return
|
}
|
if (this.form.applyIds == null || this.form.applyIds.length === 0) {
|
this.$tip.apiFailed({
|
type: 'error',
|
message: '请选择至少一条申请记录进行投保申请！!'
|
})
|
return
|
}
|
this.$confirm('确认提交，请仔细核对信息。', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
center: true
|
}).then(() => {
|
merge(this.form)
|
.then(response => {
|
this.$message({
|
type: 'success',
|
message: '提交成功!'
|
})
|
this.visible = false
|
this.$emit('success')
|
}).catch(err => {
|
this.$tip.apiFailed(err)
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '取消'
|
})
|
})
|
})
|
},
|
open (title, target) {
|
this.title = title
|
this.model = null
|
this.list = []
|
this.visibleSelect = false
|
this.tableData = []
|
this.tableTotal = 0
|
this.item = null
|
if (target) {
|
this.$nextTick(() => {
|
this.$refs.form.resetFields()
|
})
|
} else {
|
this.$nextTick(() => {
|
this.$refs.form.resetFields()
|
this.form[this.configData['field.id']] = null
|
})
|
}
|
// this.getUnionApplyList()
|
this.visible = true
|
},
|
getValue () {
|
|
},
|
selectBaoxiandan () {
|
this.currentPage = 1
|
this.visibleSelect = true
|
this.$refs.multipleTable.clearSelection()
|
this.getUnionApplyList()
|
},
|
getUnionApplyList () {
|
pageUnionList({
|
capacity: 10,
|
page: this.currentPage,
|
model: {
|
queryFlag: 2,
|
status: 3
|
}
|
}).then(res => {
|
this.tableData.list = res.records
|
this.tableTotal = res.total
|
this.$nextTick(() => {
|
console.log(this.$refs.multipleTable1)
|
if (this.$refs.multipleTable1 && this.$refs.multipleTable1.doLayout) {
|
this.$refs.multipleTable1.doLayout()
|
}
|
})
|
})
|
},
|
getList () {
|
listAll({
|
solutionType: 1,
|
type: 1,
|
unionApplyId: this.model.id,
|
status: 7
|
}).then(res => {
|
this.list = res
|
this.$nextTick(() => {
|
if (this.$refs.multipleTable && this.$refs.multipleTable.doLayout) {
|
this.$refs.multipleTable.doLayout()
|
}
|
})
|
})
|
},
|
handleCurrentChange (val) {
|
this.currentPage = val
|
this.getUnionApplyList()
|
}
|
}
|
}
|
</script>
|
|
<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;
|
}
|
}
|
::v-deep .desc_item_from .el-table__header .el-checkbox{
|
display:none!important;
|
}
|
.submit {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 15px;
|
}
|
.desc_item_cate {
|
width: 100%;
|
margin-bottom: 10px;
|
}
|
.info {
|
margin-top: 30px;
|
width: 100%;
|
font-size: 14px;
|
color: black;
|
}
|
</style>
|
