From 85cbfae9b6074e76bf310d7db5ce12e4bd59cd30 Mon Sep 17 00:00:00 2001
From: yunuo970428 <405378304@qq.com>
Date: Thu, 26 Oct 2023 16:22:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=AC=A0=E6=AC=BE=E5=87=BA?=
 =?UTF-8?q?=E5=BA=93--=E5=A2=9E=E5=8A=A0=E6=9F=A5=E7=9C=8B=E6=AC=A0?=
 =?UTF-8?q?=E6=AC=BE=E5=BC=80=E7=A5=A8=E3=80=81=E6=AC=A0=E6=AC=BE=E9=A2=86?=
 =?UTF-8?q?=E7=A5=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../debtrelease/debtreleaseAdd.vue            |  36 +-
 .../debtrelease/debtreleaseInfo.vue           |  38 +-
 .../relation/arrearsbillingInfo.vue           | 392 +++++++++++++++++
 .../relation/arrearscollectionInfo.vue        | 345 +++++++++++++++
 .../qiankuanchukuFlow/debtreleaseDaiBan.vue   |  38 +-
 .../qiankuanchukuFlow/debtreleaseEdit.vue     |  36 +-
 .../qiankuanchukuFlow/debtreleaseYiBan.vue    |  38 +-
 .../relation/arrearsbillingInfo.vue           | 397 ++++++++++++++++++
 .../relation/arrearscollectionInfo.vue        | 350 +++++++++++++++
 9 files changed, 1665 insertions(+), 5 deletions(-)
 create mode 100644 anrui-buscenter/anrui-buscenter-ui/src/views/teshushenpi/debtrelease/relation/arrearsbillingInfo.vue
 create mode 100644 anrui-buscenter/anrui-buscenter-ui/src/views/teshushenpi/debtrelease/relation/arrearscollectionInfo.vue
 create mode 100644 anrui-buscenter/anrui-buscenter-ui/src/views/workflow/qiankuanchukuFlow/relation/arrearsbillingInfo.vue
 create mode 100644 anrui-buscenter/anrui-buscenter-ui/src/views/workflow/qiankuanchukuFlow/relation/arrearscollectionInfo.vue

diff --git a/anrui-buscenter/anrui-buscenter-ui/src/views/teshushenpi/debtrelease/debtreleaseAdd.vue b/anrui-buscenter/anrui-buscenter-ui/src/views/teshushenpi/debtrelease/debtreleaseAdd.vue
index b6f53a242c..054d7513e1 100644
--- a/anrui-buscenter/anrui-buscenter-ui/src/views/teshushenpi/debtrelease/debtreleaseAdd.vue
+++ b/anrui-buscenter/anrui-buscenter-ui/src/views/teshushenpi/debtrelease/debtreleaseAdd.vue
@@ -176,6 +176,16 @@
                 <span>{{ remarks(scope.row) }}</span>
               </template>
             </el-table-column>
+            <el-table-column label="欠款开票" align="center" width="100">
+              <template slot-scope="scope">
+                <span class="bluezi" @click="lookQKKP(scope.row)">查看</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="欠款领票" align="center" width="100">
+              <template slot-scope="scope">
+                <span class="bluezi" @click="lookQKLP(scope.row)">查看</span>
+              </template>
+            </el-table-column>
             <el-table-column v-if="formobj.paymentMethodKey == '2'" label="放款资料是否齐全" align="center" width="170">
               <template slot-scope="scope">
                 <span>{{ scope.row.realBuyer.zlStateValue }}</span>
@@ -234,6 +244,10 @@
     <selectpackage v-show="viewState == 7" ref="divSelectPackAge" @backData="backPackAge" @doback="resetState"/>
     <!-- 查看上装信息 -->
     <shangzhuangInfo v-show="viewState == 8" ref="divZhuangInfo" @doback="resetState"/>
+    <!-- 查看欠款开票信息 -->
+    <arrearsbillingInfo v-show="viewState == 9" ref="divQKKP" @doback="resetState"/>
+    <!-- 查看欠款领票信息 -->
+    <arrearscollectionInfo v-show="viewState == 10" ref="divQKLP" @doback="resetState"/>
   </div>
 </template>
 
