diff --git a/pc4mobx/hrmSalary/apis/custom-apis/huitong/index.js b/pc4mobx/hrmSalary/apis/custom-apis/huitong/index.js
index 9e7ebc91..65576a1c 100644
--- a/pc4mobx/hrmSalary/apis/custom-apis/huitong/index.js
+++ b/pc4mobx/hrmSalary/apis/custom-apis/huitong/index.js
@@ -1,10 +1,18 @@
-import { postFetch } from "../../../util/request";
+import { postFetch, postExportFetch } from "../../../util/request";
 
 //汇通建设-薪酬送审数据穿透（分页）
 export const getXcssDataDetail = params => {
   return postFetch("/api/bs/hrmsalary/salaryacct/htjs/xcssDataDetail", params);
 };
-//汇通建设-薪酬送审数据穿透（分页）
+//汇通建设-薪酬支付数据穿透（分页）
 export const getXczfsqDataDetail = params => {
   return postFetch("/api/bs/hrmsalary/salaryacct/htjs/xczfsqDataDetail", params);
 };
+// 汇通建设-薪酬送审数据穿透(导出)
+export const exportXcssDataDetail = (params) => {
+  return postExportFetch("/api/bs/hrmsalary/salaryacct/htjs/exportXcssDataDetail", params);
+};
+// 汇通建设-薪酬支付申请数据穿透导出(导出)
+export const exportXczfsqDataDetail = (params) => {
+  return postExportFetch("/api/bs/hrmsalary/salaryacct/htjs/exportXczfsqDataDetail", params);
+};
diff --git a/pc4mobx/hrmSalary/pages/custom-pages/huitong/dataDetail/conditions.js b/pc4mobx/hrmSalary/pages/custom-pages/huitong/dataDetail/conditions.js
new file mode 100644
index 00000000..c36d75df
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/custom-pages/huitong/dataDetail/conditions.js
@@ -0,0 +1,48 @@
+export const htconditions = [
+  {
+    items: [
+      {
+        conditionType: "INPUT",
+        domkey: ["userName"],
+        fieldcol: 16,
+        label: "姓名",
+        lanId: 25034,
+        labelcol: 8,
+        value: "",
+        viewAttr: 2
+      },
+      {
+        browserConditionParam: {
+          completeParams: {},
+          conditionDataParams: {},
+          dataParams: {},
+          destDataParams: {},
+          hasAddBtn: false,
+          hasAdvanceSerach: false,
+          idSeparator: ",",
+          isAutoComplete: 1,
+          isDetail: 0,
+          isMultCheckbox: false,
+          isSingle: false,
+          icon: "icon-coms-hrm",
+          linkUrl: "",
+          pageSize: 10,
+          quickSearchName: "",
+          replaceDatas: [],
+          title: "",
+          type: "57",
+          viewAttr: 2
+        },
+        conditionType: "BROWSER",
+        domkey: ["departmentIds"],
+        fieldcol: 16,
+        label: "部门",
+        lanId: 27511,
+        labelcol: 8,
+        viewAttr: 2
+      },
+    ],
+    defaultshow: true,
+    title: ""
+  }
+];
diff --git a/pc4mobx/hrmSalary/pages/custom-pages/huitong/dataDetail/index.js b/pc4mobx/hrmSalary/pages/custom-pages/huitong/dataDetail/index.js
index de48ea23..ac29a122 100644
--- a/pc4mobx/hrmSalary/pages/custom-pages/huitong/dataDetail/index.js
+++ b/pc4mobx/hrmSalary/pages/custom-pages/huitong/dataDetail/index.js
@@ -8,48 +8,72 @@
   * @description:
 */
 import React, { Component } from "react";
-import { WeaLocaleProvider, WeaTable, WeaTop } from "ecCom";
+import { inject, observer } from "mobx-react";
+import { WeaLoadingGlobal, WeaLocaleProvider, WeaTable, WeaTop } from "ecCom";
+import { Button } from "antd";
 import * as API from "../../../../apis/custom-apis/huitong";
+import { htconditions } from "./conditions";
+import { getSearchs } from "../../../../util";
 import "./index.less";
 
 const getLabel = WeaLocaleProvider.getLabel;
 const APIFox = {
   submit: API.getXcssDataDetail,
-  payment: API.getXczfsqDataDetail
+  payment: API.getXczfsqDataDetail,
+  submitExp: API.exportXcssDataDetail,
+  paymentExp: API.exportXczfsqDataDetail
 };
 
