Merge branch 'master' into feature/V2-系统多语言

public/css/iconfont_1/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/api/calculate.service.ts

@@ -16,7 +16,7 @@ class CalculateService extends BasicService {
       departmentIds: departmentIds ? departmentIds.split(",") : undefined,
       positionIds: positionIds ? positionIds.split(",") : undefined,
       subcompanyIds: subcompanyIds ? subcompanyIds.split(",") : undefined,
-      statuses: statuses ? statuses.split(",") : [],
+      statuses: statuses ? statuses.split(",") : []
     };
     for (let key in queryParams) {
       if (queryParams[key] === "" || queryParams[key] === "0") {
@@ -72,6 +72,10 @@ class CalculateService extends BasicService {
     }
     return this.post(`/api/bs/hrmsalary/salaryacct/acctresult/sum`, queryParams);
   };
+  //合计行
+  getAcctResultsum = async (params: any) => {
+    return this.post(`/api/bs/hrmsalary/salaryacct/acctresult/sum`, params);
+  };
 }
 
 const calculateService = new CalculateService();

src/layouts/BlankLayout/index.tsx

@@ -19,6 +19,12 @@ export default ({ children, style = {} }: any) => {
         width: "100%",
         height: "100%",
         overflow: "hidden",
+        background: (
+          window.location.hash.indexOf("atdTable") !== -1 ||
+          window.location.hash.indexOf("standingbookTable") !== -1 ||
+          window.location.hash.indexOf("previewTable") !== -1 ||
+          window.location.hash.indexOf("calcTable") !== -1
+        ) ? "#f6f6f6" : "#FFF",
         ...style
       }}
     >

src/layouts/config.js

