@techmask/vue3-arco-design v0.0.52

1 快速上手

1.1 安装

注意: vue >= 3.2.0

# npm
npm install @techmask/vue3-arco-design
# yarn
yarn add @techmask/vue3-arco-design

1.2 引入

import { createApp } from 'vue'
import App from './App.vue';
// 引入
import techmask from '@techmask/vue3-arco-design'

const app = createApp(App);
// 挂载
app.use(techmask);
app.mount('#app');

2 组件

2.1 按钮组

• 基本用法

<template>
	<tm-buttons :data="buttonList"></tm-buttons>
</template>

<script lang="ts" setup>

const onUpload = () => {
    console.log('onUpload');
};

const onDownload = async () => {
     console.log('onDownload');
};

const onAdd = () => {
    console.log('onAdd');
};

const buttonList = reactive<buttonListType[]>([
    {
        type: 'outline',
        iconName: 'icon-upload',
        name: 'name',
        handleClick: add,
    },
    {
        type: 'outline',
        iconName: 'icon-download',
        name: 'name',
        handleClick: add,
    },
    {
        type: 'primary',
        iconName: 'icon-plus',
        name: 'name',
        handleClick: add,
    },
]);
</script>

• API

  • data : Array 例 :

    • [
          {
              type: 'outline',  // 按钮类型
              iconName: 'icon-upload', // 按钮图标
              name: 'name', // 按钮名称
              handleClick: add, // 点击执行的方法
          }
      ]

2.2 级联选择器

• 基本用法

<template>
	<tm-cascader :model="branchList" id="brachCd" parentId="parentBrachCd" :fieldNames="fieldNames"></tm-cascader>
</template>

<script lang="ts" setup>

const fieldNames={
  value:'brachId',
  label:'brachName'
}

const branchList=[
  {
    brachId: '1',
    brachCd: 'A',
    brachName: '北京',
    parentBrachCd: '',
  },
  {
    brachId: '2',
    brachCd: 'A01',
    brachName: '朝阳区',
    parentBrachCd: 'A',
  },
  {
    brachId: '3',
    brachCd: 'A02',
    brachName: '丰台区',
    parentBrachCd: 'A',
  },
  {
    brachId: '4',
    brachCd: 'B',
    brachName: '上海',
    parentBrachCd: '',
  },
  {
    brachId: '5',
    brachCd: 'B01',
    brachName: '静安区',
    parentBrachCd: 'B',
  },
  {
    brachId: '6',
    brachCd: 'B02',
    brachName: '宝山区',
    parentBrachCd: 'B',
  },
  {
    brachId: '7',
    brachCd: 'B03',
    brachName: '闵行区',
    parentBrachCd: 'B',
  },
  {
    brachId: '8',
    brachCd: 'B02001',
    brachName: 'AA街道',
    parentBrachCd: 'B02',
  }
]
</script>

• api

  • model : Array 例:

    • [
        {
          brachId: '1',  // id
          brachCd: 'A',  // 标识
          brachName: '北京', // 名称
          parentBrachCd: '', // 父级标识
        },
        {
          brachId: '2',
          brachCd: 'A01',
          brachName: '朝阳区',
          parentBrachCd: 'A',
        },
        {
          brachId: '3',
          brachCd: 'A02',
          brachName: '丰台区',
          parentBrachCd: 'A',
      
        }
      ]

  • fieldNames : Object 例 :

    • {
        value:'brachId',  // model绑定的属性
        label:'brachName' // model展示的属性
      }

  • id : string 例 :

    • id="brachCd"  // 以brachCd作为本级属性

  • parentId : string 例 :

    • parentId="parentBrachCd"  // 以parentBrachCd作为父级属性

2.3 删除提示

• 基本用法

<template>
    <tm-confirm-modal v-model:visible="showDeleteConfirmInd" :title="$t('common.action.delete')"
        :content="`${$t('common.action.delete')}${$t('menu.device')} message?`" @on-delete="doDelete" />
