时间范围筛选优化

admin/src/views/stats/self_input/account_cost.vue

@@ -14,13 +14,14 @@
         </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-tree-select
                         v-model="queryParams.dept_id"
@@ -33,7 +34,7 @@
                         clearable
                         filterable
                         class="w-[220px]"
-                        @change="resetPage"
+                        @change="handleQuery"
                     />
                 </el-form-item>
                 <el-form-item label="自媒体来源">
@@ -44,7 +45,7 @@
                         placeholder="全部来源"
                         :allow-create="false"
                         select-class="w-[220px]"
-                        @change="resetPage"
+                        @change="handleQuery"
                         @visible-change="onMediaSourceDropdownVisible"
                     />
                 </el-form-item>
@@ -53,11 +54,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-button v-if="selfInputPath" class="ml-2" @click="goSelfInput">返回统计</el-button>
                 </el-form-item>
@@ -146,6 +147,8 @@ import feedback from '@/utils/feedback'
 import CostEditPopup from './cost-edit.vue'
 import MediaSourceSelect from './MediaSourceSelect.vue'
 import { useMediaSourceOptions } from './useMediaSourceOptions'
+import ListTimeFilter from '@/components/list-time-filter/index.vue'
+import { useListTimeFilter } from '@/hooks/useListTimeFilter'
 
 const router = useRouter()
 const editRef = shallowRef<InstanceType<typeof CostEditPopup>>()
@@ -173,25 +176,48 @@ const goSelfInput = () => {
 }
 
 const queryParams = reactive({
-    start_date: '',
-    end_date: '',
     media_source: '',
     dept_id: undefined as number | undefined,
     remark: '',
 })
 
+const {
+    time_type,
+    dateRange,
+    resolve,
+    handleTimeTypeChange,
+    handleCustomDateChange,
+    resetTimeFilter,
+} = useListTimeFilter('today')
+
 const { pager, getLists, resetPage } = usePaging({
-    fetchFun: personalAccountCostLists,
+    fetchFun: async (params: Record<string, any>) => {
+        const [start_date, end_date] = resolve()
+        return personalAccountCostLists({
+            ...params,
+            start_date,
+            end_date,
+        })
+    },
     params: queryParams,
 })
 
+const handleQuery = () => {
+    pager.page = 1
+    getLists()
+}
+
+const onTimeTypeChange = () => handleTimeTypeChange(handleQuery)
+const onCustomDateChange = () => handleCustomDateChange(handleQuery)
+
 const handleReset = () => {
-    queryParams.start_date = ''
-    queryParams.end_date = ''
+    resetTimeFilter()
     queryParams.media_source = ''
     queryParams.dept_id = undefined
     queryParams.remark = ''
-    resetPage()
+    pager.page = 1
+    pager.size = 15
+    getLists()
 }
 
 const onMediaSourceDropdownVisible = (visible: boolean) => {
@@ -236,9 +262,10 @@ const loadDeptOptions = async () => {
     }
 }
 
-onMounted(() => {
+onMounted(async () => {
     loadDeptOptions()
     loadMediaSourceOptions()
+    await getLists()
 })
 </script>
 
@@ -247,6 +274,12 @@ onMounted(() => {
     padding: 20px;
 }
 
+.stats-filter-form {
+    :deep(.el-form-item) {
+        margin-bottom: 0;
+    }
+}
+
 .dept-cell {
     cursor: help;
     border-bottom: 1px dashed #c0c4cc;