feat: 初始化
This commit is contained in:
George
72
pages/components/reportTable/index.scss
Normal file
72
pages/components/reportTable/index.scss
Normal file
@ -0,0 +1,72 @@
|
||||
.tableContainer {
|
||||
.searchSection {
|
||||
.searchFormDialog {
|
||||
padding: 0 14px;
|
||||
.searchForm {
|
||||
padding: 28px 16px;
|
||||
background: #fff;
|
||||
box-shadow: -1px 0px 5px 1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.submitter {
|
||||
display: flex;
|
||||
column-gap: 10px;
|
||||
color: #fff;
|
||||
.confirmBtn,
|
||||
.cancelBtn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
flex: 1;
|
||||
}
|
||||
.confirmBtn {
|
||||
background-color: rgba(77, 192, 229, 1);
|
||||
}
|
||||
.cancelBtn {
|
||||
background-color: rgba(15, 54, 117, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.datePreset {
|
||||
margin-bottom: 10px;
|
||||
::v-deep .checklist-group .checklist-box .radio__inner {
|
||||
border-radius: 4px;
|
||||
}
|
||||
::v-deep .checklist-group .checklist-box .radio__inner .radio__inner-icon {
|
||||
border-radius: 2px;
|
||||
}
|
||||
::v-deep .checklist-group .checklist-box.is--default.is-checked .radio__inner {
|
||||
border-color: #e5e5e5 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tableSection {
|
||||
margin-top: 10px;
|
||||
.tableTh {
|
||||
.columnItem {
|
||||
background-color: #f6f6f6;
|
||||
font-weight: 400;
|
||||
&:first-child {
|
||||
background-color: #fff;
|
||||
}
|
||||
border-top: 2px solid #29bbe4;
|
||||
}
|
||||
}
|
||||
.rowItem:last-child {
|
||||
.columnItem {
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
}
|
||||
.columnItem:first-child {
|
||||
background-color: #fff;
|
||||
position: sticky;
|
||||
left: 0px;
|
||||
transition: all 0.3s;
|
||||
border-bottom-color: #fff;
|
||||
box-shadow: 0px 17px 17px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.uni-table-tr:hover .columnItem:first-child {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
406
pages/components/reportTable/index.vue
Normal file
406
pages/components/reportTable/index.vue
Normal file
@ -0,0 +1,406 @@
|
||||
<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
|
||||
v-if="item.field === 'mt4_group' && getTypeByfield(item.field) === 'select' && url == '/app/report/getReport40'"
|
||||
:localdata="mtGroupOptions"
|
||||
v-model="searchFormData[item.field]"
|
||||
:placeholder="$t('form.pleaseSelect')"
|
||||
:emptyTips="$t('common.empty')"
|
||||
></uni-data-select>
|
||||
<uni-data-select
|
||||
v-else-if="item.field === 'mt4_leverage' && getTypeByfield(item.field) === 'select' && url == '/app/report/getReport40'"
|
||||
:localdata="leverageList"
|
||||
v-model="searchFormData[item.field]"
|
||||
:placeholder="$t('form.pleaseSelect')"
|
||||
:emptyTips="$t('common.empty')"
|
||||
></uni-data-select>
|
||||
<uni-data-select
|
||||
v-else-if="item.field === 'user_type' && getTypeByfield(item.field) === 'select' && url == '/app/report/getReport40'"
|
||||
:localdata="[{text: $t('form.userType.ib'), value: 1}, {text: $t('form.userType.customer'), value: 2}]"
|
||||
v-model="searchFormData[item.field]"
|
||||
:placeholder="$t('form.pleaseSelect')"
|
||||
:emptyTips="$t('common.empty')"
|
||||
></uni-data-select>
|
||||
<uni-data-select
|
||||
:clear="url !== '/app/report/getReport26'"
|
||||
v-else-if="getTypeByfield(item.field) === 'select'"
|
||||
:localdata="selectFieldsMap[item.field]"
|
||||
v-model="searchFormData[item.field]"
|
||||
:placeholder="$t('form.pleaseSelect')"
|
||||
:emptyTips="$t('common.empty')"
|
||||
@change="handleSelectChange($event, item.field)"
|
||||
></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, getMtGroup, getDictByCode } 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: [],
|
||||
mtGroupOptions: [],
|
||||
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,
|
||||
leverageList: []
|
||||
};
|
||||
},
|
||||
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'] },
|
||||
close: { 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'] },
|
||||
date_1: { default: ['date_1_start', 'date_1_end'] },
|
||||
regdate: { default: ['regdate_start', 'regdate_end'] },
|
||||
lastdate: { default: ['lastdate_start', 'lastdate_end'] }
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showSearchDialog() {
|
||||
this.$refs.alertDialog.open();
|
||||
},
|
||||
closeSearchDialog() {
|
||||
this.$refs.alertDialog.close();
|
||||
},
|
||||
getTypeByfield(field) {
|
||||
if (('mt4_group' === field || 'mt4_leverage' === field || 'user_type' === field) && this.url === '/app/report/getReport40') {
|
||||
return 'select';
|
||||
}
|
||||
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) {
|
||||
if (this.url === '/app/report/getReport40') {
|
||||
if (res.data.records && res.data.records.length) {
|
||||
res.data.records.pop()
|
||||
}
|
||||
}
|
||||
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();
|
||||
},
|
||||
loadMtGroupList(serverCode) {
|
||||
getMtGroup({
|
||||
qcc_mt_server: serverCode
|
||||
}).then(resp => {
|
||||
if (resp.data) {
|
||||
this.mtGroupOptions = resp.data.map(i => ({text: i.mt_group, value: i.mt_group}))
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSelectChange(e, field) {
|
||||
if ('mt4_server' === field && this.url === '/app/report/getReport40') {
|
||||
this.searchFormData['mt4_group'] = undefined
|
||||
this.mtGroupOptions = []
|
||||
if (e) {
|
||||
this.loadMtGroupList(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
url(newValue, oldValue) {
|
||||
this.timeRangeData = {}
|
||||
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();
|
||||
if (newValue == '/app/report/getReport40') {
|
||||
getDictByCode('leverage').then(resp => {
|
||||
this.leverageList = resp.data.map(i => {
|
||||
return { text: i.fun_item_text, value: i.fun_item_code }
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
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