class 卫腾达例子 new hooks

import React, { useState, useCallback, useEffect, useLayoutEffect } from 'react'
import { Checkbox, DatePicker, Tabs, Table, Select } from "antd";
import moment from 'moment';
import locale from "antd/es/date-picker/locale/zh_CN";
import Title from '../../components/Title'
import TableList from '../../components/TableList';
import CheckedList from "../../components/CheckedList";

import XLSX from 'xlsx'
import { SearchOutlined } from '@ant-design/icons';


import MyReport from './MyReport';
import VisualReport from './visual_report/VisualReport';
import VisualReportForBu from './visual_report/BuVisualReport';

import AlertUtil from "../../utils/AlertUtil";
import ApiUtils from '../../utils/ApiUtils';
import Utils from '../../utils/Utils';
import PageNav from "../navigation/PageNav";
import History from "../historical_changes/Historicalchanges";
import FileUpload from '../../components/FileUpload';
const CheckboxGroup = Checkbox.Group;
const columns = [
    { title: '指标编码', sort: 'indexCode', key: 'indexCode' },
    { title: '指标名称', sort: 'indexName', key: 'indexName' },
    { title: '指标主题', sort: 'indexTheme', key: 'indexTheme' },
    { title: '指标类型', sort: 'indexType', key: 'indexType' },
    { title: '计量单位', sort: 'unit', key: 'unit' },
    // { title: '指标口径', sort: 'caliber', key: 'caliber'},
    // { title: '规口管理部门', sort: 'centralizedManagement', key: 'centralizedManagement'},
    // { title: '统计频率', sort: 'statisticalFrequency', key: 'statisticalFrequency'},
    // { title: '统计时间', sort: 'statisticalTime', key: 'statisticalTime'},
    // { title: '数据来源', sort: 'dataSources', key: 'dataSources'},
    // { title: '指标状态', sort: 'indexState', key: 'indexState'},
    // { title: '是否PKI', sort: 'isKpi', key: 'isKpi'},
    { title: '操作历史', sort: 'viewhis', key: 'viewhis' },
    // {
    //   title: 'Action',
    //   dataIndex: '',
    //   key: 'x',
    //   render: () => <a>Delete</a>,
    //   width:'150rem'
    // },
];

const datasource = [
    {
        key: 1,
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
    },
    {
        key: 2,
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
    },
    {
        key: 3,
        name: 'Not Expandable',
        age: 29,
        address: 'Jiangsu No. 1 Lake Park',
        description: 'This not expandable',
    },
    {
        key: 4,
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
    },
];

