mky-vent-base/src/views/vent/deviceManager/comment/warningTabel/DevicePointTable.vue

<template>
  <BasicModal
    ref="DeviceModalTable"
    v-bind="$attrs"
    @register="registerModal"
    title="选择关联设备预警点位"
    width="1000px"
    :showCancelBtn="false"
    :showOkBtn="false"
    :footer="null"
    :destroy-on-close="true"
  >
    <div>
      <a-button type="primary" @click="saveData"> 确定 </a-button>
    </div>
    <a-table
      v-if="refresh"
      :row-selection="{ selections: true, selectedRowKeys: selectedRowKeys, onSelect: onSelectChange }"
      :columns="columns"
      :dataSource="dataSource"
      :row-key="(record) => record.id"
      size="small"
    />
  </BasicModal>
</template>
<script lang="ts" setup>
  import { onMounted, ref, defineEmits, watch, nextTick } from 'vue';
  import { columns } from '../../pointTabel/point.data';
  import { BasicModal, useModalInner } from '/@/components/Modal';

  const DeviceModalTable = ref();
  const props = defineProps({
    dataSource: { type: Array, default: () => [] },
    selectionRowKeys: { type: Array, default: () => [] },
  });
  const emit = defineEmits(['reload', 'register']);

  const refresh = ref(true)
  const selectedRowKeys = ref<any[]>([]);
  const selectionRows = ref<any[]>([]);

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //重置表单
    setModalProps({ confirmLoading: false });
  });


  /**
   * 复选框选中事件
   * @param rowKeys
   * @param rows
   */
  function onSelectChange(record) {
    selectedRowKeys.value = [record['id']];
    selectionRows.value = [record];
  }

  const saveData = async () => {
    
    emit('reload', selectionRows.value);

    closeModal();
    
  };

  watch(() => props.selectionRowKeys, (newVal: any[]) => {
    selectedRowKeys.value = newVal
    refresh.value = false
    nextTick(() => {
      refresh.value = true
    })
  })


  onMounted(async () => {

  });

</script>
<style scoped lang="less"></style>