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

src/locales/langs/en-US.json

@@ -55,5 +55,12 @@
         "remarks": "Remark",
         "sure": "Sure",
         "cancel": "Cancel"
+    },
+    "list": {
+        "share": "share",
+        "copyLink": "copy link",
+        "copyToClipboard": "Copy field values to clipboard",
+        "edit": "edit",
+        "comment": "add comment"
     }
 }

src/locales/langs/zh-CN.json

@@ -55,5 +55,12 @@
     "remarks": "备注",
     "sure": "确定",
     "cancel": "取消"
+  },
+  "list": {
+    "share": "共享",
+    "copyLink": "复制链接",
+    "copyToClipboard": "将字段值复制到剪切板",
+    "edit": "编辑",
+    "comment": "批注"
   }
 }

src/pages/listnew/index.jsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { useState } from "react";
+import { useTranslation } from 'react-i18next'
 import {
   FolderRegular,
   DocumentRegular,
@@ -12,7 +13,21 @@ import {
   CommentAdd16Regular,
   MoreHorizontal16Filled,
   NumberCircle116Regular,
-  Add16Filled
+  Add16Filled,
+  ShareRegular,
+  LinkFilled,
+  CopyRegular,
+  EditRegular,
+  CommentRegular,
+  DeleteRegular,
+  TableFreezeRowRegular,
+  AlertRegular,
+  ClipboardTextEditRegular,
+  ArrowUndoFilled,
+  HistoryRegular,
+  PanelRightExpandRegular,
+  PersonRegular,
+  FlashAutoRegular
 } from "@fluentui/react-icons";
 import {
   DataGridBody,
@@ -33,11 +48,13 @@ import {
   MenuDivider,
   Input,
   Select,
+  Toolbar
 } from "@fluentui/react-components";
 import { DatePicker } from "@fluentui/react-datepicker-compat";
 
 
 const List = (editType) => {
+  const { t } = useTranslation();
   // const defaultSelectedItems = React.useMemo(() => new Set([1]), []);
 
   //数据类型常量
@@ -179,48 +196,50 @@ const List = (editType) => {
    * @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}
-      >
-
-        <Input type="text" style={{ width: "calc(100% - 70px)" }} defaultValue={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>
-    );
-  };
+  // 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}
+  //     >
+
+  //       <Input type="text" style={{ width: "calc(100% - 70px)" }} defaultValue={props.cellData} onChange={(e) => {
+
+  //       }} />
+  //       {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>
+  //   );
+  // };
 
   const tableData = [
     {
@@ -253,10 +272,10 @@ const List = (editType) => {
     },
   ]
 
-  const [newTableData, setTabeData] = useState(tableData);
   /**
    * 新增空行
    */
+  const [newTableData, setTabeData] = useState(tableData);
   const AddNewRow = () => {
     setTabeData(newTableData.concat([{
       序号: { label: newTableData.length + 1 },
@@ -267,180 +286,357 @@ const List = (editType) => {
     }]));
   }
 
-  /**
-   * 记录点击的行
-   */
+  //记录点击的行
   const [editRowId, setEditRowId] = useState(-1);
-  const ChangeEditRowId = (rowId) => {
-    setEditRowId(rowId);
-  }
 
-  /**
-   * 记录点击的列
-   */
+  //记录点击的列
   const [editColumnId, setEditColumnId] = useState(-1);
-  const ChangeEditColumnId = (ColumnId) => {
-    setEditColumnId(ColumnId);
+
+  //右键选中行
+  const [selectRow, setSelectRow] = useState(-1);
+
+  const [showCellButton, setShowCellButton] = useState(false);
+  const [mouseEnterRowId, setMouseEnterRowId] = useState(-1);
+  const [mouseEnterColumnId, setmouseEnterColumnId] = useState(-1);
+
+  /**
+ * 列头“合计”二级菜单
+ */
+  const RightBtnAutoSubMenu = () => {
+    return (
+      <Menu>
+        <MenuTrigger disableButtonEnhancement>
+          <MenuItem icon={<FlashAutoRegular style={{ color: "var(--colorBrandBackground)" }} />}>自动化</MenuItem>
+        </MenuTrigger>
+
+        <MenuPopover>
+          <MenuList>
+            <MenuItem icon>申请注销</MenuItem>
+            <RightBtnSetNoteSubMenu />
+            <MenuDivider />
+            <RightBtnRuleSubMenu />
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    );
   }
 
+  const RightBtnSetNoteSubMenu = () => {
+    return (
+      <Menu>
+        <MenuTrigger disableButtonEnhancement>
+          <MenuItem icon>设置提醒</MenuItem>
+        </MenuTrigger>
+
+        <MenuPopover>
+          <MenuList>
+            <MenuItem icon>日期列</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    );
+  }
+
+  const RightBtnRuleSubMenu = () => {
+    return (
+      <Menu>
+        <MenuTrigger disableButtonEnhancement>
+          <MenuItem icon={<ClipboardTextEditRegular style={{ color: "var(--colorBrandBackground)" }} />}>规则</MenuItem>
+        </MenuTrigger>
+
+        <MenuPopover>
+          <MenuList>
+            <MenuItem icon>创建规则</MenuItem>
+            <MenuItem icon>管理规则</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    );
+  }
+
+  const RightBtnMoreSubMenu = () => {
+    return (
+      <Menu>
+        <MenuTrigger disableButtonEnhancement>
+          <MenuItem icon>更多</MenuItem>
+        </MenuTrigger>
+
+        <MenuPopover>
+          <MenuList>
+            <MenuItem icon>工作流</MenuItem>
+            <MenuItem icon>合规性相信信息</MenuItem>
+            <MenuItem icon>下移</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    );
+  }
+
+  // const [showButton, setShowButton] = useState(false);
+  // const handleMouseEnter = () => {
+  //   setShowButton(true);
+  // };
+
+  // const handleMouseLeave = () => {
+  //   setShowButton(false);
+  // };
 
   return (
-    <DataGrid
-      items={newTableData}
-      columns={[
-        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, rowId, columnId) => {
-            if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
-              return <ChangeBtnShowType cellData={item.姓名.label} />
-            } else {
-              return item.姓名.label;
-            }
-          },
-        }),
-        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, rowId, columnId) => {
-            if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
-              return <Input type="number" defaultValue={item.序号.label} style={{ width: "100%" }} />;
-            } else {
-              return 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, rowId, columnId) => {
-            if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
-              return <Select style={{ width: "calc(100% - 70px)" }}>
-                <option value="男" selected={item.性别.label == "男"}>男</option>
-                <option value="女" selected={item.性别.label == "女"}>女</option>
-              </Select>;
-            } else {
-              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, rowId, columnId) => {
-            if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
-              return <Input type="date" defaultValue={item.年龄.label} />;
-            } else {
-              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, rowId, columnId) => {
-            if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
-              return <Input type="date" defaultValue={item.最后在线时间.label} />;
-            } else {
-              return item.最后在线时间.label;
+    <>
+      <Toolbar aria-label="Default"></Toolbar>
+      <DataGrid
+        items={newTableData}
+        columns={[
+          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, rowId, columnId) => {
+              return (
+                <div
+                  style={{
+                    width: "100%",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                  }}
+                >
+
+                  {rowId == editRowId && editType.edit == "true" && editColumnId == columnId ? <Input type="text" style={{ width: "calc(100% - 70px)" }} defaultValue={item.姓名.label} appearance="underline" autoFocus onChange={(e) => {
+                    item.姓名.label = e.target.value;
+                  }} onBlur={() => {
+                    setEditRowId(-1);
+                    setEditColumnId(-1);
+                  }} /> : item.姓名.label}
+                  {showCellButton && mouseEnterRowId == rowId && mouseEnterColumnId == columnId && (
+                    <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>
+              );
+            },
+          }),
+          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, rowId, columnId) => {
+              if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
+                return <Input type="number" defaultValue={item.序号.label} style={{ width: "100%" }} appearance="underline" autoFocus onChange={(e) => {
+                  item.序号.label = e.target.value;
+                }} onBlur={() => {
+                  setEditRowId(-1);
+                  setEditColumnId(-1);
+                }} />;
+              } else {
+                return 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, rowId, columnId) => {
+              if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
+                return <Select style={{ width: "calc(100% - 70px)" }} appearance="underline" autoFocus onChange={(e) => {
+                  item.性别.label = e.target.value;
+                }} onBlur={() => {
+                  setEditRowId(-1);
+                  setEditColumnId(-1);
+                }} >
+                  <option value="男" selected={item.性别.label == "男"}>男</option>
+                  <option value="女" selected={item.性别.label == "女"}>女</option>
+                </Select>;
+              } else {
+                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, rowId, columnId) => {
+              if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
+                return <Input type="text" defaultValue={item.年龄.label} style={{ width: "100%" }} appearance="underline" autoFocus onChange={(e) => {
+                  item.年龄.label = e.target.value;
+                }} onBlur={() => {
+                  setEditRowId(-1);
+                  setEditColumnId(-1);
+                }} />;
+              } else {
+                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, rowId, columnId) => {
+              if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
+                return <Input type="date" defaultValue={item.最后在线时间.label} appearance="underline" autoFocus onChange={(e) => {
+                  item.最后在线时间.label = e.target.value;
+                }} onBlur={() => {
+                  setEditRowId(-1);
+                  setEditColumnId(-1);
+                }} />;
+              } else {
+                return item.最后在线时间.label;
+              }
+            },
+          }),
+        ]}
+        selectionMode="single"
+        sortable
+        sortState={dataSortType}
+        subtleSelection
+        resizableColumns
+        selectedItems={[selectRow]}
+        columnSizingOptions={
+          {
+            姓名: {
+              minWidth: 100,
+              defaultWidth: 200,
             }
-          },
-        }),
-      ]}
-      selectionMode="single"
-      sortable
-      sortState={dataSortType}
-      subtleSelection
-      resizableColumns
-      // defaultSelectedItems={defaultSelectedItems}
-      style={{ minWidth: "550px" }}
-    >
-      <DataGridHeader>
-        <DataGridRow>
-          {({ renderHeaderCell }) => (
-            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
-          )}
-        </DataGridRow>
-      </DataGridHeader>
-      <DataGridBody>
-        {({ item, rowId }) => (
-          <DataGridRow
-            key={rowId}
-            selectionCell={{ radioIndicator: { "aria-label": "Select row" } }}
-          >
-            {({ renderCell, columnId }) => (
-              <DataGridCell onClick={(e) => {
-                ChangeEditRowId(rowId);
-                ChangeEditColumnId(columnId);
-              }}>{renderCell(item, rowId, columnId)}</DataGridCell>
+          }
+        }
+        // defaultSelectedItems={defaultSelectedItems}
+        style={{ minWidth: "550px" }}
+      >
+        <DataGridHeader>
+          <DataGridRow>
+            {({ renderHeaderCell }) => (
+              <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
             )}
           </DataGridRow>
-        )}
-      </DataGridBody>
-
-      {editType.edit == "true" && (<Button
-        appearance="subtle"
-        icon={<Add16Filled />}
-        style={{ color: "var(--colorBrandBackground)" }}
-        onClick={() => {
-          AddNewRow();
-        }}
-      >添加新项目</Button>)}
-    </DataGrid>
-
+        </DataGridHeader>
+        <DataGridBody>
+          {({ item, rowId }) => (
+            <Menu positioning="above-start" openOnContext>
+              <MenuTrigger disableButtonEnhancement>
+                <DataGridRow
+                  key={rowId}
+                  selectionCell={{ radioIndicator: { "aria-label": "Select row" } }}
+                  onMouseDown={(e) => {
+                    setSelectRow(rowId);
+                  }}
+                >
+                  {({ renderCell, columnId }) => (
+                    <DataGridCell onClick={(e) => {
+                      setEditRowId(rowId);
+                      setEditColumnId(columnId);
+                    }}
+                      onMouseEnter={(e) => {
+                        setShowCellButton(true);
+                        setMouseEnterRowId(rowId);
+                        setmouseEnterColumnId(columnId);
+                      }}
+                      onMouseLeave={(e) => {
+                        setShowCellButton(false);
+                        setMouseEnterRowId(-1);
+                        setmouseEnterColumnId(-1);
+                      }}
+                    >{renderCell(item, rowId, columnId)}</DataGridCell>
+                  )}
+                </DataGridRow>
+              </MenuTrigger>
+              <MenuPopover>
+                <MenuList>
+                  <MenuItem icon={<ShareRegular style={{ color: "var(--colorBrandBackground)" }} />}>{t("list.share")}</MenuItem>
+                  <MenuItem icon={<LinkFilled style={{ color: "var(--colorBrandBackground)" }} />}>{t("list.copyLink")}</MenuItem>
+                  <MenuItem icon={<CopyRegular style={{ color: "var(--colorBrandBackground)" }} />}>{t("list.copyToClipboard")}</MenuItem>
+                  <MenuItem icon={<EditRegular style={{ color: "var(--colorBrandBackground)" }} />}>{t("list.edit")}</MenuItem>
+                  <MenuItem icon={<CommentRegular style={{ color: "var(--colorBrandBackground)" }} />}>{t("list.comment")}</MenuItem>
+                  <MenuItem icon={<PersonRegular style={{ color: "var(--colorBrandBackground)" }} />}>管理访问权限</MenuItem>
+                  <MenuItem icon={<DeleteRegular style={{ color: "var(--colorBrandBackground)" }} />}>删除</MenuItem>
+                  <RightBtnAutoSubMenu />
+                  <MenuItem icon={<HistoryRegular style={{ color: "var(--colorBrandBackground)" }} />}>版本历史记录</MenuItem>
+                  <MenuDivider />
+                  <MenuItem icon={<ArrowUndoFilled style={{ color: "var(--colorBrandBackground)" }} />}>撤销</MenuItem>
+                  <MenuItem icon={<TableFreezeRowRegular style={{ color: "var(--colorBrandBackground)" }} />}>在网络试图中编辑</MenuItem>
+                  <MenuItem icon={<AlertRegular style={{ color: "var(--colorBrandBackground)" }} />}>提醒我</MenuItem>
+                  <MenuItem icon={<ClipboardTextEditRegular style={{ color: "var(--colorBrandBackground)" }} />}>管理警报</MenuItem>
+                  <MenuDivider />
+                  <MenuItem icon={<PanelRightExpandRegular style={{ color: "var(--colorBrandBackground)" }} />}>详细信息</MenuItem>
+                  <RightBtnMoreSubMenu />
+                </MenuList>
+              </MenuPopover>
+            </Menu>
+          )}
+        </DataGridBody>
+
+        {editType.edit == "true" && (<Button
+          appearance="subtle"
+          icon={<Add16Filled />}
+          style={{ color: "var(--colorBrandBackground)" }}
+          onClick={() => {
+            AddNewRow();
+          }}
+        >添加新项目</Button>)}
+      </DataGrid>
+    </>
 
   );
 };