src/pages/listnew/index.jsx

@@ -11,6 +11,7 @@ import {
   SelectAllOn16Regular,
   CommentAdd16Regular,
   MoreHorizontal16Filled,
+  NumberCircle116Regular
 } from "@fluentui/react-icons";
 import {
   DataGridBody,
@@ -31,299 +32,317 @@ import {
   MenuDivider,
 } from "@fluentui/react-components";
 
-//数据类型常量
-const DATA_TYPE = {
-  文本: "文本",
-  数字: "数字",
-  日期: "日期",
-  选项: "选项"
-}
 
-const items = [
-  {
-    序号: { label: 2 },
-    姓名: { label: "陈丹", icon: <DocumentRegular /> },
-    性别: { label: "女", status: "available" },
-    年龄: { label: "18岁", timestamp: 1 },
-    最后在线时间: { label: "2024/11/6 13:50" },
-  },
-  {
-    序号: { label: 1 },
-    姓名: { label: "蔡青松", icon: <FolderRegular /> },
-    性别: { label: "男", status: "busy" },
-    年龄: { label: "30岁", timestamp: 2 },
-    最后在线时间: { label: "2024/11/6 13:50" },
-  },
-  {
-    序号: { label: 3 },
-    姓名: { label: "杨东明", icon: <VideoRegular /> },
-    性别: { label: "男", status: "away" },
-    年龄: { label: "25岁", timestamp: 2 },
-    最后在线时间: { label: "2024/11/6 13:50" },
-  },
-  {
-    序号: { label: 4 },
-    姓名: { label: "吴瑞强", icon: <DocumentPdfRegular /> },
-    性别: { label: "男", status: "offline" },
-    年龄: { label: "25岁", timestamp: 3 },
-    最后在线时间: { label: "2024/11/6 13:50" },
-  },
-];
-
-const columns = [
-  createTableColumn({
-    columnId: "序号",
-    compare: (a, b) => {
-      return a.序号.label - b.序号.label;
-    },
-    renderHeaderCell: () => {
-      return (
-        <TableCellLayout media={<TextField16Regular />}>
-          序号
-          <HeaderMenuList dataType={DATA_TYPE.数字} title="序号" />
-        </TableCellLayout>
-      );
-    },
-    renderCell: (item) => {
-      return item.序号.label;
-    },
-  }),
-  createTableColumn({
-    columnId: "姓名",
-    compare: (a, b) => {
-      return a.姓名.label.localeCompare(b.姓名.label);
-    },
-    renderHeaderCell: () => {
-      return (
-        <TableCellLayout media={<TextField16Regular />}>
-          姓名
-          <HeaderMenuList dataType={DATA_TYPE.文本} title="姓名" />
-        </TableCellLayout>
-      );
-    },
-    renderCell: (item) => {
-      return <ChangeBtnShowType cellData={item.姓名.label} />
-    },
-  }),
-  createTableColumn({
-    columnId: "性别",
-    compare: (a, b) => {
-      return a.性别.label.localeCompare(b.性别.label);
-    },
-    renderHeaderCell: () => {
-      return (
-        <TableCellLayout media={<SelectAllOn16Regular />}>
-          性别
-          <HeaderMenuList dataType={DATA_TYPE.选项} title="性别" />
-        </TableCellLayout>
-      );
-    },
-    renderCell: (item) => {
-      return item.性别.label;
-    },
-  }),
-  createTableColumn({
-    columnId: "年龄",
-    compare: (a, b) => {
-      return a.年龄.timestamp - b.年龄.timestamp;
-    },
-    renderHeaderCell: () => {
-      return (
-        <TableCellLayout media={<TextField16Regular />}>
-          年龄
-          <HeaderMenuList dataType={DATA_TYPE.文本} title="年龄" />
-        </TableCellLayout>
-      );
-    },
-
-    renderCell: (item) => {
-      return item.年龄.label;
-    },
-  }),
-  createTableColumn({
-    columnId: "最后在线时间",
-    compare: (a, b) => {
-      return a.最后在线时间.label.localeCompare(b.最后在线时间.label);
-    },
-    renderHeaderCell: () => {
-      return (
-        <TableCellLayout media={<Calendar16Regular />}>
-          最后在线时间
-          <HeaderMenuList dataType={DATA_TYPE.日期} title="最后在线时间" />
-        </TableCellLayout>
-      );
-    },
-    renderCell: (item) => {
-      return (
-        <TableCellLayout media={item.最后在线时间.icon}>
-          {item.最后在线时间.label}
-        </TableCellLayout>
-      );
-    },
-  }),
-];
-
-/**
- * 列头下拉菜单
- * @param {*} dataType 表现类型
- */
-const HeaderMenuList = (props) => {
-  return (
-    <Menu>
-      <MenuTrigger disableButtonEnhancement>
-        <Button
-          appearance="subtle"
-          icon={<ChevronDown16Filled />}
-        ></Button>
-      </MenuTrigger>
-
-      <MenuPopover>
-        <MenuList>
-          <MenuItem onClick={() => {
-            alert("adfa");
-          }}>A到Z </MenuItem>
-          <MenuItem>Z到A</MenuItem>
-          <MenuDivider />
-          <MenuItem>筛选方式</MenuItem>
-          <MenuDivider />
-          <MenuItem>按“{props.title}”分组</MenuItem>
-          <MenuDivider />
-          <MenuItem><HeaderMenuColumnSet dataType={props.dataType} /></MenuItem>
-          <MenuDivider />
-          <MenuItem><HeaderMenuAmount dataType={props.dataType} /></MenuItem>
-        </MenuList>
-      </MenuPopover>
-    </Menu>
-  );
-}
+const List = () => {
+  const defaultSelectedItems = React.useMemo(() => new Set([1]), []);
 
-/**
- * 列设置的二级菜单
- * @returns 
- */
-const HeaderMenuColumnSet = (props) => {
-  return (
-    <Menu>
-      <MenuTrigger disableButtonEnhancement>
-        <MenuItem>列设置</MenuItem>
-      </MenuTrigger>
+  //数据类型常量
+  const DATA_TYPE = {
+    文本: "文本",
+    数字: "数字",
+    日期: "日期",
+    选项: "选项"
+  }
 
-      <MenuPopover>
-        <MenuList>
-          <MenuItem>编辑</MenuItem>
-          <MenuItem>隐藏此列</MenuItem>
-          <MenuItem>设置此列的格式</MenuItem>
-          <MenuItem>向左移动</MenuItem>
-          <MenuItem>向右移动</MenuItem>
-          <MenuItem>显示/隐藏列</MenuItem>
-          <MenuItem>加宽列</MenuItem>
-          <MenuItem>窄列</MenuItem>
-          <MenuItem>固定到筛选器窗口</MenuItem>
-          <MenuItem>添加列</MenuItem>
-        </MenuList>
-      </MenuPopover>
-    </Menu>
-  );
-}
+  /**
+   * 列头下拉菜单
+   * @param {*} dataType 表现类型
+   */
+  const HeaderMenuList = (props) => {
+    return (
+      <Menu>
+        <MenuTrigger disableButtonEnhancement>
+          <Button
+            appearance="subtle"
+            icon={<ChevronDown16Filled />}
+          ></Button>
+        </MenuTrigger>
 
-/**
- * 列头“合计”二级菜单
- */
-const HeaderMenuAmount = (props) => {
-  return (
-    <Menu>
-      <MenuTrigger disableButtonEnhancement>
-        <MenuItem>合计</MenuItem>
-      </MenuTrigger>
+        <MenuPopover>
+          <MenuList>
+            {props.dataType == DATA_TYPE.数字 && <MenuItem onClick={() => {
+              ascendingData(props.columnId);
+            }}>从小到大 </MenuItem>}
 
-      <MenuPopover>
-        <MenuList>
-          <MenuItem>无</MenuItem>
-          <MenuItem>计数</MenuItem>
-          {props.dataType == DATA_TYPE.数字 && <MenuItem>平均值</MenuItem>}
-          {props.dataType == DATA_TYPE.数字 && <MenuItem>最大值</MenuItem>}
-          {props.dataType == DATA_TYPE.数字 && <MenuItem>最小值</MenuItem>}
-          {props.dataType == DATA_TYPE.数字 && <MenuItem>求和</MenuItem>}
-          {props.dataType == DATA_TYPE.数字 && <MenuItem>标准偏差</MenuItem>}
-          {props.dataType == DATA_TYPE.数字 && <MenuItem>方差</MenuItem>}
-        </MenuList>
-      </MenuPopover>
-    </Menu>
-  );
-}
+            {props.dataType == DATA_TYPE.数字 && <MenuItem onClick={() => {
+              descendingData(props.columnId);
+            }}>从大到小</MenuItem>}
 
+            {(props.dataType == DATA_TYPE.文本 || props.dataType == DATA_TYPE.选项) && <MenuItem onClick={() => {
+              ascendingData(props.columnId);
+            }}>A到Z </MenuItem>}
 
-/**
- * 鼠标移动到姓名列上时，显示两个按钮
- * @param item 包含姓名标签的对象
- * @returns 返回 JSX 元素
- */
-const ChangeBtnShowType = (props) => {
-  const [showButton, setShowButton] = useState(false);
-  const handleMouseEnter = () => {
-    setShowButton(true);
-  };
+            {(props.dataType == DATA_TYPE.文本 || props.dataType == DATA_TYPE.选项) && <MenuItem onClick={() => {
+              descendingData(props.columnId);
+            }}>Z到A </MenuItem>}
 
-  const handleMouseLeave = () => {
-    setShowButton(false);
-  };
+            {(props.dataType == DATA_TYPE.日期) && <MenuItem onClick={() => {
+              ascendingData(props.columnId);
+            }}>从旧到新 </MenuItem>}
 
-  return (
-    <div
-      style={{
-        width: "100%",
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-      }}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      {props.cellData}
-      {showButton && (
-        <div>
-          <Tooltip content="更多操作" positioning="below">
-            <Button
-              appearance="subtle"
-              icon={<MoreHorizontal16Filled />}
-              onClick={() => {
-                alert("更多操作");
-              }}
-            ></Button>
-          </Tooltip>
-          <Tooltip content="添加注释" positioning="below">
-            <Button appearance="subtle" icon={<CommentAdd16Regular />}></Button>
-          </Tooltip>
-        </div>
-      )}
-    </div>
-  );
-};
+            {(props.dataType == DATA_TYPE.日期) && <MenuItem onClick={() => {
+              descendingData(props.columnId);
+            }}>从新到旧 </MenuItem>}
+            <MenuDivider />
+            <MenuItem>筛选方式</MenuItem>
+            <MenuDivider />
+            <MenuItem>按“{props.columnId}”分组</MenuItem>
+            <MenuDivider />
+            <MenuItem><HeaderMenuColumnSet dataType={props.dataType} /></MenuItem>
+            <MenuDivider />
+            <MenuItem><HeaderMenuAmount dataType={props.dataType} /></MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    );
+  }
 
-const List = () => {
-  const defaultSelectedItems = React.useMemo(() => new Set([1]), []);
   const [dataSortType, setDataSortType] = useState(({
     sortColumn: "序号",
     sortDirection: "ascending",
   }));
-  const ascendingData = (props) => {
+  const ascendingData = (columnId) => {
     setDataSortType(({
-      sortColumn: "序号",
+      sortColumn: columnId,
       sortDirection: "ascending",
     }));
   }
-  const descendingData = (props) => {
+  const descendingData = (columnId) => {
     setDataSortType(({
-      sortColumn: "序号",
+      sortColumn: columnId,
       sortDirection: "descending",
     }));
   }
 
+  /**
+   * 列设置的二级菜单
+   * @returns 
+   */
+  const HeaderMenuColumnSet = (props) => {
+    return (
+      <Menu>
+        <MenuTrigger disableButtonEnhancement>
+          <MenuItem>列设置</MenuItem>
+        </MenuTrigger>
+
+        <MenuPopover>
+          <MenuList>
+            <MenuItem>编辑</MenuItem>
+            <MenuItem>隐藏此列</MenuItem>
+            <MenuItem>设置此列的格式</MenuItem>
+            <MenuItem>向左移动</MenuItem>
+            <MenuItem>向右移动</MenuItem>
+            <MenuItem>显示/隐藏列</MenuItem>
+            <MenuItem>加宽列</MenuItem>
+            <MenuItem>窄列</MenuItem>
+            <MenuItem>固定到筛选器窗口</MenuItem>
+            <MenuItem>添加列</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    );
+  }
+
+  /**
+   * 列头“合计”二级菜单
+   */
+  const HeaderMenuAmount = (props) => {
+    return (
+      <Menu>
+        <MenuTrigger disableButtonEnhancement>
+          <MenuItem>合计</MenuItem>
+        </MenuTrigger>
+
+        <MenuPopover>
+          <MenuList>
+            <MenuItem>无</MenuItem>
+            <MenuItem>计数</MenuItem>
+            {props.dataType == DATA_TYPE.数字 && <MenuItem>平均值</MenuItem>}
+            {props.dataType == DATA_TYPE.数字 && <MenuItem>最大值</MenuItem>}
+            {props.dataType == DATA_TYPE.数字 && <MenuItem>最小值</MenuItem>}
+            {props.dataType == DATA_TYPE.数字 && <MenuItem>求和</MenuItem>}
+            {props.dataType == DATA_TYPE.数字 && <MenuItem>标准偏差</MenuItem>}
+            {props.dataType == DATA_TYPE.数字 && <MenuItem>方差</MenuItem>}
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    );
+  }
+
+
+  /**
+   * 鼠标移动到姓名列上时，显示两个按钮
+   * @param item 包含姓名标签的对象
+   * @returns 返回 JSX 元素
+   */
+  const ChangeBtnShowType = (props) => {
+    const [showButton, setShowButton] = useState(false);
+    const handleMouseEnter = () => {
+      setShowButton(true);
+    };
+
+    const handleMouseLeave = () => {
+      setShowButton(false);
+    };
+
+    return (
+      <div
+        style={{
+          width: "100%",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        {props.cellData}
+        {showButton && (
+          <div>
+            <Tooltip content="更多操作" positioning="below">
+              <Button
+                appearance="subtle"
+                icon={<MoreHorizontal16Filled />}
+                onClick={() => {
+                  alert("更多操作");
+                }}
+              ></Button>
+            </Tooltip>
+            <Tooltip content="添加注释" positioning="below">
+              <Button appearance="subtle" icon={<CommentAdd16Regular />}></Button>
+            </Tooltip>
+          </div>
+        )}
+      </div>
+    );
+  };
+
   return (
     <DataGrid
-      items={items}
-      columns={columns}
-      selectionMode="single"
+      items={[
+        {
+          序号: { label: 1 },
+          姓名: { label: "陈丹", icon: <DocumentRegular /> },
+          性别: { label: "女", status: "available" },
+          年龄: { label: "18岁", timestamp: 1 },
+          最后在线时间: { label: "2024/11/6 13:50" },
+        },
+        {
+          序号: { label: 2 },
+          姓名: { label: "蔡青松", icon: <FolderRegular /> },
+          性别: { label: "男", status: "busy" },
+          年龄: { label: "30岁", timestamp: 2 },
+          最后在线时间: { label: "2024/11/6 13:51" },
+        },
+        {
+          序号: { label: 3 },
+          姓名: { label: "杨东明", icon: <VideoRegular /> },
+          性别: { label: "男", status: "away" },
+          年龄: { label: "25岁", timestamp: 2 },
+          最后在线时间: { label: "2024/11/6 13:52" },
+        },
+        {
+          序号: { label: 4 },
+          姓名: { label: "吴瑞强", icon: <DocumentPdfRegular /> },
+          性别: { label: "男", status: "offline" },
+          年龄: { label: "25岁", timestamp: 3 },
+          最后在线时间: { label: "2024/11/6 13:53" },
+        },
+      ]}
+      columns={[
+        createTableColumn({
+          columnId: "序号",
+          fixed: true,
+          compare: (a, b) => {
+            return a.序号.label - b.序号.label;
+          },
+          renderHeaderCell: () => {
+            return (
+              <TableCellLayout media={<NumberCircle116Regular />}>
+                序号
+                <HeaderMenuList dataType={DATA_TYPE.数字} title="序号" columnId="序号" />
+              </TableCellLayout>
+            );
+          },
+          renderCell: (item) => {
+            return item.序号.label;
+          },
+        }),
+        createTableColumn({
+          columnId: "姓名",
+          compare: (a, b) => {
+            return a.姓名.label.localeCompare(b.姓名.label);
+          },
+          renderHeaderCell: () => {
+            return (
+              <TableCellLayout media={<TextField16Regular />}>
+                姓名
+                <HeaderMenuList dataType={DATA_TYPE.文本} title="姓名" columnId="姓名" />
+              </TableCellLayout>
+            );
+          },
+          renderCell: (item) => {
+            return <ChangeBtnShowType cellData={item.姓名.label} />
+          },
+        }),
+        createTableColumn({
+          columnId: "性别",
+          compare: (a, b) => {
+            return a.性别.label.localeCompare(b.性别.label);
+          },
+          renderHeaderCell: () => {
+            return (
+              <TableCellLayout media={<SelectAllOn16Regular />}>
+                性别
+                <HeaderMenuList dataType={DATA_TYPE.选项} title="性别" columnId="性别" />
+              </TableCellLayout>
+            );
+          },
+          renderCell: (item) => {
+            return item.性别.label;
+          },
+        }),
+        createTableColumn({
+          columnId: "年龄",
+          compare: (a, b) => {
+            return a.年龄.timestamp - b.年龄.timestamp;
+          },
+          renderHeaderCell: () => {
+            return (
+              <TableCellLayout media={<TextField16Regular />}>
+                年龄
+                <HeaderMenuList dataType={DATA_TYPE.文本} title="年龄" columnId="年龄" />
+              </TableCellLayout>
+            );
+          },
+
+          renderCell: (item) => {
+            return item.年龄.label;
+          },
+        }),
+        createTableColumn({
+          columnId: "最后在线时间",
+          compare: (a, b) => {
+            return new Date(a.最后在线时间.label) - new Date(b.最后在线时间.label);
+          },
+          renderHeaderCell: () => {
+            return (
+              <TableCellLayout media={<Calendar16Regular />}>
+                最后在线时间
+                <HeaderMenuList dataType={DATA_TYPE.日期} title="最后在线时间" columnId="最后在线时间" />
+              </TableCellLayout>
+            );
+          },
+          renderCell: (item) => {
+            return (
+              <TableCellLayout media={item.最后在线时间.icon}>
+                {item.最后在线时间.label}
+              </TableCellLayout>
+            );
+          },
+        }),
+      ]}
+      selectionMode="multiselect"
       sortable
       sortState={dataSortType}
       subtleSelection