<template> 
 | 
  <GlobalWindow 
 | 
      :title="title" 
 | 
      width="60%" 
 | 
      :visible.sync="visible" 
 | 
      :confirm-working="isWorking" 
 | 
      @confirm="confirm" 
 | 
  > 
 | 
    <!--    退回申请    --> 
 | 
    <el-form v-if="visible1==true" :model="form" ref="form1" :rules="rules1" style="width: 100%;"> 
 | 
      <el-form-item label="填写退回说明:" prop="backCheckInfo"> 
 | 
        <el-input type="textarea" v-model="form.backCheckInfo" placeholder="请输入" v-trim/> 
 | 
      </el-form-item> 
 | 
    </el-form> 
 | 
    <!--    上传批单    --> 
 | 
    <el-form v-if="visible3==true" :model="form" ref="form3" :rules="rules3" style="width: 100%;"> 
 | 
      <el-form-item label="期望保险生效期:"> 
 | 
        <span >{{( form.applyTime|| '-')}} </span> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="" > 
 | 
        <el-radio-group v-model="form.selectRadio" @change="selectChange"> 
 | 
          <el-radio :label="0" >与保单一致</el-radio> 
 | 
          <el-radio :label="1" >与保单不一致</el-radio> 
 | 
        </el-radio-group> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="保险生效起期:" prop="applyTime" v-if="form.selectRadio === 1"> 
 | 
        <el-date-picker 
 | 
            v-model="form.applyTime" 
 | 
            type="date" 
 | 
            value-format="yyyy-MM-dd HH:mm:ss" 
 | 
            placeholder="选择日期"> 
 | 
        </el-date-picker> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="批单号:" prop="code"> 
 | 
        <el-input v-model="form.code" placeholder="请输入" v-trim/> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="上传批单:" prop="baoxianFile"> 
 | 
        <UploadFile @remove="dele3" :limit="99" :uploadData="{ folder: 'apply',fileType:'.pdf' }" :fileList="form.fileList1" @uploadSuccess="baoxianFileUploaded" /> 
 | 
      </el-form-item> 
 | 
<!--      <div class="box_table">--> 
 | 
<!--        <div class="box_table_head">--> 
 | 
<!--          <div class="box_table_head_item">序号</div>--> 
 | 
<!--          <div class="box_table_head_item">被保险人</div>--> 
 | 
<!--          <div v-if="model.type==0" class="box_table_head_item">加保人数</div>--> 
 | 
<!--          <div v-if="model.type==0" class="box_table_head_item">减保人数</div>--> 
 | 
<!--          <div v-if="model.type==1" class="box_table_head_item">变更人数</div>--> 
 | 
<!--          <div class="box_table_head_item">上传批单</div>--> 
 | 
<!--        </div>--> 
 | 
<!--        <div class="box_table_content" v-for="(item, index) in model.applyList" :key="index">--> 
 | 
<!--          <div class="box_table_content_item">{{index + 1}}</div>--> 
 | 
<!--          <div class="box_table_content_item" >{{ item.companyName }}</div>--> 
 | 
<!--          <div v-if="model.type==0" class="box_table_content_item">{{ item.addNum }}</div>--> 
 | 
<!--          <div v-if="model.type==0" class="box_table_content_item">{{ item.delNum }}</div>--> 
 | 
<!--          <div  v-if="model.type==1" class="box_table_content_item">{{ item.changeNum }}</div>--> 
 | 
<!--          <div class="box_table_content_item">--> 
 | 
<!--            <el-form-item label="" prop="bxdMultifileList[index]">--> 
 | 
<!--              <UploadFileLink   @remove="deleIndex(1,index)" :uploadData="{ folder: 'apply',fileType:'.pdf' }" :fileIndex="index" :showTips="showTips" :fileList="model.applyList[index].fileList1" @uploadSuccess="baoxianFileUploaded2" />--> 
 | 
<!--            </el-form-item>--> 
 | 
<!--          </div>--> 
 | 
<!--        </div>--> 
 | 
