代码重构

src/pages/listnew/index.jsx

@@ -2,16 +2,10 @@ import * as React from "react";
 import { useState } from "react";
 import { useTranslation } from 'react-i18next'
 import {
-  FolderRegular,
-  DocumentRegular,
-  DocumentPdfRegular,
-  VideoRegular,
   ChevronDown16Filled,
   TextField16Regular,
   Calendar16Regular,
   SelectAllOn16Regular,
-  CommentAdd16Regular,
-  MoreHorizontal16Filled,
   NumberCircle116Regular,
   Add16Filled,
   ShareRegular,
@@ -44,7 +38,6 @@ import {
   MenuList,
   MenuItem,
   MenuPopover,
-  Tooltip,
   MenuDivider,
   Input,
   Select,
@@ -109,19 +102,57 @@ const List = (editType) => {
             <MenuDivider />
             <MenuItem>按“{props.columnId}”分组</MenuItem>
             <MenuDivider />
-            <MenuItem><HeaderMenuColumnSet dataType={props.dataType} /></MenuItem>
+            <MenuItem>
+              <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>
+            </MenuItem>
             <MenuDivider />
-            <MenuItem><HeaderMenuAmount dataType={props.dataType} /></MenuItem>
+            <MenuItem>
+              <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>
+            </MenuItem>
           </MenuList>
         </MenuPopover>
       </Menu>
     );
   }
 
-  const [dataSortType, setDataSortType] = useState(({
-    sortColumn: "序号",
-    sortDirection: "ascending",
-  }));
+  //列头排序
+  const [dataSortType, setDataSortType] = useState(({}));
   const ascendingData = (columnId) => {
     setDataSortType(({
       sortColumn: columnId,
@@ -135,112 +166,7 @@ const List = (editType) => {
     }));
   }
 
-  /**
-   * 列设置的二级菜单
-   * @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}
-  //     >
-
-  //       <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 = [
     {
       序号: { label: 1 },
@@ -295,81 +221,46 @@ const List = (editType) => {
   //右键选中行
   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>
-    );
+   * 创建列
+   * @param {*}  
+   * @returns 
+   */
+  const TableCell = ({ label, rowId, columnId, dataType, onChange }) => {
+    if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
+      let editDataType = "";
+      if (["文本", "数字", "日期"].indexOf(dataType) > -1) {
+        if (dataType == DATA_TYPE.文本) {
+          editDataType = "text"
+        } else if (dataType == DATA_TYPE.数字) {
+          editDataType = "number"
+        } else if (dataType == DATA_TYPE.日期) {
+          editDataType = "date"
+        }
+        return <Input type={editDataType} defaultValue={label} style={{ width: "100%" }} appearance="underline" autoFocus onChange={(e) => {
+          onChange(e.target.value);
+        }} onBlur={() => {
+          setEditRowId(-1);
+          setEditColumnId(-1);
+        }} />;
+      } else if (dataType == DATA_TYPE.选项) {
+        return <Select style={{ width: "100%" }} appearance="underline" autoFocus onChange={(e) => {
+          onChange(e.target.value);
+        }} onBlur={() => {
+          setEditRowId(-1);
+          setEditColumnId(-1);
+        }} >
+          <option value="男" selected={label == "男"}>男</option>
+          <option value="女" selected={label == "女"}>女</option>
+        </Select>
+      }
+    } else {
+      return label;
+    }
   }
 
   return (
@@ -392,40 +283,9 @@ const List = (editType) => {
               );
             },
             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>
-              );
+              return <TableCell label={item.姓名.label} rowId={rowId} columnId={columnId} dataType={DATA_TYPE.文本} onChange={(value) => {
+                item.姓名.label = value;
+              }} />
             },
           }),
           createTableColumn({
@@ -443,16 +303,9 @@ const List = (editType) => {
               );
             },
             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;
-              }
+              return <TableCell label={item.序号.label} rowId={rowId} columnId={columnId} dataType={DATA_TYPE.数字} onChange={(value) => {
+                item.序号.label = value;
+              }} />
             },
           }),
 
@@ -470,19 +323,9 @@ const List = (editType) => {
               );
             },
             renderCell: (item, rowId, columnId) => {
-              if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
-                return <Select style={{ width: "100%" }} 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;
-              }
+              return <TableCell label={item.性别.label} rowId={rowId} columnId={columnId} dataType={DATA_TYPE.选项} onChange={(value) => {
+                item.性别.label = value;
+              }} />
             },
           }),
           createTableColumn({
@@ -500,16 +343,9 @@ const List = (editType) => {
             },
 
             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;
-              }
+              return <TableCell label={item.年龄.label} rowId={rowId} columnId={columnId} dataType={DATA_TYPE.文本} onChange={(value) => {
+                item.年龄.label = value;
+              }} />
             },
           }),
           createTableColumn({
@@ -526,16 +362,9 @@ const List = (editType) => {
               );
             },
             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;
-              }
+              return <TableCell label={item.最后在线时间.label} rowId={rowId} columnId={columnId} dataType={DATA_TYPE.日期} onChange={(value) => {
+                item.最后在线时间.label = value;
+              }} />
             },
           }),
         ]}