@@ -12,7 +12,9 @@ module.exports = {
     "/rankMapTable.*": "blank",
     "/reportTable.*": "blank",
     "/commonTable.*": "blank",
+    "/calcTable.*": "blank",
     "/payrollFilesTable.*": "blank",
+    "/employeeDeclareTable.*": "blank",
     "/manage.*": "manage",
     "/portal.*": "template",
     "/passport/oauth-in": "blank",

src/lib/CustomIcon/index.tsx

@@ -4,17 +4,17 @@
  *
  */
 
-import * as React from 'react';
+import * as React from "react";
-import { createFromIconfontCN } from '@ant-design/icons';
+import { createFromIconfontCN } from "@ant-design/icons";
-import { Util } from '@/utils';
+import { Util } from "@/utils";
 
 export declare type IconType = React.ReactNode | string;
-
+const hrmSalaryUrl = "/spa/hrmSalary/hrmSalaryCalculateDetail/";
 const Icon = createFromIconfontCN({
   scriptUrl: [
     // @ts-ignore
-    `${Util.getPublicPath()}css/iconfont/iconfont.js`,
+    `${process.env.NODE_ENV === "dev" ? Util.getPublicPath() : hrmSalaryUrl}css/iconfont/iconfont.js`
-  ],
+  ]
 });
 
 /**
@@ -25,36 +25,36 @@ export const buildIcon: (
   type: string,
   icon: IconType,
   style?: React.CSSProperties,
-  className?: string,
+  className?: string
 ) => React.ReactNode | null = function (
   type,
   icon,
   style = {},
-  className = '',
+  className = ""
-  ) {
+) {
-    let comp;
+  let comp;
-    switch (type) {
+  switch (type) {
-      case 'IMAGE':
+    case "IMAGE":
-        comp =
+      comp =
-          typeof icon === 'string' ? (
+        typeof icon === "string" ? (
-            <img
+          <img
-              src={icon}
+            src={icon}
-              className={className}
+            className={className}
-              style={{ width: 16, height: 16, ...style }}
+            style={{ width: 16, height: 16, ...style }}
-            />
+          />
-          ) : (
+        ) : (
-            icon
+          icon
-          );
+        );
-        break;
+      break;
-      default:
+    default:
-        comp =
+      comp =
-          typeof icon === 'string' ? (
+        typeof icon === "string" ? (
-            <Icon type={icon} style={style} className={className} />
+          <Icon type={icon} style={style} className={className}/>
-          ) : (
+        ) : (
-            icon
+          icon
-          );
+        );
-    }
+  }
-    return comp;
+  return comp;
-  };
+};
 
 export default Icon;

src/pages/atdTable/components/index.less

@@ -1,5 +1,7 @@
 //表格样式
 .tableWrapper {
+  background: #fff;
+
   .titleWrapper {
     display: flex;
     align-items: center;
@@ -77,8 +79,83 @@
     }
   }
 
+  .danger {
+    font-size: 12px;
+    color: rgb(217, 0, 27)
+  }
+
+  .expand-th:hover {
+    .toogle-lock-tool {
+      width: 30%;
+    }
+  }
+
+  th.td_odd {
+    background: #fffaf0 !important;
+  }
+
+  .expand-th {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+
+    .title-text {
+      width: 90%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1 1;
+      cursor: pointer;
+    }
+
+    .toogle-lock-tool {
+      display: flex;
+      width: 0;
+      overflow: hidden;
+      height: 100%;
+      justify-content: center;
+      align-items: center;
+
+      & > :first-child {
+        margin-right: 4px;
+      }
+
+      :global {
+        .anticon {
+          color: #5d9cec;
+          cursor: pointer;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  .explain-icon-area {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    .icon-item {
+      display: flex;
+      align-items: center;
+      margin-right: 12px;
+      color: #5d9cec;
+      font-size: 12px;
+
+      :global {
+        .anticon {
+          font-size: 12px;
+          margin-right: 4px;
+        }
+      }
+    }
+  }
+
   :global {
     .ant-btn-link, .ant-dropdown-trigger {
+      padding: 0;
       font-size: 12px;
       color: #333;
     }

src/pages/calcTable/calcExplainFooter.tsx

@@ -0,0 +1,36 @@
+import React, { FunctionComponent } from "react";
+import Icon from "@/lib/CustomIcon";
+import { LockOutlined, UnlockOutlined } from "@ant-design/icons";
+import styles from "@/pages/atdTable/components/index.less";
+
+interface OwnProps {
+  i18n: any;
+}
+
+type Props = OwnProps;
+
+const CalcExplainFooter: FunctionComponent<Props> = (props) => {
+  const { i18n } = props;
+  return (
+    <div className={styles["explain-icon-area"]}>
+      <div className={styles["icon-item"]}>
+        <Icon type="icon-piliangsuoding"/>
+        <span>{i18n["批量锁定"]}</span>
+      </div>
+      <div className={styles["icon-item"]}>
+        <Icon type="icon-piliangjiesuo"/>
+        <span>{i18n["批量解锁"]}</span>
+      </div>
+      <div className={styles["icon-item"]}>
+        <LockOutlined/>
+        <span>{i18n["当前状态锁定，点击解锁"]}</span>
+      </div>
+      <div className={styles["icon-item"]}>
+        <UnlockOutlined/>
+        <span>{i18n["当前状态未锁定，点击锁定"]}</span>
+      </div>
+    </div>
+  );
+};
+
+export default CalcExplainFooter;

src/pages/calcTable/calcFixedTotal.tsx

@@ -0,0 +1,63 @@
+/*
+ * Author: 黎永顺
+ * name: 薪资核算-底部合计行
+ * Description:
+ * Date: 2023/9/18
+ */
+import React, { FunctionComponent, useCallback, useEffect, useMemo, useState } from "react";
+import { Spin, Table, Typography } from "antd";
+import { ColumnType } from "antd/lib/table";
+import API from "@/api";
+
+const { Text } = Typography;
+
+interface OwnProps {
+  columns: ColumnType<any>[];
+  dataSourceUrl: string;
+  payload: any;
+}
+
+type Props = OwnProps;
+
+const calcFixedTotal: FunctionComponent<Props> = (props) => {
+  const [sumRow, setSumRow] = useState<Partial<{}>>({});//薪资核算总计行数据
+  const [loading, setLoading] = useState<boolean>(false);
+  const flattenFn = (source: ColumnType<any>[]) => {
+    let res: ColumnType<any>[] = [];
+    source.forEach((el: any) => {
+      _.isEmpty(el.children) && res.push(el);
+      el.children && res.push(...flattenFn(el.children));
+    });
+    return res;
+  };
+  const columns = useMemo(() => {
+    return !_.isEmpty(props.columns) ? flattenFn(props.columns) : [];
+  }, [props.columns]);
+  const dataSourceUrl = useCallback((payload) => {
+    return API.CalculateService.getAcctResultsum(payload);
+  }, [props.dataSourceUrl]);
+  useEffect(() => {
+    if (!_.isEmpty(props.payload)) {
+      setLoading(true);
+      dataSourceUrl(props.payload).then(({ data }) => {
+        setLoading(false);
+        const { data: result, status } = data;
+        if (status) setSumRow(result.sumRow || {});
+      });
+    }
+  }, [props.payload]);
+  return (<>
+    {
+      _.map(columns, (item: any, index) => {
+        return <Table.Summary.Cell index={index + 1} key={index + 1}>
+          {
+            loading ? <Spin spinning={loading} size="small"></Spin> :
+              <Text type="danger">{sumRow[item.dataIndex] || "-"}</Text>
+          }
+        </Table.Summary.Cell>;
+      })
+    }
+  </>);
+};
+
+export default calcFixedTotal;

