✨ 银行卡管理-增加交易记录查看功能

pages/admin/bank-accounts.vue

@@ -40,6 +40,13 @@
           width="180"
           prop="createdTime">
         </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button size="mini" type="primary"
+                       @click="transactionRecords(scope.$index, scope.row)" plain>查看交易记录
+            </el-button>
+          </template>
+        </el-table-column>
       </el-table>
     </el-col>
     <el-col>
@@ -54,14 +61,21 @@
         :total="pagination.total">
       </el-pagination>
     </el-col>
+    <el-dialog :title="'卡号：' + bankAccount + ' 的交易记录'" :visible.sync="dialogVisible">
+      <records :records="records" :bankAccount="bankAccount"
+               @currentChange="handleTransactionRecordCurrentChange"
+               @searchTransactionRecord="searchTransactionRecord"></records>
+    </el-dialog>
   </el-row>
 </template>
 
 <script>
 import {mapState} from 'vuex';
+import Records from "../../components/common/bank/account/records";
 
 export default {
   name: "bank-accounts",
+  components: {Records},
   fetch({store, params, error}) {
     return Promise.all([
       store
@@ -72,7 +86,8 @@ export default {
   computed: {
     ...mapState({
       bankAccounts: state => state["bank-account"].list.data.bankAccounts,
-      pagination: state => state["bank-account"].list.data.pagination
+      pagination: state => state["bank-account"].list.data.pagination,
+      records: state => state["bank-account"].records.data
     })
   },
   data() {
@@ -80,7 +95,8 @@ export default {
       order: 'desc',
       idRole: 0,
       idUser: 0,
-      dialogVisible: false
+      dialogVisible: false,
+      bankAccount: ''
     }
   },
   methods: {
@@ -102,6 +118,33 @@ export default {
         page: page,
         rows: _ts.pagination.pageSize
       })
+    },
+    transactionRecords(index, bankAccount) {
+      let _ts = this
+      _ts.bankAccount = bankAccount.bankAccount
+      _ts.dialogVisible = true
+      _ts.$store.dispatch('bank-account/fetchTransactionRecordList', {
+        bankAccount: _ts.bankAccount
+      })
+    },
+    handleTransactionRecordCurrentChange(search) {
+      let _ts = this;
+      _ts.$store.dispatch('bank-account/fetchTransactionRecordList', {
+        bankAccount: _ts.bankAccount,
+        startDate: search.startDate,
+        endDate: search.endDate,
+        page: search.page
+      })
+    },
+    searchTransactionRecord(dates) {
+      let _ts = this
+      let startDate = dates[0]
+      let endDate = dates[1]
+      _ts.$store.dispatch('wallet/fetchTransactionRecordList', {
+        bankAccount: _ts.bankAccount,
+        startDate: startDate,
+        endDate: endDate
+      })
     }
   },
   mounted() {

store/bank-account.js

@@ -6,17 +6,34 @@ const getDefaultListData = () => {
     pagination: {}
   }
 }
+const getDefaultTransactionRecordListData = () => {
+  return {
+    records: [],
+    pagination: {}
+  }
+}
 
 export const state = () => {
   return {
     list: {
       fetching: false,
       data: getDefaultListData()
+    },
+    records: {
+      fetching: false,
+      data: getDefaultTransactionRecordListData()
     }
   }
 }
 
 export const mutations = {
+  // 消费记录列表
+  updateTransactionRecordListFetching(state, action) {
+    state.records.fetching = action
+  },
+  updateTransactionRecordListData(state, action) {
+    state.records.data = action
+  },
   updateListFetching(state, action) {
     state.list.fetching = action
   },
@@ -46,6 +63,33 @@ export const actions = {
         console.log(error);
         commit('updateListFetching', false);
       });
+  },
+  // 获取账户交易记录
+  fetchTransactionRecordList({commit}, params = {}) {
+    commit('updateTransactionRecordListFetching', true)
+    return this.$axios
+      .$get(`${BANK_ACCOUNT_API_PATH}/transaction-records`, {
+        params: {
+          bankAccount: params.bankAccount,
+          startDate: params.startDate,
+          endDate: params.endDate,
+          page: params.page || 1
+        }
+      })
+      .then(response => {
+        return new Promise(resolve => {
+          commit('updateTransactionRecordListData', response)
+          commit('updateTransactionRecordListFetching', false)
+          resolve(response)
+          // delay(() => {
+          //   resolve(response)
+          // })
+        })
+      })
+      .catch(error => {
+        commit('updateTransactionRecordListFetching', false)
+        return Promise.reject(error)
+      })
   }
 }