From 13aed532049eb2d6d41cba0920dce50102b19c23 Mon Sep 17 00:00:00 2001
From: wangyunfei <cao201206>
Date: Mon, 1 Sep 2025 14:14:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=BA=E5=91=98=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hrefficiency_timesheet/TimeSheetList.js   |   1 -
 src/pages/staffmanage_staffinfo/StaffInfo.js  | 386 +++++++-----------
 .../staffmanage_staffinfo/StaffInfo.less      | 254 ++++++------
 .../form/StaffInfoRenderSimpleForm.js         | 141 +++++++
 .../form/StaffInfoRenderSimpleForm.less       |   0
 5 files changed, 415 insertions(+), 367 deletions(-)
 create mode 100644 src/pages/staffmanage_staffinfo/form/StaffInfoRenderSimpleForm.js
 create mode 100644 src/pages/staffmanage_staffinfo/form/StaffInfoRenderSimpleForm.less

diff --git a/src/pages/hrefficiency_timesheet/TimeSheetList.js b/src/pages/hrefficiency_timesheet/TimeSheetList.js
index a5fd8b1..ce46aa9 100644
--- a/src/pages/hrefficiency_timesheet/TimeSheetList.js
+++ b/src/pages/hrefficiency_timesheet/TimeSheetList.js
@@ -12,7 +12,6 @@ import {
 import {connect, history} from '@umijs/max';
 import {Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag,Row,Col} from 'antd';
 import StandardTable from '@/components/StandardTable';
-
 import { MyIcon } from "@/components/Icon"
 import style from "@/global.less";
 import TimeSheetCreateForm from './form/TimeSheetCreateForm'; //新增表单
diff --git a/src/pages/staffmanage_staffinfo/StaffInfo.js b/src/pages/staffmanage_staffinfo/StaffInfo.js
index 5641bc7..1739111 100644
--- a/src/pages/staffmanage_staffinfo/StaffInfo.js
+++ b/src/pages/staffmanage_staffinfo/StaffInfo.js
@@ -1,35 +1,32 @@
-import React, {  PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import {
     Card,
     Tree,
-    Input,
     Button,
-    Table,
     Select,
     Space,
-    Pagination,
     Row,
     Col,
-    Form,
+    Pagination
 } from 'antd';
 import { history } from 'umi';
 import {
-    SearchOutlined,
     ExpandOutlined,
-    DownloadOutlined,
     UserOutlined,
     TeamOutlined,
     ApartmentOutlined,
     SyncOutlined,
     DollarOutlined,
     SettingOutlined,
-    ClearOutlined,
+    DownloadOutlined, 
     UserAddOutlined,
     EditOutlined,
-    DeleteOutlined
+    DeleteOutlined 
 } from '@ant-design/icons';
 import styles from './StaffInfo.less';
-import StaffInfoAdd from './from/StaffInfoadd';
+import StandardTable from '@/components/StandardTable';
+import StaffInfoAdd from './form/StaffInfoadd';
+import StaffInfoRenderSimpleForm from "./form/StaffInfoRenderSimpleForm" //表单
 
 const { Option } = Select;
 
@@ -164,6 +161,86 @@ class StaffInfo extends PureComponent {
                 total: 356,
             }
         };
+        
+        // 默认列配置
+        this.defaultColumns = [
+            {
+                title: '序号',
+                dataIndex: 'id',
+                key: 'id',
+                width: 60,
+                align: 'center',
+            },
+            {
+                title: '姓名',
+                dataIndex: 'name',
+                key: 'name',
+                width: 60,
+                render: (text, record) => (
+                    <Button
+                        type="link"
+                        style={{ padding: 0, fontWeight: 500 }}
+                        onClick={() => this.handleNameClick(record)}
+                    >
+                        {text}
+                    </Button>
+                ),
+            },
+            {
+                title: '年龄',
+                dataIndex: 'phone',
+                key: 'phone',
+                width: 50,
+            },
+            {
+                title: '部门',
+                dataIndex: 'idCard',
+                key: 'idCard',
+                width: 70,
+            },
+            {
+                title: '岗位',
+                dataIndex: 'department',
+                key: 'department',
+                width: 80,
+            },
+            {
+                title: '工作性质',
+                dataIndex: 'position',
+                key: 'position',
+                width: 50,
+            },
+            {
+                title: '电话',
+                dataIndex: 'status',
+                key: 'status',
+                width: 100,
+            },
+            {
+                title: '操作',
+                key: 'action',
+                width: 80,
+                render: (_, record) => (
+                    <Space size="middle">
+                        <Button
+                            type="link"
+                            size="small"
+                            icon={<EditOutlined />}
+                            title="编辑"
+                            onClick={() => this.handleEdit(record)}
+                        />
+                        <Button
+                            type="link"
+                            size="small"
+                            danger
+                            icon={<DeleteOutlined />}
+                            title="删除"
+                            onClick={() => this.handleDelete(record)}
+                        />
+                    </Space>
+                ),
+            },
+        ];
     }
 
     // 获取处理后的树形数据
