jiangxucong
/
dq-ems
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

人员管理页面

Browse Source
main
wangyunfei 2 weeks ago
parent 5519a41cf5
commit 95c99151f5
2 changed files with 230 additions and 249 deletions
Show Stats Download Patch File Download Diff File

448
src/pages/business_envInformation/module/EnvironmentalPersonnelManagement.js
Unescape Escape View File

@ -552,7 +552,7 @@ const EnvironmentalPersonnelManagement = () => {
onClose={handleCloseDrawer}
open={drawerVisible}
width={600}
closable={true}
closable={false}
bodyStyle={{ fontSize: '12px' }}
>
{selectedRecord && (
@ -675,13 +675,15 @@ const EnvironmentalPersonnelManagement = () => {
<Button key="cancel" onClick={handleCloseModal} style={{
backgroundColor: '#f5f5f5',
color: '#666',
border: '1px solid #d9d9d9'
border: '1px solid #d9d9d9',
borderRadius: '2px'
}}>
取消
</Button>,
<Button key="save" type="primary" onClick={handleSave} style={{
backgroundColor: '#52c41a',
borderColor: '#52c41a'
borderColor: '#52c41a',
borderRadius: '2px'
}}>
保存
</Button>
@ -692,45 +694,103 @@ const EnvironmentalPersonnelManagement = () => {
form={form}
layout="vertical"
style={{ marginTop: '20px' }}
className={styles.formInput}
>
<Row gutter={24}>
{/* 左侧列 */}
<Col span={12}>
{/* 第一行：姓名 + 出生日期 */}
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px', gap: '20px' }}>
<div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
<span style={{ fontSize: '12px', color: '#999999', marginRight: '8px', minWidth: '40px' }}>姓名</span>
<Form.Item
label={<span style={{ fontSize: '12px', fontWeight: '500' }}>姓名</span>}
name="name"
rules={[{ required: true, message: '请输入姓名' }]}
style={{ margin: 0, flex: 1 }}
>
<Input placeholder="请输入" style={{ height: '32px' }} />
<Input placeholder="请输入" style={{ height: '32px', borderRadius: '2px' }} />
</Form.Item>
</div>
<div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
<span style={{ fontSize: '12px', color: '#999999', marginRight: '8px', minWidth: '60px' }}>出生日期</span>
<Form.Item
name="birthDate"
rules={[{ required: true, message: '请选择出生日期' }]}
style={{ margin: 0, flex: 1 }}
>
<DatePicker
placeholder="请选择"
style={{ width: '100%', height: '32px', borderRadius: '2px' }}
format="YYYY-MM-DD"
/>
</Form.Item>
</div>
</div>
{/* 第二行：工号 + 入职时间 */}
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px', gap: '20px' }}>
<div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
<span style={{ fontSize: '12px', color: '#999999', marginRight: '8px', minWidth: '40px' }}>工号</span>
<Form.Item
label={<span style={{ fontSize: '12px', fontWeight: '500' }}>工号</span>}
name="employeeId"
rules={[{ required: true, message: '请输入工号' }]}
style={{ margin: 0, flex: 1 }}
>
<Input placeholder="请输入" style={{ height: '32px' }} />
<Input placeholder="请输入" style={{ height: '32px', borderRadius: '2px' }} />
</Form.Item>
</div>
<div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
<span style={{ fontSize: '12px', color: '#999999', marginRight: '8px', minWidth: '60px' }}>入职时间</span>
<Form.Item
name="joinDate"
rules={[{ required: true, message: '请选择入职时间' }]}
style={{ margin: 0, flex: 1 }}
>
<DatePicker
placeholder="请选择"
style={{ width: '100%', height: '32px', borderRadius: '2px' }}
format="YYYY-MM-DD"
/>
</Form.Item>
</div>
</div>
{/* 第三行：部门 + 身份证号 */}
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px', gap: '20px' }}>
<div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
<span style={{ fontSize: '12px', color: '#999999', marginRight: '8px', minWidth: '40px' }}>部门</span>
<Form.Item
label={<span style={{ fontSize: '12px', fontWeight: '500' }}>部门</span>}
name="department"
rules={[{ required: true, message: '请选择部门' }]}
style={{ margin: 0, flex: 1 }}
>
<Select placeholder="请选择" style={{ height: '32px' }}>
<Select placeholder="请选择" style={{ height: '32px', borderRadius: '2px' }}>
<Select.Option value="环保管理">环保管理</Select.Option>
<Select.Option value="技术部">技术部</Select.Option>
<Select.Option value="生产部">生产部</Select.Option>
<Select.Option value="质量部">质量部</Select.Option>
</Select>
</Form.Item>
</div>
<div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
<span style={{ fontSize: '12px', color: '#999999', marginRight: '8px', minWidth: '60px' }}>身份证号</span>
<Form.Item
name="idCard"
rules={[{ required: true, message: '请输入身份证号' }]}
style={{ margin: 0, flex: 1 }}
>
<Input placeholder="请输入" style={{ height: '32px', borderRadius: '2px' }} />
</Form.Item>
</div>
</div>
{/* 第四行：岗位 + 联系方式 */}
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px', gap: '20px' }}>
<div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
<span style={{ fontSize: '12px', color: '#999999', marginRight: '8px', minWidth: '40px' }}>岗位</span>
<Form.Item
label={<span style={{ fontSize: '12px', fontWeight: '500' }}>岗位</span>}
name="position"
rules={[{ required: true, message: '请选择岗位' }]}
style={{ margin: 0, flex: 1 }}
>
<Select placeholder="请选择" style={{ height: '32px' }}>
<Select placeholder="请选择" style={{ height: '32px', borderRadius: '2px' }}>
<Select.Option value="污水运行">污水运行</Select.Option>
<Select.Option value="污水化验">污水化验</Select.Option>
<Select.Option value="环境监测">环境监测</Select.Option>
@ -738,96 +798,60 @@ const EnvironmentalPersonnelManagement = () => {
<Select.Option value="安全员">安全员</Select.Option>
</Select>
</Form.Item>
</div>
<div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
<span style={{ fontSize: '12px', color: '#999999', marginRight: '8px', minWidth: '60px' }}>联系方式</span>
<Form.Item
name="contact"
rules={[{ required: true, message: '请输入联系方式' }]}
style={{ margin: 0, flex: 1 }}
>
<Input placeholder="请输入" style={{ height: '32px', borderRadius: '2px' }} />
</Form.Item>
</div>
</div>
{/* 第五行：性别 + 照片 */}
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px', gap: '20px' }}>
<div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
<span style={{ fontSize: '12px', color: '#999999', marginRight: '8px', minWidth: '40px' }}>性别</span>
<Form.Item
label={<span style={{ fontSize: '12px', fontWeight: '500' }}>性别</span>}
name="gender"
rules={[{ required: true, message: '请选择性别' }]}
style={{ margin: 0, flex: 1 }}
>
<Select placeholder="请选择" style={{ height: '32px' }}>
<Select placeholder="请选择" style={{ height: '32px', borderRadius: '2px' }}>
<Select.Option value="男">男</Select.Option>
<Select.Option value="女">女</Select.Option>
</Select>
</Form.Item>
</div>
<div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
<span style={{ fontSize: '12px', color: '#999999', marginRight: '8px', minWidth: '60px' }}>照片</span>
<Button
style={{
height: '32px',
borderRadius: '4px',
color: '#999999',
fontSize: '12px',
}}
>
上传
</Button>
</div>
</div>
{/* 第六行：住址 */}
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}>
<span style={{ fontSize: '12px', color: '#999999', marginRight: '8px', minWidth: '40px' }}>住址</span>
<Form.Item
label={<span style={{ fontSize: '12px', fontWeight: '500' }}>住址</span>}
name="address"
rules={[{ required: true, message: '请输入住址' }]}
style={{ margin: 0, flex: 1 }}
>
<Input placeholder="请输入" style={{ height: '32px' }} />
</Form.Item>
</Col>
{/* 右侧列 */}
<Col span={12}>
<Form.Item
label={<span style={{ fontSize: '12px', fontWeight: '500' }}>出生日期</span>}
name="birthDate"
rules={[{ required: true, message: '请选择出生日期' }]}
>
<DatePicker
placeholder="请选择"
style={{ width: '100%', height: '32px' }}
format="YYYY-MM-DD"
/>
</Form.Item>
<Form.Item
label={<span style={{ fontSize: '12px', fontWeight: '500' }}>入职时间</span>}
name="joinDate"
rules={[{ required: true, message: '请选择入职时间' }]}
>
<DatePicker
placeholder="请选择"
style={{ width: '100%', height: '32px' }}
format="YYYY-MM-DD"
/>
<Input placeholder="请输入" style={{ height: '32px', borderRadius: '2px' }} />
</Form.Item>
<Form.Item
label={<span style={{ fontSize: '12px', fontWeight: '500' }}>身份证号</span>}
name="idCard"
rules={[{ required: true, message: '请输入身份证号' }]}
>
<Input placeholder="请输入" style={{ height: '32px' }} />
</Form.Item>
<Form.Item
label={<span style={{ fontSize: '12px', fontWeight: '500' }}>联系方式</span>}
name="contact"
rules={[{ required: true, message: '请输入联系方式' }]}
>
<Input placeholder="请输入" style={{ height: '32px' }} />
</Form.Item>
{/* 照片上传 */}
<Form.Item
label={<span style={{ fontSize: '12px', fontWeight: '500' }}>照片</span>}
name="photo"
>
<Upload
listType="picture-card"
showUploadList={false}
beforeUpload={() => false}
>
<div style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: '20px'
}}>
<PlusOutlined style={{
fontSize: '24px',
color: '#52c41a',
marginBottom: '8px'
}} />
<div style={{ fontSize: '12px', color: '#666' }}>上传</div>
</div>
</Upload>
</Form.Item>
</Col>
</Row>
</div>
{/* 岗位职责 */}
<Form.Item
@ -838,7 +862,7 @@ const EnvironmentalPersonnelManagement = () => {
<Input.TextArea
rows={4}
placeholder="请输入岗位职责"
style={{ fontSize: '12px', color: '#333333' }}
style={{ fontSize: '12px', color: '#333333', borderRadius: '2px' }}
/>
</Form.Item>
@ -850,7 +874,7 @@ const EnvironmentalPersonnelManagement = () => {
<Input.TextArea
rows={3}
placeholder="暂无"
style={{ fontSize: '12px', color: '#333333' }}
style={{ fontSize: '12px', color: '#333333', borderRadius: '2px' }}
/>
</Form.Item>
</Form>
@ -858,203 +882,141 @@ const EnvironmentalPersonnelManagement = () => {
{/* 编辑抽屉 */}
<Drawer
title="编辑"
title={<span style={{ color: '#C3C3C3', fontWeight: 500, fontSize: '16px' }}>编辑</span>}
placement="right"
onClose={handleCloseEditDrawer}
open={editDrawerVisible}
width={600}
closable={true}
closable={false}
destroyOnClose={true}
bodyStyle={{ fontSize: '12px' }}
footer={[
<Button key="cancel" onClick={handleCloseEditDrawer} style={{
backgroundColor: '#f5f5f5',
color: '#666',
border: '1px solid #d9d9d9',
marginRight: '8px'
marginRight: '8px',
borderRadius: '2px'
}}>
取消
</Button>,
<Button key="save" type="primary" onClick={handleEditSave} style={{
backgroundColor: '#52c41a',
borderColor: '#52c41a'
borderColor: '#52c41a',
borderRadius: '2px'
}}>
保存
</Button>
]}
>
<Form
form={editForm}
layout="vertical"
style={{ padding: '20px 0' }}
>
{console.log('编辑抽屉状态:', editDrawerVisible, '选中记录:', selectedRecord)}
{selectedRecord && (
<div style={{ padding: '10px 0' }}>
{/* 姓名和头像区域 */}
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '30px' }}>
<div style={{ flex: 1 }}>
<Form.Item
name="name"
rules={[{ required: true, message: '请输入姓名' }]}
style={{ marginBottom: '20px' }}
>
<Input
placeholder="请输入姓名"
style={{
height: '40px',
fontSize: '18px',
fontWeight: 'bold',
border: 'none',
borderBottom: '1px solid #d9d9d9',
borderRadius: '0',
padding: '0'
}}
/>
</Form.Item>
<h2 style={{ margin: '0 0 20px 0', fontSize: '18px', fontWeight: 'bold' }}>
{selectedRecord.name}
</h2>
{/* 基本信息 - 两列布局 */}
<Row gutter={24}>
<Col span={12}>
<Form.Item
label={<span style={{ fontSize: '12px', fontWeight: '500', color: '#666' }}>工号</span>}
name="employeeId"
rules={[{ required: true, message: '请输入工号' }]}
>
<Input placeholder="请输入" style={{ height: '32px', fontSize: '12px' }} />
</Form.Item>
<Form.Item
label={<span style={{ fontSize: '12px', fontWeight: '500', color: '#666' }}>部门</span>}
name="department"
rules={[{ required: true, message: '请选择部门' }]}
>
<Select placeholder="请选择" style={{ height: '32px' }}>
<Select.Option value="环保管理">环保管理</Select.Option>
<Select.Option value="技术部">技术部</Select.Option>
<Select.Option value="生产部">生产部</Select.Option>
<Select.Option value="质量部">质量部</Select.Option>
</Select>
</Form.Item>
<Form.Item
label={<span style={{ fontSize: '12px', fontWeight: '500', color: '#666' }}>岗位</span>}
name="position"
rules={[{ required: true, message: '请选择岗位' }]}
>
<Select placeholder="请选择" style={{ height: '32px' }}>
<Select.Option value="污水运行">污水运行</Select.Option>
<Select.Option value="污水化验">污水化验</Select.Option>
<Select.Option value="环境监测">环境监测</Select.Option>
<Select.Option value="环保工程师">环保工程师</Select.Option>
<Select.Option value="安全员">安全员</Select.Option>
</Select>
</Form.Item>
<Form.Item
label={<span style={{ fontSize: '12px', fontWeight: '500', color: '#666' }}>性别</span>}
name="gender"
rules={[{ required: true, message: '请选择性别' }]}
>
<Select placeholder="请选择" style={{ height: '32px' }}>
<Select.Option value="男">男</Select.Option>
<Select.Option value="女">女</Select.Option>
</Select>
</Form.Item>
<Form.Item
label={<span style={{ fontSize: '12px', fontWeight: '500', color: '#666' }}>住址</span>}
name="address"
rules={[{ required: true, message: '请输入住址' }]}
>
<Input placeholder="请输入" style={{ height: '32px', fontSize: '12px' }} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label={<span style={{ fontSize: '12px', fontWeight: '500', color: '#666' }}>出生日期</span>}
name="birthDate"
rules={[{ required: true, message: '请选择出生日期' }]}
>
<DatePicker
placeholder="请选择"
style={{ width: '100%', height: '32px' }}
format="YYYY-MM-DD"
/>
</Form.Item>
<Form.Item
label={<span style={{ fontSize: '12px', fontWeight: '500', color: '#666' }}>入职时间</span>}
name="joinDate"
rules={[{ required: true, message: '请选择入职时间' }]}
>
<DatePicker
placeholder="请选择"
style={{ width: '100%', height: '32px' }}
format="YYYY-MM-DD"
/>
</Form.Item>
<Form.Item
label={<span style={{ fontSize: '12px', fontWeight: '500', color: '#666' }}>身份证号</span>}
name="idCard"
rules={[{ required: true, message: '请输入身份证号' }]}
>
<Input placeholder="请输入" style={{ height: '32px', fontSize: '12px' }} />
</Form.Item>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '15px' }}>
<div>
<div style={{ marginBottom: '10px' }}>
<span style={{ color: '#666', marginRight: '8px' }}>工号：</span>
<span>{selectedRecord.employeeId}</span>
</div>
<div style={{ marginBottom: '10px' }}>
<span style={{ color: '#666', marginRight: '8px' }}>部门：</span>
<span>{selectedRecord.department}</span>
</div>
<div style={{ marginBottom: '10px' }}>
<span style={{ color: '#666', marginRight: '8px' }}>岗位：</span>
<span>{selectedRecord.position}</span>
</div>
<div style={{ marginBottom: '10px' }}>
<span style={{ color: '#666', marginRight: '8px' }}>性别：</span>
<span>{selectedRecord.gender}</span>
</div>
<div style={{ marginBottom: '10px' }}>
<span style={{ color: '#666', marginRight: '8px' }}>住址：</span>
<span>{selectedRecord.address}</span>
</div>
</div>
<Form.Item
label={<span style={{ fontSize: '12px', fontWeight: '500', color: '#666' }}>联系方式</span>}
name="contact"
rules={[{ required: true, message: '请输入联系方式' }]}
>
<Input placeholder="请输入" style={{ height: '32px', fontSize: '12px' }} />
</Form.Item>
</Col>
</Row>
<div>
<div style={{ marginBottom: '10px' }}>
<span style={{ color: '#666', marginRight: '8px' }}>出生日期：</span>
<span>{selectedRecord.birthDate}</span>
</div>
<div style={{ marginBottom: '10px' }}>
<span style={{ color: '#666', marginRight: '8px' }}>入职时间：</span>
<span>{selectedRecord.joinDate}</span>
</div>
<div style={{ marginBottom: '10px' }}>
<span style={{ color: '#666', marginRight: '8px' }}>身份证号：</span>
<span>{selectedRecord.idCard}</span>
</div>
<div style={{ marginBottom: '10px' }}>
<span style={{ color: '#666', marginRight: '8px' }}>联系方式：</span>
<span>{selectedRecord.contact}</span>
</div>
</div>
</div>
</div>
{/* 头像上传区域 */}
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: '20px' }}>
<div style={{
width: '120px',
height: '120px',
backgroundColor: '#f0f0f0',
border: '2px dashed #d9d9d9',
borderRadius: '8px',
width: '90px',
height: '90px',
backgroundColor: '#D7FED2',
borderRadius: '4px',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
marginLeft: '20px'
justifyContent: 'center'
}}>
<div style={{ fontSize: '24px', color: '#999', marginBottom: '8px' }}>👤</div>
<div style={{ fontSize: '12px', color: '#999' }}>上传</div>
<img src={personnelIcon} style={{ width: '45px', height: '51px' }} alt="personnel" />
</div>
<div style={{ fontSize: '12px', color: '#3AD327', fontWeight: 500, marginTop: '5px' }}>上传</div>
</div>
</div>
{/* 岗位职责 */}
<Form.Item
label={<span style={{ fontSize: '12px', fontWeight: '500', color: '#666' }}>岗位职责</span>}
name="responsibility"
rules={[{ required: true, message: '请输入岗位职责' }]}
>
<div style={{ marginBottom: '20px' }}>
<div style={{
fontWeight: 'bold',
marginBottom: '10px',
fontSize: '12px'
}}>
岗位职责
</div>
<Input.TextArea
rows={4}
placeholder="请输入岗位职责"
style={{ fontSize: '12px', color: '#333333' }}
value={selectedRecord.responsibility}
rows={3}
readOnly
style={{ backgroundColor: '#f9f9f9' }}
/>
</Form.Item>
</div>
{/* 其他 */}
<Form.Item
label={<span style={{ fontSize: '12px', fontWeight: '500', color: '#999999' }}>其他</span>}
name="other"
>
<div>
<div style={{
fontWeight: 'bold',
marginBottom: '10px',
fontSize: '12px'
}}>
其他
</div>
<Input.TextArea
value={selectedRecord.other}
rows={3}
placeholder="暂无"
style={{ fontSize: '12px', color: '#333333' }}
readOnly
style={{ backgroundColor: '#f9f9f9' }}
/>
</Form.Item>
</Form>
</div>
</div>
)}
</Drawer>
</div>
);

19
src/pages/business_envInformation/module/EnvironmentalPersonnelManagement.less
Unescape Escape View File

@ -1,6 +1,25 @@
// 表单输入框样式
.formInput {
:global(.ant-input) {
color: #333333 !important;
font-size: 12px !important;
}
:global(.ant-select-selector) {
color: #333333 !important;
font-size: 12px !important;
}
:global(.ant-picker-input input) {
color: #333333 !important;
font-size: 12px !important;
}
}
.Rcontainer {
padding: 8px 6px 0px 6px;
height: 100%;

Write Preview
Loading…
Cancel
Save