<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> 
 |