时间范围筛选优化

admin/src/views/finance/account_cost/index.vue

@@ -14,13 +14,13 @@
         </el-card>
 
         <el-card class="!border-none" shadow="never">
-            <el-form class="mb-[-16px]" :model="queryParams" inline>
-                <el-form-item label="日期范围">
-                    <daterange-picker
-                        v-model:startTime="queryParams.start_date"
-                        v-model:endTime="queryParams.end_date"
-                    />
-                </el-form-item>
+            <el-form :inline="true" :model="queryParams" class="stats-filter-form">
+                <list-time-filter
+                    v-model:time-type="time_type"
+                    v-model:date-range="dateRange"
+                    @time-type-change="onTimeTypeChange"
+                    @custom-change="onCustomDateChange"
+                />
                 <el-form-item label="自媒体渠道">
                     <el-select
                         v-model="queryParams.media_channel_code"
@@ -67,11 +67,11 @@
                         v-model="queryParams.remark"
                         placeholder="备注 / 创建人 / 修改人"
                         clearable
-                        @keyup.enter="resetPage"
+                        @keyup.enter="handleQuery"
                     />
                 </el-form-item>
                 <el-form-item>
-                    <el-button type="primary" @click="resetPage">查询</el-button>
+                    <el-button type="primary" :loading="pager.loading" @click="handleQuery">查询</el-button>
                     <el-button @click="handleReset">重置</el-button>
                 </el-form-item>
             </el-form>
@@ -148,7 +148,9 @@
 <script lang="ts" setup name="accountCostList">
 import { accountCostDelete, accountCostLists } from '@/api/finance'
 import { usePaging } from '@/hooks/usePaging'
+import { useListTimeFilter } from '@/hooks/useListTimeFilter'
 import feedback from '@/utils/feedback'
+import ListTimeFilter from '@/components/list-time-filter/index.vue'
 
 import EditPopup from './edit.vue'
 
@@ -172,18 +174,40 @@ const editRef = shallowRef<InstanceType<typeof EditPopup>>()
 const showEdit = ref(false)
 
 const queryParams = reactive({
-    start_date: '',
-    end_date: '',
     media_channel_code: '',
     dept_id: '',
     remark: '',
 })
 
-const { pager, getLists, resetPage } = usePaging({
-    fetchFun: accountCostLists,
+const {
+    time_type,
+    dateRange,
+    resolve,
+    handleTimeTypeChange,
+    handleCustomDateChange,
+    resetTimeFilter,
+} = useListTimeFilter('today')
+
+const { pager, getLists } = usePaging({
+    fetchFun: async (params: Record<string, any>) => {
+        const [start_date, end_date] = resolve()
+        return accountCostLists({
+            ...params,
+            start_date,
+            end_date,
+        })
+    },
     params: queryParams,
 })
 
+const handleQuery = () => {
+    pager.page = 1
+    getLists()
+}
+
+const onTimeTypeChange = () => handleTimeTypeChange(handleQuery)
+const onCustomDateChange = () => handleCustomDateChange(handleQuery)
+
 const mediaChannelOptionsFlat = computed<MediaChannelOption[]>(() => {
     const options = pager.extend.media_channel_options
     if (!Array.isArray(options)) return []
@@ -258,18 +282,27 @@ const handleDelete = async (id: number) => {
 }
 
 const handleReset = () => {
-    queryParams.start_date = ''
-    queryParams.end_date = ''
+    resetTimeFilter()
     queryParams.media_channel_code = ''
     queryParams.dept_id = ''
     queryParams.remark = ''
-    resetPage()
+    pager.page = 1
+    pager.size = 15
+    getLists()
 }
 
-getLists()
+onMounted(() => {
+    getLists()
+})
 </script>
 
 <style scoped lang="scss">
+.stats-filter-form {
+    :deep(.el-form-item) {
+        margin-bottom: 0;
+    }
+}
+
 .account-cost-channel-select {
     :deep(.channel-opt-row) {
         display: flex;