config.ts 2.99 KB
import { BasicColumn, FormSchema } from '/@/components/Table';
import { Tag, Tooltip } from 'ant-design-vue';
import { h } from 'vue';
import { transformTime } from '/@/hooks/web/useDateToLocaleString';
import { DeviceState, DeviceTypeEnum } from '/@/api/device/model/deviceModel';
import { handeleCopy } from '/@/views/device/profiles/step/topic';

// 表格配置
export const columns: BasicColumn[] = [
  {
    title: '设备状态',
    dataIndex: 'deviceState',
    width: 100,
    customRender: ({ record }) => {
      const color =
        record.deviceState == DeviceState.INACTIVE
          ? 'warning'
          : record.deviceState == DeviceState.ONLINE
          ? 'success'
          : 'error';
      const text =
        record.deviceState == DeviceState.INACTIVE
          ? '待激活'
          : record.deviceState == DeviceState.ONLINE
          ? '在线'
          : '离线';
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    dataIndex: 'name',
    title: '别名/设备名称',
    width: 210,
    slots: { customRender: 'name', title: 'deviceTitle' },
    customRender: ({ record }) => {
      return h('div', { style: 'display:flex;flex-direction:column' }, [
        record.alias &&
          h(
            'div',
            {
              class: 'cursor-pointer truncate',
            },
            h(
              Tooltip,
              {
                placement: 'topLeft',
                title: `${record.alias}`,
              },
              () => `${record.alias}`
            )
          ),
        h(
          'div',
          {
            class: 'cursor-pointer text-blue-500 truncate',
            onClick: () => {
              handeleCopy(`${record.name}`);
            },
          },
          h(
            Tooltip,
            {
              placement: 'topLeft',
              title: `${record.name}`,
            },
            () => `${record.name}`
          )
        ),
      ]);
    },
  },
  {
    title: '所属产品',
    width: 160,
    dataIndex: 'deviceProfileName',
  },
  {
    title: '所属组织',
    dataIndex: 'organizationDTO.name',
    width: 160,
  },
  {
    title: '设备类型',
    width: 100,
    dataIndex: 'deviceType',
    customRender: ({ record }) => {
      const color = 'success';
      const text =
        record.deviceType === DeviceTypeEnum.GATEWAY
          ? '网关设备'
          : record.deviceType === DeviceTypeEnum.DIRECT_CONNECTION
          ? '直连设备'
          : '网关子设备';
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: '创建时间',
    width: 120,
    dataIndex: 'createdTime',
    format: (_text: string, record: Recordable) => {
      return transformTime(record.createdTime);
    },
  },
];

// 表格查询表单
export const searchFormSchema: FormSchema[] = [
  {
    field: 'textSearch',
    label: '设备名称',
    component: 'Input',
    colProps: { span: 6 },
    componentProps: {
      maxLength: 255,
      placeholder: '请输入设备名称',
    },
  },
];