+@inject("HTStore")
+@observer
 class Index extends Component {
   constructor(props) {
     super(props);
     this.state = {
       pageInfo: { current: 1, pageSize: 10, total: 0 }, loading: false,
-      dataSource: [], columns: []
+      dataSource: [], columns: [], conditions: []
     };
   }
 
   componentDidMount() {
-    this.getXcssDataDetail();
+    this.setState({
+      conditions: _.map(htconditions, item => ({
+        ...item, items: _.map(item.items, o => ({ ...o, label: getLabel(o.lanId, o.label) }))
+      }))
+    }, () => {
+      const { HTStore: { queryForm } } = this.props, { conditions } = this.state;
+      queryForm.initFormFields(conditions);
+      this.getXcssDataDetail();
+    });
   }
 
   getXcssDataDetail = () => {
-    const { pageInfo } = this.state, { params: { type, ...payload } } = this.props;
+    const { pageInfo } = this.state, { params: { type, ...payload }, HTStore: { queryForm } } = this.props;
+    const { departmentIds, ...query } = queryForm.getFormParams();
     this.setState({ loading: true });
-    APIFox[type]({ ...payload, ...pageInfo }).then(({ status, data }) => {
-      this.setState({ loading: false });
-      if (status) {
-        const { pageInfo: pageParams, columns } = data;
-        const { list: dataSource, pageNum: current, pageSize, total } = pageParams;
-        this.setState({
-          dataSource, pageInfo: { ...pageInfo, current, pageSize, total },
-          columns: _.map(columns, o => ({ dataIndex: o.column, title: o.text, width: o.width + "px" }))
-        });
-      }
-    });
+    APIFox[type]({ ...payload, ...pageInfo, ...query, departmentIds: departmentIds ? departmentIds.split(",") : [] })
+      .then(({ status, data }) => {
+        this.setState({ loading: false });
+        if (status) {
+          const { pageInfo: pageParams, columns } = data;
+          const { list: dataSource, pageNum: current, pageSize, total } = pageParams;
+          this.setState({
+            dataSource, pageInfo: { ...pageInfo, current, pageSize, total },
+            columns: _.map(columns, o => ({ dataIndex: o.column, title: o.text, width: o.width + "px" }))
+          });
+        }
+      });
+  };
+  handleExport = () => {
+    const { params: { type, ...payload }, HTStore: { queryForm } } = this.props;
+    WeaLoadingGlobal.start();
+    const promise = APIFox[`${type}Exp`]({ ...payload, ...queryForm.getFormParams() });
+    WeaLoadingGlobal.destroy();
   };
 
   render() {
-    const { dataSource, columns, pageInfo, loading } = this.state;
-    const { params: { type } } = this.props;
+    const { dataSource, columns, pageInfo, loading, conditions } = this.state;
+    const { params: { type }, HTStore: { queryForm } } = this.props;
     const title = type === "submit" ? getLabel(111, "薪酬送审数据") : getLabel(112, "薪酬支付数据");
     const pagination = {
       ...pageInfo,
@@ -66,11 +90,25 @@ class Index extends Component {
     };
     const height = !_.isEmpty(columns) ? document.querySelector(".wea-new-top-content").style.height : "500px";
     return (
-      <WeaTop title={title} icon={<i className="icon-coms-fa"/>} buttons={[]} showDropIcon={false}
-              iconBgcolor="#F14A2D" className="custom_data_huitong">
+      <WeaTop title={title} icon={<i className="icon-coms-fa"/>} showDropIcon={false} iconBgcolor="#F14A2D"
+              className="custom_data_huitong"
+              buttons={[<Button type="primary" onClick={this.handleExport}>{getLabel(111, "导出")}</Button>]}>
         <div className="huitong-body">
+          <div className="ht_query">
+            {
+              getSearchs(queryForm, conditions, 2, false, () => {
+                if (!this.handleDebounce) {
+                  this.handleDebounce = _.debounce(() => {
+                    this.setState({ pageInfo: { ...pageInfo, current: 1 } }, () => this.getXcssDataDetail());
+                    this.handleDebounce = null;
+                  }, 500);
+                }
+                this.handleDebounce();
+              })
+            }
+          </div>
           <WeaTable dataSource={dataSource} columns={columns} loading={loading} bordered pagination={pagination}
-                    scroll={{ x: 1200, y: `calc(${height} - 120px)` }}/>
+                    scroll={{ x: 1200, y: `calc(${height} - 166px)` }}/>
         </div>
       </WeaTop>);
   }
diff --git a/pc4mobx/hrmSalary/pages/custom-pages/huitong/dataDetail/index.less b/pc4mobx/hrmSalary/pages/custom-pages/huitong/dataDetail/index.less
index d5b50733..45ebad16 100644
--- a/pc4mobx/hrmSalary/pages/custom-pages/huitong/dataDetail/index.less
+++ b/pc4mobx/hrmSalary/pages/custom-pages/huitong/dataDetail/index.less
@@ -4,6 +4,22 @@
     padding: 8px 16px 0 16px;
     background: #F6F6F6;
 
+    .ht_query {
+      display: flex;
+      justify-content: flex-end;
+      background: #FFF;
+      margin-bottom: 8px;
+
+      .wea-search-group {
+        padding: 0;
+        flex: .5;
+
+        .wea-content {
+          padding: 0;
+        }
+      }
+    }
+
     .wea-new-table {
       background: #FFF;
     }
diff --git a/pc4mobx/hrmSalary/stores/custom-stores/huitong/index.js b/pc4mobx/hrmSalary/stores/custom-stores/huitong/index.js
new file mode 100644
index 00000000..4db80c64
--- /dev/null
+++ b/pc4mobx/hrmSalary/stores/custom-stores/huitong/index.js
@@ -0,0 +1,6 @@
+import { observable } from "mobx";
+import { WeaForm } from "comsMobx";
+
+export class HTStore {
+  @observable queryForm = new WeaForm();
+}
diff --git a/pc4mobx/hrmSalary/stores/custom-stores/index.js b/pc4mobx/hrmSalary/stores/custom-stores/index.js
index 7be35b6b..a10d7bf9 100644
--- a/pc4mobx/hrmSalary/stores/custom-stores/index.js
+++ b/pc4mobx/hrmSalary/stores/custom-stores/index.js
@@ -1,2 +1,5 @@
+import { HTStore } from "./huitong";
+
 module.exports = {
+  HTStore: new HTStore() //领悦
 };