index.jsx

import React, {useRef, useState} from 'react';
import { connect, history } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { dispatchHandle } from '@/utils/publicHandle';
import useFormTable from '@/useHooks/useFormTable';
import {createSearchForm} from "@/utils/createForm";
import {Form, Card, Table, Tabs, Divider, Switch, Button, Popconfirm} from 'antd'
import {DownOutlined, PlusOutlined, SettingOutlined} from '@ant-design/icons'
import utilsStyles from '@/utils/utils.less';
import classNames from "classnames";


const { TabPane } = Tabs;

const Index = (props) => {
  const {
    dispatch,
    opsGather: {attrPage}
  } = props

  const [form] = Form.useForm();
  const getListItems = (payload = {}) => {
    dispatchHandle(dispatch, 'opsGather/device_service_meter_attr_post', payload);
  }
  const { search, tableProps } = useFormTable(getListItems, {
    form,
  });

  const itemDelete = (id) => {
    dispatchHandle(dispatch, 'opsGather/device_service_meter_attr_post', {id}, () => {
      search.refresh()
    });
  }


  const columns = [
    { title: '属性名称', dataIndex: 'name'},
    { title: '偏移地址', dataIndex: 'offsetAddress' },
    { title: '系数', dataIndex: 'coefficient' },
    { title: '比特位', dataIndex: 'bit'},
    { title: '是否是计量属性', dataIndex: 'measureIs',
      render: val => val ? '是' : '否'
    },
    { title: '是否大端模式', dataIndex: 'bigEndianIs',
      render: val => val ? '是' : '否'
    },
    { title: '计量器id', dataIndex: 'f'},
    { title: '数据类型id', dataIndex: 'g' },
    { title: '轮询id', dataIndex: 'status',},

    { title: '操作', dataIndex: 'option', disabled: true, key: 'option', fixed: 'right', width: 240,
      render: (text, record) => (
        <>
          <a onClick={() => history.push(`/ops/gather/attar/edit/${record.id}`)}>编辑</a>
          <Divider type="vertical" />
          <Popconfirm title="确认删除此属性吗?" onConfirm={() => itemDelete(record.id)}>
            <a>删除</a>
          </Popconfirm>
        </>
      ),
    },
  ]

  return (
    <PageHeaderWrapper title="终端管理">
      <div className={ classNames(utilsStyles.disFlexCol, utilsStyles.fullContainer) }>
        <Button
          type='primary'
          style={{ marginRight: 15 }}
          onClick={() => history.push('/ops/gather/attar/add')}
        >
          <PlusOutlined />添加设备
        </Button>
        <Card size="small" style={{flex: 1}}>
          <Table
            size="small"
            rowKey={(record) => record.id}
            dataSource={attrPage.list}
            pagination={attrPage.pagination}
            columns={columns}
            {...tableProps}
          />
        </Card>

      </div>
    </PageHeaderWrapper>
  );
};

export default connect(({ opsGather, loading }) => ({
  opsGather,
  loading: loading.models.opsGather,
}))(Index);