refactor: ♻️ 日期范围查询组件封装避免日期的转换，用户和日志模块优化

src/pages/work/log/index.vue

@@ -1,8 +1,8 @@
 <template>
   <view class="log">
     <!-- 筛选 -->
-    <wd-drop-menu close-on-click-modal class="mb-20rpx">
-      <wd-drop-menu-item ref="dropMenu" title="筛选" icon="filter" icon-size="18px">
+    <wd-drop-menu close-on-click-modal class="mb-24rpx">
+      <wd-drop-menu-item ref="filterDropMenu" title="筛选" icon="filter" icon-size="18px">
         <view>
           <wd-input
             v-model="queryParams.keywords"
@@ -10,242 +10,148 @@
             type="text"
             placeholder="请输入关键字"
           />
-          <wd-calendar
-            v-model="timeStampArray"
-            label="日期选择"
-            type="daterange"
-            allow-same-day
-            @confirm="handleConfirm"
-          />
-          <view class="flex-between mb-20rpx">
-            <wd-button class="mt-20rpx mb-20rpx" size="medium" @click="handleSearch">
-              查询
-            </wd-button>
-            <wd-button size="medium" type="info" @click="handleReset">重置</wd-button>
+
+          <cu-date-query v-model="queryParams.createTime" :label="'日期选择'" />
+
+          <view class="flex-between py-2">
+            <wd-button class="w-20%" type="info" @click="handleResetQuery">重置</wd-button>
+            <wd-button class="w-70%" @click="handleQuery">查询</wd-button>
           </view>
         </view>
       </wd-drop-menu-item>
     </wd-drop-menu>
 
     <!-- 卡片列表 -->
-    <view v-for="(item, index) in pageData" :key="index">
-      <wd-card :title="item.operator">
-        <wd-row>
-          <wd-col v-for="(rowItem, rowIndex) in listPageTypeArray" :key="rowIndex" :span="12">
-            <wd-col :span="rowItem.titleSpan">
-              <view>{{ rowItem.title }}：</view>
-            </wd-col>
-            <wd-col :span="rowItem.keySpan">
-              <view>{{ item[rowItem.key] }}</view>
-            </wd-col>
-          </wd-col>
-        </wd-row>
-        <template #footer>
-          <wd-button size="small" plain @click="getDetail(item)">查看详情</wd-button>
-        </template>
-      </wd-card>
-    </view>
+    <wd-card v-for="(item, index) in pageData" class="card-list">
+      <template #title>
+        {{ item.operator }}
+      </template>
 
-    <!-- 查看详情 -->
-    <wd-action-sheet v-model="detailShow">
-      <view class="p-50rpx">
-        <wd-row v-for="(rowItem, rowIndex) in detailTypeArray" :key="rowIndex" class="mt-20rpx">
-          <wd-col :span="rowItem.titleSpan">
-            <view>{{ rowItem.title }}：</view>
-          </wd-col>
-          <wd-col :span="rowItem.keySpan">
-            <view>{{ logDetail[rowItem.key] }}</view>
-          </wd-col>
-        </wd-row>
-      </view>
-    </wd-action-sheet>
+      <wd-cell-group>
+        <wd-cell title="模块" :value="item.module" />
+        <wd-cell title="内容" :value="item.content" />
+        <wd-cell title="IP" :value="item.ip" />
+        <wd-cell title="地区" :value="item.region" />
+      </wd-cell-group>
+
+      <template #footer>
+        <view class="flex-between">
+          <view class="text-left">
+            <wd-text text="创建时间：" size="small" class="font-bold" />
+            <wd-text :text="item.createTime" size="small" />
+          </view>
+          <view class="text-right">
+            <wd-button type="primary" size="small" plain @click="handleViewDetail(item)">
+              查看详情
+            </wd-button>
+          </view>
+        </view>
+      </template>
+    </wd-card>
+
+    <!-- 详情弹窗 -->
+    <wd-popup v-model="detailDialogVisible" position="bottom">
+      <wd-cell-group>
+        <wd-cell title="操作人" :value="logDetail.operator" />
+        <wd-cell title="操作时间" :value="logDetail.createTime" />
+        <wd-cell title="模块" :value="logDetail.module" />
+        <wd-cell title="内容" :value="logDetail.content" />
+        <wd-cell title="IP" :value="logDetail.ip" />
+        <wd-cell title="地区" :value="logDetail.region" />
+        <wd-cell title="浏览器" :value="logDetail.region" />
+        <wd-cell title="终端系统" :value="logDetail.os" />
+        <wd-cell title="耗时(毫秒)" :value="logDetail.executionTime" />
+      </wd-cell-group>
+    </wd-popup>
 
     <!-- 加载更多 -->
