345 lines
11 KiB
Vue
345 lines
11 KiB
Vue
|
<template>
|
||
|
|
<view class="tableContainer">
|
||
|
|
<view v-if="showSearch" class="searchSection">
|
||
|
|
<slot name="customSearch" :searchFormData="searchFormData" :handleSearch="handleSearchSubmit"></slot>
|
||
|
|
<view v-if="searchFormRenderColumns?.length">
|
||
|
|
<slot name="default" :showSearchDialog="showSearchDialog" :searchFormData="searchFormData" :handleSearch="handleSearchSubmit"></slot>
|
||
|
|
</view>
|
||
|
|
<uni-popup ref="alertDialog" mask-background-color="transparent" :isMaskClick="false">
|
||
|
|
<view class="searchFormDialog">
|
||
|
|
<view class="searchForm">
|
||
|
|
<uni-forms ref="searchForm" :modelValue="searchFormData">
|
||
|
|
<uni-row>
|
||
|
|
<uni-col v-show="searchFormVisible" v-for="item in searchFormRenderColumns" :key="item.field" :span="item.span ?? 24">
|
||
|
|
<uni-forms-item :label="item.title">
|
||
|
|
<uni-easyinput primaryColor="#29BBE4" v-if="getTypeByfield(item.field) === 'text'" v-model="searchFormData[item.field]" />
|
||
|
|
<uni-data-select
|
||
|
|
:clear="url !== '/app/report/getReport26'"
|
||
|
|
v-if="getTypeByfield(item.field) === 'select'"
|
||
|
|
:localdata="selectFieldsMap[item.field]"
|
||
|
|
v-model="searchFormData[item.field]"
|
||
|
|
:placeholder="$t('form.pleaseSelect')"
|
||
|
|
:emptyTips="$t('common.empty')"
|
||
|
|
></uni-data-select>
|
||
|
|
<uni-datetime-picker
|
||
|
|
v-if="getTypeByfield(item.field) === 'dateRange'"
|
||
|
|
type="daterange"
|
||
|
|
v-model="timeRangeData[item.field]"
|
||
|
|
@change="(e) => handleDateRangeChange(e, item.field)"
|
||
|
|
/>
|
||
|
|
</uni-forms-item>
|
||
|
|
</uni-col>
|
||
|
|
</uni-row>
|
||
|
|
</uni-forms>
|
||
|
|
<view class="submitter">
|
||
|
|
<view class="confirmBtn" @click="handleSearchSubmit">{{ $t('common.okText') }}</view>
|
||
|
|
<view class="cancelBtn" @click="closeSearchDialog">{{ $t('common.cancelText') }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</uni-popup>
|
||
|
|
<view v-if="showTimeRangeSelector">
|
||
|
|
<uni-data-checkbox
|
||
|
|
v-model="daterangePreset"
|
||
|
|
:localdata="daterangePresets"
|
||
|
|
@change="handlePresetChange"
|
||
|
|
selectedColor="#29BBE4"
|
||
|
|
class="datePreset"
|
||
|
|
></uni-data-checkbox>
|
||
|
|
<uni-datetime-picker type="daterange" v-model="timeRangeData[defaultDateRangeKey]" @change="(e) => handleDateRangeChange(e, defaultDateRangeKey)" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="tableSection">
|
||
|
|
<uni-table :emptyText="$t('common.empty')" v-if="!tableLoading">
|
||
|
|
<!-- 表头行 -->
|
||
|
|
<uni-tr class="tableTh">
|
||
|
|
<uni-th v-for="item in columns" :key="item.field" :width="getWidthByfield(item.field)" align="center" class="columnItem">
|
||
|
|
{{ item.title }}
|
||
|
|
</uni-th>
|
||
|
|
</uni-tr>
|
||
|
|
<!-- 表格数据行 -->
|
||
|
|
<uni-tr v-for="row in tableData" :key="row.rowKey ?? row.id" class="rowItem">
|
||
|
|
<uni-td v-for="(item, index) in columns" :key="item.rowKey ?? item.id" align="center" class="columnItem">
|
||
|
|
<view v-if="item.field === 'operate'">
|
||
|
|
<slot name="operationRender" :row="row"></slot>
|
||
|
|
</view>
|
||
|
|
<view v-else-if="item.field === 'status'">
|
||
|
|
{{ getStatus(row?.[item.field]) }}
|
||
|
|
</view>
|
||
|
|
<view v-else-if="item.field == 'currency_type'">
|
||
|
|
{{ row['currency_type_text'] }}
|
||
|
|
</view>
|
||
|
|
<view v-else-if="item.field == 'user_type'">
|
||
|
|
{{ userTypeOptions?.[row?.[item.field]] }}
|
||
|
|
</view>
|
||
|
|
<view v-else-if="item.field == 'mt4_server'">
|
||
|
|
{{ row['mt4_server_name'] ?? row['mt4_server'] ?? '-' }}
|
||
|
|
</view>
|
||
|
|
<view v-else>
|
||
|
|
{{ row?.[item.field] ?? '-' }}
|
||
|
|
</view>
|
||
|
|
</uni-td>
|
||
|
|
</uni-tr>
|
||
|
|
</uni-table>
|
||
|
|
<Spin v-show="tableLoading" />
|
||
|
|
<view><uni-pagination show-icon :page-size="searchFormData.page_size" :current="searchFormData.curr_page" :total="total" @change="change" /></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import dayjs from 'dayjs';
|
||
|
|
import mockdata from '@/pages/report/mock';
|
||
|
|
import { UserLanguage } from '@/utils/const';
|
||
|
|
import { depositStatusOptions, withdrawStatusOptions, transferStatusOptions, fundOutStatusOptions, fundTransferStatusOptions, userTypeOptions } from '@/utils/options.ts';
|
||
|
|
import { getTableData } from '@/services/report/report.ts';
|
||
|
|
import { getMtServers } from '@/services/common.ts';
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
required: false,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
url: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
default: undefined
|
||
|
|
},
|
||
|
|
showSearch: {
|
||
|
|
type: Boolean,
|
||
|
|
required: false,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
showTimeRangeSelector: {
|
||
|
|
type: Boolean,
|
||
|
|
required: false,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
defaultDateRangeKey: {
|
||
|
|
type: String,
|
||
|
|
required: false,
|
||
|
|
default: 'apply_time'
|
||
|
|
},
|
||
|
|
timeRangeStart: {
|
||
|
|
type: String,
|
||
|
|
required: false,
|
||
|
|
default: 'apply_time_start'
|
||
|
|
},
|
||
|
|
timeRangeEnd: {
|
||
|
|
type: String,
|
||
|
|
required: false,
|
||
|
|
default: 'apply_time_end'
|
||
|
|
},
|
||
|
|
// statusOptions: {
|
||
|
|
// type: Array,
|
||
|
|
// required: false,
|
||
|
|
// default: () => []
|
||
|
|
// },
|
||
|
|
visible: {
|
||
|
|
type: Boolean,
|
||
|
|
required: true,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
queryParams: {
|
||
|
|
type: Object,
|
||
|
|
default: null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
currentReportUrl: '',
|
||
|
|
searchFormData: {
|
||
|
|
curr_page: 1,
|
||
|
|
page_size: 10
|
||
|
|
},
|
||
|
|
searchFormVisible: true,
|
||
|
|
daterangePreset: undefined,
|
||
|
|
daterangePresets: [
|
||
|
|
{ text: this.$t('common.yesterday'), value: 1 },
|
||
|
|
{ text: this.$t('common.threeDays'), value: 2 },
|
||
|
|
{ text: this.$t('common.7Days'), value: 6 },
|
||
|
|
{ text: this.$t('common.30Days'), value: 29 }
|
||
|
|
],
|
||
|
|
userTypeOptions: userTypeOptions,
|
||
|
|
mtServerOptions: [],
|
||
|
|
statusOptionsMap: {
|
||
|
|
'/app/capital/queryMyGoldInList': depositStatusOptions,
|
||
|
|
'/app/capital/queryMyGoldOutList': withdrawStatusOptions,
|
||
|
|
'/app/capital/queryMyTransferList': transferStatusOptions,
|
||
|
|
'/app/capital/queryMyFundOutList': fundOutStatusOptions,
|
||
|
|
'/app/capital/queryMyFundTransferList': fundTransferStatusOptions
|
||
|
|
},
|
||
|
|
mtServerFields: ['mt4_server'],
|
||
|
|
timeRangeData: {},
|
||
|
|
tableLoading: true,
|
||
|
|
tableData: [],
|
||
|
|
total: 0,
|
||
|
|
columns: [],
|
||
|
|
CURRENT: 1,
|
||
|
|
PAGESIZE: 10
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
searchFormRenderColumns() {
|
||
|
|
return this.columns.filter((item) => item.ifFilter);
|
||
|
|
},
|
||
|
|
selectFieldsMap() {
|
||
|
|
return { mt4_server: this.mtServerOptions };
|
||
|
|
},
|
||
|
|
// dateRangeFieldsMap() {
|
||
|
|
// return { '/app/report/getReport17': { apply_time: ['apply_time_start', 'apply_time_end'], audit_time: ['audit_time_start', 'audit_time_end'] } };
|
||
|
|
// },
|
||
|
|
dateRangeFieldsMap() {
|
||
|
|
// 配置是时间范围类型字段对应的起始、结束时间字段名
|
||
|
|
return {
|
||
|
|
apply_time: { default: ['apply_time_start', 'apply_time_end'] },
|
||
|
|
audit_time: { default: ['audit_time_start', 'audit_time_end'] },
|
||
|
|
regdate: { default: ['close_start', 'close_end'] },
|
||
|
|
open_time: { default: ['open_time_start', 'open_time_end'] },
|
||
|
|
close_time: { default: ['close_time_start', 'close_time_end'] },
|
||
|
|
create_time: { default: ['create_time_start', 'create_time_end'] }
|
||
|
|
};
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
showSearchDialog() {
|
||
|
|
this.$refs.alertDialog.open();
|
||
|
|
},
|
||
|
|
closeSearchDialog() {
|
||
|
|
this.$refs.alertDialog.close();
|
||
|
|
},
|
||
|
|
getTypeByfield(field) {
|
||
|
|
if (Object.keys(this.selectFieldsMap).includes(field)) {
|
||
|
|
return 'select';
|
||
|
|
} else if (Object.keys(this.dateRangeFieldsMap).includes(field)) {
|
||
|
|
return 'dateRange';
|
||
|
|
} else {
|
||
|
|
return 'text';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getWidthByfield(field) {
|
||
|
|
if (field.includes('time')) {
|
||
|
|
return 230;
|
||
|
|
} else if (field.includes('email')) {
|
||
|
|
return 150;
|
||
|
|
} else {
|
||
|
|
return 110;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getStatus(key) {
|
||
|
|
return this.statusOptionsMap[this.url]?.[key];
|
||
|
|
},
|
||
|
|
handleDateRangeChange(val, dateRangeKey = 'default_date_range') {
|
||
|
|
if (!val.length) {
|
||
|
|
this.timeRangeData[dateRangeKey] = null;
|
||
|
|
}
|
||
|
|
this.daterangePreset = undefined;
|
||
|
|
if (this.timeRangeData[dateRangeKey]) {
|
||
|
|
this.searchFormData[this.dateRangeFieldsMap[dateRangeKey].default[0] ?? this.timeRangeStart] = this.timeRangeData[dateRangeKey][0];
|
||
|
|
this.searchFormData[this.dateRangeFieldsMap[dateRangeKey].default[1] ?? this.timeRangeEnd] = this.timeRangeData[dateRangeKey][1];
|
||
|
|
} else {
|
||
|
|
delete this.searchFormData[this.dateRangeFieldsMap[dateRangeKey]?.default[0] ?? this.timeRangeStart];
|
||
|
|
delete this.searchFormData[this.dateRangeFieldsMap[dateRangeKey]?.default[1] ?? this.timeRangeEnd];
|
||
|
|
}
|
||
|
|
this.handleSearchSubmit();
|
||
|
|
},
|
||
|
|
handlePresetChange(e) {
|
||
|
|
this.timeRangeData[this.defaultDateRangeKey] = [dayjs().subtract(Number(e.detail.value), 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')];
|
||
|
|
if (this.timeRangeData[this.defaultDateRangeKey]) {
|
||
|
|
this.searchFormData[this.dateRangeFieldsMap[this.defaultDateRangeKey].default[0] ?? this.timeRangeStart] = this.timeRangeData[this.defaultDateRangeKey][0];
|
||
|
|
this.searchFormData[this.dateRangeFieldsMap[this.defaultDateRangeKey].default[1] ?? this.timeRangeEnd] = this.timeRangeData[this.defaultDateRangeKey][1];
|
||
|
|
} else {
|
||
|
|
delete this.searchFormData[this.timeRangeStart];
|
||
|
|
delete this.searchFormData[this.timeRangeEnd];
|
||
|
|
}
|
||
|
|
|
||
|
|
this.handleSearchSubmit();
|
||
|
|
},
|
||
|
|
async getMtServerOptions() {
|
||
|
|
const res = await getMtServers({ qcc_language: UserLanguage, server_type: 'live' });
|
||
|
|
if (res && res.code === 0) {
|
||
|
|
this.mtServerOptions = res.data?.map((item) => ({
|
||
|
|
text: item.server_name,
|
||
|
|
value: item.id
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async getTableDataByUrl() {
|
||
|
|
this.tableLoading = true;
|
||
|
|
this.tableData = [];
|
||
|
|
const params = {
|
||
|
|
...this.searchFormData,
|
||
|
|
qcc_language: UserLanguage
|
||
|
|
};
|
||
|
|
if (this.url === '/app/report/getReport26') {
|
||
|
|
await this.getMtServerOptions();
|
||
|
|
this.mtServerOptions.push({ text: 'PAMM', value: 99 });
|
||
|
|
if (!params.mt4_server) {
|
||
|
|
this.searchFormData.mt4_server = this.mtServerOptions[0]?.value;
|
||
|
|
params.mt4_server = this.mtServerOptions[0]?.value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const res = await getTableData(this.url, params);
|
||
|
|
if (res && res.code === 0) {
|
||
|
|
this.tableData = res.data.records ?? [];
|
||
|
|
this.columns = res.data.columns ?? [];
|
||
|
|
this.total = res.data.totalRecords;
|
||
|
|
}
|
||
|
|
res.data.columns.find((item) => {
|
||
|
|
if (item.ifFilter === true && this.mtServerFields.includes(item.field)) {
|
||
|
|
if (!this.mtServerOptions.length) {
|
||
|
|
this.getMtServerOptions();
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
} else {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.tableLoading = false;
|
||
|
|
},
|
||
|
|
|
||
|
|
// 分页触发
|
||
|
|
change(e) {
|
||
|
|
this.searchFormData.curr_page = e.current;
|
||
|
|
this.getTableDataByUrl();
|
||
|
|
},
|
||
|
|
handleSearchSubmit() {
|
||
|
|
this.getTableDataByUrl();
|
||
|
|
this.closeSearchDialog();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
url(newValue, oldValue) {
|
||
|
|
this.searchFormData.timeRange = null;
|
||
|
|
this.daterangePreset = undefined;
|
||
|
|
Object.keys(this.searchFormData).forEach((key) => {
|
||
|
|
delete this.searchFormData[key];
|
||
|
|
});
|
||
|
|
this.searchFormData.curr_page = this.CURRENT;
|
||
|
|
this.searchFormData.page_size = this.PAGESIZE;
|
||
|
|
this.total = 0;
|
||
|
|
this.getTableDataByUrl();
|
||
|
|
},
|
||
|
|
visible(newValue, oldValue) {
|
||
|
|
if (newValue) {
|
||
|
|
this.getTableDataByUrl();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
if (this.queryParams) {
|
||
|
|
Object.assign(this.searchFormData, this.queryParams)
|
||
|
|
}
|
||
|
|
if (this.visible) {
|
||
|
|
this.getTableDataByUrl();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onReady() {}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import './index.scss';
|
||
|
|
</style>
|