admin-vben/apps/web-antdv-next/src/views/mes/wm/arrivalnotice/components/line-select-dialog.vue

<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MesWmArrivalNoticeLineApi } from '#/api/mes/wm/arrivalnotice/line';

import { nextTick, ref } from 'vue';

import { DICT_TYPE } from '@vben/constants';

import { message, Modal } from 'antdv-next';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getArrivalNoticeLinePage } from '#/api/mes/wm/arrivalnotice/line';

const emit = defineEmits<{
  selected: [rows: MesWmArrivalNoticeLineApi.ArrivalNoticeLine[]];
}>();

const open = ref(false); // 弹窗是否打开
const noticeId = ref<number>(); // 所属通知单编号
const syncingSingleSelection = ref(false); // 是否同步单选勾选状态
const selectedRows = ref<MesWmArrivalNoticeLineApi.ArrivalNoticeLine[]>([]); // 已选行列表
const preSelectedIds = ref<number[]>([]); // 预选行编号列表

/** 表格字段 */
function useGridColumns(): VxeTableGridOptions<MesWmArrivalNoticeLineApi.ArrivalNoticeLine>['columns'] {
  return [
    {
      type: 'checkbox',
      width: 50,
    },
    {
      field: 'itemCode',
      title: '物料编码',
      minWidth: 120,
    },
    {
      field: 'itemName',
      title: '物料名称',
      minWidth: 140,
    },
    {
      field: 'specification',
      title: '规格型号',
      minWidth: 120,
    },
    {
      field: 'unitMeasureName',
      title: '单位',
      width: 80,
    },
    {
      field: 'arrivalQuantity',
      title: '到货数量',
      width: 100,
    },
    {
      field: 'iqcCheckFlag',
      title: '是否检验',
      width: 90,
      cellRender: {
        name: 'CellDict',
        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
      },
    },
    {
      field: 'qualifiedQuantity',
      title: '合格数量',
      width: 100,
    },
    {
      field: 'remark',
      title: '备注',
      minWidth: 120,
    },
  ];
}

/** 单选模式下同步 VXE 勾选状态 */
async function syncSingleSelection(
  row?: MesWmArrivalNoticeLineApi.ArrivalNoticeLine,
) {
  syncingSingleSelection.value = true;
  await nextTick();
  await gridApi.grid.clearCheckboxRow();
  if (row) {
    await gridApi.grid.setCheckboxRow(row, true);
  }
  await nextTick();
  syncingSingleSelection.value = false;
}

/** 处理勾选变化，只保留最后一条 */
async function handleCheckboxChange({
  checked,
  row,
}: {
  checked: boolean;
  row?: MesWmArrivalNoticeLineApi.ArrivalNoticeLine;
}) {
  if (syncingSingleSelection.value) {
    return;
  }
  const selected = checked && row ? [row] : [];
  selectedRows.value = selected;
  await syncSingleSelection(selected[0]);
}

/** 回显预选行 */
function applyPreSelection() {
  if (preSelectedIds.value.length === 0) {
    return;
  }
  const rows =
    gridApi.grid.getData() as MesWmArrivalNoticeLineApi.ArrivalNoticeLine[];
  for (const row of rows) {
    if (row.id && preSelectedIds.value.includes(row.id)) {
      gridApi.grid.setCheckboxRow(row, true);
      selectedRows.value = [row];
    }
  }
}

const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions: {
    columns: useGridColumns(),
    height: 460,
    keepSource: true,
    checkboxConfig: {
      highlight: true,
      reserve: true,
    },
    proxyConfig: {
      ajax: {
        query: async ({ page }) => {
          if (!noticeId.value) {
            return { list: [], total: 0 };
          }
          return await getArrivalNoticeLinePage({
            noticeId: noticeId.value,
            pageNo: page.currentPage,
            pageSize: page.pageSize,
          });
        },
      },
    },
    rowConfig: {
      keyField: 'id',
      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
    },
  } as VxeTableGridOptions<MesWmArrivalNoticeLineApi.ArrivalNoticeLine>,
  gridEvents: {
    checkboxChange: handleCheckboxChange,
  },
});

/** 打开行选择弹窗 */
async function openModal(id: number | undefined, selectedIds?: number[]) {
  open.value = true;
  noticeId.value = id;
  preSelectedIds.value = selectedIds || [];
  selectedRows.value = [];
  await nextTick();
  await gridApi.grid.clearCheckboxRow();
  await gridApi.query();
  await nextTick();
  applyPreSelection();
}

/** 关闭弹窗 */
async function closeModal() {
  open.value = false;
  selectedRows.value = [];
  await gridApi.grid.clearCheckboxRow();
}

/** 确认选择行 */
function handleConfirm() {
  if (selectedRows.value.length === 0) {
    message.warning('请选择一条数据');
    return;
  }
  emit('selected', [selectedRows.value[0]!]);
  open.value = false;
}

defineExpose({ open: openModal });
</script>

<template>
  <Modal
    v-model:open="open"
    title="到货通知单行选择"
    width="70%"
    :destroy-on-hidden="true"
    @cancel="closeModal"
    @ok="handleConfirm"
  >
    <Grid table-title="到货通知单行列表" />
  </Modal>
</template>