费用管理弹窗样式修改

front-vue/src/components/Paying/index.vue

@@ -0,0 +1,99 @@
+<template>
+<el-dialog class="zap-paying-dialog" title="去缴费" :visible.sync="open" width="610px" append-to-body @close="closeHandler">
+        <!-- <el-row class="zap-paying-dialog__item" type="flex" align="middle">
+            <span class="zap-paying-dialog__label">缴费账户：</span>
+            <span class="zap-paying-dialog__value">37898789028981</span>
+        </el-row>
+        <el-row class="zap-paying-dialog__item" type="flex" align="middle">
+            <span class="zap-paying-dialog__label">余额：</span>
+            <el-row type="flex" align="middle">
+                <span class="zap-paying-dialog__value zap-paying-dialog__value--red">37898789028981</span>
+                <img class="zap-paying-dialog__refresh" src="../../assets/images/costManager/icon_refresh.png" alt="" @click="refreshHandler">
+            </el-row>
+        </el-row> -->
+        <el-row class="zap-paying-dialog__item" type="flex" align="middle">
+            <span class="zap-paying-dialog__label">手续费：</span>
+            <span class="zap-paying-dialog__value">¥{{payingMoney}}</span>
+        </el-row>
+        <el-row slot="footer" type="flex" justify="center" align="middle">
+            <el-button type="primary" @click="submitHandler">确 定</el-button>
+            <el-button @click="cancelHandler">取 消</el-button>
+        </el-row>
+    </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "Paying",
+  props: {
+    openPaying: {
+      type: Boolean,
+      default: false
+    },
+    payingMoney: {
+      type: String,
+      default: "--"
+    }
+  },
+  data () {
+    return {
+      open: this.openPaying
+    }
+  },
+  methods: {
+    closeHandler () {
+      this.$emit('close')
+    },
+    refreshHandler () {
+      this.$emit('refreshHandler')
+    },
+    submitHandler () {
+      this.$emit('submitHandler')
+    },
+    cancelHandler () {
+      this.$emit('cancelHandler')
+    }
+  },
+  watch: {
+    openPaying: {
+      immediate: true,
+      handler: function () {
+        this.open = this.openPaying
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.zap-paying-dialog {
+    .el-dialog__body {
+        padding: 24px 36px;
+    }
+}
+
+.zap-paying-dialog__item {
+    margin-bottom: 24px;
+    font-size: 14px;
+    color: #333333;
+}
+
+.zap-paying-dialog__label {
+    width: 70px;
+    margin-right: 24px;
+    text-align: right;
+}
+
+.zap-paying-dialog__value {}
+
+.zap-paying-dialog__value--red {
+    color: #FF2F2F;
+}
+
+.zap-paying-dialog__refresh {
+    width: 24px;
+    height: 24px;
+    margin-left: 24px;
+    cursor: pointer;
+}
+</style>

front-vue/src/views/service/cost/userCostManage.vue

@@ -1,7 +1,13 @@
 <template>
 <!-- ________________________________________融资企业用________________________________________________ -->
 <div class="app-container zap-main">
-    <search-bar :checkList="checkList" :tableList="tableList" :selfDom="selfDom" :tableId="tableId" @query="handleQuery" @reset="resetQuery">
+    <search-bar
+        :checkList="checkList"
+        :tableList="tableList"
+        :selfDom="selfDom"
+        :tableId="tableId"
+        @query="handleQuery"
+        @reset="resetQuery">
         <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="auto">
             <el-form-item label="类型" prop="zciQuery">
                 <el-select v-model="queryParams.zciQuery" clearable>
@@ -28,7 +34,13 @@
                 </el-select>
             </el-form-item>
             <el-form-item label="创建时间">
-                <el-date-picker v-model="dateRange" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+                <el-date-picker
+                    v-model="dateRange"
+                    value-format="yyyy-MM-dd"
+                    type="daterange"
+                    range-separator="-"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"></el-date-picker>
             </el-form-item>
         </el-form>
     </search-bar>
@@ -47,12 +59,42 @@
             <el-table-column label="融资编号" align="center" prop="zfrNumber" v-if="uncheckList.zfrNumber" />
             <el-table-column label="开立企业" align="center" prop="coreScyName" v-if="uncheckList.coreScyName" show-overflow-tooltip />
             <el-table-column label="融资产品" align="center" prop="zfpName" v-if="uncheckList.zfpName" show-overflow-tooltip />
-            <el-table-column label="融资金额" align="center" prop="zfrAmount" :formatter="moneyFormat" v-if="uncheckList.zfrAmount" show-overflow-tooltip />
-            <el-table-column label="融资状态" align="center" prop="zfrStatus" :formatter="zfrStatusFormat" v-if="uncheckList.zfrStatus" show-overflow-tooltip />
-            <el-table-column label="费用状态" align="center" prop="zciStatus" :formatter="zciStatusFormat" v-if="uncheckList.zciStatus" show-overflow-tooltip />
+            <el-table-column
+                label="融资金额"
+                align="center"
+                prop="zfrAmount"
+                :formatter="moneyFormat"
+                v-if="uncheckList.zfrAmount"
+                show-overflow-tooltip />
+            <el-table-column
+                label="融资状态"
+                align="center"
+                prop="zfrStatus"
+                :formatter="zfrStatusFormat"
+                v-if="uncheckList.zfrStatus"
+                show-overflow-tooltip />
+            <el-table-column
+                label="费用状态"
+                align="center"
+                prop="zciStatus"
+                :formatter="zciStatusFormat"
+                v-if="uncheckList.zciStatus"
+                show-overflow-tooltip />
             <el-table-column label="创建时间" align="center" prop="createTime" v-if="uncheckList.createTime" show-overflow-tooltip />
-            <el-table-column label="手续费" align="center" prop="zciAmount" :formatter="moneyFormat" v-if="uncheckList.zciAmount " show-overflow-tooltip />
-            <el-table-column label="发票状态" align="center" prop="zciInvoiceStatus" :formatter="zciInvoiceStatusFormat" v-if="uncheckList.zciInvoiceStatus" show-overflow-tooltip />
+            <el-table-column
+                label="手续费"
+                align="center"
+                prop="zciAmount"
+                :formatter="moneyFormat"
+                v-if="uncheckList.zciAmount "
+                show-overflow-tooltip />
+            <el-table-column
+                label="发票状态"
+                align="center"
+                prop="zciInvoiceStatus"
+                :formatter="zciInvoiceStatusFormat"
+                v-if="uncheckList.zciInvoiceStatus"
+                show-overflow-tooltip />
             <el-table-column label="快递单号" align="center" prop="zciExpressNo" v-if="uncheckList.zciExpressNo" show-overflow-tooltip />
             <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150" fixed="right">
                 <template slot-scope="scope">
@@ -98,32 +140,35 @@
     <!-- 申请开票框 -->
     <el-dialog :title="titleApply" :visible.sync="openApply" width="800px" append-to-body>
         <el-row class="zap-form">
-          <el-form ref="formApply" :model="formApply" :rules="rulesApply" label-width="140px" :inline="true">
-            <el-form-item label="企业名称" prop="scyName">
-                <el-input v-model="formApply.scyName" disabled />
-            </el-form-item>
-            <el-form-item label="企业统一代码" prop="scySocialCode">
-                <el-input v-model="formApply.scySocialCode" disabled />
-            </el-form-item>
-            <el-form-item label="企业注册电话" prop="scyPhone">
-                <el-input v-model="formApply.scyPhone" disabled />
-            </el-form-item>
-            <el-form-item label="收件人" prop="ziaContacts">
-                <el-input v-model="formApply.ziaContacts" placeholder="请输入收件人" maxlength="20" show-word-limit />
-            </el-form-item>
-            <el-form-item label="收件人电话" prop="ziaContactsPhone">
-                <el-input v-model="formApply.ziaContactsPhone" placeholder="请输入收件人电话" maxlength="11" show-word-limit />
-            </el-form-item>
-            <el-form-item label="邮寄地址" prop="ziaAddress">
-                <el-input v-model="formApply.ziaAddress" placeholder="请输入邮寄地址" maxlength="30" show-word-limit />
-            </el-form-item>
-          </el-form>
+            <el-form ref="formApply" :model="formApply" :rules="rulesApply" label-width="140px" :inline="true">
+                <el-form-item label="企业名称" prop="scyName">
+                    <el-input v-model="formApply.scyName" disabled />
+                </el-form-item>
+                <el-form-item label="企业统一代码" prop="scySocialCode">
+                    <el-input v-model="formApply.scySocialCode" disabled />
+                </el-form-item>
+                <el-form-item label="企业注册电话" prop="scyPhone">
+                    <el-input v-model="formApply.scyPhone" disabled />
+                </el-form-item>
+                <el-form-item label="收件人" prop="ziaContacts">
+                    <el-input v-model="formApply.ziaContacts" placeholder="请输入收件人" maxlength="20" show-word-limit />
+                </el-form-item>
+                <el-form-item label="收件人电话" prop="ziaContactsPhone">
+                    <el-input v-model="formApply.ziaContactsPhone" placeholder="请输入收件人电话" maxlength="11" show-word-limit />
+                </el-form-item>
+                <el-form-item label="邮寄地址" prop="ziaAddress">
+                    <el-input v-model="formApply.ziaAddress" placeholder="请输入邮寄地址" maxlength="30" show-word-limit />
+                </el-form-item>
+            </el-form>
         </el-row>
         <div slot="footer" class="dialog-footer">
             <el-button type="primary" @click="submitForm">确 定</el-button>
             <el-button @click="cancel">取 消</el-button>
         </div>
     </el-dialog>
+
+    <!-- 去缴费 -->
+    <paying :payingMoney="payingMoney" :openPaying.sync="openPaying" @submitHandler="submitHandler" @cancelHandler="cancelHandler" @close="cancelHandler"></paying>
 </div>
 </template>
 
@@ -154,6 +199,7 @@ import ExportButton from '@/components/ExportButton/index.vue'
 import PayButton from '@/components/PayButton/index.vue'
 import ApplyButton from '@/components/ApplyButton/index.vue'
 import PlainButton from '@/components/PlainButton/index.vue'
+import Paying from "@/components/Paying/index.vue"
 import {
     balance,
     transfer
@@ -166,7 +212,8 @@ export default {
         ExportButton,
         PayButton,
         ApplyButton,
-        PlainButton
+        PlainButton,
+        Paying
     },
     data() {
         return {
@@ -314,7 +361,11 @@ export default {
                     message: "邮寄地址不能为空",
                     trigger: "blur"
                 }]
-            }
+            },
+            openPaying: false,
+            payingRow: {},
+            payingId: "",
+            payingMoney: ""
         };
     },
     created() {
@@ -487,89 +538,80 @@ export default {
             this.openApply = true;
             this.titleApply = "申请开票信息";
         },
-        //去缴费
-        handlePay(row) {
-            debugger
+        submitHandler() {
             var self = this;
+            const row = this.payingRow
             const zciId = row.zciId || this.ids;
-            const maney = row.zciAmount;
-            this.$confirm('您需缴纳手续费"' + maney + '"元', {
-                    confirmButtonText: "确定",
-                    cancelButtonText: "取消"
-                })
-                .then(function () {
-                    const loading = self.$loading({
-                        lock: true,
-                        text: "Loading",
-                        spinner: "el-icon-loading",
-                        background: "rgba(0, 0, 0, 0.7)",
-                    });
-                    // self.paiAccno = '3115730025230000214';
-                    if (row.accNo) {
-                        balance(row.accNo).then(response => {
-                            if (eval(row.zciAmount) > eval(response.data.list.row.KYAMT)) {
-                                self.$message({
-                                    message: '余额为' + response.data.list.row.KYAMT + '不足以抵扣本次缴费费用,请及时充值',
-                                    type: 'warning'
-                                });
-                                loading.close();
-                            } else {
-                                if (row.zfrStatus == '01' || row.zfrStatus == '03') {
-                                    var map = {
-                                        'recvAccNo': '',
-                                        'recvAccNm': '',
-                                        'tranAmt': row.zciAmount,
-                                        'businessId': row.zciId,
-                                        'type': '01'
-                                    }
-                                    transfer(map).then(response => {
-                                        loading.close();
-                                        self.msgSuccess("缴费成功");
-                                        return changeZfiStatus(zciId);
-                                    }).catch(() => {
-                                        loading.close();
-                                    });
-                                } else {
-                                    var map = {
-                                        'recvAccNo': '',
-                                        'recvAccNm': '',
-                                        'tranAmt': row.zciAmount,
-                                        'businessId': row.zciId,
-                                        'type': '00'
-                                    }
-                                    transfer(map).then(response => {
-                                        loading.close();
-                                        self.msgSuccess("缴费成功");
-                                        return changeZfiStatus(zciId);
-                                    }).catch(() => {
-                                        loading.close();
-                                    });
-                                }
-
-                            }
-                        }).catch(() => {
-                            loading.close();
-                        });
-                    } else {
+            const loading = self.$loading({
+                lock: true,
+                text: "Loading",
+                spinner: "el-icon-loading",
+                background: "rgba(0, 0, 0, 0.7)",
+            });
+            // self.paiAccno = '3115730025230000214';
+            if (row.accNo) {
+                balance(row.accNo).then(response => {
+                    if (eval(row.zciAmount) > eval(response.data.list.row.KYAMT)) {
                         self.$message({
-                            message: '您还没有电子账户,请联系平台开通电子账户',
+                            message: '余额为' + response.data.list.row.KYAMT + '不足以抵扣本次缴费费用,请及时充值',
                             type: 'warning'
                         });
                         loading.close();
+                    } else {
+                        if (row.zfrStatus == '01' || row.zfrStatus == '03') {
+                            var map = {
+                                'recvAccNo': '',
+                                'recvAccNm': '',
+                                'tranAmt': row.zciAmount,
+                                'businessId': row.zciId,
+                                'type': '01'
+                            }
+                            transfer(map).then(response => {
+                                loading.close();
+                                self.msgSuccess("缴费成功");
+                                return changeZfiStatus(zciId);
+                            }).catch(() => {
+                                loading.close();
+                            });
+                        } else {
+                            var map = {
+                                'recvAccNo': '',
+                                'recvAccNm': '',
+                                'tranAmt': row.zciAmount,
+                                'businessId': row.zciId,
+                                'type': '00'
+                            }
+                            transfer(map).then(response => {
+                                loading.close();
+                                self.msgSuccess("缴费成功");
+                                return changeZfiStatus(zciId);
+                            }).catch(() => {
+                                loading.close();
+                            });
+                        }
+
                     }
-                })
-            // .then(() => {
-            //   this.getList();
-            //   this.msgSuccess("缴费成功");
-            // })
-            // .catch(() => {
-            //   this.$message({
-            //     type: "warning",
-            //     message: "已取消缴费"
-            //   });
-            // });
+                }).catch(() => {
+                    loading.close();
+                });
+            } else {
+                self.$message({
+                    message: '您还没有电子账户,请联系平台开通电子账户',
+                    type: 'warning'
+                });
+                loading.close();
+            }
+        },
+        cancelHandler() {
+            this.openPaying = false
+        },
+        //去缴费
+        handlePay(row) {
+            this.payingRow = row
+            this.payingId = row.zciId || this.ids;
+            this.payingMoney = row.zciAmount;
+            this.openPaying = true
         },
-
         /** 提交按钮 */
         submitForm() {
             var self = this;