src/pages/calcTable/customTableTitle.tsx

@@ -0,0 +1,51 @@
+/*
+ * Author: 黎永顺
+ * name: 自定义薪资核算表格标题
+ * Description:
+ * Date: 2023/9/15
+ */
+import React, { FunctionComponent } from "react";
+import classnames from "classnames";
+import Icon from "@/lib/CustomIcon";
+import styles from "@/pages/atdTable/components/index.less";
+
+interface OwnProps {
+  dataIndex?: string;
+  title?: string;
+  lockStatus?: string;
+  onHandleFormulatd?: any;
+  i18n?: any;
+}
+
+type Props = OwnProps;
+
+const customTableTitle: FunctionComponent<Props> = (props) => {
+  const { dataIndex, title, lockStatus, onHandleFormulatd, i18n = {} } = props;
+
+  const handleToggleSalaryItemVal = (salaryItemId: string, type: string) => {
+    window.parent.postMessage(
+      {
+        type: "turn",
+        payload: { id: "LOCKING", params: { lockType: type, salaryItemId } }
+      },
+      "*"
+    );
+  };
+  return (
+    // th-width-lock
+    <div className={classnames(styles["expand-th"])}>
+      <div className={styles["title-text"]} title={title} onClick={() => onHandleFormulatd(dataIndex)}>{title}</div>
+      {
+        !!lockStatus &&
+        <div className={styles["toogle-lock-tool"]}>
+          <Icon type="icon-piliangsuoding" title={i18n["点击锁定所有解锁的项目值"]}
+                onClick={() => handleToggleSalaryItemVal(dataIndex as string, "LOCK")}/>
+          <Icon type="icon-piliangjiesuo" title={i18n["点击解锁所有锁定的项目值"]}
+                onClick={() => handleToggleSalaryItemVal(dataIndex as string, "UNLOCK")}/>
+        </div>
+      }
+    </div>
+  );
+};
+
+export default customTableTitle;

src/pages/calcTable/index.tsx

