OperationalService/web/client/src/sections/service/containers/cyclePlan.jsx

import React, { useEffect,useState} from 'react';
import { connect } from 'react-redux';
import { Button,Table,Popconfirm } from '@douyinfe/semi-ui';
import Addmodal from '../components/cycAddmodal'
import moment from 'moment'


const Server = (props) => {
   const { dispatch, actions, user, loading, socket } = props
    const{service,install}=actions
   const [addVis,setAddVis]=useState(false)
   const [cycPlan,setCysPlan]=useState([])
   const [recordRow,setRecordRow]=useState(null)
   const [pepList, setPepList] = useState([])//角色分配
   const [pageSize,setPageSize]=useState(10)
   const [pageIndex,setPageIndex]=useState(1)
   const [total,setTotal]=useState()

   const getCycPlan=(query={type:'period',msg:'获取周期性计划',pageIndex,pageSize})=>{
    dispatch(service.getMaintenancePlan(query)).then((res)=>{
        setCysPlan(res?.payload.data.responseRes)
        setTotal(res?.payload.data.count)
    })
 }
 useEffect(()=>{
    getCycPlan()
    dispatch(install.getOrganizationDeps()).then((res) => {//获取项企(PEP)全部部门及其下用户
        setPepList(res.payload.data)
     }) 
 },[])
 const delHandler=(record)=>{
    const query={
       responseId:record.id,
       msg:'删除周期性计划'
    }
    dispatch(service.delMaintenancePlan(query)).then((res)=>{
       if(res.success) getCycPlan()
    })
 }
 //配置分页
 const pagination={
    total:total,
    defaultCurrent: 1,
    pageSize:pageSize,
    showSizeChanger: true,
    currentPage:pageIndex,
    showQuickJumper: true,
    pageSizeOpts: ["5", "10", "15"],
    showTotal: function () {
        return `共有${total}条`
    },
    onChange:(pageIndex,pageSize)=>{
        console.log('pageIndex1',pageIndex,pageSize)
            setPageIndex(pageIndex)
            setPageSize(pageSize)
            const query={
              pageIndex,pageSize,type:'temp',msg:'获取周期性计划'
            }
            getCycPlan(query)
         }
}
 //console.log('cycPlan',cycPlan)
   const columns = [
       {
           title: '序号',
           render:(t, r, i) => {
            return i + 1
        }
       },
       {
           title: '任务名称',
           dataIndex: 'missionName',
       },
       {
           title: '责任人',
           render:(record)=>{
            return      <span>
                   {record?.maintenancePlanExecuteUsers.map((item)=>{
                         return item.name
                      }).toString()
                  }
                  </span>
                }
       },
       {
           title: '完成情况',
           dataIndex: 'state',
       },
       {
           title: '备注',
           dataIndex: 'remark',
       },
       {
           title: '计划完成时间',
           render:(record)=>{
            return <span>{moment(record.planFinishTime).format('YYYY-MM-DD HH:mm:ss')}</span>
           },
       },
       {
           title: '实际完成时间',
           render:(record)=>{
            return <span>{moment(record.actualFinishTime).format('YYYY-MM-DD HH:mm:ss')}</span>
           },
       },
       {
           title: '操作',
           render:(record)=>{
               return (<div>
                   <Button onClick={()=>{setAddVis(true);setRecordRow(record)}}>编辑</Button>
                   <Popconfirm  title="确定是否删除？" onConfirm={()=>{delHandler(record)}}><Button type='danger'> 删除</Button></Popconfirm>
               </div>)
           }
       },
   ];
   return (
       <div style={{background: '#FFFFFF', margin: '8px 12px', padding: '20px 20px 0px 20px'}}>
           <div style={{marginBottom:20}}>
               <Button theme='solid' type='secondary' onClick={()=>{setAddVis(true)}}>新增</Button>
               <Button theme='solid' type='secondary' style={{marginLeft:50}}>导入</Button>
           </div>
           <div>
               <Table columns={columns} dataSource={cycPlan} pagination={pagination}></Table>
           </div>
           <Addmodal visible={addVis} onClose={()=>{setAddVis(false);setRecordRow(null);getCycPlan()}} recordRow={recordRow} pepList={pepList}></Addmodal>
       </div>

   )
}

    function mapStateToProps (state) {
        const { global } = state;
        return {
              actions: global.actions,
        };
     }

export default connect(mapStateToProps)(Server);