jiangxucong
/
flx-lms-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

人员详情

Browse Source
master
wangyunfei 2 weeks ago
parent 9f4005cbef
commit 13aed53204
5 changed files with 415 additions and 367 deletions
Show Stats Download Patch File Download Diff File

1
src/pages/hrefficiency_timesheet/TimeSheetList.js
Unescape Escape View File

@ -12,7 +12,6 @@ import {
import {connect, history} from '@umijs/max'; import {connect, history} from '@umijs/max';
import {Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag,Row,Col} from 'antd'; import {Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag,Row,Col} from 'antd';
import StandardTable from '@/components/StandardTable'; import StandardTable from '@/components/StandardTable';
import { MyIcon } from "@/components/Icon" import { MyIcon } from "@/components/Icon"
import style from "@/global.less"; import style from "@/global.less";
import TimeSheetCreateForm from './form/TimeSheetCreateForm'; //新增表单 import TimeSheetCreateForm from './form/TimeSheetCreateForm'; //新增表单

386
src/pages/staffmanage_staffinfo/StaffInfo.js
Unescape Escape View File

@ -1,35 +1,32 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { import {
Card, Card,
Tree, Tree,
Input,
Button, Button,
Table,
Select, Select,
Space, Space,
Pagination,
Row, Row,
Col, Col,
Form, Pagination
} from 'antd'; } from 'antd';
import { history } from 'umi'; import { history } from 'umi';
import { import {
SearchOutlined,
ExpandOutlined, ExpandOutlined,
DownloadOutlined,
UserOutlined, UserOutlined,
TeamOutlined, TeamOutlined,
ApartmentOutlined, ApartmentOutlined,
SyncOutlined, SyncOutlined,
DollarOutlined, DollarOutlined,
SettingOutlined, SettingOutlined,
ClearOutlined, DownloadOutlined,
UserAddOutlined, UserAddOutlined,
EditOutlined, EditOutlined,
DeleteOutlined DeleteOutlined
} from '@ant-design/icons'; } from '@ant-design/icons';
import styles from './StaffInfo.less'; 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; const { Option } = Select;
@ -164,6 +161,86 @@ class StaffInfo extends PureComponent {
total: 356, 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' }} />; 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) => { handleSearch = (values) => {
console.log('搜索参数:', values); console.log('搜索参数:', values);
@ -354,7 +298,7 @@ class StaffInfo extends PureComponent {
// 刷新树数据 // 刷新树数据
handleTreeRefresh = () => { 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) => { onPaginationChange = (page, pageSize) => {
this.setState({ this.setState({
@ -404,7 +382,7 @@ class StaffInfo extends PureComponent {
// 新增成功回调 // 新增成功回调
handleAddSuccess = (values) => { handleAddSuccess = (values) => {
console.log('新增成功:', values); console.log('新增成功:', values);
// 这里可以刷新列表数据 // 这里可以刷新列表数据
// 模拟添加到表格数据中 // 模拟添加到表格数据中
const newStaff = { const newStaff = {
@ -435,11 +413,23 @@ class StaffInfo extends PureComponent {
history.push(`/topnavbar00/staffmanage/particulars`); history.push(`/topnavbar00/staffmanage/particulars`);
}; };
// 处理编辑
handleEdit = (record) => {
console.log('编辑员工:', record);
// 这里可以打开编辑弹窗或跳转到编辑页面
};
// 处理删除
handleDelete = (record) => {
console.log('删除员工:', record);
// 这里可以弹出确认框并执行删除操作
};
render() { render() {
const { tableData, pagination, expandedKeys, addModalVisible, addLoading } = this.state; const { tableData, pagination, expandedKeys, addModalVisible, addLoading } = this.state;
return ( return (
<div className={styles.staffInfoContainer}> <div className={styles.staffInfoContainer}>
{/* 主体内容 */} {/* 主体内容 */}
<div className={styles.mainContent}> <div className={styles.mainContent}>
<Card className={styles.contentCard}> <Card className={styles.contentCard}>
@ -492,100 +482,7 @@ class StaffInfo extends PureComponent {
<Col span={19}> <Col span={19}>
{/* 筛选条件 */} {/* 筛选条件 */}
<Card className={styles.searchCard}> <Card className={styles.searchCard}>
<Form {this.renderForm()}
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>
</Card> </Card>
{/* 操作按钮和统计 */} {/* 操作按钮和统计 */}
@ -615,12 +512,13 @@ class StaffInfo extends PureComponent {
{/* 人员表格 */} {/* 人员表格 */}
<Card className={styles.tableCard}> <Card className={styles.tableCard}>
<Table <StandardTable
columns={this.columns} columns={this.defaultColumns}
dataSource={tableData} dataSource={tableData}
pagination={false} pagination={false}
// scroll={{ x: 1200 }} scroll={{ x: 1000,y: 600 }}
size="small" size="small"
selectedRows={[]}
/> />
{/* 分页 */} {/* 分页 */}
@ -656,4 +554,4 @@ class StaffInfo extends PureComponent {
} }
} }
export default StaffInfo export default StaffInfo;

254
src/pages/staffmanage_staffinfo/StaffInfo.less
Unescape Escape View File

@ -60,18 +60,20 @@
} }
} }
.treeCard { .treeCard {
height: 600px; height: 600px;
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
border-radius: 8px; border-radius: 8px;
.treeHeader { .treeHeader {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
} .treeContainer { }
.treeContainer {
height: 520px; height: 520px;
overflow-y: auto; overflow-y: auto;
@ -150,50 +152,52 @@
} }
} }
.searchCard { .searchCard {
margin-bottom: 16px; margin-bottom: 16px;
background-color: #f9fbfc;
border-radius: 8px;
.ant-card-body {
padding: 12px;
background-color: #f9fbfc; background-color: #f9fbfc;
border-radius: 6px; border-radius: 8px;
}
.ant-form-item-label { .ant-card-body {
font-weight: 500; padding: 12px;
background-color: #f9fbfc;
label { border-radius: 6px;
color: #ecf0f1 !important;
} }
}
// 深色背景下的表单项样式 .ant-form-item-label {
.ant-input, font-weight: 500;
.ant-select-selector {
background-color: #34495e !important;
border-color: #5a6c7d !important;
color: #ecf0f1 !important;
&:hover { label {
border-color: #7fb3d3 !important; color: #ecf0f1 !important;
}
} }
&:focus { // 深色背景下的表单项样式
border-color: #2d5cf6 !important; .ant-input,
box-shadow: 0 0 0 2px rgba(45, 92, 246, 0.2) !important; .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-select-selection-placeholder,
.ant-input::placeholder { .ant-input::placeholder {
color: #95a5a6 !important; color: #95a5a6 !important;
} }
.anticon { .anticon {
color: #95a5a6 !important; color: #95a5a6 !important;
} /* 搜索按钮样式 */ }
/* 搜索按钮样式 */
.searchButton { .searchButton {
background: linear-gradient(135deg, #2d5cf6 0%, #4c7bff 100%); background: linear-gradient(135deg, #2d5cf6 0%, #4c7bff 100%);
border: none; border: none;
@ -249,6 +253,9 @@
} }
.actionBar { .actionBar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -260,7 +267,6 @@
font-weight: 500; font-weight: 500;
} }
/* 导出按钮样式 */
.exportButton { .exportButton {
background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%); background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
border: none; border: none;
@ -292,7 +298,7 @@
} }
} }
/* 新增按钮样式 */
.addButton { .addButton {
background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%); background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);
border: none; border: none;
@ -301,8 +307,8 @@
font-size: 14px; font-size: 14px;
box-shadow: 0 4px 12px rgba(250, 140, 22, 0.3); box-shadow: 0 4px 12px rgba(250, 140, 22, 0.3);
transition: all 0.3s ease; transition: all 0.3s ease;
// margin-top: -8px; // margin-top: -8px;
height: 35px; height: 35px;
padding: 0 16px; 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 { .ant-form-item-label {
font-weight: 500; font-weight: 500;
label { label {
color: #ecf0f1 !important; 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 { :global {
.ant-card-body { .ant-card-body {

141
src/pages/staffmanage_staffinfo/form/StaffInfoRenderSimpleForm.js
Unescape Escape View File

@ -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;

0
src/pages/staffmanage_staffinfo/form/StaffInfoRenderSimpleForm.less
Unescape Escape View File

Write Preview
Loading…
Cancel
Save