feat: 客户余额管理页面新增扣费明细弹窗

src/common/api/user/user.js

@@ -22,7 +22,13 @@ export function customerBalanceRechargeApi(params) {
 export function customerBalanceDelete(params) {
   return axios.post('/business/customerBalance/delete?ids=' + params)
 }
-// 获取操作日志
-// export function getLogApi(params) {
-//   return axios.get('/pay/businessPayRecord/subjectList', params)
-// }
+// 客户余额管理 查询全部操作日志
+export function getLogListApi(params) {
+  return axios.post(
+    '/business/customerBalanceOptLogs/list?customerBalanceId=' + params
+  )
+}
+// 客户余额管理 分页查询全部扣费明细
+export function getChargerRecordsApi(params) {
+  return axios.post('/charge/customerChargeRecords/list_page', params)
+}

src/views/user/balance.vue

@@ -88,12 +88,12 @@
           align="center"
           width="150"
           :show-overflow-tooltip="true"></el-table-column>
-        <el-table-column
+        <!-- <el-table-column
           label="折扣（%）"
           prop="discountRate"
           align="center"
           width="150"
-          :show-overflow-tooltip="true"></el-table-column>
+          :show-overflow-tooltip="true"></el-table-column> -->
         <el-table-column
           label="授信额度（元）"
           prop="lineCredit"
@@ -124,12 +124,11 @@
           align="center"
           width="200"
           :show-overflow-tooltip="true"></el-table-column>
-
         <el-table-column
           label="操作"
           align="center"
           header-align="center"
-          width="80"
+          width="130"
           fixed="right">
           <template slot-scope="scope">
             <div
@@ -149,11 +148,16 @@
                 title="手动充值"
                 @click="handleRecharge(scope.row)"
                 style="cursor: pointer; color: #67c23a"></i>
-              <!-- <i
+              <i
                 class="el-icon-document"
                 title="操作日志"
                 @click="handleLog(scope.row)"
-                style="cursor: pointer; color: #1565c0"></i> -->
+                style="cursor: pointer; color: #1565c0"></i>
+              <i
+                class="el-icon-money"
+                title="扣费明细"
+                @click="handleChargerLog(scope.row)"
+                style="cursor: pointer; color: #e6b800"></i>
             </div>
           </template>
         </el-table-column>
@@ -171,7 +175,7 @@
     </div>
     <!-- 编辑 弹窗 -->
     <el-dialog
-      :title="'编辑'"
+      title="编辑"
       :visible.sync="editVisible"
       width="700px"
       @submit.native.prevent
@@ -182,7 +186,7 @@
         ref="editForm"
         label-width="150px"
         label-position="right">
-        <el-form-item
+        <!-- <el-form-item
           label="折扣（%）"
           type="number"
           prop="discountRate"
@@ -194,7 +198,7 @@
             v-model="editForm.discountRate"
             size="small"
             placeholder="请输入折扣" />
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item
           label="授信额度（元）"
           type="number"
@@ -230,7 +234,7 @@
     </el-dialog>
     <!-- 手动充值 弹窗 -->
     <el-dialog
-      :title="'手动充值'"
+      title="手动充值"
       :visible.sync="rechargeVisible"
       :close-on-click-modal="false"
       @submit.native.prevent
@@ -269,14 +273,176 @@
         </el-button>
       </span>
     </el-dialog>
-    <!-- 操作日志 -->
-    <!-- <el-dialog :title="'操作日志'" :visible.sync="logVisible" width="700px">
-      <ul style="color: #333; font-size: 12px; height: 600px; overflow: auto">
-        <li v-for="(item, index) in logList" :key="index">
-          {{ item.createTime + ' ' + item.description }}
+    <!-- 操作日志 弹窗 -->
+    <el-dialog title="操作日志" :visible.sync="logVisible" width="900px">
+      <ul style="color: #333; font-size: 14px; height: 600px; overflow: auto">
+        <li v-for="(item, index) in logList" :key="index" style="height: 30px">
+          ({{ index + 1 }})
+          {{
+            item.createTime.replace('T', ' ') +
+            '&nbsp; &nbsp;' +
+            item.optUserAccount +
+            '：' +
+            item.description
+          }}
         </li>
       </ul>
-    </el-dialog> -->
+    </el-dialog>
+    <!-- 扣费明细 弹窗 -->
+    <el-dialog
+      title="扣费明细"
+      :visible.sync="recordsVisible"
+      width="100%"
+      class="recordsDialog">
+      <div class="search">
+        <el-form :model="searchRecordsForm" size="small" :inline="true">
+          <el-form-item label="创建时间">
+            <el-date-picker
+              style="width: 360px"
+              v-model="searchRecordsForm.createTime"
+              type="datetimerange"
+              value-format="yyyy-MM-dd HH:ss:mm"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"></el-date-picker>
+          </el-form-item>
+          <el-form-item label="支付款项">
+            <el-select
+              style="width: 150px"
+              v-model="searchRecordsForm.chargeType"
+              placeholder="请选择支付款项">
+              <el-option
+                v-for="(item, index) in chargeTypeMap"
+                :key="index"
+                :label="item"
+                :value="index"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="支付方式">
+            <el-select
+              style="width: 150px"
+              v-model="searchRecordsForm.payMode"
+              placeholder="请选择支付方式">
+              <el-option
+                v-for="(item, index) in payModeListMap"
+                :key="index"
+                :label="item"
+                :value="index"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="订单号">
+            <el-input
+              v-model="searchForm.bizNo"
+              placeholder="请输入订单号"
+              clearable></el-input>
+          </el-form-item>
+          <el-form-item label="交易流水号">
+            <el-input
+              v-model="searchForm.tradeNo"
+              placeholder="请输入交易流水号"
+              clearable></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              type="primary"
+              size="small"
+              icon="el-icon-search"
+              @click="getChargerLog">
+              查询
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-table
+        ref="recordsTable"
+        :data="chargerRecordsList"
+        border
+        height="40%"
+        width="100%"
+        :highlight-current-row="true"
+        header-row-class-name="header-row-class-name">
+        <el-table-column
+          label="序号"
+          type="index"
+          width="50"
+          align="center"
+          fixed="left"></el-table-column>
+        <el-table-column
+          label="创建时间"
+          prop="createTime"
+          align="center"
+          width="250"
+          :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            {{ scope.row.createTime.replace('T', ' ') }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="交易流水号"
+          prop="tradeNo"
+          align="center"
+          width="180"
+          :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column
+          label="支付款项"
+          prop="chargeType"
+          align="center"
+          width="150"
+          :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            {{ getChargeTypeText(scope.row.chargeType) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="订单号"
+          prop="bizNo"
+          align="center"
+          min-width="170"
+          :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            <div style="white-space: pre-wrap">{{ scope.row.bizNo }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="支付方式"
+          prop="payMode"
+          align="center"
+          width="150"
+          :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            {{ scope.row.payMode == 1 ? '支付宝' : '额度' }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="收取费用"
+          prop="fees"
+          align="center"
+          width="150"
+          :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column
+          label="扣前余额"
+          prop="balanceBefore"
+          align="center"
+          width="150"
+          :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column
+          label="扣后余额"
+          prop="balanceAfter"
+          align="center"
+          width="150"
+          :show-overflow-tooltip="true"></el-table-column>
+      </el-table>
+      <div class="pagination">
+        <el-pagination
+          layout="sizes, total, prev, pager, next, jumper"
+          background
+          :total="totalRecords"
+          :page-size="recordsPageSize"
+          :current-page="currentRecordsPage"
+          @size-change="recordsSizeChange"
+          @current-change="onRecordsCurrentChange" />
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -285,7 +451,9 @@ import {
   getCostomerBalanceApi,
   editCustomerBalanceApi,
   customerBalanceRechargeApi,
-  customerBalanceDelete
+  customerBalanceDelete,
+  getLogListApi,
+  getChargerRecordsApi
 } from '@/common/api/user/user'
 
 export default {
@@ -295,16 +463,32 @@ export default {
       searchForm: {},
       rechargeForm: {},
       editForm: {},
+      searchRecordsForm: {},
       balanceList: [],
-      // logList: [],
+      logList: [],
+      chargerRecordsList: [],
+      namespace: '',
       selection: [],
+      payModeListMap: {
+        1: '支付宝',
+        2: '额度'
+      },
+      chargeTypeMap: {
+        1: 'POD(CN)',
+        2: 'POD(US)',
+        3: '一件定制'
+      },
       loading: false,
       total: 0,
       currentPage: 1,
       pageSize: 50,
       editVisible: false,
-      rechargeVisible: false
-      // logVisible: false
+      rechargeVisible: false,
+      logVisible: false,
+      recordsVisible: false,
+      totalRecords: 0,
+      currentRecordsPage: 1,
+      recordsPageSize: 50
     }
   },
   created() {
@@ -316,6 +500,10 @@ export default {
       this.currentPage = 1
       this.getList()
     },
+    handleSelectionChange(selection) {
+      this.selection = selection
+    },
+    // 列表分页
     onCurrentChange(currentPage) {
       this.currentPage = currentPage
       this.getList()
@@ -325,8 +513,15 @@ export default {
       this.currentPage = 1
       this.getList()
     },
-    handleSelectionChange(selection) {
-      this.selection = selection
+    // 扣费明细分页
+    recordsSizeChange(pageSize) {
+      this.recordsPageSize = pageSize
+      this.currentRecordsPage = 1
+      this.getChargerLog()
+    },
+    onRecordsCurrentChange(currentPage) {
+      this.currentRecordsPage = currentPage
+      this.getChargerLog()
     },
     // 获取列表数据
     async getList() {
@@ -427,25 +622,62 @@ export default {
       }
     },
     // 折扣校验
-    validateDiscount(rule, value, callback) {
-      if (value === '' || value === null || value === undefined) {
-        callback()
-      } else if (Number(value) < 0 || Number(value) > 100) {
-        callback(new Error('值需要介于0到100之间'))
-      } else {
-        callback()
+    // validateDiscount(rule, value, callback) {
+    //   if (value === '' || value === null || value === undefined) {
+    //     callback()
+    //   } else if (Number(value) < 0 || Number(value) > 100) {
+    //     callback(new Error('值需要介于0到100之间'))
+    //   } else {
+    //     callback()
+    //   }
+    // },
+    // 查看操作日志
+    async handleLog(row) {
+      try {
+        const res = await getLogListApi(row.id)
+        this.logList = res.data
+        if (this.logList.length) {
+          this.logVisible = true
+        } else {
+          this.$message.warning('暂无数据')
+        }
+      } catch (e) {
+        console.log(e)
+      }
+    },
+    handleChargerLog(row) {
+      this.namespace = row.namespace
+      this.getChargerLog()
+    },
+    getChargeTypeText(type) {
+      return this.chargeTypeMap[type]
+    },
+    searchRecords() {},
+    // 分页查看扣费明细
+    async getChargerLog() {
+      try {
+        const data = {
+          pageSize: this.recordsPageSize,
+          currentPage: this.currentRecordsPage,
+          namespace: this.namespace,
+          ...this.searchRecordsForm
+        }
+        const res = await getChargerRecordsApi(data)
+        this.chargerRecordsList = res.data.records
+
+        if (this.chargerRecordsList.length) {
+          this.totalRecords = res.data.total
+          this.chargerRecordsList.forEach((item) => {
+            item.bizNo = item.bizNo.replaceAll(',', '\n')
+          })
+          this.recordsVisible = true
+        } else {
+          this.$message.warning('暂无数据')
+        }
+      } catch (e) {
+        console.log(e)
       }
     }
-    // 查看操作日志
-    // async handleLog(row) {
-    //   try {
-    //     this.logList = await getLogApi({ ...row })
-    //   } catch (e) {
-    //     console.log(e)
-    //   } finally {
-    //     this.logVisible = true
-    //   }
-    // }
   }
 }
 </script>
@@ -474,10 +706,6 @@ export default {
       line-height: 30px;
     }
 
-    .el-icon-time:before {
-      content: '';
-    }
-
     .el-dialog__footer {
       text-align: center;
 
@@ -490,11 +718,6 @@ export default {
       padding: 10px 20px;
     }
 
-    .el-icon-edit:before {
-      color: #ff9800;
-      font-weight: bold;
-    }
-
     .el-range-editor--small .el-range-separator {
       line-height: 31px;
     }
@@ -508,6 +731,44 @@ export default {
     }
   }
 }
+.recordsDialog {
+  margin: 10px;
+
+  &::v-deep {
+    .el-dialog {
+      height: 85vh !important;
+      display: flex;
+      flex-direction: column;
+      margin: 0 auto;
+      margin-top: 10vh !important;
+    }
+    .el-dialog__body {
+      flex: 1 1 0%;
+      display: flex;
+      flex-direction: column;
+      padding: 10px 20px;
+      overflow: hidden;
+    }
+
+    .table-area {
+      flex: 1 1 0%;
+      min-height: 0;
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .el-table {
+      flex: 1 1 0%;
+      min-height: 0;
+      /* 让table内容区出现滚动条 */
+    }
+
+    .el-table .el-table__cell {
+      padding: 6px 0;
+    }
+  }
+}
 .table {
   flex: 1;
   overflow: hidden;