<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="reportNum"> 
 | 
                  <el-input v-model="form.reportNum" placeholder="请输入" v-trim/> 
 | 
                </el-form-item> 
 | 
              </el-form> 
 | 
              <el-form v-if="visible2==true" :model="form" ref="form2" :rules="rules2" style="width: 100%;"> 
 | 
                <el-form-item label="处理进展:" prop="bizInfo"> 
 | 
                  <el-input type="textarea" v-model="form.bizInfo" 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="撤销说明:" prop="backInfo"> 
 | 
                  <el-input type="textarea" v-model="form.backInfo" placeholder="请输入" v-trim/> 
 | 
                </el-form-item> 
 | 
              </el-form> 
 | 
              <el-form v-if="visible4==true" :model="form" ref="form4" :rules="rules4" style="width: 100%;"> 
 | 
                <el-form-item label="结案内容:" prop="doneInfo"> 
 | 
                  <el-input type="textarea" v-model="form.doneInfo" @change="changeAccount" placeholder="请输入" v-trim/> 
 | 
                </el-form-item> 
 | 
                <el-form-item label="医疗理赔(元):" prop="ylClaimAccount"> 
 | 
                  <el-input type="number" v-model="form.ylClaimAccount"  @change="changeAccount" placeholder="请输入" v-trim/> 
 | 
                </el-form-item> 
 | 
                <el-form-item label="误工理赔(元):" prop="wgClaimAccount"> 
 | 
                  <el-input type="number" v-model="form.wgClaimAccount" @change="changeAccount"  placeholder="请输入" v-trim/> 
 | 
                </el-form-item> 
 | 
                <el-form-item label="伤残理赔(元):" prop="scClaimAccount"> 
 | 
                  <el-input type="number" v-model="form.scClaimAccount" @change="changeAccount"  placeholder="请输入" v-trim/> 
 | 
                </el-form-item> 
 | 
                <el-form-item label="死亡理赔(元):" prop="swClaimAccount"> 
 | 
                  <el-input type="number" v-model="form.swClaimAccount"  @change="changeAccount"  placeholder="请输入" v-trim/> 
 | 
                </el-form-item> 
 | 
                <el-form-item label="总金额:"  > 
 | 
                  <el-input type="number" disabled v-model="form.totalAccount" placeholder="" v-trim/> 
 | 
                </el-form-item> 
 | 
              </el-form> 
 | 
            <div v-if="visible5 ==true"  class="form"> 
 | 
                <div class="form_span" v-for="(item,index) in remarkLogList" :key="index"> 
 | 
                    <span>理赔员-{{ item.creatorName }} {{item.createDate }}</span> 
 | 
                    <span>{{item.content }}</span> 
 | 
                </div> 
 | 
                <el-form :model="form" ref="form5" :rules="rules5" style="width: 100%;"> 
 | 
                  <el-form-item label="填写备注标签:" prop="remarkInfo"> 
 | 
                    <el-input type="textarea" v-model="form.remarkInfo" placeholder="请输入" v-trim/> 
 | 
                  </el-form-item> 
 | 
                </el-form> 
 | 
            </div> 
 | 
      <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 { addCode, back, dealBiz, doneCommit, remark } from '@/api/business/settleClaims' 
 | 
