TransferTableModal.config.ts
2.77 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
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;