diff --git a/pc4mobx/hrmSalary/index.js b/pc4mobx/hrmSalary/index.js
index 366de6cc..13e2be4c 100644
--- a/pc4mobx/hrmSalary/index.js
+++ b/pc4mobx/hrmSalary/index.js
@@ -3,7 +3,8 @@ import Route from "react-router/lib/Route";
 import { WeaLocaleProvider } from "ecCom";
 import MySalary from "./pages/mySalary";
 import Programme from "./pages/socialSecurityBenefits/programme";
-import Archives from "./pages/socialSecurityBenefits/archives";
+import Archivess from "./pages/socialSecurityBenefits/archives";
+import Archives from "./pages/socialSecurityBenefits/welfareArchive"; //社保福利档案重构页面
 import StandingBook from "./pages/socialSecurityBenefits/standingBook";
 import StandingBookDetail from "./pages/socialSecurityBenefits/standingBookDetail";
 import StandingBookOfflineComparison from "./pages/socialSecurityBenefits/standingBookOfflineComparison";
@@ -114,6 +115,7 @@ const Routes = (
       component={SocialSecurityBenefits}>
       <Route key="programme" path="programme" component={Programme}/>
       <Route key="archives" path="archives" component={Archives}/>
+      <Route key="archives_demo" path="archives_demo" component={Archivess}/>
       <Route key="standingBook" path="standingBook" component={StandingBook}/>
       <Route
         key="standingBookDetail"
diff --git a/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/components/advanceInputBtn/index.js b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/components/advanceInputBtn/index.js
new file mode 100644
index 00000000..ab1efc11
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/components/advanceInputBtn/index.js
@@ -0,0 +1,33 @@
+/*
+ * Author: 黎永顺
+ * name: 社保福利档案页面重构-高级搜索
+ * Description:
+ * Date: 2023/10/31
+ */
+import React, { Component } from "react";
+import { inject, observer } from "mobx-react";
+import { Button } from "antd";
+import { WeaInputSearch, WeaLocaleProvider } from "ecCom";
+import "./index.less";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+@inject("archivesStore")
+@observer
+class Index extends Component {
+  render() {
+    const { archivesStore: { welfareForm } } = this.props;
+    return (
+      <div className="achrive-advance-search">
+        <WeaInputSearch value={welfareForm.getFormParams().username}
+                        onChange={v => welfareForm.updateFields({ username: v })}
+                        onSearch={this.props.onAdvanceSearch}
+        />
+        <Button type="ghost" className="wea-advanced-search text-elli"
+                onClick={this.props.onOpenAdvanceSearch}>{getLabel(111, "高级搜索")}</Button>
+      </div>
+    );
+  }
+}
+
+export default Index;
diff --git a/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/components/advanceInputBtn/index.less b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/components/advanceInputBtn/index.less
new file mode 100644
index 00000000..9081d39f
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/components/advanceInputBtn/index.less
@@ -0,0 +1,29 @@
+.achrive-advance-search {
+  display: flex;
+  align-items: center;
+  position: relative;
+  top: -1.5px;
+
+  .wea-advanced-search {
+    top: 2px;
+    left: -1px;
+    height: 28px;
+    line-height: 1;
+    border-radius: 0;
+    position: relative;
+    color: #474747;
+    padding: 4px 15px;
+  }
+
+  .wea-advanced-search:hover {
+    border: 1px solid #dadada;
+    color: #474747;
+  }
+
+  .text-elli {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    top: 1px;
+  }
+}
diff --git a/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/components/welfareAdvanceSearchPannel/index.js b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/components/welfareAdvanceSearchPannel/index.js
new file mode 100644
index 00000000..11fb3505
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/components/welfareAdvanceSearchPannel/index.js
@@ -0,0 +1,66 @@
+/*
+ * Author: 黎永顺
+ * name: 社保福利档案页面重构-高级搜索面板
+ * Description:
+ * Date: 2023/10/31
+ */
+import React, { Component } from "react";
+import { WeaLocaleProvider } from "ecCom";
+import { Button } from "antd";
+import { inject, observer } from "mobx-react";
+import { getSaCondition } from "../../../../../apis/archive";
+import { getSearchs } from "../../../../../util";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+@inject("archivesStore")
+@observer
+class WelfareAdvanceSearchPannel extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchConditions: []
+    };
+  }
+
+  componentDidMount() {
+    getSaCondition().then(({ status, data }) => {
+      if (status) {
+        this.setState({
+          searchConditions: data.condition
+        }, () => {
+          const { archivesStore: { welfareForm } } = this.props;
+          welfareForm.initFormFields(this.state.searchConditions);
+        });
+      }
+    });
+  }
+
+  render() {
+    const { searchConditions } = this.state;
+    const { archivesStore: { welfareForm } } = this.props;
+    return (
+      <React.Fragment>
+        <div className="wea-advanced-searchsAd">
+          {getSearchs(welfareForm, searchConditions, 2, false)}
+        </div>
+        <div className="wea-search-buttons">
+          <div style={{ textAlign: "center" }}>
+            <span style={{ marginLeft: 15 }}>
+              <Button type="primary" onClick={this.props.onAdSearch}>{getLabel(388113, "搜索")}</Button>
+            </span>
+            <span style={{ marginLeft: 15 }}>
+              <Button type="ghost" onClick={() => welfareForm.resetForm()}>{getLabel(2022, "重置")}</Button>
+            </span>
+            <span style={{ marginLeft: 15 }}>
+              <Button type="ghost" onClick={this.props.onCancel}>{getLabel(31129, "取消")}</Button>
+            </span>
+          </div>
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+export default WelfareAdvanceSearchPannel;
+
diff --git a/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/components/welfareTableList/index.js b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/components/welfareTableList/index.js
new file mode 100644
index 00000000..a24c4383
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/components/welfareTableList/index.js
@@ -0,0 +1,104 @@
+/*
+ * Author: 黎永顺
+ * name:社保福利档案页面重构-列表
+ * Description:
+ * Date: 2023/10/31
+ */
+import React, { Component } from "react";
+import { WeaLocaleProvider, WeaTable } from "ecCom";
+import { inject, observer } from "mobx-react";
+import { getExtTable, queryList } from "../../../../../apis/welfareArchive";
+
+const getLabel = WeaLocaleProvider.getLabel;
+const APILIST = {
+  runStatuses: queryList,
+  ext: getExtTable
+};
+
+@inject("archivesStore")
+@observer
+class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataSource: [], columns: [], loading: false, pageInfo: { current: 0, pageSize: 10, total: 0 },
+      selectedRowKeys: []
+    };
+  }
+
+  componentDidMount() {
+    this.getWelfareList(this.props);
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if ((nextProps.runStatuses !== this.props.runStatuses) || (nextProps.isQuery !== this.props.isQuery)) this.getWelfareList(nextProps);
+  }
+
+  getWelfareList = (props) => {
+    const { pageInfo } = this.state;
+    const { archivesStore: { welfareForm }, runStatuses, onChangeTopTabCount } = props;
+    const params = { ...pageInfo, ...welfareForm.getFormParams() };
+    const payload = runStatuses === "ext" ? { ...params, extWelArchiveList: true } : {
+      ...params,
+      runStatuses: runStatuses.split(",")
+    };
+    this.setState({ loading: true });
+    APILIST[runStatuses === "ext" ? "ext" : "runStatuses"](payload).then(({ status, data }) => {
+      this.setState({ loading: false });
+      if (status) {
+        const { columns, datas: dataSource, pageInfo: { pageNum: current, pageSize, total } } = data;
+        this.setState({
+          pageInfo: { ...pageInfo, current, pageSize, total }, dataSource,
+          columns: _.map(columns, o => {
+            const { column: dataIndex, text: title, width } = o;
+            if (dataIndex === "employeeName") {
+              return {
+                dataIndex, title, width, fixed: "left",
+                render: (txt) => (<span title={txt}>{txt}</span>)
+              };
+            } else {
+              return {
+                dataIndex, title, width,
+                render: (txt) => (<span title={txt}>{txt}</span>)
+              };
+            }
+          })
+        }, () => onChangeTopTabCount(runStatuses, total));
+      }
+    }).catch(() => this.setState({ loading: false }));
+  };
+
+  render() {
+    const { dataSource, columns, loading, pageInfo, selectedRowKeys } = this.state;
+    console.log(columns);
+    const pagination = {
+      ...pageInfo,
+      showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
+      showQuickJumper: true,
+      showSizeChanger: true,
+      pageSizeOptions: ["10", "20", "50", "100"],
+      onShowSizeChange: (current, pageSize) => {
+        this.setState({
+          pageInfo: { ...pageInfo, current, pageSize }
+        }, () => this.getWelfareList(this.props));
+      },
+      onChange: current => {
+        this.setState({
+          pageInfo: { ...pageInfo, current }
+        }, () => this.getWelfareList(this.props));
+      }
+    };
+    const rowSelection = {
+      selectedRowKeys,
+      onChange: (selectedRowKeys) => this.setState({ selectedRowKeys })
+    };
+    return (
+      <WeaTable
+        rowKey="employeeId" dataSource={dataSource} pagination={pagination} loading={loading}
+        columns={columns} rowSelection={rowSelection} scroll={{ x: 1200, y: `calc(100vh - 220px)` }}
+      />
+    );
+  }
+}
+
+export default Index;
diff --git a/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/components/welfareTip/index.js b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/components/welfareTip/index.js
new file mode 100644
index 00000000..12ef7f84
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/components/welfareTip/index.js
@@ -0,0 +1,22 @@
+/*
+ * Author: 黎永顺
+ * name:社保福利档案页面重构-小提示
+ * Description:
+ * Date: 2023/10/31
+ */
+import React, { Component } from "react";
+import { WeaLocaleProvider } from "ecCom";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class Index extends Component {
+  render() {
+    return (
+      <div>
+
+      </div>
+    );
+  }
+}
+
+export default Index;
diff --git a/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/config.js b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/config.js
new file mode 100644
index 00000000..7588fb29
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/config.js
@@ -0,0 +1,7 @@
+export const tabList = [
+  { viewcondition: "1", lanId: 542711, title: "待增员", showcount: true, groupid: "stayAdd" },
+  { viewcondition: "2,3", lanId: 542504, title: "在缴员工", showcount: true, groupid: "paying" },
+  { viewcondition: "3", lanId: 542713, title: "待减员", showcount: true, groupid: "stayDel" },
+  { viewcondition: "4,5", lanId: 542505, title: "停缴员工", showcount: true, groupid: "stopPay" },
+  { viewcondition: "ext", lanId: 542679, title: "非系统人员", showcount: true, groupid: "ext" }
+];
diff --git a/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/index.js b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/index.js
new file mode 100644
index 00000000..3dc5058a
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/index.js
@@ -0,0 +1,104 @@
+/*
+ * Author: 黎永顺
+ * name: 社保福利档案页面重构
+ * Description:
+ * Date: 2023/10/31
+ */
+import React, { Component } from "react";
+import { WeaHelpfulTip, WeaLocaleProvider, WeaReqTop, WeaTab } from "ecCom";
+import { inject, observer } from "mobx-react";
+import AdvanceInputBtn from "./components/advanceInputBtn";
+import WelfareAdvanceSearchPannel from "./components/welfareAdvanceSearchPannel";
+import WelfareTableList from "./components/welfareTableList";
+import { queryInsuranceTabTotal } from "../../../apis/welfareArchive";
+import { Button } from "antd";
+import cs from "classnames";
+import { tabList } from "./config";
+import "./index.less";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+@inject("taxAgentStore")
+@observer
+class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedKey: "1", showSearchAd: false, isQuery: false,
+      topTabCount: { stayAdd: 0, paying: 0, stayDel: 0, stopPay: 0, ext: 0 }
+    };
+  }
+
+  queryInsuranceTabTotal = (active, total) => {
+    queryInsuranceTabTotal().then(({ status, data }) => {
+      if (status) {
+        const key = _.find(tabList, o => o.viewcondition === active).groupid;
+        this.setState({
+          topTabCount: { ...this.state.topTabCount, ...data, [key]: total }
+        });
+      }
+    });
+  };
+  renderReqBtns = () => {
+    const { selectedKey } = this.state;
+    let reqBtns = [
+      <Button type="primary">{getLabel(32935, "导入")}</Button>,
+      <AdvanceInputBtn onOpenAdvanceSearch={() => this.setState({ showSearchAd: true })}
+                       onAdvanceSearch={() => this.setState({ isQuery: !this.state.isQuery })}
+      />
+    ];
+    switch (selectedKey) {
+      case "1":
+        reqBtns.unshift(<WeaHelpfulTip
+          width={300} placement="topLeft"
+          title={
+            <span>
+              {getLabel(544348, "提示：缴纳月份区间包含起始缴纳月，不包含最后缴纳月； 若员工离职时还未增员进入在缴员工，则数据会自动清除，因此若确认缴纳，请及时维护档案数据并增员操作。若清除后还需缴纳，需先在个税扣缴义务人菜单将员工按离职状态添加回来，会重新出现在待增员。")}
+            </span>
+          }
+        />);
+        break;
+      default:
+        break;
+    }
+    return reqBtns;
+  };
+  onAdSearch = () => this.setState({ showSearchAd: false, isQuery: !this.state.isQuery });
+
+  render() {
+    const { selectedKey, topTabCount, showSearchAd, isQuery } = this.state;
+    const { taxAgentStore: { showOperateBtn } } = this.props;
+    return (
+      <div className="salary-welfare-archive">
+        <WeaReqTop
+          title={getLabel(538001, "社保福利档案")} buttonSpace={10} icon={<i className="icon-coms-fa"/>}
+          iconBgcolor="#F14A2D" buttons={this.renderReqBtns()} showDropIcon
+          replaceTab={
+            <WeaTab
+              datas={_.map(tabList, o => ({ ...o, title: getLabel(o.lanId, o.title) }))} autoCalculateWidth
+              keyParam="viewcondition" selectedKey={selectedKey} counts={topTabCount} countParam="groupid"
+              onChange={key => this.setState({ selectedKey: key })}
+            />
+          }
+        >
+          <div className="salary-welfare-archive-content">
+            <div
+              className={cs("searchAdvanced-condition-container", { "searchAdvanced-condition-hide": !showSearchAd })}>
+              <WelfareAdvanceSearchPannel
+                onCancel={() => this.setState({ showSearchAd: false })}
+                onAdSearch={this.onAdSearch}
+              />
+            </div>
+            {/*列表*/}
+            <WelfareTableList isQuery={isQuery} showOperateBtn={showOperateBtn}
+                              runStatuses={selectedKey}
+                              onChangeTopTabCount={this.queryInsuranceTabTotal}
+            />
+          </div>
+        </WeaReqTop>
+      </div>
+    );
+  }
+}
+
+export default Index;
diff --git a/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/index.less b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/index.less
new file mode 100644
index 00000000..35e4ca7f
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/index.less
@@ -0,0 +1,77 @@
+.salary-welfare-archive {
+  min-width: 1000px;
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+  background: #f6f6f6;
+
+  .wea-new-top-req-title > div:first-child > div > div {
+    padding-left: 0 !important;
+
+    .wea-tab {
+      border-bottom: none;
+    }
+  }
+
+  .salary-welfare-archive-content {
+    padding: 8px 16px;
+    height: 100%;
+
+    .wea-new-table {
+      background: #ffffff;
+
+      .ant-table-tbody {
+        td {
+          width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .searchAdvanced-condition-hide {
+      display: none;
+    }
+
+    .searchAdvanced-condition-container {
+      background: #FFF;
+      margin-bottom: 10px;
+      border: 1px solid #e5e5e5;
+
+      .wea-search-buttons {
+        border-top: 1px solid #dadada;
+        padding: 15px 0;
+      }
+
+      .wea-advanced-searchsAd {
+        height: 320px;
+        overflow: hidden auto;
+
+        .formItem-delete {
+          position: absolute;
+          top: 0;
+          right: -40px;
+        }
+
+        .searchAdvanced-commonSelect {
+          border-top: 1px solid #ebebeb;
+          margin: 0 25px;
+          padding: 10px 0;
+        }
+
+        .custom-advance-largeSpacing {
+          padding-left: 26px;
+
+          .link {
+            border: none;
+            border-radius: 0;
+            padding: 12px 10px 12px 26px;
+            color: #2db7f5
+          }
+        }
+
+      }
+    }
+  }
+}
diff --git a/pc4mobx/hrmSalary/stores/archives.js b/pc4mobx/hrmSalary/stores/archives.js
index 096a5ab7..5eeda9c0 100644
--- a/pc4mobx/hrmSalary/stores/archives.js
+++ b/pc4mobx/hrmSalary/stores/archives.js
@@ -9,6 +9,7 @@ const { TableStore } = WeaTableNew;
 
 export class ArchivesStore {
   @observable logForm = new WeaForm(); // 社保福利档案重构-日志查询条件log
+  @observable welfareForm = new WeaForm(); // 社保福利档案重构-列表查询form