<!--      </div>--> 
 | 
    </el-form> 
 | 
    <template v-slot:footer> 
 | 
      <el-button type="primary" @click="doSubmit">确 定</el-button> 
 | 
      <el-button @click="visible=false">取消</el-button> 
 | 
    </template> 
 | 
  </GlobalWindow> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import BaseOpera from '@/components/base/BaseOpera' 
 | 
import GlobalWindow from '@/components/common/GlobalWindow' 
 | 
import { 
 | 
  close, 
 | 
  uploadBXD 
 | 
} from '@/api/business/unionChange' 
 | 
import UploadFile from '@/components/common/UploadFile' 
 | 
import UploadFileLink from '@/components/common/UploadFileLink' 
 | 
  
 | 
export default { 
 | 
  name: 'OperaUnionChangeUnitCheckWindow', 
 | 
  extends: BaseOpera, 
 | 
  components: { UploadFile, GlobalWindow ,UploadFileLink}, 
 | 
  data () { 
 | 
    return { 
 | 
      // 表单数据 
 | 
      model: {}, 
 | 
      falg: 0, 
 | 
      showTips:false, 
 | 
      rules1: { 
 | 
        backCheckInfo: [ 
 | 
          { required: true, message: '请完善信息' } 
 | 
        ] 
 | 
      }, 
 | 
      rules3: { 
 | 
        code: [ 
 | 
          { required: true, message: '请完善信息' } 
 | 
        ], 
 | 
        applyDate: [ 
 | 
          { required: true, message: '请完善信息' } 
 | 
        ], 
 | 
        baoxianFile: [ 
 | 
          { required: true, message: '请完善信息' } 
 | 
        ] 
 | 
      }, 
 | 
      form: { 
 | 
        id: null, 
 | 
        backCheckInfo: '', 
 | 
        applyTime: null, 
 | 
        code: null, 
 | 
        baoxianFile: [], 
 | 
        bxdMultifileList: [], 
 | 
        fileList1: [], 
 | 
        selectRadio: 0 
 | 
      }, 
 | 
      visible1: false, 
 | 
      visible2: false, 
 | 
      visible3: false 
 | 
    } 
 | 
  }, 
 | 
  created () { 
 | 
    this.config({ 
 | 
      api: '/business/insuranceApply', 
 | 
      'field.id': 'id' 
 | 
    }) 
 | 
  }, 
 | 
  methods: { 
 | 
    deleIndex (flag,index) { 
 | 
      if(flag == 0){ 
 | 
        this.form.tbdMultifileList[index].fileurl = null 
 | 
        this.form.tbdMultifileList[index].name = null 
 | 
      }else  if(flag ==1){ 
 | 
        this.form.bxdMultifileList[index].fileurl = null 
 | 
        this.form.bxdMultifileList[index].name = null 
 | 
      } 
 | 
    }, 
 | 
    dele3 (e) { 
 | 
        this.form.baoxianFile.forEach((item, index) => { 
 | 
          if (e === item.imgaddr) { 
 | 
            this.form.baoxianFile.splice(index, 1) 
 | 
          } 
 | 
        }) 
 | 
    }, 
 | 
    open (title, target, flag) { 
 | 
      this.visible = true 
 | 
      this.model = {} 
 | 
      this.form = { 
 | 
        id: null, 
 | 
        backCheckInfo: '', 
 | 
        startTime: null, 
 | 
        code: null, 
 | 
        baoxianFile: [], 
 | 
        bxdMultifileList:[], 
 | 
        fileList1: [], 
 | 
        selectRadio: 0, 
 | 
        applyTime:null 
 | 
      } 
 | 
  
 | 
      this.model = target 
 | 
      this.form.applyTime = target.applyStartTime 
 | 
      this.title = title 
 | 
      this.flag = flag 
 | 
      this.visible1 = false 
 | 
      this.visible2 = false 
 | 
      this.visible3 = false 
 | 
      this.form.bxdMultifileList=[] 
 | 
      if (flag == 1) { 
 | 
        this.visible1 = true 
 | 
      } 
 | 
      if (flag == 3) { 
 | 
        this.visible3 = true 
 | 
        if(this.model.applyList){ 
 | 
          this.model.applyList.forEach(item =>{ 
 | 
            item.fileList1 =[] 
 | 
            this.form.bxdMultifileList.push({objId:item.id,fileUrl:null,fileName:null}) 
 | 
          }) 
 | 
        } 
 | 
      } 
 | 
    }, 
 | 
    doSubmit () { 
 | 
      if (this.flag == 1) { 
 | 
        this.$refs.form1.validate((valid) => { 
 | 
          // debugger 
 | 
          if (!valid) { 
 | 
            return 
 | 
          } 
 | 
          this.backDo() 
 | 
        }) 
 | 
      }  else if (this.flag == 3) { 
 | 
        this.$refs.form3.validate((valid) => { 
 | 
          // debugger 
 | 
          if (!valid) { 
 | 
            return 
 | 
          } 
 | 
          this.uploadBaoxiandan() 
 | 
        }) 
 | 
      } 
 | 
    }, 
 | 
    selectChange () { 
 | 
      if (this.form.selectRadio == 0) { 
 | 
        this.form.applyTime = this.model.applyStartTime 
 | 
      } 
 | 
    }, 
 | 
    baoxianFileUploaded (data) { 
 | 
      this.form.baoxianFile.push(data) 
 | 
    }, 
 | 
    baoxianFileUploaded2 (data) { 
 | 
      this.form.bxdMultifileList[data.index].fileurl = data.fileurl 
 | 
      this.form.bxdMultifileList[data.index].name = data.name 
 | 
    }, 
 | 
    backDo () { 
 | 
      this.$dialog.messageConfirm('确认进行该操作吗?') 
 | 
          .then(() => { 
 | 
            this.isWorking = true 
 | 
            close({ id: this.model.id, reason: this.form.backCheckInfo }) 
 | 
                .then(response => { 
 | 
                  this.visible = false 
 | 
                  this.$emit('success') 
 | 
                }).catch(err => { 
 | 
              this.$tip.apiFailed(err) 
 | 
            }) 
 | 
          }) 
 | 
    }, 
 | 
    uploadBaoxiandan () { 
 | 
      this.$dialog.messageConfirm('提交后不可修改,请再次核对后确认提交!') 
 | 
          .then(() => { 
 | 
            this.isWorking = true 
 | 
            var param ={ 
 | 
              id: this.model.id, 
 | 
              applyDate: this.form.applyTime, 
 | 
              code: this.form.code, 
 | 
              // fileurl: this.form.baoxianFile.fileurl, 
 | 
              // name: this.form.baoxianFile.name, 
 | 
              pidanFileList: this.form.baoxianFile, 
 | 
              applyChangeBXDList:this.form.bxdMultifileList 
 | 
            } 
 | 
            uploadBXD(param) 
 | 
                .then(response => { 
 | 
                  this.visible = false 
 | 
                  this.$emit('success') 
 | 
                }).catch(err => { 
 | 
              this.$tip.apiFailed(err) 
 | 
            }) 
 | 
          }) 
 | 
    }, 
 | 
    handleRemove (file, fileList) { 
 | 
      console.log(file, fileList) 
 | 
    }, 
 | 
    handlePreview (file) { 
 | 
      console.log(file) 
 | 
    }, 
 | 
    handleExceed (files, fileList) { 
 | 
      this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`) 
 | 
    }, 
 | 
    beforeRemove (file, fileList) { 
 | 
      return this.$confirm(`确定移除 ${file.name}?`) 
 | 
    }, 
 | 
    successEvent () { 
 | 
  
 | 
    }, 
 | 
    handleSizeChange (val) { 
 | 
      console.log(`每页 ${val} 条`) 
 | 
    }, 
 | 
    handleCurrentChange (val) { 
 | 
      console.log(`当前页: ${val}`) 
 | 
    }, 
 | 
    handleClick (tab, event) { 
 | 
      console.log(tab, event) 
 | 
    }, 
 | 
    onSubmit () { 
 | 
  
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 | 
<style> 
 | 
  
 | 
</style> 
 | 
<style lang="scss" scoped> 
 | 
.form { 
 | 
  width: 100%; 
 | 
  display: flex; 
 | 
  align-items: center; 
 | 
  flex-direction: column; 
 | 
  .form_span { 
 | 
    width: 100%; 
 | 
    display: flex; 
 | 
    align-items: start; 
 | 
    flex-direction: column; 
 | 
    margin-bottom: 20px; 
 | 
    span { 
 | 
      font-size: 14px; 
 | 
      &:nth-child(1) { 
 | 
        color: black; 
 | 
        margin-bottom: 5px; 
 | 
      } 
 | 
      &:nth-child(2) { 
 | 
        color: #8c939d; 
 | 
      } 
 | 
    } 
 | 
  } 
 | 
  .form_item { 
 | 
    width: 100%; 
 | 
    display: flex; 
 | 
    align-items: center; 
 | 
    margin-bottom: 20px; 
 | 
    &:last-child { 
 | 
      margin: 0 !important; 
 | 
    } 
 | 
    .form_item_label { 
 | 
      flex-shrink: 0; 
 | 
      /*width: 170px;*/ 
 | 
      color: black; 
 | 
      font-size: 14px; 
 | 
      span { 
 | 
        color: red; 
 | 
        font-size: 14px; 
 | 
      } 
 | 
    } 
 | 
    .form_item_val { 
 | 
      flex: 1; 
 | 
      /*height: 40px;*/ 
 | 
      margin-left: 20px; 
 | 
      textarea { 
 | 
        width: 100%; 
 | 
        height: 70px; 
 | 
        border: 1px solid #cbcbcb; 
 | 
        padding: 10px; 
 | 
        outline: none; 
 | 
        box-sizing: border-box; 
 | 
      } 
 | 
      input { 
 | 
        width: 100%; 
 | 
        height: 40px; 
 | 
        outline: none; 
 | 
        border-radius: 5px; 
 | 
        border: 1px solid #cbcbcb; 
 | 
        padding: 0 20px; 
 | 
        box-sizing: border-box; 
 | 
      } 
 | 
    } 
 | 
  } 
 | 
} 
 | 
.desc { 
 | 
  width: 100%; 
 | 
  .desc_item { 
 | 
    width: 100%; 
 | 
    display: flex; 
 | 
    flex-direction: column; 
 | 
    .desc_item_label { 
 | 
      width: 100%; 
 | 
      display: flex; 
 | 
      align-items: center; 
 | 
      justify-content: space-between; 
 | 
      margin-bottom: 10px; 
 | 
      span { 
 | 
        font-size: 14px; 
 | 
        color: black; 
 | 
        margin-right: 30px; 
 | 
      } 
 | 
    } 
 | 
    .desc_item_from { 
 | 
      width: 100%; 
 | 
      margin-bottom: 10px; 
 | 
      .desc_item_from_page { 
 | 
        width: 100%; 
 | 
        display: flex; 
 | 
        align-items: center; 
 | 
        justify-content: end; 
 | 
        margin-top: 10px; 
 | 
      } 
 | 
    } 
 | 
    .desc_item_cate { 
 | 
      width: 100%; 
 | 
      margin-bottom: 10px; 
 | 
    } 
 | 
    .desc_item_search { 
 | 
      width: 100%; 
 | 
      margin-bottom: 20px; 
 | 
    } 
 | 
    .desc_item_review { 
 | 
      width: 100%; 
 | 
      .desc_item_review_label { 
 | 
        font-size: 20px; 
 | 
        color: black; 
 | 
        font-weight: bold; 
 | 
        margin-bottom: 15px; 
 | 
      } 
 | 
    } 
 | 
  } 
 | 
} 
 | 
.box_table { 
 | 
  width: 100%; 
 | 
  border-top: 1px solid #b4bbc5; 
 | 
  border-left: 1px solid #b4bbc5; 
 | 
  box-sizing: border-box; 
 | 
  .box_table_head { 
 | 
    width: 100%; 
 | 
    display: flex; 
 | 
    align-items: center; 
 | 
    .box_table_head_item1 { 
 | 
      flex: 1; 
 | 
      height: 50px; 
 | 
      background: #f2f2f2; 
 | 
      display: flex; 
 | 
      align-items: center; 
 | 
      justify-content: center; 
 | 
      font-size: 14px; 
 | 
      color: black; 
 | 
      border-right: 1px solid #b4bbc5; 
 | 
      border-bottom: 1px solid #b4bbc5; 
 | 
      box-sizing: border-box; 
 | 
    } 
 | 
    .box_table_head_item { 
 | 
      flex: 1; 
 | 
      height: 50px; 
 | 
      background: #f2f2f2; 
 | 
      display: flex; 
 | 
      align-items: center; 
 | 
      justify-content: center; 
 | 
      font-size: 14px; 
 | 
      color: black; 
 | 
      border-right: 1px solid #b4bbc5; 
 | 
      border-bottom: 1px solid #b4bbc5; 
 | 
      box-sizing: border-box; 
 | 
      &:nth-child(1) { 
 | 
        flex: 0.5;; 
 | 
      } 
 | 
      &:nth-child(2) { 
 | 
        flex:1.5; 
 | 
      } 
 | 
      &:nth-child(4) { 
 | 
        flex:1.5; 
 | 
      } 
 | 
      &:nth-child(5) { 
 | 
        flex: 1.5;; 
 | 
      } 
 | 
    } 
 | 
    .box_table_head_item5 { 
 | 
      flex: 1; 
 | 
      height: 50px; 
 | 
      background: #f2f2f2; 
 | 
      display: flex; 
 | 
      align-items: center; 
 | 
      justify-content: center; 
 | 
      font-size: 14px; 
 | 
      color: black; 
 | 
      border-right: 1px solid #b4bbc5; 
 | 
      border-bottom: 1px solid #b4bbc5; 
 | 
      box-sizing: border-box; 
 | 
      &:nth-child(2) { 
 | 
        flex: 5; 
 | 
      } 
 | 
    } 
 | 
    .box_form_item { 
 | 
      flex: 1; 
 | 
      height: 50px; 
 | 
      background: #ffffff; 
 | 
      display: flex; 
 | 
      align-items: center; 
 | 
      justify-content: center; 
 | 
      font-size: 14px; 
 | 
      color: black; 
 | 
      border-right: 1px solid #b4bbc5; 
 | 
      border-bottom: 1px solid #b4bbc5; 
 | 
      box-sizing: border-box; 
 | 
      &:nth-child(1) { 
 | 
        //flex: 0.5; 
 | 
      } 
 | 
    } 
 | 
  } 
 | 
  .box_table_content { 
 | 
    width: 100%; 
 | 
    display: flex; 
 | 
    align-items: center; 
 | 
    .box_table_content_header{ 
 | 
      border-bottom: 0px solid #b4bbc5 !important; 
 | 
    } 
 | 
    .box_table_content_item { 
 | 
      flex: 1; 
 | 
      height: 50px; 
 | 
      background: #ffffff; 
 | 
      display: flex; 
 | 
      align-items: center; 
 | 
      justify-content: center; 
 | 
      font-size: 14px; 
 | 
      color: black; 
 | 
      border-right: 1px solid #b4bbc5; 
 | 
      border-bottom: 1px solid #b4bbc5; 
 | 
      box-sizing: border-box; 
 | 
      &:nth-child(1) { 
 | 
        flex: 0.5;; 
 | 
      } 
 | 
      &:nth-child(2) { 
 | 
        flex:1.5; 
 | 
      } 
 | 
      &:nth-child(4) { 
 | 
        flex: 1.5; 
 | 
      } 
 | 
      &:nth-child(5) { 
 | 
        flex: 1.5; 
 | 
      } 
 | 
      span{ 
 | 
        width: 100%; 
 | 
        white-space: nowrap; 
 | 
        word-wrap: break-word; 
 | 
        text-overflow: ellipsis; 
 | 
        overflow: hidden; 
 | 
      } 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</style> 
 |