tsg-web/src/views/zbgl/zbrz/index.js

100 lines
3.5 KiB
JavaScript

import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import { Table, Card,Modal,Form,Input,Button,Row,Col,message,Menu } from 'antd';
import { useSelector } from 'react-redux';
import ReactEcharts from 'echarts-for-react';
import ToolBar from './toolbar';
import apiurl from '../../../service/apiurl';
import usePageTable from '../../../components/crud/usePageTable2';
import { createCrudService } from '../../../components/crud/_';
import { CrudOpRender_text } from '../../../components/crud/CrudOpRender';
import BasicCrudModal from '../../../components/crud/BasicCrudModal';
import ModalForm from './form';
import { httppost5, httppost2 } from '../../../utils/request';
import "./index.less"
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 == "查看");
const delBtn = role?.rule?.find(item => item.menuName == "删除")|| true;
const refModal = useRef();
const [searchVal, setSearchVal] = useState(false)
const columns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
{ title: '值班日期', key: 'rotaDate', dataIndex: 'rotaDate', width:150, align: "center" },
{ title: '值班人员', key: 'dutyUserName', dataIndex: 'dutyUserName', width:150, align: "center" },
{ title: '值班领导', key: 'leaderUserName', dataIndex: 'leaderUserName', width:150, align: "center" },
{ title: '值班情况', key: 'dutySituation', dataIndex: 'dutySituation', width:300, align: "center" },
{
title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
render: (value, row, index) => (<CrudOpRender_text
edit={editBtn ? true : false}
del={delBtn ? 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.rcgl.zbgl.zbrz.delete + `/${params.id}`);
}
}
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.rcgl.zbgl.zbrz.page).find_noCode);
useEffect(() => {
if (searchVal) {
const params = {
search: {
...searchVal,
}
};
search(params)
}
}, [searchVal])
return (
<>
<div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
<div className='lf CrudAdcdTreeTableBox' style={{ width: "100%" }}>
<Card className='nonebox'>
<ToolBar
setSearchVal={setSearchVal}
onSave={command('save')}
role={role}
/>
</Card>
<div className="ant-card-body" style={{padding:"20px 0 0 0"}}>
<Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width, y: "calc( 100vh - 400px )" }} />
</div>
</div>
<BasicCrudModal
width={800}
ref={refModal}
title=""
component={ModalForm}
onCrudSuccess={refresh}
/>
</div>
</>
);
}
export default Page;