From 11764b9a729c4ab46e729b206d2314242605a0d6 Mon Sep 17 00:00:00 2001
From: ray <1490493387@qq.com>
Date: Mon, 18 Nov 2024 20:26:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=EF=BC=8C?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=AD=9B=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/user.ts        |   3 +
 src/pages/work/user/index.vue | 294 ++++++----------------------------
 2 files changed, 51 insertions(+), 246 deletions(-)

diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index 1c3ebeb..58c3b2a 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -174,6 +174,9 @@ export interface UserPageQuery extends PageQuery {
 
   /** 开始时间 */
   createTime?: [string, string];
+
+  /** 排序类型(1:最近创建；2:最近更新) */
+  sortType?: number;
 }
 
 /** 用户分页对象 */
diff --git a/src/pages/work/user/index.vue b/src/pages/work/user/index.vue
index 3515c60..5a7059d 100644
--- a/src/pages/work/user/index.vue
+++ b/src/pages/work/user/index.vue
@@ -1,6 +1,20 @@
 <template>
   <view class="user">
-    <wd-search v-model="queryParams.keywords" :maxlength="10" class="mb-2" />
+    <!-- 筛选 -->
+    <wd-drop-menu>
+      <wd-drop-menu-item v-model="sortValue" :options="sortOptions" @change="handleSortChange" />
+      <wd-drop-menu-item ref="dropMenuRef" title="筛选">
+        <view>
+          <wd-input
+            v-model="queryParams.keywords"
+            label="关键字"
+            type="text"
+            placeholder="请输入关键字"
+          />
+          <wd-datetime-picker v-model="daterange" label="创建时间" />
+        </view>
+      </wd-drop-menu-item>
+    </wd-drop-menu>
 
     <wd-card v-for="item in dataList" class="user-card">
       <template #title>
@@ -63,13 +77,11 @@
             required
           />
 
-          <wd-picker
-            v-model="selectedDeptIds"
+          <vut-picker
+            v-model="formData.deptId"
+            v-model:data="deptOptions"
             label="部门"
-            :columns="deptPickerColumns"
-            :display-format="displayFormat"
-            :column-change="handleDeptChange"
-            required
+            :required="true"
           />
 
           <wd-input v-model="formData.mobile" label="手机号" prop="mobile" />
@@ -95,6 +107,7 @@ import { FormRules } from "wot-design-uni/components/wd-form/types";
 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";
 
@@ -106,9 +119,12 @@ const dataList = ref<UserPageVO[]>([]);
 const queryParams: UserPageQuery = {
   pageNum: 1,
   pageSize: 10,
+  sortType: 1,
 };
 