</template>

<script lang="ts" setup>
import {ref} from 'vue'
let showDeleteConfirmInd = ref(false)

const doDelete = () => {
	console.log('doDelete');
}
</script>

• api
  • v-model:visible : boolean ( 信息提示框是否显示 )
  • title : string ( 标题 )
  • content : string ( 提示内容 )
• event
  • on-delete : function (点击确定执行的方法)

2.4 抽屉

• 基本用法

<template>
    <tm-form-descriptions v-model:visible="showDescriptionsInd" :form-data="seledDevice"
    :form-define="descriptionFormDefine" />
</template>

<script lang="ts" setup>
import {ref} from 'vue'
let showDescriptionsInd = ref(false)

let seledDevice = ref({
    address: "南昌路549弄4号210室",
    architecture: "x86",
    canOccupyInd: "Y",
    canPowerOffInd: "N",
    canPowerOnInd: "N",
    canReleaseInd: "N",
    canReserveInd: "Y",
    cityId: 310000,
    connectionId: 31,
    cpu: "Intel I7",
    createdBy: "edison.chen",
    createdByName: "Edison Chen123",
    createdDate: "2024-01-07 11:05:33",
    deviceCode: "D000023",
    deviceId: 23,
    deviceRemark: "参考板描述",
    deviceStatus: "UNKNOWN",
    deviceStatusDesc: "未知",
    deviceStatusDescAlt: "Unknown",
    deviceType: "BOARD",
    editableInd: "Y",
    faultIndicator: "INDICATOR",
    ipAddress: "123.23.42.21",
    nportIp: "132.54.21.21",
    nportPort: "COM1",
    operableInd: "Y",
    origVersionNo: "4425860054666915840",
    pduIp: "123.45.32.43",
    pduPort: "32",
    powerOffOnUnreserved: "Y",
    powerStatus: "OFF",
    powerStatusDesc: "已下电",
    powerStatusDescAlt: "Power Off",
    publicInd: "PUBLIC",
    refreshDate: "2024-01-11 18:36:28",
    reserveState: "FREE",
    reserveStateDesc: "空闲",
    reserveStateDescAlt: "Free",
    updatedBy: "Anonymous",
    updatedDate: "2024-01-30 20:24:40",
    usageStatus: "IDLE",
    usageStatusDesc: "空闲",
    usageStatusDescAlt: "Idle",
    zoneCode: "Z000001",
    zoneName: "Shanghai-012"
})
let obj = {
    rows: [
    {
        title: 'menu.device.detail',
        fields: [
        { name: 'deviceCode', type: 'index', title: 'device.fields.deviceCode', span: 3 },
        { name: 'zoneName', type: 'text', title: 'device.fields.zoneCode', span: 3 },
        { name: 'architecture', type: 'text', title: 'device.fields.architecture', span: 3 },
        { name: 'bsp', type: 'text', title: 'device.fields.bsp', span: 3 },
        { name: 'cpu', type: 'text', title: 'device.fields.cpu', span: 3 },
        { name: 'ipAddress', type: 'text', title: 'device.fields.ipAddress', span: 3 },
        { name: 'ipAddressAlias', type: 'text', title: 'device.fields.ipAddressAlias', span: 3 },
        { name: 'ipMask', type: 'text', title: 'device.fields.ipMask', span: 3 },
        { name: 'gatewayIp', type: 'text', title: 'device.fields.gatewayIp', span: 3 },
        { name: 'macAddr', type: 'text', title: 'device.fields.macAddr', span: 3 },
        { name: 'pduIp', type: 'text', title: 'device.fields.pduIp', span: 3, visible: true },
        { name: 'pduPort', type: 'text', title: 'device.fields.pduPort', span: 3, visible: true },
        { name: 'nportIp', type: 'text', title: 'device.fields.nportIp', span: 3, visible: true },
        { name: 'nportPort', type: 'text', title: 'device.fields.nportPort', span: 3, visible: true },
        { name: 'powerStatus', type: 'select', title: 'device.fields.powerStatus', span: 12, visible: true },
        { name: 'deviceStatus', type: 'select', title: 'device.fields.deviceStatus', span: 12, visible: true },
        { name: 'usageStatus', type: 'select', title: 'device.fields.usageStatus', span: 12, visible: true },
        { name: 'cityId', type: 'citySelect', checkStrictly: true, title: 'device.fields.city', span: 3 },
        { name: 'address', type: 'text', title: 'device.fields.address', span: 3 },
        { name: 'deviceRemark', type: 'text', title: 'device.fields.deviceRemark', span: 3 },
        { name: 'createdDate', type: 'text', title: 'system.fields.createdDate', span: 3 },
        { name: 'createdBy', type: 'text', title: 'system.fields.createdBy', span: 3 },
        { name: 'updatedDate', type: 'text', title: 'system.fields.updatedDate', span: 3 },
        { name: 'updatedBy', type: 'text', title: 'system.fields.updatedBy', span: 3 },
        ],
    },
    ],
    title: 'menu.device.detail',
}

