MediResourceManaSys/src/pages/qualificationMana/qualificationAuth/index.tsx

/*
 * @Author: code4eat awesomedema@gmail.com
 * @Date: 2023-03-03 11:30:33
 * @LastEditors: code4eat awesomedema@gmail.com
 * @LastEditTime: 2025-08-08 14:20:50
 * @FilePath: /KC-MiddlePlatform/src/pages/platform/setting/pubDicTypeMana/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */






import KCIMPagecontainer from '@/components/KCIMPageContainer';
import { KCIMTable } from '@/components/KCIMTable';
import { createFromIconfontCN } from '@ant-design/icons';

import { ActionType, arrayMoveImmutable, ProFormText, ProFormTextArea, useRefFunction } from '@ant-design/pro-components';
import { ModalForm, ProFormCascader, ProFormCheckbox, ProFormDateRangePicker, ProFormDependency, ProFormDigit, ProFormRadio, ProFormSelect, ProFormSwitch } from '@ant-design/pro-form'
import { ProColumns } from '@ant-design/pro-table';
import { Drawer, Input, message, Popconfirm, Popover, Switch } from 'antd';
import { Fragment, Key, useEffect, useRef, useState } from 'react';
import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';


import { editData, getTableDataReq, reAuthData, getQualificationApplyList } from './service';

import './style.less';
import { KCIMLeftList } from '@/components/KCIMLeftList';
import { getTableList as getQualClassReq } from '../qualificationClassfiMana/service';
import { getDicDataBySysId } from '@/services/getDic';
import { authTimeType, KcimCenterSysId } from '@/constant';
import TableTransfer from './transform';
import React from 'react';
import 'moment/locale/zh-cn';
import moment from 'moment';
import AuthHisContent from './authHisttory';
import { useAccess } from '@umijs/max';



const IconFont = createFromIconfontCN({
    scriptUrl: '',
});




