geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

销售结算

Browse Source
This commit is contained in:
‘huanghaiixia’
2026-02-06 17:33:38 +08:00
parent 9944eb8c3a
commit b3b2e701b4
6 changed files with 452 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/api/dayPlan/PngSettleHdr/index.ts
View File

@ -3,14 +3,38 @@ import { defHttp } from '/@/utils/http/axios';
import { ErrorMessageMode } from '/#/axios';
enum Api {
Page = '/dayPlan/pngSettleHdr/page',
// Page = '/dayPlan/pngSettleHdr/page',
Page = '/magic-api/dayPlan/pngSettleSalesHdrPage',
List = '/dayPlan/pngSettleHdr/list',
Info = '/dayPlan/pngSettleHdr/info',
LngPngSettleHdr = '/dayPlan/pngSettleHdr',
PageAdd = '/magic-api/dayPlan/pngSettleSalesHdrSelectPage',
date = '/magic-api/dayPlan/pngSettleSalesHdrSelectDateTo',
}
export async function getLngPngSettleHdrDate(params, mode: ErrorMessageMode = 'modal') {
return defHttp.get<LngPngSettleHdrPageModel>(
{
url: Api.date,
params,
},
{
errorMessageMode: mode,
},
);
}
export async function getLngPngSettleHdrPageAdd(params: LngPngSettleHdrPageParams, mode: ErrorMessageMode = 'modal') {
return defHttp.get<LngPngSettleHdrPageResult>(
{
url: Api.PageAdd,
params,
},
{
errorMessageMode: mode,
},
);
}
/**

193
src/components/common/measureListModal.vue Normal file
View File

@ -0,0 +1,193 @@
<template>
<div>
<BasicModal v-bind="$attrs" @register="registerModal" width="60%" :title="getTitle" @ok="handleSubmit"
@visible-change="handleVisibleChange" >
<div class="box">
<a-checkbox class="checkItem" v-model:checked="checked" @change="checkChange">仅显示未结算</a-checkbox>
<BasicTable @register="registerTable" class="measureListModal">
<template #bodyCell="{ column, record, index }">
<template v-if="column.dataIndex === 'settledSign'">
{{ Number(record.settledSign) == 1 ? '已结算': '未结算' }}
</template>
</template>
<template v-if="column.dataIndex === 'file'">
<div v-for="item in (record.lngFileUploadList )" class="fileCSS">
<a @click="handleDownload(item)">{{item.fileOrg}}</a>
</div>
</template>
</BasicTable>
</div>
</BasicModal>
</div>
</template>
<script lang="ts" setup>
import { ref, computed, unref, nextTick, watch } from 'vue';
import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { BasicTable, useTable, FormSchema, BasicColumn, TableAction } from '/@/components/Table';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { getLngPngSettleHdrPageAdd} from '/@/api/dayPlan/PngSettleHdr';
import { parseDownloadUrl} from '/@/api/system/file';
import { downloadByUrl } from '/@/utils/file/download';
import { DataFormat, FormatOption, DATE_FORMAT, FormatType } from '/@/utils/dataFormat';
const { t } = useI18n();
const checked = ref(false)
const codeFormSchema: FormSchema[] = [
{
field: 'datePlan',
label: '计划日期',
component: 'RangePicker',
componentProps: {
format: 'YYYY-MM-DD',
style: { width: '100%' },
getPopupContainer: () => document.body,
},
},
];
const columns: BasicColumn[] = [
{ dataIndex: 'datePlan', title: '计划日期', align: 'left', width: 100},
{ dataIndex: 'dateMea', title: '计量日期', align: 'left',width: 100},
{ dataIndex: 'cuSname', title: '客户', align: 'left', },
{ dataIndex: 'pointDelyName', title: '下载点', align: 'left',},
{ dataIndex: 'comName', title: '交易主体', align: 'left',},
{ dataIndex: 'qtyMeaGj', title: '完成量(吉焦)', align: 'left',width: 120},
{ dataIndex: 'qtyMeaM3', title: '完成量(方)', align: 'left',width: 120},
{ dataIndex: 'rateM3Gj', title: '比值(方/吉焦)', align: 'left',width: 120},
{ dataIndex: 'ksName', title: '销售合同', align: 'left',},
{ dataIndex: 'file', title: '附件', align: 'left',},
{ dataIndex: 'settledSign', title: '已结算', align: 'left',width: 100},
];
const emit = defineEmits(['success', 'register']);
const { notification } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
const selectedKeys = ref<string[]>([]);
const selectedValues = ref([]);
const props = defineProps({
selectType: { type: String, default: 'checkbox' },
});
const tableData = ref([])
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
});
const [registerTable, { getDataSource, setTableData, updateTableDataRecord, reload }] = useTable({
title: t('待结算记录'),
api: getLngPngSettleHdrPageAdd,
columns,
bordered: true,
pagination: true,
canResize: false,
formConfig: {
labelCol:{span: 12},
schemas: codeFormSchema,
fieldMapToTime: [['datePlan', ['startDate', 'endDate'], 'YYYY-MM-DD']],
showResetButton: true,
},
immediate: false, // 设置为不立即调用
beforeFetch: (params) => {
return { ...params,page:params.limit};
},
afterFetch: (res) => {
tableData.value = res || []
},
rowSelection: {
type: props.selectType,
onChange: onSelectChange
},
});
watch(
() => tableData.value,
(val) => {
if (val) {
let arr = DataFormat.format(val, [
FormatOption.createQty('qtyMeaGj'),
FormatOption.createQty('qtyMeaM3'),
]);
if (arr.length) {
setTableData(arr)
}
}
},
{
immediate: true,
deep: true,
}
);
const handleVisibleChange = (visible: boolean) => {
if (visible) {
nextTick(() => {
reload();
});
}
};
const checkChange = (val) => {
reload({ searchInfo: { settledSign: checked.value ? 0 : null } });
}
const handleDownload = (info) => {
const url = parseDownloadUrl(info.response ? info.response.data.fileUrl : info.fileUrl);
const fileName = info.response ? info.response.data.fileOrg : info.fileOrg;
downloadByUrl({ url, fileName: fileName});
};
function onSelectChange(rowKeys: string[], e) {
selectedKeys.value = rowKeys;
selectedValues.value = e
}
const getTitle = computed(() => (!unref(isUpdate) ? t('待结算记录') : t('')));
async function handleSubmit() {
if (!selectedValues.value.length) {
notification.warning({
message: t('提示'),
description: t('请选择数据')
});
return
}
closeModal();
emit('success', selectedValues.value);
}
</script>
<style >
.measureListModal .basicCol{
position: inherit !important;
top: 0;
}
.measureListModal .ant-col-8 {
width: 450px !important;
max-width: 450px !important;;
}
</style>
<style lang="less" scoped>
.box {
position: relative;
}
.checkItem {
position: absolute;
top: 12px;
left: 17px;
z-index: 104;
}
.fileCSS a{
width: 100%;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
}
</style>

92
src/components/common/priceComposeListModal.vue Normal file
View File

@ -0,0 +1,92 @@
<template>
<div>
<BasicModal v-bind="$attrs" @register="registerModal" width="60%" :title="getTitle" @ok="handleSubmit">
<a-table :columns="columns" :data-source="tableData" :scroll="{x: 300}" :pagination="false">
<template #bodyCell="{ column, record, index }">
<template v-if="column.dataIndex === 'qtySettleGj'">
<a-input-number v-model:value="record.qtySettleGj" :min="0" :precision="3" @change="numChange('qtySettleGj', record, index)" style="width: 100%" />
</template>
<template v-if="column.dataIndex === 'qtySettleM3'">
<a-input-number v-model:value="record.qtySettleM3" :min="0" :precision="3" @change="numChange('qtySettleM3', record, index)" style="width: 100%" />
</template>
<template v-if="column.dataIndex === 'priceM3'">
<a-input-number v-model:value="record.priceM3" :min="0" :precision="4" @change="numChange('priceM3', record, index)" style="width: 100%" />
</template>
<template v-if="column.dataIndex === 'priceGj'">
<a-input-number v-model:value="record.priceGj" :min="0" :precision="4" @change="numChange('priceGj', record, index)" style="width: 100%" />
</template>
<template v-if="column.dataIndex === 'amount'">
<a-input-number v-model:value="record.amount" :min="0" :precision="2" @change="numChange('amount', record, index)" style="width: 100%" />
</template>
</template>
</a-table>
</BasicModal>
</div>
</template>
<script lang="ts" setup>
import { ref, computed, unref, nextTick } from 'vue';
import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
const tableData = ref([
{priceDesc: '基础量300000方'},
{priceDesc: '增量'}
])
const curRecord = ref({})
const columns= [
{ title: t('序号'), dataIndex: 'index', key: 'index', customRender: (column) => `${column.index + 1}` ,width: 80},
{ title: t('价格描述'), dataIndex: 'priceDesc', width:130},
{ title: t('数量(吉焦)'), dataIndex: 'qtySettleGj', width: 120},
{ title: t('数量(方)'), dataIndex: 'qtySettleM3', width: 120},
{ title: t('价格(元/方)'), dataIndex: 'priceM3', width: 120},
{ title: t('价格(元/吉焦)'), dataIndex: 'priceGj', width: 120},
{ title: t('金额(元)'), dataIndex: 'amount', width: 120},
];
const emit = defineEmits(['success', 'register']);
const { notification } = useMessage();
const isUpdate = ref(true);
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false });
curRecord.value = data.record || {}
isUpdate.value = !!data?.isUpdate;
});
const getTitle = computed(() => (!unref(isUpdate) ? t('价格组成') : t('')));
const numChange = (k, record, idx) => {
if (curRecord.value.uomCode == 'M3') {
if (k=='amount') {
return
}
record.amount = ((Number(record.qtySettleM3) || 0) * (Number(record.priceM3) || 0)).toFixed(2)
}
if (curRecord.value.uomCode == 'GJ') {
if (k=='amount') {
return
}
record.amount = ((Number(record.qtySettleGj) || 0) * (Number(record.priceGj) || 0)).toFixed(2)
}
// if (curRecord.value.uomCode == 'TON') {
// }
}
async function handleSubmit() {
closeModal();
emit('success', tableData.value, curRecord.value);
}
</script>
<style >
</style>
<style lang="less" scoped>
</style>

19
src/views/dayPlan/PngSettleHdr/components/config.ts
View File

@ -8,10 +8,11 @@ export const formConfig = {
export const searchFormSchema: FormSchema[] = [
{
field: 'datePlan',
label: '结算日期',
label: '结算月',
component: 'RangePicker',
componentProps: {
format: 'YYYY-MM-DD',
format: 'YYYY-MM',
picker: 'month',
style: { width: '100%' },
getPopupContainer: () => document.body,
},
@ -30,7 +31,7 @@ export const columns: BasicColumn[] = [
title: '结算月',
componentType: 'input',
align: 'left',
width: 100,
sorter: true,
},
@ -39,7 +40,7 @@ export const columns: BasicColumn[] = [
title: '结算月开始日期',
componentType: 'input',
align: 'left',
width: 140,
sorter: true,
},
@ -48,12 +49,12 @@ export const columns: BasicColumn[] = [
title: '结算月结束日期',
componentType: 'input',
align: 'left',
width: 140,
sorter: true,
},
{
dataIndex: 'cpCode',
dataIndex: 'cpName',
title: '客户简称',
componentType: 'input',
align: 'left',
@ -89,7 +90,7 @@ export const columns: BasicColumn[] = [
},
{
dataIndex: 'comId',
dataIndex: 'comName',
title: '交易主体',
componentType: 'input',
align: 'left',
@ -116,11 +117,11 @@ export const columns: BasicColumn[] = [
},
{
dataIndex: 'approCode',
dataIndex: 'approName',
title: '审批状态',
componentType: 'input',
align: 'left',
width: 100,
sorter: true,
},
];

157
src/views/dayPlan/PngSettleHdr/components/createForm.vue
View File

@ -21,12 +21,12 @@
</a-col>
<a-col :span="8">
<a-form-item label="客户" name="cpName">
<a-input-search v-model:value="formState.cpName" :disabled="isDisable" placeholder="请选择客户" readonly @search="onSearchCustomer"/>
<a-input-search v-model:value="formState.cpName" :disabled="isDisable || dataList.length" placeholder="请选择客户" readonly @search="onSearchCustomer"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="交易主体" name="comId">
<a-select v-model:value="formState.comId" :disabled="isDisable" placeholder="请选择币种" style="width: 100%" allow-clear>
<a-select v-model:value="formState.comId" :disabled="isDisable || dataList.length" @change="comIdChange" placeholder="请选择" style="width: 100%" allow-clear>
<a-select-option v-for="item in optionSelect.comIdList" :key="item.id" :value="item.id">
{{ item.name }}
</a-select-option>
@ -44,17 +44,17 @@
</a-col>
<a-col :span="8">
<a-form-item label="结算总数量(吉焦)" name="qtySettleGj">
<a-input-number v-model:value="formState.qtySettleGj" disabled/>
<a-input v-model:value="formState.qtySettleGj" disabled/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="结算总数量(方)" name="qtySettleM3">
<a-input-number v-model:value="formState.qtySettleM3" disabled/>
<a-input v-model:value="formState.qtySettleM3" disabled/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="结算总金额(元)" name="amount">
<a-input-number v-model:value="formState.amount" disabled/>
<a-input v-model:value="formState.amount" disabled/>
</a-form-item>
</a-col>
<a-col :span="8">
@ -83,16 +83,19 @@
<a-button v-if="!isDisable" type="primary" style="margin-bottom: 10px;margin-right: 10px;" @click="handleBtn('add')">新增</a-button>
<a-button v-if="!isDisable" @click="handleBtn('del')">删除</a-button>
</div>
<a-table :columns="columns" :data-source="dataList" :scroll="{x: 300}" :row-selection="{ selectedRowKeys: selectedKeys, onChange: onSelectChange }">
<a-table :columns="columns" :data-source="dataList" :scroll="{x: 1300}" rowKey="salesId" :pagination="false" :row-selection="{ selectedRowKeys: selectedKeys, onChange: onSelectChange }">
<template #bodyCell="{ column, record, index }">
<template v-if="column.dataIndex === 'operation'">
<a v-if="!isDisable" style="margin-right: 10px" @click="btnCheck(record, index)">删除</a>
<a v-if="!isDisable" @click="btnCheck(record, index, 'delete')">删除</a>
</template>
<template v-if="column.dataIndex === 'priceDesc'">
<a v-if="!isDisable" @click="btnCheck(record, index, 'price')">增量</a>
</template>
</template>
</a-table>
</Card>
<Card title="对账单" :bordered="false" >
<UploadList :disabled="isDisable" btnTip="上传对账单" :list="dataFile" :value="formState.filePath" :tableName="tableName" :columnName="columnName" @change="uploadListChange"/>
<UploadList :disabled="isDisable" btnTip="上传对账单" :list="dataFileAccount" :value="formState.filePath" :tableName="tableName" :columnName="columnName" @change="uploadChange"/>
</Card>
<Card title="附件信息" :bordered="false" >
<UploadList :disabled="isDisable" :list="dataFile" :value="formState.filePath" :tableName="tableName" :columnName="columnName" @change="uploadListChange"/>
@ -100,6 +103,8 @@
</a-form>
</div>
<customerListModal @register="registerCustomer" @success="handleSuccessCustomer" selectType="radio" />
<measureListModal @register="registerMeasure" @success="handleSuccessMeasure"></measureListModal>
<priceComposeListModal @register="registerPrice" @success="handleSuccessPrice"></priceComposeListModal>
</a-spin>
</template>
@ -115,12 +120,14 @@
import type { Rule } from 'ant-design-vue/es/form';
import { getDictionary } from '/@/api/sales/Customer';
import { useModal } from '/@/components/Modal';
import { addLngContract,updateLngContract, getLngContract} from '/@/api/contract/ContractSalesInt';
import { addLngPngSettleHdr,updateLngPngSettleHdr, getLngPngSettleHdr, getLngPngSettleHdrDate} from '/@/api/dayPlan/PngSettleHdr';
import dayjs from 'dayjs';
import { getAppEnvConfig } from '/@/utils/env';
import { message } from 'ant-design-vue';
import UploadList from '/@/components/Form/src/components/UploadList.vue';
import customerListModal from '/@/components/common/customerListModal.vue';
import measureListModal from '/@/components/common/measureListModal.vue';
import priceComposeListModal from '/@/components/common/priceComposeListModal.vue';
import { getAllCom} from '/@/api/contract/ContractPurInt';
const tableName = 'ContractSalesInt';
@ -147,32 +154,33 @@
const pageType = ref(currentRoute.value.query?.type);
const pageId = ref(currentRoute.value.query?.id)
const contractQty = ref()
const spinning = ref(false);
const curIdx = ref(null)
const { notification } = useMessage();
const { t } = useI18n();
const isExpend=ref(false)
const formState = reactive({
approCode: 'WTJ',
typeCode: 'SI',
onlineSign: 'N',
cpTableName: 'lng_customer',
lngContractSalesIntList: [{}]
settleMonth: dayjs(new Date()),
settleTypeCode: 'I',
rpSign: 'Y'
});
const [register, { openModal:openModal}] = useModal();
const [registerMeasure, { openModal:openModalMeasure}] = useModal();
const [registerCustomer, { openModal:openModalCustomer}] = useModal();
const [registerPrice, { openModal:openModalPrice}] = useModal();
const rules= reactive({
kNo: [{ required: true, message: "该项为必填项", trigger: 'change' }],
kName: [{ required: true, message: "该项为必填项", trigger: 'change' }],
settleMonth: [{ required: true, message: "该项为必填项", trigger: 'change' }],
dateFrom: [{ required: true, message: "该项为必填项", trigger: 'change' }],
dateTo: [{ required: true, message: "该项为必填项", trigger: 'change' }],
cpName: [{ required: true, message: "该项为必填项", trigger: 'change' }],
rpSign: [{ required: true, message: "该项为必填项", trigger: 'change' }],
comId: [{ required: true, message: "该项为必填项", trigger: 'change' }],
});
const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
}
const dataFile = ref([]);
const dataFileAccount = ref([])
const dataList = ref([])
let optionSelect= reactive({
approCodeList: [],
@ -227,13 +235,16 @@
const onSelectChange = (rowKeys) => {
selectedKeys.value = rowKeys;
}
const uploadChange = (val) => {
dataFileAccount.value = val
}
const uploadListChange = (val) => {
dataFile.value = val
}
async function getInfo(id) {
spinning.value = true
try {
let data = await getLngContract(id)
let data = await getLngPngSettleHdr(id)
spinning.value = false
Object.assign(formState, {...data})
Object.assign(dataFile.value, formState.lngFileUploadList || [])
@ -245,9 +256,25 @@
spinning.value = false
}
}
const comIdChange = (val) => {
if (!val)return
getDate()
}
const getDate=(async () => {
let obj = {
cpCode: formState.cpCode,
comId: formState.comId
}
if (!pageId.value && formState.cpCode && formState.comId && !formState.dateFrom) {
let data = await getLngPngSettleHdrDate(obj) || []
if (data.length) {
formState.dateFrom = data[0]
formState.dateTo = null
}
}
})
async function getOption() {
optionSelect.approCodeList = await getDictionary('LNG_APPRO')
optionSelect.comIdList = await getAllCom() || []
optionSelect.signList = await getDictionary('LNG_YN')
@ -266,11 +293,81 @@
}
return endValue.valueOf() <= startValue.valueOf();
}
const handleBtn = () => {
const handleBtn = (type) => {
if (type === 'add') {
openModalMeasure(true,{isUpdate: false})
} else {
if (!selectedKeys.value.length) {
message.warn('请选择删除数据')
return
}
const btnCheck = () => {
selectedKeys.value.forEach(i => {
let idx = dataList.value.findIndex(v=>v.salesId == i)
idx>-1&&dataList.value.splice(idx, 1)
});
setTimeout(() => {
selectedKeys.value = []
}, 8000);
}
}
const handleSuccessMeasure = (val) => {
if (!dataList.value.length) {
dataList.value = val
return
}
val.forEach(v=> {
dataList.value.forEach(k=> {
if (v.salesId!==k.salesId) {
dataList.value.push(v)
}
})
})
}
const btnCheck = (record, index, type) => {
if (type == 'delete') {
dataList.value.splice(index, 1)
} else {
openModalPrice(true,{isUpdate: false, record})
}
}
const handleSuccessPrice = (arr, curRecord) => {
let qtySettleGj = 0
let qtySettleM3 = 0
let amount = 0
arr.forEach(v=> {
qtySettleGj+=Number(v.qtySettleGj) || 0
qtySettleM3+=Number(v.qtySettleM3) || 0
amount+=Number(v.amount) || 0
})
// price_gj=amount/qty_settle_gj，保留4位小数
// price_m3=amount/qty_settle_m3，保留4位小数
let priceGj = qtySettleGj ? Number(amount) / Number(qtySettleGj) : '0'
let priceM3 = qtySettleM3 ? Number(amount) / Number(qtySettleM3) : '0'
let idx = dataList.value.findIndex(v =>v.salesId == curRecord.salesId)
if (idx > -1) {
dataList.value[idx].qtySettleGj = qtySettleGj.toFixed(3)
dataList.value[idx].qtySettleM3 = qtySettleM3.toFixed(3)
dataList.value[idx].amount = amount.toFixed(2)
dataList.value[idx].priceGj = priceGj.toFixed(4)
dataList.value[idx].priceM3 = priceM3.toFixed(4)
dataList.value[idx].lngPngSettleSalesDtlList = arr
tableCount()
}
}
const tableCount = () => {
let qtySettleGj = 0
let qtySettleM3 = 0
let amount = 0
dataList.value.forEach(v => {
if (Number(v.settleTimes) == 1){
qtySettleGj+=Number(v.qtySettleGj) || 0
qtySettleM3+=Number(v.qtySettleM3) || 0
}
amount+=Number(v.amount) || 0
})
formState.qtySettleGj = qtySettleGj.toFixed(3)
formState.qtySettleM3 = qtySettleM3.toFixed(3)
formState.amount = amount.toFixed(2)
}
const onSearchCustomer = () => {
openModalCustomer(true,{isUpdate: false})
@ -278,6 +375,7 @@
const handleSuccessCustomer = (val) => {
formState.cpCode = val[0].cuCode
formState.cpName = val[0].cuName
getDate()
}
function close() {
tabStore.closeTab(currentRoute.value, router);
@ -288,13 +386,18 @@
async function handleSubmit(type) {
try {
await formRef.value.validateFields();
dataList.value.forEach(v => {
v.settleTypeCode = 'I'
})
let obj = {
...formState,
lngFileUploadList: dataFile.value,
billList: dataFileAccount.value,
lngPngSettleSalesList: dataList.value,
}
spinning.value = true;
let request = !formState.id ? addLngContract :updateLngContract
let request = !formState.id ? addLngPngSettleHdr :updateLngPngSettleHdr
try {
const data = await request(obj);
@ -319,7 +422,7 @@
console.log(errorInfo, 'errorInfo')
spinning.value = false;
errorInfo?.errorFields?.length && notification.warning({
message: 'Tip',
message: '提示',
description: '请完善信息'
});
return false

2
src/views/dayPlan/PngSettleHdr/index.vue
View File

@ -120,7 +120,7 @@
gutter: 16,
},
schemas: customSearchFormSchema,
fieldMapToTime: [['datePlan', ['startDate', 'endDate'], 'YYYY-MM-DD']],
fieldMapToTime: [['datePlan', ['startDate', 'endDate'], 'YYYY-MM']],
showResetButton: true,
},
beforeFetch: (params) => {