前端 付款附加功能sdy

src/views/houseSelfCollect/paymentManagement.vue

@@ -87,13 +87,14 @@
       </template>
     </BaseHeaderLayout>
     <el-table
-      :data="paymentList.records"
+      :data="paymentList"
       style="width: 100%; margin-top: 20px"
       ref="paymentList"
       border
-      height="780"
+      height="600"
       @row-click="handleRowClick"
       @selection-change="handleSelectionChange"
+      :summary-method="getSummaries" show-summary
     >
       <el-table-column :selectable="selectInit" type="selection" width="55"></el-table-column>
       <el-table-column type="index" label="序号" width="50">
@@ -102,8 +103,12 @@
           <span v-else>{{ scope.$index + 1 }}</span>
         </template>
       </el-table-column>
-      <el-table-column class="table_td" prop="paymentNo" width="100" label="编号"></el-table-column>
-      <el-table-column class="table_td" prop="customerName" label="客户"></el-table-column>
+      <el-table-column class="table_td" prop="paymentNo" width="100" label="编号" sortable></el-table-column>
+      <el-table-column class="table_td" prop="customerName" label="客户" sortable>
+        <template slot-scope="scope">
+          <div @click="customer(scope.row)">{{scope.row.customerName}}</div>
+          </template>
+      </el-table-column>
       <el-table-column class="table_td" prop="carNo" label="车牌号"></el-table-column>
       <el-table-column class="table_td" prop="goodsName" width="100" label="货名"></el-table-column>
       <el-table-column class="table_td" prop="type" width="60" label="类型"></el-table-column>
@@ -118,7 +123,7 @@
           <div @click="showPayImg(scope.row)">{{ scope.row.amountEdPayable }}</div>
         </template>
       </el-table-column>
-      <el-table-column class="table_td" prop="updateDate" label="更新时间" width="90"></el-table-column>
+      <el-table-column class="table_td" prop="updateDate" label="更新时间" width="150" sortable></el-table-column>
       <el-table-column class="table_td" prop="status" width="100" label="状态">
         <template scope="scope">
           <span v-if="scope.row.approveStatus">{{ scope.row.approveStatus }}</span>
@@ -248,6 +253,84 @@
         </div>
       </el-dialog>
     </div>
+    <!--客户信息-->
+    <el-dialog
+      width="50%"
+      title="客户信息"
+      :visible.sync="customerInfo"
+      :append-to-body="true"
+    >
+      <el-form class="customer" :model="form">
+        <div v-if="customerlist.customerTypeFlag == '2'">
+          <h4>营业执照</h4>
+          <img width="50%" :src="customerlist.businessLicenseAddressUrl" alt class="img_css"/>
+          <el-form-item label="公司名称" label-width="100px">
+            {{ customerlist.compName }}
+          </el-form-item>
+          <el-form-item label="纳税人识别号" label-width="100px">
+            {{ customerlist.payTaxesCard }}
+          </el-form-item>
+        </div>
+        <div class="flex">
+          <div style="flex: 1; text-align: center">
+            <h4>身份证正面</h4>
+            <img width="100%" :src="customerlist.cardAddressUrl1" alt class="img_css"/>
+          </div>
+          <div style="flex: 1; text-align: center">
+            <h4>身份证反面</h4>
+            <img width="100%" :src="customerlist.cardAddressUrl2" alt class="img_css"/>
+          </div>
+        </div>
+        <el-form-item label="姓名" label-width="100px">
+          {{ customerlist.customerName }}
+        </el-form-item>
+        <el-form-item label="身份证号" label-width="100px">
+          {{ customerlist.customerNumberCard }}
+        </el-form-item>
+        <div class="flex">
+          <div style="flex: 1; text-align: center">
+            <h4>银行卡正面</h4>
+            <img width="100%" :src="customerlist.payeeAddressUrls[0]" alt class="img_css"/>
+          </div>
+          <div style="flex: 1; text-align: center">
+            <h4>银行卡反面</h4>
+            <img width="100%" :src="customerlist.payeeAddressUrls[1]" alt class="img_css"/>
+          </div>
+        </div>
+        <el-form-item label="银行卡号" label-width="100px">
+          {{ customerlist.bankCard }}
+        </el-form-item>
+        <el-form-item label="开户行" label-width="100px">
+          {{ customerlist.bankDeposit }}
+        </el-form-item>
+        <el-form-item label="开户支行" label-width="100px">
+          {{ customerlist.bankDepositBranch }}
+        </el-form-item>
+        <el-form-item
+          label="收款人姓名"
+          :label-width="formLabelWidth"
+          v-if="customerlist.customerTypeFlag == '1'"
+        >
+          {{ customerlist.payeeName }}
+        </el-form-item>
+        <el-form-item
+          label="收款人身份证号"
+          :label-width="formLabelWidth"
+          v-if="customerlist.customerTypeFlag == '1'"
+        >
+          {{ customerlist.payeeNumberCard }}
+        </el-form-item>
+        <el-form-item label="手机号" :label-width="formLabelWidth">
+          {{ customerlist.customerPhone }}
+        </el-form-item>
+        <el-form-item label="联系地址" :label-width="formLabelWidth">
+          {{ customerlist.compAddress }}
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button >取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -260,7 +343,7 @@ import {
   getCustomerLook,
   paymentCommit,
   getJurisdiction,
-  invoicing
+  invoicing,
 } from '@/model/houseSelfCollect/index'
 import { posthandle } from '@/model/purchasingManagement/index'
 import paymentPrint from './component/paymentPrint.vue'
