vent-template/src/views/vent/monitorManager/comment/MonitorTable.vue

<template>
  <div class="vent-table">
    <BasicTable ref="ventTableRef" @register="registerTable" :rowSelection="props.isShowSelect ? rowSelection: undefined">
      <template #tableTitle>
        <div></div>
      </template>
      <template #tableTop>
        <div></div>
      </template>
      <template #bodyCell="{ column, record }">
        <slot name="filterCell" v-bind="{ column, record }"></slot>
      </template>
      <template #action="{ record }">
          <slot name="action" v-bind="{ record }"></slot>
        </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" setup>
  //ts语法
  import { defineExpose, toRaw, watch, ref, onMounted, onUnmounted } from 'vue';
  import { BasicTable } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  import { findIndex } from 'lodash-es';
  const props = defineProps({
    columnsType: {
      type: String,
      required: true,
    },
    dataSource: {
      type: Array,
      required: true,
    },
    deviceType: {
      type: String,
    },
    designScope: {
      type: String,
    },
    isShowSelect: {
      type: Boolean,
      default:true,
    },
    isShowPagination: {
      type: Boolean,
      default: true,
    },
    isShowActionColumn: {
      type: Boolean,
      default: false,
    },
    scroll: {
      type: Object,
      default: () => null
    },
    title: {
      type: String,
    },
    size: {
      type: String,
      default: 'small',
    },
  });
  const emits = defineEmits(['selectRow']);
  const dataTableSource = ref<any[]>([]);
  // const loading = ref(true);

  const ventTableRef = ref();

  const tableMaxHeight = 150;
  const columns = ref([])
  
  watch(
    () => {
      return props.dataSource;
    },
    (newVal, oldVal) => {
      if (oldVal && newVal && oldVal.length < 1 && newVal.length > 0) {
        // 第一次
        setSelectedRowKeys([newVal[0].deviceID]);
      }
      const list = <any[]>[];
      newVal.forEach((item) => {
        list.push(toRaw(item));
      });
      dataTableSource.value = list;
      if(ventTableRef.value) setLoading(false)
    },
    {
      immediate: true
    }
  );
   watch(
    () => {
      return props.columnsType;
    },
    (newVal) => {
      const column =  getTableHeaderColumns(newVal)
      if(column && column.length < 1){
        const arr = newVal.split('_')
        const columnKey =  arr.reduce((prev, cur, index) => {
          if(index !== arr.length - 2){
            return prev + '_' + cur
          }else {
            return prev
          }
        })
        columns.value = getTableHeaderColumns(arr[0]+'_monitor');
      }else{
        columns.value = column
      }
    },
    {
      immediate: true
    }
  );

  // 列表页面公共参数、方法
  const { prefixCls, tableContext, doRequest } = useListPage({
    designScope: props.designScope,
    tableProps: {
      title: props.title,
      dataSource: dataTableSource,
      columns: columns,
      rowSelection: { type: props.isShowSelect? 'radio': undefined },
      size: props.size,
      useSearchForm: false,
      showTableSetting: false,
      showActionColumn: props.isShowActionColumn,
      maxHeight: tableMaxHeight,
      bordered: false,
      scroll: props.scroll,
      rowKey: 'deviceID',
      // striped: true,
      loading: true,
      actionColumn: {
        width: 180,
      },
      pagination: props.isShowPagination ? {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['5', '10', '20'],
      } : false,
      beforeFetch: (params) => {
        return Object.assign({ column: 'createTime', order: 'desc' }, params);
      },
    },
  });

  //注册table数据
  const [registerTable, { reload, setLoading, setSelectedRowKeys }, { rowSelection, selectedRowKeys,  }] = tableContext;
  watch(
    selectedRowKeys,
    (oldKeys, newKeys) => {
      const index = findIndex(dataTableSource.value, (data: any) => {
        return data.deviceID == selectedRowKeys.value[0];
      });
      if (index >= 0) emits('selectRow', dataTableSource.value[index], index);
    },
    { immediate: false }
  );

  defineExpose({
    doRequest,
    setSelectedRowKeys,
    setLoading
  });

  onMounted(() => {
    // 如果是https
    // 反之是websocket
  });

  onUnmounted(() => {});
</script>

<style scoped lang="less">
  @ventSpace: zxm;

  :deep(.@{ventSpace}-table-body) {
    height: auto !important;
    tr > td {
      background: #ffffff00 !important;
    }
    tr.@{ventSpace}-table-row-selected {
      td {
        background: #007cc415 !important;
      }
    }
  }
  :deep(.jeecg-basic-table .@{ventSpace}-table-wrapper .@{ventSpace}-table-title) {
    min-height: 0;
  }
</style>