let descriptionFormDefine = ref(obj)
</script>

• api
  • v-model:visible : boolean ( 抽屉是否显示 )
  • form-define : Object ( 抽屉的属性配置 )
  • form-data : Object ( 抽屉的数据 )

2.5 查询表单

• 基本用法

<template>
    <tm-form-view v-model:model="queryForm" :form-define="queryFormDefine"
                        @on-submit="onSearch" :CodeTableService="CodeTableService" :useCodeTableStore="useCodeTableStore"></tm-form-view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { CodeTableService } from '@/api/system/codetable';
import { useCodeTableStore } from '@/store';

let obj = {
    rows: [
        {
            fields: [
                { name: 'deviceCode', type: 'text', title: 'device.fields.targetBoardId', span: 6 },
                { name: 'architecture', type: 'auto-complete', title: 'device.fields.architecture', options: { codeTableId: 'EDIMS_ARCH' }, span: 6 },
                { name: 'bsp', type: 'text', title: 'device.fields.bsp', span: 6 },
                { name: 'cpu', type: 'text', title: 'device.fields.cpu', span: 6 },
                { name: 'reservationStatus', type: 'select', title: 'device.fields.reservationStatus', span: 6, options: { codeTableId: 'EDIMS_RESERVE_STATE', codeTableQuery: { categoryCd: 'BOARD' } } },
                { name: 'ipAddress', type: 'text', title: 'device.fields.ipAddress', span: 6 },
                { name: 'ipAddressAlias', type: 'text', title: 'device.fields.ipAddressAlias', span: 6 },
                { name: 'gatewayIp', type: 'text', title: 'device.fields.gatewayIp', span: 6 },
                { name: 'search', type: 'search', span: 24, class: 'justify-content-center mb-20 flex' },
            ],
        },
    ],
}

// 查询面板配置
let queryFormDefine = ref(obj);

// 表单属性
const queryForm = ref({
    deviceId: '',
    zoneCode: '',
    architecture: '',
    bsp: '',
    cpu: '',
    reservedBy: '',
    reserveState: '',
    reserveDate: '',
    reserveNote: '',
    ipAddress: '',
    ipAddressAlias: '',
    ipMask: '',
    gatewayIp: '',
    macAddr: '',
    pduIp: '',
    pduPort: '',
    nportIp: '',
    nportPort: '',
    pageNum: 1,
});

const onSearch = () => {
    console.log('onSearch');
}

</script>

• api
  • v-model:model : Object ( 表单绑定的数据 )
  • form-define : Object ( 表单的属性配置 )
  • CodeTableService : axios接口 ( 下拉选项的请求接口 )
  • useCodeTableStore : pinia仓库 ( 下拉选项的存储仓库 )