@@ -274,6 +357,12 @@ export default {
       isShowPrintType2: true,
       isShowPrintType3: true,
       isShowPrintType4: true,
+      customerInfo:false,
+      form:{},
+      formLabelWidth:"300px",
+      customerlist:{
+        payeeAddressUrls:[],
+      },
       ruleForm: {
         type: [
           '打印身份证（正反面）',
@@ -384,6 +473,51 @@ export default {
       .catch(() => {
       })
     },
+    customer(row){
+      this.customerInfo = true
+      this.customerlist = row.identityAuthenticationInfo
+        this.customerlist.cardAddressUrl1 = this.customerlist.cardAddressUrl.split(',')[0]
+         this.customerlist.cardAddressUrl2 = this.customerlist.cardAddressUrl.split(',')[1]
+         this.customerlist.payeeAddressUrls = this.customerlist.payeeAddressUrl.split(',')
+    },
+    //合计
+    getSummaries(param){
+      const {
+					columns,
+					data
+				} = param
+				const sums = []
+				columns.forEach((column, index) => {
+					if (index === 0) {
+						sums[index] = '合计'
+					} else if (
+						index === 10 ||
+						index === 11 ||
+            index === 12 ||
+            index === 13
+					) {
+						const values = data.map((item) => Number(item[column.property]))
+						if (!values.every((value) => isNaN(value))) {
+							sums[index] = values.reduce((prev, curr) => {
+								const value = Number(curr)
+								if (!isNaN(value)) {
+									return prev + curr
+								} else {
+									return prev
+								}
+							}, 0)
+						} else {
+							sums[index] = '元'
+						}
+					} else {
+						sums[index] = '--'
+					}
+				})
+				// sums[6]=sums[6].toFixed(2)
+				// sums[sums.length-2]=sums[sums.length-2].toFixed(2)
+				return sums
+
+    },
     selectType(val) {
       for (let i = 0; i < this.ruleForm.type.length; i++) {
         switch (this.ruleForm.type[i]) {
@@ -544,7 +678,7 @@ export default {
       })
         .toPromise()
         .then(response => {
-          this.paymentList = response
+          this.paymentList = response.records
           this.deptBudgetTotal = response.total
         })
       getJurisdiction({
@@ -1014,4 +1148,8 @@ table {
 .print-type-checkbox {
   padding-left: 20px;
 }
+.img_css{
+  width: 50%;
+  height: 220px;
+}
 </style>