96 lines
3.3 KiB
JavaScript
96 lines
3.3 KiB
JavaScript
|
import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react';
|
||
|
|
import BasicCrudModal from '../../../components/crud/BasicCrudModal';
|
||
|
|
import { Table, Card } from 'antd';
|
||
|
|
import ToolBar from './toolbar';
|
||
|
|
import ModalForm from './form';
|
||
|
|
import apiurl from '../../../service/apiurl';
|
||
|
|
import usePageTable from '../../../components/crud/usePageTable2';
|
||
|
|
import { createCrudService } from '../../../components/crud/_';
|
||
|
|
import { CrudOpRender_text } from '../../../components/crud/CrudOpRender';
|
||
|
|
import moment from 'moment';
|
||
|
|
|
||
|
|
const Page = () => {
|
||
|
|
|
||
|
|
const types = {
|
||
|
|
1:"行政责任人",
|
||
|
|
2:"主管部门责任人",
|
||
|
|
3:"管理单位责任人",
|
||
|
|
4:"巡查责任人",
|
||
|
|
5:"技术责任人",
|
||
|
|
}
|
||
|
|
const refModal = useRef();
|
||
|
|
const [searchVal, setSearchVal] = useState({})
|
||
|
|
|
||
|
|
const columns = [
|
||
|
|
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
|
||
|
|
{
|
||
|
|
title: '责任类型', key: 'title', dataIndex: 'title', width: 200,
|
||
|
|
render: (value) => <span>{types[value]}</span>
|
||
|
|
},
|
||
|
|
{ title: '姓名', key: 'period', dataIndex: 'period', width: 140 },
|
||
|
|
{ title: '单位', key: 'org', dataIndex: 'org', width: 200},
|
||
|
|
{ title: '职务', key: 'tmPred', dataIndex: 'tmPred', width: 150, },
|
||
|
|
{ title: '联系方式', key: 'tmRecv', dataIndex: 'tmRecv', width: 150, },
|
||
|
|
{ title: '主要职责', key: 'tmRecv', dataIndex: 'tmRecv', width: 250,ellipsis: true},
|
||
|
|
{
|
||
|
|
title: '操作', key: 'operation', width: 150, fixed: 'right',align: 'center',
|
||
|
|
render: (value, row, index) => (<CrudOpRender_text edit={true} del={true} 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.fxzb.sxfd.fxtj.del + params.id);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.hsyb.skhs.page).find_noCode);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (searchVal) {
|
||
|
|
const params = {
|
||
|
|
search: {
|
||
|
|
title: searchVal.title || undefined,
|
||
|
|
dateTimeRangeSo: searchVal.dateTimeRangeSo || undefined,
|
||
|
|
tp:2
|
||
|
|
}
|
||
|
|
};
|
||
|
|
console.log(searchVal);
|
||
|
|
search(params)
|
||
|
|
}
|
||
|
|
}, [searchVal])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className='content-root clearFloat xybm' style={{ paddingRight: "0", paddingBottom: "0" }}>
|
||
|
|
<div className='adcdTableBox'>
|
||
|
|
<Card className='nonebox'>
|
||
|
|
<ToolBar setSearchVal={setSearchVal} onSave={command('save')} />
|
||
|
|
</Card>
|
||
|
|
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
|
||
|
|
<Table columns={columns} rowKey="inx" {...tableProps} scroll={{width:width, y: "calc( 100vh - 400px )" }} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<BasicCrudModal
|
||
|
|
width={800}
|
||
|
|
ref={refModal}
|
||
|
|
title=""
|
||
|
|
component={ModalForm}
|
||
|
|
// onCrudSuccess={() => { refresh({ addvcd: localStorage.getItem('ADCD6') }) }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Page;
|