源文件

jeepay-ui-agent/src/views/accountCenter/history/HistoryPanel.vue

@@ -0,0 +1,122 @@
+<!--
+  历史记录的通用组件， 可抽屉可 页面
+
+  @author terrfly
+  @site https://www.jeequan.com
+  @date 2022/03/23 20:23
+-->
+<template>
+  <div>
+    <a-card class="table-card">
+      <JeepaySearchForm v-if="props.showSearch" :searchFunc="searchFunc" :resetFunc="resetFunc">
+        <a-form-item label="" class="table-search-item">
+          <JeepayDateRangePicker
+            ref="dateRangePicker"
+            v-model:value="vdata.searchData['queryDateRange']"
+            customDateRangeType="dateTime"
+          />
+        </a-form-item>
+        <a-form-item label="" class="table-search-item">
+          <a-select v-model:value="vdata.searchData['opAccountType']" placeholder="选择账户类型">
+            <a-select-option value="">全部</a-select-option>
+            <a-select-option :value="1">钱包账户</a-select-option>
+            <a-select-option :value="2">在途账户</a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <jeepay-text-up v-model:value="vdata.searchData['hid']" :placeholder="'流水号'" />
+      </JeepaySearchForm>
+      <!-- 列表渲染 -->
+      <JeepayTable
+        ref="infoTable"
+        :init-data="false"
+        :req-table-data-func="reqTableDataFunc"
+        :table-columns="tableColumns"
+        :search-data="vdata.searchData"
+        row-key="hid"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'infoId'">
+            <span v-if="record.infoType == 'AGENT'">服务商： {{ record.infoName }}({{ record.infoId }})</span>
+
+            <span v-if="record.infoId == 'PLATFORM_INACCOUNT'">运营平台入账账户</span>
+
+            <span v-if="record.infoId == 'PLATFORM_PROFIT'">运营平台利润账户</span>
+          </template>
+
+          <template v-if="column.key === 'opBeforeAmount'">
+            <span>{{ record.opBeforeAmount / 100 }}</span>
+          </template>
+          <template v-if="column.key === 'opAmount'">
+            <span>{{ record.opAmount / 100 }}</span>
+          </template>
+          <template v-if="column.key === 'opAfterAmount'">
+            <span>{{ record.opAfterAmount / 100 }}</span>
+          </template>
+          <template v-if="column.key === 'operation'">
+            <!-- 操作列插槽 -->
+            <JeepayTableColumns>
+              <a-button type="link" @click="detailFunc(record.hid)">详情</a-button>
+            </JeepayTableColumns>
+          </template>
+        </template>
+      </JeepayTable>
+    </a-card>
+    <!-- 详情页面组件  -->
+    <InfoDetail ref="infoDetail" :callback-func="searchFunc" />
+  </div>
+</template>
+<script setup lang="ts">
+
+import { API_URL_WALLET_HISTORY_LIST, req, reqLoad } from '@/api/manage'
+import InfoDetail from './Detail.vue'
+import { ref, reactive, defineProps, getCurrentInstance, onMounted } from 'vue'
+const { $infoBox,$access } = getCurrentInstance()!.appContext.config.globalProperties
+
+// 定义父组件的传值
+const props = defineProps({
+  defaultQueryCondition: { type: Object, default: () => {}  }, // 查询集合的条件
+  showSearch: { type: Boolean, default: true } //是否显示搜索面板
+})
+
+const infoDetail = ref()
+
+const infoTable = ref()
+
+let tableColumns = reactive([
+  { key: 'hid', title: '流水号', fixed: 'left', dataIndex: 'hid',  },
+  { key: 'opBeforeAmount', title: '变动前账户余额', dataIndex: 'opBeforeAmount',  },
+  { key: 'opAmount', title: '变动金额', dataIndex: 'opAmount',  },
+  { key: 'opAfterAmount', title: '变动后账户余额', dataIndex: 'opAfterAmount' ,  },
+  { key: 'relaBizOrderId', title: '关联订单号', dataIndex: 'relaBizOrderId' , },
+  { key: 'createdAt', title: '时间', dataIndex: 'createdAt' , width: 200,},
+  { key: 'operation', title: '操作',  fixed: 'right', align: 'center'}
+])
+const dateRangePicker = ref()
+const vdata : any = reactive({
+  searchData : { queryDateRange: 'today' }
+})
+
+
+onMounted(() => {
+  Object.assign(vdata.searchData, props.defaultQueryCondition)
+  infoTable.value.refTable(true)
+})
+
+function resetFunc() {
+  dateRangePicker.value.returnSelectModel()
+  vdata.searchData = { queryDateRange: 'today', opAccountType: 1 }
+}
+
+  // 请求table接口数据
+  function reqTableDataFunc(params: any) {
+      return req.list(API_URL_WALLET_HISTORY_LIST, params)
+    }
+  function searchFunc () { // 点击【查询】按钮点击事件
+      infoTable.value.refTable(true)
+    }
+
+  function detailFunc (recordId: any) { // 钱包流水详情页
+      infoDetail.value.show(recordId)
+    }
+</script>