diff --git a/pc4mobx/hrmSalary/apis/payroll.js b/pc4mobx/hrmSalary/apis/payroll.js
index 785c2791..58c2ec3d 100644
--- a/pc4mobx/hrmSalary/apis/payroll.js
+++ b/pc4mobx/hrmSalary/apis/payroll.js
@@ -359,3 +359,7 @@ export const getAvailableSalaryGroupSet = (params) => {
 export const getAvailableSalaryItemSet = (params) => {
   return postFetch("/api/bs/hrmsalary/salaryBill/template/getAvailableSalaryItemSet", params);
 };
+//工资单发放-查看详情页面列表合计行数据
+export const salaryBillSendSum = (params) => {
+  return postFetch("/api/bs/hrmsalary/salaryBill/send/sum", params);
+};
diff --git a/pc4mobx/hrmSalary/pages/payroll/payrollDetail/index.js b/pc4mobx/hrmSalary/pages/payroll/payrollDetail/index.js
index c4edde49..eff26fba 100644
--- a/pc4mobx/hrmSalary/pages/payroll/payrollDetail/index.js
+++ b/pc4mobx/hrmSalary/pages/payroll/payrollDetail/index.js
@@ -1,12 +1,13 @@
 import React from "react";
 import { inject, observer } from "mobx-react";
-import { toJS } from "mobx";
-import { WeaHelpfulTip, WeaTab, WeaTop } from "ecCom";
-import { Button, Menu } from "antd";
-import "./index.less";
+import { WeaHelpfulTip, WeaTab } from "ecCom";
+import { Button, Spin } from "antd";
 import { getQueryString } from "../../../util/url";
+import { removePropertyCondition } from "../../../util/response";
 import { getSearchs } from "../../../util";
-import CustomPaginationTable from "../../../components/customPaginationTable";
+import { getPayrollDetailList, getPayrollDetailSa, getPayrollInfo, salaryBillSendSum } from "../../../apis/payroll";
+import { sysConfCodeRule } from "../../../apis/ruleconfig";
+import "./index.less";
 
 @inject("payrollStore")
 @observer
@@ -14,226 +15,189 @@ export default class PayrollDetail extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      currentId: "",
-      current: 1
+      salarySendDetailBaseInfo: {}, loading: false,
+      condition: [], dataSource: [], columns: [],
+      pageInfo: { current: 1, pageSize: 10, total: 0 },
+      salaryBillSendSum: {}, showSum: false
     };
-    this.pageInfo = { current: 1, pageSize: 10 };
   }
 