@@ -0,0 +1,150 @@
+/*
+ * Author: 黎永顺
+ * name: 薪资核算-列表
+ * Description:
+ * Date: 2023/9/14
+ */
+import React, { FunctionComponent, useEffect, useState } from "react";
+import { Button, Table, Typography } from "antd";
+import { LockOutlined } from "@ant-design/icons";
+import CustomTableTitle from "@/pages/calcTable/customTableTitle";
+import CalcExplainFooter from "@/pages/calcTable/calcExplainFooter";
+import CaclFixedTotal from "./calcFixedTotal";
+import type { ColumnType } from "antd/lib/table";
+import type { PaginationData } from "rc-pagination";
+import { exceptStr, paginationFun } from "@/utils/common";
+import { IPage } from "@/common/types";
+import styles from "@/pages/atdTable/components/index.less";
+
+interface OwnProps {
+}
+
+type Props = OwnProps;
+const { Text } = Typography;
+
+const index: FunctionComponent<Props> = (props) => {
+  const [columns, setColumns] = useState<ColumnType<any>[]>([]);
+  const [dataSource, setDataSource] = useState<any[]>([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+  const [pageInfo, setPageInfo] = useState<Partial<PaginationData>>({});
+  const [i18n, setI18n] = useState<any>({});
+  const [showTotalCell, setShowTotalCell] = useState<boolean>(false);
+  const [sumRowlistUrl, setSumRowlistUrl] = useState<string>("");
+  const [payload, setPayload] = useState<string>("");
+
+  useEffect(() => {
+    window.parent.postMessage({ type: "init" }, "*");
+    window.addEventListener("message", receiveMessageFromIndex, false);
+    return () => {
+      window.removeEventListener("message", receiveMessageFromIndex, false);
+    };
+  }, []);
+  const receiveMessageFromIndex = (event: any) => {
+    const data: any = exceptStr(event.data);
+    if (!_.isEmpty(data)) {
+      const {
+        columns, dataSource, pageInfo, selectedRowKeys, i18n: i18nRes = {},
+        showTotalCell = false, sumRowlistUrl = "", payload = {}
+      } = data;
+      setSumRowlistUrl(sumRowlistUrl);
+      setShowTotalCell(showTotalCell);
+      setI18n(i18nRes);
+      setPayload(payload);
+      setPageInfo(pageInfo);
+      setDataSource(dataSource);
+      setSelectedRowKeys(selectedRowKeys);
+      setColumns([...convertColumns(_.map(columns, o => ({ ...o, i18n: i18nRes }))), {
+        title: i18nRes["操作"], dataIndex: "operate", fixed: "right", width: 120,
+        render: (__, record) => (<Button type="link" onClick={() => handleEdit(record?.id)}>{i18nRes["编辑"]}</Button>)
+      }]);
+    }
+  };
+  const convertColumns: any = (cols: any[]) => {
+    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) => (
+            <span className={styles.contentSpan}>
+              <span title={text} className={styles.contentTitle}>{text}</span>
+              {
+                item.lockStatus === "LOCK" ? <LockOutlined title="锁定的项目值"/> : null
+              }
+            </span>
+          )
+        };
+      }
+    });
+  };
+  const handleFormulaTd = (dataIndex: string) => {
+    window.parent.postMessage(
+      {
+        type: "turn",
+        payload: { id: "FORMULA", params: { dataIndex } }
+      },
+      "*"
+    );
+  };
+  const handleEdit = (id: string) => {
+    window.parent.postMessage(
+      {
+        type: "turn",
+        payload: { id: "EDIT", params: { id } }
+      },
+      "*"
+    );
+  };
+  const sizeChange = (pageobj: IPage) => {
+  };
+  const onChange = (pageobj: IPage) => {
+    setPageInfo(() => {
+      window.parent.postMessage(
+        {
+          type: "turn",
+          payload: { id: "PAGEINFO", params: { ...pageInfo, ...pageobj } }
+        },
+        "*"
+      );
+      return { ...pageInfo, ...pageobj };
+    });
+  };
+  const rowSelection = {
+    columnWidth: 60,
+    selectedRowKeys: selectedRowKeys,
+    onChange: (selectedRowKeys: React.Key[]) => {
+      setSelectedRowKeys(selectedRowKeys);
+      window.parent.postMessage(
+        {
+          type: "turn",
+          payload: { id: "CHECKBOX", params: { selectedRowKeys } }
+        },
+        "*"
+      );
+    }
+  };
+  return (<Table
+    rowKey="id" size="small" bordered className={styles.tableWrapper}
+    columns={columns} dataSource={dataSource} rowSelection={rowSelection}
+    scroll={{ x: 1200, y: `calc(100vh - ${!showTotalCell ? 165 : 200}px)` }}
+    footer={() => <CalcExplainFooter i18n={i18n}/>}
+    pagination={{
+      ...paginationFun(pageInfo, sizeChange, onChange, i18n),
+      size: "default"
+    }}
+    summary={() => (
+      !showTotalCell ? <></> :
+        <Table.Summary 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}/>
+          </Table.Summary.Row>
+        </Table.Summary>
+    )}
+  />);
+};
+
+export default index;

src/pages/employeeDeclareTable/index.tsx

