Merge branch 'feature/V2-薪资档案列表改造' into develop

pc4mobx/hrmSalary/pages/payrollFiles/components/exportMenu.js

@@ -17,11 +17,11 @@ class ExportMenu extends Component {
       case "fixed":
         runStatusList = "FIXED,SUSPEND";
         break;
-      case "SUSPEND":
+      case "suspend":
         runStatusList = _.upperCase(selectedKey);
         break;
       case "stop":
-        runStatusList = 'STOP_FROM_PENDING,STOP_FROM_SUSPEND';
+        runStatusList = "STOP_FROM_PENDING,STOP_FROM_SUSPEND";
         break;
       default:
         break;

pc4mobx/hrmSalary/pages/payrollFiles/index.js

@@ -14,7 +14,6 @@ import {
   WeaFormItem,
   WeaHelpfulTip,
   WeaInput,
-  WeaNewScroll,
   WeaPopoverHrm,
   WeaSearchGroup,
   WeaSelect,
@@ -23,7 +22,7 @@ import {
   WeaTop
 } from "ecCom";
 import { WeaTableNew } from "comsMobx";
-import { Button, Dropdown, Menu, message, Modal, Popover } from "antd";
+import { Button, Dropdown, Menu, message, Modal, Spin } from "antd";
 import ImportMenu from "./components/importMenu";
 import ExportMenu from "./components/exportMenu";
 import AllWithoutPay from "./components/allWithoutPay";
@@ -32,7 +31,6 @@ import SlideModalTitle from "../../components/slideModalTitle";
 import SalaryFileViewSlide from "../salaryFile/saralyFileViewSlide";
 import ChangeSalaryModal from "../salaryFile/changeSalaryModal";
 import "./index.less";
-import UnifiedTable from "../../components/UnifiedTable";
 
 const WeaTableComx = WeaTableNew.WeaTable;
 
@@ -152,8 +150,56 @@ class Index extends Component {
     this.queryTabTotal();
     this.queryList("/api/bs/hrmsalary/salaryArchive/pendingList");
     const init = this.init();
+    window.addEventListener("message", this.handleReceive, false);
   }
 
+  componentWillUnmount() {
+    window.removeEventListener("message", this.handleReceive, false);
+  }
+
+  handleReceive = ({ data }) => {
+    const { payrollFilesStore: { tableStore }, taxAgentStore: { showOperateBtn } } = this.props;
+    const columns = _.map(_.filter(toJS(tableStore.columns), (item) => item.display === "true"), (it, idx) => ({
+      dataIndex: it.dataIndex,
+      width: (it.dataIndex === "username" || it.dataIndex === "operate") ? 120 : it.dataIndex === "taxAgentName" ? 176 : 150,
+      title: it.title, align: "left",
+      fixed: (idx === 0 || idx === 1 || idx === 2) ? "left" : it.dataIndex === "operate" ? "right" : "",
+      ellipsis: true
+    }));
+    const { type, payload: { id, params } = {} } = data;
+    const { dataSource, pageInfo, selectedKey, selectedRowKeys } = this.state;
+    if (type === "init") {
+      this.postMessageToChild({
+        columns, dataSource, showOperateBtn, selectedKey,
+        showSum: false, pageInfo, selectedRowKeys
+      });
+    } else if (type === "turn") {
+      if (id === "PAGEINFO") {
+        const { pageNum: current, size: pageSize } = params;
+        this.setState({ pageInfo: { ...pageInfo, current, pageSize } }, () => this.query());
+      } else if (id === "EDIT") {
+        const { record } = params;
+        this.handleEdit(record);
+      } else if (id === "MOREOPT") {
+        const { id, event: e } = params;
+        this.handleMenuClick(e, id);
+      } else if (id === "CANCELSTOP") {
+        const { id } = params;
+        this.cancelStop(id);
+      } else if (id === "ROWSELECTION") {
+        const { selectedRowKeys } = params;
+        this.setState({ selectedRowKeys });
+      }
+    }
+  };
+  postMessageToChild = (payload) => {
+    const childFrameObj = document.getElementById("atdTable");
+    const { dataSource, columns, showSum, pageInfo, showOperateBtn, selectedKey, selectedRowKeys } = payload;
+    childFrameObj && childFrameObj.contentWindow.postMessage(JSON.stringify({
+      dataSource, columns, showSum, pageInfo, showOperateBtn, selectedKey, selectedRowKeys
+    }), "*");
+  };
+
   init = async () => {
     const { data: archiveStatusList } = await this.commonEnumList({ enumClass: "com.engine.salary.enums.salaryarchive.ArchiveStatusEnum" });
     const { data: userStatusList } = await this.commonEnumList({ enumClass: "com.engine.salary.enums.UserStatusEnum" });
@@ -192,7 +238,7 @@ class Index extends Component {
   };
   queryList = (url) => {
     const { loading, pageInfo, searchItemsValue } = this.state;
-    const { payrollFilesStore: { tableStore, queryList } } = this.props;
+    const { payrollFilesStore: { tableStore, queryList }, taxAgentStore: { showOperateBtn } } = this.props;
     const payload = { ...pageInfo };
     this.setState({
       loading: { ...loading, query: true }
@@ -446,85 +492,18 @@ class Index extends Component {
     return [];
   };
   getColumns = () => {
-    const { selectedKey } = this.state;
     const { payrollFilesStore: { tableStore }, taxAgentStore: { showOperateBtn } } = this.props;
-    let columns = _.filter(toJS(tableStore.columns), (item) => item.display === "true");
-    return _.map([
-      ...columns], item => {
-      if (item.dataIndex === "username") {
-        return {
-          ...item,
-          render: (text, record) => {
-            return <a
-              href={`javaScript:openhrm(${record.employeeId});`}
-              onClick={e => window.pointerXY(e)}
-              className="ellipsis"
-              title={text}
-            >
-              {text}
-            </a>;
-          }
-        };
-      } else if (item.dataIndex === "operate") {
-        return {
-          ...item,
-          render: (text, record) => {
-            if (!showOperateBtn) {
-              return <div className="optWrapper">
-                <a href="javascript:void(0);" onClick={() => this.handleEdit(record)}>查看</a>
-              </div>;
-            } else {
-              if (selectedKey === "pending") {
-                return <div className="optWrapper">
-                  <a href="javascript:void(0);" className="mr10" onClick={() => this.handleEdit(record)}>编辑</a>
-                  <Popover
-                    overlayClassName="moreIconWrapper"
-                    placement="bottomRight"
-                    content={<Menu onClick={(e) => this.handleMenuClick(e, record.id)}>
-                      <Menu.Item key="payroll">设为发薪人员</Menu.Item>
-                      <Menu.Item key="deletePendingTodo">删除待办</Menu.Item>
-                    </Menu>} title="">
-                    <i className="icon-coms-more"/>
-                  </Popover>
-                </div>;
-              } else if (selectedKey === "fixed") {
-                return <a onClick={() => this.handleEdit(record)}>调薪</a>;
-              } else if (selectedKey === "suspend") {
-                return <div className="optWrapper">
-                  <a href="javascript:void(0);" className="mr10" onClick={() => this.handleEdit(record)}>编辑</a>
-                  <Popover
-                    overlayClassName="moreIconWrapper"
-                    placement="bottomRight"
-                    content={<Menu onClick={(e) => this.handleMenuClick(e, record.id)}>
-                      <Menu.Item key="stopSalary">停薪</Menu.Item>
-                      <Menu.Item key="deleteSuspendTodo">删除待办</Menu.Item>
-                    </Menu>} title="">
-                    <i className="icon-coms-more"/>
-                  </Popover>
-                </div>;
-              } else {
-                return <div className="optWrapper">
-                  <a href="javascript:void(0);" className="mr10" onClick={() => this.cancelStop(record.id)}>取消停薪</a>
-                  <Popover
-                    overlayClassName="moreIconWrapper"
-                    placement="bottomRight"
-                    content={<Menu onClick={(e) => this.handleMenuClick(e, record)}>
-                      <Menu.Item key="view">查看</Menu.Item>
-                    </Menu>} title="">
-                    <i className="icon-coms-more"/>
-                  </Popover>
-                </div>;
-              }
-            }
-          }
-        };
-      }
-      return {
-        ...item,
-        render: (text) => {
-          return <span className="ellipsis" title={text}>{text}</span>;
-        }
-      };
+    const columns = _.map(_.filter(toJS(tableStore.columns), (item) => item.display === "true"), (it, idx) => ({
+      dataIndex: it.dataIndex,
+      width: (it.dataIndex === "username" || it.dataIndex === "operate") ? 120 : it.dataIndex === "taxAgentName" ? 176 : 150,
+      title: it.title, align: "left",
+      fixed: (idx === 0 || idx === 1 || idx === 2) ? "left" : it.dataIndex === "operate" ? "right" : "",
+      ellipsis: true
+    }));
+    this.postMessageToChild({
+      columns, showOperateBtn, selectedKey: this.state.selectedKey,
+      dataSource: this.state.dataSource, selectedRowKeys: this.state.selectedRowKeys,
+      showSum: false, pageInfo: this.state.pageInfo
     });
   };
   handleEdit = (record) => {
@@ -600,13 +579,14 @@ class Index extends Component {
         current: 1,
         pageSize: 10
       }
+    }, () => {
+      if (!this.handleChangeDebounce) {
+        this.handleChangeDebounce = _.debounce(() => {
+          this.query();
+        }, 500);
+      }
+      this.handleChangeDebounce();
     });
-    if (!this.handleChangeDebounce) {
-      this.handleChangeDebounce = _.debounce(() => {
-        this.query();
-      }, 500);
-    }
-    this.handleChangeDebounce();
   };
   //编辑保存
   handleSave = () => {
@@ -670,34 +650,13 @@ class Index extends Component {
       tabCount,
       selectedKey,
       loading,
-      dataSource,
       pageInfo,
       showSearchAd,
-      selectedRowKeys,
       slideParams,
       changeSalaryVisible,
       paysetParams
     } = this.state;
     const { payrollFilesStore: { tableStore } } = this.props;
-    const pagination = {
-      current: pageInfo.current,
-      pageSize: pageInfo.pageSize,
-      total: pageInfo.total,
-      showTotal: total => `共 ${total} 条`,
-      showQuickJumper: true,
-      showSizeChanger: true,
-      pageSizeOptions: ["10", "20", "50", "100"],
-      onShowSizeChange: (current, pageSize) => {
-        this.setState({ pageInfo: { ...pageInfo, current, pageSize } }, () => {
-          this.query();
-        });
-      },
-      onChange: current => {
-        this.setState({ pageInfo: { ...pageInfo, current } }, () => {
-          this.query();
-        });
-      }
-    };
     const renderSearch = () => {
       const searchItems = [
         { com: this.Input("姓名", "username") },
@@ -733,10 +692,6 @@ class Index extends Component {
       })}> 重置 </Button>,
       <Button type="ghost" onClick={() => this.setState({ showSearchAd: false })}> 取消 </Button>
     ];
-    const rowSelection = {
-      selectedRowKeys,
-      onChange: (selectedRowKeys) => this.setState({ selectedRowKeys })
-    };
     const rightMenu = [
       {
         key: "BTN_COLUMN",
@@ -791,24 +746,22 @@ class Index extends Component {
             searchsBaseValue={this.state.searchItemsValue.username}
           />
           <div className="tableWrapper">
-            <WeaNewScroll height="100%">
-              <UnifiedTable
-                rowKey="id"
-                loading={loading.query}
-                columns={this.getColumns()}
-                dataSource={dataSource}
-                pagination={pagination}
-                rowSelection={rowSelection}
-                xWidth={this.getColumns().length * 120}
+            <Spin spinning={loading.query}>
+              <iframe
+                style={{ border: 0, width: "100%", height: "100%" }}
+                // src="http://localhost:7607/#/payrollFilesTable"
+                src="/spa/hrmSalary/hrmSalaryCalculateDetail/index.html#/payrollFilesTable"
+                id="atdTable"
               />
-              {/*人员卡片*/}
-              <WeaPopoverHrm/>
-              <WeaTableComx
-                style={{ display: "none" }}
-                comsWeaTableStore={tableStore}
-                needScroll={true}
-              />
-            </WeaNewScroll>
+            </Spin>
+            {/*人员卡片*/}
+            <WeaPopoverHrm/>
+            <WeaTableComx
+              style={{ display: "none" }}
+              comsWeaTableStore={tableStore}
+              needScroll={true}
+              columns={this.getColumns()}
+            />
           </div>
         </WeaTop>
         <div style={{ display: "none" }}>

pc4mobx/hrmSalary/pages/payrollFiles/index.less

@@ -7,6 +7,11 @@
     .tableWrapper {
       flex: 1;
       overflow: hidden;
+      padding: 16px 16px 0 16px;
+
+      .ant-spin-nested-loading, .ant-spin-container {
+        height: 100%;
+      }
     }
   }