diff --git a/pc4mobx/hrmSalary/apis/externalPersonManage.js b/pc4mobx/hrmSalary/apis/externalPersonManage.js
index 91854ebb..0d8bcf67 100644
--- a/pc4mobx/hrmSalary/apis/externalPersonManage.js
+++ b/pc4mobx/hrmSalary/apis/externalPersonManage.js
@@ -21,6 +21,16 @@ export const deleteExtEmp = (params) => {
   return postFetch("/api/bs/hrmsalary/extEmp/delete", params);
 };
 
+//非系统人员-导入预览
+export const extEmpPreview = (params) => {
+  return postFetch("/api/bs/hrmsalary/extEmp/preview", params);
+};
+
+//非系统人员-导入
+export const importExtEmp = (params) => {
+  return postFetch("/api/bs/hrmsalary/extEmp/importExtEmp", params);
+};
+
 //非系统人员-详情
 export const detail = params => {
   return WeaTools.callApi("/api/bs/hrmsalary/extEmp/detail", "get", params);
diff --git a/pc4mobx/hrmSalary/pages/externalPersonManage/components/externalPersonImport.js b/pc4mobx/hrmSalary/pages/externalPersonManage/components/externalPersonImport.js
new file mode 100644
index 00000000..63b630c4
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/externalPersonManage/components/externalPersonImport.js
@@ -0,0 +1,60 @@
+/*
+ * Author: 黎永顺
+ * name: 非系统人员导入
+ * Description:
+ * Date: 2023/8/1
+ */
+import React, { Component } from "react";
+import ImportModal from "../../../components/importModal";
+import { extEmpPreview, importExtEmp } from "../../../apis/externalPersonManage";
+
+class ExternalPersonImport extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      previewDataSource: [],
+      previewColumns: [],
+      importResult: {}
+    };
+  }
+
+  extEmpPreview = (params) => {
+    extEmpPreview(params).then(({ status, data }) => {
+      if (status) {
+        const { headers, list } = data;
+        this.setState({
+          previewColumns: _.map(headers, (it, dataIndex) => ({ title: it, dataIndex })),
+          previewDataSource: _.map(list, item => {
+            return _.reduce(item, (pre, cur, key) => (_.assign(pre, { [key]: cur })), {});
+          })
+        });
+      }
+    });
+  };
+  handleImportFile = (params) => {
+    importExtEmp(params).then(({ status, data }) => {
+      if (status) {
+        this.setState({
+          importResult: data
+        });
+      }
+    });
+  };
+
+  render() {
+    const { previewDataSource, previewColumns, importResult } = this.state;
+    return (
+      <ImportModal
+        isInit={false} {...this.props}
+        columns={previewColumns}
+        slideDataSource={previewDataSource}
+        importResult={importResult}
+        previewImport={this.extEmpPreview}
+        importFile={this.handleImportFile}
+        templateLink={`/api/bs/hrmsalary/extEmp/importtemplate/export`}
+      />
+    );
+  }
+}
+
+export default ExternalPersonImport;
diff --git a/pc4mobx/hrmSalary/pages/externalPersonManage/index.js b/pc4mobx/hrmSalary/pages/externalPersonManage/index.js
index cecd0b15..4ba1ed22 100644
--- a/pc4mobx/hrmSalary/pages/externalPersonManage/index.js
+++ b/pc4mobx/hrmSalary/pages/externalPersonManage/index.js
@@ -8,6 +8,7 @@ import React, { Component } from "react";
 import { inject, observer } from "mobx-react";
 import { WeaHelpfulTip, WeaLocaleProvider, WeaTab, WeaTable, WeaTop } from "ecCom";
 import ExternalPersonManageEditSlide from "./components/externalPersonManageEditSlide";
+import ExternalPersonImport from "./components/externalPersonImport";
 import { Button, message, Modal } from "antd";
 import { getSearchs } from "../../util";
 import { condition, searchCondition } from "./conditions";
@@ -28,6 +29,9 @@ class Index extends Component {
       showSearchAd: false,
       externalPersonManagePayload: {
         visible: false, title: "新建", id: ""
+      },
+      externalPersonImportPayload: {
+        visiable: false, step: 0
       }
     };
   }
@@ -101,7 +105,10 @@ class Index extends Component {
   };
 
   render() {
-    const { showSearchAd, externalPersonManagePayload, loading, pageInfo, selectedRowKeys, dataSource } = this.state;
+    const {
+      showSearchAd, externalPersonManagePayload, loading,
+      pageInfo, selectedRowKeys, dataSource, externalPersonImportPayload
+    } = this.state;
     const {
       externalPersonManageStore: { form, addForm },
       taxAgentStore: { showOperateBtn, showSalaryItemBtn }
@@ -138,7 +145,13 @@ class Index extends Component {
                   title={getLabel(111, "非系统人员，且需要缴纳社保福利以及代发工资的人员，需在本表维护人员信息")}
                   placement="topRight"
                 />,
-                <Button type="ghost">{getLabel(32935, "导入")}</Button>,
+                <Button type="ghost" onClick={() => this.setState({
+                  externalPersonImportPayload: {
+                    ...externalPersonImportPayload,
+                    visiable: true,
+                    step: 0
+                  }
+                })}>{getLabel(32935, "导入")}</Button>,
                 <Button type="primary" onClick={() => this.handleAdd()}>新建</Button>
               ] : [
                 <WeaHelpfulTip
@@ -182,6 +195,32 @@ class Index extends Component {
               showOperateBtn={showOperateBtn || showSalaryItemBtn} form={addForm} condition={condition}
               onCancel={this.handleCancel} {...externalPersonManagePayload}
             />
+            {
+              externalPersonImportPayload.visiable &&
+              <ExternalPersonImport
+                {...externalPersonImportPayload}
+                setStep={(step) => {
+                  this.setState({ externalPersonImportPayload: { ...externalPersonImportPayload, step } });
+                }}
+                onCancel={() => {
+                  this.setState({
+                    externalPersonImportPayload: {
+                      ...externalPersonImportPayload,
+                      visiable: false,
+                      step: 0
+                    }
+                  });
+                }}
+                onFinish={() => {
+                  this.setState({
+                    externalPersonImportPayload: {
+                      ...externalPersonImportPayload,
+                      visiable: false, step: 0
+                    }
+                  }, () => this.listPage());
+                }}
+              />
+            }
           </div>
         </WeaTop>
       </div>