Highways4Good/web/client/src/sections/fillion/containers/videois.js

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Input, Table, Button, Select, message, Popconfirm } from 'antd';
// import { getAccidentInfo, createAccidentInfo, deleteAccidentInfo, editAccidentInfo, getAllCompany } from '../actions/device';

// import EditAccidentModal from '../components/editAccidentModal';
import EditGuanlang from '../components/editGuanlang';
import '../style.less';
import { Func } from '$utils';

import moment from 'moment';
var recordId = null;
const Guanlang = (props) => {
    const { dispatch, user,  totalPage, companys, creditScore } = props
    const [data, setData] = useState([])
    const [modalVisible, setModalVisible] = useState(false);
    const [modalRecord, setModalRecord] = useState();
    const [companyName, setCompanyName] = useState(null)
    const [creditCode, setCreditCode] = useState(null)
    const [pageSize, setPageSize] = useState(10);
    const [currentPage, setCurrentPage] = useState(1);
    const [applyStatus, setApplyStatus] = useState(null);
    const [applyState, setApplyState] = useState('check'); // check 查看；create 新增； apply 初审； approve 复审
    const [editModal, setEditModal] = useState(false);
    const [readOnly, setReadOnly] = useState(false);

    const accidentInfo= []
   //  const initial = (params, search = false) => {
   //      dispatch(getAccidentInfo(params)).then(() => { if (search) setCurrentPage(1) })
   //  }

    useEffect(() => {
        const params = { limit: pageSize, offset: currentPage }
        // initial(params)
    }, [true])


    const openModal = (record, state) => {
        if (state == 'check') {
            setReadOnly(true)
        } else {
            setReadOnly(false)
        }
        searchCompany(record.companyName)
        setApplyState(state);
        setModalVisible(true);
        setModalRecord(record);
    }
    const search = () => {
        const params = { company: companyName, applyStatus, limit: pageSize, offset: 1 }
        // initial(params, true)
    }
    const clearSearch = () => {
        setCompanyName(null)
        setCreditCode(null)
        const params = { limit: pageSize, offset: currentPage }
        // initial(params)
    }
    const columns = [
        {
            title: '序号',
            dataIndex: 'companyName',
            key: 'companyName',
           
        },
        {
            title: '设备名称',
            dataIndex: 'accidentTime',
            key: 'accidentTime',
            
            render: (text) => {
                return moment(text).format('YYYY-MM-DD')
            }
        },
        {
            title: '设备状态',
            dataIndex: 'stationName',
            key: 'stationName',
            
            render: (v, t) => {
                let list = t.accidentStations.map(item => item.stationName);
                return list.join(',');
            }
        },
        {
            title: '接入类型',
            dataIndex: 'stationName',
            key: 'stationName',
            
            render: (v, t) => {
                let list = t.accidentStations.map(item => item.stationName);
                return list.join(',');
            }
        },
        {
            title: '设备厂家',
            dataIndex: 'stationName',
            key: 'stationName',
            
            render: (v, t) => {
                let list = t.accidentStations.map(item => item.stationName);
                return list.join(',');
            }
        },
        {
            title: '操作',
            render: (record) => {
                return (
                    <span>
                        <a onClick={() => openModal(record, 'check')}>查看&nbsp;&nbsp;</a>
                        <a onClick={() => openModal(record, 'edit')}>编辑&nbsp;&nbsp;</a>
                        <Popconfirm
                            title="确认删除"
                            onConfirm={() => {
                                // console.log(record)
                              //   dispatch(deleteAccidentInfo(record.id)).then((res) => {
                              //       if (res.success) {
                              //           message.success('删除记录成功');
                              //           search();
                              //       }
                              //   }
                              //   )
                            }
                            }
                        >
                            <a>删除&nbsp;&nbsp;</a>
                        </Popconfirm>
                    </span>
                )
            }
        }
    ];

    const handleSaveScore = (data) => {
        console.log('执行了')
        setModalVisible(false);
        // if (applyState == 'create')
        //     dispatch(createAccidentInfo(data)).then(res => {
        //         if (res.success) {
        //             message.success('事故资讯添加成功');
        //             setModalVisible(false);
        //             search();
        //         }
        //     })
        // else if (applyState == 'edit') {
        //     dispatch(editAccidentInfo(data)).then(res => {
        //         if (res.success) {
        //             message.success('事故资讯编辑成功');
        //             setModalVisible(false);
        //             search();
        //         }
        //     })
        // }
    }
    var timer = null;
    const searchCompany = (companyName) => {
        if (timer) {
            clearTimeout(timer)
        } else {
            timer = setTimeout(() => {
               //  dispatch(getAllCompany({ companyName }));
            }, 400);
        }
    }

    const spanStyle = { diplay: 'inline-block', marginLeft: 10 }
    const inputStyle = { width: 200 }
    return (
        <div style={{ margin: 5 }}>
            <div style={{ marginBottom: 10 }}>
                <span style={spanStyle}>
                    设备搜索：
                    <Input style={inputStyle} placeholder='请输入' value={companyName} onChange={(v) => setCompanyName(v.target.value)}></Input>
                </span>
                <span style={{...spanStyle,marginLeft: 40}}>
                    接入类型：
                    <Input style={inputStyle} placeholder='请输入' value={companyName} onChange={(v) => setCompanyName(v.target.value)}></Input>
                </span>
                <span style={{...spanStyle,marginLeft: 40}}>
                    厂家筛选：
                    <Input style={inputStyle} placeholder='请输入' value={companyName} onChange={(v) => setCompanyName(v.target.value)}></Input>
                </span>
                <span style={{...spanStyle,marginLeft: 40}}>
                    查询状态：
                    <Input style={inputStyle} placeholder='请输入' value={companyName} onChange={(v) => setCompanyName(v.target.value)}></Input>
                </span>
                <Button type='primary' onClick={() => search()} style={{ marginLeft: 15 }}>查询</Button>
                <Button onClick={() => { setModalVisible(true); setApplyState('create'); setReadOnly(false); setModalRecord(null) }} style={{ marginLeft: 15 }}>新增</Button>
            </div>
          
            <div>
                <Table
                    rowKey='id'
                    columns={columns}
                    dataSource={accidentInfo}
                    pagination={{
                        total: totalPage,
                        showSizeChanger: true,
                        showQuickJumper: true,
                        current: currentPage,
                        showTotal: (total) => {
                            return <span style={{ fontSize: 15 }}>{`共${Math.ceil(total / pageSize)}页，${total}项`}</span>
                        },
                        onShowSizeChange: (currentPage, pageSize) => {
                            setCurrentPage(currentPage);
                            setPageSize(pageSize);
                            const params = { company: companyName, creditCode, limit: pageSize, offset: currentPage }
                            // initial(params)
                        },
                        onChange: (page, pageSize) => {
                            setCurrentPage(page);
                            setPageSize(pageSize);
                            const params = { company: companyName, creditCode, limit: pageSize, offset: page }
                            // initial(params)
                        }
                    }}
                />

                {modalVisible ? <EditGuanlang
                    visible={modalVisible}
                    onCancel={() => { setModalVisible(false) }}
                    handleSaveScore={handleSaveScore}
                  //   searchCompany={searchCompany}
                    companys={companys}
                    editData={modalRecord}
                    readOnly={readOnly}
                    applyState={applyState}
                ></EditGuanlang> : ''}
            </div>
        </div>
    )
}
function mapStateToProps(state) {
    const { auth, accidentInfo, allCompany } = state
    return {
      //   user: auth?.user,
      //   accidentInfo: accidentInfo?.data && accidentInfo?.data.rows || [],
      //   totalPage: accidentInfo.data && accidentInfo.data.count,
      //   companys: allCompany.data && allCompany.data.rows || []
    }
}
export default connect(mapStateToProps)(Guanlang);