@@ -0,0 +1,116 @@
+import React, { FC, useEffect, useState } from "react";
+import { Button, Space, Table, Tooltip, Typography } from "antd";
+import { ExclamationCircleFilled } from "@ant-design/icons";
+import { exceptStr, paginationFun } from "@/utils/common";
+import { defaultPage, IPage } from "@/common/types";
+import styles from "@/pages/atdTable/components/index.less";
+import cs from "classnames";
+
+const { Text } = Typography;
+const CommonTable: FC = (props) => {
+  const [pageInfo, setPageInfo] = useState<IPage>(defaultPage);
+  const [columns, setColumns] = useState<Array<any>>([]);
+  const [dataSource, setDataSource] = useState<Array<any>>([]);
+  const [selected, setSelected] = useState<Array<string>>([]);
+  const [i18n, setI18n] = useState<Partial<{}>>({});
+
+  useEffect(() => {
+    window.parent.postMessage({ type: "init" }, "*");
+    window.addEventListener("message", receiveMessageFromIndex, false);
+    return () => {
+      window.removeEventListener("message", receiveMessageFromIndex, false);
+    };
+  }, []);
+  const receiveMessageFromIndex = (event: any) => {
+    const data: any = exceptStr(event.data);
+    if (!_.isEmpty(data)) {
+      const { columns, dataSource, pageInfo, i18n, selectedRowKeys, selectedKey } = data;
+      const { current: pageNum, pageSize: size, total } = pageInfo;
+      setDataSource(dataSource);
+      setI18n(i18n);
+      setPageInfo({ pageNum, size, total });
+      setSelected(selectedRowKeys);
+      setColumns([
+        ...columns,
+        {
+          title: i18n["操作"],
+          dataIndex: "operate",
+          fixed: "right",
+          width: 120,
+          render: (_: any, record: any) => {
+            return selectedKey === "list" ? (
+              <Space>
+                <Button type="link" onClick={() => handleEdit(record)}>{i18n["编辑"]}</Button>
+                <Button type="link" onClick={() => handleDelete(record)}>{i18n["删除"]}</Button>
+              </Space>
+            ) : null;
+          }
+        }
+      ]);
+    }
+  };
+  const handleEdit = (record: any) => {
+    window.parent.postMessage({ type: "turn", payload: { id: "EDIT", params: { ...record } } }, "*");
+  };
+  const handleDelete = (record: any) => {
+    window.parent.postMessage({ type: "turn", payload: { id: "DELETE", params: { ...record } } }, "*");
+  };
+  const sizeChange = (pageobj: IPage) => {
+  };
+  const onChange = (pageobj: IPage) => {
+    setPageInfo({ ...pageInfo, ...pageobj });
+    window.parent.postMessage(
+      {
+        type: "turn",
+        payload: { id: "PAGEINFO", params: { ...pageInfo, ...pageobj } }
+      },
+      "*"
+    );
+  };
+  const rowSelection = {
+    selectedRowKeys: selected,
+    columnWidth: 80,
+    onChange: (selectedRowKeys: Array<any>) => {
+      setSelected(selectedRowKeys);
+      window.parent.postMessage(
+        {
+          type: "turn",
+          payload: { id: "ROWSELECT", params: { selectedRowKeys } }
+        },
+        "*"
+      );
+    }
+  };
+  return <Table
+    rowKey="id"
+    rowSelection={rowSelection}
+    className={styles.tableWrapper}
+    columns={_.map(columns, it => {
+      if (it.dataIndex === "declareStatusDesc") {
+        return {
+          ...it,
+          render: (text: string, record: any) => (<Space>
+            <span className={cs({ [styles["danger"]]: record?.declareStatus === "DECLARE_FAIL" })}>{text}</span>
+            {
+              record?.declareErrorMsg &&
+              <Tooltip placement="top" title={record?.declareErrorMsg}>
+                <ExclamationCircleFilled style={{ color: "orange", fontSize: 16 }}/>
+              </Tooltip>
+            }
+          </Space>)
+        };
+      }
+      return { ...it };
+    })}
+    dataSource={dataSource}
+    bordered
+    size="small"
+    scroll={{ x: 1200, y: `calc(100vh - 85px)` }}
+    pagination={{
+      ...paginationFun(pageInfo, sizeChange, onChange, i18n),
+      size: "default"
+    }}
+  />;
+};
+
+export default CommonTable;