feat: 初始化
This commit is contained in:
George
344
pages/components/reportTable/index.vue
Normal file
344
pages/components/reportTable/index.vue
Normal file
@ -0,0 +1,344 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user