export default function ReportManagement(props: any) {

    useEffect(() => {
        localStorageUpdated()
        GetReportInit();
        getBU()
        search_click(null)
        props.history.location.state&&props.history.location.state.option&&setOpenStates(props.history.location.state.option)
    }, []);

    const localStorageUpdated = () => {
        var _this = localStorage.getItem("localstorage-status")
        _this == "false" ? setFontColor("#302F2C") : setFontColor('rgb(244 76 76)')
        window.addEventListener("setItemEvent", (e: any) => {
            if (e.key == 'localstorage-status') {
                var _this = localStorage.getItem("localstorage-status")
                console.log(e.newValue)
                e.newValue == "false" ? setFontColor("#302F2C") : setFontColor('rgb(244 76 76)')
            }
        });
    }
    /* --- 数据 ----*/
    const [rendreport, setRendreport] = useState<any>(0);
    const [tabledata, setTabledata] = useState<any>([]);
    const [tablecolumns, setTablecolumns] = useState<any>(columns)
    const [condtiontime, setCondtiontime] = useState<any>({ stime: '', etime: '' });
    const [tasktype, setTasktype] = useState<any>({
        核保: false, 理赔: false, 保全: false, 通用: false,
    });
    const [CollectList, setCollectList] = useState<any>()
    const [extract, setExtract] = useState<any>({
        "rid": "",
        "reportCode": "",
        reportModule: null,
        "reportStatus": "",
        "reportName": "",
        "reportTheme": "",
        "reportPurpose": "",
        "keyIndicators": "",
        "reportRange": "",
        "presentationDimension": "",
        "reportType": "",
        "centralizedManagement": "",
        "userDepartment": "",
        "usageFrequency": "",
        "originalReport": "",
        "userId": "",
        starttime: '',
        endtime: '',
        SSO: null,
        BU: null,
        CITY: null,
    });
    const [checkedList, setCheckedList] = useState<any>({
        SSO: ["S-SSO", "N-SSO"],
        BU: [],
        CITY: [],
    })
    const [viewHistory, setViewHistory] = useState<any>({
        tunon: false,
        rootId: ''
    });
    //search 的条件
    const [queryCondtion, setQueryCondtion] = useState<any>(
        {
            rid: "",
            reportCode: "",
            reportModule: "",
            reportStatus: "",
            reportName: "",
            reportTheme: "",
            reportPurpose: "",
            keyIndicators: "",
            reportRange: "",
            presentationDimension: "",
            reportType: null,
            centralizedManagement: null,
            userDepartment: null,
            usageFrequency: "",
            originalReport: "",
            userId: "",
            sso: '',
            bu: '',
            city: ''
        }
    );
    //信息和修改的载体
    const [editCondtion, setEditCondtion] = useState<any>(
        {
            rid: "",
            reportCode: "",
            reportModule: "",
            reportStatus: "",
            reportName: "",
            reportTheme: "",
            reportPurpose: "",
            keyIndicators: "",
            reportRange: "",
            presentationDimension: "",
            reportType: null,
            centralizedManagement: null,
            userDepartment: null,
            usageFrequency: null,
            originalReport: "",
            userId: "",
            belongingDepartment: "",
            sso: '',
            bu: '',
            city: ''
        }
    );
    const [quotaConfig, setQuotaConfig] = useState<any>();
    const [authlist, setAuthlist] = useState<any>()
    const [open, setOpen] = useState<any>(props.history.location.state ? true : false)
    const [openStates, setOpenStates] = useState<any>("UNI")
    const [xFontColor, setFontColor] = useState<any>("#000")

    const { Option } = Select;
    const { TabPane } = Tabs;
    const { RangePicker } = DatePicker;
    //多选框状态
    const [checked, setChecked] = useState<any>({
        reportModule: false,
        centralizedManagement: false,
        userDepartment: false,
        edit_userDepartment: false,
        usageFrequency: false,
        extract_reportModule: false,
        extract_SSO: false,
        extract_BU: false,
        extract_CITY: false

    })
    // 复选框下拉框初始化数据
    const GetReportInit = () => {
        ApiUtils.ReportInit().then((res: any) => {
            if (res && res.code == 0) {
                setQuotaConfig(res.data.data)
            } else {
                AlertUtil.warningMsg(res.msg)
            }
        })
    }

    //BU
    const getBU = () => {
        ApiUtils.getBuByOrg().then((res: any) => {

            res && setCheckedList({
                ...checkedList,
                BU: res.data,

            })
        })

        console.log(checkedList)

    }
    //CITY
    const getCITY = (data: any) => {
        let jsonDate = data != null ? data.join(',') : ''
        ApiUtils.getCityByBu(jsonDate).then((res: any) => {
            res && setCheckedList({
                ...checkedList,
                CITY: res.data,


            })
        })



    }

    /* --- 方法----*/
    const table_rowclick = (rowitem: any) => {
        // console.log(rowitem,e,"sso2-quota")
        // if(!e.target.matches('span')){
        setRendreport(1)

        if (rowitem != '') {

            setEditCondtion({
                rid: rowitem.rid,
                reportCode: rowitem.reportCode,
                reportModule: rowitem.reportModule,
                reportName: rowitem.reportName,
                reportStatus: rowitem.reportStatus,
                reportPurpose: rowitem.reportPurpose,
                keyIndicators: rowitem.keyIndicators,
                reportRange: rowitem.reportRange,
                presentationDimension: rowitem.presentationDimension,
                reportType: rowitem.reportType,
                caliber: rowitem.caliber,
                centralizedManagement: rowitem.centralizedManagement,
                userDepartment: rowitem.userDepartment ? rowitem.userDepartment.split(',') : rowitem.userDepartment,
                usageFrequency: rowitem.usageFrequency ? rowitem.usageFrequency.split('/') : rowitem.usageFrequency,
                originalReport: rowitem.originalReport,
                userId: rowitem.userId,
                belongingDepartment: rowitem.belongingDepartment
            })
        }
    }

    const RowDoubleClick = (record: any) => {
        table_rowclick(record)
    }

    const TableRowClick = () => {
        let RowElement: any = document.getElementsByClassName('table_container')
        if (RowElement.length) {
            console.log(RowElement[0].children, "sso2-rep")
        }
    }

    const search_click = async (type: any) => {
        let search_condtion: any
        if (type === 'page') {
            //页面条件
            search_condtion = {
                reportCode: queryCondtion.reportCode,
                reportName: queryCondtion.reportName,
                reportTheme: queryCondtion.indexTheme,
                centralizedManagement: queryCondtion.centralizedManagement != null ? queryCondtion.centralizedManagement.join(',') : '',
                userDepartment: queryCondtion.userDepartment != null ? queryCondtion.userDepartment.join(',') : '',
                // reportModule: Object.entries(tasktype).filter((el: any) => el[1] == true).map((el: any) => el[0]).join(','),
                reportModule: queryCondtion.reportModule  ? queryCondtion.reportModule.join(',') : '',
                userId: ApiUtils.userInfo.userId
            }
        } else {
            search_condtion = {
                reportCode: '',
                reportName: '',
                reportTheme: '',
                centralizedManagement: '',
                userDepartment: '',
                reportModule: '',
                userId: ApiUtils.userInfo.userId
            }
        }

        // if (type == "4") {
        //     await ApiUtils.CollectList(ApiUtils.userInfo.userId).then((res: any) => {
        //         if (res && res.code == 0) {
        //             setCollectList(res.data)
        //         }
        //     })
        // }

            await ApiUtils.GetReportList(search_condtion).then((res: any) => {
                if (res && res.code == 0) {
                    // console.log(res,"sso2-quota")
                    //format thead
                    let arr: any = []
                    let column: any
                    let attributeName: any
                    let columnrow = {
                        "reportCode": queryCondtion.reportCode,
                        "reportName": queryCondtion.reportName,
                        // "indexTheme": queryCondtion.reportName,
                        "reportPurpose": queryCondtion.reportPurpose,
                        "reportModule": queryCondtion.reportModule,
                        "reportStatus": queryCondtion.reportStatus,
                        "reportType": queryCondtion.reportType,
                        "centralizedManagement": queryCondtion.centralizedManagement,
                    }

                    Object.keys(columnrow).map((el: any) => {
                        // console.log(el,"sso2-dic")
                        switch (el) {
                            case 'reportCode':
                                attributeName = '报表编码'
                                break;
                            case 'reportName':
                                attributeName = '报表名称'
                                break;
                            case 'reportModule':
                                attributeName = '任务类型'
                                break;
                            case 'reportStatus':
                                attributeName = '报表状态'
                                break;
                            case 'reportPurpose':
                                attributeName = '报表用途概述'
                                break;
                            case 'keyIndicators':
                                attributeName = '所含关键指标'
                                break;
                            case 'reportRange':
                                attributeName = '报表范围框定条件'
                                break;
                            case 'presentationDimension':
                                attributeName = '报表数据列示维度'
                                break;
                            case 'reportType':
                                attributeName = '报表类型'
                                break;
                            // case 'caliber':
                            //     attributeName='报表口径'
                            //     break;
                            case 'centralizedManagement':
                                attributeName = '归口管理部门'
                                break
                            case 'userDepartment':
                                attributeName = '报表使用部门'
                                break
                            case 'usageFrequency':
                                attributeName = '报表使用频率'
                                break
                            case 'originalReport':
                                attributeName = '原报表名称'
                                break
                            case 'userId':
                                attributeName = '用户id'
                                break
                            case 'belongingDepartment':
                                attributeName = '报表所在系统'
                                break
                        }


                        if (attributeName == '报表名称' || attributeName == '报表用途概述') {
                            arr.push({
                                "title": attributeName,
                                "sort": el,
                                "width": "250",
                                "align": "center"
                            })
                        } else if(attributeName=="报表编码"){
                            arr.push({
                                "title": attributeName,
                                "sort": el,
                                "width": "156",
                                "align": "center"
                            })
                        }else{
                            arr.push({
                                "title": attributeName,
                                "sort": el,
                                "width": "100",
                                "align": "center"
                            })
                        }
                    })
                    setTablecolumns([...arr, { title: '操作', sort: 'viewhis', "width": "250", key: 'viewhis' },])
                    setTabledata(res.data.map((item: any) => {
                        item = {
                            "reportCode": item.reportCode,
                            "rid": item.rid,
                            // "taskType": queryCondtion.taskType,
                            "reportName": item.reportName,
                            // "indexCategory": queryCondtion.indexCategory,
                            // "indexSubclass": queryCondtion.indexSubclass,
                            "indexTheme": item.reportName,
                            // "indexDefinition": queryCondtion.indexDefinition,
                            // "formula": queryCondtion.formula,
                            "reportPurpose": item.reportPurpose,
                            "reportModule": item.reportModule,
                            "reportStatus": item.reportStatus,
                            "keyIndicators": item.keyIndicators,
                            "reportRange": item.reportRange,
                            "presentationDimension": item.presentationDimension,
                            "reportType": item.reportType,
                            "centralizedManagement": item.centralizedManagement,
                            "userDepartment": item.userDepartment,
                            "usageFrequency": item.usageFrequency,
                            "originalReport": item.originalReport,
                            "userId": item.userId,
                            belongingDepartment: item.belongingDepartment,
                            "viewhis": [<a title='查看操作历史' key={'history' + item.rid} onClick={() => setViewHistory({ tunon: true, rootId: item.rid })}>操作历史</a>, <a key={'extract' + item.rid} title='抽取' onClick={() => extractRow(item)}>抽取</a>, <a title='报表修改' key={'modfly' + item.rid} onClick={() => modfly(item)}>修改</a>]
                        }
                        return item
                    }))
                }
            })
        }

    const search_tasktype = (type: any, value: any, e: any) => {
        console.log(type, value, e.target, "sso2-dic")
        setTasktype({
            ...tasktype,
            [type]: value
        })
    }

    const clear_click = () => {
        setQueryCondtion({
            "rid": null,
            "reportCode": '',
            "reportModule": null,
            "reportStatus": null,
            "reportName": '',
            "reportTheme": null,
            "reportPurpose": null,
            "keyIndicators": null,
            "reportRange": null,
            "presentationDimension": null,
            "reportType": null,
            "centralizedManagement": null,
            "userDepartment": null,
            "usageFrequency": null,
            "originalReport": null,
            "userId": null,
        })
        setTasktype({
            核保: false, 理赔: false, 保全: false, 通用: false,
        })

    }

    const clear_extract = () => {
        setExtract({
            "rid": null,
            "reportCode": null,
            "reportModule": '',
            "reportStatus": null,
            "reportName": null,
            "reportTheme": null,
            "reportPurpose": null,
            "keyIndicators": null,
            "reportRange": null,
            "presentationDimension": null,
            "reportType": null,
            "centralizedManagement": null,
            "userDepartment": null,
            "usageFrequency": null,
            "originalReport": null,
            "userId": null,
            model: '',
            starttime: null,
            endtime: null,
            SSO: null,
            BU: null,
            CITY: null,
        })
        setCondtiontime({ ...condtiontime, stime: '', etime: '' })
        // setCheckedList({ SSO: [], BU: [], CITY: [] })
    }

    const checkbox_click = (quota: any, value: any) => {
        setEditCondtion({
            ...editCondtion,
            [quota]: value,
        })
    }
    const checkbox_click_select = (value: any, quota: any) => {

        setEditCondtion({
            ...editCondtion,
            [quota]: value,
        })
    }
    const checkbox_click_search = (quota: any, value: any) => {
        setQueryCondtion({
            ...queryCondtion,
            [quota]: value,
        })
    }

    //时间组件触发函数
    const EnddisabledDate = (current: any) => {

        return current && current < moment(`${JSON.stringify(condtiontime.stime)}}`, 'YYYY-MM-DD')
    }
    const StartdisabledDate = (current: any) => {

        return current && current > moment(`${JSON.stringify(condtiontime.etime)}}`, 'YYYY-MM-DD')
    }
    const cstime = (value: any, dateString: any) => {
        setCondtiontime({ ...condtiontime, stime: dateString })
        console.log(dateString, condtiontime, "sso2-report")
    }
    const cetime = (value: any, dateString: any) => {
        setCondtiontime({ ...condtiontime, etime: dateString })
        console.log(dateString, condtiontime, "sso2-report")
    }

    const modfily_comit = async () => {

        let reqlist = {
            "rid": editCondtion.rid,
            "reportCode": editCondtion.reportCode ? editCondtion.reportCode : (AlertUtil.errorMsg('编码不能为空'), null),
            "reportModule": editCondtion.reportModule,//
            "reportStatus": editCondtion.reportStatus ? editCondtion.reportStatus : (AlertUtil.errorMsg('报表状态不能为空'), null),
            "reportName": editCondtion.reportName ? editCondtion.reportName : (AlertUtil.errorMsg('报表名称不能为空'), null),
            "reportTheme": editCondtion.reportTheme,
            "reportPurpose": !editCondtion.reportPurpose ? (AlertUtil.errorMsg('报表用途概述不能为空')) : editCondtion.reportPurpose.length > 60 ? (AlertUtil.errorMsg('报表用途概述长度超过“60个字符!”'), null) : editCondtion.reportPurpose,
            "keyIndicators": editCondtion.keyIndicators ? editCondtion.keyIndicators : (AlertUtil.errorMsg('所含关键指标不能为空'), null),
            "reportRange": editCondtion.reportRange ? editCondtion.reportRange : (AlertUtil.errorMsg('报表范围框定条件不能为空'), null),
            "presentationDimension": editCondtion.presentationDimension,
            "reportType": editCondtion.reportType ? editCondtion.reportType : (AlertUtil.errorMsg('报表类型不能为空'), null),
            "centralizedManagement": editCondtion.centralizedManagement ? editCondtion.centralizedManagement : (AlertUtil.errorMsg('归口管理部门不能为空'), null),
            "userDepartment": editCondtion.userDepartment != null ? editCondtion.userDepartment.join(',') : (AlertUtil.errorMsg('报表使用部门不能为空'), null),
            "usageFrequency": editCondtion.usageFrequency != null ? editCondtion.usageFrequency.join(',') : (AlertUtil.errorMsg('报表使用频率不能为空'), null),
            "originalReport": editCondtion.originalReport,
            "userId": ApiUtils.userInfo.userId,
            belongingDepartment: !editCondtion.belongingDepartment ? (AlertUtil.errorMsg('报表所在系统不能为空')) : editCondtion.belongingDepartment.length > 100 ? (AlertUtil.errorMsg('报表所在系统长度超过“100个字符!”'), null) : editCondtion.belongingDepartment,
            sso: '',
            bu: '',
            city: ''
        }
        if (!reqlist.reportCode || !reqlist.reportName || !reqlist.centralizedManagement || !reqlist.reportType || !reqlist.reportStatus || !reqlist.userDepartment || !reqlist.usageFrequency || !reqlist.belongingDepartment || !reqlist.reportPurpose || !reqlist.keyIndicators || !reqlist.reportRange) {
            return
        }
        await ApiUtils.UpdateReport(reqlist).then((res: any) => {
            if (res && res.code == 0) {
                AlertUtil.showMsg('修改成功!')
            } else {
                AlertUtil.warningMsg(res.msg)
            }
        })


        search_click(null)

        setRendreport(2)
    }

    const modfly = (rowitem: any) => {
        console.log(rowitem)
        ApiUtils.isPurview("F1501") ? setRendreport(2) : AlertUtil.errorMsg('您没报表修改权限！')
        if (rowitem != '') {
            setEditCondtion({


                rid: rowitem.rid,
                reportCode: rowitem.reportCode,
                reportModule: rowitem.reportModule,
                reportStatus: rowitem.reportStatus,
                reportName: rowitem.reportName,
                reportPurpose: rowitem.reportPurpose,
                keyIndicators: rowitem.keyIndicators,
                reportRange: rowitem.reportRange,
                presentationDimension: rowitem.presentationDimension,
                reportType: rowitem.reportType,
                centralizedManagement: rowitem.centralizedManagement,
                userDepartment: rowitem.userDepartment ? rowitem.userDepartment.split('/') : rowitem.userDepartment,
                usageFrequency: rowitem.usageFrequency ? rowitem.usageFrequency.split('/') : rowitem.usageFrequency,
                originalReport: rowitem.originalReport,
                userId: ApiUtils.userInfo.userId,
                belongingDepartment: rowitem.belongingDepartment
            })
        }


    }

    const scribeReport = () => {
        let userid = ApiUtils.userInfo.userId
        ApiUtils.CollectReport(editCondtion.rid, ApiUtils.userInfo.userId).then((res: any) => {
            if (res && res.code == 0) {
                AlertUtil.showMsg('收藏成功!')
            } else {
                AlertUtil.showMsg(res.msg)
            }
        })

        ApiUtils.CollectList(ApiUtils.userInfo.userId).then((res: any) => {
            if (res && res.code == 0) {
                setCollectList(res.data)
            }
        })

        search_click(null)

    }

    const Extract = (item: any) => {

    }



    const BuildReport = () => {
        let reqlist = {
            reportCode: extract.reportCode,
            reportModule: extract.reportModule ? extract.reportModule.join(',') : '',
            frequency: extract.frequency,
            startDate: condtiontime.stime,
            endDate: condtiontime.etime,
            zoneflg: extract.SSO ? extract.SSO.join(',') : '',
            model: extract.model,
            bu: extract.BU ? extract.BU.join(',') : '',
            city: extract.CITY ? extract.CITY.join(',') : '',
            name: extract.name
            // frequency    适用频率        false
            // startDate    起始时间        false
            // endDate    终止时间        false
            // zoneflg    SSO        false
            // model    任务类型        false
            // bu
            // city
        }
        if (reqlist.startDate == '') {
            AlertUtil.showMsg('请先选择起始日期！')
        } else if (reqlist.endDate == '') {
            AlertUtil.showMsg('请先选择终止日期！')
        } else if (reqlist.model == '') {
            AlertUtil.showMsg('请先选择任务类型!')
        }
        // else if (reqlist.zoneflg == '') {
        //     AlertUtil.showMsg('请先选择SS0！')
        // } else if (reqlist.bu == '') {
        //     AlertUtil.showMsg('请先选择BU！')
        // } else if (reqlist.city == '') {
        //     AlertUtil.showMsg('请先选择CITY！')
        // } 
        else {
            ApiUtils.ExtractReport(reqlist)
        }
    }

    //Excel导出
    const onExportExcel = (file: any) => {

        let workbook: any = {
            SheetNames: [],
            Sheets: {}
        };

        if (tabledata != undefined && tabledata.length) {
            let ws = XLSX.utils.json_to_sheet([...tabledata]);
            let wb = XLSX.utils.book_new()
            XLSX.utils.book_append_sheet(wb, ws, '指标查询') // 工作簿名称
            XLSX.writeFile(wb, '.\指标查询.xlsx') // 保存的文件名
        } else {
            AlertUtil.errorMsg('当前无表格数据!')
        }

        // ApiUtils.downloadFile(`/index/manage/getTemplate`, null, '参数导入模板.xlsx')

    }

    const extractRow = (itemrow: any) => {
        let authlist = ApiUtils.userInfo
        let coecode = ['002', '00200', '00201', '00202', '003', '004', '005', '006', '00600', '0060000', '00602', '0060200']
        console.log(authlist, "sso2-report")
        // if (authlist.orgCategory == 'CHO' || coecode.includes(authlist.orgCode) && itemrow.userDepartment.includes('SSO' || 'BU') || authlist.orgCategory == 'BU') {
        setRendreport(3)
        setExtract({


            "reportCode": itemrow.reportCode,
            "reportModule":itemrow.reportModule? itemrow.reportModule.split(','):null,
            "frequency": itemrow.usageFrequency,
            "startDate": condtiontime.stime,
            "endDate": condtiontime.etime,
            SSO: null,
            "model": itemrow.reportType,
            BU: null,
            CITY: null,
            name: itemrow.reportName
        })
        // }
        // else {
        //     AlertUtil.errorMsg('您无权抽取该报表!')
        // }
    }

    const render_report = () => {
        // if (ApiUtils.isPurview("F1500") && rendreport == 1 || ApiUtils.isPurview("F1501") && rendreport == 2){
        if (rendreport == 1 || rendreport == 2) {
            return <div className='base_report'>
                <div className='report_basic'>
                    <div className='lab_sp'>
                        <div className='search_resul_rectangle'></div>
                        <span>报表基本信息</span>
                    </div>
                    <div className="close" onClick={() => setRendreport(0)}>
                        <span></span>
                        <img src={(window.rootUrl + "/images/deletebtn.svg")} alt="" />
                    </div>
                    <div className='report_basic_line1'>
                        <div >
                            <span>编码</span>
                            {
                                rendreport == 1 &&
                                <input className="disable" value={editCondtion.reportCode} disabled />
                            }
                            {
                                rendreport == 2 &&
                                <input className="disable" type="text" value={editCondtion.reportCode} onChange={(e: any) => checkbox_click('reportCode', e.target.value)} disabled />
                            }
                        </div>
                        <div >
                            <span>报表名称</span>
                            {
                                rendreport == 1 &&
                                <Select defaultValue={editCondtion.reportName} className="disable" allowClear disabled>
                                    {quotaConfig.reportName.map((item: any, index: any) => {
                                        return <Option key={`reportName${index}`} value={item}>{item}</Option>

                                    })}
                                </Select>
                            }
                            {
                                rendreport == 2 &&
                                <Select defaultValue={editCondtion.reportName} style={{ background: '#f8f8f8' }} onChange={(e: any) => checkbox_click_select(e, 'reportName')} allowClear >
                                    {quotaConfig.reportName.map((item: any, index: any) => {
                                        return <Option key={`reportName${index}`} value={item}>{item}</Option>

                                    })}
                                </Select>
                                // <input type="text" value={editCondtion.reportName} onChange={(e: any) => checkbox_click('reportName', e.target.value)} />
                            }
                        </div>
                        {/* <div >
                            <span>报表主题</span>
                            {
                                rendreport == 1 &&
                                <input type="text" style={{ background: '#f8f8f8' }} value={editCondtion.reportName} disabled />
                            }
                            {
                                rendreport == 2 &&
                                <input type="text" value={editCondtion.reportName} onChange={(e: any) => checkbox_click('reportName', e.target.value)} />
                            }

                        </div> */}
                        <div >
                            <span>报表状态</span>
                            {
                                rendreport == 1 &&
                                <Select defaultValue={editCondtion.reportStatus} className="disable" allowClear disabled>
                                    {quotaConfig.reportStatus.map((item: any, index: any) => {
                                        return <Option key={`reportStatus${index}`} value={item}>{item}</Option>

                                    })}
                                </Select>
                            }
                            {
                                rendreport == 2 &&
                                <Select defaultValue={editCondtion.reportStatus} style={{ background: '#f8f8f8' }} onChange={(e: any) => checkbox_click_select(e, 'reportStatus')} allowClear>
                                    {quotaConfig.reportStatus.map((item: any, index: any) => {
                                        return <Option key={`reportStatus${index}`} value={item}>{item}</Option>

                                    })}
                                </Select>
                            }
                        </div>
                    </div>
                    <div className='report_basic_line2'>
                        <div >
                            <span>报表类型</span>
                            {
                                rendreport == 1 &&
                                <Select defaultValue={editCondtion.reportType} className="disable" allowClear disabled>
                                    {quotaConfig.reportType.map((item: any, index: any) => {
                                        return <Option key={`reportType${index}`} value={item}>{item}</Option>

                                    })}
                                </Select>
                                // <input type="text" style={{ background: '#f8f8f8' }} value={editCondtion.reportType} disabled />
                            }
                            {
                                rendreport == 2 &&
                                <Select defaultValue={editCondtion.reportType} style={{ background: '#f8f8f8' }} onChange={(e: any) => checkbox_click_select(e, 'reportType')} allowClear>
                                    {quotaConfig.reportType.map((item: any, index: any) => {
                                        return <Option key={`reportType${index}`} value={item}>{item}</Option>

                                    })}
                                </Select>
                                // <input type="text" value={editCondtion.reportType} onChange={(e: any) => checkbox_click('reportType', e.target.value)} />
                            }

                        </div>
                        <div >
                            <span>归口管理部门</span>
                            {
                                rendreport == 1 &&
                                <Select defaultValue={editCondtion.centralizedManagement} className="disable" disabled allowClear>
                                    {quotaConfig.centralizedManagement.map((item: any, index: any) => {
                                        return <Option key={`centralizedManagement${index}`} value={item}>{item}</Option>

                                    })}
                                </Select>
                                // <input type="text" style={{ background: '#f8f8f8' }} value={editCondtion.centralizedManagement} disabled />
                            }
                            {
                                rendreport == 2 &&
                                <Select defaultValue={editCondtion.centralizedManagement} style={{ background: '#f8f8f8' }} onChange={(e: any) => checkbox_click_select(e, 'centralizedManagement')} allowClear>
                                    {quotaConfig.centralizedManagement.map((item: any, index: any) => {
                                        return <Option key={`centralizedManagement${index}`} value={item}>{item}</Option>

                                    })}
                                </Select>
                                // <input type="text" value={editCondtion.centralizedManagement} onChange={(e: any) => checkbox_click('centralizedManagement', e.target.value)} />
                            }

                        </div>
                        <div>
                            <span>报表使用部门:</span>
                            {
                                rendreport == 1 &&
                                <div className='DivInput disable'>
                                    {
                                        editCondtion.userDepartment ? (editCondtion.userDepartment.length <= 2 ? editCondtion.userDepartment.map((value: React.ReactNode, index: string | number | undefined) => {
                                            return <p key={index}>{value}</p>
                                        }) :
                                            <Title data={editCondtion.userDepartment} shu={2} />

                                        ) : <span style={{ color: "#b2b2b2" }}>请选择</span>
                                    }
                                    <SearchOutlined className='svg' />
                                </div>
                            }
                            {
                                rendreport == 2 &&
                                <div className='DivInput'>
                                    {
                                        editCondtion.userDepartment ? (editCondtion.userDepartment.length <= 2 ? editCondtion.userDepartment.map((value: React.ReactNode, index: string | number | undefined) => {
                                            return <p key={index}>{value}</p>
                                        }) :
                                            <Title data={editCondtion.userDepartment} shu={2} />

                                        ) : <span style={{ color: "#b2b2b2" }}>请选择</span>
                                    }
                                    <SearchOutlined className='svg' onClick={() => checkcall('edit_userDepartment')} />
                                </div>
                            }


                        </div>

                    </div>
                    <div className='report_basic_line3'>
                        <div >
                            <span>统计频率</span>
                            {
                                rendreport == 1 &&
                                <div className='DivInput disable'>
                                    {
                                        editCondtion.usageFrequency ? (editCondtion.usageFrequency.length <= 2 ? editCondtion.usageFrequency.map((value: React.ReactNode, index: string | number | undefined) => {
                                            return <p key={index}>{value}</p>
                                        }) :
                                            <Title data={editCondtion.usageFrequency} shu={2} />

                                        ) : <span style={{ color: "#b2b2b2" }}>请选择</span>
                                    }
                                    <SearchOutlined className='svg' />
                                </div>
                            }
                            {
                                rendreport == 2 &&
                                <div className='DivInput'>
                                    {
                                        editCondtion.usageFrequency ? (editCondtion.usageFrequency.length <= 2 ? editCondtion.usageFrequency.map((value: React.ReactNode, index: string | number | undefined) => {
                                            return <p key={index}>{value}</p>
                                        }) :
                                            <Title data={editCondtion.usageFrequency} shu={2} />

                                        ) : <span style={{ color: "#b2b2b2" }}>请选择</span>
                                    }
                                    <SearchOutlined className='svg' onClick={() => checkcall('usageFrequency')} />
                                </div>
                            }

                        </div>
                        <div >
                            <span>报表所在系统</span>
                            {
                                rendreport == 1 &&
                                <input type="text" className="disable" value={editCondtion.belongingDepartment} disabled />
                            }
                            {
                                rendreport == 2 &&
                                <input type="text" value={editCondtion.belongingDepartment} onChange={(e: any) => checkbox_click('belongingDepartment', e.target.value)} />
                            }
                        </div>
                        <div></div>

                    </div>
                    <div className='report_basic_line4'>
                        <div >
                            <span>报表用途概述</span>
                            {
                                rendreport == 1 &&
                                <textarea className="disable" value={editCondtion.reportPurpose} disabled />
                            }
                            {
                                rendreport == 2 &&
                                <textarea value={editCondtion.reportPurpose} onChange={(e: any) => checkbox_click('reportPurpose', e.target.value)} />
                            }

                        </div>
                        <div >
                            <span>报表范围框定条件</span>
                            {
                                rendreport == 1 &&
                                <textarea className="disable" value={editCondtion.reportRange} disabled />
                            }
                            {
                                rendreport == 2 &&
                                <textarea className='disable' style={{ background: '#f8f8f8' }} value={editCondtion.reportRange} disabled onChange={(e: any) => checkbox_click('reportRange', e.target.value)} />
                            }
                        </div>
                    </div>

                    <div className='report_basic_line6'>
                        <div >
                            <span>所含关键指标</span>
                            {
                                rendreport == 1 &&
                                <textarea className="disable" value={editCondtion.keyIndicators} disabled />
                            }
                            {
                                rendreport == 2 &&
                                <textarea className='disable' style={{ background: '#f8f8f8' }} value={editCondtion.keyIndicators} onChange={(e: any) => checkbox_click('keyIndicators', e.target.value)} disabled />
                            }

                        </div>


                    </div>

                    {
                        rendreport == 1 &&
                        <div className='cancel'>
                            <button className='btn_white hoverBorder2' onClick={() => { setRendreport(0) }} >取消</button>
                            <button className={CollectList != null && CollectList.filter((el: any) => el.rid == editCondtion.rid).length > 0 ? 'btn_white disable btn_return' : 'btn_white hoverBorder2  btn_return'} onClick={() => CollectList != null && CollectList.filter((el: any) => el.rid == editCondtion.rid).length > 0 ? null : scribeReport()} >收藏</button>
                            <button style={{ marginLeft: "15rem" }} className='btn_return btn_white  hoverBorder2' onClick={() => { ApiUtils.isPurview("F1501") ? setRendreport(2) : AlertUtil.errorMsg('您没报表修改权限！') }}>修改</button>

                        </div>
                    }
                    {
                        rendreport == 2 &&
                        <div className='cancel'>
                            <button className='btn_white hoverBorder2' onClick={() => { setRendreport(0) }} >取消</button>
                            <button className={CollectList != null && CollectList.filter((el: any) => el.rid == editCondtion.rid).length > 0 ? 'btn_white disable btn_return' : 'btn_white hoverBorder2  btn_return'} onClick={() => CollectList != null && CollectList.filter((el: any) => el.rid == editCondtion.rid).length > 0 ? null : scribeReport()} >收藏</button>
                            <button style={{ marginLeft: "15rem" }} className='btn_return btn_red  hoverBorder2' onClick={modfily_comit}>提交</button>

                        </div>
                    }
                    <div style={{ clear: 'both' }}></div>
                </div>
            </div>
        }
    }


    //多选框点击弹出

    const checkcall = (val: any) => {
        setChecked({
            ...checked,
            [val]: true
        })
    }

    const reportModule_callback = (val: any, list: any, chk: any) => {
        console.log(list)
        setChecked({
            ...checked,
            reportModule: val
        })
        setQueryCondtion({
            ...queryCondtion,
            reportModule: list ? list : null
        })
    }
    const extract_reportModule_callback = (val: any, list: any, chk: any) => {
        console.log(list)
        setChecked({
            ...checked,
            extract_reportModule: val
        })
        setQueryCondtion({
            ...extract,
            reportModule: list ? list : null
        })
    }
    const extract_SSO_callback = (val: any, list: any, chk: any) => {
        console.log(list)
        setChecked({
            ...checked,
            extract_SSO: val
        })
        setExtract({
            ...extract,
            SSO: list ? list : null
        })
    }
    const extract_BU_callback = (val: any, list: any, chk: any) => {
        let BU_list: any = [];
        setChecked({
            ...checked,
            extract_BU: val
        })
        if (list) {
            checkedList.BU.forEach((item: any) => {
                list.forEach((i: any) => {
                    if (i == item.ORG_NAME) {
                        BU_list.push(item.ORG_ENGNAME)
                    }
                })
            })
            getCITY(BU_list)

            setExtract({
                ...extract,
                BU: list
            })
        }

    }
    const extract_CITY_callback = (val: any, list: any, chk: any) => {
        let CITY_list: any = [];
        setChecked({
            ...checked,
            extract_CITY: val
        })
        list ? setExtract({
            ...extract,
            CITY: list
        }) : setExtract({
            ...extract
        })


    }
    const centralizedManagement_callback = (val: any, list: any, chk: any) => {
        setChecked({
            ...checked,
            centralizedManagement: val
        })
        setQueryCondtion({
            ...queryCondtion,
            centralizedManagement: list ? list : null
        })
    }
    const userDepartment_callback = (val: any, list: any, chk: any) => {
        setChecked({
            ...checked,
            userDepartment: val
        })
        setQueryCondtion({
            ...queryCondtion,
            userDepartment: list ? list : null
        })
    }
    const edit_userDepartment_callback = (val: any, list: any, chk: any) => {
        setChecked({
            ...checked,
            edit_userDepartment: val
        })
        list ? setEditCondtion({
            ...editCondtion,
            userDepartment: list
        }) : setEditCondtion({
            ...editCondtion
        })
    }
    const usageFrequency_callback = (val: any, list: any, chk: any) => {
        setChecked({
            ...checked,
            usageFrequency: val
        })
        list ? setEditCondtion({
            ...editCondtion,
            usageFrequency: list
        }) : setEditCondtion({
            ...editCondtion
        })
    }
    const header = () => {
        console.log(openStates)
    }
    return (
        // <div style={{height: 'calc(100vh - 72rem)'}}>
        <div style={{ width: '100%', height: 'calc(100vh - 72rem)', display: 'flex', flexDirection: 'column' }}>

            <PageNav {...props} />
            <div className='report_management'>

                <div style={{
                    display: open ? "flex" : "none",
                    zIndex: 1000,
                    position: "absolute",
                    right: '22rem',
                    top: "0",
                    alignContent: 'center'
                }}>
                    {
                        ApiUtils.isPurview('F2101') ?
                            <span style={{ color: openStates == 'UNI' ? xFontColor : "#D6D8DA", marginRight: "15rem" }}
                                onClick={() => setOpenStates('UNI')}>核保 </span>
                            : ""
                    }
                    {
                        (ApiUtils.isPurview('F2101') && ApiUtils.isPurview('F2103')) ?
                            <span style={{ marginRight: "15rem" }}>| </span>
                            : ""
                    }
                    {
                        ApiUtils.isPurview('F2103') ?
                            <span style={{ color: openStates == 'CLM' ? xFontColor : "#D6D8DA", marginRight: "15rem" }}
                                onClick={() => setOpenStates('CLM')}> 理赔 </span>
                            : ""
                    }
                    {
                        ((ApiUtils.isPurview('F2103') && ApiUtils.isPurview('F2102')) || (ApiUtils.isPurview('F2101') && ApiUtils.isPurview('F2102'))) ?
                            <span style={{ marginRight: "15rem" }}>| </span>
                            : ""
                    }
                    {
                        ApiUtils.isPurview('F2102') ?
                            <span style={{ color: openStates == 'POS' ? xFontColor : "#D6D8DA", marginRight: "15rem" }}
                                onClick={() => setOpenStates('POS')}> 保全</span>
                            : ""
                    }

                </div>
                <Tabs className='tabs' defaultActiveKey={props.history.location.state ? (props.history.location.state.keys) : "1"} centered={true} onChange={(e: any) => {
                    if (e == 1) {
                        search_click(null)
                    }
                }}>
                    <TabPane
                        tab={
                            <div onClick={() => { setOpen(false) }}>
                                <span className='tabs_triangle'></span>
                                <span >格式报表管理</span>
                            </div>
                        }
                        key="1"
                        style={{ position: "relative" }}
                    // locale={locale}
                    >
                        <div className='page_big'>
                            <div className='search_condtion'>
                                <div className='sp_lab'>
                                    <div className='search_resul_rectangle'></div>
                                    <span>查询条件</span>
                                </div>
                                <div className='search_condtion_top'>
                                    <div>
                                        <span>编码:</span>
                                        <input type="text" value={queryCondtion.reportCode} onChange={(e: any) => checkbox_click_search('reportCode', e.target.value)} />
                                    </div>
                                    <div>
                                        <span>报表名称:</span>
                                        <input type="text" value={queryCondtion.reportName || ''} onChange={(e: any) => checkbox_click_search('reportName', e.target.value)} />
                                    </div>
                                    <div>
                                        <span>任务类型:</span>
                                        <div className='DivInput'>
                                            {
                                                queryCondtion.reportModule ? (queryCondtion.reportModule.length <= 2 ? queryCondtion.reportModule.map((value: React.ReactNode, index: string | number | undefined) => {
                                                    return <p key={index}>{value}</p>
                                                }) :
                                                    <Title data={queryCondtion.reportModule} shu={2} />

                                                ) : <span style={{ color: "#b2b2b2" }}>请选择</span>
                                            }
                                            <SearchOutlined className='svg' onClick={() => checkcall('reportModule')} />
                                        </div>
                                    </div>
                                    <div>
                                        <span>归口管理部门:</span>
                                        <div className='DivInput'>
                                            {
                                                queryCondtion.centralizedManagement ? (queryCondtion.centralizedManagement.length <= 2 ? queryCondtion.centralizedManagement.map((value: React.ReactNode, index: string | number | undefined) => {
                                                    return <p key={index}>{value}</p>
                                                }) :
                                                    <Title data={queryCondtion.centralizedManagement} shu={2} />

                                                ) : <span style={{ color: "#b2b2b2" }}>请选择</span>
                                            }
                                            <SearchOutlined className='svg' onClick={() => checkcall('centralizedManagement')} />
                                        </div>
                                    </div>
                                    <div>
                                        <span>报表使用部门:</span>
                                        <div className='DivInput'>
                                            {
                                                queryCondtion.userDepartment ? (queryCondtion.userDepartment.length <= 2 ? queryCondtion.userDepartment.map((value: React.ReactNode, index: string | number | undefined) => {
                                                    return <p key={index}>{value}</p>
                                                }) :
                                                    <Title data={queryCondtion.userDepartment} shu={2} />

                                                ) : <span style={{ color: "#b2b2b2" }}>请选择</span>
                                            }
                                            <SearchOutlined className='svg' onClick={() => checkcall('userDepartment')} />
                                        </div>

                                    </div>
                                    <div></div>
                                </div>

                                <div className='search_condtion_btn'>
                                    <button className='btn_white hoverBorder2' onClick={clear_click}>清空</button>
                                    <button className='btn_red btn_return hoverBorder2' onClick={() => search_click('page')} >查询</button>
                                </div>
                            </div>
                            <div id="hisHead">
                                {
                                    viewHistory.tunon && <History rootIdData={viewHistory.rootId} guan={() => setViewHistory({ ...viewHistory, tunon: !viewHistory.tunon })} getHistoricalList={viewHistory.tunon}></History>
                                }
                            </div>
                            <div className='search_resul'>

                                <div className='search_resul_table'>
                                    {
                                        // tabledata != undefined && tablecolumns != undefined ?
                                        <TableList flag={true} theadList={tablecolumns} tbodyList={tabledata} isBig={false} isCheckBox={false} changesTHlist={Extract} getWorkteamId={RowDoubleClick} title="查询结果" />
                                        // :null
                                    }
                                </div>
                                {
                                    ApiUtils.isPurview("F1502") &&
                                    <div className='search_resul_btn'>
                                        <div className="itableList_inData btn_icon btn_back  hoverBorder2" onClick={onExportExcel}>
                                            <i className="bg_imgIcon_daochu" />
                                            <span>导出</span>
                                            {/* <FileUpload uploadType={"DictionaryQuota"} /> */}
                                        </div>
                                    </div>
                                }
                            </div>

                            {
                                rendreport == 3 &&
                                <div className='condtion_extract'>
                                    <div className='condtion_select'>
                                        <div className="close" onClick={() => setRendreport(0)}>
                                            <span></span>
                                            <img src={(window.rootUrl + "/images/deletebtn.svg")} alt="" />
                                        </div>
                                        <div className='sp_lab'>
                                            <div className='search_resul_rectangle'></div>
                                            <span>条件框定</span>
                                        </div>
                                        <div className='condtion_select_line1'>
                                            <div>
                                                <span>起始日期:</span>
                                                <DatePicker format="YYYY-MM-DD" value={condtiontime.stime ? moment(condtiontime.stime, 'YYYY-MM-DD') : null} disabledDate={StartdisabledDate} onChange={cstime} />
                                            </div>
                                            <div>
                                                <span>终止日期:</span>
                                                <DatePicker format="YYYY-MM-DD" value={condtiontime.etime ? moment(condtiontime.etime, 'YYYY-MM-DD') : null} disabledDate={EnddisabledDate} onChange={cetime} />
                                            </div>
                                            <div style={{ width: "350rem" }}>
                                                <span>任务类型:</span>
                                                <div className='DivInput'>
                                                    {
                                                        extract.reportModule ? (extract.reportModule.length <= 2 ? extract.reportModule.map((value: React.ReactNode, index: string | number | undefined) => {
                                                            return <p key={index}>{value}</p>
                                                        }) :
                                                            <Title data={extract.reportModule} shu={2} />

                                                        ) : <span style={{ color: "#b2b2b2" }}>请选择</span>
                                                    }
                                                    <SearchOutlined className='svg' onClick={() => checkcall('extract_reportModule')} />
                                                </div>

                                            </div>

                                        </div>
                                        <div className='condtion_select_line2'>
                                            <div>
                                                <span>SSO:</span>
                                                <div className='DivInput'>
                                                    {
                                                        extract.SSO ? (extract.SSO.length <= 2 ? extract.SSO.map((value: React.ReactNode, index: string | number | undefined) => {
                                                            return <p key={index}>{value}</p>
                                                        }) :
                                                            <Title data={extract.SSO} shu={2} />

                                                        ) : <span style={{ color: "#b2b2b2" }}>请选择</span>
                                                    }
                                                    <SearchOutlined className='svg' onClick={() => checkcall('extract_SSO')} />
                                                </div>
                                                {/* <CheckboxGroup value={checkedList.SSO} onChange={(e: any) => { GenerateReport('SSO', e) }}>
                                                    <Checkbox value={"S-SSO"}>S-SSO</Checkbox>
                                                    <Checkbox value={"N-SSO"}>N-SSO</Checkbox>
                                                </CheckboxGroup> */}

                                            </div>
                                            <div>
                                                <span>BU:</span>
                                                <div className='DivInput'>
                                                    {
                                                        extract.BU ? (extract.BU.length <= 2 ? extract.BU.map((value: React.ReactNode, index: string | number | undefined) => {
                                                            return <p key={index}>{value}</p>
                                                        }) :
                                                            <Title data={extract.BU} shu={2} />

                                                        ) : <span style={{ color: "#b2b2b2" }}>请选择</span>
                                                    }
                                                    <SearchOutlined className='svg' onClick={() => checkcall('extract_BU')} />
                                                </div>
                                                {/* <CheckboxGroup value={checkedList.BU} onChange={(e: any) => { GenerateReport('BU', e) }}>
                                                    <Checkbox value={"上海BU"}>上海BU</Checkbox>
                                                    <Checkbox value={"北京BU"}>北京BU</Checkbox>
                                                </CheckboxGroup> */}
                                            </div>
                                            <div>
                                                <span>CITY:</span>
                                                <div className='DivInput'>
                                                    {
                                                        extract.CITY ? (extract.CITY.length <= 2 ? extract.CITY.map((value: React.ReactNode, index: string | number | undefined) => {
                                                            return <p key={index}>{value}</p>
                                                        }) :
                                                            <Title data={extract.CITY} shu={2} />

                                                        ) : <span style={{ color: "#b2b2b2" }}>请选择</span>
                                                    }
                                                    <SearchOutlined className='svg' onClick={() => checkcall('extract_CITY')} />
                                                </div>
                                                {/* <CheckboxGroup value={checkedList.CITY} onChange={(e: any) => { GenerateReport('CITY', e) }}>
                                                    <Checkbox value={"上海"}>上海</Checkbox>
                                                    <Checkbox value={"北京"}>北京</Checkbox>
                                                    <Checkbox value={"广州"}>广州</Checkbox>
                                                </CheckboxGroup> */}

                                            </div>
                                        </div>
                                        <div className='condtion_select_btn'>
                                            <button className='btn_white hoverBorder2' onClick={() => clear_extract()}>清空</button>
                                            <button className='btn_red btn_return hoverBorder2' onClick={BuildReport}>生成</button>
                                        </div>
                                    </div>
                                </div>

                            }
                        </div>
                        <div>
                            {
                                render_report()
                            }
                        </div>
                    </TabPane>

                    {/* <TabPane
                        tab={
                            <div>
                                <span className='tabs_triangle'></span>
                                <span >自定义报表</span>
                            </div>
                        }
                        key="2"
                        style={{ position: "relative" }}
                        // locale={locale}
                    >
                        <ReportCustom />                        
                    </TabPane>

                    <TabPane
                        tab={
                            // <div style={{height: 'calc(100vh - 15rem)',overflow: 'auto'}}>
                            <div>
                                <span className='tabs_triangle'></span>
                                <span >报表订阅</span>
                            </div>
                        }                
                        key="3"
                        style={{ position: "relative" }}
                        // locale={locale}
                    >
                        <ReportSubscribe />                        
                    </TabPane> */}

                    <TabPane
                        tab={
                            <div onClick={() => { setOpen(false) }}>
                                <span className='tabs_triangle'></span>
                                <span >我的报表</span>
                            </div>
                        }
                        key="4"
                        style={{ position: "relative" }}
                    // locale={locale}
                    >
                        <MyReport CollectList={CollectList} />
                    </TabPane>

                    <TabPane
                        tab={
                            <div onClick={() => { setOpen(true) }}>
                                <span className='tabs_triangle'></span>
                                <span>可视化报表</span>
                            </div>
                        }
                        key="5" style={{ position: "relative" }}>
                        <VisualReport openStates={openStates} xFontColor={xFontColor} />
                    </TabPane>

                    <TabPane
                        tab={
                            <div onClick={() => { setOpen(true) }}>
                                <span className='tabs_triangle'></span>
                                <span>BU可视化报表</span>
                            </div>
                        }
                        key="6" style={{ position: "relative" }}>
                        <VisualReportForBu openStates={openStates} xFontColor={xFontColor} />
                    </TabPane>

                </Tabs>
            </div>
            {/* 引入所有的多选框弹出框 */}
            {
                checked.reportModule && <CheckedList title="选择任务类型" data={quotaConfig.reportModule.map((item: any) => item = { code: item, title: item })} titlelist={queryCondtion.reportModule} flag={7} callBack={reportModule_callback} />
            }
            {
                checked.extract_reportModule && <CheckedList title="选择任务类型" data={quotaConfig.reportModule.map((item: any) => item = { code: item, title: item })} titlelist={extract.reportModule} flag={7} callBack={extract_reportModule_callback} />
            }
            {
                checked.centralizedManagement && <CheckedList title="选择归口管理部门" data={quotaConfig.centralizedManagement.map((item: any) => item = { code: item, title: item })} titlelist={queryCondtion.centralizedManagement} flag={7} callBack={centralizedManagement_callback} />
            }
            {
                checked.userDepartment && <CheckedList title="选择报表使用部门" data={quotaConfig.userDepartment.map((item: any) => item = { code: item, title: item })} titlelist={queryCondtion.userDepartment} flag={7} callBack={userDepartment_callback} />
            }
            {
                checked.edit_userDepartment && <CheckedList title="选择报表使用部门" data={quotaConfig.userDepartment.map((item: any) => item = { code: item, title: item })} titlelist={editCondtion.userDepartment} flag={7} callBack={edit_userDepartment_callback} />
            }
            {
                checked.usageFrequency && <CheckedList title="选择统计频率" data={quotaConfig.usageFrequency.map((item: any) => item = { code: item, title: item })} titlelist={editCondtion.usageFrequency} flag={7} callBack={usageFrequency_callback} />
            }
            {
                checked.extract_SSO && <CheckedList title="选择SSO" data={checkedList.SSO.map((item: any) => item = { code: item, title: item })} titlelist={extract.SSO} flag={7} callBack={extract_SSO_callback} />
            }{
                checked.extract_BU && <CheckedList title="选择BU" data={checkedList.BU.map((item: any) => item = { code: item.ORG_NAME, title: item.ORG_NAME })} titlelist={extract.BU} flag={7} callBack={extract_BU_callback} />
            }{
                checked.extract_CITY && <CheckedList title="选择CITY" data={checkedList.CITY.map((item: any) => item = { code: item.CITYNAME, title: item.CITYNAME })} titlelist={extract.CITY} flag={7} callBack={extract_CITY_callback} />
            }
        </div>
    )
}

 

