MyApply.jsx

import React, { useRef, useState } from "react"
import { Card, Space, Tag, Input, Form, Select, Button, Tabs, Table, Divider, Popconfirm, Row, Col } from "antd";
import { SettingOutlined, SearchOutlined } from "@ant-design/icons"
import { history, connect, useAccess, Access } from "umi"
import moment from 'moment';

import PopTableCheckbox from '@/components/PopTableCheckbox';
import useFormTable from '@/useHooks/useFormTable'
import { dispatchHandle } from '@/utils/publicHandle'
import TreeSelector from '@/components/TreeSelector'

import style from "./index.less"

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

const MyApply = (props) => {
    const {
        dispatch,
        loading,
        docimasyType,
        docimasy: {
            myApplyList
        },
        pathKey,//用于配置列的下拉索引
    } = props
    const access = useAccess();
    const popRef = useRef();
    const tabsList = [
        { name: '全部任务', key: '' },
        { name: '待审批', key: 1 },
        { name: '审批通过', key: 2 },
        { name: '已驳回', key: 3 },
        { name: '已撤销', key: 5 },
    ]
    const [form] = Form.useForm();
    const getListItem = (payload = {}) => {
        dispatchHandle(
            dispatch,
            'docimasy/operation_service_m_check_task_iStartedTaskApprovaListPage_post',
            payload
        )
    }
    const { tableProps, search } = useFormTable(getListItem, {
        form
    })
    // tab切换
    const tabChange = (activeKey) => {
        search.submit({
            state: activeKey
        })
    }
    // 撤销
    const revokeAction = (record) => {
        dispatchHandle(
            dispatch,
            'docimasy/operation_service_m_check_task_withdraw_id_delete',
            { id: record.id },
            () => {
                search.refresh()
            }
        )
    }
    const taskColumns = [
        {
            title: '审批类型',
            dataIndex: 'taskAuditTypeName',
        },
        {
            title: '任务编号',
            dataIndex: 'taskNumber',
        },
        // {
        //     title: '任务名称',
        //     dataIndex: 'taskName',
        // },
        {
            title: '检/校类型',
            dataIndex: 'type',
            render: (text, record) => record?.taskBO?.taskTypeName || '--'
        },
        {
            title: '检/校设备',
            dataIndex: 'equipmentName',
            render: (text, record) => record?.taskBO?.deviceName || '--'
        },
        {
            title: '原结束时间',
            dataIndex: 'taskEndTime',
            width: '10%',
            render: (text, record) => <a style={{ color: '#1890ff' }}>{moment(text).format('YYYY/MM/DD HH:mm:ss')}</a>,
        },
        {
            title: '延期至',
            dataIndex: 'delayTime',
            width: '10%',
            render: (text, record) => (
                <>{text ? moment(text).format('YYYY/MM/DD HH:mm:ss') : '--'}</>
            ),
        },
        {
            title: '负责人',
            dataIndex: 'principalName',
            render: (text, record) => record?.taskBO?.principalName || '--'
        },
        // {
        //     title: '任务执行人',
        //     dataIndex: 'taskExecutorNames',
        //     render: (text , record)=>record?.taskBO?.taskExecutorNames || '--'
        // },
        {
            title: '申请状态',
            dataIndex: 'auditState',
            render: (text, record) => ({
                1: <span className='btn_warning'>待审核</span>,
                2: <span className='btn_success'>审核通过</span>,
                3: <span className='btn_disabled'>已驳回</span>,
                4: <span className='btn_warning'>审核中</span>,
                5: <span className='btn_disabled'>已撤销</span>,
            }[record?.state])
        },
        {
            title: '操作',
            dataIndex: 'action',
            fixed: 'right',
            disabled: true,
            render: (text, record) => (
                <div>
                    <Access accessible={access.insideAccess('AYzBOlAkFFO')}>
                        <>
                            <a onClick={() => history.push(`/ops/equipDisposition/docimasy/task/approvaldetail?id=${record.id}&pageType=${'apply'}`)}>查看</a>
                            <Divider type="vertical" />
                        </>
                    </Access>
                    <Access accessible={access.insideAccess('YGQnacoMrcu')}>
                        {
                            record.detailsBO && record.detailsBO.auditState === 1 && (
                                <Popconfirm
                                    title='确认撤销此申请？'
                                    onConfirm={() => revokeAction(record)}
                                >
                                    <a>撤销</a>
                                </Popconfirm>
                            )
                        }
                    </Access>
                </div>

            ),
        },

    ];
    // 配置列
    const [tableColumns, setTableColumns] = useState([
        'taskAuditType',
        "taskNumber",
        // "taskName",
        "type",
        "equipmentName",
        "taskEndTime",
        "delayTime",
        "principalName",
        // "taskExecutorNames",
        'auditState',
        "action"
    ]);
    const popRef2 = useRef();
    const options = popRef2 && (popRef2.current?.handleFormColumns(tableColumns, taskColumns)) || taskColumns;
    return (
        <div className={style.main_task}>
            {/* // 筛选条件 */}
            <div className={style.main_header}>
                <Form form={form} onValuesChange={search.submit} style={{ width: '100%', marginTop: 24 }}>
                    <Row justify="space-between">
                        <Col span={6}>
                            <Form.Item name="taskType" label="任务类型">
                                <Select
                                    allowClear
                                    placeholder="请选择"
                                    showSearch
                                    optionFilterProp="children"
                                >
                                    {
                                        docimasyType && docimasyType?.length > 0 && docimasyType?.map(item => (
                                            <Option key={item?.value} value={item?.value}>{item?.title || ''}</Option>
                                        ))
                                    }
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item name="principalId" label="责任人">
                                <TreeSelector isDepart={false} />
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item name="taskNumberName" label="查询">
                                <Input suffix={<SearchOutlined style={{ color: "rgba(0 , 0 , 0 , 0.25)" }} />} placeholder="请输入任务名称/任务编号" allowClear />
                            </Form.Item>
                        </Col>
                        <Col>
                            <PopTableCheckbox
                                ref={popRef2}
                                options={taskColumns}
                                tableColumns={tableColumns}
                                setTableColumns={setTableColumns}
                                pathKey={pathKey}
                            >
                                <Button
                                    bd="blue"
                                    icon={<SettingOutlined />}
                                >
                                    配置列</Button>
                            </PopTableCheckbox>
                        </Col>
                    </Row>
                </Form>
            </div>
            <Tabs className={style.tables} type="card" onChange={tabChange} style={{ marginBottom: 5 }}>
                {
                    tabsList.map(item => {
                        return <TabPane tab={item.name} key={item.key} />
                    })
                }
            </Tabs>
            <Table
                loading={loading}
                columns={options || taskColumns}
                dataSource={myApplyList.list}
                scroll={{
                    x: 2200
                }}
                pagination={myApplyList.pagination}
                {...tableProps}
            />
        </div>
    )
}

export default connect(({ docimasy, dict, loading }) => ({
    dict,
    docimasy,
    loading: loading.effects['docimasy/operation_service_m_check_task_iStartedTaskApprovaListPage_post']
}))(MyApply)