master

.prettierrc

@@ -1,11 +1,13 @@
 {
-  "singleQuote": true,
+  "singleQuote": false,
-  "trailingComma": "all",
+  "trailingComma": "none",
-  "printWidth": 80,
+  "printWidth": 200,
   "overrides": [
     {
       "files": ".prettierrc",
-      "options": { "parser": "json" }
+      "options": {
+        "parser": "json"
+      }
     }
   ]
 }

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': '',

src/global.less

@@ -140,7 +140,7 @@ input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0px 1000px white inset !important;
 }
 
-.ant-dropdown-menu {
+//.ant-dropdown-menu {
-  max-height: calc(100vh - 300px);
+//  max-height: calc(100vh - 300px);
-  overflow-y: auto;
+//  overflow-y: auto;
-}
+//}

src/pages/atdTable/components/index.less

@@ -30,6 +30,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    min-height: 22px;
 
     .contentTitle {
       flex: 1;
@@ -388,3 +389,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;
+        }
+      }
+    }
+  }
+}

src/pages/calcTable/index.tsx

@@ -4,20 +4,20 @@
  * Description:
  * Date: 2023/9/14
  */
-import React, { FunctionComponent, useEffect, useState } from "react";
+import React, { FunctionComponent, useEffect, useState } from 'react';
-import { Button, Space, Table, Typography } from "antd";
+import type { MenuProps } from 'antd';
-import { LockOutlined } from "@ant-design/icons";
+import { Button, Dropdown, Space, Table, Typography } from 'antd';
-import CustomTableTitle from "@/pages/calcTable/customTableTitle";
+import { LockOutlined } from '@ant-design/icons';
-import CalcExplainFooter from "@/pages/calcTable/calcExplainFooter";
+import CustomTableTitle from '@/pages/calcTable/customTableTitle';
-import CaclFixedTotal from "./calcFixedTotal";
+import CalcExplainFooter from '@/pages/calcTable/calcExplainFooter';
-import type { ColumnType } from "antd/lib/table";
+import CaclFixedTotal from './calcFixedTotal';
-import type { PaginationData } from "rc-pagination";
+import type { ColumnType } from 'antd/lib/table';
-import { exceptStr, paginationFun } from "@/utils/common";
+import type { PaginationData } from 'rc-pagination';
-import { IPage } from "@/common/types";
+import { exceptStr, paginationFun } from '@/utils/common';
-import styles from "@/pages/atdTable/components/index.less";
+import { IPage } from '@/common/types';
+import styles from '@/pages/atdTable/components/index.less';
 
-interface OwnProps {
+interface OwnProps {}
-}
 
 type Props = OwnProps;
 type fixedProps = boolean | "top" | "bottom";
