AttrInfo.jsx

import React, {useEffect, 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 {Form, Card, Table, Tabs, Divider, Button, Popconfirm, Modal} from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import utilsStyles from '@/utils/utils.less';
import classNames from "classnames";
import {exchangeURl} from '@/utils/utils'

const {confirm} = Modal

const AttrInfo = (props) => {
  const {
    dispatch,
    opsGather: {modelAttrPage},
    match: {params}
  } = props

  const {id} = params;
  const name = decodeURIComponent(params.name)

  const [form] = Form.useForm();
  const getListItems = (payload = {}) => {
    dispatchHandle(dispatch,
      'opsGather/device_service_meter_model_attr_post',
      {pageSize: 999, ...payload, meterModelId: id}
    );
  }
  const { search } = useFormTable(getListItems, {
    form,
  });

  const itemDelete = (id) => {
    confirm({
      centered: true,
      title: '删除提示',
      icon: null,
      content: '是否删除相关仪表的属性？',
      okText: '是',
      cancelText: '否',
      onOk() {
        dispatchHandle(dispatch,
          'opsGather/device_service_meter_model_attr_delete_and_related_attr_id_delete', {id}, () => {
            search.refresh()
          })
      },
      onCancel() {
        dispatchHandle(dispatch, 'opsGather/device_service_meter_model_attr_id_delete', {id}, () => {
          search.refresh()
        });
      }
    })

  }

  const columns = [
    { title: '属性名称', dataIndex: 'name'},
    { title: '偏移地址', dataIndex: 'offsetAddress' },
    { title: '系数', dataIndex: 'coefficient' },
    { title: '比特位', dataIndex: 'bit',
      render: (val, record) => record?.bitValueIs ? val : '-'
    },
    { title: '是否是计量属性', dataIndex: 'measureIs',
      render: val => val ? '是' : '否'
    },
    { title: '是否大端模式', dataIndex: 'bigEndianIs',
      render: val => val ? '是' : '否'
    },
    { title: '操作', dataIndex: 'option', disabled: true, key: 'option', width: 240,
      render: (text, record) => (
        <>
          <a onClick={() =>
            history.push(`${exchangeURl}/modal/${encodeURIComponent(name)}/${id}/attr/edit/${record.id}`)}
          >编辑</a>
          <Divider type="vertical" />
          <Popconfirm title="确认删除此属性吗?" onConfirm={() => itemDelete(record.id)}>
            <a>删除</a>
          </Popconfirm>
        </>
      ),
    },
  ]

  useEffect(() => {
    dispatchHandle(dispatch, 'opsGather/device_service_meter_post');
  }, [])


  return (
    <PageHeaderWrapper title="终端管理">
      <div className={ classNames(utilsStyles.disFlexCol, utilsStyles.fullContainer) }>
        <Card size="small" style={{flex: 1}}>
          <h1>{name || ''}</h1>
          <Button
            type='primary'
            style={{ width: 120, marginBottom: 15 }}
            onClick={() => history.push(`${exchangeURl}/modal/${encodeURIComponent(name)}/${id}/attr/add`)}
          >
            <PlusOutlined />添加属性
          </Button>
          <Table
            size="small"
            rowKey={(record) => record.id}
            dataSource={modelAttrPage.list}
            pagination={false}
            columns={columns}
          />
        </Card>
      </div>
    </PageHeaderWrapper>
  );
};

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