• event
  • on-submit : function ( 点击查询执行的方法 )

2.6 编辑表单

• 基本用法

<template >
    <tm-formView-modal v-model:visible="showEditFormInd" v-model:message="message"
    :form-define="editFormDefine" :form-data="editForm" :modal-width="800" :alert-show="alertShow"
    internationalize-pre="device.fields" :title="$t('common.action.new')" @on-save="onSave" />
</template>
  
<script lang="ts" setup>
import { ref } from 'vue';

let showEditFormInd = ref(false)
let message = ref('message')
let alertShow = ref(false)

let obj = {
    rows: [
    {
        fields: [
        { name: 'zoneCode', type: 'select', title: 'device.fields.zoneCode', options: { codeTableId: 'EDIMS_ZONE_CODE' }, rules: [{ required: true }], span: 12 },
        { name: 'architecture', type: 'auto-complete', title: 'device.fields.architecture', options: { codeTableId: 'EDIMS_ARCH' }, rules: [{ required: true }], span: 12 },
        { name: 'bsp', type: 'text', title: 'device.fields.bsp', rules: [{ required: false }], span: 12 },
        { name: 'cpu', type: 'text', title: 'device.fields.cpu', rules: [{ required: true }], span: 12 },
        { name: 'ipAddress', type: 'text', title: 'device.fields.ipAddress', rules: [{ required: true }, { validate: 'ip' }], span: 12 },
        { name: 'ipAddressAlias', type: 'text', title: 'device.fields.ipAddressAlias', rules: [{ required: false }], span: 12 },
        { name: 'ipMask', type: 'text', title: 'device.fields.ipMask', rules: [{ required: false }], span: 12 },
        { name: 'gatewayIp', type: 'text', title: 'device.fields.gatewayIp', rules: [{ required: false }], span: 12 },
        { name: 'macAddr', type: 'text', title: 'device.fields.macAddr', rules: [{ required: false }], span: 12 },
        { name: 'pduIp', type: 'text', title: 'device.fields.pduIp', rules: [{ required: false }], span: 12, visible: true },
        { name: 'pduPort', type: 'text', title: 'device.fields.pduPort', rules: [{ required: false }], span: 12, visible: true },
        { name: 'nportIp', type: 'text', title: 'device.fields.nportIp', rules: [{ required: false }], span: 12, visible: true },
        { name: 'nportPort', type: 'text', title: 'device.fields.nportPort', rules: [{ required: false }], span: 12, visible: true },
        {
            name: 'powerStatus',
            type: 'select',
            title: 'device.fields.powerStatus',
            options: { codeTableId: 'EDIMS_POWER_STATUS' },
            rules: [{ required: false }],
            span: 12,
            visible: true,
        },
        {
            name: 'deviceStatus',
            type: 'select',
            title: 'device.fields.deviceStatus',
            options: { codeTableId: 'EDIMS_DEVICE_STATUS' },
            rules: [{ required: false }],
            span: 12,
            visible: true,
        },
        {
            name: 'usageStatus',
            type: 'select',
            title: 'device.fields.usageStatus',
            options: { codeTableId: 'EDIMS_USAGE_STATUS' },
            rules: [{ required: false }],
            span: 12,
            visible: true,
        },
        { name: 'cityId', type: 'citySelect', checkStrictly: true, title: 'device.fields.city', rules: [{ required: false }], span: 24 },
        { name: 'address', type: 'textarea', title: 'device.fields.address', rules: [{ required: false }], span: 24 },
        { name: 'deviceRemark', type: 'textarea', title: 'device.fields.deviceRemark', rules: [{ required: false }], span: 24 },
        { name: 'faultIndicator', type: 'textarea', title: 'device.fields.faultIndicator', rules: [{ required: false }], span: 24 },
        ],
    },
    ],
    lineShow: false,
}

// 查询面板配置
let editFormDefine = ref(obj);

