Merge branch 'master' into feature/2.9.42310.01-薪资项目拓扑图

# Conflicts: # src/pages/calcTable/customTableTitle.tsx # src/pages/calcTable/index.tsx
2024-10-18 16:57:38 +08:00 · 2024-10-18 16:57:38 +08:00 · 1dbe38a87e
parent ad5c781bcb 0688be7bff
commit 1dbe38a87e
7 changed files with 199 additions and 122 deletions
--- a/.prettierrc
+++ b/.prettierrc
@ -1,11 +1,13 @@
 {
-  "singleQuote": true,
-  "trailingComma": "all",
-  "printWidth": 80,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "printWidth": 200,
  "overrides": [
    {
      "files": ".prettierrc",
-      "options": { "parser": "json" }
+      "options": {
+        "parser": "json"
+      }
    }
  ]
 }
--- a/config/config.dev.ts
+++ b/config/config.dev.ts
@ -13,7 +13,7 @@ export default defineConfig({
    //   changeOrigin: true,
    // },
    '/api': {
-      target: 'http://192.168.0.114:7603/api',
+      target: 'http://192.168.1.78:7603/api',
      changeOrigin: true,
      pathRewrite: {
        '^/api': '',
--- a/src/global.less
+++ b/src/global.less
@ -140,7 +140,7 @@ input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
 }

-.ant-dropdown-menu {
-  max-height: calc(100vh - 300px);
-  overflow-y: auto;
-}
+//.ant-dropdown-menu {
+//  max-height: calc(100vh - 300px);
+//  overflow-y: auto;
+//}
--- a/src/pages/atdTable/components/index.less
+++ b/src/pages/atdTable/components/index.less
@ -36,6 +36,7 @@
    display: flex;
    justify-content: space-between;
    align-items: center;
+    min-height: 22px;

    .contentTitle {
      flex: 1;
@ -405,3 +406,44 @@
  overflow-y: hidden;
 }

+//右键菜单样式
+.contextMenu {
+  min-width: 120px;
+
+  :global {
+    .ant-dropdown-menu {
+      padding: 0;
+
+      .ant-dropdown-menu-item:hover {
+        background-color: #57c5f7;
+        color: #fff;
+
+        .ant-dropdown-menu-item-icon {
+          background-color: #57c5f7;
+          color: #fff;
+        }
+      }
+
+      .ant-dropdown-menu-item {
+        height: 30px;
+        line-height: 30px;
+        padding: 0 5px 0 0;
+        overflow: hidden;
+        white-space: nowrap;
+        -o-text-overflow: ellipsis;
+        text-overflow: ellipsis;
+        color: #333;
+
+        .ant-dropdown-menu-item-icon {
+          display: flex;
+          justify-content: center;
+          width: 36px;
+          height: 100%;
+          margin-right: 6px;
+          text-align: center;
+          background: #f2f5f7;
+        }
+      }
+    }
+  }
+}
--- a/src/pages/calcTable/calcExplainFooter.tsx
+++ b/src/pages/calcTable/calcExplainFooter.tsx
@ -23,11 +23,11 @@ const CalcExplainFooter: FunctionComponent<Props> = (props) => {
      </div>
      <div className={styles["icon-item"]}>
        <LockOutlined/>
-        <span>{i18n["当前状态锁定，点击解锁"]}</span>
+        <span>{i18n["当前状态锁定，右击解锁"]}</span>
      </div>
      <div className={styles["icon-item"]}>
        <UnlockOutlined/>
-        <span>{i18n["当前状态未锁定，点击锁定"]}</span>
+        <span>{i18n["当前状态未锁定，右击锁定"]}</span>
      </div>
      <div className={styles["icon-item"]}>
        <Icon type="icon-piliangfenpei"/>
--- a/src/pages/calcTable/customTableTitle.tsx
+++ b/src/pages/calcTable/customTableTitle.tsx
@ -12,7 +12,6 @@ import styles from "@/pages/atdTable/components/index.less";
 interface OwnProps {
  dataIndex?: string;
  title?: string;
-  lockStatus?: string;
  dataType?: string;
  onHandleFormulatd?: any;
  i18n?: any;
@ -23,7 +22,7 @@ interface OwnProps {
 type Props = OwnProps;

 const customTableTitle: FunctionComponent<Props> = (props) => {
-  const { dataIndex, title, lockStatus, onHandleFormulatd, i18n = {}, pattern, dataType, calcDetail } = props;
+  const { dataIndex, title, onHandleFormulatd, i18n = {}, pattern, dataType, calcDetail } = props;

  const handleToggleSalaryItemVal = (salaryItemId: string, type: string, updateParams: any = {}) => {
    window.parent.postMessage(
@ -37,28 +36,17 @@ const customTableTitle: FunctionComponent<Props> = (props) => {
  return (
    // th-width-lock
    <div className={classnames(styles["expand-th"])}>
-      <div className={styles["title-text"]} title={title} onClick={() => onHandleFormulatd(dataIndex)}>{title}</div>
-      {
-        !!lockStatus && !calcDetail &&
+      <div className={styles["title-text"]} title={title} onClick={() => onHandleFormulatd(dataIndex)}>
+        {title}
+      </div>
+      {!calcDetail && (
        <div className={styles["toogle-lock-tool"]}>
-          {
-            lockStatus === "UNLOCK" &&
-            <Icon type="icon-piliangsuoding" title={i18n["点击锁定所有解锁的项目值"]}
-                  onClick={() => handleToggleSalaryItemVal(dataIndex as string, "LOCK")}/>
-          }
-          {
-            lockStatus === "LOCK" &&
-            <Icon type="icon-piliangjiesuo" title={i18n["点击解锁所有锁定的项目值"]}
-                  onClick={() => handleToggleSalaryItemVal(dataIndex as string, "UNLOCK")}/>
-          }
-          <Icon type="icon-piliangfenpei" title={i18n["查看拓扑图"]}
-                onClick={() => handleToggleSalaryItemVal(dataIndex as string, "DIAGRAM")}/>
-          <Icon type="icon-pilianggengxin" title={i18n["批量更新"]}
-                onClick={() => handleToggleSalaryItemVal(dataIndex as string, "BATCHUPDATE", {
-                  pattern, salaryItemName: title, dataType
-                })}/>
+          <Icon type="icon-piliangsuoding" title={i18n["点击锁定所有解锁的项目值"]} onClick={() => handleToggleSalaryItemVal(dataIndex as string, "LOCK")} />
+          <Icon type="icon-piliangjiesuo" title={i18n["点击解锁所有锁定的项目值"]} onClick={() => handleToggleSalaryItemVal(dataIndex as string, "UNLOCK")} />
+          <Icon type="icon-piliangfenpei" title={i18n["查看拓扑图"]} onClick={() => handleToggleSalaryItemVal(dataIndex as string, "DIAGRAM")} />
+          <Icon type="icon-pilianggengxin" title={i18n["批量更新"]} onClick={() => handleToggleSalaryItemVal(dataIndex as string, "BATCHUPDATE", { pattern, salaryItemName: title, dataType })} />
        </div>
-      }
+      )}
    </div>
  );
 };
--- a/src/pages/calcTable/index.tsx
+++ b/src/pages/calcTable/index.tsx
@ -5,8 +5,9 @@
 * Date: 2023/9/14
 */
 import React, { FunctionComponent, useEffect, useState } from "react";
-import { Button, Space, Table, Typography } from "antd";
-import { LockOutlined } from "@ant-design/icons";
+import type { MenuProps } from "antd";
+import { Button, Dropdown, Space, Table, Typography } from "antd";
+import { LockOutlined, UnlockOutlined } from "@ant-design/icons";
 import CustomTableTitle from "@/pages/calcTable/customTableTitle";
 import CalcExplainFooter from "@/pages/calcTable/calcExplainFooter";
 import CaclFixedTotal from "./calcFixedTotal";
@ -17,8 +18,7 @@ import { IPage } from "@/common/types";
 import Icon from "../../lib/CustomIcon";
 import styles from "@/pages/atdTable/components/index.less";

-interface OwnProps {
-}
+interface OwnProps {}

 type Props = OwnProps;
 type fixedProps = boolean | "top" | "bottom";
@ -36,7 +36,7 @@ const index: FunctionComponent<Props> = (props) => {
  const [tableScrollHeight, setTableScrollHeight] = useState<Number>(0);
  const [payload, setPayload] = useState<string>("");
  const [fixed, setFixed] = useState<fixedProps>(true);
-  const [sumRow, setSumRow] = useState<Partial<{}>>({});//总计行数据
+  const [sumRow, setSumRow] = useState<Partial<{}>>({}); //总计行数据

  useEffect(() => {
    window.parent.postMessage({ type: "init" }, "*");
@ -49,9 +49,19 @@ const index: FunctionComponent<Props> = (props) => {
    const data: any = exceptStr(event.data);
    if (!_.isEmpty(data)) {
      const {
-        columns, dataSource, pageInfo, selectedRowKeys: rowKeys = [], i18n: i18nRes = {},
-        showTotalCell = false, sumRowlistUrl = "", payload = {}, calcDetail,
-        fixed = true, tableScrollHeight, sumRow, optWidth
+        columns,
+        dataSource,
+        pageInfo,
+        selectedRowKeys: rowKeys = [],
+        i18n: i18nRes = {},
+        showTotalCell = false,
+        sumRowlistUrl = "",
+        payload = {},
+        calcDetail,
+        fixed = true,
+        tableScrollHeight,
+        sumRow,
+        optWidth
      } = data;
      setSumRowlistUrl(sumRowlistUrl);
      setShowTotalCell(showTotalCell);
@ -64,40 +74,78 @@ const index: FunctionComponent<Props> = (props) => {
      setDataSource(dataSource);
      setSelectedRowKeys([...selectedRowKeys, ...rowKeys]);
      setTableScrollHeight(tableScrollHeight);
-      setColumns([...convertColumns(_.map(columns, o => ({ ...o, i18n: i18nRes }))), {
-        title: i18nRes["操作"], dataIndex: "operate", fixed: "right", width: optWidth || 120,
-        render: (__, record) => (<Space>
-          <Button type="link" onClick={() => handleEdit(record?.id)}>{i18nRes["编辑"]}</Button>
-          <Button type="link"
-                  onClick={() => handleLockEmp(record)}>{record.lockStatus === "LOCK" ? i18nRes["解锁"] : i18nRes["锁定"]}</Button>
-          {record?.lockStatus === "LOCK" && <Text>{record?.lockTime}</Text>}
-        </Space>)
-      }]);
+      setColumns([
+        ...convertColumns(_.map(columns, (o) => ({ ...o, i18n: i18nRes }))),
+        {
+          title: i18nRes["操作"],
+          dataIndex: "operate",
+          fixed: "right",
+          width: optWidth || 120,
+          render: (__, record) => (
+            <Space>
+              <Button type="link" onClick={() => handleEdit(record?.id)}>
+                {i18nRes["编辑"]}
+              </Button>
+              {record?.lockTime && <Text>{record?.lockTime}</Text>}
+            </Space>
+          )
+        }
+      ]);
    }
  };
  const convertColumns: any = (cols: any[]) => {
-    return _.map(cols, item => {
+    return _.map(cols, (item) => {
      if (_.isNaN(parseInt(item.dataIndex))) {
        return { ...item };
      } else {
        return {
-          ...item, title: <CustomTableTitle {...item} onHandleFormulatd={handleFormulaTd}/>,
-          children: convertColumns(_.map(item.children, o => ({ ...o, i18n: item.i18n }))),
-          className: styles["td_odd"], i18n: item.i18n,
-          render: (text: string, record: any) => (
-            <span className={styles.contentSpan}>
-              <span title={text} className={styles.contentTitle}
-                    style={{ color: `${record?.[item.dataIndex + "_color"]}` }}>{text}</span>
-              <Icon type="icon-piliangfenpei" title={i18n["查看拓扑图"]}
-                    className={styles.diagramIcon}
-                    onClick={() => handleDiagramTd(item?.dataIndex, record?.id)}
-              />
+          ...item,
+          title: <CustomTableTitle {...item} onHandleFormulatd={handleFormulaTd} />,
+          children: convertColumns(_.map(item.children, (o) => ({ ...o, i18n: item.i18n }))),
+          className: styles["td_odd"],
+          i18n: item.i18n,
+          onCell: (record: any) => ({
+            onContextMenu: (e: any) => {
+              e.preventDefault();
+            }
+          }),
+          render: (text: string, record: any) => {
+            const items: MenuProps["items"] = [
              {
-                (item.lockStatus === "LOCK" || record.lockStatus === "LOCK") ?
-                  <LockOutlined title={i18n["锁定的项目值"]}/> : null
+                label: item.i18n["锁定"],
+                key: "LOCK",
+                icon: <LockOutlined />,
+                onClick: () =>
+                  handleLockEmp({
+                    lockStatus: "LOCK",
+                    acctEmpId: record?.id,
+                    salaryItemId: item?.dataIndex
+                  })
+              },
+              {
+                label: item.i18n["解锁"],
+                key: "UNLOCK",
+                icon: <UnlockOutlined />,
+                onClick: () =>
+                  handleLockEmp({
+                    lockStatus: "UNLOCK",
+                    acctEmpId: record?.id,
+                    salaryItemId: item?.dataIndex
+                  })
              }
-            </span>
-          )
+            ];
+            return (
+              <Dropdown menu={{ items }} trigger={["contextMenu"]} overlayClassName={styles.contextMenu} destroyPopupOnHide>
+                <span className={styles.contentSpan}>
+                  <span title={text} className={styles.contentTitle} style={{ color: `${record?.[item.dataIndex + "_color"]}` }}>
+                    {text}
+                  </span>
+                  <Icon type="icon-piliangfenpei" title={i18n["查看拓扑图"]} className={styles.diagramIcon} onClick={() => handleDiagramTd(item?.dataIndex, record?.id)} />
+                  {record.lockItems.includes(item.dataIndex) ? <LockOutlined title={item.i18n["锁定的项目值"]} /> : null}
+                </span>
+              </Dropdown>
+            );
+          }
        };
      }
    });
@ -112,79 +160,76 @@ const index: FunctionComponent<Props> = (props) => {
    );
  };
  const handleFormulaTd = (dataIndex: string) => {
-    window.parent.postMessage(
-      {
-        type: "turn",
-        payload: { id: "FORMULA", params: { dataIndex } }
-      },
-      "*"
-    );
+    window.parent.postMessage({ type: "turn", payload: { id: "FORMULA", params: { dataIndex } } }, "*");
  };
  const handleEdit = (id: string) => {
-    window.parent.postMessage(
-      {
-        type: "turn",
-        payload: { id: "EDIT", params: { id } }
-      },
-      "*"
-    );
+    window.parent.postMessage({ type: "turn", payload: { id: "EDIT", params: { id } } }, "*");
  };
-  const handleLockEmp = (record: any) => {
-    const { id, lockStatus } = record;
-    window.parent.postMessage({
-        type: "turn",
-        payload: { id: "LOCKEMP", params: { lockStatus: lockStatus === "UNLOCK" ? "LOCK" : "UNLOCK", acctEmpIds: [id] } }
-      },
-      "*"
-    );
-  };
-  const sizeChange = (pageobj: IPage) => {
+  const handleLockEmp = (params: any) => {
+    window.parent.postMessage({ type: "turn", payload: { id: "LOCKEMP", params } }, "*");
  };
+  const sizeChange = (pageobj: IPage) => {};
  const onChange = (pageobj: IPage) => {
    setPageInfo(() => {
-      window.parent.postMessage(
-        {
-          type: "turn",
-          payload: { id: "PAGEINFO", params: { ...pageInfo, ...pageobj } }
-        },
-        "*"
-      );
+      window.parent.postMessage({ type: "turn", payload: { id: "PAGEINFO", params: { ...pageInfo, ...pageobj } } }, "*");
      return { ...pageInfo, ...pageobj };
    });
  };
  const rowSelection = {
-    columnWidth: 60, columnTitle: (isDetailTable && !showTotalCell) ? "序号" : "",
-    renderCell: (value: boolean, record: any, index: number, originNode: React.ReactNode) => ((isDetailTable && !showTotalCell) ?
-      <span>{index + 1}</span> : originNode),
-    selectedRowKeys, preserveSelectedRowKeys: true,
+    columnWidth: 60,
+    columnTitle: isDetailTable && !showTotalCell ? "序号" : "",
+    renderCell: (value: boolean, record: any, index: number, originNode: React.ReactNode) => (isDetailTable && !showTotalCell ? <span>{index + 1}</span> : originNode),
+    selectedRowKeys,
+    preserveSelectedRowKeys: true,
    onChange: (rowKeys: React.Key[]) => {
      setSelectedRowKeys(rowKeys);
      window.parent.postMessage(
-        { type: "turn", payload: { id: "CHECKBOX", params: { selectedRowKeys: rowKeys } } },
+        {
+          type: "turn",
+          payload: { id: "CHECKBOX", params: { selectedRowKeys: rowKeys } }
+        },
        "*"
      );
    }
  };
-  return (<Table
-    rowKey="id" size="small" bordered className={styles.tableWrapper}
-    dataSource={dataSource} rowSelection={rowSelection}
-    scroll={{ x: 1200, y: `calc(100vh - ${tableScrollHeight || (!showTotalCell ? 165 : 200)}px)` }}
-    columns={!isDetailTable ? columns : _.filter(columns, o => o.dataIndex !== "operate")}
-    footer={() => !isDetailTable ? <CalcExplainFooter i18n={i18n}/> : null}
-    pagination={!_.isNil(pageInfo) ? {
-      ...paginationFun(pageInfo, sizeChange, onChange, i18n),
-      size: "default"
-    } : false}
-    summary={() => (
-      !showTotalCell ? <></> :
-        <Table.Summary fixed={fixed}>
-          <Table.Summary.Row>
-            <Table.Summary.Cell index={0} align="center"><Text type="danger">{i18n["总计"]}</Text></Table.Summary.Cell>
-            <CaclFixedTotal columns={columns} dataSourceUrl={sumRowlistUrl} payload={payload} sumRow={sumRow}/>
-          </Table.Summary.Row>
-        </Table.Summary>
-    )}
-  />);
+  return (
+    <Table
+      rowKey="id"
+      size="small"
+      bordered
+      className={styles.tableWrapper}
+      dataSource={dataSource}
+      rowSelection={rowSelection}
+      scroll={{
+        x: 1200,
+        y: `calc(100vh - ${tableScrollHeight || (!showTotalCell ? 165 : 200)}px)`
+      }}
+      columns={!isDetailTable ? columns : _.filter(columns, (o) => o.dataIndex !== "operate")}
+      footer={() => (!isDetailTable ? <CalcExplainFooter i18n={i18n} /> : null)}
+      pagination={
+        !_.isNil(pageInfo)
+          ? {
+              ...paginationFun(pageInfo, sizeChange, onChange, i18n),
+              size: "default"
+            }
+          : false
+      }
+      summary={() =>
+        !showTotalCell ? (
+          <></>
+        ) : (
+          <Table.Summary fixed={fixed}>
+            <Table.Summary.Row>
+              <Table.Summary.Cell index={0} align="center">
+                <Text type="danger">{i18n["总计"]}</Text>
+              </Table.Summary.Cell>
+              <CaclFixedTotal columns={columns} dataSourceUrl={sumRowlistUrl} payload={payload} sumRow={sumRow} />
+            </Table.Summary.Row>
+          </Table.Summary>
+        )
+      }
+    />
+  );
 };

 export default index;