|
|
@@ -3,7 +3,20 @@
|
|
|
<teleport to="#appPageTeleport">
|
|
|
<app-view>
|
|
|
<template #header>
|
|
|
- <app-filter :option="filterOption" />
|
|
|
+ <app-filter :option="filterOption" :rules="filterRules">
|
|
|
+ <template #logType="{ item }">
|
|
|
+ <el-form-item :label="item.label" prop="logType">
|
|
|
+ <el-select v-model="item.value">
|
|
|
+ <el-option v-for="option in item.options?.()" :key="option.value" :label="option.label"
|
|
|
+ :value="option.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="日期" prop="date" v-if="item.value === 2">
|
|
|
+ <el-date-picker type="daterange" v-model="dateValue" value-format="YYYYMMDD"
|
|
|
+ start-placeholder="开始" end-placeholder="结束" />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </app-filter>
|
|
|
</template>
|
|
|
<app-table :data="dataList" :columns="tableColumns" :loading="loading">
|
|
|
<template #headerLeft>
|
|
|
@@ -26,7 +39,7 @@
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import { shallowRef, PropType } from 'vue'
|
|
|
-import { ElMessage } from 'element-plus'
|
|
|
+import { ElMessage, FormRules } from 'element-plus'
|
|
|
import { useRequest } from '@/hooks/request'
|
|
|
import { useDataFilter } from '@/hooks/datatable-v2'
|
|
|
import { queryAmountStream } from '@/services/api/account'
|
|
|
@@ -42,10 +55,11 @@ const props = defineProps({
|
|
|
}
|
|
|
})
|
|
|
|
|
|
-const { global: { t } } = i18n
|
|
|
-
|
|
|
const emit = defineEmits(['closed'])
|
|
|
|
|
|
+const t = i18n.global.t
|
|
|
+const dateValue = shallowRef<string[] | null>([])
|
|
|
+
|
|
|
const { dataList, total, pageSize, pageIndex, loading, run } = useRequest(queryAmountStream, {
|
|
|
params: {
|
|
|
logType: 1,
|
|
|
@@ -70,7 +84,15 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
|
|
|
{ field: 'amountAdjustTypeName', label: 'account.fundacct.bankstatement.amountAdjustTypeName' },
|
|
|
])
|
|
|
|
|
|
-const { filterOption, getQueryParams } = useDataFilter<Model.AmountStreamReq>({
|
|
|
+// 表单验证规则
|
|
|
+const filterRules: FormRules = {
|
|
|
+ date: [{
|
|
|
+ required: true,
|
|
|
+ validator: () => dateValue.value?.length === 2
|
|
|
+ }]
|
|
|
+}
|
|
|
+
|
|
|
+const { filterOption, getQueryParams, resetFilters } = useDataFilter<Model.AmountStreamReq>({
|
|
|
filters: [
|
|
|
{
|
|
|
field: 'logType',
|
|
|
@@ -79,17 +101,25 @@ const { filterOption, getQueryParams } = useDataFilter<Model.AmountStreamReq>({
|
|
|
options: () => [
|
|
|
{ label: t('common.current'), value: 1 },
|
|
|
{ label: t('common.history'), value: 2 },
|
|
|
- ],
|
|
|
+ ]
|
|
|
}
|
|
|
],
|
|
|
buttons: [
|
|
|
{ label: t('operation.search'), className: 'el-button--primary', onClick: () => onSearch() },
|
|
|
- { label: t('operation.reset'), className: 'el-button--primary', onClick: () => onSearch(true) }
|
|
|
+ { label: t('operation.reset'), className: 'el-button--primary', onClick: () => onReset() }
|
|
|
]
|
|
|
})
|
|
|
|
|
|
const onSearch = (clear = false) => {
|
|
|
const qs = getQueryParams(clear)
|
|
|
+ const [startDate, endDate] = dateValue.value || []
|
|
|
+ qs.startTime = startDate
|
|
|
+ qs.endTime = endDate
|
|
|
run(qs)
|
|
|
}
|
|
|
+
|
|
|
+const onReset = () => {
|
|
|
+ dateValue.value = []
|
|
|
+ resetFilters()
|
|
|
+}
|
|
|
</script>
|