let editForm = ref({})

const onSave = () => {
	console.log('onSave');
}

</script>

• api
  • v-model:visible : boolean ( 表单是否显示)
  • v-model:message : string ( 表单提示信息 )
  • form-define : object ( 表单的属性配置 )
  • form-data : Object ( 表单绑定的数据 )
  • modal-width number ( 表单的宽度 )
  • alert-show boolean ( 是否使用警告提示 )
  • internationalize-pre : string ( 国际化方法传入的字符串 )
  • title : string ( 标题 )
  • CodeTableService : axios接口 ( 下拉选项的请求接口 )
  • useCodeTableStore : pinia仓库 ( 下拉选项的存储仓库 )
• event
  • on-save : function ( 点击确定执行的方法 )

2.7 表格

• 基本用法

<template >
    <tm-table-view row-key="deviceId" :loading="loading" :pagination="pagination" :row-selection="rowSelection"
        :columns="tableColumns" :data="deviceList" @page-change="fetchData" @on-edit="onEdit" @on-delete="onDelete"
        @on-reserve="onReserve" @on-occupy="onOccupy" @on-release="onRelease" @on-power-off="onPowerOff"
        @on-power-on="onPowerOn" @on-descriptions="onDescriptions" @on-attachments="onAttachments"
        @on-communication="onCommunication" @onSelectedKeys="onSelectedKeys">
        <template #content="{ column, record }">
            <template v-if="column?.type == 'deviceStatus'">
                <device-status :device="record" @on-status-refreshed="refreshDevice" />
            </template>
        </template>
    </tm-table-view>
</template>
  
<script lang="ts" setup>
import { ref, reactive, computed, getCurrentInstance } from 'vue';

function useLoading(initValue = false) {
  const loading = ref(initValue);
  const setLoading = (value: boolean) => {
    loading.value = value;
  };
  const toggle = () => {
    loading.value = !loading.value;
  };
  return {
    loading,
    setLoading,
    toggle,
  };
}

const { proxy } = getCurrentInstance() as any; // 国际化

const { loading, setLoading } = useLoading(true); // 加载中
const pagination = reactive({ current: 1, pageSize: 15, total: 0 }); // 分页
const rowSelection = reactive({  // 多选框
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
});
setLoading(false);
// 3.2 获取表格

let obj = [
    { title: proxy.$t('device.fields.targetBoardId'), dataIndex: 'deviceCode', slotName: 'link', width: 100, action: 'onDescriptions' },
    { title: proxy.$t('device.fields.zoneCode'), dataIndex: 'zoneName', width: 120 },
    { title: proxy.$t('device.fields.architecture'), dataIndex: 'architecture', width: 80, align: 'center' },
    { title: proxy.$t('device.fields.bsp'), dataIndex: 'bsp', width: 100, align: 'center' },
    { title: proxy.$t('device.fields.cpu'), dataIndex: 'cpu', width: 100, align: 'center' },
    { title: proxy.$t('device.fields.deviceStatus'), type: 'deviceStatus', width: 118, align: 'center', slotName: 'content' },
    { title: proxy.$t('device.fields.ipAddress'), dataIndex: 'ipAddress', width: 130 },
    { title: proxy.$t('device.fields.ipAddressAlias'), dataIndex: 'ipAddressAlias', width: 120 },
    { title: proxy.$t('common.fields.updatedDate'), type: 'datetime', slotName: 'date', dataIndex: 'updatedDate', width: 180 },
    { title: proxy.$t('common.fields.updatedBy'), dataIndex: 'updatedByName', width: 120 },
    {
        title: proxy.$t('table.columns.operations'),
        dataIndex: 'operations',
        slotName: 'operationDropdown',
        align: 'center',
        fixed: 'right',
        width: 100,
        actionItems: [
            { title: 'device.action.reserve', action: 'onReserve', type: 'outline', visibleField: 'canReserveInd' },
            { title: 'device.action.powerOn', action: 'onPowerOn', type: 'outline', visibleField: 'canPowerOnInd' },
            { title: 'device.action.powerOff', action: 'onPowerOff', type: 'outline', visibleField: 'canPowerOffInd' },
            { title: 'device.action.occupy', action: 'onOccupy', type: 'outline', visibleField: 'canOccupyInd' },
            { title: 'device.action.release', action: 'onRelease', type: 'outline', visibleField: 'canReleaseInd' },
            { title: 'device.action.nportCommunication', action: 'onCommunication', type: 'outline', visibleField: 'operableInd' },
            { title: 'device.action.attachments', action: 'onAttachments', type: 'outline', visibleField: 'operableInd' },
            { title: 'common.action.edit', action: 'onEdit', type: 'outline', visibleField: 'editableInd' },
            { title: 'common.action.delete', action: 'onDelete', type: 'outline', status: 'danger', visibleField: 'editableInd' },

            // { code: 'delete', action: 'onDelete', type: 'outline', status: 'danger', visibleField: 'operatableInd' },
        ],
        type: 'actions',
    },
]
let tableColumns = computed(() => {
    obj.forEach((item: any) => {
        item.ellipsis = true;
        item.tooltip = true;
    });
    return obj;
});