-    <wd-loadmore custom-class="loadmore" :state="loadMoreState" />
+    <wd-loadmore v-if="total > 0" :state="loadMoreState" @reload="loadmore" />
+    <wd-status-tip v-else-if="total == 0" image="search" tip="当前搜索无结果" />
   </view>
 </template>
 <script lang="ts" setup>
-import LogAPI, { LogPageVO, LogPageQuery } from "@/api/system/log";
 import { LoadMoreState } from "wot-design-uni/components/wd-loadmore/types";
 import { DropMenuItemExpose } from "wot-design-uni/components/wd-drop-menu-item/types";
-import { dayjs } from "wot-design-uni";
 
+import LogAPI, { LogVO, LogPageQuery } from "@/api/system/log";
+import CuDateQuery from "@/components/cu-date-query/index.vue";
+
+const filterDropMenu = ref<DropMenuItemExpose>();
 const loadMoreState = ref<LoadMoreState>("loading");
 
 const queryParams = reactive<LogPageQuery>({
   pageNum: 1,
   pageSize: 10,
-  keywords: "",
-  createTime: ["", ""],
 });
 
-const timeStampArray = ref<number[]>([]);
+const total = ref(0);
+const pageData = ref<LogVO[]>([]);
+
+const logDetail = ref<LogVO>({});
+const detailDialogVisible = ref(false);
 
-/**
- * 日期格式化
- */
-function handleConfirm({ value }: Ref<number[]>) {
-  queryParams.createTime[0] = dayjs(value[0]).format("YYYY-MM-DD");
-  queryParams.createTime[1] = dayjs(value[1]).format("YYYY-MM-DD");
-}
 /**
  * 搜索栏
  */
-const dropMenu = ref<DropMenuItemExpose>();
-function handleSearch() {
-  pageData.value = [];
-  dropMenu.value?.close();
-  handleQuery();
-}
-
-/**
- * 重置搜索条件
- */
-function handleReset() {
-  queryParams.pageNum = 1;
-  queryParams.keywords = "";
-  queryParams.createTime = ["", ""];
-  timeStampArray.value = [];
-  pageData.value = [];
-  dropMenu.value?.close();
-  handleQuery();
-}
-
-// 日志卡片列表数据
-const pageData = ref<LogPageVO[]>([]);
-
-onLoad(() => {
-  handleQuery();
-});
-
-/**
- * 查询
- */
 function handleQuery() {
+  filterDropMenu.value?.close();
+  queryParams.pageNum = 1;
+  loadmore();
+}
+
+/**
+ * 重置搜索
+ */
+function handleResetQuery() {
+  queryParams.keywords = undefined;
+  queryParams.createTime = undefined;
+  handleQuery();
+}
+
+/**
+ * 加载更多
+ */
+function loadmore() {
   loadMoreState.value = "loading";
   LogAPI.getPage(queryParams)
     .then((data) => {
-      pageData.value?.push(...data.list);
+      pageData.value = data.list;
+      total.value = data.total;
+      queryParams.pageNum++;
     })
     .catch((e) => {
-      console.log("系统异常", e);
+      pageData.value = [];
     })
     .finally(() => {
       loadMoreState.value = "finished";
     });
 }
 
+/**
+ * 查看详情
+ */
+function handleViewDetail(item: LogVO) {
+  detailDialogVisible.value = true;
+  logDetail.value = item;
+}
+
 /**
  * 触底事件
  */
 onReachBottom(() => {
-  queryParams.pageNum++;
-  handleQuery();
+  if (queryParams.pageNum * queryParams.pageSize < total.value) {
+    loadmore();
+  } else if (queryParams.pageNum * queryParams.pageSize >= total.value) {
+    loadMoreState.value = "finished";
+  }
 });
 
