| <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: orange; font-size: 14px;"><i class="el-icon-warning"></i>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: orange; font-size: 14px;"> | 
|           <i class="el-icon-warning"></i>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: orange; font-size: 14px;width: 100%;text-align: left"><i class="el-icon-warning"></i>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"> | 
|         <div style="width: 100%;  text-align: right; align-items: center;margin-bottom: 10px"> | 
|              <span class="tip-warn"  style="color: orange; font-size: 14px; margin-right: 20px ;text-align: left"> | 
|             <i class="el-icon-warning"></i>注:只能选择申请单数大于0的申请记录进行操作 | 
|           </span> | 
|           <el-checkbox :true-label="2" :false-label="0"   v-model="hasApplying" style="font-size: 12px;" @change="handleCurrentChange(1)">只显示有申请单记录</el-checkbox> | 
|         </div> | 
|         <el-table | 
|             border | 
|             ref="multipleTable1" | 
|             v-loading="isWorking.search" | 
|             :data="tableData" | 
|             row-key="id" | 
|             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="90px"></el-table-column> | 
|           <el-table-column prop="guaranteeNum" label="在保人数" min-width="90px"></el-table-column> | 
|           <el-table-column prop="changeApplyNum" label="申请单数" min-width="90px"></el-table-column> | 
|           <el-table-column prop="fee" label="总费用(元)" min-width="100px"></el-table-column> | 
|           <el-table-column prop="createDate" label="提交时间" min-width="180px"></el-table-column> | 
|           <el-table-column | 
|               label="操作" | 
|               min-width="100" | 
|               fixed="right" | 
|               align="center" | 
|           > | 
|             <template slot-scope="{row}"> | 
|               <el-button v-if="row.changeApplyNum >0" type="primary"   @click="selectDo(row)">选择</el-button> | 
|             </template> | 
|           </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: [], | 
|       hasApplying: 0, | 
|       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 (row){ | 
|       this.model =row | 
|       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() | 
|     }, | 
|     selectDo1 () { | 
|       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.hasApplying= 0 | 
|       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: { | 
|           hasApplying:this.hasApplying, | 
|           queryFlag: 2, | 
|           status: 3 | 
|         } | 
|       }).then(res => { | 
|         this.tableData = res.records | 
|         this.tableTotal = res.total | 
|         this.$nextTick(() => { | 
|           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> |