-const total = ref(0); // 总数
+const daterange = ref<any[]>(["", Date.now()]);
+
+const total = ref(0);
 
 const dialog = reactive({
   visible: false,
@@ -146,12 +162,24 @@ const rules: FormRules = {
 };
 
 const userFormRef = ref();
-
-const selectedDeptIds = ref<number[]>([]);
-
 const roleOptions = ref<Record<string, any>[]>([]);
+const deptOptions = ref<OptionType[]>([]);
 
-const deptPickerColumns = ref<Array<Array<{ label: string; value: string | number }>>>([]);
+const sortValue = ref(1);
+
+const sortOptions = ref<Record<string, any>[]>([
+  { label: "最近创建", value: 1 },
+  { label: "最近更新", value: 2 },
+]);
+
+/**
+ * 排序改变
+ */
+const handleSortChange = (value: number) => {
+  console.log("排序", value);
+  queryParams.pageNum = 1;
+  loadmore();
+};
 
 onReachBottom(() => {
   if (queryParams.pageNum * queryParams.pageSize < total.value) {
@@ -161,6 +189,9 @@ onReachBottom(() => {
   }
 });
 
+/**
+ * 加载更多
+ */
 function loadmore() {
   state.value = "loading";
   UserAPI.getPage(queryParams)
@@ -183,15 +214,12 @@ async function loadRoleOptions() {
   });
 }
 
-let deptList: Record<string, any>[] = [];
 /**
  * 加载部门下拉项
  */
 async function loadDeptOptions() {
   DeptAPI.getOptions().then((data) => {
-    // 将data转为json格式
-    console.log("原始数据", JSON.stringify(data));
-    deptList = data;
+    deptOptions.value = data;
   });
 }
 
@@ -205,240 +233,13 @@ async function handleOpenDialog(id?: number) {
   if (id) {
     UserAPI.getFormData(id).then((data) => {
       Object.assign(formData, { ...data });
-      const deptId = data.deptId;
-      if (deptId) {
-        selectedDeptIds.value = findDept(deptId, deptList);
-        deptPickerColumns.value = transformTreeToColumns(deptList, selectedDeptIds.value);
-      }
     });
-  } else {
-    // 如果没有id，则初始化为空，选择默认的第一项
-    deptPickerColumns.value = transformTreeToColumns(deptList, []);
   }
 }
 
 /**
- * 将树形数据转换为 Picker 所需的 columns 格式
- *
- * 示例 treeData 数据格式：[{"value":"1","label":"有来技术","children":[{"value":"2","label":"研发部门"},{"value":"3","label":"测试部门"}]},{"value":"4","label":"无回科技","children":[{"value":"5","label":"市场部"}]}
- *
- * 示例 columns 数据格式：
- *   - 一级选择 selectedDeptIds 为 [1, 3] 的有来技术1，那么二级就只有有来技术下的部门：研发部和测试部，没有市场部
- *   - [[{"label":"有来技术","value":"1"},{"label":"无回科技","value":"4"}], [{"label":"研发部门","value":"2"},{"label":"测试部门","value":"3"}]]
- *
- * @param treeData 原始树形数据
- * @param selectedDeptIds 选中的部门ID数组
- * @returns 转换后的 columns 数据
+ * 提交保存
  */
-/**
- * 将树形数据转换为 Picker 所需的 columns 格式
- *
- * @param treeData 原始树形数据
- * @param selectedDeptIds 已选择的部门ID数组
- * @returns 转换后的 columns 数据
- */
-/**
- * 将树形数据转换为 Picker 所需的 columns 格式
- *
- * @param treeData 原始树形数据
- * @param selectedDeptIds 已选择的部门ID数组
- * @returns 转换后的 columns 数据
- */
-const transformTreeToColumns = (
-  treeData: Record<string, any>[],
-  selectedDeptIds: (string | number)[]
-): Array<Array<{ label: string; value: string | number }>> => {
-  const columns: Array<Array<{ label: string; value: string | number }>> = [];
-  let currentNodes = treeData; // 当前层级的节点
-
-  for (let depth = 0; depth <= selectedDeptIds.length; depth++) {
-    const currentColumn: Array<{ label: string; value: string | number }> = [];
-    currentNodes.forEach((node) => {
-      currentColumn.push({ label: node.label, value: node.value });
-    });
-
-    // 如果当前列数据为空，停止后续列生成
-    if (currentColumn.length === 0) break;
-
-    // 确保选中值有效，如果无效则选中该列的第一个值
-    const selectedId = selectedDeptIds[depth];
-    if (!currentColumn.some((item) => item.value === selectedId)) {
-      selectedDeptIds[depth] = currentColumn[0]?.value; // 选中第一个值
-    }
-
-    // 添加当前列到 columns
-    columns.push(currentColumn);
-
-    // 获取下一层数据
-    const selectedNode = currentNodes.find((node) => node.value === selectedDeptIds[depth]);
-    currentNodes = selectedNode?.children || [];
-  }
-
-  return columns;
-};
-
-const displayFormat = (items: any) => {
-  // 检查 items 是否有内容，直接返回最后一个子节点的 label
-  return items.length > 0 ? items[items.length - 1].label : "";
-};
-
-/**
- *
- * 根据deptId查找部门树路径
- *
- * [{"value":"1","label":"有来技术","children":[{"value":"2","label":"研发部门"},{"value":"3","label":"测试部门"}]},{"value":"4","label":"无回科技","children":[{"value":"5","label":"市场部"}]}
- * 例如：查找部门id为3 的路径 ,返回结果为 [1,3]
- */
-const findDept = (deptId: number, deptList: Record<string, any>[]): number[] => {
-  const path: number[] = []; // 用于存储部门路径
-
-  // 递归查找部门路径
-  const find = (deptId: number, deptList: Record<string, any>[]): boolean => {
-    for (let i = 0; i < deptList.length; i++) {
-      const dept = deptList[i];
-
-      // 如果找到了目标部门
-      if (dept.value == deptId) {
-        path.push(deptId); // 将目标部门ID添加到路径数组中
-        return true; // 返回找到的标志
-      }
-
-      // 如果当前部门有子部门，则递归查找
-      if (dept.children && dept.children.length > 0) {
-        path.push(dept.value); // 添加当前部门到路径数组
-        if (find(deptId, dept.children)) {
-          return true; // 找到后返回
-        }
-        path.pop(); // 如果没有找到目标部门，回退当前部门
-      }
-    }
-    return false; // 如果没找到目标部门，返回false
-  };
-
-  // 执行查找
-  find(deptId, deptList);
-  return path; // 返回部门路径
-};
-
-/**
- * 处理部门选择
- * @param pickerView
- * @param value
- * @param columnIndex
- * @param resolve
- */
-function handleDeptChange(
-  pickerView: PickerViewInstance,
-  value: Record<string, any> | Record<string, any>[],
-  columnIndex: number,
-  resolve: () => void
-) {
-  formData.deptId =
-    selectedDeptIds.value.length > 0
-      ? selectedDeptIds.value[selectedDeptIds.value.length - 1]
-      : undefined;
-
-  // 判断valuse是否数组
-
-  let item;
-  if (Array.isArray(value)) {
-    item = value[columnIndex];
-  } else {
-    item = value.value;
-  }
-
-  // 取消子节点选中
-  clearChildSelections(selectedDeptIds.value);
-
-  // 根据选中的部门（item.value）动态设置后续列的数据
-  updatePickerColumns(pickerView, item.value, columnIndex);
-
-  resolve();
-}
-
-/**
- * 清除所有子节点选中的部门
- * @param selectedDeptIds - 当前所有已选中的部门ID
- */
-function clearChildSelections(selectedDeptIds: number[]) {
-  // 假设这里的部门数据是deptList，根据需要清除子节点选中的值
-  selectedDeptIds.forEach((deptId) => {
-    // 递归遍历部门列表，找到所有子节点并移除选中
-    removeChildSelections(deptId, deptList);
-  });
-}
-
-/**
- * 递归查找并移除选中状态的子节点
- * @param deptId - 当前选中的部门ID
- * @param deptList - 部门数据列表
- */
-function removeChildSelections(deptId: number, deptList: Record<string, any>[]) {
-  deptList.forEach((department) => {
-    if (department.value == deptId && department.children) {
-      // 如果当前部门有子节点，取消所有子节点的选中状态
-      department.children.forEach((child: Record<string, any>) => {
-        const index = selectedDeptIds.value.indexOf(child.value);
-        if (index !== -1) {
-          selectedDeptIds.value.splice(index, 1); // 从选中数组中移除
-        }
-      });
-    }
-    if (department.children) {
-      // 递归处理子部门
-      removeChildSelections(deptId, department.children);
-    }
-  });
-}
-
-/**
- * 动态更新所有后续列的数据
- * @param pickerView - PickerView 实例
- * @param parentId - 当前列选中的部门ID
- * @param columnIndex - 当前列索引
- */
-function updatePickerColumns(
-  pickerView: PickerViewInstance,
-  parentId: string,
-  columnIndex: number
-) {
-  console.log("updatePickerColumns", parentId, columnIndex);
-  const nextColumnIndex = columnIndex + 1; // 下一列的索引
-  const children = findDeptChildren(parentId, deptList); // 获取当前部门的子部门
-
-  if (children.length > 0 && nextColumnIndex < 3) {
-    // 更新下一列的部门数据
-    pickerView.setColumnData(nextColumnIndex, children);
-
-    // 递归更新下一列
-    updatePickerColumns(pickerView, children[0].value, nextColumnIndex);
-  }
-}
-
-/**
- * 根据部门ID查找其子部门
- * @param parentId - 父部门的ID
- * @param deptList - 部门数据列表
- * @returns - 子部门列表
- */
-function findDeptChildren(
-  parentId: string,
-  deptList: Record<string, any>[]
-): Record<string, any>[] {
-  let children: Record<string, any>[] = [];
-
-  // 遍历部门数据查找子部门
-  deptList.forEach((department) => {
-    if (department.value === parentId && department.children) {
-      children = department.children;
-    } else if (department.children) {
-      children = children.concat(findDeptChildren(parentId, department.children)); // 递归查找
-    }
-  });
-
-  return children;
-}
-
 function handleSubmit() {
   console.log("提交", formData);
   userFormRef.value.validate().then(({ valid }: { valid: boolean }) => {
@@ -464,7 +265,8 @@ function handleSubmit() {
 }
 
 /**
- *  删除
+ * 删除
+ *
  * @param id  用户id
  */
 function handleDelete(id: number) {
@@ -474,7 +276,6 @@ function handleDelete(id: number) {
       title: "提示",
     })
     .then(() => {
-      console.log("点击了确定按钮");
       UserAPI.deleteByIds(id + "").then(() => {
         message.show("删除成功");
         queryParams.pageNum = 1;
@@ -507,6 +308,7 @@ page {
 }
 
 .user-card {
+  margin-top: 20rpx;
   :deep(.wd-cell__wrapper) {
     padding: 8rpx 0;
   }