@@ -545,32 +374,33 @@ const List = (editType) => {
         subtleSelection
         resizableColumns
         selectedItems={[selectRow]}
-        columnSizingOptions={
-          {
-            姓名: {
-              minWidth: 100,
-              defaultWidth: 200,
-            },
-            序号: {
-              minWidth: 120,
-              defaultWidth: 120,
-            },
-            性别: {
-              minWidth: 120,
-              defaultWidth: 120,
-            },
-            年龄: {
-              minWidth: 120,
-              defaultWidth: 120,
-            },
-            最后在线时间: {
-              minWidth: 120,
-              defaultWidth: 120,
-            }
-          }
-        }
+        // columnSizingOptions={
+        //   {
+        //     姓名: {
+        //       minWidth: 120,
+        //       defaultWidth: 120,
+        //     },
+        //     序号: {
+        //       minWidth: 120,
+        //       defaultWidth: 120,
+        //     },
+        //     性别: {
+        //       minWidth: 120,
+        //       defaultWidth: 120,
+        //     },
+        //     年龄: {
+        //       minWidth: 120,
+        //       defaultWidth: 120,
+        //     },
+        //     最后在线时间: {
+        //       minWidth: 120,
+        //       defaultWidth: 120,
+        //       idealWidth: 120,
+        //     }
+        //   }
+        // }
         // defaultSelectedItems={defaultSelectedItems}
-        style={{ minWidth: "550px" }}
+        // style={{ minWidth: "550px" }}
       >
         <DataGridHeader>
           <DataGridRow>
@@ -598,12 +428,10 @@ const List = (editType) => {
                       onMouseEnter={(e) => {
                         setShowCellButton(true);
                         setMouseEnterRowId(rowId);
-                        setmouseEnterColumnId(columnId);
                       }}
                       onMouseLeave={(e) => {
                         setShowCellButton(false);
                         setMouseEnterRowId(-1);
-                        setmouseEnterColumnId(-1);
                       }}
                     >{renderCell(item, rowId, columnId)}</DataGridCell>
                   )}
@@ -618,7 +446,40 @@ const List = (editType) => {
                   <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 />
+                  <Menu>
+                    <MenuTrigger disableButtonEnhancement>
+                      <MenuItem icon={<FlashAutoRegular style={{ color: "var(--colorBrandBackground)" }} />}>自动化</MenuItem>
+                    </MenuTrigger>
+
+                    <MenuPopover>
+                      <MenuList>
+                        <MenuItem icon>申请注销</MenuItem>
+                        <Menu>
+                          <MenuTrigger disableButtonEnhancement>
+                            <MenuItem icon>设置提醒</MenuItem>
+                          </MenuTrigger>
+
+                          <MenuPopover>
+                            <MenuList>
+                              <MenuItem icon>日期列</MenuItem>
+                            </MenuList>
+                          </MenuPopover>
+                        </Menu>
+                        <MenuDivider />
+                        <Menu>
+                          <MenuTrigger disableButtonEnhancement>
+                            <MenuItem icon={<ClipboardTextEditRegular style={{ color: "var(--colorBrandBackground)" }} />}>规则</MenuItem>
+                          </MenuTrigger>
+                          <MenuPopover>
+                            <MenuList>
+                              <MenuItem icon>创建规则</MenuItem>
+                              <MenuItem icon>管理规则</MenuItem>
+                            </MenuList>
+                          </MenuPopover>
+                        </Menu>
+                      </MenuList>
+                    </MenuPopover>
+                  </Menu>
                   <MenuItem icon={<HistoryRegular style={{ color: "var(--colorBrandBackground)" }} />}>版本历史记录</MenuItem>
                   <MenuDivider />
                   <MenuItem icon={<ArrowUndoFilled style={{ color: "var(--colorBrandBackground)" }} />}>撤销</MenuItem>
@@ -627,22 +488,34 @@ const List = (editType) => {
                   <MenuItem icon={<ClipboardTextEditRegular style={{ color: "var(--colorBrandBackground)" }} />}>管理警报</MenuItem>
                   <MenuDivider />
                   <MenuItem icon={<PanelRightExpandRegular style={{ color: "var(--colorBrandBackground)" }} />}>详细信息</MenuItem>
-                  <RightBtnMoreSubMenu />
+                  <Menu>
+                    <MenuTrigger disableButtonEnhancement>
+                      <MenuItem icon>更多</MenuItem>
+                    </MenuTrigger>
+
+                    <MenuPopover>
+                      <MenuList>
+                        <MenuItem icon>工作流</MenuItem>
+                        <MenuItem icon>合规性相信信息</MenuItem>
+                        <MenuItem icon>下移</MenuItem>
+                      </MenuList>
+                    </MenuPopover>
+                  </Menu>
                 </MenuList>
               </MenuPopover>
             </Menu>
           )}
         </DataGridBody>
-
-        {editType.edit == "true" && (<Button
-          appearance="subtle"
-          icon={<Add16Filled />}
-          style={{ color: "var(--colorBrandBackground)" }}
-          onClick={() => {
-            AddNewRow();
-          }}
-        >添加新项目</Button>)}
       </DataGrid>
+
+      {editType.edit == "true" && (<Button
+        appearance="subtle"
+        icon={<Add16Filled />}
+        style={{ color: "var(--colorBrandBackground)" }}
+        onClick={() => {
+          AddNewRow();
+        }}
+      >添加新项目</Button>)}
     </>
 
   );