import React, { useState, useCallback, useEffect, useLayoutEffect } from 'react'import { Checkbox, DatePicker, Tabs, Table, Select } from "antd";import moment from 'moment';import locale from "antd/es/date-picker/locale/zh_CN";import Title from '../../components/Title'import TableList from '../../components/TableList';import CheckedList from "../../components/CheckedList";
import XLSX from 'xlsx'import { SearchOutlined } from '@ant-design/icons';

import MyReport from './MyReport';import VisualReport from './visual_report/VisualReport';import VisualReportForBu from './visual_report/BuVisualReport';
import AlertUtil from "../../utils/AlertUtil";import ApiUtils from '../../utils/ApiUtils';import Utils from '../../utils/Utils';import PageNav from "../navigation/PageNav";import History from "../historical_changes/Historicalchanges";import FileUpload from '../../components/FileUpload';const CheckboxGroup = Checkbox.Group;const columns = [    { title: '指标编码', sort: 'indexCode', key: 'indexCode' },    { title: '指标名称', sort: 'indexName', key: 'indexName' },    { title: '指标主题', sort: 'indexTheme', key: 'indexTheme' },    { title: '指标类型', sort: 'indexType', key: 'indexType' },    { title: '计量单位', sort: 'unit', key: 'unit' },    // { title: '指标口径', sort: 'caliber', key: 'caliber'},    // { title: '规口管理部门', sort: 'centralizedManagement', key: 'centralizedManagement'},    // { title: '统计频率', sort: 'statisticalFrequency', key: 'statisticalFrequency'},    // { title: '统计时间', sort: 'statisticalTime', key: 'statisticalTime'},    // { title: '数据来源', sort: 'dataSources', key: 'dataSources'},    // { title: '指标状态', sort: 'indexState', key: 'indexState'},    // { title: '是否PKI', sort: 'isKpi', key: 'isKpi'},    { title: '操作历史', sort: 'viewhis', key: 'viewhis' },    // {    //   title: 'Action',    //   dataIndex: '',    //   key: 'x',    //   render: () => <a>Delete</a>,    //   width:'150rem'    // },];
const datasource = [    {        key: 1,        name: 'John Brown',        age: 32,        address: 'New York No. 1 Lake Park',        description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',    },    {        key: 2,        name: 'Jim Green',        age: 42,        address: 'London No. 1 Lake Park',        description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',    },    {        key: 3,        name: 'Not Expandable',        age: 29,        address: 'Jiangsu No. 1 Lake Park',        description: 'This not expandable',    },    {        key: 4,        name: 'Joe Black',        age: 32,        address: 'Sidney No. 1 Lake Park',        description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',    },];
export default function ReportManagement(props: any) {
    useEffect(() => {        localStorageUpdated()        GetReportInit();        getBU()        search_click(null)        props.history.location.state&&props.history.location.state.option&&setOpenStates(props.history.location.state.option)    }, []);
    const localStorageUpdated = () => {        var _this = localStorage.getItem("localstorage-status")        _this == "false" ? setFontColor("#302F2C") : setFontColor('rgb(244 76 76)')        window.addEventListener("setItemEvent", (e: any) => {            if (e.key == 'localstorage-status') {                var _this = localStorage.getItem("localstorage-status")                console.log(e.newValue)                e.newValue == "false" ? setFontColor("#302F2C") : setFontColor('rgb(244 76 76)')            }        });    }    /* --- 数据 ----*/    const [rendreport, setRendreport] = useState<any>(0);    const [tabledata, setTabledata] = useState<any>([]);    const [tablecolumns, setTablecolumns] = useState<any>(columns)    const [condtiontime, setCondtiontime] = useState<any>({ stime: '', etime: '' });    const [tasktype, setTasktype] = useState<any>({        核保: false, 理赔: false, 保全: false, 通用: false,    });    const [CollectList, setCollectList] = useState<any>()    const [extract, setExtract] = useState<any>({        "rid": "",        "reportCode": "",        reportModule: null,        "reportStatus": "",        "reportName": "",        "reportTheme": "",        "reportPurpose": "",        "keyIndicators": "",        "reportRange": "",        "presentationDimension": "",        "reportType": "",        "centralizedManagement": "",        "userDepartment": "",        "usageFrequency": "",        "originalReport": "",        "userId": "",        starttime: '',        endtime: '',        SSO: null,        BU: null,        CITY: null,    });    const [checkedList, setCheckedList] = useState<any>({        SSO: ["S-SSO", "N-SSO"],        BU: [],        CITY: [],    })    const [viewHistory, setViewHistory] = useState<any>({        tunon: false,        rootId: ''    });    //search 的条件    const [queryCondtion, setQueryCondtion] = useState<any>(        {            rid: "",            reportCode: "",            reportModule: "",            reportStatus: "",            reportName: "",            reportTheme: "",            reportPurpose: "",            keyIndicators: "",            reportRange: "",            presentationDimension: "",            reportType: null,            centralizedManagement: null,            userDepartment: null,            usageFrequency: "",            originalReport: "",            userId: "",            sso: '',            bu: '',            city: ''        }    );    //信息和修改的载体    const [editCondtion, setEditCondtion] = useState<any>(        {            rid: "",            reportCode: "",            reportModule: "",            reportStatus: "",            reportName: "",            reportTheme: "",            reportPurpose: "",            keyIndicators: "",            reportRange: "",            presentationDimension: "",            reportType: null,            centralizedManagement: null,            userDepartment: null,            usageFrequency: null,            originalReport: "",            userId: "",            belongingDepartment: "",            sso: '',            bu: '',            city: ''        }    );    const [quotaConfig, setQuotaConfig] = useState<any>();    const [authlist, setAuthlist] = useState<any>()    const [open, setOpen] = useState<any>(props.history.location.state ? true : false)    const [openStates, setOpenStates] = useState<any>("UNI")    const [xFontColor, setFontColor] = useState<any>("#000")
    const { Option } = Select;    const { TabPane } = Tabs;    const { RangePicker } = DatePicker;    //多选框状态    const [checked, setChecked] = useState<any>({        reportModule: false,        centralizedManagement: false,        userDepartment: false,        edit_userDepartment: false,        usageFrequency: false,        extract_reportModule: false,        extract_SSO: false,        extract_BU: false,        extract_CITY: false
    })    // 复选框下拉框初始化数据    const GetReportInit = () => {        ApiUtils.ReportInit().then((res: any) => {            if (res && res.code == 0) {                setQuotaConfig(res.data.data)            } else {                AlertUtil.warningMsg(res.msg)            }        })    }
    //BU    const getBU = () => {        ApiUtils.getBuByOrg().then((res: any) => {
            res && setCheckedList({                ...checkedList,                BU: res.data,
            })        })
        console.log(checkedList)
    }    //CITY    const getCITY = (data: any) => {        let jsonDate = data != null ? data.join(',') : ''        ApiUtils.getCityByBu(jsonDate).then((res: any) => {            res && setCheckedList({                ...checkedList,                CITY: res.data,

            })        })


    }
    /* --- 方法----*/    const table_rowclick = (rowitem: any) => {        // console.log(rowitem,e,"sso2-quota")        // if(!e.target.matches('span')){        setRendreport(1)
        if (rowitem != '') {
            setEditCondtion({                rid: rowitem.rid,                reportCode: rowitem.reportCode,                reportModule: rowitem.reportModule,                reportName: rowitem.reportName,                reportStatus: rowitem.reportStatus,                reportPurpose: rowitem.reportPurpose,                keyIndicators: rowitem.keyIndicators,                reportRange: rowitem.reportRange,                presentationDimension: rowitem.presentationDimension,                reportType: rowitem.reportType,                caliber: rowitem.caliber,                centralizedManagement: rowitem.centralizedManagement,                userDepartment: rowitem.userDepartment ? rowitem.userDepartment.split(',') : rowitem.userDepartment,                usageFrequency: rowitem.usageFrequency ? rowitem.usageFrequency.split('/') : rowitem.usageFrequency,                originalReport: rowitem.originalReport,                userId: rowitem.userId,                belongingDepartment: rowitem.belongingDepartment            })        }    }
    const RowDoubleClick = (record: any) => {        table_rowclick(record)    }
    const TableRowClick = () => {        let RowElement: any = document.getElementsByClassName('table_container')        if (RowElement.length) {            console.log(RowElement[0].children, "sso2-rep")        }    }
    const search_click = async (type: any) => {        let search_condtion: any        if (type === 'page') {            //页面条件            search_condtion = {                reportCode: queryCondtion.reportCode,                reportName: queryCondtion.reportName,                reportTheme: queryCondtion.indexTheme,                centralizedManagement: queryCondtion.centralizedManagement != null ? queryCondtion.centralizedManagement.join(',') : '',                userDepartment: queryCondtion.userDepartment != null ? queryCondtion.userDepartment.join(',') : '',                // reportModule: Object.entries(tasktype).filter((el: any) => el[1] == true).map((el: any) => el[0]).join(','),                reportModule: queryCondtion.reportModule  ? queryCondtion.reportModule.join(',') : '',                userId: ApiUtils.userInfo.userId            }        } else {            search_condtion = {                reportCode: '',                reportName: '',                reportTheme: '',                centralizedManagement: '',                userDepartment: '',                reportModule: '',                userId: ApiUtils.userInfo.userId            }        }
        // if (type == "4") {        //     await ApiUtils.CollectList(ApiUtils.userInfo.userId).then((res: any) => {        //         if (res && res.code == 0) {        //             setCollectList(res.data)        //         }        //     })        // }
            await ApiUtils.GetReportList(search_condtion).then((res: any) => {                if (res && res.code == 0) {                    // console.log(res,"sso2-quota")                    //format thead                    let arr: any = []                    let column: any                    let attributeName: any                    let columnrow = {                        "reportCode": queryCondtion.reportCode,                        "reportName": queryCondtion.reportName,                        // "indexTheme": queryCondtion.reportName,                        "reportPurpose": queryCondtion.reportPurpose,                        "reportModule": queryCondtion.reportModule,                        "reportStatus": queryCondtion.reportStatus,                        "reportType": queryCondtion.reportType,                        "centralizedManagement": queryCondtion.centralizedManagement,                    }
                    Object.keys(columnrow).map((el: any) => {                        // console.log(el,"sso2-dic")                        switch (el) {                            case 'reportCode':                                attributeName = '报表编码'                                break;                            case 'reportName':                                attributeName = '报表名称'                                break;                            case 'reportModule':                                attributeName = '任务类型'                                break;                            case 'reportStatus':                                attributeName = '报表状态'                                break;                            case 'reportPurpose':                                attributeName = '报表用途概述'                                break;                            case 'keyIndicators':                                attributeName = '所含关键指标'                                break;                            case 'reportRange':                                attributeName = '报表范围框定条件'                                break;                            case 'presentationDimension':                                attributeName = '报表数据列示维度'                                break;                            case 'reportType':                                attributeName = '报表类型'                                break;                            // case 'caliber':                            //     attributeName='报表口径'                            //     break;                            case 'centralizedManagement':                                attributeName = '归口管理部门'                                break                            case 'userDepartment':                                attributeName = '报表使用部门'                                break                            case 'usageFrequency':                                attributeName = '报表使用频率'                                break                            case 'originalReport':                                attributeName = '原报表名称'                                break                            case 'userId':                                attributeName = '用户id'                                break                            case 'belongingDepartment':                                attributeName = '报表所在系统'                                break                        }

                        if (attributeName == '报表名称' || attributeName == '报表用途概述') {                            arr.push({                                "title": attributeName,                                "sort": el,                                "width": "250",                                "align": "center"                            })                        } else if(attributeName=="报表编码"){                            arr.push({                                "title": attributeName,                                "sort": el,                                "width": "156",                                "align": "center"                            })                        }else{                            arr.push({                                "title": attributeName,                                "sort": el,                                "width": "100",                                "align": "center"                            })                        }                    })                    setTablecolumns([...arr, { title: '操作', sort: 'viewhis', "width": "250", key: 'viewhis' },])                    setTabledata(res.data.map((item: any) => {                        item = {                            "reportCode": item.reportCode,                            "rid": item.rid,                            // "taskType": queryCondtion.taskType,                            "reportName": item.reportName,                            // "indexCategory": queryCondtion.indexCategory,                            // "indexSubclass": queryCondtion.indexSubclass,                            "indexTheme": item.reportName,                            // "indexDefinition": queryCondtion.indexDefinition,                            // "formula": queryCondtion.formula,                            "reportPurpose": item.reportPurpose,                            "reportModule": item.reportModule,                            "reportStatus": item.reportStatus,                            "keyIndicators": item.keyIndicators,                            "reportRange": item.reportRange,                            "presentationDimension": item.presentationDimension,                            "reportType": item.reportType,                            "centralizedManagement": item.centralizedManagement,                            "userDepartment": item.userDepartment,                            "usageFrequency": item.usageFrequency,                            "originalReport": item.originalReport,                            "userId": item.userId,                            belongingDepartment: item.belongingDepartment,                            "viewhis": [<a title='查看操作历史' key={'history' + item.rid} onClick={() => setViewHistory({ tunon: true, rootId: item.rid })}>操作历史</a>, <a key={'extract' + item.rid} title='抽取' onClick={() => extractRow(item)}>抽取</a>, <a title='报表修改' key={'modfly' + item.rid} onClick={() => modfly(item)}>修改</a>]                        }                        return item                    }))                }            })        }
    const search_tasktype = (type: any, value: any, e: any) => {        console.log(type, value, e.target, "sso2-dic")        setTasktype({            ...tasktype,            [type]: value        })    }
    const clear_click = () => {        setQueryCondtion({            "rid": null,            "reportCode": '',            "reportModule": null,            "reportStatus": null,            "reportName": '',            "reportTheme": null,            "reportPurpose": null,            "keyIndicators": null,            "reportRange": null,            "presentationDimension": null,            "reportType": null,            "centralizedManagement": null,            "userDepartment": null,            "usageFrequency": null,            "originalReport": null,            "userId": null,        })        setTasktype({            核保: false, 理赔: false, 保全: false, 通用: false,        })
    }
    const clear_extract = () => {        setExtract({            "rid": null,            "reportCode": null,            "reportModule": '',            "reportStatus": null,            "reportName": null,            "reportTheme": null,            "reportPurpose": null,            "keyIndicators": null,            "reportRange": null,            "presentationDimension": null,            "reportType": null,            "centralizedManagement": null,            "userDepartment": null,            "usageFrequency": null,            "originalReport": null,            "userId": null,            model: '',            starttime: null,            endtime: null,            SSO: null,            BU: null,            CITY: null,        })        setCondtiontime({ ...condtiontime, stime: '', etime: '' })        // setCheckedList({ SSO: [], BU: [], CITY: [] })    }
    const checkbox_click = (quota: any, value: any) => {        setEditCondtion({            ...editCondtion,            [quota]: value,        })    }    const checkbox_click_select = (value: any, quota: any) => {
        setEditCondtion({            ...editCondtion,            [quota]: value,        })    }    const checkbox_click_search = (quota: any, value: any) => {        setQueryCondtion({            ...queryCondtion,            [quota]: value,        })    }
    //时间组件触发函数    const EnddisabledDate = (current: any) => {
        return current && current < moment(`${JSON.stringify(condtiontime.stime)}}`, 'YYYY-MM-DD')    }    const StartdisabledDate = (current: any) => {
        return current && current > moment(`${JSON.stringify(condtiontime.etime)}}`, 'YYYY-MM-DD')    }    const cstime = (value: any, dateString: any) => {        setCondtiontime({ ...condtiontime, stime: dateString })        console.log(dateString, condtiontime, "sso2-report")    }    const cetime = (value: any, dateString: any) => {        setCondtiontime({ ...condtiontime, etime: dateString })        console.log(dateString, condtiontime, "sso2-report")    }
    const modfily_comit = async () => {
        let reqlist = {            "rid": editCondtion.rid,            "reportCode": editCondtion.reportCode ? editCondtion.reportCode : (AlertUtil.errorMsg('编码不能为空'), null),            "reportModule": editCondtion.reportModule,//            "reportStatus": editCondtion.reportStatus ? editCondtion.reportStatus : (AlertUtil.errorMsg('报表状态不能为空'), null),            "reportName": editCondtion.reportName ? editCondtion.reportName : (AlertUtil.errorMsg('报表名称不能为空'), null),            "reportTheme": editCondtion.reportTheme,            "reportPurpose": !editCondtion.reportPurpose ? (AlertUtil.errorMsg('报表用途概述不能为空')) : editCondtion.reportPurpose.length > 60 ? (AlertUtil.errorMsg('报表用途概述长度超过“60个字符!”'), null) : editCondtion.reportPurpose,            "keyIndicators": editCondtion.keyIndicators ? editCondtion.keyIndicators : (AlertUtil.errorMsg('所含关键指标不能为空'), null),            "reportRange": editCondtion.reportRange ? editCondtion.reportRange : (AlertUtil.errorMsg('报表范围框定条件不能为空'), null),            "presentationDimension": editCondtion.presentationDimension,            "reportType": editCondtion.reportType ? editCondtion.reportType : (AlertUtil.errorMsg('报表类型不能为空'), null),            "centralizedManagement": editCondtion.centralizedManagement ? editCondtion.centralizedManagement : (AlertUtil.errorMsg('归口管理部门不能为空'), null),            "userDepartment": editCondtion.userDepartment != null ? editCondtion.userDepartment.join(',') : (AlertUtil.errorMsg('报表使用部门不能为空'), null),            "usageFrequency": editCondtion.usageFrequency != null ? editCondtion.usageFrequency.join(',') : (AlertUtil.errorMsg('报表使用频率不能为空'), null),            "originalReport": editCondtion.originalReport,            "userId": ApiUtils.userInfo.userId,            belongingDepartment: !editCondtion.belongingDepartment ? (AlertUtil.errorMsg('报表所在系统不能为空')) : editCondtion.belongingDepartment.length > 100 ? (AlertUtil.errorMsg('报表所在系统长度超过“100个字符!”'), null) : editCondtion.belongingDepartment,            sso: '',            bu: '',            city: ''        }        if (!reqlist.reportCode || !reqlist.reportName || !reqlist.centralizedManagement || !reqlist.reportType || !reqlist.reportStatus || !reqlist.userDepartment || !reqlist.usageFrequency || !reqlist.belongingDepartment || !reqlist.reportPurpose || !reqlist.keyIndicators || !reqlist.reportRange) {            return        }        await ApiUtils.UpdateReport(reqlist).then((res: any) => {            if (res && res.code == 0) {                AlertUtil.showMsg('修改成功!')            } else {                AlertUtil.warningMsg(res.msg)            }        })

        search_click(null)
        setRendreport(2)    }
    const modfly = (rowitem: any) => {        console.log(rowitem)        ApiUtils.isPurview("F1501") ? setRendreport(2) : AlertUtil.errorMsg('您没报表修改权限！')        if (rowitem != '') {            setEditCondtion({

                rid: rowitem.rid,                reportCode: rowitem.reportCode,                reportModule: rowitem.reportModule,                reportStatus: rowitem.reportStatus,                reportName: rowitem.reportName,                reportPurpose: rowitem.reportPurpose,                keyIndicators: rowitem.keyIndicators,                reportRange: rowitem.reportRange,                presentationDimension: rowitem.presentationDimension,                reportType: rowitem.reportType,                centralizedManagement: rowitem.centralizedManagement,                userDepartment: rowitem.userDepartment ? rowitem.userDepartment.split('/') : rowitem.userDepartment,                usageFrequency: rowitem.usageFrequency ? rowitem.usageFrequency.split('/') : rowitem.usageFrequency,                originalReport: rowitem.originalReport,                userId: ApiUtils.userInfo.userId,                belongingDepartment: rowitem.belongingDepartment            })        }

    }
    const scribeReport = () => {        let userid = ApiUtils.userInfo.userId        ApiUtils.CollectReport(editCondtion.rid, ApiUtils.userInfo.userId).then((res: any) => {            if (res && res.code == 0) {                AlertUtil.showMsg('收藏成功!')            } else {                AlertUtil.showMsg(res.msg)            }        })
        ApiUtils.CollectList(ApiUtils.userInfo.userId).then((res: any) => {            if (res && res.code == 0) {                setCollectList(res.data)            }        })
        search_click(null)
    }
    const Extract = (item: any) => {
    }


    const BuildReport = () => {        let reqlist = {            reportCode: extract.reportCode,            reportModule: extract.reportModule ? extract.reportModule.join(',') : '',            frequency: extract.frequency,            startDate: condtiontime.stime,            endDate: condtiontime.etime,            zoneflg: extract.SSO ? extract.SSO.join(',') : '',            model: extract.model,            bu: extract.BU ? extract.BU.join(',') : '',            city: extract.CITY ? extract.CITY.join(',') : '',            name: extract.name            // frequency    适用频率        false            // startDate    起始时间        false            // endDate    终止时间        false            // zoneflg    SSO        false            // model    任务类型        false            // bu            // city        }        if (reqlist.startDate == '') {            AlertUtil.showMsg('请先选择起始日期！')        } else if (reqlist.endDate == '') {            AlertUtil.showMsg('请先选择终止日期！')        } else if (reqlist.model == '') {            AlertUtil.showMsg('请先选择任务类型!')        }        // else if (reqlist.zoneflg == '') {        //     AlertUtil.showMsg('请先选择SS0！')        // } else if (reqlist.bu == '') {        //     AlertUtil.showMsg('请先选择BU！')        // } else if (reqlist.city == '') {        //     AlertUtil.showMsg('请先选择CITY！')        // }         else {            ApiUtils.ExtractReport(reqlist)        }    }
    //Excel导出    const onExportExcel = (file: any) => {
        let workbook: any = {            SheetNames: [],            Sheets: {}        };
        if (tabledata != undefined && tabledata.length) {            let ws = XLSX.utils.json_to_sheet([...tabledata]);            let wb = XLSX.utils.book_new()            XLSX.utils.book_append_sheet(wb, ws, '指标查询') // 工作簿名称            XLSX.writeFile(wb, '.\指标查询.xlsx') // 保存的文件名        } else {            AlertUtil.errorMsg('当前无表格数据!')        }
        // ApiUtils.downloadFile(`/index/manage/getTemplate`, null, '参数导入模板.xlsx')
    }
    const extractRow = (itemrow: any) => {        let authlist = ApiUtils.userInfo        let coecode = ['002', '00200', '00201', '00202', '003', '004', '005', '006', '00600', '0060000', '00602', '0060200']        console.log(authlist, "sso2-report")        // if (authlist.orgCategory == 'CHO' || coecode.includes(authlist.orgCode) && itemrow.userDepartment.includes('SSO' || 'BU') || authlist.orgCategory == 'BU') {        setRendreport(3)        setExtract({

            "reportCode": itemrow.reportCode,            "reportModule":itemrow.reportModule? itemrow.reportModule.split(','):null,            "frequency": itemrow.usageFrequency,            "startDate": condtiontime.stime,            "endDate": condtiontime.etime,            SSO: null,            "model": itemrow.reportType,            BU: null,            CITY: null,            name: itemrow.reportName        })        // }        // else {        //     AlertUtil.errorMsg('您无权抽取该报表!')        // }    }
    const render_report = () => {        // if (ApiUtils.isPurview("F1500") && rendreport == 1 || ApiUtils.isPurview("F1501") && rendreport == 2){        if (rendreport == 1 || rendreport == 2) {            return <div className='base_report'>                <div className='report_basic'>                    <div className='lab_sp'>                        <div className='search_resul_rectangle'></div>                        <span>报表基本信息</span>                    </div>                    <div className="close" onClick={() => setRendreport(0)}>                        <span></span>                        <img src={(window.rootUrl + "/images/deletebtn.svg")} alt="" />                    </div>                    <div className='report_basic_line1'>                        <div >                            <span>编码</span>                            {                                rendreport == 1 &&                                <input className="disable" value={editCondtion.reportCode} disabled />                            }                            {                                rendreport == 2 &&                                <input className="disable" type="text" value={editCondtion.reportCode} onChange={(e: any) => checkbox_click('reportCode', e.target.value)} disabled />                            }                        </div>                        <div >                            <span>报表名称</span>                            {                                rendreport == 1 &&                                <Select defaultValue={editCondtion.reportName} className="disable" allowClear disabled>                                    {quotaConfig.reportName.map((item: any, index: any) => {                                        return <Option key={`reportName${index}`} value={item}>{item}</Option>
                                    })}                                </Select>                            }                            {                                rendreport == 2 &&                                <Select defaultValue={editCondtion.reportName} style={{ background: '#f8f8f8' }} onChange={(e: any) => checkbox_click_select(e, 'reportName')} allowClear >                                    {quotaConfig.reportName.map((item: any, index: any) => {                                        return <Option key={`reportName${index}`} value={item}>{item}</Option>
                                    })}                                </Select>                                // <input type="text" value={editCondtion.reportName} onChange={(e: any) => checkbox_click('reportName', e.target.value)} />                            }                        </div>                        {/* <div >                            <span>报表主题</span>                            {                                rendreport == 1 &&                                <input type="text" style={{ background: '#f8f8f8' }} value={editCondtion.reportName} disabled />                            }                            {                                rendreport == 2 &&                                <input type="text" value={editCondtion.reportName} onChange={(e: any) => checkbox_click('reportName', e.target.value)} />                            }
                        </div> */}                        <div >                            <span>报表状态</span>                            {                                rendreport == 1 &&                                <Select defaultValue={editCondtion.reportStatus} className="disable" allowClear disabled>                                    {quotaConfig.reportStatus.map((item: any, index: any) => {                                        return <Option key={`reportStatus${index}`} value={item}>{item}</Option>
                                    })}                                </Select>                            }                            {                                rendreport == 2 &&                                <Select defaultValue={editCondtion.reportStatus} style={{ background: '#f8f8f8' }} onChange={(e: any) => checkbox_click_select(e, 'reportStatus')} allowClear>                                    {quotaConfig.reportStatus.map((item: any, index: any) => {                                        return <Option key={`reportStatus${index}`} value={item}>{item}</Option>
                                    })}                                </Select>                            }                        </div>                    </div>                    <div className='report_basic_line2'>                        <div >                            <span>报表类型</span>                            {                                rendreport == 1 &&                                <Select defaultValue={editCondtion.reportType} className="disable" allowClear disabled>                                    {quotaConfig.reportType.map((item: any, index: any) => {                                        return <Option key={`reportType${index}`} value={item}>{item}</Option>
                                    })}                                </Select>                                // <input type="text" style={{ background: '#f8f8f8' }} value={editCondtion.reportType} disabled />                            }                            {                                rendreport == 2 &&                                <Select defaultValue={editCondtion.reportType} style={{ background: '#f8f8f8' }} onChange={(e: any) => checkbox_click_select(e, 'reportType')} allowClear>                                    {quotaConfig.reportType.map((item: any, index: any) => {                                        return <Option key={`reportType${index}`} value={item}>{item}</Option>
                                    })}                                </Select>                                // <input type="text" value={editCondtion.reportType} onChange={(e: any) => checkbox_click('reportType', e.target.value)} />                            }
                        </div>                        <div >                            <span>归口管理部门</span>                            {                                rendreport == 1 &&                                <Select defaultValue={editCondtion.centralizedManagement} className="disable" disabled allowClear>                                    {quotaConfig.centralizedManagement.map((item: any, index: any) => {                                        return <Option key={`centralizedManagement${index}`} value={item}>{item}</Option>
                                    })}                                </Select>                                // <input type="text" style={{ background: '#f8f8f8' }} value={editCondtion.centralizedManagement} disabled />                            }                            {                                rendreport == 2 &&                                <Select defaultValue={editCondtion.centralizedManagement} style={{ background: '#f8f8f8' }} onChange={(e: any) => checkbox_click_select(e, 'centralizedManagement')} allowClear>                                    {quotaConfig.centralizedManagement.map((item: any, index: any) => {                                        return <Option key={`centralizedManagement${index}`} value={item}>{item}</Option>
                                    })}                                </Select>                                // <input type="text" value={editCondtion.centralizedManagement} onChange={(e: any) => checkbox_click('centralizedManagement', e.target.value)} />                            }
                        </div>                        <div>                            <span>报表使用部门:</span>                            {                                rendreport == 1 &&                                <div className='DivInput disable'>                                    {                                        editCondtion.userDepartment ? (editCondtion.userDepartment.length <= 2 ? editCondtion.userDepartment.map((value: React.ReactNode, index: string | number | undefined) => {                                            return <p key={index}>{value}</p>                                        }) :                                            <Title data={editCondtion.userDepartment} shu={2} />
                                        ) : <span style={{ color: "#b2b2b2" }}>请选择</span>                                    }                                    <SearchOutlined className='svg' />                                </div>                            }                            {                                rendreport == 2 &&                                <div className='DivInput'>                                    {                                        editCondtion.userDepartment ? (editCondtion.userDepartment.length <= 2 ? editCondtion.userDepartment.map((value: React.ReactNode, index: string | number | undefined) => {                                            return <p key={index}>{value}</p>                                        }) :                                            <Title data={editCondtion.userDepartment} shu={2} />
                                        ) : <span style={{ color: "#b2b2b2" }}>请选择</span>                                    }                                    <SearchOutlined className='svg' onClick={() => checkcall('edit_userDepartment')} />                                </div>                            }

                        </div>
                    </div>                    <div className='report_basic_line3'>                        <div >                            <span>统计频率</span>                            {                                rendreport == 1 &&                                <div className='DivInput disable'>                                    {                                        editCondtion.usageFrequency ? (editCondtion.usageFrequency.length <= 2 ? editCondtion.usageFrequency.map((value: React.ReactNode, index: string | number | undefined) => {                                            return <p key={index}>{value}</p>                                        }) :                                            <Title data={editCondtion.usageFrequency} shu={2} />
                                        ) : <span style={{ color: "#b2b2b2" }}>请选择</span>                                    }                                    <SearchOutlined className='svg' />                                </div>                            }                            {                                rendreport == 2 &&                                <div className='DivInput'>                                    {                                        editCondtion.usageFrequency ? (editCondtion.usageFrequency.length <= 2 ? editCondtion.usageFrequency.map((value: React.ReactNode, index: string | number | undefined) => {                                            return <p key={index}>{value}</p>                                        }) :                                            <Title data={editCondtion.usageFrequency} shu={2} />
                                        ) : <span style={{ color: "#b2b2b2" }}>请选择</span>                                    }                                    <SearchOutlined className='svg' onClick={() => checkcall('usageFrequency')} />                                </div>                            }
                        </div>                        <div >                            <span>报表所在系统</span>                            {                                rendreport == 1 &&                                <input type="text" className="disable" value={editCondtion.belongingDepartment} disabled />                            }                            {                                rendreport == 2 &&                                <input type="text" value={editCondtion.belongingDepartment} onChange={(e: any) => checkbox_click('belongingDepartment', e.target.value)} />                            }                        </div>                        <div></div>
                    </div>                    <div className='report_basic_line4'>                        <div >                            <span>报表用途概述</span>                            {                                rendreport == 1 &&                                <textarea className="disable" value={editCondtion.reportPurpose} disabled />                            }                            {                                rendreport == 2 &&                                <textarea value={editCondtion.reportPurpose} onChange={(e: any) => checkbox_click('reportPurpose', e.target.value)} />                            }
                        </div>                        <div >                            <span>报表范围框定条件</span>                            {                                rendreport == 1 &&                                <textarea className="disable" value={editCondtion.reportRange} disabled />                            }                            {                                rendreport == 2 &&                                <textarea className='disable' style={{ background: '#f8f8f8' }} value={editCondtion.reportRange} disabled onChange={(e: any) => checkbox_click('reportRange', e.target.value)} />                            }                        </div>                    </div>
                    <div className='report_basic_line6'>                        <div >                            <span>所含关键指标</span>                            {                                rendreport == 1 &&                                <textarea className="disable" value={editCondtion.keyIndicators} disabled />                            }                            {                                rendreport == 2 &&                                <textarea className='disable' style={{ background: '#f8f8f8' }} value={editCondtion.keyIndicators} onChange={(e: any) => checkbox_click('keyIndicators', e.target.value)} disabled />                            }
                        </div>

                    </div>
                    {                        rendreport == 1 &&                        <div className='cancel'>                            <button className='btn_white hoverBorder2' onClick={() => { setRendreport(0) }} >取消</button>                            <button className={CollectList != null && CollectList.filter((el: any) => el.rid == editCondtion.rid).length > 0 ? 'btn_white disable btn_return' : 'btn_white hoverBorder2  btn_return'} onClick={() => CollectList != null && CollectList.filter((el: any) => el.rid == editCondtion.rid).length > 0 ? null : scribeReport()} >收藏</button>                            <button style={{ marginLeft: "15rem" }} className='btn_return btn_white  hoverBorder2' onClick={() => { ApiUtils.isPurview("F1501") ? setRendreport(2) : AlertUtil.errorMsg('您没报表修改权限！') }}>修改</button>
                        </div>                    }                    {                        rendreport == 2 &&                        <div className='cancel'>                            <button className='btn_white hoverBorder2' onClick={() => { setRendreport(0) }} >取消</button>                            <button className={CollectList != null && CollectList.filter((el: any) => el.rid == editCondtion.rid).length > 0 ? 'btn_white disable btn_return' : 'btn_white hoverBorder2  btn_return'} onClick={() => CollectList != null && CollectList.filter((el: any) => el.rid == editCondtion.rid).length > 0 ? null : scribeReport()} >收藏</button>                            <button style={{ marginLeft: "15rem" }} className='btn_return btn_red  hoverBorder2' onClick={modfily_comit}>提交</button>
                        </div>                    }                    <div style={{ clear: 'both' }}></div>                </div>            </div>        }    }

    //多选框点击弹出
    const checkcall = (val: any) => {        setChecked({            ...checked,            [val]: true        })    }
    const reportModule_callback = (val: any, list: any, chk: any) => {        console.log(list)        setChecked({            ...checked,            reportModule: val        })        setQueryCondtion({            ...queryCondtion,            reportModule: list ? list : null        })    }    const extract_reportModule_callback = (val: any, list: any, chk: any) => {        console.log(list)        setChecked({            ...checked,            extract_reportModule: val        })        setQueryCondtion({            ...extract,            reportModule: list ? list : null        })    }    const extract_SSO_callback = (val: any, list: any, chk: any) => {        console.log(list)        setChecked({            ...checked,            extract_SSO: val        })        setExtract({            ...extract,            SSO: list ? list : null        })    }    const extract_BU_callback = (val: any, list: any, chk: any) => {        let BU_list: any = [];        setChecked({            ...checked,            extract_BU: val        })        if (list) {            checkedList.BU.forEach((item: any) => {                list.forEach((i: any) => {                    if (i == item.ORG_NAME) {                        BU_list.push(item.ORG_ENGNAME)                    }                })            })            getCITY(BU_list)
            setExtract({                ...extract,                BU: list            })        }
    }    const extract_CITY_callback = (val: any, list: any, chk: any) => {        let CITY_list: any = [];        setChecked({            ...checked,            extract_CITY: val        })        list ? setExtract({            ...extract,            CITY: list        }) : setExtract({            ...extract        })

    }    const centralizedManagement_callback = (val: any, list: any, chk: any) => {        setChecked({            ...checked,            centralizedManagement: val        })        setQueryCondtion({            ...queryCondtion,            centralizedManagement: list ? list : null        })    }    const userDepartment_callback = (val: any, list: any, chk: any) => {        setChecked({            ...checked,            userDepartment: val        })        setQueryCondtion({            ...queryCondtion,            userDepartment: list ? list : null        })    }    const edit_userDepartment_callback = (val: any, list: any, chk: any) => {        setChecked({            ...checked,            edit_userDepartment: val        })        list ? setEditCondtion({            ...editCondtion,            userDepartment: list        }) : setEditCondtion({            ...editCondtion        })    }    const usageFrequency_callback = (val: any, list: any, chk: any) => {        setChecked({            ...checked,            usageFrequency: val        })        list ? setEditCondtion({            ...editCondtion,            usageFrequency: list        }) : setEditCondtion({            ...editCondtion        })    }    const header = () => {        console.log(openStates)    }    return (        // <div style={{height: 'calc(100vh - 72rem)'}}>        <div style={{ width: '100%', height: 'calc(100vh - 72rem)', display: 'flex', flexDirection: 'column' }}>
            <PageNav {...props} />            <div className='report_management'>
                <div style={{                    display: open ? "flex" : "none",                    zIndex: 1000,                    position: "absolute",                    right: '22rem',                    top: "0",                    alignContent: 'center'                }}>                    {                        ApiUtils.isPurview('F2101') ?                            <span style={{ color: openStates == 'UNI' ? xFontColor : "#D6D8DA", marginRight: "15rem" }}                                onClick={() => setOpenStates('UNI')}>核保 </span>                            : ""                    }                    {                        (ApiUtils.isPurview('F2101') && ApiUtils.isPurview('F2103')) ?                            <span style={{ marginRight: "15rem" }}>| </span>                            : ""                    }                    {                        ApiUtils.isPurview('F2103') ?                            <span style={{ color: openStates == 'CLM' ? xFontColor : "#D6D8DA", marginRight: "15rem" }}                                onClick={() => setOpenStates('CLM')}> 理赔 </span>                            : ""                    }                    {                        ((ApiUtils.isPurview('F2103') && ApiUtils.isPurview('F2102')) || (ApiUtils.isPurview('F2101') && ApiUtils.isPurview('F2102'))) ?                            <span style={{ marginRight: "15rem" }}>| </span>                            : ""                    }                    {                        ApiUtils.isPurview('F2102') ?                            <span style={{ color: openStates == 'POS' ? xFontColor : "#D6D8DA", marginRight: "15rem" }}                                onClick={() => setOpenStates('POS')}> 保全</span>                            : ""                    }
                </div>                <Tabs className='tabs' defaultActiveKey={props.history.location.state ? (props.history.location.state.keys) : "1"} centered={true} onChange={(e: any) => {                    if (e == 1) {                        search_click(null)                    }                }}>                    <TabPane                        tab={                            <div onClick={() => { setOpen(false) }}>                                <span className='tabs_triangle'></span>                                <span >格式报表管理</span>                            </div>                        }                        key="1"                        style={{ position: "relative" }}                    // locale={locale}                    >                        <div className='page_big'>                            <div className='search_condtion'>                                <div className='sp_lab'>                                    <div className='search_resul_rectangle'></div>                                    <span>查询条件</span>                                </div>                                <div className='search_condtion_top'>                                    <div>                                        <span>编码:</span>                                        <input type="text" value={queryCondtion.reportCode} onChange={(e: any) => checkbox_click_search('reportCode', e.target.value)} />                                    </div>                                    <div>                                        <span>报表名称:</span>                                        <input type="text" value={queryCondtion.reportName || ''} onChange={(e: any) => checkbox_click_search('reportName', e.target.value)} />                                    </div>                                    <div>                                        <span>任务类型:</span>                                        <div className='DivInput'>                                            {                                                queryCondtion.reportModule ? (queryCondtion.reportModule.length <= 2 ? queryCondtion.reportModule.map((value: React.ReactNode, index: string | number | undefined) => {                                                    return <p key={index}>{value}</p>                                                }) :                                                    <Title data={queryCondtion.reportModule} shu={2} />
                                                ) : <span style={{ color: "#b2b2b2" }}>请选择</span>                                            }                                            <SearchOutlined className='svg' onClick={() => checkcall('reportModule')} />                                        </div>                                    </div>                                    <div>                                        <span>归口管理部门:</span>                                        <div className='DivInput'>                                            {                                                queryCondtion.centralizedManagement ? (queryCondtion.centralizedManagement.length <= 2 ? queryCondtion.centralizedManagement.map((value: React.ReactNode, index: string | number | undefined) => {                                                    return <p key={index}>{value}</p>                                                }) :                                                    <Title data={queryCondtion.centralizedManagement} shu={2} />
                                                ) : <span style={{ color: "#b2b2b2" }}>请选择</span>                                            }                                            <SearchOutlined className='svg' onClick={() => checkcall('centralizedManagement')} />                                        </div>                                    </div>                                    <div>                                        <span>报表使用部门:</span>                                        <div className='DivInput'>                                            {                                                queryCondtion.userDepartment ? (queryCondtion.userDepartment.length <= 2 ? queryCondtion.userDepartment.map((value: React.ReactNode, index: string | number | undefined) => {                                                    return <p key={index}>{value}</p>                                                }) :                                                    <Title data={queryCondtion.userDepartment} shu={2} />
                                                ) : <span style={{ color: "#b2b2b2" }}>请选择</span>                                            }                                            <SearchOutlined className='svg' onClick={() => checkcall('userDepartment')} />                                        </div>
                                    </div>                                    <div></div>                                </div>
                                <div className='search_condtion_btn'>                                    <button className='btn_white hoverBorder2' onClick={clear_click}>清空</button>                                    <button className='btn_red btn_return hoverBorder2' onClick={() => search_click('page')} >查询</button>                                </div>                            </div>                            <div id="hisHead">                                {                                    viewHistory.tunon && <History rootIdData={viewHistory.rootId} guan={() => setViewHistory({ ...viewHistory, tunon: !viewHistory.tunon })} getHistoricalList={viewHistory.tunon}></History>                                }                            </div>                            <div className='search_resul'>
                                <div className='search_resul_table'>                                    {                                        // tabledata != undefined && tablecolumns != undefined ?                                        <TableList flag={true} theadList={tablecolumns} tbodyList={tabledata} isBig={false} isCheckBox={false} changesTHlist={Extract} getWorkteamId={RowDoubleClick} title="查询结果" />                                        // :null                                    }                                </div>                                {                                    ApiUtils.isPurview("F1502") &&                                    <div className='search_resul_btn'>                                        <div className="itableList_inData btn_icon btn_back  hoverBorder2" onClick={onExportExcel}>                                            <i className="bg_imgIcon_daochu" />                                            <span>导出</span>                                            {/* <FileUpload uploadType={"DictionaryQuota"} /> */}                                        </div>                                    </div>                                }                            </div>
                            {                                rendreport == 3 &&                                <div className='condtion_extract'>                                    <div className='condtion_select'>                                        <div className="close" onClick={() => setRendreport(0)}>                                            <span></span>                                            <img src={(window.rootUrl + "/images/deletebtn.svg")} alt="" />                                        </div>                                        <div className='sp_lab'>                                            <div className='search_resul_rectangle'></div>                                            <span>条件框定</span>                                        </div>                                        <div className='condtion_select_line1'>                                            <div>                                                <span>起始日期:</span>                                                <DatePicker format="YYYY-MM-DD" value={condtiontime.stime ? moment(condtiontime.stime, 'YYYY-MM-DD') : null} disabledDate={StartdisabledDate} onChange={cstime} />                                            </div>                                            <div>                                                <span>终止日期:</span>                                                <DatePicker format="YYYY-MM-DD" value={condtiontime.etime ? moment(condtiontime.etime, 'YYYY-MM-DD') : null} disabledDate={EnddisabledDate} onChange={cetime} />                                            </div>                                            <div style={{ width: "350rem" }}>                                                <span>任务类型:</span>                                                <div className='DivInput'>                                                    {                                                        extract.reportModule ? (extract.reportModule.length <= 2 ? extract.reportModule.map((value: React.ReactNode, index: string | number | undefined) => {                                                            return <p key={index}>{value}</p>                                                        }) :                                                            <Title data={extract.reportModule} shu={2} />
                                                        ) : <span style={{ color: "#b2b2b2" }}>请选择</span>                                                    }                                                    <SearchOutlined className='svg' onClick={() => checkcall('extract_reportModule')} />                                                </div>
                                            </div>
                                        </div>                                        <div className='condtion_select_line2'>                                            <div>                                                <span>SSO:</span>                                                <div className='DivInput'>                                                    {                                                        extract.SSO ? (extract.SSO.length <= 2 ? extract.SSO.map((value: React.ReactNode, index: string | number | undefined) => {                                                            return <p key={index}>{value}</p>                                                        }) :                                                            <Title data={extract.SSO} shu={2} />
                                                        ) : <span style={{ color: "#b2b2b2" }}>请选择</span>                                                    }                                                    <SearchOutlined className='svg' onClick={() => checkcall('extract_SSO')} />                                                </div>                                                {/* <CheckboxGroup value={checkedList.SSO} onChange={(e: any) => { GenerateReport('SSO', e) }}>                                                    <Checkbox value={"S-SSO"}>S-SSO</Checkbox>                                                    <Checkbox value={"N-SSO"}>N-SSO</Checkbox>                                                </CheckboxGroup> */}
                                            </div>                                            <div>                                                <span>BU:</span>                                                <div className='DivInput'>                                                    {                                                        extract.BU ? (extract.BU.length <= 2 ? extract.BU.map((value: React.ReactNode, index: string | number | undefined) => {                                                            return <p key={index}>{value}</p>                                                        }) :                                                            <Title data={extract.BU} shu={2} />
                                                        ) : <span style={{ color: "#b2b2b2" }}>请选择</span>                                                    }                                                    <SearchOutlined className='svg' onClick={() => checkcall('extract_BU')} />                                                </div>                                                {/* <CheckboxGroup value={checkedList.BU} onChange={(e: any) => { GenerateReport('BU', e) }}>                                                    <Checkbox value={"上海BU"}>上海BU</Checkbox>                                                    <Checkbox value={"北京BU"}>北京BU</Checkbox>                                                </CheckboxGroup> */}                                            </div>                                            <div>                                                <span>CITY:</span>                                                <div className='DivInput'>                                                    {                                                        extract.CITY ? (extract.CITY.length <= 2 ? extract.CITY.map((value: React.ReactNode, index: string | number | undefined) => {                                                            return <p key={index}>{value}</p>                                                        }) :                                                            <Title data={extract.CITY} shu={2} />
                                                        ) : <span style={{ color: "#b2b2b2" }}>请选择</span>                                                    }                                                    <SearchOutlined className='svg' onClick={() => checkcall('extract_CITY')} />                                                </div>                                                {/* <CheckboxGroup value={checkedList.CITY} onChange={(e: any) => { GenerateReport('CITY', e) }}>                                                    <Checkbox value={"上海"}>上海</Checkbox>                                                    <Checkbox value={"北京"}>北京</Checkbox>                                                    <Checkbox value={"广州"}>广州</Checkbox>                                                </CheckboxGroup> */}
                                            </div>                                        </div>                                        <div className='condtion_select_btn'>                                            <button className='btn_white hoverBorder2' onClick={() => clear_extract()}>清空</button>                                            <button className='btn_red btn_return hoverBorder2' onClick={BuildReport}>生成</button>                                        </div>                                    </div>                                </div>
                            }                        </div>                        <div>                            {                                render_report()                            }                        </div>                    </TabPane>
                    {/* <TabPane                        tab={                            <div>                                <span className='tabs_triangle'></span>                                <span >自定义报表</span>                            </div>                        }                        key="2"                        style={{ position: "relative" }}                        // locale={locale}                    >                        <ReportCustom />                                            </TabPane>
                    <TabPane                        tab={                            // <div style={{height: 'calc(100vh - 15rem)',overflow: 'auto'}}>                            <div>                                <span className='tabs_triangle'></span>                                <span >报表订阅</span>                            </div>                        }                                        key="3"                        style={{ position: "relative" }}                        // locale={locale}                    >                        <ReportSubscribe />                                            </TabPane> */}
                    <TabPane                        tab={                            <div onClick={() => { setOpen(false) }}>                                <span className='tabs_triangle'></span>                                <span >我的报表</span>                            </div>                        }                        key="4"                        style={{ position: "relative" }}                    // locale={locale}                    >                        <MyReport CollectList={CollectList} />                    </TabPane>
                    <TabPane                        tab={                            <div onClick={() => { setOpen(true) }}>                                <span className='tabs_triangle'></span>                                <span>可视化报表</span>                            </div>                        }                        key="5" style={{ position: "relative" }}>                        <VisualReport openStates={openStates} xFontColor={xFontColor} />                    </TabPane>
                    <TabPane                        tab={                            <div onClick={() => { setOpen(true) }}>                                <span className='tabs_triangle'></span>                                <span>BU可视化报表</span>                            </div>                        }                        key="6" style={{ position: "relative" }}>                        <VisualReportForBu openStates={openStates} xFontColor={xFontColor} />                    </TabPane>
                </Tabs>            </div>            {/* 引入所有的多选框弹出框 */}            {                checked.reportModule && <CheckedList title="选择任务类型" data={quotaConfig.reportModule.map((item: any) => item = { code: item, title: item })} titlelist={queryCondtion.reportModule} flag={7} callBack={reportModule_callback} />            }            {                checked.extract_reportModule && <CheckedList title="选择任务类型" data={quotaConfig.reportModule.map((item: any) => item = { code: item, title: item })} titlelist={extract.reportModule} flag={7} callBack={extract_reportModule_callback} />            }            {                checked.centralizedManagement && <CheckedList title="选择归口管理部门" data={quotaConfig.centralizedManagement.map((item: any) => item = { code: item, title: item })} titlelist={queryCondtion.centralizedManagement} flag={7} callBack={centralizedManagement_callback} />            }            {                checked.userDepartment && <CheckedList title="选择报表使用部门" data={quotaConfig.userDepartment.map((item: any) => item = { code: item, title: item })} titlelist={queryCondtion.userDepartment} flag={7} callBack={userDepartment_callback} />            }            {                checked.edit_userDepartment && <CheckedList title="选择报表使用部门" data={quotaConfig.userDepartment.map((item: any) => item = { code: item, title: item })} titlelist={editCondtion.userDepartment} flag={7} callBack={edit_userDepartment_callback} />            }            {                checked.usageFrequency && <CheckedList title="选择统计频率" data={quotaConfig.usageFrequency.map((item: any) => item = { code: item, title: item })} titlelist={editCondtion.usageFrequency} flag={7} callBack={usageFrequency_callback} />            }            {                checked.extract_SSO && <CheckedList title="选择SSO" data={checkedList.SSO.map((item: any) => item = { code: item, title: item })} titlelist={extract.SSO} flag={7} callBack={extract_SSO_callback} />            }{                checked.extract_BU && <CheckedList title="选择BU" data={checkedList.BU.map((item: any) => item = { code: item.ORG_NAME, title: item.ORG_NAME })} titlelist={extract.BU} flag={7} callBack={extract_BU_callback} />            }{                checked.extract_CITY && <CheckedList title="选择CITY" data={checkedList.CITY.map((item: any) => item = { code: item.CITYNAME, title: item.CITYNAME })} titlelist={extract.CITY} flag={7} callBack={extract_CITY_callback} />            }        </div>    )}