gas-injection/src/views/vent/monitorManager/comment/MonitorTable.vue

<template>
  <div class="vent-table">
    <BasicTable ref="ventTableRef" @register="registerTable" :rowSelection="rowSelection" :pagination="false" :loading="loading">
      <template #tableTitle>
        <div></div>
      </template>
      <template #tableTop>
        <div></div>
      </template>
      <template #bodyCell="{ column, record }">
        <slot name="filterCell" v-bind="{ column, 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 { list, deleteUser, batchDeleteUser, getImportUrl, getExportUrl, frozenBatch, syncUser } from '../../../system/user/user.api';
  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  import { findIndex } from 'lodash-es';
  import { computed } from '@vue/reactivity';
  const listApi = '/ventanaly-device/monitor/device';
  const props = defineProps({
    columnsType: {
      type: String,
      required: true,
    },
    dataSource: {
      type: Array,
      required: true,
    },
    deviceType: {
      type: String,
    },
    designScope: {
      type: String,
    },
    title: {
      type: String,
    },
    size: {
      type: String,
      default: 'small',
    },
  });
  const emits = defineEmits(['selectRow']);
  const dataTableSource = ref([]);
  const loading = ref(true);

  const ventTableRef = ref();
  // 默认初始是第一行
  const selectRowIndex = ref(0);
  const tableMaxHeight = 150;

  watch(
    () => {
      return props.dataSource;
    },
    (newVal, oldVal) => {
      if (oldVal.length < 1 && newVal.length > 0) {
        // 第一次
        setSelectedRowKeys([newVal[0].deviceID]);
      }
      const list = [];
      newVal.forEach((item) => {
        list.push(toRaw(item));
      });
      dataTableSource.value = list;
      loading.value = false;
    }
  );

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

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

  defineExpose({
    doRequest,
    setSelectedRowKeys,
  });

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

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

<style scoped lang="less">
  :deep(.ant-table-body) {
    height: auto !important;
  }
  :deep(.jeecg-basic-table .ant-table-wrapper .ant-table-title) {
    min-height: 0;
  }
  .jeecg-basic-table-row__striped {
    background: #97efff11 !important;
  }
</style>