@@ -242,6 +256,8 @@ import { saveOrUpdate, submitInfo, getRetrievalApplyInfo, selectInfo, trailerLis
 import { selectCustomerList } from '@/api/dictcommons/dictcommons'
 import upload from '@/components/uploadFile/upload'
 import selectVehicle from './relation/selectVehicle'
+import arrearsbillingInfo from './relation/arrearsbillingInfo'
+import arrearscollectionInfo from './relation/arrearscollectionInfo'
 import userInfoAdd from '../../chukuguanli/chukubanli/relation/userInfoAdd'
 import userInfoLook from '../../chukuguanli/chukubanli/relation/userInfoLook'
 import guacheInfo from '../../chukuguanli/chukubanli/relation/guacheInfo'
@@ -257,7 +273,9 @@ export default {
     userInfoLook,
     guacheInfo,
     selectpackage,
-    shangzhuangInfo
+    shangzhuangInfo,
+    arrearsbillingInfo,
+    arrearscollectionInfo
   },
   data() {
     return {
@@ -648,6 +666,22 @@ export default {
     resetState() {
       this.viewState = 1
     },
+    lookQKKP(row) {
+      if (row.qkKpSid !== '' && row.qkKpSid !== null) {
+        this.viewState = 9
+        this.$refs['divQKKP'].showInfo({ sid: row.qkKpSid })
+      } else {
+        this.$message({ showClose: true, type: 'error', message: '无欠款开票记录' })
+      }
+    },
+    lookQKLP(row) {
+      if (row.qkLpSid !== '' && row.qkLpSid !== null) {
+        this.viewState = 10
+        this.$refs['divQKLP'].showInfo({ sid: row.qkLpSid })
+      } else {
+        this.$message({ showClose: true, type: 'error', message: '无欠款领票记录' })
+      }
+    },
     // ------------ 功能实现 ------------
     // 添加数据
     handleSave() {
diff --git a/anrui-buscenter/anrui-buscenter-ui/src/views/teshushenpi/debtrelease/debtreleaseInfo.vue b/anrui-buscenter/anrui-buscenter-ui/src/views/teshushenpi/debtrelease/debtreleaseInfo.vue
index c404664773..7c3c3e9a49 100644
--- a/anrui-buscenter/anrui-buscenter-ui/src/views/teshushenpi/debtrelease/debtreleaseInfo.vue
+++ b/anrui-buscenter/anrui-buscenter-ui/src/views/teshushenpi/debtrelease/debtreleaseInfo.vue
@@ -146,6 +146,16 @@
                 <span>{{ remarks(scope.row) }}</span>
               </template>
             </el-table-column>
+            <el-table-column label="欠款开票" align="center" width="100">
+              <template slot-scope="scope">
+                <span class="bluezi" @click="lookQKKP(scope.row)">查看</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="欠款领票" align="center" width="100">
+              <template slot-scope="scope">
+                <span class="bluezi" @click="lookQKLP(scope.row)">查看</span>
+              </template>
+            </el-table-column>
             <el-table-column v-if="formobj.paymentMethodKey == '2'" label="放款资料是否齐全" align="center" width="170">
               <template slot-scope="scope">
                 <span>{{ scope.row.realBuyer.zlStateValue }}</span>
@@ -193,11 +203,17 @@
     <user-info-look v-show="viewState == 2" ref="divUserInfo" @doback="resetState"/>
     <guacheInfo v-show="viewState == 3" ref="divCheInfo" @doback="resetState"/>
     <shangzhuangInfo v-show="viewState == 4" ref="divZhuangInfo" @doback="resetState"/>
+    <!-- 查看欠款开票信息 -->
+    <arrearsbillingInfo v-show="viewState == 5" ref="divQKKP" @doback="resetState"/>
+    <!-- 查看欠款领票信息 -->
+    <arrearscollectionInfo v-show="viewState == 6" ref="divQKLP" @doback="resetState"/>
   </div>
 </template>
 
 <script>
 import { getRetrievalApplyInfoBySid, trailerList } from '@/api/tesheshenpi/debtrelease'
+import arrearsbillingInfo from './relation/arrearsbillingInfo'
+import arrearscollectionInfo from './relation/arrearscollectionInfo'
 import userInfoLook from '../../chukuguanli/chukubanli/relation/userInfoLook'
 import guacheInfo from '../../chukuguanli/chukubanli/relation/guacheInfo'
 import shangzhuangInfo from '../../chukuguanli/chukubanli/relation/shangzhuangInfo'
@@ -207,7 +223,9 @@ export default {
   components: {
     userInfoLook,
     guacheInfo,
-    shangzhuangInfo
+    shangzhuangInfo,
+    arrearsbillingInfo,
+    arrearscollectionInfo
   },
   data() {
     return {
@@ -311,6 +329,24 @@ export default {
         }
       })
     },
+    // 查看欠款开票详情
+    lookQKKP(row) {
+      if (row.qkKpSid !== '' && row.qkKpSid !== null) {
+        this.viewState = 5
+        this.$refs['divQKKP'].showInfo({ sid: row.qkKpSid })
+      } else {
+        this.$message({ showClose: true, type: 'error', message: '无欠款开票记录' })
+      }
+    },
+    // 查看欠款领票详情
+    lookQKLP(row) {
+      if (row.qkLpSid !== '' && row.qkLpSid !== null) {
+        this.viewState = 6
+        this.$refs['divQKLP'].showInfo({ sid: row.qkLpSid })
+      } else {
+        this.$message({ showClose: true, type: 'error', message: '无欠款领票记录' })
+      }
+    },
     // 查看用户人信息
     lookUser(row) {
       this.viewState = 2
diff --git a/anrui-buscenter/anrui-buscenter-ui/src/views/teshushenpi/debtrelease/relation/arrearsbillingInfo.vue b/anrui-buscenter/anrui-buscenter-ui/src/views/teshushenpi/debtrelease/relation/arrearsbillingInfo.vue
new file mode 100644
index 0000000000..f9eca2d78b
--- /dev/null
+++ b/anrui-buscenter/anrui-buscenter-ui/src/views/teshushenpi/debtrelease/relation/arrearsbillingInfo.vue
@@ -0,0 +1,392 @@
+<template>
+  <div class="app-container">
+    <!--标题按钮部分开始-->
+    <div class="tab-header webtop">
+      <!--标题-->
+      <div>{{ viewTitle }}</div>
+      <!--start 新增修改按钮-->
+      <div>
+        <el-button type="primary" size="small" @click="handlePrint()">打印</el-button>
+        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
+      </div>
+      <!--end 添加修改按钮-->
+    </div>
+    <!--按钮部分结束-->
+    <div class="listconadd">
+      <div class="titwu">欠款开票申请单</div>
+      <el-form ref="form_obj" :model="formobj" :rules="rules" class="formaddcopy02">
+        <el-row style="border-top: 1px solid #E0E3EB">
+          <el-col :span="8">
+            <div class="span-sty">发起人</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.createByName }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">发起部门</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.deptName }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">发起日期</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.applyDate }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <div class="span-sty">销售专员</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.staffName }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">销售部门</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.saleDeptName }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">销售类型</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.saleTypeValue }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <div class="span-sty">合同编号</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.contractNo }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8" class="tlineheightb">
+            <div class="span-sty">开票单位</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.openTickUnitName }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">客户名称</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.customerName }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <div class="title">主车开票信息</div>
+        <el-row>
+          <el-col :span="8">
+            <div class="span-sty">单台开票金额</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.oneBillMoney }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">开票类型默认</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.openTickTypeValue }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8" class="tlineheightb">
+            <div class="span-sty">开票名称默认</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.openTickName }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-table :key="tableKey" :data="formobj.finBillVehicles" :index="index" border style="width: 100%">
+          <el-table-column fixed width="80px" label="序号" type="index" :index="index + 1" align="center"/>
+          <el-table-column label="车架号" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.vinNo }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="合格证状态" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.certificateStateValue }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="开票类型" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.billTypeValue }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="开票名称" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.openTickName }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="开票信息" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.openTickRemarks }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-row>
+          <el-col :span="8">
+            <div class="span-sty">欠款金额合计</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.arrearsMoney }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">承诺回款日期</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.returnedMoneyDate }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">是否领取发票和合格证原件</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.isLQOrigInvoice }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <div class="span-sty">欠款开票原因</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.arrearsOpenYYValue }}</span></el-form-item>
+          </el-col>
+          <el-col :span="16">
+            <el-form-item><span class="addinputInfo" style="margin-left: 0px !important;">{{ formobj.remarks }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <div v-show="formobj.finBillTrailers !== null">
+          <div class="title">挂车开票信息(挂车的开票类型、开票名称与主车相同)</div>
+          <el-table :key="billingKey" :data="formobj.finBillTrailers" :index="index" border style="width: 100%">
+            <el-table-column fixed width="80px" label="序号" type="index" :index="index + 1" align="center"/>
+            <el-table-column label="挂车车架号" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.gcVinNo }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="主车车架号" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.vinNo }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="开票金额" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.oneBillMoney }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="title">证件(营业执照或身份证)</div>
+        <el-row>
+          <el-col :span="24">
+            <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in image_list1" :key="index" :src="item" :preview-src-list="image_list1"></el-image>
+          </el-col>
+        </el-row>
+        <div class="title">车辆买卖合同</div>
+        <el-row>
+          <el-col :span="24">
+            <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in image_list2" :key="index" :src="item" :preview-src-list="image_list2"></el-image>
+          </el-col>
+        </el-row>
+        <div class="title">车辆登记合同(开票名称与客户名称不一致时上传)</div>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item>
+              <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in image_list4" :key="index" :src="item" :preview-src-list="image_list4"></el-image>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <div v-show="formobj.isLQOrigInvoice == '是'">
+          <div class="title">《欠款承诺书》(欠款人、担保人同签)</div>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item>
+                <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in image_list5" :key="index" :src="item" :preview-src-list="image_list5"></el-image>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <div class="title">《公司股东会对外担保决议》(公司担保)</div>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item>
+                <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in image_list6" :key="index" :src="item" :preview-src-list="image_list6"></el-image>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <div class="title">《责任人担保承诺书》</div>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item>
+                <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in image_list7" :key="index" :src="item" :preview-src-list="image_list7"></el-image>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <div class="title">资方信审截图</div>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item>
+                <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in image_list8" :key="index" :src="item" :preview-src-list="image_list8"></el-image>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { fetchDetailsBySid, createPdf } from '@/api/anruifinmanagement/arrearsbilling'
+import { getStorage } from '@/utils/auth'
+
+export default {
+  name: 'arrearsbillingInfo',
+  data() {
+    return {
+      viewTitle: '',
+      tableKey: 0,
+      billingKey: 1,
+      index: 0,
+      image_list1: [],
+      image_list2: [],
+      image_list3: [],
+      image_list4: [],
+      image_list5: [],
+      image_list6: [],
+      image_list7: [],
+      image_list8: [],
+      formobj: {
+        applyDate: '',
+        arrearsMoney: '',
+        arrearsOpenYYKey: '',
+        arrearsOpenYYValue: '',
+        billNo: '',
+        billStateKey: '',
+        billStateValue: '',
+        carBuyContractImages: [],
+        cldjhtApplicationAppendxs: [],
+        contractNo: '',
+        contractSid: '',
+        createByName: '',
+        customerName: '',
+        customerSid: '',
+        deptName: '',
+        deptSid: '',
+        finBillTrailers: [],
+        finBillVehicles: [],
+        isDelayBill: '',
+        isHighAndLowOpen: '',
+        isLQOrigInvoice: '',
+        khkpsqsApplicationAppendxs: [],
+        kpxxqrsApplicationAppendxs: [],
+        modelName: '',
+        modelSid: '',
+        nodeSid: '',
+        nodeState: '',
+        oneBillMoney: '',
+        openTickName: '',
+        openTickSid: '',
+        openTickTypeKey: '',
+        openTickTypeValue: '',
+        openTickUnitName: '',
+        openTickUnitSid: '',
+        orgSidPath: '',
+        pcgsgdhdwdbjy: [],
+        pczfxsjt: [],
+        pczrrdbcns: [],
+        procDefId: '',
+        procInstSid: '',
+        remarks: '',
+        returnedMoneyDate: '',
+        saleDeptName: '',
+        saleDeptSid: '',
+        saleTypeKey: '',
+        saleTypeValue: '',
+        sid: '',
+        staffName: '',
+        staffSid: '',
+        totalBillMoney: '',
+        useOrgSid: '',
+        createBySid: '',
+        zjApplicationAppendxs: [],
+        arrearsCollectionAppendxs: []
+      },
+      rules: {}
+    }
+  },
+
+  methods: {
+    showInfo(row) {
+      this.viewTitle = '欠款开票详情'
+      fetchDetailsBySid(row.sid).then((res) => {
+        if (res.success) {
+          this.formobj = res.data
+          if (this.formobj.zjApplicationAppendxs.length > 0) {
+            this.formobj.zjApplicationAppendxs.forEach((e) => {
+              this.image_list1.push(e.fileUrl)
+            })
+          }
+          if (this.formobj.carBuyContractImages.length > 0) {
+            this.formobj.carBuyContractImages.forEach((e) => {
+              this.image_list2.push(e.fileUrl)
+            })
+          }
+          if (this.formobj.cldjhtApplicationAppendxs.length > 0) {
+            this.formobj.cldjhtApplicationAppendxs.forEach((e) => {
+              this.image_list4.push(e.fileUrl)
+            })
+          }
+          if (this.formobj.arrearsCollectionAppendxs.length > 0) {
+            this.formobj.arrearsCollectionAppendxs.forEach((e) => {
+              this.image_list5.push(e.fileUrl)
+            })
+          }
+          if (this.formobj.pcgsgdhdwdbjy.length > 0) {
+            this.formobj.pcgsgdhdwdbjy.forEach((e) => {
+              this.image_list6.push(e.fileUrl)
+            })
+          }
+          if (this.formobj.pczrrdbcns.length > 0) {
+            this.formobj.pczrrdbcns.forEach((e) => {
+              this.image_list7.push(e.fileUrl)
+            })
+          }
+          if (this.formobj.pczfxsjt.length > 0) {
+            this.formobj.pczfxsjt.forEach((e) => {
+              this.image_list8.push(e.fileUrl)
+            })
+          }
+        }
+      })
+    },
+    handlePrint() {
+      createPdf({ sid: this.formobj.sid, userName: window.sessionStorage.getItem('name') }).then((resp) => {
+        if (resp.success) {
+          var xhr = new XMLHttpRequest()
+          xhr.open('GET', process.env.VUE_APP_BASE_API + '/base/file/download?filePath=' + resp.data + '&outFileName=' + '财务', true)
+          xhr.setRequestHeader('token', getStorage())
+          xhr.responseType = 'blob'
+          xhr.onload = function(e) {
+            // 如果请求执行成功
+            var blob = this.response
+            var filename = resp.data.substring(resp.data.lastIndexOf('/') + 1)
+            var a = document.createElement('a')
+            // blob.type="application/octet-stream";
+            // 创键临时url对象
+            var url = URL.createObjectURL(blob)
+            a.href = url
+            a.download = filename
+            a.click()
+            // 释放之前创建的URL对象
+            window.URL.revokeObjectURL(url)
+          }
+          // 发送请求
+          xhr.send()
+        }
+      })
+    },
+    // 关闭、返回到列表页面
+    handleReturn() {
+      this.image_list1 = []
+      this.image_list2 = []
+      this.image_list3 = []
+      this.image_list4 = []
+      this.image_list5 = []
+      this.image_list6 = []
+      this.image_list7 = []
+      this.image_list8 = []
+      this.$emit('doback')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.span-sty {
+  width: 190px !important;
+}
+.addinputInfo {
+  margin-left: 180px !important;
+}
+.tlineheightb {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+/deep/ .tlineheightb .el-form-item .el-form-item__content .addinputInfo {
+  line-height: 15px !important;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+</style>
diff --git a/anrui-buscenter/anrui-buscenter-ui/src/views/teshushenpi/debtrelease/relation/arrearscollectionInfo.vue b/anrui-buscenter/anrui-buscenter-ui/src/views/teshushenpi/debtrelease/relation/arrearscollectionInfo.vue
new file mode 100644
index 0000000000..5c959aac65
--- /dev/null
+++ b/anrui-buscenter/anrui-buscenter-ui/src/views/teshushenpi/debtrelease/relation/arrearscollectionInfo.vue
@@ -0,0 +1,345 @@
+<template>
+  <div class="app-container">
+    <!--标题按钮部分开始-->
+    <div class="tab-header webtop">
+      <!--标题-->
+      <div>{{ viewTitle }}</div>
+      <!--start 新增修改按钮-->
+      <div>
+        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
+      </div>
+      <!--end 添加修改按钮-->
+    </div>
+    <!--按钮部分结束-->
+    <div class="listconadd">
+      <div class="titwu">欠款领票及领手续</div>
+      <el-form ref="form_obj" :model="formobj" :rules="rules" class="formaddcopy02">
+        <el-row style="border-top: 1px solid #E0E3EB">
+          <el-col :span="8">
+            <div class="span-sty">发起人</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.createByName }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">发起部门</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.deptName }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">发起日期</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.applyDate }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <div class="span-sty">销售专员</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.staffName }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">销售部门</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.saleDeptName }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">销售类型</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.saleTypeValue }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <div class="span-sty">合同编号</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.contractNo }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8" class="tlineheightb">
+            <div class="span-sty">开票单位</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.openTickUnitName }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">客户名称</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.customerName }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <div class="title">主车开票信息</div>
+        <el-table :key="tableKey" :data="formobj.finBillVehicles" :index="index" border style="width: 100%">
+          <el-table-column fixed width="80px" label="序号" type="index" :index="index + 1" align="center"/>
+          <el-table-column label="车架号" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.vinNo }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="开票类型" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.billTypeValue }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="开票名称" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.openTickName }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="开票信息" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.openTickRemarks }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="开票金额" align="center">
+            <template>
+              <span>{{ formobj.oneBillMoney }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="合格证状态" align="center">
+            <template slot-scope="scope">
+              <span class="bluezi" @click="handleLook(scope.row.certificatePhoto)">{{ scope.row.certificateStateValue }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-row>
+          <el-col :span="24">
+            <div class="span-sty">开票金额合计</div>
+            <el-form-item><span class="addinputInfo">{{ totalBillMoney() }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="span-sty">欠款金额</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.arrearsMoney }}</span></el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <div class="span-sty">承诺回款日期</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.returnedMoneyDate }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <div class="span-sty">欠款开票原因</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.arrearsOpenYYValue }}</span></el-form-item>
+          </el-col>
+          <el-col :span="16">
+            <el-form-item><span class="addinputInfo" style="margin-left: 0px !important;">{{ formobj.remarks }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <div v-if="formobj.finBillTrailers !== null">
+          <div class="title">挂车开票信息</div>
+          <el-table :key="billingKey" :data="formobj.finBillTrailers" :index="index" border style="width: 100%">
+            <el-table-column fixed width="80px" label="序号" type="index" :index="index + 1" align="center"/>
+            <el-table-column label="挂车车架号" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.gcVinNo }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="主车车架号" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.vinNo }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="开票类型" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.billTypeValue }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="开票名称" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.openTickName }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="开票信息" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.invoiceInfo }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="开票金额" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.oneBillMoney }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="合格证" align="center">
+              <template slot-scope="scope">
+                <span class="bluezi" @click="handleLook(scope.row.hgzImageUrl)">查看</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <el-row>
+          <el-col :span="24">
+            <div class="span-sty">提前领取发票原因</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.reason }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <div class="title">《欠款承诺书》(欠款人、担保人同签)</div>
+        <el-row>
+          <el-col :span="24">
+            <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in image_list1" :key="index" :src="item" :preview-src-list="image_list1"></el-image>
+          </el-col>
+        </el-row>
+        <div class="title">《公司股东会对外担保决议》(公司担保)</div>
+        <el-row>
+          <el-col :span="24">
+            <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in image_list2" :key="index" :src="item" :preview-src-list="image_list2"></el-image>
+          </el-col>
+        </el-row>
+        <div class="title">《责任人担保承诺书》</div>
+        <el-row>
+          <el-col :span="24">
+            <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in image_list3" :key="index" :src="item" :preview-src-list="image_list3"></el-image>
+          </el-col>
+        </el-row>
+        <div class="title">资方信审截图</div>
+        <el-row>
+          <el-col :span="24">
+            <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in image_list4" :key="index" :src="item" :preview-src-list="image_list4"></el-image>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
+      <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in srcList" :key="index" :src="item" :preview-src-list="srcList"></el-image>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { fetchDetailsBySid } from '@/api/anruifinmanagement/arrearscollection'
+export default {
+  name: 'ArrearsScollectionInfo',
+  data() {
+    return {
+      viewTitle: '',
+      dialogVisible: false,
+      srcList: [],
+      tableKey: 0,
+      billingKey: 1,
+      index: 0,
+      image_list1: [],
+      image_list2: [],
+      image_list3: [],
+      image_list4: [],
+      formobj: {
+        applyDate: '',
+        arrearsMoney: '',
+        arrearsOpenYYKey: '',
+        arrearsOpenYYValue: '',
+        billNo: '',
+        billStateKey: '',
+        billStateValue: '',
+        cldjhtApplicationAppendxs: [],
+        contractNo: '',
+        contractSid: '',
+        createByName: '',
+        customerName: '',
+        customerSid: '',
+        deptName: '',
+        deptSid: '',
+        finBillTrailers: [],
+        finBillVehicles: [],
+        fjApplicationAppendxs: [],
+        isDelayBill: '',
+        isHighAndLowOpen: '',
+        isLQOrigInvoice: '',
+        khkpsqsApplicationAppendxs: [],
+        kpxxqrsApplicationAppendxs: [],
+        modelName: '',
+        modelSid: '',
+        nodeSid: '',
+        nodeState: '',
+        oneBillMoney: '',
+        openTickName: '',
+        openTickSid: '',
+        openTickTypeKey: '',
+        openTickTypeValue: '',
+        openTickUnitName: '',
+        openTickUnitSid: '',
+        orgSidPath: '',
+        pcgsgdhdwdbjy: [],
+        pczfxsjt: [],
+        pczrrdbcns: [],
+        procDefId: '',
+        procInstSid: '',
+        remarks: '',
+        returnedMoneyDate: '',
+        saleDeptName: '',
+        saleDeptSid: '',
+        saleTypeKey: '',
+        saleTypeValue: '',
+        sid: '',
+        staffName: '',
+        staffSid: '',
+        totalBillMoney: '',
+        useOrgSid: '',
+        createBySid: '',
+        zjApplicationAppendxs: []
+      },
+      rules: {}
+    }
+  },
+
+  methods: {
+    showInfo(row) {
+      this.viewTitle = '欠款领票及领手续'
+      fetchDetailsBySid(row.sid).then((res) => {
+        if (res.success) {
+          this.formobj = res.data
+          if (this.formobj.fjApplicationAppendxs.length > 0) {
+            this.formobj.fjApplicationAppendxs.forEach((e) => {
+              this.image_list1.push(e.fileUrl)
+            })
+          }
+          if (this.formobj.pcgsgdhdwdbjy.length > 0) {
+            this.formobj.pcgsgdhdwdbjy.forEach((e) => {
+              this.image_list2.push(e.fileUrl)
+            })
+          }
+          if (this.formobj.pczrrdbcns.length > 0) {
+            this.formobj.pczrrdbcns.forEach((e) => {
+              this.image_list3.push(e.fileUrl)
+            })
+          }
+          if (this.formobj.pczfxsjt.length > 0) {
+            this.formobj.pczfxsjt.forEach((e) => {
+              this.image_list4.push(e.fileUrl)
+            })
+          }
+        }
+      })
+    },
+    totalBillMoney() {
+      var aa = 0
+      if (this.formobj.finBillVehicles.length > 0) {
+        aa = parseInt(this.formobj.finBillVehicles.length) * parseInt(this.formobj.oneBillMoney)
+      }
+      return aa
+    },
+    handleLook(row) {
+      this.srcList = []
+      this.dialogVisible = true
+      this.srcList = row
+    },
+    // 关闭、返回到列表页面
+    handleReturn() {
+      this.image_list1 = []
+      this.image_list2 = []
+      this.image_list3 = []
+      this.image_list4 = []
+      this.$emit('doback')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.span-sty {
+  width: 130px !important;
+}
+.addinputInfo {
+  margin-left: 120px !important;
+}
+.tlineheightb {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+/deep/ .tlineheightb .el-form-item .el-form-item__content .addinputInfo {
+  line-height: 15px !important;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+</style>
diff --git a/anrui-buscenter/anrui-buscenter-ui/src/views/workflow/qiankuanchukuFlow/debtreleaseDaiBan.vue b/anrui-buscenter/anrui-buscenter-ui/src/views/workflow/qiankuanchukuFlow/debtreleaseDaiBan.vue
index 2b5fd223d6..733458e76b 100644
--- a/anrui-buscenter/anrui-buscenter-ui/src/views/workflow/qiankuanchukuFlow/debtreleaseDaiBan.vue
+++ b/anrui-buscenter/anrui-buscenter-ui/src/views/workflow/qiankuanchukuFlow/debtreleaseDaiBan.vue
@@ -149,6 +149,16 @@
                 <span>{{ remarks(scope.row) }}</span>
               </template>
             </el-table-column>
+            <el-table-column label="欠款开票" align="center" width="100">
+              <template slot-scope="scope">
+                <span class="bluezi" @click="lookQKKP(scope.row)">查看</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="欠款领票" align="center" width="100">
+              <template slot-scope="scope">
+                <span class="bluezi" @click="lookQKLP(scope.row)">查看</span>
+              </template>
+            </el-table-column>
             <el-table-column v-if="formobj.paymentMethodKey == '2'" label="放款资料是否齐全" align="center" width="170">
               <template slot-scope="scope">
                 <span>{{ scope.row.realBuyer.zlStateValue }}</span>
@@ -196,6 +206,10 @@
     <user-info-look v-show="viewState == 2" ref="divUserInfo" @doback="resetState"/>
     <guacheInfo v-show="viewState == 3" ref="divCheInfo" @doback="resetState"/>
     <shangzhuangInfo v-show="viewState == 4" ref="divZhuangInfo" @doback="resetState"/>
+    <!-- 查看欠款开票信息 -->
+    <arrearsbillingInfo v-show="viewState == 5" ref="divQKKP" @doback="resetState"/>
+    <!-- 查看欠款领票信息 -->
+    <arrearscollectionInfo v-show="viewState == 6" ref="divQKLP" @doback="resetState"/>
     <!-- 选择待办人 的弹出框-->
     <el-dialog title="填写审批意见" :visible.sync="nodeDialogVisible" width="80%">
       <el-form class="formadd" >
@@ -242,6 +256,8 @@ import { getRetrievalApplyInfoBySid, trailerList, complete, breakProcess, reject
 import userInfoLook from '../chukuguanliFlow/chukuguanli/relation/userInfo'
 import guacheInfo from '../chukuguanliFlow/chukuguanli/relation/guacheInfo'
 import shangzhuangInfo from '../chukuguanliFlow/chukuguanli/relation/shangzhuangInfo'
+import arrearsbillingInfo from './relation/arrearsbillingInfo'
+import arrearscollectionInfo from './relation/arrearscollectionInfo'
 import { selectStaffListss } from '@/api/dictcommons/dictcommons'
 
 export default {
@@ -249,7 +265,9 @@ export default {
   components: {
     userInfoLook,
     guacheInfo,
-    shangzhuangInfo
+    shangzhuangInfo,
+    arrearsbillingInfo,
+    arrearscollectionInfo
   },
   data() {
     return {
@@ -427,6 +445,24 @@ export default {
       this.viewState = 2
       this.$refs['divUserInfo'].showInfo(this.formobj.contractId, row)
     },
+    // 查看欠款开票详情
+    lookQKKP(row) {
+      if (row.qkKpSid !== '' && row.qkKpSid !== null) {
+        this.viewState = 5
+        this.$refs['divQKKP'].showInfo({ sid: row.qkKpSid })
+      } else {
+        this.$message({ showClose: true, type: 'error', message: '无欠款开票记录' })
+      }
+    },
+    // 查看欠款领票详情
+    lookQKLP(row) {
+      if (row.qkLpSid !== '' && row.qkLpSid !== null) {
+        this.viewState = 6
+        this.$refs['divQKLP'].showInfo({ sid: row.qkLpSid })
+      } else {
+        this.$message({ showClose: true, type: 'error', message: '无欠款领票记录' })
+      }
+    },
     // ------------ 功能实现 ------------
     // 加签
     openCountersign(val) {
diff --git a/anrui-buscenter/anrui-buscenter-ui/src/views/workflow/qiankuanchukuFlow/debtreleaseEdit.vue b/anrui-buscenter/anrui-buscenter-ui/src/views/workflow/qiankuanchukuFlow/debtreleaseEdit.vue
index 0a80743e2e..e840f507e8 100644
--- a/anrui-buscenter/anrui-buscenter-ui/src/views/workflow/qiankuanchukuFlow/debtreleaseEdit.vue
+++ b/anrui-buscenter/anrui-buscenter-ui/src/views/workflow/qiankuanchukuFlow/debtreleaseEdit.vue
@@ -175,6 +175,16 @@
                 <span>{{ remarks(scope.row) }}</span>
               </template>
             </el-table-column>
+            <el-table-column label="欠款开票" align="center" width="100">
+              <template slot-scope="scope">
+                <span class="bluezi" @click="lookQKKP(scope.row)">查看</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="欠款领票" align="center" width="100">
+              <template slot-scope="scope">
+                <span class="bluezi" @click="lookQKLP(scope.row)">查看</span>
+              </template>
+            </el-table-column>
             <el-table-column v-if="formobj.paymentMethodKey == '2'" label="放款资料是否齐全" align="center" width="170">
               <template slot-scope="scope">
                 <span>{{ scope.row.realBuyer.zlStateValue }}</span>
@@ -233,6 +243,10 @@
     <selectpackage v-show="viewState == 7" ref="divSelectPackAge" @backData="backPackAge" @doback="resetState"/>
     <!-- 查看上装信息 -->
     <shangzhuangInfo v-show="viewState == 8" ref="divZhuangInfo" @doback="resetState"/>
+    <!-- 查看欠款开票信息 -->
+    <arrearsbillingInfo v-show="viewState == 9" ref="divQKKP" @doback="resetState"/>
+    <!-- 查看欠款领票信息 -->
+    <arrearscollectionInfo v-show="viewState == 10" ref="divQKLP" @doback="resetState"/>
   </div>
 </template>
 
@@ -241,6 +255,8 @@ import { saveOrUpdate, submitInfo, getRetrievalApplyInfo, selectInfo, trailerLis
 import { selectCustomerList } from '@/api/dictcommons/dictcommons'
 import upload from '@/components/uploadFile/upload'
 import selectVehicle from './relation/selectVehicle'
+import arrearsbillingInfo from './relation/arrearsbillingInfo'
+import arrearscollectionInfo from './relation/arrearscollectionInfo'
 import userInfoAdd from '../chukuguanliFlow/chukuguanli/relation/userEdit'
 import userInfoLook from '../chukuguanliFlow/chukuguanli/relation/userInfo'
 import guacheInfo from '../chukuguanliFlow/chukuguanli/relation/guacheInfo'
@@ -256,7 +272,9 @@ export default {
     userInfoLook,
     guacheInfo,
     selectpackage,
-    shangzhuangInfo
+    shangzhuangInfo,
+    arrearsbillingInfo,
+    arrearscollectionInfo
   },
   data() {
     return {
@@ -658,6 +676,22 @@ export default {
     resetState() {
       this.viewState = 1
     },
+    lookQKKP(row) {
+      if (row.qkKpSid !== '' && row.qkKpSid !== null) {
+        this.viewState = 9
+        this.$refs['divQKKP'].showInfo({ sid: row.qkKpSid })
+      } else {
+        this.$message({ showClose: true, type: 'error', message: '无欠款开票记录' })
+      }
+    },
+    lookQKLP(row) {
+      if (row.qkLpSid !== '' && row.qkLpSid !== null) {
+        this.viewState = 10
+        this.$refs['divQKLP'].showInfo({ sid: row.qkLpSid })
+      } else {
+        this.$message({ showClose: true, type: 'error', message: '无欠款领票记录' })
+      }
+    },
     // ------------ 功能实现 ------------
     // 添加数据
     handleSave() {
diff --git a/anrui-buscenter/anrui-buscenter-ui/src/views/workflow/qiankuanchukuFlow/debtreleaseYiBan.vue b/anrui-buscenter/anrui-buscenter-ui/src/views/workflow/qiankuanchukuFlow/debtreleaseYiBan.vue
index 3128efdd6a..57b4ffc22a 100644
--- a/anrui-buscenter/anrui-buscenter-ui/src/views/workflow/qiankuanchukuFlow/debtreleaseYiBan.vue
+++ b/anrui-buscenter/anrui-buscenter-ui/src/views/workflow/qiankuanchukuFlow/debtreleaseYiBan.vue
@@ -146,6 +146,16 @@
                 <span>{{ remarks(scope.row) }}</span>
               </template>
             </el-table-column>
+            <el-table-column label="欠款开票" align="center" width="100">
+              <template slot-scope="scope">
+                <span class="bluezi" @click="lookQKKP(scope.row)">查看</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="欠款领票" align="center" width="100">
+              <template slot-scope="scope">
+                <span class="bluezi" @click="lookQKLP(scope.row)">查看</span>
+              </template>
+            </el-table-column>
             <el-table-column v-if="formobj.paymentMethodKey == '2'" label="放款资料是否齐全" align="center" width="170">
               <template slot-scope="scope">
                 <span>{{ scope.row.realBuyer.zlStateValue }}</span>
@@ -193,6 +203,10 @@
     <user-info-look v-show="viewState == 2" ref="divUserInfo" @doback="resetState"/>
     <guacheInfo v-show="viewState == 3" ref="divCheInfo" @doback="resetState"/>
     <shangzhuangInfo v-show="viewState == 4" ref="divZhuangInfo" @doback="resetState"/>
+    <!-- 查看欠款开票信息 -->
+    <arrearsbillingInfo v-show="viewState == 5" ref="divQKKP" @doback="resetState"/>
+    <!-- 查看欠款领票信息 -->
+    <arrearscollectionInfo v-show="viewState == 6" ref="divQKLP" @doback="resetState"/>
   </div>
 </template>
 
@@ -201,13 +215,17 @@ import { getRetrievalApplyInfoBySid, trailerList, revokeProcess } from '@/api/te
 import userInfoLook from '../chukuguanliFlow/chukuguanli/relation/userInfo'
 import guacheInfo from '../chukuguanliFlow/chukuguanli/relation/guacheInfo'
 import shangzhuangInfo from '../chukuguanliFlow/chukuguanli/relation/shangzhuangInfo'
+import arrearsbillingInfo from './relation/arrearsbillingInfo'
+import arrearscollectionInfo from './relation/arrearscollectionInfo'
 
 export default {
   name: 'DebtReleaseYiBan',
   components: {
     userInfoLook,
     guacheInfo,
-    shangzhuangInfo
+    shangzhuangInfo,
+    arrearsbillingInfo,
+    arrearscollectionInfo
   },
   data() {
     return {
@@ -352,6 +370,24 @@ export default {
       this.viewState = 2
       this.$refs['divUserInfo'].showInfo(this.formobj.contractId, row)
     },
+    // 查看欠款开票详情
+    lookQKKP(row) {
+      if (row.qkKpSid !== '' && row.qkKpSid !== null) {
+        this.viewState = 5
+        this.$refs['divQKKP'].showInfo({ sid: row.qkKpSid })
+      } else {
+        this.$message({ showClose: true, type: 'error', message: '无欠款开票记录' })
+      }
+    },
+    // 查看欠款领票详情
+    lookQKLP(row) {
+      if (row.qkLpSid !== '' && row.qkLpSid !== null) {
+        this.viewState = 6
+        this.$refs['divQKLP'].showInfo({ sid: row.qkLpSid })
+      } else {
+        this.$message({ showClose: true, type: 'error', message: '无欠款领票记录' })
+      }
+    },
     // ------------ 功能实现 ------------
     /** 确认撤回任务 */
     openRevoke() {
diff --git a/anrui-buscenter/anrui-buscenter-ui/src/views/workflow/qiankuanchukuFlow/relation/arrearsbillingInfo.vue b/anrui-buscenter/anrui-buscenter-ui/src/views/workflow/qiankuanchukuFlow/relation/arrearsbillingInfo.vue
new file mode 100644
index 0000000000..0b844b3083
--- /dev/null
+++ b/anrui-buscenter/anrui-buscenter-ui/src/views/workflow/qiankuanchukuFlow/relation/arrearsbillingInfo.vue
@@ -0,0 +1,397 @@
+<template>
+  <div class="app-container">
+    <!--标题按钮部分开始-->
+    <div class="tab-header webtop">
+      <!--标题-->
+      <div>{{ viewTitle }}</div>
+      <!--start 新增修改按钮-->
+      <div>
+        <el-button type="primary" size="small" @click="handlePrint()">打印</el-button>
+        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
+      </div>
+      <!--end 添加修改按钮-->
+    </div>
+    <!--按钮部分结束-->
+    <div class="">
+      <div class="titwu">欠款开票申请单</div>
+      <el-form ref="form_obj" :model="formobj" :rules="rules" class="formaddcopy02">
+        <el-row style="border-top: 1px solid #E0E3EB">
+          <el-col :span="8">
+            <div class="span-sty">发起人</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.createByName }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">发起部门</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.deptName }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">发起日期</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.applyDate }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <div class="span-sty">销售专员</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.staffName }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">销售部门</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.saleDeptName }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">销售类型</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.saleTypeValue }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <div class="span-sty">合同编号</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.contractNo }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8" class="tlineheightb">
+            <div class="span-sty">开票单位</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.openTickUnitName }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">客户名称</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.customerName }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <div class="title">主车开票信息</div>
+        <el-row>
+          <el-col :span="8">
+            <div class="span-sty">单台开票金额</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.oneBillMoney }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">开票类型默认</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.openTickTypeValue }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8" class="tlineheightb">
+            <div class="span-sty">开票名称默认</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.openTickName }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-table :key="tableKey" :data="formobj.finBillVehicles" :index="index" border style="width: 100%">
+          <el-table-column fixed width="80px" label="序号" type="index" :index="index + 1" align="center"/>
+          <el-table-column label="车架号" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.vinNo }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="合格证状态" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.certificateStateValue }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="开票类型" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.billTypeValue }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="开票名称" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.openTickName }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="开票信息" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.openTickRemarks }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-row>
+          <el-col :span="8">
+            <div class="span-sty">欠款金额合计</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.arrearsMoney }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">承诺回款日期</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.returnedMoneyDate }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">是否领取发票和合格证原件</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.isLQOrigInvoice }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <div class="span-sty">欠款开票原因</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.arrearsOpenYYValue }}</span></el-form-item>
+          </el-col>
+          <el-col :span="16">
+            <el-form-item><span class="addinputInfo" style="margin-left: 0px !important;">{{ formobj.remarks }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <div v-show="formobj.finBillTrailers !== null">
+          <div class="title">挂车开票信息(挂车的开票类型、开票名称与主车相同)</div>
+          <el-table :key="billingKey" :data="formobj.finBillTrailers" :index="index" border style="width: 100%">
+            <el-table-column fixed width="80px" label="序号" type="index" :index="index + 1" align="center"/>
+            <el-table-column label="挂车车架号" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.gcVinNo }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="主车车架号" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.vinNo }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="开票金额" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.oneBillMoney }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="title">证件(营业执照或身份证)</div>
+        <el-row>
+          <el-col :span="24">
+            <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in image_list1" :key="index" :src="item" :preview-src-list="image_list1"></el-image>
+          </el-col>
+        </el-row>
+        <div class="title">车辆买卖合同</div>
+        <el-row>
+          <el-col :span="24">
+            <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in image_list2" :key="index" :src="item" :preview-src-list="image_list2"></el-image>
+          </el-col>
+        </el-row>
+        <div class="title">车辆登记合同(开票名称与客户名称不一致时上传)</div>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item>
+              <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in image_list4" :key="index" :src="item" :preview-src-list="image_list4"></el-image>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <div v-show="formobj.isLQOrigInvoice == '是'">
+          <div class="title">《欠款承诺书》(欠款人、担保人同签)</div>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item>
+                <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in image_list5" :key="index" :src="item" :preview-src-list="image_list5"></el-image>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <div class="title">《公司股东会对外担保决议》(公司担保)</div>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item>
+                <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in image_list6" :key="index" :src="item" :preview-src-list="image_list6"></el-image>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <div class="title">《责任人担保承诺书》</div>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item>
+                <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in image_list7" :key="index" :src="item" :preview-src-list="image_list7"></el-image>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <div class="title">资方信审截图</div>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item>
+                <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in image_list8" :key="index" :src="item" :preview-src-list="image_list8"></el-image>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { fetchDetailsBySid, createPdf } from '@/api/anruifinmanagement/arrearsbilling'
+import { getStorage } from '@/utils/auth'
+
+export default {
+  name: 'arrearsbillingInfo',
+  data() {
+    return {
+      viewTitle: '',
+      tableKey: 0,
+      billingKey: 1,
+      index: 0,
+      image_list1: [],
+      image_list2: [],
+      image_list3: [],
+      image_list4: [],
+      image_list5: [],
+      image_list6: [],
+      image_list7: [],
+      image_list8: [],
+      formobj: {
+        applyDate: '',
+        arrearsMoney: '',
+        arrearsOpenYYKey: '',
+        arrearsOpenYYValue: '',
+        billNo: '',
+        billStateKey: '',
+        billStateValue: '',
+        carBuyContractImages: [],
+        cldjhtApplicationAppendxs: [],
+        contractNo: '',
+        contractSid: '',
+        createByName: '',
+        customerName: '',
+        customerSid: '',
+        deptName: '',
+        deptSid: '',
+        finBillTrailers: [],
+        finBillVehicles: [],
+        isDelayBill: '',
+        isHighAndLowOpen: '',
+        isLQOrigInvoice: '',
+        khkpsqsApplicationAppendxs: [],
+        kpxxqrsApplicationAppendxs: [],
+        modelName: '',
+        modelSid: '',
+        nodeSid: '',
+        nodeState: '',
+        oneBillMoney: '',
+        openTickName: '',
+        openTickSid: '',
+        openTickTypeKey: '',
+        openTickTypeValue: '',
+        openTickUnitName: '',
+        openTickUnitSid: '',
+        orgSidPath: '',
+        pcgsgdhdwdbjy: [],
+        pczfxsjt: [],
+        pczrrdbcns: [],
+        procDefId: '',
+        procInstSid: '',
+        remarks: '',
+        returnedMoneyDate: '',
+        saleDeptName: '',
+        saleDeptSid: '',
+        saleTypeKey: '',
+        saleTypeValue: '',
+        sid: '',
+        staffName: '',
+        staffSid: '',
+        totalBillMoney: '',
+        useOrgSid: '',
+        createBySid: '',
+        zjApplicationAppendxs: [],
+        arrearsCollectionAppendxs: []
+      },
+      rules: {}
+    }
+  },
+
+  methods: {
+    showInfo(row) {
+      this.viewTitle = '欠款开票详情'
+      fetchDetailsBySid(row.sid).then((res) => {
+        if (res.success) {
+          this.formobj = res.data
+          if (this.formobj.zjApplicationAppendxs.length > 0) {
+            this.formobj.zjApplicationAppendxs.forEach((e) => {
+              this.image_list1.push(e.fileUrl)
+            })
+          }
+          if (this.formobj.carBuyContractImages.length > 0) {
+            this.formobj.carBuyContractImages.forEach((e) => {
+              this.image_list2.push(e.fileUrl)
+            })
+          }
+          if (this.formobj.cldjhtApplicationAppendxs.length > 0) {
+            this.formobj.cldjhtApplicationAppendxs.forEach((e) => {
+              this.image_list4.push(e.fileUrl)
+            })
+          }
+          if (this.formobj.arrearsCollectionAppendxs.length > 0) {
+            this.formobj.arrearsCollectionAppendxs.forEach((e) => {
+              this.image_list5.push(e.fileUrl)
+            })
+          }
+          if (this.formobj.pcgsgdhdwdbjy.length > 0) {
+            this.formobj.pcgsgdhdwdbjy.forEach((e) => {
+              this.image_list6.push(e.fileUrl)
+            })
+          }
+          if (this.formobj.pczrrdbcns.length > 0) {
+            this.formobj.pczrrdbcns.forEach((e) => {
+              this.image_list7.push(e.fileUrl)
+            })
+          }
+          if (this.formobj.pczfxsjt.length > 0) {
+            this.formobj.pczfxsjt.forEach((e) => {
+              this.image_list8.push(e.fileUrl)
+            })
+          }
+        }
+      })
+    },
+    handlePrint() {
+      createPdf({ sid: this.formobj.sid, userName: window.sessionStorage.getItem('name') }).then((resp) => {
+        if (resp.success) {
+          var xhr = new XMLHttpRequest()
+          xhr.open('GET', process.env.VUE_APP_BASE_API + '/base/file/download?filePath=' + resp.data + '&outFileName=' + '财务', true)
+          xhr.setRequestHeader('token', getStorage())
+          xhr.responseType = 'blob'
+          xhr.onload = function(e) {
+            // 如果请求执行成功
+            var blob = this.response
+            var filename = resp.data.substring(resp.data.lastIndexOf('/') + 1)
+            var a = document.createElement('a')
+            // blob.type="application/octet-stream";
+            // 创键临时url对象
+            var url = URL.createObjectURL(blob)
+            a.href = url
+            a.download = filename
+            a.click()
+            // 释放之前创建的URL对象
+            window.URL.revokeObjectURL(url)
+          }
+          // 发送请求
+          xhr.send()
+        }
+      })
+    },
+    // 关闭、返回到列表页面
+    handleReturn() {
+      this.image_list1 = []
+      this.image_list2 = []
+      this.image_list3 = []
+      this.image_list4 = []
+      this.image_list5 = []
+      this.image_list6 = []
+      this.image_list7 = []
+      this.image_list8 = []
+      this.$emit('doback')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.span-sty {
+  width: 190px !important;
+}
+.addinputInfo {
+  margin-left: 180px !important;
+}
+.tlineheightb {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+/deep/ .tlineheightb .el-form-item .el-form-item__content .addinputInfo {
+  line-height: 15px !important;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+.titwu {
+  font-size: 28px;
+  text-align: center;
+  padding: 30px 0 20px 0;
+}
+</style>
diff --git a/anrui-buscenter/anrui-buscenter-ui/src/views/workflow/qiankuanchukuFlow/relation/arrearscollectionInfo.vue b/anrui-buscenter/anrui-buscenter-ui/src/views/workflow/qiankuanchukuFlow/relation/arrearscollectionInfo.vue
new file mode 100644
index 0000000000..abf795b049
--- /dev/null
+++ b/anrui-buscenter/anrui-buscenter-ui/src/views/workflow/qiankuanchukuFlow/relation/arrearscollectionInfo.vue
@@ -0,0 +1,350 @@
+<template>
+  <div class="app-container">
+    <!--标题按钮部分开始-->
+    <div class="tab-header webtop">
+      <!--标题-->
+      <div>{{ viewTitle }}</div>
+      <!--start 新增修改按钮-->
+      <div>
+        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
+      </div>
+      <!--end 添加修改按钮-->
+    </div>
+    <!--按钮部分结束-->
+    <div class="">
+      <div class="titwu">欠款领票及领手续</div>
+      <el-form ref="form_obj" :model="formobj" :rules="rules" class="formaddcopy02">
+        <el-row style="border-top: 1px solid #E0E3EB">
+          <el-col :span="8">
+            <div class="span-sty">发起人</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.createByName }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">发起部门</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.deptName }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">发起日期</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.applyDate }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <div class="span-sty">销售专员</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.staffName }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">销售部门</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.saleDeptName }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">销售类型</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.saleTypeValue }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <div class="span-sty">合同编号</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.contractNo }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8" class="tlineheightb">
+            <div class="span-sty">开票单位</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.openTickUnitName }}</span></el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <div class="span-sty">客户名称</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.customerName }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <div class="title">主车开票信息</div>
+        <el-table :key="tableKey" :data="formobj.finBillVehicles" :index="index" border style="width: 100%">
+          <el-table-column fixed width="80px" label="序号" type="index" :index="index + 1" align="center"/>
+          <el-table-column label="车架号" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.vinNo }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="开票类型" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.billTypeValue }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="开票名称" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.openTickName }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="开票信息" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.openTickRemarks }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="开票金额" align="center">
+            <template>
+              <span>{{ formobj.oneBillMoney }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="合格证状态" align="center">
+            <template slot-scope="scope">
+              <span class="bluezi" @click="handleLook(scope.row.certificatePhoto)">{{ scope.row.certificateStateValue }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-row>
+          <el-col :span="24">
+            <div class="span-sty">开票金额合计</div>
+            <el-form-item><span class="addinputInfo">{{ totalBillMoney() }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="span-sty">欠款金额</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.arrearsMoney }}</span></el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <div class="span-sty">承诺回款日期</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.returnedMoneyDate }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <div class="span-sty">欠款开票原因</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.arrearsOpenYYValue }}</span></el-form-item>
+          </el-col>
+          <el-col :span="16">
+            <el-form-item><span class="addinputInfo" style="margin-left: 0px !important;">{{ formobj.remarks }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <div v-if="formobj.finBillTrailers !== null">
+          <div class="title">挂车开票信息</div>
+          <el-table :key="billingKey" :data="formobj.finBillTrailers" :index="index" border style="width: 100%">
+            <el-table-column fixed width="80px" label="序号" type="index" :index="index + 1" align="center"/>
+            <el-table-column label="挂车车架号" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.gcVinNo }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="主车车架号" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.vinNo }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="开票类型" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.billTypeValue }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="开票名称" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.openTickName }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="开票信息" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.invoiceInfo }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="开票金额" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.oneBillMoney }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="合格证" align="center">
+              <template slot-scope="scope">
+                <span class="bluezi" @click="handleLook(scope.row.hgzImageUrl)">查看</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <el-row>
+          <el-col :span="24">
+            <div class="span-sty">提前领取发票原因</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.reason }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <div class="title">《欠款承诺书》(欠款人、担保人同签)</div>
+        <el-row>
+          <el-col :span="24">
+            <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in image_list1" :key="index" :src="item" :preview-src-list="image_list1"></el-image>
+          </el-col>
+        </el-row>
+        <div class="title">《公司股东会对外担保决议》(公司担保)</div>
+        <el-row>
+          <el-col :span="24">
+            <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in image_list2" :key="index" :src="item" :preview-src-list="image_list2"></el-image>
+          </el-col>
+        </el-row>
+        <div class="title">《责任人担保承诺书》</div>
+        <el-row>
+          <el-col :span="24">
+            <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in image_list3" :key="index" :src="item" :preview-src-list="image_list3"></el-image>
+          </el-col>
+        </el-row>
+        <div class="title">资方信审截图</div>
+        <el-row>
+          <el-col :span="24">
+            <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in image_list4" :key="index" :src="item" :preview-src-list="image_list4"></el-image>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
+      <el-image style="width: 178px;height: 178px;padding-left: 5px" v-for="(item,index) in srcList" :key="index" :src="item" :preview-src-list="srcList"></el-image>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { fetchDetailsBySid } from '@/api/anruifinmanagement/arrearscollection'
+export default {
+  name: 'ArrearsScollectionInfo',
+  data() {
+    return {
+      viewTitle: '',
+      dialogVisible: false,
+      srcList: [],
+      tableKey: 0,
+      billingKey: 1,
+      index: 0,
+      image_list1: [],
+      image_list2: [],
+      image_list3: [],
+      image_list4: [],
+      formobj: {
+        applyDate: '',
+        arrearsMoney: '',
+        arrearsOpenYYKey: '',
+        arrearsOpenYYValue: '',
+        billNo: '',
+        billStateKey: '',
+        billStateValue: '',
+        cldjhtApplicationAppendxs: [],
+        contractNo: '',
+        contractSid: '',
+        createByName: '',
+        customerName: '',
+        customerSid: '',
+        deptName: '',
+        deptSid: '',
+        finBillTrailers: [],
+        finBillVehicles: [],
+        fjApplicationAppendxs: [],
+        isDelayBill: '',
+        isHighAndLowOpen: '',
+        isLQOrigInvoice: '',
+        khkpsqsApplicationAppendxs: [],
+        kpxxqrsApplicationAppendxs: [],
+        modelName: '',
+        modelSid: '',
+        nodeSid: '',
+        nodeState: '',
+        oneBillMoney: '',
+        openTickName: '',
+        openTickSid: '',
+        openTickTypeKey: '',
+        openTickTypeValue: '',
+        openTickUnitName: '',
+        openTickUnitSid: '',
+        orgSidPath: '',
+        pcgsgdhdwdbjy: [],
+        pczfxsjt: [],
+        pczrrdbcns: [],
+        procDefId: '',
+        procInstSid: '',
+        remarks: '',
+        returnedMoneyDate: '',
+        saleDeptName: '',
+        saleDeptSid: '',
+        saleTypeKey: '',
+        saleTypeValue: '',
+        sid: '',
+        staffName: '',
+        staffSid: '',
+        totalBillMoney: '',
+        useOrgSid: '',
+        createBySid: '',
+        zjApplicationAppendxs: []
+      },
+      rules: {}
+    }
+  },
+
+  methods: {
+    showInfo(row) {
+      this.viewTitle = '欠款领票及领手续'
+      fetchDetailsBySid(row.sid).then((res) => {
+        if (res.success) {
+          this.formobj = res.data
+          if (this.formobj.fjApplicationAppendxs.length > 0) {
+            this.formobj.fjApplicationAppendxs.forEach((e) => {
+              this.image_list1.push(e.fileUrl)
+            })
+          }
+          if (this.formobj.pcgsgdhdwdbjy.length > 0) {
+            this.formobj.pcgsgdhdwdbjy.forEach((e) => {
+              this.image_list2.push(e.fileUrl)
+            })
+          }
+          if (this.formobj.pczrrdbcns.length > 0) {
+            this.formobj.pczrrdbcns.forEach((e) => {
+              this.image_list3.push(e.fileUrl)
+            })
+          }
+          if (this.formobj.pczfxsjt.length > 0) {
+            this.formobj.pczfxsjt.forEach((e) => {
+              this.image_list4.push(e.fileUrl)
+            })
+          }
+        }
+      })
+    },
+    totalBillMoney() {
+      var aa = 0
+      if (this.formobj.finBillVehicles.length > 0) {
+        aa = parseInt(this.formobj.finBillVehicles.length) * parseInt(this.formobj.oneBillMoney)
+      }
+      return aa
+    },
+    handleLook(row) {
+      this.srcList = []
+      this.dialogVisible = true
+      this.srcList = row
+    },
+    // 关闭、返回到列表页面
+    handleReturn() {
+      this.image_list1 = []
+      this.image_list2 = []
+      this.image_list3 = []
+      this.image_list4 = []
+      this.$emit('doback')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.span-sty {
+  width: 130px !important;
+}
+.addinputInfo {
+  margin-left: 120px !important;
+}
+.tlineheightb {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+/deep/ .tlineheightb .el-form-item .el-form-item__content .addinputInfo {
+  line-height: 15px !important;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+.titwu {
+  font-size: 28px;
+  text-align: center;
+  padding: 30px 0 20px 0;
+}
+</style>