-/**
- * 卡片列表展示字段
- */
-interface listPageType {
-  title: string;
-  key: keyof LogPageVO;
-  titleSpan: Number;
-  keySpan: Number;
-}
-const listPageTypeArray = ref<listPageType[]>([
-  {
-    title: "模块",
-    key: "module",
-    titleSpan: 8,
-    keySpan: 16,
-  },
-  {
-    title: "内容",
-    key: "content",
-    titleSpan: 8,
-    keySpan: 16,
-  },
-  {
-    title: "时间",
-    key: "createTime",
-    titleSpan: 8,
-    keySpan: 16,
-  },
-  {
-    title: "地区",
-    key: "region",
-    titleSpan: 8,
-    keySpan: 16,
-  },
-]);
-
-/**
- * 卡片内容详情
- */
-const logDetail = ref<LogPageVO>({});
-const detailShow = ref<boolean>(false);
-const detailTypeArray = ref<listPageType[]>([
-  {
-    title: "模块",
-    key: "module",
-    titleSpan: 6,
-    keySpan: 18,
-  },
-  {
-    title: "内容",
-    key: "content",
-    titleSpan: 6,
-    keySpan: 18,
-  },
-  {
-    title: "时间",
-    key: "createTime",
-    titleSpan: 6,
-    keySpan: 18,
-  },
-  {
-    title: "地区",
-    key: "region",
-    titleSpan: 6,
-    keySpan: 18,
-  },
-  {
-    title: "IP",
-    key: "ip",
-    titleSpan: 6,
-    keySpan: 18,
-  },
-  {
-    title: "浏览器",
-    key: "browser",
-    titleSpan: 6,
-    keySpan: 18,
-  },
-  {
-    title: "终端系统",
-    key: "os",
-    titleSpan: 6,
-    keySpan: 18,
-  },
-  {
-    title: "执行时间(ms)",
-    key: "executionTime",
-    titleSpan: 8,
-    keySpan: 16,
-  },
-]);
-
-function getDetail(item: LogPageVO) {
-  detailShow.value = true;
-  logDetail.value = item;
-}
+onLoad(() => {
+  handleQuery();
+});
 </script>
 
 <style lang="scss" scoped>
-.log {
-  background: #f8f8f8;
-}
-
 .wd-col {
   margin-top: 10rpx;
 }
@@ -255,4 +161,14 @@ function getDetail(item: LogPageVO) {
   justify-content: flex-end;
   padding: 0 50rpx;
 }
+
+.card-list {
+  :deep(.wd-cell__wrapper) {
+    padding: 4rpx 0;
+  }
+  :deep(.wd-cell) {
+    padding-right: 10rpx;
+    background: #f8f8f8;
+  }
+}
 </style>

src/pages/work/user/index.vue

@@ -23,11 +23,11 @@
               placeholder="用户名/昵称/手机号"
             />
 
-            <wd-calendar v-model="createTimeRange" label="创建时间" type="daterange" />
+            <cu-date-query v-model="queryParams.createTime" label="创建时间" />
 
             <view class="flex-between py-2">
               <wd-button class="w-20%" type="info" @click="hendleResetQuery">重置</wd-button>
-              <wd-button class="w-70%" @click="handleQuery">确定</wd-button>
+              <wd-button class="w-70%" @click="handleQuery">查询</wd-button>
             </view>
           </view>
         </wd-drop-menu-item>
@@ -35,7 +35,7 @@
     </view>
 
     <!-- 用户卡片 -->
-    <wd-card v-for="item in dataList">
+    <wd-card v-for="item in pageData">
       <template #title>
         <view class="flex-between">
           <view class="flex-center">
@@ -82,7 +82,7 @@
       </template>
     </wd-card>
 
-    <wd-loadmore v-if="total > 0" :state="state" @reload="loadmore" />
+    <wd-loadmore v-if="total > 0" :state="loadMoreState" @reload="loadmore" />
     <wd-status-tip v-else-if="total == 0" image="search" tip="当前搜索无结果" />
     <wd-message-box />
 
@@ -128,19 +128,19 @@
 <script lang="ts" setup>
 import { LoadMoreState } from "wot-design-uni/components/wd-loadmore/types";
 import { FormRules } from "wot-design-uni/components/wd-form/types";
