MedicalQualificationMana/src/pages/qualificationReview/index.tsx

/*
 * @Author: your name
 * @Date: 2022-02-21 09:40:09
 * @LastEditTime: 2022-02-21 11:42:38
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /MedicalQualificationMana/src/pages/qualificationReview/index.tsx
 */


import { useEffect, useState } from 'react'
import KCTable from "@/components/kcTable";
import MQPageContainer from "@/components/MQPageContainer";
import { getMineQualifiApplyList, QualificationDataType } from "@/service/qualification";
import { ProColumns } from "@ant-design/pro-table";
import { ProFormRadio, ProFormCheckbox, ProFormDependency, ProFormTextArea,ProFormDigit } from '@ant-design/pro-form';
import { Button, Form } from 'antd';
import KCModal from '@/components/KCModal';

import './style.less';



export default () => {

    const columns: ProColumns<QualificationDataType>[] = [
        {
            title: 'id',
            dataIndex: 'id',
            hideInTable: true
        },
        {
            title: '资质类目',
            dataIndex: 'qualificationClass',
            hideInSearch: false,
            valueType: 'cascader'
        },
        {
            title: '资质编号',
            dataIndex: 'qualificationNum',
        },
        {
            title: '资质名称',
            dataIndex: 'qualificationName',
            hideInSearch: false
        },
        {
            title: '被授予人',
            dataIndex: '',
            hideInSearch: false
        },
        {
            title: '佐证材料',
            dataIndex: 'supportMaterial',
        },
        {
            title: '授权依据',
            dataIndex: 'authorBasis',
        },
        {
            title: '科审',
            dataIndex: '1',
        },
        {
            title: '医务审',
            dataIndex: '2',
        },
        {
            title: '院审',
            dataIndex: '3',
        },
        {
            title: '申请日期',
            dataIndex: 'applyDate',
            hideInSearch: false,
            valueType: 'dateRange'
        }
    ]

    const [modalVisible, setModalVisible] = useState(false);
    const [modalActType, setModalActType] = useState<'review' | 'authorize' | undefined>(undefined);

    const getTableData = async (params: any) => {
        const resp = await getMineQualifiApplyList({ params });
        if (resp) {
            const { list = [], current, totalCount } = resp;
            return {
                data: list,
                success: true,
                total: totalCount,
            }
        }
        return {
            data: [],
            success: false
        }
    }

    const onVisibleChangeHandle = (bool: boolean) => {
        setModalVisible(bool);
    }

    const showModalHandle = (type: 'review' | 'authorize') => {
        setModalVisible(true);
        setModalActType(type)
    }

    useEffect(() => {

    }, [])

    return (
        <MQPageContainer className="QualificationApplication">
            <KCModal className='QualificationApplicationModal' visible={modalVisible} onVisibleChange={onVisibleChangeHandle} width={600}
                title={modalActType == 'authorize' ? '临时授权' : '审核操作'} layout='horizontal'>

                {
                    modalActType == 'review' ? (
                        //审核操作
                        <>
                            <ProFormRadio.Group
                                name="radio-group"
                                label="选择操作"
                                options={[
                                    {
                                        label: '通过',
                                        value: 'a',
                                    },
                                    {
                                        label: '驳回',
                                        value: 'b',
                                    },
                                ]}
                            />
                            <ProFormDependency name={['name']}>
                                {
                                    ({ name }) => {
                                        return (
                                            <>
                                                <ProFormCheckbox.Group
                                                    name="checkbox"
                                                    label="驳回原因"
                                                    options={['农业', '制造业', '互联网']}
                                                />
                                                <ProFormTextArea
                                                    name="text"
                                                    label="其他驳回原因"
                                                    placeholder="请输入"
                                                    fieldProps={{}}
                                                />
                                            </>
                                        )
                                    }
                                }
                            </ProFormDependency>
                        </>

                    ) : (
                        <>
                            <ProFormRadio.Group
                                name="radio-group"
                                label="选择操作"
                                options={[
                                    {
                                        label: '三个月',
                                        value: 'a',
                                    },
                                    {
                                        label: '自定义',
                                        value: 'b',
                                    },
                                ]}
                            />
                            <ProFormDependency name={['name']}>
                                {
                                    ({ name }) => {
                                        return (
                                            <Form.Item wrapperCol={{span:12}}>
                                                <ProFormDigit
                                                    label="自定义天数"
                                                    name="input-number"
                                                    min={1}
                                                    max={360}
                                                    placeholder='请输入数字'
                                                    fieldProps={{
                                                         precision: 0,
                                                         addonAfter:'天'
                                                    }}
                                                />
                                            </Form.Item>
                                        )
                                    }
                                }
                            </ProFormDependency>
                            <div className='bottomTip' dangerouslySetInnerHTML={{__html:'* 确定要给予选择的 <span>16个</span> 资质临时授，起止时间为<span>16个</span>到<span>16个</span>'}}></div>
                        </>
                    )
                }

            </KCModal>

            <KCTable
                columns={columns}
                request={(params) => getTableData(params)}
                rowKey='id'
                toolbar={{
                    actions: [
                        <Button key="primary" onClick={() => showModalHandle('authorize')}>临时授权</Button>,
                        <Button key="primary" type="primary" onClick={() => showModalHandle('review')}>院审批</Button>,
                    ]
                }}
            />
        </MQPageContainer>
    );
}