export default function QualificationAuth({ isChildComponent = false, qualifiCode, onTableSelectChange, defaultSelectedKeys }: {
    isChildComponent: boolean, qualifiCode: string, onTableSelectChange?: (selectedRowKeys: any[], selectedRows: any[], info: any) => void,
    defaultSelectedKeys?: Key[]
}) {

    const [tableDataFilterParams, set_tableDataFilterParams] = useState<any | undefined>();
    const [tableDataSearchKeywords, set_tableDataSearchKeywords] = useState<string>('');
    const [dataSource, set_dataSource] = useState<any[]>([]);

    const SortableItem = SortableElement((props: any) => <tr {...props} />);
    const SortContainer = SortableContainer((props: any) => <tbody {...props} />);
    const [currentSelectedType, set_currentSelectedType] = useState<any | undefined>(undefined);
    const [operationLevel, set_operationLevel] = useState<any[]>([]);
    const [drawerVisible, set_drawerVisible] = useState(false);
    const [currentEditRow, set_currentEditRow] = useState<any>(undefined);
    const [currentPageTableData,set_currentPageTableData] = useState<any[]>([]);
    const [drawerTableLoading, set_drawerTableLoading] = useState(false);

    const access = useAccess();
    const tabs = access.whatCanIDoInThisPage(location.pathname.replace('/MediResourceManaSys', ''));
    const a = tabs.reduce((prev: any, cur: any) => `${prev},${cur.code}`, '');

    const tableRef = useRef<ActionType>();
    const drawerTableRef = useRef<ActionType>();
    const [drawerTableData, set_drawerTableData] = useState<any[]>([]);

    const columns: ProColumns[] = [
        {
            title: '资质编码',
            width: 150,
            ellipsis: true,
            renderText(text, record, index, action) {
                const { qualification: { code } } = record;
                return code
            },
        },
        {
            title: '资质名称',
            ellipsis: true,
            renderText(text, record, index, action) {
                const { qualification: { name } } = record;
                return name
            },
        },
        {
            title: '资质分类',
            ellipsis: true,
            renderText(text, record, index, action) {
                const { qualification: { qualificationTypeName } } = record;
                return qualificationTypeName
            },
        },
        {
            title: '特殊类别',
            ellipsis: true,
            width: 150,
            renderText(text, record, index, action) {
                const { operationFlag, techFlag, operationLevelCode } = record;
                return <div>
                    {
                        techFlag == 1 && (
                            <span style={{
                                display: 'inline-flex', width: 64, height: 20, justifyContent: 'center',
                                alignItems: 'center', background: '#FFF5EB', borderRadius: 4, fontSize: 12, color: '#FF8000', marginRight: 4
                            }}>医疗技术</span>
                        )
                    }
                    {
                        operationFlag == 1 && (
                            <span style={{
                                display: 'inline-flex', width: 64, height: 20, justifyContent: 'center',
                                alignItems: 'center', background: '#E8FCF6', borderRadius: 4, fontSize: 12, color: '#009966'
                            }}>{
                                    (operationLevel.filter((a) => a.value == operationLevelCode))[0].name
                                }</span>
                        )
                    }
                    {
                        (!operationFlag && !techFlag) && (<Fragment/>)
                    }
                </div>
            },
        },
        {
            title: '操作',
            key: 'option',
            width: 60,
            fixed: 'right',
            valueType: 'option',
            render: (_: any, record: any) => {
                return [
                    <a key={'detailBtn'} onClick={() => {
                        set_currentEditRow(record);
                        set_drawerVisible(true);
                    }}>详情</a>
                ]
            },
        },

    ];
    const drawerTablecolumns: ProColumns[] = [
        {
            title: '姓名',
            width: 70,
            ellipsis: true,
            renderText(text, record, index, action) {
                const { userInfo: { name } } = record;
                return name;
            },
        },
        {
            title: '工号',
            ellipsis: true,
            renderText(text, record, index, action) {
                const { userInfo: { account } } = record;
                return account;
            },
        },
        {
            title: '所在科室',
            ellipsis: true,
            renderText(text, record, index, action) {
                const { userInfo: { deptName } } = record;
                return deptName;
            },
        },
        {
            title: '职称',
            ellipsis: true,
            renderText(text, record, index, action) {
                const { userInfo: { jobTitle } } = record;
                return jobTitle;
            },

        },
        {
            title: '授权期限',
            ellipsis: true,
            renderText(text, record, index, action) {
                const { qualificationPeriod } = record;
                if (qualificationPeriod == 1) {
                    return '长期授权'
                }
                if (qualificationPeriod == 2) {
                    return '临时授权'
                }
                if (qualificationPeriod == 3) {
                    return '单次授权'
                }
            },

        },
        {
            title: '授权时间',
            width: 260,
            ellipsis: true,
            renderText(text, record, index, action) {
                const { beginDate, endDate, applyAdjust } = record;
                const content = <AuthHisContent hisList={applyAdjust ? [...applyAdjust] : []} />
                    
                return <>{`${beginDate}至${endDate}`}
                    {applyAdjust && applyAdjust.length > 0 && (
                        <Popover className='qualificationAuth-popover' overlayInnerStyle={{borderRadius:4}} content={content} title={false} >
                            <IconFont type={'icon-qingliangtishi'} style={{marginLeft:10,cursor:'pointer' }} />
                        </Popover>
                    )}</>;
            },
        },
        {
            title: '当前状态',
            ellipsis: true,
            dataIndex: 'currentStatus',
            renderText(text, record, index, action) {
                if (text == '授权中') {
                    return <><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', marginRight: 4, background: '#FFB54D' }}></span>{text}</>
                }
                if (text == '已过期') {
                    return <><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', marginRight: 4, background: '#FF4D6A' }}></span>{text}</>
                }
            },
        },
        {
            title: '操作',
            key: 'option',
            hideInTable:a.indexOf('medical-adjust') == -1,
            width: 100,
            fixed: 'right',
            valueType: 'option',
            render: (_: any, record: any) => {
                const {currentStatus,allowReAuthorize} = record;
                    return [
                        currentStatus == '授权中'?<UpDataActBtn key={'act'} record={record} type='EDIT' />:allowReAuthorize == 1&&<UpDataActBtn key={'act'} record={record} type='AUTH' />,
                    ]
                
            },
        },

    ]


    const getTableData = async (params: any) => {
        const { qualificationTypeCode } = params;
        if (!qualificationTypeCode) {

        }
        console.log('params',params);
        const resp = await getTableDataReq(params);
        if (resp) {
            const data = (resp.list).map((a: any, index: number) => ({ id: index, ...a }));
            set_currentPageTableData(data);
            return {
                data,
                success: true,
                total: resp.totalCount || 0,
                current: resp.current || 1,
                pageSize: resp.pageSize || 10
            }
        } else {
            return {
                data: [],
                success: false,
                total: 0,
                current: 1,
                pageSize: 10
            }
        }
    }


    const updateTable = async (formVal: any, type: 'EDIT' | 'AUTH') => {
        try {
            if (type == 'EDIT') {

                const resp = await editData({
                    qualificationApplyId: formVal.id, // 新接口返回的数据中有id字段
                    qualificationPeriod: Number(formVal.qualificationPeriod),
                    beginDate: formVal.timerange[0],
                    endDate: formVal.timerange[1],
                    memo: formVal.memo
                });
                if (resp) {
                    // 重新获取抽屉表格数据
                    if (currentEditRow?.qualification?.code) {
                        set_drawerTableLoading(true);
                        const applyListResp = await getQualificationApplyList(currentEditRow.qualification.code);
                        
                        // 检查不同的数据结构可能性
                        let dataList = [];
                        if (applyListResp && applyListResp.list) {
                            dataList = applyListResp.list;
                        } else if (applyListResp && Array.isArray(applyListResp)) {
                            dataList = applyListResp;
                        } else if (applyListResp && applyListResp.data) {
                            dataList = applyListResp.data;
                        }
                        
                        set_drawerTableData(dataList);
                        
                        // 强制刷新表格
                        if (drawerTableRef.current) {
                            drawerTableRef.current.reload();
                        }
                        set_drawerTableLoading(false);
                    }
                    message.success('操作成功！');
                }
            } else {
                const resp = await reAuthData({
                    qualificationApplyId: formVal.id, // 新接口返回的数据中有id字段
                    qualificationPeriod: Number(formVal.qualificationPeriod),
                    beginDate: formVal.timerange[0],
                    endDate: formVal.timerange[1],
                    memo: formVal.memo
                });
                if (resp) {
                    // 重新获取抽屉表格数据
                    if (currentEditRow?.qualification?.code) {
                        set_drawerTableLoading(true);
                        const applyListResp = await getQualificationApplyList(currentEditRow.qualification.code);
                        
                        // 检查不同的数据结构可能性
                        let dataList = [];
                        if (applyListResp && applyListResp.list) {
                            dataList = applyListResp.list;
                        } else if (applyListResp && Array.isArray(applyListResp)) {
                            dataList = applyListResp;
                        } else if (applyListResp && applyListResp.data) {
                            dataList = applyListResp.data;
                        }
                        
                        set_drawerTableData(dataList);
                        
                        // 强制刷新表格
                        if (drawerTableRef.current) {
                            drawerTableRef.current.reload();
                        }
                        set_drawerTableLoading(false);
                    }
                    message.success('操作成功！');
                }
            }

            return true;

        } catch (error) {

            console.log({ error });
            return false;
        }
    }

    const formRef = useRef();
    const UpDataActBtn = ({ record, type }: { record: any, type: 'EDIT' | 'AUTH' }) => {
        const ref = React.createRef<{ save: any; }>();
        return (
            <ModalForm
                title={type == 'EDIT' ? '调整授权' : '重新授权'}
                width={352}
                formRef={formRef}
                initialValues={{
                    qualificationPeriod: record.qualificationPeriod || 1,
                    timerange: record.beginDate && record.endDate ? [moment(record.beginDate), moment(record.endDate)] : [moment().startOf("day"), moment().startOf("day")],
                    memo: record.applyMemo || ''
                }}
                trigger={
                    type == 'EDIT' ? <a key="edit" >调整</a> : <a className='auth'>重新授权</a>
                }
                onFinish={(val) => {
                    return updateTable(type == 'EDIT' ? { ...record, ...val } : {...record, ...val }, type);
                }}
                modalProps={{ destroyOnClose: true }}
                colProps={{ span: 24 }}
                grid
            >

                <ProFormRadio.Group label='授权期限：' name={'qualificationPeriod'} options={authTimeType} />
                <ProFormDateRangePicker label='授权时间：' name='timerange' />
                <ProFormTextArea label='调整原因：' name={'memo'} />

            </ModalForm>
        )
    }

    const tableDataSearchHandle = (key: string) => {
        // 搜索时需要重置到第1页
        set_tableDataFilterParams({ ...tableDataFilterParams, [key]: tableDataSearchKeywords, _searchTrigger: Date.now() })
    }

    const getQualClassRequest = async () => {
        const resp = await getQualClassReq();
        if (true) {
            set_dataSource(resp);
        }
    }

    const updateTableSortHandle = async (data: any[]) => {

    }

    const onSortEnd = useRefFunction(
        ({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }) => {
            if (oldIndex !== newIndex) {
                const newData = arrayMoveImmutable({
                    array: [...dataSource],
                    fromIndex: oldIndex,
                    toIndex: newIndex,
                }).filter((el) => !!el);

                const updatedSortArr = newData.map((item: any, index: number) => ({ ...item, sort: index + 1 }));
                set_dataSource([...updatedSortArr]);
                updateTableSortHandle(updatedSortArr);
            }
        },
    );

    const DraggableContainer = (props: any) => (
        <SortContainer
            useDragHandle
            disableAutoscroll
            helperClass="row-dragging"
            onSortEnd={onSortEnd}
            {...props}
        />
    );

    const DraggableBodyRow = (props: any) => {
        const { className, style, ...restProps } = props;

        // function findIndex base on Table rowKey props and should always be a right array index
        const index = dataSource.findIndex((x) => x.id === restProps['data-row-key']);

        return <SortableItem index={index} {...restProps} />;
    };


    useEffect(() => {
        if (currentSelectedType && !isChildComponent) {
            // getTableData({ qualificationTypeCode: currentSelectedType.code });
            // 分类变化时需要重置到第1页
            set_tableDataFilterParams({ ...tableDataFilterParams, qualificationTypeCode: currentSelectedType.code, _categoryTrigger: Date.now() })
        }
    }, [currentSelectedType]);

    useEffect(() => {
        if (isChildComponent && qualifiCode) {
            set_currentSelectedType(true);
            set_tableDataFilterParams({ ...tableDataFilterParams, qualificationTypeCode: qualifiCode })
        }
    }, [qualifiCode]);

    useEffect(() => {
        if (currentEditRow) {
            // 通过新接口获取授权申请列表
            const fetchApplyList = async () => {
                try {
                    set_drawerTableLoading(true);
                    const qualificationCode = currentEditRow.qualification?.code;
                    if (qualificationCode) {
                        const resp = await getQualificationApplyList(qualificationCode);
                        
                        // 检查不同的数据结构可能性
                        let dataList = [];
                        if (resp && resp.list) {
                            dataList = resp.list;
                        } else if (resp && Array.isArray(resp)) {
                            dataList = resp;
                        } else if (resp && resp.data) {
                            dataList = resp.data;
                        }
                        
                        set_drawerTableData(dataList);
                    } else {
                        set_drawerTableData([]);
                    }
                } catch (error) {
                    console.error('获取授权申请列表失败:', error);
                    set_drawerTableData([]);
                } finally {
                    set_drawerTableLoading(false);
                }
            };
            
            fetchApplyList();
        }
    }, [currentEditRow]);
    
    useEffect(()=>{
        if(currentPageTableData&&drawerVisible){
            const needitem = currentPageTableData.filter((a)=>a.qualification.id == currentEditRow.qualification.id);
            if(needitem.length>0){
                  set_currentEditRow(needitem[0]);
            }

        }
    },[currentPageTableData])

    useEffect(() => {
        if (!isChildComponent) {
            getQualClassRequest();
        }
    }, [])

    return (
        <KCIMPagecontainer className='QualificationAuth' style={!isChildComponent ? {} : { border: 'none' }} title={false}>
            <Drawer destroyOnClose={true} className='qualificationAuth-authDetailDrawer' width={1100}
                open={drawerVisible} headerStyle={{ display: 'none' }} bodyStyle={{ background: '#F5F7FA', padding: 16 }}
            >
                <div className='authDetailDrawer-topBar'>
                    <div className='authDetailDrawer-topBar-title'>
                        <div className='closeIcon' onClick={() => set_drawerVisible(false)}><IconFont  type={'iconquxiao'} /></div>{'授权详情'}
                    </div>
                    {/* <div className='btnGroup'>
                        <span onClick={() => set_drawerVisible(false)}>取消</span>
                        <span className='reject' onClick={() => updateTable(2)}>驳回</span>
                        <span className='commit' onClick={() => updateTable(1)}>通过</span>
                    </div> */}
                </div>
                <div className='authDetailDrawer-content'>
                    <div className='authDetailDrawer-info'>
                        <div className='authDetailDrawer-info-title'>
                            {currentEditRow?.qualification?.name}
                            {
                                currentEditRow?.qualification?.techFlag == 1 && (
                                    <span style={{
                                        display: 'inline-flex', height: 20, justifyContent: 'center', marginLeft: 8, padding: '0 12px',
                                        alignItems: 'center', background: '#FFF5EB', borderRadius: 4, fontSize: 12, color: '#FF8000', marginRight: 4
                                    }}>医疗技术</span>
                                )
                            }
                            {
                                currentEditRow?.qualification?.operationFlag == 1 && (
                                    <span style={{
                                        display: 'inline-flex', height: 20, justifyContent: 'center', padding: '0 12px', marginLeft: 8,
                                        alignItems: 'center', background: '#E8FCF6', borderRadius: 4, fontSize: 12, color: '#009966'
                                    }}>{
                                            ((operationLevel.filter((a) => a.value == currentEditRow?.qualification?.operationLevelCode))).length > 0 ? ((operationLevel.filter((a) => a.value == currentEditRow?.qualification?.operationLevelCode)))[0].name : ''
                                        }</span>
                                )
                            }
                        </div>
                        <div className='authDetailDrawer-info-title-sub'>
                            资质编码：{currentEditRow?.qualification?.code}<span style={{ padding: '0 8px' }}></span>
                            资质分类：{currentEditRow?.qualification?.qualificationTypeName}
                            {currentEditRow?.qualification?.standard.length > 0 && (
                                <div className='authDetailDrawer-info-standard'>
                                    {currentEditRow.qualification.standard}
                                    <img src={require('../../../../static/shouquanyiju.png')} alt="" />
                                </div>
                            )}
                        </div>
                    </div>
                    <div className='authDetailDrawer-content-table'>
                        <div className='authDetailDrawer-content-table-title'>授权信息</div>
                        <KCIMTable
                            key={`drawer-table-${drawerTableData.length}`}
                            actionRef={drawerTableRef} columns={drawerTablecolumns as ProColumns[]} rowKey='id'
                            // request={(params) => getTableData(params)}
                            dataSource={drawerTableData}
                            tableAlertRender={false}
                            scroll={{ y: 545 }}
                            loading={drawerTableLoading}
                        />
                    </div>

                </div>


            </Drawer>
            <div className='pageContent'>
                {
                    !isChildComponent && (
                        <div className='left'>
                            <KCIMLeftList searchKey={'name'} dataSource={dataSource} fieldNames={{ title: 'name', key: 'code' }}
                                defaultSelectType='node'
                                listType='tree' onChange={(val) => set_currentSelectedType(val)} />
                        </div>
                    )
                }
                <div className='right' style={isChildComponent ? { width: '100%' } : { width: 'calc(100% - 236px)', padding: 16 }}>
                    <div className='toolBar'>
                        <div className='filter'>
                            <div className='filterItem'>
                                <span className='label'>手术级别：</span>
                                <ProFormSelect noStyle
                                    style={{ width: 160, marginRight: 16 }}
                                    placeholder={'请选择'}
                                    request={async () => {
                                        const resp = await getDicDataBySysId(KcimCenterSysId, 'SURGICAL_AND_OPERATIONAL_LEVELS');
                                        if (resp) {
                                            set_operationLevel(resp.dataVoList);
                                            return resp.dataVoList.map((item: any) => ({ label: item.name, value: item.value }))
                                        }
                                    }}
                                    fieldProps={{
                                        onChange(value, option) {
                                            // 筛选条件变化时需要重置到第1页
                                            set_tableDataFilterParams({ ...tableDataFilterParams, operationLevelCode: value, _levelTrigger: Date.now() })
                                        },
                                    }}
                                />
                            </div>
                            <div className='filterItem'>
                                <span className='label'>检索：</span>
                                <Input placeholder={'资质名称'} style={{ width: 160, marginRight: 16 }} allowClear autoComplete='off'

                                    suffix={
                                        <IconFont style={{ color: '#99A6BF' }} type="iconsousuo" onClick={() => tableDataSearchHandle('name')} />
                                    }
                                    onChange={(e) => {
                                        set_tableDataSearchKeywords(e.target.value);
                                        if (e.target.value.length == 0) {
                                            set_tableDataSearchKeywords('');
                                            set_tableDataFilterParams({...tableDataFilterParams,name:undefined})
                                        }
                                    }}

                                    onPressEnter={(e) => {
                                        tableDataSearchHandle('name')
                                    }}

                                />
                            </div>
                            <div className='filterItem'>
                                <ProFormCheckbox.Group
                                    name="checkbox"
                                    layout='horizontal'
                                    noStyle
                                    options={['医疗技术', '手术']}
                                    fieldProps={{
                                        onChange(checkedValue) {
                                            // 筛选条件变化时需要重置到第1页
                                            set_tableDataFilterParams({
                                                ...tableDataFilterParams,
                                                techFlag: checkedValue.findIndex((a) => a == '医疗技术') != -1 ? 1 : 0,
                                                operationFlag: checkedValue.findIndex((a) => a == '手术') != -1 ? 1 : 0,
                                                _checkboxTrigger: Date.now()
                                                // enableFlag: checkedValue.findIndex((a) => a == '已停用') != -1 ? 0 : 1,
                                            })
                                        },
                                    }}
                                />
                            </div>
                        </div>
                        {/* {!isChildComponent && (
                            <div className='btnGroup'>
                                <UpDataActBtn record type='ADD' />
                            </div>
                        )} */}
                    </div>
                    <div style={{ marginTop: 16 }}>
                        {currentSelectedType && <KCIMTable scroll={{ y: `calc(100vh - 230px)` }}
                            actionRef={tableRef} columns={columns as ProColumns[]} rowKey='id'
                            params={tableDataFilterParams}
                            request={(params) => getTableData(params)}
                            // dataSource={showList}
                            tableAlertRender={false}
                            rowSelection={isChildComponent ? {
                                defaultSelectedRowKeys: defaultSelectedKeys,
                                onChange(selectedRowKeys, selectedRows, info) {
                                    onTableSelectChange && onTableSelectChange(selectedRowKeys, selectedRows, info)
                                },
                            } : false}
                            components={{
                                body: {
                                    wrapper: DraggableContainer,
                                    row: DraggableBodyRow,
                                },
                            }}
                        />}
                    </div>
                </div>
            </div>
        </KCIMPagecontainer>
    )
}