-import { useMessage, dayjs } from "wot-design-uni";
+import { useMessage } from "wot-design-uni";
 
 import UserAPI, { type UserPageQuery, UserPageVO, UserForm } from "@/api/system/user";
 import RoleAPI from "@/api/system/role";
 import DeptAPI from "@/api/system/dept";
 
-import CuPicker from "@/components/CuPicker.vue";
+import CuPicker from "@/components/cu-picker/index.vue";
+import CuDateQuery from "@/components/cu-date-query/index.vue";
 
 const message = useMessage();
-
-const loading = ref(false);
-const state = ref<LoadMoreState>("loading");
-const dataList = ref<UserPageVO[]>([]);
+const loadMoreState = ref<LoadMoreState>("loading");
+const filterDropMenu = ref();
+const userFormRef = ref();
 
 const sortValue = ref(0);
 const sortOptions = ref<Record<string, any>[]>([
@@ -154,11 +154,9 @@ const queryParams: UserPageQuery = {
   pageSize: 10,
 };
 
-const createTimeRange = ref<any[]>([null, null]);
-
-const filterDropMenu = ref();
-
 const total = ref(0);
+const pageData = ref<UserPageVO[]>([]);
+
 const dialog = reactive({
   visible: false,
 });
@@ -176,10 +174,8 @@ const initialFormData: UserForm = {
 
 const formData = reactive<UserForm>({ ...initialFormData });
 
-const userFormRef = ref();
 const roleOptions = ref<Record<string, any>[]>([]);
 const deptOptions = ref<OptionType[]>([]);
-
 const rules: FormRules = {
   username: [{ required: true, message: "请输入用户名" }],
   nickname: [{ required: true, message: "请输入昵称" }],
@@ -243,21 +239,6 @@ const handleSortChange = ({ value }: { value: number }) => {
 const handleQuery = () => {
   filterDropMenu.value?.close();
   queryParams.pageNum = 1;
-
-  // 格式化时间范围
-  const startDate = createTimeRange.value[0]
-    ? dayjs(createTimeRange.value[0]).format("YYYY-MM-DD")
-    : "";
-  const endDate = createTimeRange.value[1]
-    ? dayjs(createTimeRange.value[1]).format("YYYY-MM-DD")
-    : "";
-
-  queryParams.createTime = [startDate, endDate];
-
-  // #ifdef MP-WEIXIN
-  queryParams.createTime = `${startDate},${endDate}`;
-  // #endif
-
   loadmore();
 };
 
@@ -265,27 +246,27 @@ const handleQuery = () => {
  * 重置查询
  */
 const hendleResetQuery = () => {
-  filterDropMenu.value?.close();
-  queryParams.pageNum = 1;
-  queryParams.keywords = "";
-  queryParams.createTime = "";
-  createTimeRange.value = ["", ""];
-  loadmore();
+  queryParams.keywords = undefined;
+  queryParams.createTime = undefined;
+  handleQuery();
 };
 
 /**
  * 加载更多
  */
 function loadmore() {
-  state.value = "loading";
+  loadMoreState.value = "loading";
   UserAPI.getPage(queryParams)
     .then((data) => {
-      dataList.value = data.list;
+      pageData.value = data.list;
       total.value = data.total;
       queryParams.pageNum++;
     })
+    .catch((e) => {
+      pageData.value = [];
+    })
     .finally(() => {
-      state.value = "finished";
+      loadMoreState.value = "finished";
     });
 }
 
@@ -293,20 +274,13 @@ function loadmore() {
  * 打开弹窗
  */
 async function handleOpenDialog(id?: number) {
-  loading.value = true;
   dialog.visible = true;
   roleOptions.value = await RoleAPI.getOptions();
   deptOptions.value = await DeptAPI.getOptions();
   if (id) {
-    UserAPI.getFormData(id)
-      .then((data) => {
-        Object.assign(formData, { ...data });
-      })
-      .finally(() => {
-        loading.value = false;
-      });
-  } else {
-    loading.value = false;
+    UserAPI.getFormData(id).then((data) => {
+      Object.assign(formData, { ...data });
+    });
   }
 }
 
@@ -378,7 +352,7 @@ onReachBottom(() => {
   if (queryParams.pageNum * queryParams.pageSize < total.value) {
     loadmore();
   } else if (queryParams.pageNum * queryParams.pageSize >= total.value) {
-    state.value = "finished";
+    loadMoreState.value = "finished";
   }
 });