MedicalWisdomCheckSys/src/pages/GradeHospitalAccreditation/ledgerUpload/index.tsx

/*
 * @Author: your name
 * @Date: 2021-09-14 10:22:09
 * @LastEditTime: 2021-10-09 11:38:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /MedicalWisdomCheckSys/src/pages/GradeHospitalAccreditation/articleManagement/index.tsx
 */


import React, { useEffect,useState } from 'react'
import {useModel} from 'umi';
import { Form,Tabs,Button } from 'antd'
import {
    ProFormText,
    ProFormSelect,
    ProFormDependency,
    ProFormDateRangePicker,
} from '@ant-design/pro-form';

import ArticleManagementCopy from '@/pages/GradeHospitalAccreditation/articleManagement/index';
import MccsDrawerForm from '@/components/MccsDrawerForm/index';
import './index.less';
import MccsScoreBanner from '@/components/MccsScoreBanner';
import MccsRecordList from '@/components/MccsRecordList/index';
import MccsClickableTabs from '@/components/MccsClickableTabs/index';


type LedgerUploadPropsType = {

}

const { TabPane } = Tabs;

//条文管理
const LedgerUpload: React.FC<LedgerUploadPropsType> = (props) => {

    const columns = [
        {
            key: 'articleType',
            hideInTable: true,
            renderFormItem: (item: any, { type }: any, form: any) => {
    
                if (type === 'form') {
                    return null;
                }
                return (
                    
                        <ProFormSelect
                            width='sm'
                            options={[
                                { label: '全部', value: 'all' },
                                { label: '未解决', value: 'open' },
                                { label: '已解决', value: 'closed' },
                                { label: '解决中', value: 'processing' },
                            ]}
                            placeholder="台账状态"
                        />
                   
                )
            },
        },
        {
            hideInTable: true,
            renderFormItem: (item: any, { type }: any, form: any) => {
    
                if (type === 'form') {
                    return null;
                }
                return (
                   
                        <ProFormDateRangePicker name='date'  placeholder={['开始时间','结束时间']} />
                  
                )
            },
        },
        {
            key: 'keyword',
            hideInTable: true,
            renderFormItem: (item: any, { type }: any, form: any) => {
    
                if (type === 'form') {
                    return null;
                }
                return (
                    <Form.Item name='keyword'>
                        <ProFormText placeholder='条文/条款' />
                    </Form.Item>
                )
            },
        },
        {
            title: '条款',
            key: 'numStr',
            dataIndex: 'numStr',
            hideInSearch: true,
    
        },
        {
            title: '条文',
            dataIndex: 'name',
            hideInSearch: true,
            width: '35%'
        },
        {
            title: '负责单位',
            dataIndex: 'responsibilityDepartmentName',
            hideInSearch: true,
        },
        {
            title: '负责人',
            dataIndex: 'responsibilityUserName',
            hideInSearch: true,
        },
        {
            title: '自评',
            hideInSearch: true,
            dataIndex: 'selfEvaluation',
        },
        {
            title: '现场查核',
            hideInSearch: true,
            dataIndex: 'siteEvaluation',
        },
        {
            title: '目标',
            dataIndex: 'targetEvaluation',
            hideInSearch: true,
        },
        {
            title: '系统评分',
            dataIndex: 'systemEvaluation',
            hideInSearch: true,
        },
        {
            title: '操作',
            width: 100,
            valueType: 'option',
            render: (_:any, record:any) =>{
                   
                   return [<a key="1" onClick={()=>openDrawerHandle(record)}>详情</a>, <a key="2" onClick={()=>del(record)}>删除</a>]
            },
        },
    ]

    const { articleManagement,ledgerUpload } = useModel('allModels',model=>{
            return {articleManagement:model.articleManagement,ledgerUpload:model.ledgerUpload};
    });

    const {
 
        currentActivedTree,
        ...restArticleManagementModelData
    } = articleManagement;
    
    const {...restLedgerUploadModelData} = ledgerUpload;

    const [tabKey,setTabKey] = useState<string|number>();  //antd Tab切换


    const openDrawerHandle = (record:any)=>{
        // console.log({record});
        restLedgerUploadModelData.setCurrentRecord(record)
        restLedgerUploadModelData.setDrawerVisible(true);
        restArticleManagementModelData.getTableData({id:record.id});
    }

    const del = (record:any)=>{

        const {id} = record;
        restLedgerUploadModelData.delRuleHandle(id);
        restArticleManagementModelData.getArticleTreeData();  //刷新树结构
        restArticleManagementModelData.setReloadRightContent(true);  //刷新表格数据
    }

    const onVisibleChangeHandle = (visible: boolean) => {
        restLedgerUploadModelData.setDrawerVisible(visible);
    }

    const upLoadFileHandle = (formInitData?:any) => {
        //因为modalForm开启了request+params获取表单默认值，
        //所以必须先设置默认值才能开启弹窗
        if(formInitData){
            const { fileUrl, recordTypeName, fileName } = formInitData;
            restArticleManagementModelData.setUploadFormInitValue({
                tab: recordTypeName,
                files: [{
                    uid: new Date().getTime(),
                    name: fileName,
                    status: 'done',
                    url: fileUrl
                }]
            });
        }else {
            restArticleManagementModelData.setUploadFormInitValue({})
        }

        restArticleManagementModelData.getUploadLedgerType().then(data=>{
            //设置上传台账可选类型
            restArticleManagementModelData.setUploadLedgerTypeList(data);
          
        })
        restArticleManagementModelData.setModalVisible(true);
    }

    const actionNodeFunc = (data: any) => {
        //渲染记录列表操作按钮
        // console.log({ data });
        const reupload = () => {
            
            upLoadFileHandle(data);
        }

        return <a onClick={reupload}>重新上传</a>
    }

    

    useEffect(()=>{
        //tab切换时
        //tab切换时重置
        // restArticleManagementModelData.setSelectedSelfEvolution(['null']); 
        // restArticleManagementModelData.setCurrentSelectedSelefEvolution(undefined); 
        if(tabKey==2){
              //切换为自评记录
              if(restLedgerUploadModelData.currentRecord){
                restLedgerUploadModelData.getSelfEvaluationRecordList(restLedgerUploadModelData.currentRecord.id);  //获取自评记录列表
              }

        }
    },[tabKey]);
    
    return (
        <React.Fragment>
            <ArticleManagementCopy 
                columnsFromProps={columns}
                isModeTwo={true}
            />

            
            <MccsDrawerForm 
               title={restLedgerUploadModelData.currentRecord?.name}
               visible = {restLedgerUploadModelData.drawerVisible}
               onVisibleChange={onVisibleChangeHandle}
            >
                <div className='leafContent'>
                
                                <div className='peopleGroup'>
                                    <span>条文组别：</span>
                                    <span>{restLedgerUploadModelData.currentRecord?.accountType}</span>
                                    <span>负责单位：</span>
                                    <span>{restLedgerUploadModelData.currentRecord?.responsibilityDepartmentName}</span>
                                    <span>负责人：</span>
                                    <span>{restLedgerUploadModelData.currentRecord?.responsibilityUserName}</span>
                                </div>
                                <MccsScoreBanner list={restLedgerUploadModelData.scoreList} />
                       
                                <div style={{ marginTop: 5 }}>
                                            <Tabs defaultActiveKey="1" centered size='large' onChange={(key) => setTabKey(key)}>
                                                <TabPane tab="台账记录" key="1">
                                                    <div className='articleSetBtn'>
                                                        <span onClick={()=>upLoadFileHandle()}>上传文件</span>
                                                    </div>
                                                    <MccsRecordList
                                                        title='台账记录'
                                                        list={restArticleManagementModelData.records}
                                                        actionNode={(data) => actionNodeFunc(data)}
                                                    />
                                                </TabPane>
                                                <TabPane tab="自评结果" key="2">
                                                    <div className='selfEvolutionArea'>
                                                        <div className='selfEvolutionTitle'>开始自评</div>
                                                        <MccsClickableTabs
                                                            onChange={(value:{label:string,value:any})=>restLedgerUploadModelData.onSelfEvolutionTabChange(value)}
                                                            data={restLedgerUploadModelData.targetScores}
                                                            value={restLedgerUploadModelData.selectedSelfEvolution}
                                                        />
                                                        <Button onClick={()=>restLedgerUploadModelData.commitSelfEvolution()}>提交自评</Button>
                                                    </div>
                                                    <MccsRecordList
                                                        title='自评记录'
                                                        list={restLedgerUploadModelData.selfEvaluationRecords}
                                                    />
                                                </TabPane>
                                            </Tabs>
                                </div>
                </div>
            </MccsDrawerForm>
        </React.Fragment>
    )
}

export default LedgerUpload