// 表格数据
const deviceList = ref([
    {
        "deviceId": 23,
        "deviceCode": "D000023",
        "deviceType": "BOARD",
        "faultIndicator": "INDICATOR",
        "usageStatus": "IDLE",
        "powerStatus": "OFF",
        "deviceStatus": "UNKNOWN",
        "refreshDate": "2024-01-11 18:36:28",
        "architecture": "x86",
        "zoneCode": "Z000001",
        "cpu": "Intel I7",
        "ipAddress": "123.23.42.21",
        "pduIp": "123.45.32.43",
        "pduPort": "32",
        "nportIp": "132.54.21.21",
        "nportPort": "COM1",
        "cityId": 310000,
        "address": "南昌路549弄4号210室",
        "deviceRemark": "参考板描述",
        "connectionId": 31,
        "createdBy": "edison.chen",
        "createdDate": "2024-01-07 11:05:33",
        "updatedBy": "Anonymous",
        "updatedDate": "2024-01-30 20:24:40",
        "zoneName": "Shanghai-012",
        "powerOffOnUnreserved": "Y",
        "publicInd": "PUBLIC",
        "createdByName": "Edison Chen123",
        "reserveState": "FREE",
        "reserveStateDesc": "空闲",
        "reserveStateDescAlt": "Free",
        "usageStatusDesc": "空闲",
        "usageStatusDescAlt": "Idle",
        "powerStatusDesc": "已下电",
        "powerStatusDescAlt": "Power Off",
        "deviceStatusDesc": "未知",
        "deviceStatusDescAlt": "Unknown",
        "origVersionNo": "4425860054666915840",
        "editableInd": "Y",
        "operableInd": "Y",
        "canPowerOffInd": "N",
        "canPowerOnInd": "N",
        "canOccupyInd": "Y",
        "canReleaseInd": "N",
        "canReserveInd": "Y"
    },
    {
        "deviceId": 27,
        "deviceCode": "D000027",
        "deviceType": "BOARD",
        "usageStatus": "IN_USE",
        "powerStatus": "UNKNOWN",
        "deviceStatus": "UNKNOWN",
        "architecture": "x86",
        "zoneCode": "Z000001",
        "bsp": "123.23.42.21",
        "cpu": "Intel 17",
        "ipAddress": "123.23.42.21",
        "ipAddressAlias": "123.23.42.21",
        "ipMask": "123.23.42.21",
        "gatewayIp": "123.23.42.21",
        "macAddr": "123.23.42.21",
        "pduIp": "123.23.42.21",
        "pduPort": "6600",
        "nportIp": "123.23.42.21",
        "nportPort": "6601",
        "cityId": 310000,
        "address": "shanghai1123",
        "deviceRemark": "miaoshu",
        "connectionId": 28,
        "createdBy": "edison.chen",
        "createdDate": "2024-01-15 16:04:25",
        "updatedBy": "edison.chen",
        "updatedDate": "2024-01-30 17:35:02",
        "zoneName": "Shanghai-012",
        "powerOffOnUnreserved": "Y",
        "publicInd": "PUBLIC",
        "reserveId": "4425510341249806337",
        "reserveStatus": "VALID",
        "reserveStart": "2024-01-30 17:35:00",
        "reserveEnd": "2024-02-01 18:00:00",
        "reserveNote": "预约说明",
        "reservedBy": "edison.chen",
        "reserveDate": "2024-01-30 17:35:02",
        "usedBy": "edison.chen",
        "usageStart": "2024-01-30 17:35:02",
        "reservedByName": "Edison Chen123",
        "usedByName": "Edison Chen123",
        "updatedByName": "Edison Chen123",
        "createdByName": "Edison Chen123",
        "reserveState": "RESERVED",
        "reserveStateDesc": "已预约",
        "reserveStateDescAlt": "Reserved",
        "reserveTime": "24/01/30 00:00 ~ 24/02/01 00:00",
        "usageStatusDesc": "使用中",
        "usageStatusDescAlt": "In use",
        "powerStatusDesc": "未知",
        "powerStatusDescAlt": "Unknown",
        "deviceStatusDesc": "未知",
        "deviceStatusDescAlt": "Unknown",
        "origVersionNo": "4425510341249806340",
        "editableInd": "Y",
        "operableInd": "Y",
        "canPowerOffInd": "Y",
        "canPowerOnInd": "Y",
        "canOccupyInd": "N",
        "canReleaseInd": "Y",
        "canReserveInd": "Y"
    },
]); 

