TransferTableModal.config.ts 2.77 KB
import { h, unref } from 'vue';
import { findDictItemByCode } from '/@/api/system/dict';
import { FETCH_SETTING } from '/@/components/Table/src/const';
import { DeviceStatusEnum, DeviceStatusNameEnum, DeviceTypeNameEnum } from './enum';
import { Tag } from 'ant-design-vue';
import { BasicColumn, BasicTableProps, FormSchema } from '/@/components/Table';
import { useClipboard } from '@vueuse/core';
import { useMessage } from '/@/hooks/web/useMessage';

export const deviceTableFormSchema: FormSchema[] = [
  {
    field: 'name',
    label: '设备名称',
    component: 'Input',
    colProps: { span: 9 },
    componentProps: {
      placeholder: '请输入设备名称',
    },
  },
  {
    field: 'deviceType',
    label: '设备类型',
    component: 'ApiSelect',
    colProps: { span: 9 },
    componentProps: {
      placeholder: '请选择设备类型',
      api: findDictItemByCode,
      params: {
        dictCode: 'device_type',
      },
      labelField: 'itemText',
      valueField: 'itemValue',
    },
  },
];

const { copied, copy } = useClipboard({ legacy: true });

const { createMessage } = useMessage();

export const deviceTableColumn: BasicColumn[] = [
  {
    title: '状态',
    dataIndex: 'deviceState',
    customRender: ({ text }) => {
      return h(
        Tag,
        {
          color:
            text === DeviceStatusEnum.INACTIVE
              ? 'warning'
              : text === DeviceStatusEnum.OFFLINE
              ? 'error'
              : 'success',
        },
        () => DeviceStatusNameEnum[text]
      );
    },
  },
  {
    title: '别名/设备名称',
    dataIndex: 'name',
    customRender: ({ record }) => {
      return h('div', [
        h(
          'div',
          {
            class: 'cursor-pointer',
            onClick: async () => {
              await copy(record.name);
              if (unref(copied)) createMessage.success('复制成功');
            },
          },
          [
            record.alias && h('div', { class: 'truncate' }, record.alias),
            h('div', { class: 'text-blue-400 truncate' }, record.name),
          ]
        ),
      ]);
    },
  },
  {
    title: '设备类型',
    dataIndex: 'deviceType',
    customRender: ({ text }) => {
      return h(Tag, { color: 'success' }, () => DeviceTypeNameEnum[text]);
    },
  },
  {
    title: '所属产品',
    dataIndex: 'deviceProfile.name',
  },
  {
    title: '所属组织',
    dataIndex: 'organizationDTO.name',
  },
];

export const TransferTableProps: BasicTableProps = {
  formConfig: {
    layout: 'inline',
    labelWidth: 80,
    schemas: deviceTableFormSchema,
    actionColOptions: { span: 6 },
  },
  size: 'small',
  maxHeight: 240,
  useSearchForm: true,
  columns: deviceTableColumn,
  showIndexColumn: false,
  fetchSetting: FETCH_SETTING,
} as BasicTableProps;