279 lines
8.8 KiB
JavaScript
279 lines
8.8 KiB
JavaScript
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 ModalForm from './form';
|
|
import RecordDetails from "../pxjlgl/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 { exportFile } from '../../../utils/tools.js';
|
|
import { httppost5,httpget2 } from '../../../utils/request';
|
|
|
|
const Page = () => {
|
|
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
|
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 [pxRecordOpen, setPxRecordOpen] = useState(false)
|
|
|
|
const [qdItem, setQdItem] = useState()
|
|
const columns = [
|
|
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
|
{ title: '培训班名称', key: 'name', dataIndex: 'name', width: 200, ellipsis: true },
|
|
{
|
|
title: '计划培训周期', key: 'num1', dataIndex: 'num1', width: 200,
|
|
render: (value, record) => <span>{(record?.stm && record?.etm) ? `${record?.stm}至${record?.etm}` : ''}</span>,
|
|
},
|
|
{ title: '主办单位', key: 'unit', dataIndex: 'unit', width: 200 },
|
|
{
|
|
title: '培训内容', key: 'content', dataIndex: 'content', width: 200,ellipsis: true
|
|
},
|
|
{ title: '培训地点', key: 'addr', dataIndex: 'addr', width: 150, ellipsis: true },
|
|
{ title: '填报人', key: 'applicant', dataIndex: 'applicant', width: 150, ellipsis: true },
|
|
|
|
{
|
|
title: '操作', key: 'operation', width: 300, fixed: 'right',align: 'center',
|
|
render: (value, row, index) => (
|
|
<CrudOpRender_text
|
|
edit={editBtn ? true : false}
|
|
del={delBtn ? true : false}
|
|
view={viewBtn ? true : false}
|
|
similarAdd={true}
|
|
record={true}
|
|
command={(cmd) => () => command(cmd)(row)} />)
|
|
},
|
|
];
|
|
const columns1 = [
|
|
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
|
{ title: '培训日期', key: 'planDate', dataIndex: 'planDate', width: 150, ellipsis: true },
|
|
{
|
|
title: '培训时段', key: 'personCount', dataIndex: 'personCount', width: 150,
|
|
render: (value, record) => <span>{(record?.stm && record?.etm) ? `${record?.stm}至${record?.etm}` : ''}</span>,
|
|
},
|
|
{ title: '参加人数', key: 'trainees', dataIndex: 'trainees', width: 100 },
|
|
{
|
|
title: '参训人员', key: 'numPeople', dataIndex: 'numPeople', width: 200,ellipsis: true
|
|
},
|
|
{
|
|
title: '培训签到表', key: 'teamLeader', dataIndex: 'teamLeader', width: 150,
|
|
render: (value,record) => <div><a onClick={()=>reviewPic(record.files1)}> {record?.files1[0]?.fileName} </a></div>
|
|
},
|
|
|
|
{
|
|
title: '操作', key: 'operation', width: 100, fixed: 'right',align: 'center',
|
|
render: (value, row, index) => (
|
|
<a onClick={() => { setPxRecordOpen(true); setQdItem(row)}}>查看</a>
|
|
)
|
|
},
|
|
];
|
|
|
|
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
|
|
const width1 = useMemo(() => columns1.reduce((total, cur) => total + (cur.width), 0), [columns1]);
|
|
const [pxOpen, setPxOpen] = useState(false)
|
|
const [imgVisible, setImgVisible] = useState(false)
|
|
const [imgList, setImgList] = useState([])
|
|
const [fileList1, setFileList1] = useState([]) //上传文件列表
|
|
const [fileList2, setFileList2] = useState([]) //上传文件列表
|
|
|
|
|
|
const reviewPic = (arrPic) => {
|
|
if (arrPic.length > 0) {
|
|
setImgVisible(true)
|
|
setImgList(arrPic)
|
|
}
|
|
}
|
|
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.pxjh.delete + `/${params.id}`);
|
|
}else if (type === 'similarAdd') {
|
|
refModal.current.showSimilarSave(params);
|
|
} else {
|
|
// 培训记录
|
|
const params1 = {
|
|
search: {
|
|
...searchVal,
|
|
planId:params.id
|
|
}
|
|
};
|
|
setPxOpen(true);
|
|
search1(params1)
|
|
// getFileInfo(params)
|
|
}
|
|
}
|
|
|
|
|
|
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.pxjh.page).find_noCode);
|
|
const { tableProps:tableProps1, search:search1 } = usePageTable(createCrudService(apiurl.pxjl.page).find_noCode);
|
|
|
|
/**
|
|
* @description 处理成功的回调
|
|
*/
|
|
const successCallback = () => {
|
|
refresh()
|
|
}
|
|
|
|
|
|
// const getFileInfo = async (params) => {
|
|
// try {
|
|
// const res = await httpget2(apiurl.pxjl.getFile + `/${params.id}`)
|
|
// if (res.code === 200) {
|
|
// if (res.data?.files1) {
|
|
// let fileArr1 = res.data?.files1.map(item => {
|
|
// return {
|
|
// name: item.fileName,
|
|
// response: {
|
|
// data: {
|
|
// filePath: item.filePath,
|
|
// fileId: item.fileId
|
|
// }
|
|
// },
|
|
// }
|
|
// })
|
|
// setFileList1(fileArr1)
|
|
// }
|
|
// if (res.data?.files2) {
|
|
// let fileArr2 = res.data?.files2.map(item => {
|
|
// return {
|
|
// name: item.fileName,
|
|
// response: {
|
|
// data: {
|
|
// filePath: item.filePath,
|
|
// fileId: item.fileId
|
|
// }
|
|
// },
|
|
// }
|
|
// })
|
|
// setFileList2(fileArr2)
|
|
// }
|
|
// }
|
|
// } catch (error) {
|
|
// console.log(error);
|
|
// }
|
|
|
|
// }
|
|
|
|
// 导出
|
|
const exportExcel = () => {
|
|
let params = {
|
|
...searchVal,
|
|
}
|
|
httppost5(apiurl.pxjh.export, params).then(res => {
|
|
exportFile(`培训计划管理.xlsx`,res.data)
|
|
})
|
|
}
|
|
useEffect(()=>{
|
|
const params = {
|
|
search: {
|
|
...searchVal,
|
|
}
|
|
};
|
|
search(params)
|
|
}, [searchVal])
|
|
|
|
// const dataSource = useMemo(() => {
|
|
// if (tableProps1.dataSource.length > 0) {
|
|
// return tableProps1.dataSource.map(item => ({
|
|
// ...item,
|
|
// files1: fileList1,
|
|
// files2: fileList2,
|
|
// }))
|
|
// } else {
|
|
// return []
|
|
// }
|
|
// },[tableProps1.dataSource,fileList1,fileList2])
|
|
|
|
|
|
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}
|
|
callback={refresh}
|
|
exportFile1={exportExcel}
|
|
/>
|
|
</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={1000}
|
|
ref={refModal}
|
|
title=""
|
|
component={ModalForm}
|
|
onCrudSuccess={successCallback}
|
|
/>
|
|
</div>
|
|
{/* 培训记录 */}
|
|
<Modal
|
|
title="培训记录"
|
|
width={1000}
|
|
open={pxOpen}
|
|
destroyOnClose
|
|
footer={null}
|
|
onCancel={() => {
|
|
setPxOpen(false);
|
|
}}
|
|
>
|
|
<Table
|
|
columns={columns1}
|
|
rowKey="inx"
|
|
{...tableProps1}
|
|
// dataSource={dataSource}
|
|
scroll={{ x: width1, y: "calc( 100vh - 400px )" }} />
|
|
</Modal>
|
|
|
|
|
|
{/* 培训记录查看 */}
|
|
<Modal
|
|
title="查看"
|
|
width={800}
|
|
open={pxRecordOpen}
|
|
destroyOnClose
|
|
footer={null}
|
|
onCancel={() => {
|
|
setPxRecordOpen(false);
|
|
}}
|
|
>
|
|
<RecordDetails mode={"view"} record={qdItem} />
|
|
</Modal>
|
|
<div style={{ display: "none" }}>
|
|
<Image.PreviewGroup
|
|
preview={{
|
|
visible:imgVisible,
|
|
onVisibleChange: (vis) => setImgVisible(vis),
|
|
}}
|
|
>
|
|
{
|
|
imgList.length > 0 ? imgList.map(item => (
|
|
<Image src={ url + item.filePath} key={item?.id}/>
|
|
))
|
|
: null
|
|
}
|
|
|
|
</Image.PreviewGroup>
|
|
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Page;
|