export default { 
 | 
  name: 'OperaSettleClaimsCheckWindow', 
 | 
  extends: BaseOpera, 
 | 
  components: { GlobalWindow }, 
 | 
  data () { 
 | 
    return { 
 | 
      remarkLogList: [], 
 | 
      type: 0, 
 | 
      // 表单数据 
 | 
      form: { 
 | 
        id: null, 
 | 
        checkInfo: null, 
 | 
        bizInfo: null, 
 | 
        doneInfo: null, 
 | 
        backInfo: null, 
 | 
        remarkInfo: null, 
 | 
        ylClaimAccount: 0, 
 | 
        wgClaimAccount: 0, 
 | 
        swClaimAccount: 0, 
 | 
        scClaimAccount: 0, 
 | 
        reportNum: null, 
 | 
        totalAccount:0 
 | 
      }, 
 | 
      model: {}, 
 | 
      activeName: 'first', 
 | 
      reverse: false, 
 | 
      tableData: [], 
 | 
      visible1: false, 
 | 
      visible2: false, 
 | 
      visible3: false, 
 | 
      visible4: false, 
 | 
      visible5: false, 
 | 
      rules1: { 
 | 
        reportNum: [ 
 | 
          { required: true, message: '请输入' } 
 | 
        ] 
 | 
      }, 
 | 
      rules2: { 
 | 
        bizInfo: [ 
 | 
          { required: true, message: '请输入' } 
 | 
        ] 
 | 
      }, 
 | 
      rules3: { 
 | 
        backInfo: [ 
 | 
          { required: true, message: '请输入' } 
 | 
        ] 
 | 
      }, 
 | 
      rules5: { 
 | 
        remarkInfo: [ 
 | 
          { required: true, message: '请输入' } 
 | 
        ] 
 | 
      }, 
 | 
      rules4: { 
 | 
        doneInfo: [ 
 | 
          { required: true, message: '请输入', trigger: 'blur' } 
 | 
        ], 
 | 
        ylClaimAccount: [ 
 | 
            { required: true, message: '请输入', trigger: 'blur' } 
 | 
        ], 
 | 
        wgClaimAccount: [ 
 | 
            { required: true, message: '请输入', trigger: 'blur' } 
 | 
        ], 
 | 
        scClaimAccount: [ 
 | 
            { required: true, message: '请输入', trigger: 'blur' } 
 | 
        ], 
 | 
        swClaimAccount: [ 
 | 
            { required: true, message: '请输入', trigger: 'blur' } 
 | 
        ] 
 | 
      } 
 | 
    } 
 | 
  }, 
 | 
  created () { 
 | 
    this.config({ 
 | 
      api: '/business/settleClaims', 
 | 
      'field.id': 'id' 
 | 
    }) 
 | 
  }, 
 | 
  methods: { 
 | 
    open (title, target, target1, type) { 
 | 
      this.model = {} 
 | 
      this.model = target 
 | 
      this.title = title 
 | 
      this.visible = true 
 | 
      this.type = type 
 | 
      this.remarkLogList = target1 
 | 
      this.visible1 = false, 
 | 
      this.visible2 = false, 
 | 
      this.visible3 = false, 
 | 
      this.visible4 = false, 
 | 
      this.visible5 = false 
 | 
      this.form = target 
 | 
      this.form = { 
 | 
        id: null, 
 | 
        checkInfo: null, 
 | 
        doneInfo: null, 
 | 
        remarkInfo: null, 
 | 
        bizInfo: null, 
 | 
        backInfo: null, 
 | 
        ylClaimAccount: 0, 
 | 
        wgClaimAccount: 0, 
 | 
        swClaimAccount: 0, 
 | 
        scClaimAccount: 0, 
 | 
        reportNum: null, 
 | 
        totalAccount:0 
 | 
      } 
 | 
      if (type == 1) { 
 | 
        this.visible1 = true 
 | 
      } 
 | 
      if (type == 2) { 
 | 
        this.visible2 = true 
 | 
      } 
 | 
      if (type == 3) { 
 | 
        this.visible3 = true 
 | 
      } 
 | 
      if (type == 4) { 
 | 
        this.visible4 = true 
 | 
      } 
 | 
      if (type == 5) { 
 | 
        this.visible5 = true 
 | 
      } 
 | 
    }, 
 | 
     changeAccount(){ 
 | 
        if (this.form.swClaimAccount) { 
 | 
            this.form.swClaimAccount = parseFloat(this.form.swClaimAccount).toFixed(2) 
 | 
        } 
 | 
         if (this.form.scClaimAccount) { 
 | 
             this.form.scClaimAccount = parseFloat(this.form.scClaimAccount).toFixed(2) 
 | 
         } 
 | 
         if (this.form.wgClaimAccount) { 
 | 
             this.form.wgClaimAccount = parseFloat(this.form.wgClaimAccount).toFixed(2) 
 | 
         } 
 | 
         if (this.form.ylClaimAccount) { 
 | 
             this.form.ylClaimAccount = parseFloat(this.form.ylClaimAccount).toFixed(2) 
 | 
         } 
 | 
      this.form.totalAccount = parseFloat( this.form.scClaimAccount || 0) + parseFloat( this.form.swClaimAccount || 0) 
 | 
         + parseFloat( this.form.wgClaimAccount|| 0) 
 | 
         + parseFloat( this.form.ylClaimAccount|| 0) 
 | 
     }, 
 | 
    doSubmit (type) { 
 | 
      var that = this 
 | 
      if (this.type === 5) { 
 | 
        this.$refs.form5.validate((valid) => { 
 | 
          // debugger 
 | 
          if (!valid) { 
 | 
            return 
 | 
          } 
 | 
          remark({ id: that.model.id, checkInfo: that.form.remarkInfo }) 
 | 
            .then(response => { 
 | 
              this.visible = false 
 | 
              this.$emit('success') 
 | 
            }).catch(err => { 
 | 
              this.$tip.apiFailed(err) 
 | 
            }) 
 | 
        }) 
 | 
      } else if (this.type === 4) { 
 | 
        this.$refs.form4.validate((valid) => { 
 | 
          if (!valid) { 
 | 
            return 
 | 
          } 
 | 
          doneCommit({ 
 | 
            id: that.model.id, 
 | 
            checkInfo: that.form.doneInfo, 
 | 
            ylClaimAccount: that.form.ylClaimAccount, 
 | 
            wgClaimAccount: that.form.wgClaimAccount, 
 | 
            swClaimAccount: that.form.swClaimAccount, 
 | 
            scClaimAccount: that.form.scClaimAccount 
 | 
          }).then(response => { 
 | 
            this.visible = false 
 | 
            this.$emit('success') 
 | 
          }).catch(err => { 
 | 
            this.$tip.apiFailed(err) 
 | 
          }) 
 | 
        }) 
 | 
      } else if (this.type === 2) { 
 | 
        this.$refs.form2.validate((valid) => { 
 | 
          // debugger 
 | 
          if (!valid) { 
 | 
            return 
 | 
          } 
 | 
          // 理赔处理 
 | 
          dealBiz({ id: that.model.id, checkInfo: that.form.bizInfo }) 
 | 
            .then(response => { 
 | 
              this.visible = false 
 | 
              this.$emit('success') 
 | 
            }).catch(err => { 
 | 
              console.log(err) 
 | 
              this.$tip.apiFailed(err) 
 | 
            }).finally(() => { 
 | 
              this.isWorking = false 
 | 
            }) 
 | 
        }) 
 | 
      } else if (this.type === 3) { 
 | 
        this.$refs.form3.validate((valid) => { 
 | 
          // debugger 
 | 
          if (!valid) { 
 | 
            return 
 | 
          } 
 | 
          back({ id: that.model.id, checkInfo: that.form.backInfo }) 
 | 
            .then(response => { 
 | 
              this.visible = false 
 | 
              this.$emit('success') 
 | 
            }).catch(err => { 
 | 
              console.log(err) 
 | 
              this.$tip.apiFailed(err) 
 | 
            }).finally(() => { 
 | 
              this.isWorking = false 
 | 
            }) 
 | 
        }) 
 | 
      } else if (this.type === 1) { 
 | 
        // 添加备案号 
 | 
        this.$refs.form1.validate((valid) => { 
 | 
          // debugger 
 | 
          if (!valid) { 
 | 
            return 
 | 
          } 
 | 
          addCode({ id: that.model.id, reportNum: that.form.reportNum }) 
 | 
            .then(response => { 
 | 
              this.visible = false 
 | 
              this.$emit('success') 
 | 
            }).catch(err => { 
 | 
              console.log(err) 
 | 
              this.$tip.apiFailed(err) 
 | 
            }).finally(() => { 
 | 
              this.isWorking = false 
 | 
            }) 
 | 
        }) 
 | 
      } 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 | 
<style> 
 | 
    .v-modal { 
 | 
        z-index: 2000 !important; 
 | 
    } 
 | 
</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: #8c939d; 
 | 
                    margin-bottom: 5px; 
 | 
                } 
 | 
                &:nth-child(2) { 
 | 
                    color: #8c939d; 
 | 
                  color: black; 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
        .form_item { 
 | 
            width: 100%; 
 | 
            display: flex; 
 | 
            align-items: start; 
 | 
            margin-bottom: 20px; 
 | 
            &:last-child { 
 | 
                margin: 0 !important; 
 | 
            } 
 | 
            .form_item_label { 
 | 
                flex-shrink: 0; 
 | 
                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: 100%; 
 | 
                    outline: none; 
 | 
                    border-radius: 5px; 
 | 
                    border: 1px solid #cbcbcb; 
 | 
                    padding: 0 20px; 
 | 
                    box-sizing: border-box; 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
    .desc { 
 | 
        width: 100%; 
 | 
        display: flex; 
 | 
        align-items: center; 
 | 
        flex-direction: column; 
 | 
        .desc_label { 
 | 
            width: 100%; 
 | 
            display: flex; 
 | 
            align-items: center; 
 | 
            justify-content: space-between; 
 | 
            .desc_label_left { 
 | 
                flex: 1; 
 | 
                display: flex; 
 | 
                align-items: center; 
 | 
                .desc_label_left_title { 
 | 
                    font-size: 20px; 
 | 
                    font-weight: bold; 
 | 
                    color: black; 
 | 
                } 
 | 
                .desc_label_left_time { 
 | 
                    font-size: 14px; 
 | 
                    color: rgba(249, 86, 1, 0.996); 
 | 
                    margin-left: 10px; 
 | 
                } 
 | 
                .desc_label_left_code { 
 | 
                    font-size: 15px; 
 | 
                    color: black; 
 | 
                    margin-left: 30px; 
 | 
                } 
 | 
            } 
 | 
            .desc_label_right { 
 | 
                flex-shrink: 0; 
 | 
            } 
 | 
        } 
 | 
        .desc_list { 
 | 
            width: 100%; 
 | 
            margin-top: 20px; 
 | 
            display: flex; 
 | 
            align-items: center; 
 | 
            flex-wrap: wrap; 
 | 
            .desc_list_item { 
 | 
                width: 33.3%; 
 | 
                display: flex; 
 | 
                align-items: center; 
 | 
                margin-bottom: 10px; 
 | 
                .desc_list_item_label { 
 | 
                    width: 130px; 
 | 
                    flex-shrink: 0; 
 | 
                    font-size: 15px; 
 | 
                    color: black; 
 | 
                } 
 | 
                .desc_list_item_val { 
 | 
                    flex: 1; 
 | 
                    font-size: 15px; 
 | 
                    color: black; 
 | 
                } 
 | 
                .desc_list_item_videos { 
 | 
                    flex: 1; 
 | 
                    display: flex; 
 | 
                    align-items: center; 
 | 
                    flex-wrap: wrap; 
 | 
                    .desc_list_item_imgs_video { 
 | 
                        width: 150px; 
 | 
                        height: 150px; 
 | 
                        background: black; 
 | 
                        margin-right: 10px; 
 | 
                        video { 
 | 
                            width: 100%; 
 | 
                            height: 100%; 
 | 
                        } 
 | 
                    } 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
        .desc_xian { 
 | 
            width: 100%; 
 | 
            height: 1px; 
 | 
            margin: 10px 0; 
 | 
            background: #ececec; 
 | 
        } 
 | 
        .desc_data { 
 | 
            width: 100%; 
 | 
            display: flex; 
 | 
            flex-direction: column; 
 | 
            margin-top: 20px; 
 | 
            .desc_data_label { 
 | 
                font-size: 16px; 
 | 
                color: black; 
 | 
                font-weight: 600; 
 | 
                margin-bottom: 20px; 
 | 
            } 
 | 
            .desc_data_cate { 
 | 
                width: 100%; 
 | 
                margin: 0 0 10px 0; 
 | 
            } 
 | 
            .desc_data_list { 
 | 
                width: 100%; 
 | 
                display: flex; 
 | 
                align-items: center; 
 | 
                flex-wrap: wrap; 
 | 
                justify-content: space-between; 
 | 
                .desc_data_list_item1 { 
 | 
                    width: 24.5%; 
 | 
                } 
 | 
                .desc_data_list_item { 
 | 
                    width: 24.5%; 
 | 
                    padding: 10px; 
 | 
                    box-sizing: border-box; 
 | 
                    border: 1px solid #e2e2e2; 
 | 
                    display: flex; 
 | 
                    align-items: center; 
 | 
                    justify-content: space-between; 
 | 
                    position: relative; 
 | 
                    margin-bottom: 10px; 
 | 
                    .desc_data_list_item_dele { 
 | 
                        position: absolute; 
 | 
                        top: 10px; 
 | 
                        right: 10px; 
 | 
                        font-size: 14px; 
 | 
                        cursor: pointer; 
 | 
                        color: rgba(249, 86, 1, 0.996078431372549); 
 | 
                    } 
 | 
                    .desc_data_list_item_upload { 
 | 
                        flex: 1; 
 | 
                        height: 80px; 
 | 
                        display: flex; 
 | 
                        align-items: center; 
 | 
                        justify-content: center; 
 | 
                    } 
 | 
                    .desc_data_list_item_img { 
 | 
                        flex-shrink: 0; 
 | 
                        width: 80px; 
 | 
                        height: 80px; 
 | 
                        display: flex; 
 | 
                        align-items: center; 
 | 
                        justify-content: center; 
 | 
                        overflow: hidden; 
 | 
                        .el-icon-plus { 
 | 
                            font-size: 26px; 
 | 
                            color: #ffffff; 
 | 
                        } 
 | 
                        img { 
 | 
                            width: 100%; 
 | 
                            height: 100%; 
 | 
                        } 
 | 
                    } 
 | 
                    .desc_data_list_item_info { 
 | 
                        flex: 1; 
 | 
                        height: 80px; 
 | 
                        display: flex; 
 | 
                        flex-direction: column; 
 | 
                        justify-content: space-between; 
 | 
                        span { 
 | 
                            &:nth-child(1) { 
 | 
                                font-size: 14px; 
 | 
                                color: black; 
 | 
                            } 
 | 
                            &:nth-child(2) { 
 | 
                                font-size: 14px; 
 | 
                                color: #888888; 
 | 
                            } 
 | 
                            &:nth-child(3) { 
 | 
                                font-size: 14px; 
 | 
                                color: #888888; 
 | 
                            } 
 | 
                        } 
 | 
                    } 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
        .desc_times { 
 | 
            width: 100%; 
 | 
            margin-top: 20px; 
 | 
        } 
 | 
    } 
 | 
</style> 
 |