import { Space, Table, Button, Popconfirm, notification ,Spin} from 'antd'; import React, { useState, useEffect } from 'react'; import styles from './taskScheduling.less' import { deleteTaskOptions, taskOptionsList, getIotDeviceType } from '@/services/intelligence/api'; import AddModal from './AddModal' const VectorData = props => { const [treeLoading, setTreeLoading] = useState(false);// 弹窗显示 const [tileData, setTileData] = useState([]); // table表格数据 const [visible, setVisible] = useState(false); // 弹窗 const [deviceType, setDeviceType] = useState([]); //设备类型列表 const [flag, setFlag] = useState(0); // 更新list const [type, setType] = useState(''); // 弹窗类型 const [solutionNames, setSolutionNames] = useState(''); const [formObj, setFormObj] = useState({}); const columns = [ { title: '序号', align: 'center', render: (text, record, index) => ( <Space> <span>{(index + 1)}</span> </Space> ) }, { title: '任务名称', dataIndex: 'TaskName', key: 'TaskName', align: 'center' }, { title: '状态', dataIndex: 'Status', key: 'Status', align: 'center' }, { title: '任务类型', dataIndex: 'TaskType', key: 'TaskType', align: 'center' }, { title: '间隔', dataIndex: 'Interval', key: 'Interval', align: 'center' }, { title: '描述', dataIndex: 'Describe', key: 'Describe', align: 'center' }, { title: '编辑', align: 'center', render: (text, record, index) => ( <Space> <Button type="primary" size="small" onClick={() => { changeRecord(record); }} > 编辑 </Button> <div onClick={e => e.stopPropagation()}> <Popconfirm title="是否删除该任务?" okText="确认" cancelText="取消" onConfirm={() => { delConfirm(record); }} > <Button size="small" danger> 删除 </Button> </Popconfirm> </div> </Space> ), }, ]; const onSubmit = prop => { setVisible(false); setFlag(flag + 1) }; const delConfirm = (record) => { deleteTaskOptions([record]).then(res => { if (res.errMsg === '') { setFlag(flag + 1) notification.success({ message: '提示', duration: 3, description: '删除成功', }); } else { notification.error({ message: '提示', duration: 3, description: res.errMsg, }); }; }) } //编辑任务调度 const changeRecord = (record) => { setType('edit'); setFormObj(record); setVisible(true); } const handleAdd = () => { setType('add'); setVisible(true); } useEffect(() => { renderTile(); }, [flag]); // 获取任务列表及设备类型及编码数据 const renderTile = () => { setTreeLoading(true) const getIotDevice = getIotDeviceType() const taskOption = taskOptionsList() Promise.all([getIotDevice, taskOption]).then(res => { res[0].getMe && res[0].getMe.length && setDeviceType(res[0].getMe) res[1].getMe && res[1].getMe.length && setTileData(res[1].getMe) setTreeLoading(false) }).catch(err => { setTreeLoading(false) }) } return ( <> <Spin tip="loading..." spinning={treeLoading}> <div className={styles.container}> <div className={styles.tileBtn}> <Button type="primary" onClick={() => { handleAdd(); }} > 新增 </Button> </div> <Table columns={columns} dataSource={tileData} bordered rowKey="TaskName" scroll={{ y: 600 }} pagination={{ pageSize: '10' , showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条` }} > </Table> <AddModal visible={visible} onCancel={() => setVisible(false)} callBackSubmit={onSubmit} type={type} deviceType={deviceType} formObj={formObj} solutionNames={solutionNames} /> </div> </Spin> </> ) } export default VectorData