AddEquipInventory.jsx

import React, { useState, useEffect } from 'react';
import { DatePicker, Card, Radio, Row, Col, Form, Input, Select, Button ,TreeSelect, message  } from 'antd';
import classNames from 'classnames';
import utilsStyles from '@/utils/utils.less';
import ShowApproval from '@/components/ShowApproval/ShowApproval'
import { connect } from 'umi';
import { dispatchHandle } from '@/utils/publicHandle';
import { dicFindUtils,DictBizType,ApproveType,convertFieldToNum } from '@/utils/utils';
import InstitutionsTree from '@/components/Customized/InstitutionsTree';
import OperateFooterBar from '@/components//OperateFooterBar';
import { initAreaTreeData, getChildren,range,disabledDate,disabledDateTime,disabledRangeTime} from '@/utils/common';
import UserTree from '@/components/Customized/UserTree';
import HouseTree from '@/components/Customized/HouseTree';
import moment from 'moment';

const { TextArea } = Input;
const { Option } = Select;

const AddEquipInventory = (props) => {
    const [form] = Form.useForm();
    const [valueRadio, setValueRadio] = useState(1);

    const {
        dispatch,
        setting: { users },
        universal: { approvalDetail ,orgAreaTree},
        opsDevice: { systemList },
        dict: {
            dicTotalsList,dicWarehouseList
        },
        user: {
            userTree
        },
        submitLoading
    } = props;
    console.log(`approvalDetail==========`,approvalDetail)
    const usersList = users.list;
    const equipType = dicTotalsList && dicFindUtils(dicTotalsList, DictBizType.equipType) || []; // 设备类型
    console.log(`equipType==========`, equipType);
    const equipTreeData = initAreaTreeData(equipType);

    /* 设备系统 */
    console.log(`systemList`,systemList)
  const systemData = systemList?.length > 0 ? systemList.map((item, index) => {
    item.id = `${index}-0`;
    item.selectable = false;
    const itemJson= JSON.stringify(item);
    const jsonData= itemJson
      .replace(/\bname\b/g, "title")
      .replace(/\bid\b/g, "value")
      .replace(/\bsystemNodeList\b/g, "children")
      .replace(/\bsubList\b/g, "children");
    return JSON.parse(jsonData)
  }) : []

    useEffect((payload={}) => {
        dispatchHandle(dispatch, 'opsDevice/device_service_system_tree_post',payload)//设备系统
        dispatchHandle(dispatch, 'universal/account_service_organization_tree_post', payload)//区域盘点
        //dispatchHandle(dispatch, 'setting/account_service_user_page_post', payload) // 人的下拉列表
         //查用户树
         dispatchHandle(dispatch, 'user/account_service_organization_tree_user_post');
    }, []);

    const handleSubmit = e => {
        e && e.preventDefault();
        //console.log(`approvalDetail is:`,approvalDetail,`approvalDetail length`,approvalDetail.length);
        if(approvalDetail && approvalDetail.length === 0 ){
            message.warn(`请配置好设备盘点审批流程！`);
            return false;
        }else{
           form.validateFields().then(values => {
                const payload = {
                    reviewRuleId: approvalDetail?.length > 0 && approvalDetail[0]?.id,//确认过，审核规则id
                    reviewIs:approvalDetail.length > 0 && approvalDetail[0]?.whetherNeedAudit,//确认过，是否需要审批
                    ...values
                };
               // console.log(`values format`,moment(values?.taskStartDateTime).format('YYYY/MM/DD HH:mm:ss'));
                dispatchHandle(
                    dispatch,
                    'opsEquip/operation_service_device_inventory_order_add_or_update_patch',
                    payload,
                    () => {
                        closeCurrentPage('/ops/equipDisposition/equipInventory')
                    })
            }).catch((err) => {
                console.log(err)
            });
        }
    };
    const onChange = e => {
        setValueRadio(e.target.value);
    };
    const onChangeInventoryArea = (val,record) => {
        console.log(`inventoryAreaId=== is:`, val,record);
        form.setFieldsValue({
            inventoryAreaId: val
        })
      }

    const formItemLayout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 }
    };
    const nowDate = new Date();

    return (
        <div className={classNames(utilsStyles.disFlexCol, utilsStyles.fullContainer)}>
            <Form form={form} onFinish={handleSubmit}>
                <Card>
                    <h4 className={classNames(utilsStyles.comTitleBar)}> 基本信息</h4>
                    <Row gutter={10} className={classNames(utilsStyles.gutterBox)}>
                        {/* <Col span={6}>
                            <Form.Item
                                name='deviceInventoryOrder'
                                className={classNames(utilsStyles.antFormItem)}
                                label='盘点单号'
                                rules={[{ required: true, message: `自动生成盘点单号` }]}
                                {...formItemLayout}>
                                <Input style={{ width: '100%' }} placeholder="自动生成" />
                            </Form.Item>
                        </Col> */}
                        <Col span={6} lg={8} >
                            <Form.Item
                                name='taskName'
                                className={classNames(utilsStyles.antFormItem)}
                                label='任务名称'
                                rules={[{ required: true, message: `请输入任务名称` }]}
                                {...formItemLayout}>
                                <Input style={{ width: '100%' }} placeholder="请输入" />
                            </Form.Item>
                        </Col>
                        <Col span={6} lg={8}>
                            <Form.Item
                                name='taskStartDateTime'
                                className={classNames(utilsStyles.antFormItem)}
                                label='计划开始时间'
                                rules={[{ required: true, message: `请选择计划开始时间` }]}
                                {...formItemLayout}>
                                <DatePicker style={{ width: '100%' }} 
                                    disabledDate={val => disabledDate(val,true)}
                                    showTime
                                />
                            </Form.Item>
                        </Col>
                        <Col span={6} lg={8}>
                            <Form.Item
                                name='taskEndDateTime'
                                className={classNames(utilsStyles.antFormItem)}
                                label='计划结束时间'
                                rules={[{ required: true, message: `请选择计划结束时间` }]}
                                {...formItemLayout}>
                                <DatePicker style={{ width: '100%' }}
                                     disabledDate={val => disabledDate(val,true)}
                                     showTime
                                />
                            </Form.Item>
                        </Col>
                        <Col span={6} lg={8}>
                            <Form.Item
                                name='firstInventoryUser'
                                className={classNames(utilsStyles.antLightFormItem)}
                                label='初盘人'
                                rules={[{ required: true, message: `请选择初盘人` }]}
                                {...formItemLayout}>
                                 <UserTree userTree = { userTree }  treeCheckable = { false }   />
                            </Form.Item>
                        </Col>
                        <Col span={6} lg={8}>
                            <Form.Item
                                name='repeatInventoryUser'
                                className={classNames(utilsStyles.antLightFormItem)}
                                label='复盘人'
                                rules={[{ required: true, message: `请选择复盘人` }]}
                                {...formItemLayout}>
                                <UserTree userTree = { userTree }  treeCheckable = { false }   />
                            </Form.Item>
                        </Col>
                        
                        <Col span={24}>
                            <>
                                <div style={{ margin: '20px 0 0 20px' }}>
                                    <span>任务描述：</span>
                                </div>
                                <Form.Item name='inventoryRemarks'>
                                    <TextArea rows='6' placeholder="请输入" />
                                </Form.Item>
                            </>
                        </Col>
                        <Col span={24}>
                            <>
                                <h4 style={{ margin: '15px 0 10px' }}>| 盘点设备</h4>
                                <Radio.Group onChange={onChange} value={valueRadio}>
                                    <Radio value={1}>全部设备</Radio>
                                    <Radio value={2}>仅选择</Radio>
                                </Radio.Group>
                            </>
                        </Col>
                        {
                        valueRadio !==1 && <Col span = {24}>
                        <Row>
                            <Col span={6} style={{ margin: '15px 0 0 0' }}  lg={12}>
                                <Form.Item
                                    name='inventoryAreaId'
                                    className={classNames(utilsStyles.antFormItem)}
                                    label='区域盘点'
                                    {...formItemLayout}>
                                    {/* <InstitutionsTree orgAreaTree = { orgAreaTree } onChange = { onChangeInventoryArea} /> */}
                                    <HouseTree />
                                </Form.Item>
                            </Col>
                            <Col span={6} style={{ margin: '15px 0 10px 0' }} lg = {12} >
                                            <Form.Item
                                                name='inventoryDeviceTypeId'
                                                className={classNames(utilsStyles.antFormItem)}
                                                label='盘点设备类型' 
                                                {...formItemLayout}
                                                >
                                                <TreeSelect
                                                    showSearch
                                                    style={{ width: '100%' }}
                                                    allowClear
                                                    placeholder="请选择"
                                                    treeData={ equipTreeData }
                                                />
                                            </Form.Item>
                                        </Col>
                                </Row> 
                        </Col>
                        }
                    </Row>

                </Card>
            </Form>
            <Card style={{ margin:`15px 0`,display:(approvalDetail?.length > 0) ? 'block' : 'none'}}>
                <h4 className={classNames(utilsStyles.comTitleBar)}> 审批流程</h4>
                <div style={{ paddingTop: 10 }}>
                    <ShowApproval businessType={ ApproveType.equipType} />
                </div>
             </Card>
            <OperateFooterBar handleClose={()=>{}} handleSubmit={handleSubmit} submitLoading = { submitLoading } />
        </div>
    )
}

export default connect(({ opsEquip, setting,universal,opsDevice, loading,dict,user}) => ({
    opsEquip,
    setting,
    dict,
    universal,
    opsDevice,
    user,
    loading: loading.models.opsEquip || loading.models.universal,
    submitLoading:loading.effects['opsEquip/operation_service_device_inventory_order_add_or_update_patch']
}))(AddEquipInventory);