/* eslint-disable no-nested-ternary */ /* * @Description: * @Author: leizhe * @Date: 2022-04-06 11:39:53 * @LastEditTime: 2022-08-18 16:40:47 * @LastEditors: dengchao 754083046@qq.com */ import React, { useState, useEffect } from 'react'; import { Button, Descriptions, Input, Card, Spin, Divider, Message, Tabs, Table, Space, Tooltip, Modal, Form, notification, message, Image, Pagination, } from 'antd'; import { FormOutlined, DeleteOutlined, PlusOutlined, DownloadOutlined, UploadOutlined, SyncOutlined, PlusSquareFilled, CloudUploadOutlined, } from '@ant-design/icons'; import { List, deleteByID, DownLoadSketchPadType, Export, CaseTemplate, } from '@/services/ModelFileManage/api'; import styles from './ModelFileManage.less'; import EditModal from './EditModal'; import ImportModal from './ImportModal'; const ModelFileManage = () => { const [searchWord, setSearchWord] = useState(''); // 关键字 const [tableData, setTableData] = useState(''); const [tableLoading, setTableLoading] = useState(false); const [pickItem, setPickItem] = useState(''); const [selectedRowKeys, setSelectedRowKeys] = useState([]); const [selectColor, setSelectColor] = useState({}); // 当前选中颜色,操作时设置 const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式 const { Search } = Input; const [total, setTotal] = useState(); const [pageSize, setPageSize] = useState(20); const [currentPage, setCurrentPage] = useState(1); const [deleteVisible, setDeleteVisible] = useState(false); const [multDeleteVisible, setMultDeleteVisible] = useState(false); const [editVisible, setEditVisible] = useState(false); const [flag, setFlag] = useState(0); const [importVisible, setImportVisible] = useState(false); const [keepId, setKeepId] = useState([]); const [upgradeVisible, setUpgradeVisible] = useState(false); const setRowClassName = record => record.userID === selectColor.userID ? styles.clickRowStyle : ''; useEffect(() => { setSelectedRowKeys([]); setTableLoading(true); List({ version: '全部', pageIndex: 1, pageSize: 20 }).then(res => { setTableLoading(false); if (res.say.statusCode === '0000') { console.log(res.getMe); setTableData(res.getMe); setTotal(res.totalRcdNum); // let aa = []; // if (res.getMe.length > 0) { // res.getMe.map(i => { // aa.push(i.id); // }); // } // console.log(aa); // setKeepId(aa); } }); }, [flag]); useEffect(() => { List({ version: '全部' }).then(res => { setTableLoading(false); if (res.say.statusCode === '0000') { console.log(res.getMe); setTableData(res.getMe); setTotal(res.totalRcdNum); let aa = []; if (res.getMe.length > 0) { res.getMe.map(i => { aa.push(i.id); }); } console.log(aa); setKeepId(aa); } }); }, []); const columns = [ { title: '序号', dataIndex: 'ID', align: 'center', key: 'ID', width: 200, render: (text, record, index) => ( <span>{`${currentPage * pageSize + index + 1 - pageSize}`}</span> ), }, { title: '画板名称', dataIndex: 'name', align: 'center', key: 'name', render: item => searchStyle(item), }, { title: '画板类型', dataIndex: 'templet', align: 'center', key: 'templet', render: (text, record, index) => ( <span> {record.templet ? ( <span style={{ backgroundColor: '#cfcf71', width: '47px', height: '23px', display: 'inline-block', borderRadius: '5px', color: 'white', }} > 样品 </span> ) : record.isTemplate ? ( <span style={{ backgroundColor: '#95c6f3', width: '47px', height: '23px', display: 'inline-block', borderRadius: '5px', color: 'white', }} > 案例 </span> ) : ( <span style={{ backgroundColor: '#dda8a8', width: '47px', height: '23px', display: 'inline-block', borderRadius: '5px', color: 'white', }} > 普通 </span> )} </span> ), }, { title: '图像', dataIndex: 'thumbnailURL', align: 'center', key: 'thumbnailURL', render: text => ( <Image src={window.location.origin + `/PandaConfiguration/Raw/File/Sketch/Preview/${text}`} height="50px" /> ), }, { title: '操作', key: 'action', width: 200, align: 'center', render: record => ( <Space size="middle"> <Tooltip title="编辑"> <FormOutlined onClick={() => onedit(record)} style={{ fontSize: '16px', color: '#1890FF' }} /> </Tooltip> {record.isTemplate && !record.templet ? ( <Tooltip title="升级产品"> <CloudUploadOutlined onClick={() => onupgrade(record)} style={{ fontSize: '16px', color: '#1890FF' }} /> </Tooltip> ) : ( <></> )} <Tooltip title="删除"> <DeleteOutlined onClick={() => ondelete(record)} style={{ fontSize: '16px', color: '#e86060' }} /> </Tooltip> </Space> ), }, ]; const onedit = e => { console.log(e); setPickItem(e); setEditVisible(true); }; const onupgrade = e => { console.log(e); setPickItem(e); setUpgradeVisible(true); }; const ondelete = e => { console.log(e); setPickItem(e); setDeleteVisible(true); }; // 复选框 const rowSelection = { selectedRowKeys, onChange: (RowKeys, Rows) => { setSelectedRowKeys(RowKeys); }, }; // 模糊查询匹配的样式 const searchStyle = val => { let n; if (showSearchStyle) { n = val.replace(new RegExp(searchWord, 'g'), `<span style='color:red'>${searchWord}</span>`); } else { n = val; } return <div dangerouslySetInnerHTML={{ __html: n }} />; }; const submitSearchUser = () => { setSelectedRowKeys([]); setTableLoading(true); List({ version: '全部', // pageIndex: currentPage, // pageSize: pageSize, queryInfo: searchWord, }).then(res => { setTableLoading(false); if (res.say.statusCode === '0000') { setShowSearchStyle(true); setTableData(res.getMe); setTotal(res.totalRcdNum); } }); }; const handleSearch = e => { setSearchWord(e.target.value); }; // 监听分页 const paginationChange = (page, pageSizes) => { setCurrentPage(page); setPageSize(pageSizes); setSelectedRowKeys([]); setTableLoading(true); List({ version: '全部', pageIndex: page, pageSize: pageSizes, queryInfo: searchWord }).then( res => { setTableLoading(false); if (res.say.statusCode === '0000') { setTableData(res.getMe); setTotal(res.totalRcdNum); } }, ); }; const clearSearchWord = () => { setSearchWord(''); setSelectedRowKeys([]); setTableLoading(true); List({ version: '全部', pageIndex: currentPage, pageSize: pageSize, queryInfo: '', }).then(res => { setTableLoading(false); if (res.say.statusCode === '0000') { setTableData(res.getMe); setTotal(res.totalRcdNum); } }); }; const deleteData = () => { deleteByID({ ids: pickItem.id }).then(res => { if (res.statusCode === '0000') { setDeleteVisible(false); notification.success({ message: '删除成功', duration: 2, }); setFlag(flag + 1); } else { notification.error({ message: '删除失败', description: res.info, }); } }); }; const multDeleteData = () => { setMultDeleteVisible(true); }; const multDelete = () => { deleteByID({ ids: selectedRowKeys.toString() }).then(res => { if (res.statusCode === '0000') { setMultDeleteVisible(false); notification.success({ message: '删除成功', duration: 2, }); setFlag(flag + 1); } else { notification.error({ message: '删除失败', description: res.info, }); } }); }; const ExportData = () => { if (selectedRowKeys.length == 0) { message.warning('请先选择导出的数据'); } else { window.location.href = Export({ ids: selectedRowKeys.toString() }); } }; const MultExportData = () => { window.location.href = Export({ ids: keepId.toString() }); }; const onImportSubmit = () => { setImportVisible(false); setFlag(flag + 1); }; const importFile = () => { setImportVisible(true); }; const upgrade = () => { CaseTemplate({ ids: pickItem.id }).then(res => { if (res.statusCode === '0000') { setUpgradeVisible(false); notification.success({ message: '升级成功', duration: 2, }); setFlag(flag + 1); } else { notification.error({ message: '升级失败', description: res.info, }); } }); }; const onEditSubmit = () => { setImportVisible(false); setFlag(flag + 1); }; return ( <div className={styles.base_container}> <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}> <div style={{ height: '41px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', }} > <div> <span style={{ width: '200px', display: 'inline-block' }}> (已选{selectedRowKeys.length}条/共{total}条) </span> <span style={{ lineHeight: '32px' }}>画板检索:</span> <Search style={{ width: 260 }} placeholder="请输入画板名称" onSearch={submitSearchUser} onChange={e => handleSearch(e)} enterButton value={searchWord} /> <Button type="primary" icon={<SyncOutlined />} onClick={clearSearchWord} style={{ marginLeft: '20px' }} > 重置 </Button> </div> <div> <Button type="primary" icon={<DeleteOutlined />} onClick={multDeleteData} style={{ marginLeft: '20px' }} > 删除 </Button> <Button type="primary" icon={<UploadOutlined />} onClick={importFile} style={{ marginLeft: '20px' }} > 导入 </Button> <Button type="primary" icon={<DownloadOutlined />} onClick={ExportData} style={{ marginLeft: '20px' }} > 导出 </Button> <Button type="primary" icon={<DownloadOutlined />} onClick={MultExportData} style={{ marginLeft: '20px' }} > 导出全部 </Button> </div> </div> <div style={{ marginTop: '10px' }}> <Table rowSelection={{ type: 'checkbox', ...rowSelection, }} rowClassName={setRowClassName} size="small" rowKey={record => record.id} bordered onRow={record => ({ // onDoubleClick: event => { // event.stopPropagation(); // editEventType(record); // }, // 双击 onClick: e => { setSelectColor(record); }, })} columns={columns} dataSource={tableData} loading={tableLoading} scroll={{ x: 'max-content', y: 'calc(100vh - 270px)' }} pagination={false} /> </div> <Pagination style={{ float: 'right', marginTop: '10px' }} total={total} showTotal={(aa, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`} defaultPageSize={pageSize} defaultCurrent={1} pageSizeOptions={[10, 20, 40, 100]} current={currentPage} onChange={paginationChange} size="small" showQuickJumper /> </Card> <Modal visible={deleteVisible} onCancel={() => setDeleteVisible(false)} title="删除" okText="确认" cancelText="取消" onOk={deleteData} > <span>是否删除该数据</span> </Modal> <Modal visible={multDeleteVisible} onCancel={() => setMultDeleteVisible(false)} title="批量删除" okText="确认" cancelText="取消" onOk={multDelete} > <span>是否批量删除所选数据</span> </Modal> <EditModal visible={editVisible} onCancel={() => setEditVisible(false)} pickItem={pickItem} callBackSubmit={onImportSubmit} /> <ImportModal visible={importVisible} onCancel={() => setImportVisible(false)} callBackSubmit={onEditSubmit} /> <Modal visible={upgradeVisible} onCancel={() => setUpgradeVisible(false)} title="升级产品" okText="确认" cancelText="取消" onOk={upgrade} > <span>是否升级为样品</span> </Modal> </div> ); }; export default ModelFileManage;