fix: 🐛 修复已知问题

.stylelintrc.json

@@ -31,6 +31,12 @@
         "ignoreUnits": ["rpx"]
       }
     ],
+    "selector-type-no-unknown": [
+      true,
+      {
+        "ignoreTypes": ["page"]
+      }
+    ],
     "selector-pseudo-class-no-unknown": [
       true,
       {

src/App.vue

@@ -10,4 +10,8 @@ onHide(() => {
   console.log("App Hide");
 });
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss">
+page {
+  background: #f8f8f8;
+}
+</style>

src/pages/work/index.vue

@@ -33,7 +33,6 @@ const gridList = reactive([
         url: "/pages/work/user/index",
         prem: "sys:user:query",
       },
-
       {
         icon: "/static/icons/role.png",
         title: "角色管理",

src/pages/work/log/index.vue

@@ -2,13 +2,7 @@
   <view class="log">
     <!-- 筛选 -->
     <wd-drop-menu close-on-click-modal class="mb-20rpx">
-      <wd-drop-menu-item
+      <wd-drop-menu-item ref="dropMenu" title="筛选" icon="filter" icon-size="18px">
-        ref="dropMenu"
-        title="筛选"
-        icon="filter"
-        icon-size="18px"
-        @opened="handleOpened"
-      >
         <view>
           <wd-input
             v-model="queryParams.keywords"
@@ -243,13 +237,6 @@ function getDetail(item: LogPageVO) {
   detailShow.value = true;
   logDetail.value = item;
 }
-
-/**
- * 返回
- */
-function back() {
-  uni.navigateBack();
-}
 </script>
 
 <style lang="scss" scoped>

src/pages/work/user/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="user">
-    <!-- 筛选 -->
+    <!-- 排序筛选 -->
     <wd-drop-menu>
       <wd-drop-menu-item v-model="sortValue" :options="sortOptions" @change="handleSortChange" />
       <wd-drop-menu-item ref="dropMenuRef" title="筛选">
@@ -8,10 +8,13 @@
           <wd-input
             v-model="queryParams.keywords"
             label="关键字"
-            type="text"
+            placeholder="用户名/昵称/手机号"
-            placeholder="请输入关键字"
           />
-          <wd-datetime-picker v-model="daterange" label="创建时间" />
+          <wd-datetime-picker v-model="createTimeRange" type="date" 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>
+          </view>
         </view>
       </wd-drop-menu-item>
     </wd-drop-menu>
@@ -25,12 +28,11 @@
               <view class="font-bold">
                 {{ item.nickname }}
                 <wd-icon v-if="item.gender == 1" name="gender-male" class="color-#4D80F0" />
-                <wd-icon v-else-if="item.gender == 2" name="gender-female" class="color-#fa4350" />
+                <wd-icon v-else-if="item.gender == 2" name="gender-female" class="color-#FA4350" />
               </view>
               <view class="mt-1"><wd-text :text="item.deptName" size="12px" /></view>
             </view>
           </view>
-
           <view>
             <wd-tag v-if="item.status === 1" type="success" plain>正常</wd-tag>
             <wd-tag v-else-if="item.status === 0" plain>禁用</wd-tag>
@@ -61,33 +63,28 @@
       </template>
     </wd-card>
 
-    <wd-loadmore :state="state" @reload="loadmore" />
+    <wd-loadmore v-if="total > 0" :state="state" @reload="loadmore" />
     <wd-message-box />
+
     <wd-popup v-model="dialog.visible" position="bottom">
       <wd-form ref="userFormRef" :model="formData" :rules="rules">
         <wd-cell-group border>
           <wd-input v-model="formData.username" label="用户名" :readonly="!formData.id" required />
-
           <wd-input v-model="formData.nickname" label="昵称" required />
-
           <wd-select-picker
             v-model="formData.roleIds"
             label="角色"
             :columns="roleOptions"
             required
           />
-
           <vut-picker
             v-model="formData.deptId"
             v-model:data="deptOptions"
             label="部门"
             :required="true"
           />
-
           <wd-input v-model="formData.mobile" label="手机号" prop="mobile" />
-
           <wd-input v-model="formData.email" label="邮箱" prop="email" />
-
           <wd-cell title="状态">
             <wd-switch v-model="formData.status" :active-value="1" :inactive-value="0" required />
           </wd-cell>
@@ -103,44 +100,68 @@
 <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 } from "wot-design-uni";
+import { dayjs } 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 VutPicker from "@/components/VutPicker.vue";
 
-import { useMessage } from "wot-design-uni";
-
 const message = useMessage();
-
+// 加载状态 loading, finished:, error
-const state = ref<LoadMoreState>("loading"); // 加载状态 loading, finished:, error
+const state = ref<LoadMoreState>("loading");
 const dataList = ref<UserPageVO[]>([]);
 
+const sortValue = ref(1);
+const sortOptions = ref<Record<string, any>[]>([
+  { label: "最近创建", value: 1 },
+  { label: "最近更新", value: 2 },
+]);
+
 const queryParams: UserPageQuery = {
   pageNum: 1,
   pageSize: 10,
 };
 
-const daterange = ref<any[]>(["", Date.now()]);
+const createTimeRange = ref<any[]>([, Date.now()]);
+
+const dropMenuRef = ref();
 
 const total = ref(0);
-
 const dialog = reactive({
   visible: false,
 });
-
 const formData = reactive<UserForm>({
   roleIds: [],
 });
 
+const userFormRef = ref();
+const roleOptions = ref<Record<string, any>[]>([]);
+const deptOptions = ref<OptionType[]>([]);
+
 const rules: FormRules = {
-  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+  username: [{ required: true, message: "请输入用户名" }],
-  nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
+  nickname: [{ required: true, message: "请输入昵称" }],
-  roleIds: [{ required: true, message: "请选择角色", trigger: "blur" }],
+  roleIds: [{ required: true, message: "请选择角色" }],
-  deptId: [{ required: true, message: "请选择部门", trigger: "blur" }],
+  deptId: [{ required: true, message: "请选择部门" }],
-  status: [{ required: true, message: "请选择状态", trigger: "blur" }],
+  status: [{ required: true, message: "请选择状态" }],
   mobile: [
-    { required: false, pattern: /^1[3456789]\d{9}$/, message: "手机号格式不正确", trigger: "blur" },
+    {
+      required: false,
+      message: "手机号格式不正确",
+      validator: (value) => {
+        if (!value) {
+          return Promise.resolve();
+        }
+        if (!/^1[3456789]\d{9}$/.test(value)) {
+          return Promise.reject("手机号格式不正确");
+        } else {
+          return Promise.resolve();
+        }
+      },
+    },
   ],
   email: [
     {
@@ -160,24 +181,10 @@ const rules: FormRules = {
   ],
 };
 
-const userFormRef = ref();
-const roleOptions = ref<Record<string, any>[]>([]);
-const deptOptions = ref<OptionType[]>([]);
-
-const sortValue = ref(1);
-
-const sortOptions = ref<Record<string, any>[]>([
-  { label: "最近创建", value: 1 },
-  { label: "最近更新", value: 2 },
-]);
-
 /**
  * 排序改变
  */
 const handleSortChange = ({ value }: { value: number }) => {
-  console.log("排序", value);
-  queryParams.pageNum = 1;
-
   if (value === 1) {
     queryParams.field = "create_time";
     queryParams.direction = "DESC";
@@ -185,17 +192,34 @@ const handleSortChange = ({ value }: { value: number }) => {
     queryParams.field = "update_time";
     queryParams.direction = "DESC";
   }
+  handleQuery();
+};
 
+/**
+ * 查询
+ */
+const handleQuery = () => {
+  dropMenuRef.value?.close();
+  queryParams.pageNum = 1;
+
+  queryParams.createTime = [
+    createTimeRange.value[0] ? dayjs(createTimeRange.value[0]).format("YYYY-MM-DD") : "",
+    createTimeRange.value[1] ? dayjs(createTimeRange.value[1]).format("YYYY-MM-DD") : "",
+  ];
+  console.log(queryParams.createTime);
   loadmore();
 };
 
-onReachBottom(() => {
+/**
-  if (queryParams.pageNum * queryParams.pageSize < total.value) {
+ * 重置查询
-    loadmore();
+ */
-  } else if (queryParams.pageNum * queryParams.pageSize >= total.value) {
+const hendleResetQuery = () => {
-    state.value = "finished";
+  dropMenuRef.value?.close();
-  }
+  queryParams.pageNum = 1;
-});
+  queryParams.keywords = "";
+  createTimeRange.value = ["", Date.now()];
+  loadmore();
+};
 
 /**
  * 加载更多
@@ -213,31 +237,13 @@ function loadmore() {
     });
 }
 
-/**
- * 加载角色下拉项
- */
-async function loadRoleOptions() {
-  RoleAPI.getOptions().then((data) => {
-    roleOptions.value = data;
-  });
-}
-
-/**
- * 加载部门下拉项
- */
-async function loadDeptOptions() {
-  DeptAPI.getOptions().then((data) => {
-    deptOptions.value = data;
-  });
-}
-
 /**
  * 打开弹窗
  */
 async function handleOpenDialog(id?: number) {
   dialog.visible = true;
-  await loadRoleOptions();
+  roleOptions.value = await RoleAPI.getOptions();
-  await loadDeptOptions();
+  deptOptions.value = await DeptAPI.getOptions();
   if (id) {
     UserAPI.getFormData(id).then((data) => {
       Object.assign(formData, { ...data });
@@ -249,7 +255,6 @@ async function handleOpenDialog(id?: number) {
  * 提交保存
  */
 function handleSubmit() {
-  console.log("提交", formData);
   userFormRef.value.validate().then(({ valid }: { valid: boolean }) => {
     if (valid) {
       const userId = formData.id;
@@ -257,15 +262,13 @@ function handleSubmit() {
         UserAPI.update(userId, formData).then(() => {
           message.show("修改成功");
           dialog.visible = false;
-          queryParams.pageNum = 1;
+          handleQuery();
-          loadmore();
         });
       } else {
         UserAPI.add(formData).then(() => {
           message.show("添加成功");
           dialog.visible = false;
-          queryParams.pageNum = 1;
+          handleQuery();
-          loadmore();
         });
       }
     }
@@ -286,44 +289,36 @@ function handleDelete(id: number) {
     .then(() => {
       UserAPI.deleteByIds(id + "").then(() => {
         message.show("删除成功");
-        queryParams.pageNum = 1;
+        handleQuery();
-        loadmore();
       });
-    })
-    .catch(() => {
-      console.log("点击了取消按钮");
     });
 }
 
+// 监听下拉菜单打开事件
+onReachBottom(() => {
+  if (queryParams.pageNum * queryParams.pageSize < total.value) {
+    loadmore();
+  } else if (queryParams.pageNum * queryParams.pageSize >= total.value) {
+    state.value = "finished";
+  }
+});
+
+// 页面加载时执行查询
 onLoad(() => {
-  loadmore();
+  handleQuery();
 });
 </script>
 
 <style lang="scss" scoped>
-/* stylelint-disable selector-type-no-unknown */
-page {
-  background: #f8f8f8;
-}
-/* stylelint-enable selector-type-no-unknown */
-
-.custom-class {
-  display: flex;
-  flex-direction: col;
-  align-items: center;
-  width: 230rpx;
-  height: 80rpx;
-}
-
 .user-card {
   margin-top: 20rpx;
   :deep(.wd-cell__wrapper) {
-    padding: 8rpx 0;
+    padding: 4rpx 0;
   }
 
   :deep(.wd-cell) {
     padding-right: 10rpx;
-    background: #f5f5f5;
+    background: #f8f8f8;
   }
 }
 </style>