@@ -196,139 +273,6 @@ class StaffInfo extends PureComponent {
         return <TeamOutlined style={{ color: '#666' }} />;
     };
 
-    // 组织架构树数据 (保留原始数据以备后用)
-    treeData = [
-        {
-            title: '飞利信科技有限公司',
-            key: '0-0',
-            icon: <ApartmentOutlined />,
-            children: [
-                {
-                    title: '技术部',
-                    key: '0-0-0',
-                    icon: <TeamOutlined />,
-                    children: [
-                        {
-                            title: '前端组',
-                            key: '0-0-0-0',
-                            icon: <UserOutlined />
-                        },
-                        {
-                            title: '后端组',
-                            key: '0-0-0-1',
-                            icon: <UserOutlined />
-                        },
-                    ],
-                },
-                {
-                    title: '产品部',
-                    key: '0-0-1',
-                    icon: <TeamOutlined />,
-                    children: [
-                        {
-                            title: '产品设计组',
-                            key: '0-0-1-0',
-                            icon: <UserOutlined />
-                        },
-                    ],
-                },
-                {
-                    title: '运营部',
-                    key: '0-0-2',
-                    icon: <TeamOutlined />,
-                },
-                {
-                    title: '财务部',
-                    key: '0-0-3',
-                    icon: <TeamOutlined />,
-                },
-                {
-                    title: '人事部',
-                    key: '0-0-4',
-                    icon: <TeamOutlined />,
-                },
-            ],
-        },
-    ];
-
-    // 表格列配置
-    columns = [
-        {
-            title: '序号',
-            dataIndex: 'id',
-            key: 'id',
-            width: 60,
-            align: 'center',
-        },
-        {
-            title: '姓名',
-            dataIndex: 'name',
-            key: 'name',
-            width: 60,
-            render: (text, record) => (
-                <Button 
-                    type="link" 
-                    style={{ padding: 0, fontWeight: 500 }}
-                    onClick={() => this.handleNameClick(record)}
-                >
-                    {text}
-                </Button>
-            ),
-        },
-        {
-            title: '年龄',
-            dataIndex: 'phone',
-            key: 'phone',
-            width: 50,
-        },
-        {
-            title: '部门',
-            dataIndex: 'idCard',
-            key: 'idCard',
-            width: 70,
-        },
-        {
-            title: '岗位',
-            dataIndex: 'department',
-            key: 'department',
-            width: 80,
-        },
-        {
-            title: '工作性质',
-            dataIndex: 'position',
-            key: 'position',
-            width: 50,
-        },
-        {
-            title: '电话',
-            dataIndex: 'status',
-            key: 'status',
-            width: 100,
-        },
-        {
-            title: '操作',
-            key: 'action',
-            width: 80,
-            render: (_, record) => (
-                <Space size="middle">
-                    <Button 
-                        type="link" 
-                        size="small"
-                        icon={<EditOutlined />}
-                        title="编辑"
-                    />
-                    <Button 
-                        type="link" 
-                        size="small" 
-                        danger
-                        icon={<DeleteOutlined />}
-                        title="删除"
-                    />
-                </Space>
-            ),
-        },
-    ];
-
     // 搜索处理
     handleSearch = (values) => {
         console.log('搜索参数:', values);
@@ -354,7 +298,7 @@ class StaffInfo extends PureComponent {
 
     // 刷新树数据
     handleTreeRefresh = () => {
-        console.log('刷新组织架构');
+        // console.log('刷新组织架构');
         // 这里可以添加刷新树数据的逻辑
     };
 
@@ -380,6 +324,40 @@ class StaffInfo extends PureComponent {
         }
     };
 
+    renderSimpleForm() {
+        const { prooperlog = {} } = this.props;
+        const { params = {} } = prooperlog;
+        const parentMethods = {
+            handleSearch: this.handleSearch,
+            handleFormReset: this.handleFormReset,
+            toggleForm: this.toggleForm,
+            submitButtons: styles.submitButtons,
+            params
+        };
+        return (
+            <StaffInfoRenderSimpleForm {...parentMethods} />
+        );
+    }
+
+    renderAdvancedForm() {
+        const { prooperlog: { params } } = this.props;
+        const parentMethods = {
+            handleSearch: this.handleSearch,
+            handleFormReset: this.handleFormReset,
+            toggleForm: this.toggleForm,
+            params
+        };
+
+        return (
+            <StaffInfoRenderSimpleForm  {...parentMethods} />
+        );
+    }
+
+    renderForm() {
+        const { expandForm } = this.state;
+        return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
+    }
+
     // 分页处理
     onPaginationChange = (page, pageSize) => {
         this.setState({
@@ -404,7 +382,7 @@ class StaffInfo extends PureComponent {
     // 新增成功回调
     handleAddSuccess = (values) => {
         console.log('新增成功:', values);
-        
+
         // 这里可以刷新列表数据
         // 模拟添加到表格数据中
         const newStaff = {
@@ -435,11 +413,23 @@ class StaffInfo extends PureComponent {
         history.push(`/topnavbar00/staffmanage/particulars`);
     };
 
+    // 处理编辑
+    handleEdit = (record) => {
+        console.log('编辑员工:', record);
+        // 这里可以打开编辑弹窗或跳转到编辑页面
+    };
+
+    // 处理删除
+    handleDelete = (record) => {
+        console.log('删除员工:', record);
+        // 这里可以弹出确认框并执行删除操作
+    };
+
     render() {
         const { tableData, pagination, expandedKeys, addModalVisible, addLoading } = this.state;
 
         return (
-            <div className={styles.staffInfoContainer}> 
+            <div className={styles.staffInfoContainer}>
                 {/* 主体内容 */}
                 <div className={styles.mainContent}>
                     <Card className={styles.contentCard}>
@@ -492,100 +482,7 @@ class StaffInfo extends PureComponent {
                             <Col span={19}>
                                 {/* 筛选条件 */}
                                 <Card className={styles.searchCard}>
-                                    <Form
-                                        ref={(ref) => this.formRef = ref}
-                                        onFinish={this.handleSearch}
-                                        layout="vertical"
-                                    >
-                                        <Row gutter={12}>
-                                            <Col span={8}>
-                                                <Form.Item
-                                                    name="name"
-                                                    label="姓名"
-                                                >
-                                                    <Input
-                                                        placeholder="请输入姓名"
-                                                        // prefix={<UserOutlined />}
-                                                    />
-                                                </Form.Item>
-                                            </Col>
-                                            <Col span={8}>
-                                                <Form.Item
-                                                    name="phone"
-                                                    label="电话"
-                                                >
-                                                    <Input
-                                                        placeholder="请输入电话"
-                                                        // prefix={<PhoneOutlined />}
-                                                    />
-                                                </Form.Item>
-                                            </Col>
-                                            <Col span={8}>
-                                                <Form.Item
-                                                    name="idCard"
-                                                    label="身份证号"
-                                                >
-                                                    <Input
-                                                        placeholder="请输入身份证号"
-                                                        // prefix={<IdcardOutlined />}
-                                                    />
-                                                </Form.Item>
-                                            </Col>
-                                        </Row>
-                                        <Row gutter={16}>
-                                            <Col span={8}>
-                                                <Form.Item
-                                                    name="department"
-                                                    label="部门"
-                                                >
-                                                    <Select placeholder="请选择部门">
-                                                        <Option value="技术部">技术部</Option>
-                                                        <Option value="产品部">产品部</Option>
-                                                        <Option value="运营部">运营部</Option>
-                                                        <Option value="财务部">财务部</Option>
-                                                        <Option value="人事部">人事部</Option>
-                                                    </Select>
-                                                </Form.Item>
-                                            </Col>
-                                            <Col span={8}>
-                                                <Form.Item
-                                                    name="position"
-                                                    label="岗位"
-                                                >
-                                                    <Select placeholder="请选择岗位">
-                                                        <Option value="高级工程师">高级工程师</Option>
-                                                        <Option value="产品经理">产品经理</Option>
-                                                        <Option value="运营专员">运营专员</Option>
-                                                        <Option value="会计">会计</Option>
-                                                        <Option value="HR专员">HR专员</Option>
-                                                    </Select>
-                                                </Form.Item>
-                                            </Col>
-                                            <Col span={8}>
-                                                <Form.Item label=" " colon={false}>
-                                                    <Space size="middle">
-                                                        <Button
-                                                            type="primary"
-                                                            htmlType="submit"
-                                                            icon={<SearchOutlined />}
-                                                            size="large"
-                                                            className={styles.searchButton}
-                                                        >
-                                                            查询
-                                                        </Button>
-                                                        <Button
-                                                            onClick={this.handleReset}
-                                                            icon={<ClearOutlined />}
-                                                            size="large"
-                                                            className={styles.resetButton}
-                                                        >
-                                                            重置
-                                                        </Button>
-                                                    </Space>
-                                                </Form.Item>
-                                            </Col>
-                                        </Row>
-                                    </Form>
+                                    {this.renderForm()}
                                 </Card>
 
                                 {/* 操作按钮和统计 */}
@@ -615,12 +512,13 @@ class StaffInfo extends PureComponent {
 
                                 {/* 人员表格 */}
                                 <Card className={styles.tableCard}>
-                                    <Table
-                                        columns={this.columns}
+                                    <StandardTable
+                                        columns={this.defaultColumns}
                                         dataSource={tableData}
                                         pagination={false}
-                                        // scroll={{ x: 1200 }}
+                                        scroll={{ x: 1000,y: 600 }}
                                         size="small"
+                                        selectedRows={[]}
                                     />
 
                                     {/* 分页 */}
@@ -656,4 +554,4 @@ class StaffInfo extends PureComponent {
     }
 }
 
-export default StaffInfo
+export default StaffInfo;
\ No newline at end of file
diff --git a/src/pages/staffmanage_staffinfo/StaffInfo.less b/src/pages/staffmanage_staffinfo/StaffInfo.less
index 8b43155..0837d7c 100644
--- a/src/pages/staffmanage_staffinfo/StaffInfo.less
+++ b/src/pages/staffmanage_staffinfo/StaffInfo.less
@@ -60,18 +60,20 @@
       }
     }
 
-  .treeCard {
-    height: 600px;
-    border: 1px solid #e8e8e8;
-    border-radius: 8px;
+    .treeCard {
+      height: 600px;
+      border: 1px solid #e8e8e8;
+      border-radius: 8px;
 
-    .treeHeader {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-size: 14px;
-      font-weight: 500;
-    }      .treeContainer {
+      .treeHeader {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 14px;
+        font-weight: 500;
+      }
+
+      .treeContainer {
         height: 520px;
         overflow-y: auto;
 
@@ -150,50 +152,52 @@
       }
     }
 
-  .searchCard {
-    margin-bottom: 16px;
-    background-color: #f9fbfc;
-    border-radius: 8px;
-
-    .ant-card-body {
-      padding: 12px;
+    .searchCard {
+      margin-bottom: 16px;
       background-color: #f9fbfc;
-      border-radius: 6px;
-    }
+      border-radius: 8px;
 
-    .ant-form-item-label {
-      font-weight: 500;
-      
-      label {
-        color: #ecf0f1 !important;
+      .ant-card-body {
+        padding: 12px;
+        background-color: #f9fbfc;
+        border-radius: 6px;
       }
-    }
 
-    // 深色背景下的表单项样式
-    .ant-input,
-    .ant-select-selector {
-      background-color: #34495e !important;
-      border-color: #5a6c7d !important;
-      color: #ecf0f1 !important;
+      .ant-form-item-label {
+        font-weight: 500;
 
-      &:hover {
-        border-color: #7fb3d3 !important;
+        label {
+          color: #ecf0f1 !important;
+        }
       }
 
-      &:focus {
-        border-color: #2d5cf6 !important;
-        box-shadow: 0 0 0 2px rgba(45, 92, 246, 0.2) !important;
+      // 深色背景下的表单项样式
+      .ant-input,
+      .ant-select-selector {
+        background-color: #34495e !important;
+        border-color: #5a6c7d !important;
+        color: #ecf0f1 !important;
+
+        &:hover {
+          border-color: #7fb3d3 !important;
+        }
+
+        &:focus {
+          border-color: #2d5cf6 !important;
+          box-shadow: 0 0 0 2px rgba(45, 92, 246, 0.2) !important;
+        }
       }
-    }
 
-    .ant-select-selection-placeholder,
-    .ant-input::placeholder {
-      color: #95a5a6 !important;
-    }
+      .ant-select-selection-placeholder,
+      .ant-input::placeholder {
+        color: #95a5a6 !important;
+      }
 
-    .anticon {
-      color: #95a5a6 !important;
-    }      /* 搜索按钮样式 */
+      .anticon {
+        color: #95a5a6 !important;
+      }
+
+      /* 搜索按钮样式 */
       .searchButton {
         background: linear-gradient(135deg, #2d5cf6 0%, #4c7bff 100%);
         border: none;
@@ -249,6 +253,9 @@
     }
 
     .actionBar {
+
+
+
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -260,7 +267,6 @@
         font-weight: 500;
       }
 
-      /* 导出按钮样式 */
       .exportButton {
         background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
         border: none;
@@ -292,7 +298,7 @@
         }
       }
 
-      /* 新增按钮样式 */
+
       .addButton {
         background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);
         border: none;
@@ -301,8 +307,8 @@
         font-size: 14px;
         box-shadow: 0 4px 12px rgba(250, 140, 22, 0.3);
         transition: all 0.3s ease;
-            // margin-top: -8px;
-           height: 35px;
+        // margin-top: -8px;
+        height: 35px;
         padding: 0 16px;
 
 
@@ -392,6 +398,82 @@
         }
       }
     }
+
+
+    .tableCard {
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      padding-bottom: 10px;
+
+      .ant-table-wrapper {
+        max-height: 600px;
+        overflow-y: auto;
+
+        /* 自定义滚动条样式 */
+        &::-webkit-scrollbar {
+          width: 8px;
+        }
+
+        &::-webkit-scrollbar-track {
+          background: #f5f5f5;
+          border-radius: 4px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background: #d9d9d9;
+          border-radius: 4px;
+
+          &:hover {
+            background: #bfbfbf;
+          }
+        }
+
+        .ant-table-thead>tr>th {
+          background-color: #fafafa;
+          font-weight: 600;
+          color: #333;
+          border-bottom: 1px solid #e8e8e8;
+          position: sticky;
+          top: 0;
+          z-index: 1;
+        }
+
+        .ant-table-tbody>tr {
+          &:hover>td {
+            background-color: #f5f5f5 !important;
+          }
+
+          >td {
+            border-bottom: 1px solid #f0f0f0;
+          }
+        }
+      }
+
+      .paginationWrapper {
+        margin-top: 20px;
+        text-align: right;
+
+        .ant-pagination {
+          .ant-pagination-total-text {
+            color: #666;
+          }
+
+          .ant-pagination-item {
+            border-radius: 4px;
+
+            &.ant-pagination-item-active {
+              background-color: #fff;
+              border-color: #2d5cf6;
+            }
+          }
+
+          .ant-pagination-prev,
+          .ant-pagination-next {
+            border-radius: 4px;
+          }
+        }
+      }
+    }
   }
 }
 
@@ -517,7 +599,7 @@
 
     .ant-form-item-label {
       font-weight: 500;
-      
+
       label {
         color: #ecf0f1 !important;
       }
@@ -562,79 +644,7 @@
     }
   }
 
-  .tableCard {
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-    padding-bottom: 10px;
-    .ant-table-wrapper {
-      max-height: 600px;
-      overflow-y: auto;
-
-      /* 自定义滚动条样式 */
-      &::-webkit-scrollbar {
-        width: 8px;
-      }
-
-      &::-webkit-scrollbar-track {
-        background: #f5f5f5;
-        border-radius: 4px;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background: #d9d9d9;
-        border-radius: 4px;
-
-        &:hover {
-          background: #bfbfbf;
-        }
-      }
-
-      .ant-table-thead>tr>th {
-        background-color: #fafafa;
-        font-weight: 600;
-        color: #333;
-        border-bottom: 1px solid #e8e8e8;
-        position: sticky;
-        top: 0;
-        z-index: 1;
-      }
-
-      .ant-table-tbody>tr {
-        &:hover>td {
-          background-color: #f5f5f5 !important;
-        }
-
-        >td {
-          border-bottom: 1px solid #f0f0f0;
-        }
-      }
-    }
-
-    .paginationWrapper {
-      margin-top: 20px;
-      text-align: right;
 
-      .ant-pagination {
-        .ant-pagination-total-text {
-          color: #666;
-        }
-
-        .ant-pagination-item {
-          border-radius: 4px;
-
-          &.ant-pagination-item-active {
-            background-color: #2d5cf6;
-            border-color: #2d5cf6;
-          }
-        }
-
-        .ant-pagination-prev,
-        .ant-pagination-next {
-          border-radius: 4px;
-        }
-      }
-    }
-  }
 
   :global {
     .ant-card-body {
diff --git a/src/pages/staffmanage_staffinfo/form/StaffInfoRenderSimpleForm.js b/src/pages/staffmanage_staffinfo/form/StaffInfoRenderSimpleForm.js
new file mode 100644
index 0000000..a82322f
--- /dev/null
+++ b/src/pages/staffmanage_staffinfo/form/StaffInfoRenderSimpleForm.js
@@ -0,0 +1,141 @@
+import React, { useState } from 'react';
+import { Button, Col, Form, Input, Row, message,Select, Space } from 'antd';
+import { ClearOutlined,SearchOutlined } from '@ant-design/icons';
+import styles from "../StaffInfo.less";
+
+const FormItem = Form.Item; 
+const StaffInfoRenderSimpleForm = (props) => {
+    const [form] = Form.useForm();
+    const [startDateOpen, setStartDateOpen] = useState(false);
+    const [endDateOpen, setEndDateOpen] = useState(false);
+    const { submitButtons, handleSearch, handleFormReset, toggleForm, params } = props;
+    React.useEffect(() => {
+        form.setFieldsValue({
+            opername: params?.opername,
+            opertype: params?.opertype,
+        });
+    }, [params]);
+    const onFinish = values => {
+        const params = {
+            ...values,
+            startDate: values.startDate ? values.startDate.format('YYYY-MM-DD') : undefined,
+            endDate: values.endDate ? values.endDate.format('YYYY-MM-DD') : undefined,
+        };
+        handleSearch(params);
+    };
+
+    const myhandleFormReset = () => {
+        form.resetFields();
+        handleFormReset();
+    };
+
+    const onEndDateChange = (value) => {
+        const startDate = form.getFieldValue("startDate");
+        if (startDate && value && value.isBefore(startDate, "day")) {
+            message.error("结束日期不能小于开始日期！");
+            // 清空
+            form.setFieldsValue({ endDate: undefined });
+        }
+    }
+
+    return (
+        <div >
+            <Form
+                // ref={(ref) => this.formRef = ref}
+                // onFinish={this.handleSearch}
+                layout="vertical"
+            >
+                <Row gutter={12}>
+                    <Col span={8}>
+                        <Form.Item
+                            name="name"
+                            label="姓名"
+                        >
+                            <Input
+                                placeholder="请输入姓名"
+                            />
+                        </Form.Item>
+                    </Col>
+                    <Col span={8}>
+                        <Form.Item
+                            name="phone"
+                            label="电话"
+                        >
+                            <Input
+                                placeholder="请输入电话"
+                            // prefix={<PhoneOutlined />}
+                            />
+                        </Form.Item>
+                    </Col>
+                    <Col span={8}>
+                        <Form.Item
+                            name="idCard"
+                            label="身份证号"
+                        >
+                            <Input
+                                placeholder="请输入身份证号"
+                            // prefix={<IdcardOutlined />}
+                            />
+                        </Form.Item>
+                    </Col>
+                </Row>
+                <Row gutter={16}>
+                    <Col span={8}>
+                        <Form.Item
+                            name="department"
+                            label="部门"
+                        >
+                            <Select placeholder="请选择部门">
+                                <Option value="技术部">技术部</Option>
+                                <Option value="产品部">产品部</Option>
+                                <Option value="运营部">运营部</Option>
+                                <Option value="财务部">财务部</Option>
+                                <Option value="人事部">人事部</Option>
+                            </Select>
+                        </Form.Item>
+                    </Col>
+                    <Col span={8}>
+                        <Form.Item
+                            name="position"
+                            label="岗位"
+                        >
+                            <Select placeholder="请选择岗位">
+                                <Option value="高级工程师">高级工程师</Option>
+                                <Option value="产品经理">产品经理</Option>
+                                <Option value="运营专员">运营专员</Option>
+                                <Option value="会计">会计</Option>
+                                <Option value="HR专员">HR专员</Option>
+                            </Select>
+                        </Form.Item>
+                    </Col>
+                    <Col span={8}>
+                        <Form.Item label=" " colon={false}>
+                            <Space size="middle">
+                                <Button
+                                    type="primary"
+                                    htmlType="submit"
+                                    icon={<SearchOutlined />}
+                                    size="large"
+                                    className={styles.searchButton}
+                                >
+                                    查询
+                                </Button>
+                                <Button
+                                    // onClick={this.handleReset}
+                                    icon={<ClearOutlined />}
+                                    size="large"
+                                    className={styles.resetButton}
+                                >
+                                    重置
+                                </Button>
+                            </Space>
+                        </Form.Item>
+                    </Col>
+                </Row>
+            </Form>
+        </div>
+    );
+
+};
+
+export default StaffInfoRenderSimpleForm;
diff --git a/src/pages/staffmanage_staffinfo/form/StaffInfoRenderSimpleForm.less b/src/pages/staffmanage_staffinfo/form/StaffInfoRenderSimpleForm.less
new file mode 100644
index 0000000..e69de29