BasicInfo.jsx

import React, {useState, useEffect} from 'react';
import { connect } from 'umi';
import { dispatchHandle } from '@/utils/publicHandle';
import Description, { DescriptionForm } from '@/components/Customized/Description';
import LocationSelect from '@/components/Custom/AMaps/LocationSelect';
import useDebounce from '@/useHooks/useDebounce'
import { batchDicData } from '@/utils/utils';

const isBigScreenScale = window.innerWidth / 1600 > 1;

const BasicInfo = (props) => {
  const {
    type = 'edit', basicData = {}, dispatch, deviceId, form,
    opsGather: {gatewayList, meterPage, collectionList, areaTree, robinGroupList},
    opsDevice: {systemList},
    dict: {dicTotalsList}
  } = props;

  /**
   * @页面数据
   */
  const superMeterSearch = useDebounce((name) => {
    dispatchHandle(dispatch, 'opsGather/device_service_meter_post',
      {name, pageSize: 100, notIds: [deviceId],  notIdLike: deviceId}
    )
  }, 800, [])

  // 采集来源
  const collectData = collectionList.map(item => ({
    label: item.name,
    value: item.id
  }))
  /* 网关 */
  const gatewayData = gatewayList.map(item => ({
    label: item.code,
    value: item.id
  }))
  /* 设备系统 */
  const systemData = systemList?.length > 0 ? systemList.map((item, index) => {
    item.id = `${index}-0`;
    item.selectable = false;
    const itemJson= JSON.stringify(item);
    const jsonData= itemJson
      .replace(/\bname\b/g, "title")
      .replace(/\bid\b/g, "value")
      .replace(/\bsystemNodeList\b/g, "children")
      .replace(/\bsubList\b/g, "children");
    return JSON.parse(jsonData)
  }) : []
  /* 上级支路 */
  const superMeterData = meterPage.list?.length > 0 ? meterPage.list.map(item => ({
    label: item.name,
    value: item.id
  })) : [];

  const { meterType, department, location } = batchDicData(
    ['meterType', 'department', 'location'],
    dicTotalsList
  )
  const robinData = robinGroupList.map(item => ({
    label: item.name,
    value: item.groupNum
  }))
  const gatewayChange = (id) => {
    dispatchHandle(dispatch, 'opsGather/device_service_round_robin_group_list', {gatewayId: id})
    form.setFieldsValue({roundRobinGroupId: null})
  }

  const infoData = [
    { label: '设备名称', name: ['device', 'name'], required: true, type: 'input'},
    // { label: '设备编号', name: 'code', required: true, type: 'input'},
    { required: true, label: '网关', name: 'gatewayId', type: 'select', selectData: gatewayData, onChange: gatewayChange},
    { required: true, label: '轮询组', name: 'roundRobinGroupNum', type: 'select', selectData: robinData},
    // { label: '财产编码', name: 'belongingsCode', required: true, type: 'input'},
    // { label: '唯一标识码', name: 'uniqueCode', type: 'input', disabled: true, placeholder: '自动生成'},

    // { label: '类型', name: 'typeId', required: true, type: meterType.type, selectData: meterType.selectData},
    // { label: '采集来源', name: 'collectionSourceId', required: true, type: 'select', selectData: collectData},
    // { label: '所属设备系统', name: 'systemNodeId', required: true, type: 'treeSelect', selectData: systemData},
    // { label: '上级支路', name: 'superMeterId', type: 'select', selectData: superMeterData, onSearch: superMeterSearch},

    // { label: '型号规格', name: 'modelSpecification', type: 'input'},
    // { label: '负责人', name: 'principalId', required: true, type: 'select', selectData: [{value: 1, label: '测试'}]},
    // { label: '所属部门', name: 'areaId', required: true, type: department.type, selectData: department.selectData},
    // { label: '在用客户', name: 'activeCustomersId', required: true, type: 'select', selectData: [{value: 1, label: '测试'}]},

    // { label: '供应商', name: 'activeCustomersId', required: true, type: 'select', selectData: [{value: 1, label: '测试'}]},

    // { label: '品牌', name: 'brandName', type: 'input'},
    // { label: '购置日期', name: 'purchaseDate', required: true, type: 'date'},
    // { label: '购置金额（元）', name: 'purchaseAmount', type: 'input'},
    // { label: '保修期', name: 'warrantyDate', required: true, type: 'date'},

    // { label: '开始使用日期', name: 'startUsingTime', required: true, type: 'date'},
    // { label: '预计报废日期', name: 'expectedScrapDate', required: true, type: 'date'},
    // { label: '安置位置', name: 'installationLocationId', required: true, type: location.type, selectData: location.selectData},
    // { label: '设备坐标', name: 'address', type: 'auto', auto: (<LocationSelect/>)},
  ];

  useEffect(() => {
    dispatchHandle(dispatch, 'opsGather/device_service_gateway_post')
    dispatchHandle(dispatch, 'opsDevice/device_service_system_tree_post')
    dispatchHandle(dispatch, 'opsGather/device_service_meter_collection_types_get')
    dispatchHandle(dispatch, 'opsGather/device_service_meter_post',
      {pageSize: 100, notIds: [deviceId],  notIdLike: deviceId},
    )
    dispatchHandle(dispatch, 'opsGather/account_service_organization_tree_post', {
      type: 3,
    });
  }, [])

  return (
    <>
      {type === 'edit' ? (
        <DescriptionForm
          columns={isBigScreenScale ? 4 : 3}
          data={infoData}
        />
      ) : (
        <Description
          columns={isBigScreenScale ? 4 : 3}
          dataSource={basicData}
          data={infoData}
        />
      )}
    </>
  );
};

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