优化理赔款支付--理赔审批列表数据渲染

src/api/ebiz/claims/claims.js

@@ -126,3 +126,22 @@ export function getAuthCode(data) {
     data
   })
 }
+
+// 理赔审批列表
+export function queryClaimData(data) {
+  return request({
+    url: getUrl('/claim/claimApproval/queryClaimData', 1),
+    method: 'post',
+    data
+  })
+}
+
+// 理赔审批
+export function claimApproval(data) {
+  return request({
+    url: getUrl('/claim/claimApproval/claimApproval', 1),
+    method: 'post',
+    data
+  })
+}
+

src/router/ebiz/claims.js

@@ -4,6 +4,7 @@ const FillImage = () => import('@/views/ebiz/claims/FillImage')
 const success = () => import('@/views/ebiz/claims/Success')
 const fail = () => import('@/views/ebiz/claims/Fail')
 const claimsList = () => import('@/views/ebiz/claims/ClaimsList')
+const claimApprovalList = () => import('@/views/ebiz/claims/ClaimApprovalList')
 const searchCustomer = () => import('@/views/ebiz/claims/SearchCustomer')
 const searchHospital = () => import('@/views/ebiz/claims/SearchHospital')
 const insuredInfo = () => import('@/views/ebiz/claims/InsuredInfo')
@@ -63,6 +64,15 @@ export default [
       index: 1
     }
   },
