feat: CrudTable 新增重置事件，并优化查询栏日期范围的重置处理

web/src/components/table/CrudTable.vue

@@ -77,7 +77,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['update:queryItems', 'onChecked', 'onDataChange'])
+const emit = defineEmits(['update:queryItems', 'onChecked', 'onDataChange', 'onReset'])
 const loading = ref(false)
 const initQuery = { ...props.queryItems }
 const tableData = ref([])
@@ -132,6 +132,7 @@ async function handleReset() {
     queryItems[key] = null
   }
   emit('update:queryItems', { ...queryItems, ...initQuery })
+  emit('onReset')
   await nextTick()
   pagination.page = 1
   handleQuery()

web/src/views/user-management/user-list/index.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { h, onMounted, ref, resolveDirective, withDirectives } from 'vue'
+import dayjs from 'dayjs'
 import { NButton, NForm, NFormItem, NInput, NDatePicker } from 'naive-ui'
 
 import CommonPage from '@/components/page/CommonPage.vue'
@@ -18,6 +19,7 @@ defineOptions({ name: '用户管理' })
 
 const $table = ref(null)
 const queryItems = ref({})
+const createdDateRange = ref(null)
 const vPermission = resolveDirective('permission')
 
 // 次数设置弹窗相关状态
@@ -56,6 +58,21 @@ onMounted(() => {
   $table.value?.handleSearch()
 })
 
+const handleDateRangeChange = (val) => {
+  if (val && val.length === 2) {
+    queryItems.value.created_start = dayjs(val[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss')
+    queryItems.value.created_end = dayjs(val[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
+  } else {
+    queryItems.value.created_start = null
+    queryItems.value.created_end = null
+  }
+  $table.value?.handleSearch()
+}
+
+const handleReset = () => {
+  createdDateRange.value = null
+}
+
 const columns = [
   {
     title: 'ID',
@@ -232,6 +249,7 @@ const validateForm = {
       v-model:query-items="queryItems"
       :columns="columns"
       :get-data="api.getAppUserList"
+      @on-reset="handleReset"
     >
       <template #queryBar>
         <QueryBarItem label="手机号" :label-width="60">
@@ -266,12 +284,12 @@ const validateForm = {
         </QueryBarItem>
         <QueryBarItem label="注册时间" :label-width="70">
           <NDatePicker
-            v-model:value="queryItems.created_at"
+            v-model:value="createdDateRange"
             type="daterange"
             clearable
             placeholder="请选择注册时间"
             style="width: 280px"
-            @update:value="$table?.handleSearch()"
+            @update:value="handleDateRangeChange"
           />
         </QueryBarItem>
       </template>

web/src/views/valuation/audit/index.vue

@@ -55,6 +55,11 @@ const handleAuditedDateRangeChange = (val) => {
   $table.value?.handleSearch()
 }
 
+const handleReset = () => {
+  submittedDateRange.value = null
+  auditedDateRange.value = null
+}
+
 // 列表与详情公共方法
 const renderStatus = (status) => {
   const config = getStatusConfig(status)
@@ -313,6 +318,7 @@ watch(
         v-model:query-items="queryItems"
         :columns="columns"
         :get-data="api.getValuationList"
+        @on-reset="handleReset"
       >
         <template #queryBar>
           <QueryBarItem label="手机号" :label-width="80">