-  componentWillMount() {
-    let id = getQueryString("id");
-    this.setState({ currentId: id });
-    const { payrollStore: { getPayrollInfo, getPayrollDetailList, getPayrollDetailSa } } = this.props;
-    getPayrollInfo(id);
-    getPayrollDetailList({ salarySendId: id });
-    getPayrollDetailSa();
+  componentDidMount() {
+    this.getPayrollInfo();
+    this.getPayrollDetailSa();
+    this.getPayrollDetailList();
+    window.addEventListener("message", this.handleReceiveMessage, false);
   }
 
-  // 撤回
-  handleWithdraw(record) {
-    const { payrollStore } = this.props;
-    const { withdrawPayroll, getInfoList } = payrollStore;
-    withdrawPayroll({
-      ids: [record.id],
-      salarySendId: this.state.currentId
-    }).then(() => {
-      getInfoList({
-        salarySendId: this.state.currentId
-      });
-    });
+  componentWillUnmount() {
+    window.removeEventListener("message", this.handleReceiveMessage, false);
   }
 
-  // 发送
-  handleGrant(record) {
-    const { payrollStore } = this.props;
-    const { grantPayroll, getInfoList } = payrollStore;
-    grantPayroll({
-      ids: [record.id],
-      salarySendId: this.state.currentId
-    }).then(() => {
-      getInfoList({
-        salarySendId: this.state.currentId
-      });
-    });
-  }
-
-  getColumns() {
-    const { payrollStore } = this.props;
-    const { salarySendDetailTableStore } = payrollStore;
-    const { columns } = salarySendDetailTableStore;
-    if (!columns) {
-      return [];
-    }
-    let result = columns.filter(item => item.hide == "false").map(item => {
-      item = { ...item };
-      if (item.dataIndex == "operation") {
-        item.render = (text, record) => {
-          if (text == "ALREADYSEND") {
-            return (
-              <a onClick={() => {
-                this.handleWithdraw(record);
-              }}>撤回</a>
-            );
-          } else {
-            return (
-              <a onClick={() => {
-                this.handleGrant(record);
-              }}>发送</a>
-            );
+  handleReceiveMessage = async ({ data }) => {
+    const { dataSource, columns, pageInfo } = this.state;
+    const childFrameObj = document.getElementById("atdTable");
+    const { type, payload } = data;
+    if (type === "turn") {
+      const { id, params: { size: pageSize, pageNum: current, total } } = payload;
+      if (id && id === "PAGEINFO") {
+        this.setState({
+          pageInfo: {
+            ...pageInfo,
+            current,
+            pageSize,
+            total
           }
-        };
+        }, () => this.getPayrollDetailList({ child: id }));
+      }
+    }
+    if (type === "init") {
+      const { status, data: sysData } = await this.sysConfCodeRule();
+      const { data: { sumRow } } = await this.salaryBillSendSum();
+      const salaryBillSendSum = _.reduce(_.keys(sumRow), (pre, cur) => (_.assign(pre, { [`${cur}_salaryItem`]: sumRow[cur] })), {});
+      this.setState({ showSum: status && sysData === "1", salaryBillSendSum });
+      childFrameObj.contentWindow.postMessage(JSON.stringify({
+        dataSource,
+        columns,
+        pageInfo,
+        showSum: status && sysData === "1",
+        salaryBillSendSum
+      }), "*");
+    }
+  };
+  getPayrollInfo = () => {
+    const id = getQueryString("id");
+    getPayrollInfo({ id }).then(({ status, data }) => {
+      if (status) {
+        this.setState({ salarySendDetailBaseInfo: data });
       }
-      return item;
     });
-    return result;
-  }
-
-  // 导出所选
-  handleExportSelected() {
-
-  }
-
-  // 导出全部
+  };
+  getPayrollDetailSa = () => {
+    const { payrollStore } = this.props;
+    const { detailListConditionForm } = payrollStore;
+    getPayrollDetailSa().then(({ status, data }) => {
+      if (status) {
+        const condition = removePropertyCondition(data.condition);
+        this.setState({ condition }, () => {
+          detailListConditionForm.initFormFields(this.state.condition);
+        });
+      }
+    });
+  };
+  getPayrollDetailList = (extra = {}) => {
+    const childFrameObj = document.getElementById("atdTable");
+    const { pageInfo } = this.state;
+    const { child, ...extraParams } = extra;
+    const salarySendId = getQueryString("id");
+    const { payrollStore } = this.props;
+    const { detailListConditionForm: form } = payrollStore;
+    const payload = { salarySendId, ...pageInfo, ...extraParams, ...form.getFormParams() };
+    this.setState({ loading: true });
+    getPayrollDetailList(payload).then(({ status, data }) => {
+      this.setState({ loading: false });
+      if (status) {
+        const { columns, datas: dataSource, pageInfo: pages } = data;
+        const { pageNum: current, pageSize, total } = pages;
+        this.setState({
+          dataSource,
+          columns: _.map(columns, (item, index) => ({
+            dataIndex: item.column, title: item.text, width: item.width,
+            fixed: index <= 2 ? "left" : null
+          })),
+          pageInfo: { ...pageInfo, current, pageSize, total }
+        }, () => {
+          const { pageInfo, dataSource, columns, salaryBillSendSum, showSum } = this.state;
+          child === "PAGEINFO" &&
+          childFrameObj.contentWindow.postMessage(JSON.stringify({
+            dataSource,
+            columns,
+            pageInfo, showSum,
+            salaryBillSendSum
+          }), "*");
+        });
+      }
+    }).catch(() => this.setState({ loading: false }));
+  };
+  salaryBillSendSum = () => {
+    const salarySendId = getQueryString("id");
+    return salaryBillSendSum({ salarySendId });
+  };
+  sysConfCodeRule = () => {
+    return sysConfCodeRule({ code: "OPEN_ACCT_RESULT_SUM" });
+  };
   handleExportAll = () => {
-    // const { payrollStore } = this.props;
-    // const { exportDetailList } = payrollStore
-    // exportDetailList({salarySendId: this.state.currentId})
-    const url = `${window.location.origin}/api/bs/hrmsalary/salaryBill/send/exportDetailList?salarySendId=${this.state.currentId}`;
+    const salarySendId = getQueryString("id");
+    const url = `${window.location.origin}/api/bs/hrmsalary/salaryBill/send/exportDetailList?salarySendId=${salarySendId}`;
     window.open(url, "_self");
   };
-
-  getSearchsAdQuick() {
-    const handleMenuClick = (e) => {
-      switch (e.key) {
-        case "1":
-          this.handleExportSelected();
-          break;
-      }
-    };
-    const menu = (
-      <Menu onClick={handleMenuClick}>
-        <Menu.Item key="1">导出所选</Menu.Item>
-      </Menu>
-    );
-    return (
-      // <Dropdown.Button type="primary" style={{marginRight: "10px"}} overlay={menu} onClick={() => {this.handleExportAll()}}>导出全部</Dropdown.Button>
-      <Button type="primary" onClick={this.handleExportAll}>导出全部</Button>
-    );
-    // return (<div></div>)
-  }
-
-
-  // 分页
-  handleDataPageChange(value) {
-    const { payrollStore: { getPayrollInfo, getPayrollDetailList, getPayrollDetailSa } } = this.props;
-    getPayrollDetailList({ salarySendId: this.state.currentId, ...this.pageInfo });
-  }
-
-
-  handleShowSizeChange(pageInfo) {
-    const { payrollStore: { getPayrollInfo, getPayrollDetailList, getPayrollDetailSa } } = this.props;
-    getPayrollDetailList({ salarySendId: this.state.currentId, ...pageInfo });
-  }
-
-  handleSearch=()=> {
-    const { payrollStore: { getPayrollDetailList, setDetailListShowSearchAd } } = this.props;
-    setDetailListShowSearchAd(false);
-    getPayrollDetailList({ salarySendId: this.state.currentId, ...this.pageInfo });
-  }
+  handleSearch = () => this.getPayrollDetailList({ child: "PAGEINFO", current: 1 });
 
   render() {
+    const { salarySendDetailBaseInfo, condition, loading } = this.state;
     const { payrollStore } = this.props;
-    const {
-      setDetailListShowSearchAd,
-      detailListShowSearchAd,
-      getPayrollDetailList,
-      detailListCondition,
-      detailListConditionForm,
-      salarySendDetailBaseInfo,
-      salarySendDetailTableStore,
-      salarySendDetailDataSource,
-      salarySendDetailPageInfo
-    } = payrollStore;
+    const { setDetailListShowSearchAd, detailListShowSearchAd, detailListConditionForm } = payrollStore;
+    const { salaryMonth, template, sendNum, sendTotal } = salarySendDetailBaseInfo;
     const adBtn = [
-      // 高级搜索内部按钮
-      <Button type="primary" onClick={()=>this.handleSearch()}>
-        搜索
-      </Button>,
-      <Button type="ghost" onClick={() => detailListConditionForm.resetForm()}>
-        重置
-      </Button>,
-      <Button type="ghost" onClick={() => setDetailListShowSearchAd(false)}>
-        取消
-      </Button>
+      <Button type="primary" onClick={this.handleSearch}>搜索</Button>,
+      <Button type="ghost" onClick={() => detailListConditionForm.resetForm()}>重置</Button>,
+      <Button type="ghost" onClick={() => setDetailListShowSearchAd(false)}>取消</Button>
     ];
     return (
       <div className="payrollGrant">
-        <WeaTop
-          title="工资单发放" // 文字
-          icon={<i className="icon-coms-fa"/>} // 左侧图标
-          iconBgcolor="#F14A2D" // 左侧图标背景色
-          showDropIcon={true} // 是否显示下拉按钮
-          buttons={[this.getSearchsAdQuick()]}
-        ></WeaTop>
         <WeaTab
-          searchType={["base", "advanced"]} // base：基础搜索框 advanced：显示高级搜索按钮
-          searchsBasePlaceHolder="请输入姓名"
-          showSearchAd={detailListShowSearchAd} // 是否展开高级搜索面板
-          setShowSearchAd={bool => setDetailListShowSearchAd(bool)} //高级搜索面板受控
-          searchsAd={getSearchs(detailListConditionForm, toJS(detailListCondition), 2)} // 高级搜索内部数据
-          buttonsAd={adBtn} // 高级搜索内部按钮
-          onSearch={() => {
-            this.handleSearch();
-          }} // 点搜索按钮时的回调
-          // searchsAdQuick={this.getSearchsAdQuick()}
-          onSearchChange={v => detailListConditionForm.updateFields({ username: v })} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值
-          searchsBaseValue={detailListConditionForm.getFormParams().username} // 外部input搜索值受控: 这里和高级搜索的requestname同步
+          searchType={["base", "advanced"]} searchsBasePlaceHolder="请输入姓名"
+          buttons={[<Button type="primary" onClick={this.handleExportAll}>导出全部</Button>]}
+          showSearchAd={detailListShowSearchAd} setShowSearchAd={bool => setDetailListShowSearchAd(bool)}
+          searchsAd={getSearchs(detailListConditionForm, condition, 2)}
+          buttonsAd={adBtn} onSearch={this.handleSearch}
+          onSearchChange={v => detailListConditionForm.updateFields({ username: v })}
+          searchsBaseValue={detailListConditionForm.getFormParams().username}
         />
         <div className="titleBar">
           <div className="titleBarLeft">
-            <span>薪资所属月：{salarySendDetailBaseInfo.salaryMonth}</span>
+            <span>薪资所属月：{salaryMonth}</span>
             <WeaHelpfulTip
               style={{ marginLeft: "10px", marginRight: "10px" }}
               width={200}
-              title={`薪资周期\n
-                            ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle.fromDate}至 ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle.endDate}\n
-                            税款所属期\n
-                            ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.taxCycle}\n
-                            考勤取值周期\n
-                            ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle.fromDate}至${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle.endDate}\n
-                            福利台账月份\n
-                            引用${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.socialSecurityCycle}的福利台账数据`}
+              title={<PayrollTips salarySendDetailBaseInfo={salarySendDetailBaseInfo}/>}
               placement="topLeft"
             />
-            <span>工资单模板：{salarySendDetailBaseInfo.template}</span>
+            <span>工资单模板：{template}</span>
           </div>
 
           <div className="titleBarRight">
-            <span>已发放：{salarySendDetailBaseInfo.sendNum}/<span
-              style={{ color: "red" }}>{salarySendDetailBaseInfo.sendTotal}</span></span>
+            <span>已发放：{sendNum}/<span style={{ color: "red" }}>{sendTotal}</span></span>
           </div>
         </div>
 
         <div className="tableWrapper">
-
-          <CustomPaginationTable
-            dataSource={salarySendDetailDataSource}
-            columns={this.getColumns()}
-            scroll={{ x: this.getColumns().length * 150, y: `calc(100vh - 240px)` }}
-            total={salarySendDetailPageInfo.total}
-            current={salarySendDetailPageInfo.pageNum}
-            pageSize={this.pageInfo.pageSize}
-            onPageChange={(value) => {
-              this.pageInfo.current = value;
-              this.handleDataPageChange(value);
-            }}
-            onShowSizeChange={(current, pageSize) => {
-              this.pageInfo = { current, pageSize };
-              this.handleShowSizeChange(this.pageInfo);
-            }}
-          />
+          <Spin spinning={loading}>
+            <iframe
+              style={{ border: 0, width: "100%", height: "100%" }}
+              // src="http://localhost:7607/#/previewTable"
+              src="/spa/hrmSalary/hrmSalaryCalculateDetail/index.html#/previewTable"
+              id="atdTable"
+            />
+          </Spin>
         </div>
       </div>
     );
   }
 }
+
+export const PayrollTips = (props) => {
+  const { salarySendDetailBaseInfo = {} } = props;
+  const { salarySobCycle: { salaryCycle, taxCycle, attendCycle, socialSecurityCycle } } = salarySendDetailBaseInfo;
+  const { fromDate, endDate } = salaryCycle;
+  const { fromDate: aFromDate, endDate: aEndDate } = attendCycle;
+  return <div>
+    <div>薪资周期</div>
+    <div><span>{fromDate}</span><span>至</span><span>{endDate}</span></div>
+    <div>税款所属期</div>
+    <div>{taxCycle}</div>
+    <div>考勤取值周期</div>
+    <div><span>{aFromDate}</span><span>至</span><span>{aEndDate}</span></div>
+    <div>福利台账月份</div>
+    <div>{`引用的${socialSecurityCycle}福利台账数据`}</div>
+  </div>;
+};
diff --git a/pc4mobx/hrmSalary/pages/payroll/payrollDetail/index.less b/pc4mobx/hrmSalary/pages/payroll/payrollDetail/index.less
index bdc41900..9bb70233 100644
--- a/pc4mobx/hrmSalary/pages/payroll/payrollDetail/index.less
+++ b/pc4mobx/hrmSalary/pages/payroll/payrollDetail/index.less
@@ -1,4 +1,8 @@
 .payrollGrant {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
   .titleBar {
     height: 47px;
     line-height: 47px;
@@ -12,4 +16,12 @@
       float: right;
     }
   }
+
+  .tableWrapper {
+    flex: 1;
+
+    .ant-spin-nested-loading, .ant-spin-container {
+      height: 100%;
+    }
+  }
 }