tsg-web/src/views/sz/pxjlgl/index.js

import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import { useSelector } from 'react-redux';
import BasicCrudModal from '../../../components/crud/BasicCrudModal';
import { Table, Card,Modal,Image,Input,Button,Row,Col,message } from 'antd';
import ToolBar from './toolbar';
import ChartToolBar from './chartToolbar';
import ModalForm from './form';
import apiurl from '../../../service/apiurl';
import options from "./options";
import ReactEcharts from 'echarts-for-react';
import usePageTable from '../../../components/crud/usePageTable2';
import { createCrudService } from '../../../components/crud/_';
import { CrudOpRender_text } from '../../../components/crud/CrudOpRender';
import "./index.less"
import { httpget2 } from '../../../utils/request';
import moment from 'moment';

const Page = () => {
  const role = useSelector(state => state.auth.role);
  const editBtn = role?.rule?.find(item => item.menuName == "编辑") || true;
  const viewBtn = role?.rule?.find(item => item.menuName == "查看") || true;
  const delBtn = role?.rule?.find(item => item.menuName == "删除") || true;
  const refModal = useRef();
  const [searchVal, setSearchVal] = useState(false)
  const [searchChartVal, setSearchChartVal] = useState(false)
  const columns = [
    { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
    { title: '培训日期', key: 'planDate', dataIndex: 'planDate', width: 200, ellipsis: true },
    {
      title: '标题', key: 'name', dataIndex: 'name', width: 200,ellipsis: true
    },
    { title: '主办单位', key: 'unit', dataIndex: 'unit', width: 150 },
    {
      title: '培训内容', key: 'content', dataIndex: 'content', width: 200,ellipsis: true
    },
    { title: '参训人员', key: 'trainees', dataIndex: 'trainees', width: 200, ellipsis: true },
    { title: '培训地点', key: 'addr', dataIndex: 'addr', width: 150, ellipsis: true },
    { title: '填报人', key: 'applicant', dataIndex: 'applicant', width: 150, ellipsis: true },
    { title: '登记日期', key: 'regDate', dataIndex: 'regDate', width: 150, ellipsis: true },
  
    {
      title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
      render: (value, row, index) => (
        <CrudOpRender_text
          edit={editBtn ? true : false}
          del={delBtn ? true : false}
          view={viewBtn ? true : false}
          command={(cmd) => () => command(cmd)(row)} />)
    },
  ];
  const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);

  
  const command = (type) => (params) => {
    if (type === 'save') {
      refModal.current.showSave();
    } else if (type === 'edit') {
      refModal.current.showEdit({ ...params });
    } else if (type === 'view') {
      refModal.current.showView(params);
    } else if (type === 'del') {
      refModal.current.onDeleteGet(apiurl.pxjl.delete + `/${params.id}`);
    }
  }
 

  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.pxjl.page).find_noCode);

 /**
   * @description 处理成功的回调
   */
 const successCallback = () => {
  refresh()
}

// 获取统计数据
  const [staData, setStaData] = useState()
  const pxOptions = useMemo(() => {
    if (staData) {
      return options(staData,searchChartVal.teamName)
    } else {
      return options({},searchChartVal.teamName)
    }
  }, [staData])
  const getStaData = async (params) => {
    try {
      const res = await httpget2(apiurl.pxjl.sta + `/${params.year}`)
      if (res.code == 200) {
        if (params.teamName == 1) {
          setStaData({...res.data,list:res.data.list1})
        } else {
          setStaData({...res.data,list:res.data.list2})
        }
      }else{
        message.error(res.description)
        setStaData([])
      }
    } catch (error) {
      console.log(error);
    }
  }
 
  useEffect(()=>{
    const params = {
      search: {
        ...searchVal,
      }
    };
    search(params)
  }, [searchVal])
  
  useEffect(() => {
    if (searchChartVal) {
      getStaData(searchChartVal)
    }
    
  }, [searchChartVal])
  
  
  return (
    <>
      <div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
        <div className='lf CrudAdcdTreeTableBox' style={{ width: "100%" }}>
          <div style={{ width: "100%", height: "35vh", marginBottom: 20, padding: 10,display:"flex",columnGap:10 }}>
            <div className='pxrecord-title-left'>
                <div className='first-item'>
                <img src={`${process.env.PUBLIC_URL}/assets/images/qishu.jpg`} alt='' />
                <div className='children-itm'>
                    <span>本年培训期数</span>
                    <span>计划/实际</span>
                  <span><span style={{ fontSize: 22, fontWeight: "bold" }}>{ staData?.numberOfPeriods2 ?? "--"}</span>&nbsp;期/
                    <span style={{fontSize:22,fontWeight:"bold"}}>{ staData?.numberOfPeriods1 ?? "--"}</span>&nbsp;期</span>
                </div>
               
                </div>
                <div className='second-item'>
                <img src={`${process.env.PUBLIC_URL}/assets/images/renchi.jpg`} alt='' />
                <div className='children-itm'>
                    <span>本年培训人次</span>
                    <span>计划/实际</span>
                    <span><span style={{fontSize:22,fontWeight:"bold"}}>{ staData?.personNum2 ?? "--"}</span>&nbsp;人次/
                    <span style={{fontSize:22,fontWeight:"bold"}}>{ staData?.personNum1 ?? "--"}</span>&nbsp;人次</span>
                </div>
                </div>
            </div>
            <div className='pxrecord-title-right'>
              <div className='chart-tool'>
                  <ChartToolBar
                  setSearchVal={setSearchChartVal}
                />
              </div>
              <div className='chart-box'>
                  <ReactEcharts
                      option={pxOptions || {}}
                      style={{ width: "100%", height: '100%' }}
                      notMerge={true}
                    />
              </div>
            </div>
          </div>
          <Card className='nonebox'>
            <ToolBar
              setSearchVal={setSearchVal}
              onSave={command('save')}
              role={role}
              callback={refresh}
            />
          </Card>
          <div className="ant-card-body" style={{padding:"20px 20px 0 0"}}>
            <Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 680px )"}}/>
          </div>
        </div>

        <BasicCrudModal
          width={1000}
          ref={refModal}
          title=""
          component={ModalForm}
          onCrudSuccess={successCallback}
          // onCrudSuccess={()=>{refresh({addvcd:localStorage.getItem('ADCD6')})}}
        />
      </div>
    
    </>
  );
}

export default Page;