dq-sms/src/pages/safe_majorHazard/form/StaffSheetUpdateForm.js

import { useState, useEffect } from 'react'
import { Col, DatePicker, Form, Input, Modal, Row, Select } from 'antd'
import SelectOrganTree from '@/components/SelectOrganTree'
import datadictionary from '@/utils/dataDictionary'
import { formatDictOptions, verifyPhone } from '@/utils/globalCommon'
import { NumberInput } from '@/components/NumberInput'
import styles from '../StaffSheetList.less'
import style from '@/global.less'
import dayjs from 'dayjs'
import { formatDate, formatDateObject } from '@/utils/formatUtils'

const { Item: FormItem } = Form
const { TextArea } = Input
const dictData = datadictionary

//新增表单
let getDeptTreeBySelectTree
let getOrganTreeBySelectTree

const StaffSheetUpdateForm = (props) => {
    const [form] = Form.useForm()
    const [jobStatus, setJobStatus] = useState('1')
    const [userStatus, setUserStatus] = useState('0')

    const {
        handleUpdate,
        updateModalVisible,
        handleUpdateModalVisible,
        values,
        loading,
        dispatch,
        selectDeptTree,
        selectOrganTree
    } = props

    const selectedDeptTreeValue = (deptRecord) => {
        getDeptTreeBySelectTree = deptRecord
    }

    const selectedOrganTreeValue = (orgRecord) => {
        getOrganTreeBySelectTree = orgRecord
    }

    const parentDeptTreeMethod = {
        dispatch: dispatch,
        selectDeptTree: selectDeptTree,
        selectedDeptTreeValue: selectedDeptTreeValue,
    }

    const parentOrganTreeMethod = {
        dispatch: dispatch,
        selectOrganTree: selectOrganTree,
        selectedOrganTreeValue: selectedOrganTreeValue
    }

    useEffect(() => {
        setJobStatus(values.job_status)
        setUserStatus(values.status)

        form.setFieldsValue({
            user_id: values.user_id,
            user_name: values.user_name,
            user_name_cn: values.user_name_cn,
            user_name_en: values.user_name_en,
            password: values.password,
            email: values.email,
            phone: values.phone,
            landline: values.landline,
            sex: values.sex,
            avatar: values.avatar,
            sign: values.sign,
            tags: values.tags,
            id_card: values.id_card,
            birthday: formatDateObject(values.birthday, 'YYYY-MM-DD'),
            job_status: values.job_status,
            hiredate: formatDateObject(values.hiredate, 'YYYY-MM-DD'),
            departure_time: formatDateObject(values.departure_time, 'YYYY-MM-DD'),
            user_type: values.user_type,
            emp_no: values.emp_no,
            access_card_no: values.access_card_no,
            country: values.country,
            province: values.province,
            city: values.city,
            address: values.address,
            work_addr: values.work_addr,
            floor: values.floor,
            inprovince: values.inprovince,
            // dept_code: values.dept_code,
            // dept_name: values.dept_name,
            inner_dept_code: values.inner_dept_code,
            org_code: values.org_code,
            org_name: values.org_name,
            inner_org_code: values.inner_org_code,
            posts: values.posts ? JSON.parse(values.posts) : [],
            wx_openid: values.wx_openid,
            wx_mpopenid: values.wx_mpopenid,
            wx_miniopenid: values.wx_miniopenid,
            wx_unionid: values.wx_unionid,
            mobile_imei: values.mobile_imei,
            device_num: values.device_num,
            al_taobao: values.al_taobao,
            al_alipay: values.al_alipay,
            al_dingding: values.al_dingding,
            is_system_user: values.is_system_user,
            mgr_type: values.mgr_type,
            pwd_security_level: values.pwd_security_level,
            pwd_update_date: values.pwd_update_date,
            last_login_ip: values.last_login_ip,
            last_login_date: values.last_login_date,
            freeze_date: values.freeze_date,
            freeze_cause: values.freeze_cause,
            zindex: values.zindex,
            wx_msg: values.wx_msg,
            email_msg: values.email_msg,
            system_msg: values.system_msg,
            remarks: values.remarks,
            status: values.status,
            creator: values.creator,
            create_date: values.create_date,
            updater: values.updater,
            update_date: values.update_date
        })
    }, [])

    const handleLocalUpdate = () => {
        form
            .validateFields()
            .then(fieldsValue => {
                const formVals = {...values, ...fieldsValue}
                formVals.birthday = formatDate(formVals.birthday, 'YYYY-MM-DD')
                formVals.hiredate = formatDate(formVals.hiredate, 'YYYY-MM-DD')
                formVals.departure_time = formatDate(formVals.departure_time, 'YYYY-MM-DD')
                formVals.posts = formVals.posts ? JSON.stringify(formVals.posts) : null
                formVals.freeze_date = '3' === formVals.status ? formatDate(dayjs().endOf('day'), 'YYYY-MM-DD') : null
                formVals.freeze_cause = '3' === formVals.status ? formVals.freeze_cause : null

                // if (getDeptTreeBySelectTree) {
                //     formVals.dept_code = getDeptTreeBySelectTree.dept_code
                //     formVals.dept_name = getDeptTreeBySelectTree.title
                // }

                if (getOrganTreeBySelectTree) {
                    formVals.org_code = getOrganTreeBySelectTree.org_code
                    formVals.org_name = getOrganTreeBySelectTree.title
                }

                handleUpdate(formVals)

            })
            .catch(errInfo => {})
    }

    const afterClose = () =>{
        form.resetFields();
    }

    const handleJobStatusChange = (value) => {
        setJobStatus(value)
    }

    const handleUserStatusChange = (value) => {
        setUserStatus(value)
    }

    return (
        <Modal
            width={800}
            height={550}
            bodyStyle={{ height: '500px', overflowY: 'auto' }}
            className={style.updateForm}
            centered
            destroyOnClose
            title='修改'
            open={updateModalVisible}
            onOk={() => handleLocalUpdate()}
            onCancel={() => handleUpdateModalVisible()}
            afterClose={() => afterClose()}
            confirmLoading={loading}
        >
            <Form form={form} layout='vertical' requiredMark={false}>
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={12} sm={24}>
                        <FormItem label='登录账号' name='user_name' rules={[{ required: true, message: '请输入至少2个字符的用户名！', min: 2 }]}>
                            <Input placeholder='请输入' />
                        </FormItem>
                    </Col>

                    <Col md={12} sm={24}>
                        <FormItem label='用户名称' name='user_name_cn' rules={[{ required: true, message: '请输入至少2个字符的用户名称！', min: 2 }]}>
                            <Input placeholder='请输入' />
                        </FormItem>
                    </Col>
                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={12} sm={24}>
                        <FormItem label='用户性别' name='sex'>
                            <Select options={formatDictOptions(dictData.sys_user_sex, 'dict_label', 'dict_value')} placeholder='请选择' />
                        </FormItem>
                    </Col>

                    <Col md={12} sm={24}>
                        <FormItem label='用户生日' name='birthday'>
                            <DatePicker format='YYYY-MM-DD' placeholder='请选择' />
                        </FormItem>
                    </Col>
                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={12} sm={24}>
                        <FormItem label='手机号码' name='phone' rules={[{ required: false, min: 1, validator: verifyPhone }]}>
                            <NumberInput placeholder='请输入' style={{width: '100%'}} maxLength={11} />
                        </FormItem>
                    </Col>

                    <Col md={12} sm={24}>
                        <FormItem label='电子邮箱' name='email' rules={[{ type: 'email' }]}>
                            <Input placeholder='请输入' />
                        </FormItem>
                    </Col>
                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={12} sm={24}>
                        <FormItem label='机构名称' name='org_code'>
                            <SelectOrganTree {...parentOrganTreeMethod} />
                        </FormItem>
                    </Col>

                    {/*<Col md={12} sm={24}>*/}
                    {/*    <FormItem label='部门名称' name='dept_code'>*/}
                    {/*        <SelectDeptTree {...parentDeptTreeMethod} placeholder={'请选择部门'} />*/}
                    {/*    </FormItem>*/}
                    {/*</Col>*/}

                    <Col md={12} sm={24}>
                        <FormItem label='所属岗位' name='posts'>
                            <Select
                                mode='multiple'
                                allowClear
                                placeholder='请选择'
                                options={formatDictOptions(dictData.sys_user_post, 'dict_label', 'dict_value')}
                            />
                        </FormItem>
                    </Col>
                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    {/*<Col md={12} sm={24}>
                        <FormItem
                            label={
                                <span>
                                    密码
                                    <em className={styles.optional}>
                                      <Tooltip title='默认密码：123456'>
                                        <InfoCircleOutlined style={{ marginLeft: 4 }} />
                                      </Tooltip>
                                    </em>
                                </span>
                            }
                            name='password'
                            initialValue={'123456'}
                            rules={[{required: true, message: '请输入至少6个字符的密码！', min: 6}]}>
                            <Input placeholder='请输入' type='password'/>
                        </FormItem>
                    </Col>*/}

                    <Col md={12} sm={24}>
                        <FormItem label='在职状态' name='job_status'>
                            <Select
                                placeholder='请选择'
                                options={formatDictOptions(dictData.sys_job_status, 'dict_label', 'dict_value')}
                                onChange={handleJobStatusChange}
                            />
                        </FormItem>
                    </Col>

                    {jobStatus === '1' ?
                        <Col md={12} sm={24}>
                            <FormItem label='入职时间' name='hiredate' initialValue={dayjs().endOf('day')}>
                                <DatePicker format='YYYY-MM-DD' placeholder='请选择' />
                            </FormItem>
                        </Col>
                        :
                        <Col md={12} sm={24}>
                            <FormItem label='离职时间' name='departure_time'>
                                <DatePicker format='YYYY-MM-DD' placeholder='请选择' />
                            </FormItem>
                        </Col>
                    }

                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

                    <Col md={12} sm={24}>
                        <FormItem label='员工类型' name='user_type'>
                            <Select
                                placeholder='请选择'
                                options={formatDictOptions(dictData.sys_user_type, 'dict_label', 'dict_value')}
                            />
                        </FormItem>
                    </Col>

                    <Col md={12} sm={24}>
                        <FormItem label='员工工号' name='emp_no'>
                            <Input placeholder='请输入' />
                        </FormItem>
                    </Col>
                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={12} sm={24}>
                        <FormItem label='门禁卡号' name='access_card_no'>
                            <Input placeholder='请输入' />
                        </FormItem>
                    </Col>

                    <Col md={12} sm={24}>
                        <FormItem label='是否是管理员' name='mgr_type'>
                            <Select
                                style={{width: '100%'}}
                                placeholder='请选择'
                                options={formatDictOptions(dictData.sys_mgr_type, 'dict_label', 'dict_value')}
                            />
                        </FormItem>
                    </Col>
                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={12} sm={24}>
                        <FormItem label='状态' name='status'>
                            <Select
                                placeholder='请选择'
                                options={formatDictOptions(dictData.user_status, 'dict_label', 'dict_value')}
                                onChange={handleUserStatusChange}
                            />
                        </FormItem>
                    </Col>

                    { userStatus === '3' &&
                        <Col md={12} sm={24}>
                            <FormItem label='冻结原因' name='freeze_cause'>
                                <Input placeholder='请输入' />
                            </FormItem>
                        </Col>
                    }
                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={24} sm={24}>
                        <FormItem label='备注' name='remarks'>
                            <TextArea rows={4} />
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </Modal>
    )
}

export default StaffSheetUpdateForm