Merge branch 'master' of http://787255.xyz:4003/ydm/zl365

.vscode/launch.json

@@ -4,6 +4,13 @@
     // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
+        {
+            "name": "Launch Edge",
+            "request": "launch",
+            "type": "msedge",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}"
+        },
         {
             "type": "chrome",
             "request": "launch",

src/pages/listnew/index.jsx

@@ -20,7 +20,6 @@ import {
   DataGridHeaderCell,
   DataGridCell,
   TableCellLayout,
-  TableColumnDefinition,
   createTableColumn,
   Button,
   Menu,
@@ -29,28 +28,41 @@ import {
   MenuItem,
   MenuPopover,
   Tooltip,
+  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 },
@@ -59,6 +71,23 @@ const items = [
 ];
 
 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) => {
@@ -68,28 +97,12 @@ const columns = [
       return (
         <TableCellLayout media={<TextField16Regular />}>
           姓名
-          <Menu>
-            <MenuTrigger disableButtonEnhancement>
-              <Button
-                appearance="subtle"
-                icon={<ChevronDown16Filled />}
-              ></Button>
-            </MenuTrigger>
-
-            <MenuPopover>
-              <MenuList>
-                <MenuItem>New </MenuItem>
-                <MenuItem>New Window</MenuItem>
-                <MenuItem disabled>Open File</MenuItem>
-                <MenuItem>Open Folder</MenuItem>
-              </MenuList>
-            </MenuPopover>
-          </Menu>
+          <HeaderMenuList dataType={DATA_TYPE.文本} title="姓名" />
         </TableCellLayout>
       );
     },
     renderCell: (item) => {
-      return ChangeBtnShowType(item);
+      return <ChangeBtnShowType cellData={item.姓名.label} />
     },
   }),
   createTableColumn({
@@ -101,23 +114,7 @@ const columns = [
       return (
         <TableCellLayout media={<SelectAllOn16Regular />}>
           性别
-          <Menu>
-            <MenuTrigger disableButtonEnhancement>
-              <Button
-                appearance="subtle"
-                icon={<ChevronDown16Filled />}
-              ></Button>
-            </MenuTrigger>
-
-            <MenuPopover>
-              <MenuList>
-                <MenuItem>New </MenuItem>
-                <MenuItem>New Window</MenuItem>
-                <MenuItem disabled>Open File</MenuItem>
-                <MenuItem>Open Folder</MenuItem>
-              </MenuList>
-            </MenuPopover>
-          </Menu>
+          <HeaderMenuList dataType={DATA_TYPE.选项} title="性别" />
         </TableCellLayout>
       );
     },
@@ -134,23 +131,7 @@ const columns = [
       return (
         <TableCellLayout media={<TextField16Regular />}>
           年龄
-          <Menu>
-            <MenuTrigger disableButtonEnhancement>
-              <Button
-                appearance="subtle"
-                icon={<ChevronDown16Filled />}
-              ></Button>
-            </MenuTrigger>
-
-            <MenuPopover>
-              <MenuList>
-                <MenuItem>New </MenuItem>
-                <MenuItem>New Window</MenuItem>
-                <MenuItem disabled>Open File</MenuItem>
-                <MenuItem>Open Folder</MenuItem>
-              </MenuList>
-            </MenuPopover>
-          </Menu>
+          <HeaderMenuList dataType={DATA_TYPE.文本} title="年龄" />
         </TableCellLayout>
       );
     },
@@ -168,23 +149,7 @@ const columns = [
       return (
         <TableCellLayout media={<Calendar16Regular />}>
           最后在线时间
-          <Menu>
-            <MenuTrigger disableButtonEnhancement>
-              <Button
-                appearance="subtle"
-                icon={<ChevronDown16Filled />}
-              ></Button>
-            </MenuTrigger>
-
-            <MenuPopover>
-              <MenuList>
-                <MenuItem>New </MenuItem>
-                <MenuItem>New Window</MenuItem>
-                <MenuItem disabled>Open File</MenuItem>
-                <MenuItem>Open Folder</MenuItem>
-              </MenuList>
-            </MenuPopover>
-          </Menu>
+          <HeaderMenuList dataType={DATA_TYPE.日期} title="最后在线时间" />
         </TableCellLayout>
       );
     },
@@ -198,12 +163,102 @@ const columns = [
   }),
 ];
 
+/**
+ * 列头下拉菜单
+ * @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>
+  );
+}
+
+/**
+ * 列设置的二级菜单
+ * @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 = (item) => {
+const ChangeBtnShowType = (props) => {
   const [showButton, setShowButton] = useState(false);
   const handleMouseEnter = () => {
     setShowButton(true);
@@ -224,7 +279,7 @@ const ChangeBtnShowType = (item) => {
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
-      {item.姓名.label}
+      {props.cellData}
       {showButton && (
         <div>
           <Tooltip content="更多操作" positioning="below">
@@ -247,13 +302,30 @@ const ChangeBtnShowType = (item) => {
 
 const List = () => {
   const defaultSelectedItems = React.useMemo(() => new Set([1]), []);
+  const [dataSortType, setDataSortType] = useState(({
+    sortColumn: "序号",
+    sortDirection: "ascending",
+  }));
+  const ascendingData = (props) => {
+    setDataSortType(({
+      sortColumn: "序号",
+      sortDirection: "ascending",
+    }));
+  }
+  const descendingData = (props) => {
+    setDataSortType(({
+      sortColumn: "序号",
+      sortDirection: "descending",
+    }));
+  }
 
   return (
     <DataGrid
       items={items}
       columns={columns}
       selectionMode="single"
-      // sortable
+      sortable
+      sortState={dataSortType}
       subtleSelection
       resizableColumns
       defaultSelectedItems={defaultSelectedItems}