123 lines
4.4 KiB
Vue
123 lines
4.4 KiB
Vue
<!--
|
||
历史记录的通用组件， 可抽屉可 页面
|
||
|
||
@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>
|