@@ -35,7 +35,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" }, "*");
@@ -48,9 +48,19 @@ const index: FunctionComponent<Props> = (props) => {
     const data: any = exceptStr(event.data);
     if (!_.isEmpty(data)) {
       const {
-        columns, dataSource, pageInfo, selectedRowKeys: rowKeys = [], i18n: i18nRes = {},
+        columns,
-        showTotalCell = false, sumRowlistUrl = "", payload = {}, calcDetail,
+        dataSource,
-        fixed = true, tableScrollHeight, sumRow, optWidth
+        pageInfo,
+        selectedRowKeys: rowKeys = [],
+        i18n: i18nRes = {},
+        showTotalCell = false,
+        sumRowlistUrl = "",
+        payload = {},
+        calcDetail,
+        fixed = true,
+        tableScrollHeight,
+        sumRow,
+        optWidth
       } = data;
       setSumRowlistUrl(sumRowlistUrl);
       setShowTotalCell(showTotalCell);
@@ -63,69 +73,91 @@ const index: FunctionComponent<Props> = (props) => {
       setDataSource(dataSource);
       setSelectedRowKeys([...selectedRowKeys, ...rowKeys]);
       setTableScrollHeight(tableScrollHeight);
-      setColumns([...convertColumns(_.map(columns, o => ({ ...o, i18n: i18nRes }))), {
+      setColumns([
-        title: i18nRes["操作"], dataIndex: "operate", fixed: "right", width: optWidth || 120,
+        ...convertColumns(_.map(columns, (o) => ({ ...o, i18n: i18nRes }))),
-        render: (__, record) => (<Space>
+        {
-          <Button type="link" onClick={() => handleEdit(record?.id)}>{i18nRes["编辑"]}</Button>
+          title: i18nRes["操作"],
-          <Button type="link"
+          dataIndex: "operate",
-                  onClick={() => handleLockEmp(record)}>{record.lockStatus === "LOCK" ? i18nRes["解锁"] : i18nRes["锁定"]}</Button>
+          fixed: "right",
-          {record?.lockStatus === "LOCK" && <Text>{record?.lockTime}</Text>}
+          width: optWidth || 120,
-        </Space>)
+          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}/>,
+          ...item,
-          children: convertColumns(_.map(item.children, o => ({ ...o, i18n: item.i18n }))),
+          title: <CustomTableTitle {...item} onHandleFormulatd={handleFormulaTd} />,
-          className: styles["td_odd"], i18n: item.i18n,
+          children: convertColumns(_.map(item.children, (o) => ({ ...o, i18n: item.i18n }))),
-          render: (text: string, record: any) => (
+          className: styles["td_odd"],
-            <span className={styles.contentSpan}>
+          i18n: item.i18n,
-              <span title={text} className={styles.contentTitle}
+          onCell: (record: any) => ({
-                    style={{ color: `${record?.[item.dataIndex + "_color"]}` }}>{text}</span>
+            onContextMenu: (e: any) => {
+              e.preventDefault();
+            }
+          }),
+          render: (text: string, record: any) => {
+            const items: MenuProps["items"] = [
+              {
+                label: item.i18n["锁定"],
+                key: "LOCK",
+                icon: <LockOutlined />,
+                onClick: () =>
+                  handleLockEmp({
+                    lockStatus: "LOCK",
+                    acctEmpId: record?.id,
+                    salaryItemId: item?.dataIndex
+                  })
+              },
               {
-                (item.lockStatus === "LOCK" || record.lockStatus === "LOCK") ?
+                label: item.i18n["解锁"],
-                  <LockOutlined title={i18n["锁定的项目值"]}/> : null
+                key: "UNLOCK",
+                icon: <LockOutlined />,
+                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>
+                  {record.lockItems.includes(item.dataIndex) ? <LockOutlined title={item.i18n["锁定的项目值"]} /> : null}
+                </span>
+              </Dropdown>
+            );
+          }
         };
       }
     });
   };
   const handleFormulaTd = (dataIndex: string) => {
-    window.parent.postMessage(
+    window.parent.postMessage({ type: "turn", payload: { id: "FORMULA", params: { dataIndex } } }, "*");
-      {
-        type: "turn",
-        payload: { id: "FORMULA", params: { dataIndex } }
-      },
-      "*"
-    );
   };
   const handleEdit = (id: string) => {
-    window.parent.postMessage(
+    window.parent.postMessage({ type: "turn", payload: { id: "EDIT", params: { id } } }, "*");
-      {
-        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(
@@ -139,38 +171,60 @@ const index: FunctionComponent<Props> = (props) => {
     });
   };
   const rowSelection = {
-    columnWidth: 60, columnTitle: (isDetailTable && !showTotalCell) ? "序号" : "",
+    columnWidth: 60,
-    renderCell: (value: boolean, record: any, index: number, originNode: React.ReactNode) => ((isDetailTable && !showTotalCell) ?
+    columnTitle: isDetailTable && !showTotalCell ? "序号" : "",
-      <span>{index + 1}</span> : originNode),
+    renderCell: (value: boolean, record: any, index: number, originNode: React.ReactNode) => (isDetailTable && !showTotalCell ? <span>{index + 1}</span> : originNode),
-    selectedRowKeys, preserveSelectedRowKeys: true,
+    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
+  return (
-    rowKey="id" size="small" bordered className={styles.tableWrapper}
+    <Table
-    dataSource={dataSource} rowSelection={rowSelection}
+      rowKey="id"
-    scroll={{ x: 1200, y: `calc(100vh - ${tableScrollHeight || (!showTotalCell ? 165 : 200)}px)` }}
+      size="small"
-    columns={!isDetailTable ? columns : _.filter(columns, o => o.dataIndex !== "operate")}
+      bordered
-    footer={() => !isDetailTable ? <CalcExplainFooter i18n={i18n}/> : null}
+      className={styles.tableWrapper}
-    pagination={!_.isNil(pageInfo) ? {
+      dataSource={dataSource}
-      ...paginationFun(pageInfo, sizeChange, onChange, i18n),
+      rowSelection={rowSelection}
-      size: "default"
+      scroll={{
-    } : false}
+        x: 1200,
-    summary={() => (
+        y: `calc(100vh - ${tableScrollHeight || (!showTotalCell ? 165 : 200)}px)`
-      !showTotalCell ? <></> :
+      }}
-        <Table.Summary fixed={fixed}>
+      columns={!isDetailTable ? columns : _.filter(columns, (o) => o.dataIndex !== "operate")}
-          <Table.Summary.Row>
+      footer={() => (!isDetailTable ? <CalcExplainFooter i18n={i18n} /> : null)}
-            <Table.Summary.Cell index={0} align="center"><Text type="danger">{i18n["总计"]}</Text></Table.Summary.Cell>
+      pagination={
-            <CaclFixedTotal columns={columns} dataSourceUrl={sumRowlistUrl} payload={payload} sumRow={sumRow}/>
+        !_.isNil(pageInfo)
-          </Table.Summary.Row>
+          ? {
-        </Table.Summary>
+              ...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;