<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" 
 | 
                type="date" 
 | 
                :picker-options="pickerOptions" 
 | 
                format="yyyy-MM-dd" 
 | 
                placeholder="请选择日期" 
 | 
                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="applyStartTime" 
 | 
          label="批增生效日期"> 
 | 
      </el-table-column> 
 | 
      <el-table-column 
 | 
          prop="delValidTime" 
 | 
          label="批减生效日期"> 
 | 
      </el-table-column> 
 | 
      <el-table-column 
 | 
          prop="addNum" 
 | 
          label="加保人数"> 
 | 
      </el-table-column> 
 | 
      <el-table-column 
 | 
          prop="delNum" 
 | 
          label="减保人数"> 
 | 
      </el-table-column> 
 | 
      <el-table-column 
 | 
          prop="fee" 
 | 
          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">(2. 请先选择至少一条申请后提交投保申请)</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" id="selectTable"> 
 | 
        <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="addApplyNum" 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/ApplyChangeDetails' 
 | 
import { fetchList as pageUnionList } from '@/api/business/unionApply' 
 | 
import {getDetail} from "@/api/business/insuranceApply"; 
 | 
import {compareDates, getDate, getTomorrow} from "@/utils/util"; 
 | 
export default { 
 | 
  name: 'add_subtract_entrust', 
 | 
  extends: BaseOpera, 
 | 
  components: { GlobalWindow, ApplyChangeDetails,selectApplicationForm }, 
 | 
  data () { 
 | 
    return { 
 | 
      form: { 
 | 
        unionApplyId: null, 
 | 
        applyIds: [], 
 | 
        applyDate: null, 
 | 
        businessType: 0 
 | 
      }, 
 | 
      pickerOptions: {}, 
 | 
      visibleSelect:false, 
 | 
      solutions: [], 
 | 
      currentPage:0, 
 | 
      list: [], 
 | 
      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' 
 | 
    }) 
 | 
 /*   var now = new Date() 
 | 
    var start = now.setDate(now.getDate()+1) 
 | 
    var end = now.setDate(now.getDate()+10) 
 | 
    this.pickerOptions = { 
 | 
      disabledDate (time) { 
 | 
        console.log(( time.getTime() < start.getTime() ||  time.getTime()>end.getTime())) 
 | 
        return ( time.getTime() < start.getTime() ||  time.getTime()>end.getTime()) 
 | 
      } 
 | 
    }*/ 
 | 
  }, 
 | 
  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 
 | 
      } 
 | 
    }, 
 | 
    convertToDate(dateString) { 
 | 
      try { 
 | 
        const parts = dateString.split(/[- : \/]/); 
 | 
        const monthIndex = parts[1] - 1 
 | 
        const convertedDate = new Date( parts[0], monthIndex, parts[2], parts[3], parts[5], parts[6] ) 
 | 
        return convertedDate 
 | 
      }catch (e) { 
 | 
        return new Date() 
 | 
      } 
 | 
    }, 
 | 
    selectDo(){ 
 | 
      if(!this.model){ 
 | 
        this.$tip.apiFailed({ 
 | 
          type: 'error', 
 | 
          message: '请选择至少一条申请记录进行操作' 
 | 
        }) 
 | 
        return 
 | 
      } 
 | 
      this.form.applyDate=null 
 | 
      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) 
 | 
          // console.log(end ) 
 | 
          // console.log(time ) 
 | 
          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:1, 
 | 
          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:0, 
 | 
          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> 
 |