Site.tsx

import React, {useState} from 'react';
import {useRequest, Access} from 'umi'
import {Form, Divider, Popconfirm, Button, message} from "antd";

import {fetchNodeList, fetchNodeDelete} from '@/services/device'
import {fetchOrganization, fetchSystemTreeNode, fetchUserTree} from '@/services/dict'
import useRequestTable from "@/useHooks/useRequestTable";
import type {ColumnProps} from "antd/lib/table";
import AddSite from "@/pages/Ops/Device/System/components/AddSite";
import AutoTable from "@/pages/Ops/Device/StandingBook/components/AutoTable";
import {createTree, createUserTree} from "@/utils/utils";
import type {CreateFormProps} from "@/pages/Ops/Device/StandingBook/components/AutoTable/createForm";
import {insideAccess} from '@/access'

const Site: React.FC = () => {
  const [visible, setVisible] = useState<boolean>(false);
  const [type, setType] = useState<'add' | 'edit'>('add')
  const [selectId, setSelectId] = useState<number | undefined>()
  const [form] = Form.useForm()

  const systemTree = useRequest(fetchSystemTreeNode)
  const systemData = systemTree?.data?.map((item: any) => ({value: item.systemId, label: item.name}))
  const sitePage = useRequestTable((payload) => fetchNodeList({...payload, siteIs: true}), {
    form
  });
  const nodeDelete = useRequest(fetchNodeDelete, {
    manual: true,
    onSuccess: () => {
      message.success('删除成功', 1)
      sitePage?.search.refresh()
    }
  })
  const organization = useRequest(fetchOrganization)
  const organizationData = organization.data && createTree(organization.data, 'subList') || []

  const userTree = useRequest(fetchUserTree)
  const userData = createUserTree(userTree?.data || []);

  const valChange = (payload: any) => {
    sitePage?.search.submit(payload)
  }

  const openEdit = (id: number) => {
    setType('edit')
    setVisible(true)
    setSelectId(id)

  }
  const openAdd = () => {
    setType('add')
    setVisible(true)
  }
  const closeModal = () => {
    setVisible(false)
  }

  const allFormData: CreateFormProps[]  = [
    { label: '设备系统', name: 'systemId', type: 'select', selectData: systemData},
    { label: '管理部门', name: 'departmentId', type: 'treeSelect', selectData: organizationData},
    { label: '责任主管', name: 'responsibleSupervisorUid', type: 'treeSelect', selectData: userData},
    { label: '查询', name: 'name', type: 'input'},
  ];

  const columns: ColumnProps<API.Store>[] = [
    { align: 'center', title: '站点名称', dataIndex: 'name'},
    { align: 'center', title: '站点编号', dataIndex: 'code' },
    { align: 'center', title: '所属系统', dataIndex: 'parent',
      render: (val, record) => val?.name || record?.system?.name || ''
    },
    { align: 'center', title: '区域', dataIndex: 'area',
      render: val => val?.name || ''
    },
    { align: 'center', title: '位置', dataIndex: 'position',
      render: val => val?.name || ''
    },
    { align: 'center', title: '管理部门', dataIndex: 'department',
      render: val => val?.name || ''
    },
    { align: 'center', title: '责任人', dataIndex: 'responsible',
      render: val => val?.name || ''
    },
    { align: 'center', title: '联系电话', dataIndex: 'belongingsCode2',
      render: (val, record) => record?.responsible?.mobile || ''
    },
    { align: 'center', title: '责任主管', dataIndex: 'responsibleSupervisor',
      render: val => val?.name || ''
    },
    { align: 'center', title: '联系电话', dataIndex: 'belongingsCode2',
      render: (val, record) => record?.responsibleSupervisor?.mobile || ''
    },

    { align: 'center', title: '操作', dataIndex: 'option', fixed: 'right', width: 100,
      render: (text: any, record: any) => (
        <>
          <Access accessible={insideAccess('oOMEmkFhzOr')}>
            <a onClick={() => openEdit(record.id)}>编辑</a>
            <Divider type="vertical" />
          </Access>
          <Access accessible={insideAccess('CwFkENmnqgk')}>
            <Popconfirm title="确认删除此站点吗?" onConfirm={() => nodeDelete.run(record.id)}>
              <a>删除</a>
            </Popconfirm>
          </Access>

        </>
      ),
    },
  ]
  return (
    <div className="pos_full_page">
      <AutoTable
        bordered
        form={form}
        loading={sitePage.loading || false}
        formData={allFormData}
        tableExtra={
          <Access accessible={insideAccess('oOMEmkFhzOr')}>
            <Button type="primary" onClick={openAdd}>添加站点</Button>
          </Access>
        }
        onValuesChange={valChange}
        columns={columns}
        dataSource={sitePage.dataSource}
        {...sitePage.tableProps}
      />
      <AddSite
        type={type}
        visible={visible}
        selectId={selectId}
        onRefresh={sitePage?.search?.refresh}
        systemData={systemTree?.data}
        handleClose={closeModal}
      />
    </div>
  );
};

export default Site;