<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%;"> 
 | 
        <template  v-if="model.delOnlyReplace != 1"> 
 | 
          <el-form-item  > 
 | 
            <div  style="display: inline;margin-right: 50px;" > 
 | 
              期望批增生效期: {{( form.applyTime|| '-')}} 
 | 
            </div> 
 | 
            <div  style="display: inline" > 
 | 
              期望批减生效期:  {{( form.delValidTime|| '-')}} 
 | 
            </div> 
 | 
          </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="delValidTime" v-if="form.selectRadio === 1"> 
 | 
            <el-date-picker 
 | 
                v-model="form.delValidTime" 
 | 
                type="date" 
 | 
                value-format="yyyy-MM-dd HH:mm:ss" 
 | 
                placeholder="选择日期"> 
 | 
            </el-date-picker> 
 | 
          </el-form-item> 
 | 
        </template> 
 | 
        <template  v-else> 
 | 
          <el-form-item  > 
 | 
            <div  style="display: inline;margin-right: 50px;" > 
 | 
              期望批改生效期:{{( form.delValidTime|| '-')}} 
 | 
            </div> 
 | 
          </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="delValidTime" v-if="form.selectRadio === 1"> 
 | 
            <el-date-picker 
 | 
                v-model="form.delValidTime" 
 | 
                type="date" 
 | 
                value-format="yyyy-MM-dd HH:mm:ss" 
 | 
                placeholder="选择日期"> 
 | 
            </el-date-picker> 
 | 
          </el-form-item> 
 | 
        </template> 
 | 
        <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: 'OperaUnionApplyCheckWindow', 
 | 
  extends: BaseOpera, 
 | 
  components: { UploadFile, GlobalWindow ,UploadFileLink}, 
 | 
  data () { 
 | 
    const checkFile = (rule, value, callback) => { 
 | 
      if (value.length === 0) { 
 | 
        callback(new Error('请上传批单')); 
 | 
      } else { 
 | 
        callback(); 
 | 
      } 
 | 
    }; 
 | 
    return { 
 | 
      // 表单数据 
 | 
      model: {}, 
 | 
      falg: 0, 
 | 
      showTips:false, 
 | 
      rules1: { 
 | 
        backCheckInfo: [ 
 | 
          { required: true, message: '请完善信息' } 
 | 
        ] 
 | 
      }, 
 | 
      rules3: { 
 | 
        code: [ 
 | 
          { required: true, message: '请完善信息' } 
 | 
        ], 
 | 
        applyDate: [ 
 | 
          { required: true, message: '请完善信息' } 
 | 
        ], 
 | 
        baoxianFile: [ 
 | 
          { required: true, validator: checkFile } 
 | 
        ] 
 | 
      }, 
 | 
      form: { 
 | 
        id: null, 
 | 
        backCheckInfo: '', 
 | 
        applyTime: null, 
 | 
        delValidTime: 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 (imgaddr) { 
 | 
      this.form.baoxianFile.forEach((item, index) => { 
 | 
        if (imgaddr === 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: [], 
 | 
        delValidTime: null, 
 | 
        bxdMultifileList:[], 
 | 
        fileList1: [], 
 | 
        selectRadio: 0, 
 | 
        applyTime:null 
 | 
      } 
 | 
  
 | 
      this.model = target 
 | 
      this.form.applyTime = target.applyStartTime 
 | 
      this.form.delValidTime = target.delValidTime 
 | 
      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 
 | 
        this.form.delValidTime = this.model.delValidTime 
 | 
      } 
 | 
    }, 
 | 
    baoxianFileUploaded (data) { 
 | 
      this.form.baoxianFile.push(data) 
 | 
      console.log(this.form.baoxianFile) 
 | 
    }, 
 | 
    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.model.delOnlyReplace != 1 ? this.form.applyTime : this.form.delValidTime), 
 | 
            delValidTime:this.form.delValidTime, 
 | 
            code: this.form.code, 
 | 
            pidanFileList: this.form.baoxianFile, 
 | 
            // fileurl: this.form.baoxianFile.fileurl, 
 | 
            // name: this.form.baoxianFile.name, 
 | 
            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_item { 
 | 
          flex: 1; 
 | 
          height: 50px; 
 | 
          background: #f2f2f2; 
 | 
          display: flex; 
 | 
          align-items: center; 
 | 
          justify-content: center; 
 | 
          padding: 10px; 
 | 
          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; 
 | 
            } 
 | 
        } 
 | 
        .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 { 
 | 
          overflow: hidden; 
 | 
          display: block; 
 | 
          white-space: nowrap; 
 | 
          text-overflow: ellipsis; 
 | 
          flex: 1; 
 | 
          height: 50px; 
 | 
          padding: 10px; 
 | 
          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; 
 | 
           } 
 | 
          span{ 
 | 
            width: 100%; 
 | 
            white-space: nowrap; 
 | 
            word-wrap: break-word; 
 | 
            text-overflow: ellipsis; 
 | 
            overflow: hidden; 
 | 
          } 
 | 
        } 
 | 
      } 
 | 
    } 
 | 
</style> 
 |