WaitInventory.jsx

import React, { useState, useRef,useEffect } from 'react';
import { Tabs, Form, Col, Row, Select, Input, Button, Divider ,Popconfirm,Table,Badge} from 'antd';
import { SettingOutlined } from '@ant-design/icons';
import { history } from 'umi';
import PopTableCheckbox from '@/components/PopTableCheckbox';
import useFormTable from '@/useHooks/useFormTable';
import utilsStyles from '@/utils/utils.less';
import classNames from 'classnames';
import style from "../index.less";
import { dispatchHandle } from '@/utils/publicHandle';
import moment from 'moment';
import { connect } from 'umi';

const { TabPane } = Tabs;
const { Search } = Input;
const { Option } = Select;

const WaitInventory = (props) => {
    const [form] = Form.useForm();
    const [tableColumns, setTableColumns] = useState([
        'deviceInventoryOrder',
        'taskName', 
        'taskEndDateTime', 
        'firstInventoryUserName', 
        'repeatInventoryUserName', 
        'shouldInventoryAmount', 
        'actualInventoryAmount', 
        'orderStatus', 
        'operate']);
    const popTableCheckboxRef = useRef();
    const tabKeys = [
        {
            name: '全部',
            key: null
        },
        {
            name: '待审核',
            key: 4
        },
        {
            name:'审批通过',
            key: 2
        },
        {
            name: '审核不通过',
            key: 3
        }
    ];
    const {
        dispatch,
        opsEquip: { inventoryList },
        setting: { users },
        loadingQuery
    } = props;
  

    const usersList = users.list;

    const [activeKeys, setActiveKeys] = useState('');
    // 审核状态 (1待审核 2 审核通过  3 审核不通过 )
    const allTabsChange = (activeKey) => {
        setActiveKeys(activeKey);
        let searchData = search.searchData;
        console.log(`searchData is:`, searchData);
        search.submit({ ...searchData, auditState: Number(activeKey) })
    };

    useEffect((payload = {}) => {
        dispatchHandle(dispatch, 'setting/account_service_user_page_post', payload)
    }, []);

        //更新审批的数量tag
    useEffect(() => {
        activeKeys === 1 && dispatchHandle(
                  dispatch,
                    'opsEquip/setModelsState',
                    {
                        equipInventoryAuditCount: inventoryList?.pagination?.total || 0
                    }
                )
    }, [activeKeys, inventoryList]);

    const getListItems = (payload = {}) => {
        dispatchHandle(
            dispatch,
            'opsEquip/operation_service_device_inventory_order_myAudit_post',
            payload,
        );
    }
    const tableDelete = (id) => {
        dispatchHandle(dispatch, 'opsEquip/operation_service_device_inventory_order_cancel_get', {id}, () => {
            search.refresh();
        });
    }
    //领导公共审核撤销
    const revertRecordBack = reviewRecordId => {
          dispatchHandle(dispatch, 'universal/common_service_m_audit_nodeRevoke_auditId_delete', {auditId:reviewRecordId}, () => {
            search.refresh();
        });
    }
    const { tableProps, search } = useFormTable(getListItems, {
        form,
    });

    const options = [

        {
            title: '盘点单号', dataIndex: 'deviceInventoryOrder',
        },
        {
            title: '任务名称', dataIndex: 'taskName', 
        },
        {
            title: '起止时间', dataIndex: 'taskEndDateTime',
            render: (val,record) => {
                return `${record.taskStartDateTime && moment(record.taskStartDateTime).format(`YYYY/MM/DD`)}-${ record.taskEndDateTime && moment(record.taskEndDateTime).format(`YYYY/MM/DD`)}` || '暂无'
            }
        },
        {
            title: '初盘人', dataIndex: 'firstInventoryUserName'
        },
        { title: '复盘人', dataIndex: 'repeatInventoryUserName'},
        { title: '应盘数', dataIndex: 'shouldInventoryAmount' },
        { title: '实盘数', dataIndex: 'actualInventoryAmount' },
        {
            //工单状态 1:待审批 5:已完成 10:已驳回 15:已撤销 20:未开始 25:进行中 30:已超时 35:已关闭
            title: '盘点状态', dataIndex: 'orderStatus',
            render: (val) => {
                return (
                    <>
                        {(val === 1 && (
                            <span className={classNames(utilsStyles.comTag)} type="warn" style={{ paddingRight: '20px', paddingLeft: '20px' }}>
                                待审批
                            </span>
                        )) || (val === 5 && (
                                <span className={classNames(utilsStyles.comTag)} type="success">
                                    已完成
                                </span>
                            )) || (val === 10 && (
                                <span className={classNames(utilsStyles.comTag)} type="warn">
                                    已驳回
                                </span>
                            )) ||  (val === 15 && (
                                <span className={classNames(utilsStyles.comTag)} type="warn">
                                    已撤销
                                </span>
                            )) ||
                            (val === 20 && (
                                <span className={classNames(utilsStyles.comTag)} type="success">
                                    未开始
                                </span>
                            )) ||
                            (val === 25 && (
                                <span className={classNames(utilsStyles.comTag)} type="warn" style={{ paddingRight: '20px', paddingLeft: '20px' }}>
                                    进行中
                                </span>
                            )) || (val === 30 && (
                                <span className={classNames(utilsStyles.comTag)} type="warn" style={{ paddingRight: '20px', paddingLeft: '20px' }}>
                                    已超时
                                </span>
                            )) ||  (val === 35 && (
                                <span className={classNames(utilsStyles.comTag)} type="warn" style={{ paddingRight: '20px', paddingLeft: '20px' }}>
                                    已关闭
                                </span>
                            )) || <span className={classNames(utilsStyles.comTag)} type="blue" style={{ paddingRight: '20px', paddingLeft: '20px' }}>
                                    暂无状态
                           </span>
                        }
                    </>
                );
            },
        },

        {
            title: '操作', dataIndex: 'operate', disabled: true,
            render: (val,record) => (
                <>
                    {/* 
                    工单状态 4,待审核 2 通过 3，不通过
                    */}
                    {
                        Number(record.personalAuditState) === 4 && <a onClick={()=>history.push(`/ops/equipDisposition/equipInventory/audit/${record?.id}`)}>审批</a> || <a onClick={()=>history.push(`/ops/equipDisposition/equipInventory/auditView/${record?.id}`)}>查看</a>
                    }
                </>
            ),
        },

    ];
    const columns = popTableCheckboxRef && (popTableCheckboxRef.current?.handleFormColumns(tableColumns, options)) || options;
    const formItemLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
    };
    const formItemLayout2 = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
    };

    return (
        <div>
            <Form form={form} style={{ marginTop: '15px' }} onValuesChange={search.submit}>
                <Row>
                 <Col span={6}>
                        <Form.Item name='deviceInventoryOrder' label='盘点单号' {...formItemLayout}>
                            <Input placeholder='请填写' allowClear style={{width:'100%'}} />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item name='taskName' label='任务名称' {...formItemLayout}>
                            <Input placeholder='请填写' allowClear style={{width:'100%'}} />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item name='search' label='查询' {...formItemLayout2}>
                            <Search placeholder='请输入' style={{width:'100%'}} />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item label='' style={{ textAlign: 'end' }}>
                            <PopTableCheckbox ref={popTableCheckboxRef} options={options} tableColumns={tableColumns} setTableColumns={setTableColumns} >
                                <Button bd="blue" icon={<SettingOutlined />} style={{ marginTop: 2 }} >配置列</Button>
                            </PopTableCheckbox>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
            <div>
                <Divider style={{ marginTop: '0' }} />
                <Tabs type="card" onChange={allTabsChange}>
                     {
                        tabKeys.map(i => (
                            <TabPane tab={i.name} key={i.key} />
                        ))
                    }
                </Tabs>
                 <Table
                    columns={columns}
                    dataSource={inventoryList.list}
                    rowKey={record => record.id}
                    className='custom-table-setting'
                    {...tableProps}
                    style={{ marginTop: 15 }}
                    loading = { loadingQuery }
                />
            </div>
            {/* 待审批条数 */}
            <Badge className={style.count}>{ inventoryList?.pagination?.total || 0 }</Badge>
        </div>
    )
}

export default connect(({ opsEquip, setting,loading }) => ({
    opsEquip,setting,
    loading,
    loadingQuery:loading.effects['opsEquip/operation_service_device_inventory_order_myAudit_post']
}))(WaitInventory);