index.jsx

import React, {useEffect, useState} from 'react';
import { connect, history } from 'umi';
import {Card, Button, Table, Form, Divider, Popconfirm, Switch, Row, Col} from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {PlusOutlined} from '@ant-design/icons'
import { dispatchHandle } from '@/utils/publicHandle';
import useFormTable from '@/useHooks/useFormTable';
import classname from 'classnames'
import utilsStyles from '@/utils/utils.less';
import AddModal from './Modal/AddModal'
import Command from './Modal/Command'
import {exchangeURl} from '@/utils/utils'
import style from "@/pages/Ops/Gather/Test/Attar/index.less";
import {createSearchForm} from "@/utils/createForm";

import CopyModal from './Modal/CopyModal'

const Index = (props) => {
  const {dispatch, loading,
    opsGather: {meterModelPage, collectionList}
  } = props;

  const [visible, setVisible] = useState(false);
  const [commandVisible, setCommandVisible] = useState(false)
  const [modelId, setModelId] = useState();
  /* table选择框 */
  const [selectId, setSelectId] = useState([]);
  const [cVisible, setCVisible] = useState(false)
  /**
   * @表单提交
   */
  const [form] = Form.useForm();
  const getListItems = (payload = {}) => {
    dispatchHandle(dispatch, 'opsGather/device_service_meter_model_post', payload);
  }
  const { search, tableProps } = useFormTable(getListItems, {
    form,
  });
  const valChange = (val) => {
    search.submit(val)
  };

  /**
   * @Table方法
   */
  /* 删除属性 */
  const itemDelete = id => {
    dispatchHandle(dispatch,
      'opsGather/device_service_meter_model_id_delete',
      {id},
      () => {
      search.refresh()
    })
  }
  /**
   * @组件方法
   */
  /* 添加模型 */
  const addDataModal = (val) => {
    console.log(val)
  }

  /**
   * @页面方法
   */
  /* 添加模型 */
  const openAdd = () => {
    setVisible(true);
  }
  /* 编辑模型 */
  const openEdit= (id) => {
    setModelId(id);
    setVisible(true);
  }
  const closeEdit = () => {
    setModelId();
    setVisible(false)
  }
  /* 指令配置 */
  const openCommand = (id) => {
    setModelId(id);
    setCommandVisible(true);
  }
  const closeCommand = () => {
    setModelId();
    setCommandVisible(false)
  }
  const addCommand = (values) => {
    console.log(values)
    // dispatchHandle(dispatch, '/', {})
  }
  const openCopy = (id) => {
    setModelId(id)
    setCVisible(true)
  }
  const closeCopy = () => {
    setModelId()
    setCVisible(false)
  }
  /**
   * @页面数据
   */
  const collectData = collectionList.map(item => ({
    label: item.name,
    value: item.id
  }))
  const allFormData = [
    { label: '采集来源', name: 'collectionSourceId', type: 'select', selectData: collectData}
  ];
  const columns = [
    { title: '模型名称', dataIndex: 'name'},
    // { title: '设备类型', dataIndex: 'a' },
    { title: '采集来源', dataIndex: 'collectionSourceName' },
    // { title: '模型描述', dataIndex: 'c'},
    // { title: '启用状态', dataIndex: 'k',
    //   render: (val, record) => <Switch onChange={() => statusChange(val, record.id)}/>
    // },
    { title: '操作', dataIndex: 'option', disabled: true, key: 'option', width: 330,
      render: (val, record) => (
        <>
          <a onClick={() => openCopy(record.id)}>复制</a>
          <Divider type="vertical" />
          <a onClick={() => openEdit(record.id)}>编辑</a>
          <Divider type="vertical" />
          <a onClick={() => openCommand(record.id)}>轮询配置模板</a>
          <Divider type="vertical" />
          <a onClick={() => history.push(`${exchangeURl}/modal/attr-info/${encodeURIComponent(record.name)}/${record.id}`)}>查看属性</a>
          <Divider type="vertical" />
          <Popconfirm title="确认删除此属性吗?" onConfirm={() => itemDelete(record.id)}>
            <a>删除</a>
          </Popconfirm>
        </>
      ),
    },
  ]

  useEffect(() => {
    dispatchHandle(dispatch, 'opsGather/device_service_meter_model_command_template_item_types_get')
    dispatchHandle(dispatch, 'opsGather/device_service_meter_collection_types_get')

  }, [])

  return (
    <PageHeaderWrapper title="数据模型">
      <div className={ classname(utilsStyles.disFlexCol, utilsStyles.fullContainer) }>
        <Card style={{marginTop: 10, flex: 1}} size="small">
          <div className="pos_aline_no_wrap">
            <Button
              style={{marginBottom: 15}}
              type="primary"
              onClick={openAdd}
            ><PlusOutlined />创建模型</Button>
            <Form form={form} onValuesChange={valChange} className={style.search_left} style={{marginBottom: 15, flex: 1}}>
              <Row style={{width: '100%'}}>
                {allFormData?.length > 0 && allFormData.map(item => (
                  <Col span={5}>
                    {createSearchForm(item)}
                  </Col>
                ))}
              </Row>

            </Form>
          </div>

          <Table
            loading={loading}
            size="small"
            rowKey={(record) => record.id}
            dataSource={meterModelPage.list}
            pagination={meterModelPage.pagination}
            columns={columns}
            {...tableProps}
            // rowSelection={rowSelection}
          />
          <AddModal
            update={search.refresh}
            modelId={modelId}
            visible={visible}
            onSubmit={addDataModal}
            handleClose={closeEdit}
          />
          <Command
            modelId={modelId}
            update={search.refresh}
            visible={commandVisible}
            onSubmit={addCommand}
            handleClose={closeCommand}
          />
          <CopyModal
            update={search.refresh}
            modelId={modelId}
            visible={cVisible}
            handleClose={closeCopy}
          />
        </Card>
      </div>

    </PageHeaderWrapper>
  );
};

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