const fetchData = () => {
    console.log('fetchData');
}

const onEdit =() => {
    console.log('onEdit');
}

const onDelete = () => {
    console.log('onDelete');
}
const onReserve = () => {
    console.log('onReserve');
}
const onOccupy = () => {
    console.log('onOccupy');
}
const onRelease = () => {
    console.log('onRelease');
}
const onPowerOff = () => {
    console.log('onPowerOff');
}
const onPowerOn = () => {
    console.log('onPowerOn');
}
const onDescriptions = () => {
    console.log('onDescriptions');
}
const onAttachments =() => {
    console.log('onAttachments');
}
const onCommunication = () => {
    console.log('onCommunication');
}
const onSelectedKeys = () => {
    console.log('onSelectedKeys');
}
const refreshDevice = () => {
    console.log('refreshDevice');
}
</script>

• api

  • row-key : string ( 行唯一标识属性 )
  • loading : function ( 数据加载中动画 )

  • pagination : Object ( 分页 )

  • row-selection : Object ( 表格多选配置 )

  • columns : Object ( 表头的配置 )
  • data : Array ( 表格的数据 )

• event

  • page-change : function ( 页数变化 )
  • on-edit : function ( 点击编辑 )
  • on-delete : function ( 点击删除 )
  • on-reserve : function ( 点击预约 )
  • on-occupy : function ( 点击获取 )
  • on-release : function ( 点击释放 )
  • on-power-off : function ( 点击下电 )
  • on-power-on : function ( 点击上电 )
  • on-descriptions : function ( 查看设备详情 )
  • on-attachments : function ( 点击文件上传 )
  • on-communication : function ( 点击串口通信 / SSH通信 )
  • onSelectedKeys : function ( 批量烧录 )

• slots

  • content : 设备状态

    • <template #content="{ column, record }">
          <template v-if="column?.type == 'deviceStatus'">
              <device-status :device="record" @on-status-refreshed="refreshDevice" />
          </template>
      </template>

    • @on-status-refreshed : function ( 刷新状态 )