+  {
+    path: '/claims/claimApprovalList',
+    name: 'claimApprovalList',
+    component: claimApprovalList,
+    meta: {
+      title: '理赔审批列表',
+      index: 1
+    }
+  },
   {
     path: '/claims/searchCustomer',
     name: 'searchCustomer',

src/views/ebiz/claims/ClaimApprovalList.vue

@@ -0,0 +1,323 @@
+<template>
+  <div class="sale-list-container pb50">
+    <van-sticky>
+      <van-tabs :line-width="45" v-model="active" @change="tabChange" sticky>
+        <van-tab name="notApproved" title="未审批"></van-tab>
+        <van-tab name="approvalRecord" title="审批记录"></van-tab>
+      </van-tabs>
+    </van-sticky>
+    <div class="fs12 p10 bg-white" v-if="active == 'approvalRecord'">
+        <van-button
+            round
+            :plain="plainStatus=='0'"
+            size="small"
+            class="mr5"
+            type="danger"
+            @click="approvalRecordSwitch('1')"
+            >已通过</van-button>
+        <van-button
+            round
+            :plain="plainStatus=='1'"
+            size="small"
+            class="mr5"
+            type="danger"
+            @click="approvalRecordSwitch('0')"
+            >未通过</van-button>           
+    </div>
+    <div v-if="isSuccess">
+      <div v-if="claimApprovalList.length > 0">
+        <div v-for="(item, index) in claimApprovalList" :key="index">
+          <div
+            class="fs12 mt20 mb5 text-center"
+            v-if="active == 'notApproved'"
+          >赔案批次号&nbsp;&nbsp;&nbsp;&nbsp;{{ item.clmBatchNo }}</div>
+          <div
+            class="fs12 mt20 mb5 text-center"
+            v-if="active == 'approvalRecord'"
+          >{{ item.approvalDate }}</div>
+          <div class="bg-white pv15 pr15 pl10 mt15">
+             <van-collapse v-model="activeNames">
+                <van-checkbox-group v-model="checkboxResult" ref="checkboxGroup">
+                    <van-collapse-item :name="item01.id"  v-for="(item01, index01) in item.claimApprovalSearchLst" :key="index01">
+                        <template #title>
+                            <van-checkbox :name="item01.id"></van-checkbox>
+                            <span class="mr10 fwb">{{index01+1}}.{{item01.insuredName}}</span>
+                            <span class="mr10 fwb">{{item01.caseEndDate}}</span>
+                            <span class="mr10 fwb">{{item01.getMoney}}元</span>
+                        </template>
+                        <div class="pb10 pt10 border-gb" style="border-top: 1px solid #dadada;">
+                            <div class="w130 inline-b">赔案号：</div>
+                            <span class="fs14 c-gray-dark ml20">{{ item01.clmNo }}</span>
+                        </div>
+                        <div v-for="(item02, index02) in item01.claimPayeeLst" :key="index02">
+                            <div class="pb10 pt10 border-gb">
+                                <div class="w130 inline-b">领款人：</div>
+                                <span class="fs14 c-gray-dark ml20">{{ item02.payeeName }}</span>
+                            </div>
+                            <div class="pb10 pt10 border-gb">
+                                <div class="w130 inline-b">领款金额（万元）：</div>
+                                <span class="fs14 c-gray-dark ml20">{{ item02.payMoney }}</span>
+                            </div>
+                            <div class="pb10 pt10 border-gb">
+                                <div class="w130 inline-b">先前支付失败次数：</div>
+                                <span class="fs14 c-gray-dark ml20">{{ item02.getCount }}</span>
+                            </div>
+                            <div class="pb10 pt10 border-gb">
+                                <div class="w130 inline-b">上一次支付失败原因：</div>
+                                <span class="fs14 c-gray-dark ml20">{{ item02.lastFailReason }}</span>
+                            </div>
+                            <div class="pb10 pt10 border-gb">
+                                <div class="w130 inline-b">上一次支付失败日期：</div>
+                                <span class="fs14 c-gray-dark ml20">{{ item02.lastFailDate }}</span>
+                            </div>
+                        </div>
+                    </van-collapse-item>
+                </van-checkbox-group>
+            </van-collapse>           
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import { Tab, Tabs, Collapse, CollapseItem,Checkbox, CheckboxGroup } from 'vant'
+import { queryClaimData, claimApproval } from '@/api/ebiz/claims/claims'
+// import axios from 'axios'
+// import index from '@/config/index'
+
+export default {
+  name: 'claimApprovalList',
+  components: {
+    [Tab.name]: Tab,
+    [Tabs.name]: Tabs,
+    [Collapse.name]: Collapse,
+    [CollapseItem.name]: CollapseItem,
+    [Checkbox.name]: Checkbox,
+    [CheckboxGroup.name]: CheckboxGroup
+  },
+  data() {
+    return {
+      active: 'notApproved', // notApproved-未审批 , approvalRecord-审批记录, 
+      claimApprovalList: [], //接口数据
+      activeNames:[],//控制展开的面板列表
+      isSuccess: false, //有无数据显示
+      checkboxResult:[], //复选框选项列表
+      plainStatus:'1' //审批记录--1已通过，0未通过按钮状态
+    }
+  },
+  mounted() {
+    this.getList()
+    //从成功页点击返回时候需要添加拦截
+    EWebBridge.webCallAppInJs('webview_left_button', {
+      intercept: '1' //是否拦截原生返回事件 1是 其他否
+    })
+    window.appCallBack = this.appCallBack
+  },
+  methods: {
+    appCallBack(data) {
+      if (data.trigger == 'left_button_click') {
+        this.$jump({
+          flag: 'service'
+        })
+      }
+    },
+    //审批记录--切换1已通过，0未通过按钮状态
+    approvalRecordSwitch(plainStatus){
+       this.getList(plainStatus)
+       this.plainStatus = plainStatus
+    },
+    //初始化列表
+    getList(plainStatus) {
+      let status
+      //审批记录切换按钮时，1已通过，0未通过按钮状态
+      if(plainStatus){
+         status = plainStatus
+      }else{
+          status = this.active == 'notApproved'?'2':'1'
+      }
+      console.log(this.active,'this.active')
+      let data = {
+        status: status
+      }
+      this.$toast.loading({
+        duration: 0, // 持续展示 toast
+        forbidClick: true, // 禁用背景点击
+        loadingType: 'spinner',
+        message: '加载中……'
+      })
+
+      queryClaimData(data).then(res => {
+        this.$toast.clear()
+        if (res.result == '0') {
+          console.log(res,'res11111111111111')
+          this.isSuccess = true
+          if (res.content) {
+            this.claimApprovalList = res.content
+          }
+          if (this.claimApprovalList.length == 0) {
+            this.isSuccess = false
+          }
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
+    tabChange(name, title) {
+      this.currentPage = 1
+      this.active = name
+      this.claimApprovalList = []
+      this.getList()
+    },
+    del(businessNo) {
+    //   Dialog.confirm({
+    //     className: 'dialog-delete',
+    //     title: '提示',
+    //     message: '是否确认删除',
+    //     cancelButtonColor: '#4FC6B3',
+    //     confirmButtonColor: '#FFFFFF'
+    //   }).then(() => {
+    //     deleteClaim({
+    //       businessNo: businessNo
+    //     })
+    //       .then(res => {
+    //         let data = {
+    //           progressStatus: 'applying'
+    //         }
+    //         progress(data).then(res => {
+    //           if (res.result == 0) {
+    //             this.getList()
+    //           } else {
+    //             this.$toast(res.resultMessage)
+    //           }
+    //         })
+    //       })
+    //   })
+    },
+    goApply() {
+      let that = this
+      that.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + '/#/claims/InsuredInfo?edit=1',
+          forbidSwipeBack: '1'
+        },
+        routerInfo: {
+          path: '/claims/InsuredInfo?edit=1'
+        }
+      })
+    },
+    goEdit(status, businessNo, claimId) {
+      let that = this
+      localStorage.setItem('claimFrom', 'claimList')
+      localStorage.setItem('businessNo', businessNo)
+      let url = ''
+      switch (status) {
+        case '20': //填写被保人页
+          url = '/claims/InsuredInfo?edit=1'
+          break
+        case '21': //填写出险信息页
+          url = '/claims/Accident?edit=1'
+          break
+        case '22': //填写理赔申请信息
+          url = '/claims/ApplyInfo?edit=1'
+          break
+        case '23': //上传影像页
+          url = '/claims/ImageData?edit=1'
+          break
+        case '24': //签名页
+          url = '/claims/SignatureConfirmation?edit=1'
+          break
+        // case '25':
+        //   url = '/claims/Success?edit=1'
+        //   break
+      }
+      if (status == '24') {
+        that.$jump({
+          flag: 'h5',
+          extra: {
+            url: location.origin + `/#${url}`,
+            forbidSwipeBack: '1',
+            pullRefresh: '1',
+            backToFirst: '1'
+          },
+          routerInfo: { path: url }
+        })
+      } else {
+        that.$jump({
+          flag: 'h5',
+          extra: {
+            url: location.origin + `/#${url}`,
+            forbidSwipeBack: '1'
+          },
+          routerInfo: { path: url }
+        })
+      }
+    },
+    goDetail(claimNo) {
+      localStorage.setItem('claimNo', claimNo)
+      let that = this
+      that.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + '/#/claims/claimsDetail',
+          forbidSwipeBack: '1'
+        },
+        routerInfo: {
+          path: '/claims/claimsDetail'
+        }
+      })
+    }
+  },
+  filters: {
+    statusFormat: function(status) {
+      let text
+      switch (status) {
+        case '2':
+          text = '理赔申请未提交'
+          break
+        case '3':
+          text = '理赔申请已提交'
+          break
+        case '4':
+          text = '理赔申请提交失败'
+          break
+        case '10':
+          text = '报案成功'
+          break
+        case '40':
+          text = '已申请'
+          break
+        case '50':
+          text = '待结案'
+          break
+        case '51':
+          text = '待索赔'
+          break
+        case '52':
+          text = '审核中'
+          break
+        case '53':
+          text = '已拒绝'
+          break
+        case '60':
+          text = '已结案'
+          break
+        case 'Y':
+          text = '已支付'
+          break
+      }
+      return text
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+    /deep/.van-checkbox{
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 10px;
+    }
+</style>