gaoluyang
8 天以前 b176162c23294d8d1bfb9f09cf6bb759efb0124a
src/views/erp/purchase/supplier/components/select-dialog.vue
ÎļþÃû´Ó src/views/stocktaking/plan/components/select-dialog.vue ÐÞ¸Ä
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MesWmStockTakingPlanApi } from '#/api/mes/wm/stocktaking/plan';
import type { ErpSupplierApi } from '#/api/erp/purchase/supplier';
import { nextTick, ref } from 'vue';
@@ -9,60 +9,53 @@
import { message, Modal } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getStockTakingPlanPage } from '#/api/mes/wm/stocktaking/plan';
import { getSupplierPage } from '#/api/erp/purchase/supplier';
import { useSelectGridColumns, useSelectGridFormSchema } from '../data';
defineOptions({ name: 'ErpSupplierSelectDialog' });
const emit = defineEmits<{
  selected: [rows: MesWmStockTakingPlanApi.StockTakingPlan[]];
  selected: [rows: ErpSupplierApi.Supplier[]];
}>();
const open = ref(false); // å¼¹çª—是否打开
const multiple = ref(true); // æ˜¯å¦å¤šé€‰
const selectedRows = ref<MesWmStockTakingPlanApi.StockTakingPlan[]>([]); // å·²é€‰ç›˜ç‚¹æ–¹æ¡ˆ
const preSelectedIds = ref<number[]>([]); // é¢„选盘点方案编号
const open = ref(false);
const multiple = ref(true);
const selectedRows = ref<ErpSupplierApi.Supplier[]>([]);
const preSelectedIds = ref<number[]>([]);
/** èŽ·å–å¤šé€‰è®°å½•ï¼ŒåŒ…å« VXE reserve è·¨é¡µè®°å½• */
function getTableRows() {
  return gridApi.grid.getTableData().fullData as ErpSupplierApi.Supplier[];
}
function getMultipleSelectedRows() {
  const selectedMap = new Map<
    number,
    MesWmStockTakingPlanApi.StockTakingPlan
  >();
  const selectedMap = new Map<number, ErpSupplierApi.Supplier>();
  const records = [
    ...(gridApi.grid.getCheckboxReserveRecords?.() ?? []),
    ...(gridApi.grid.getCheckboxRecords?.() ?? []),
  ] as MesWmStockTakingPlanApi.StockTakingPlan[];
  ] as ErpSupplierApi.Supplier[];
  records.forEach((row) => {
    if (row.id !== undefined && row.id !== null) {
      selectedMap.set(row.id, row);
    const rowId = row.id;
    if (rowId) {
      selectedMap.set(rowId, row);
    }
  });
  return [...selectedMap.values()];
}
/** å¤„理勾选变化 */
function handleCheckboxSelectChange() {
  selectedRows.value = getMultipleSelectedRows();
}
/** å¤„理单选变化 */
function handleRadioChange(row: MesWmStockTakingPlanApi.StockTakingPlan) {
function handleRadioChange(row: ErpSupplierApi.Supplier) {
  selectedRows.value = [row];
}
/** å¤šé€‰æ¨¡å¼ä¸‹åˆ‡æ¢è¡Œå‹¾é€‰ */
async function toggleMultipleRow(row: MesWmStockTakingPlanApi.StockTakingPlan) {
async function toggleMultipleRow(row: ErpSupplierApi.Supplier) {
  const selected = gridApi.grid.isCheckedByCheckboxRow(row);
  await gridApi.grid.setCheckboxRow(row, !selected);
  selectedRows.value = getMultipleSelectedRows();
}
/** å¤„理行双击:单选直接确认;多选切换勾选 */
async function handleCellDblclick({
  row,
}: {
  row: MesWmStockTakingPlanApi.StockTakingPlan;
}) {
async function handleCellDblclick({ row }: { row: ErpSupplierApi.Supplier }) {
  if (multiple.value) {
    await toggleMultipleRow(row);
    return;
@@ -72,13 +65,11 @@
  handleConfirm();
}
/** å›žæ˜¾é¢„选盘点方案 */
async function applyPreSelection() {
  if (preSelectedIds.value.length === 0) {
    return;
  }
  const rows =
    gridApi.grid.getData() as MesWmStockTakingPlanApi.StockTakingPlan[];
  const rows = getTableRows();
  for (const row of rows) {
    if (
      row.id === undefined ||
@@ -100,13 +91,56 @@
  }
}
function useSelectGridFormSchema() {
  return [
    {
      fieldName: 'name',
      label: '供应商名称',
      component: 'Input',
      componentProps: {
        placeholder: '请输入供应商名称',
        allowClear: true,
      },
    },
  ];
}
function useSelectGridColumns(multiple = false): VxeTableGridOptions<ErpSupplierApi.Supplier>['columns'] {
  return [
    {
      type: multiple ? 'checkbox' : 'radio',
      width: 50,
    },
    {
      field: 'name',
      title: '供应商名称',
      minWidth: 150,
    },
    {
      field: 'contact',
      title: '联系人',
      minWidth: 120,
    },
    {
      field: 'mobile',
      title: '手机号码',
      minWidth: 130,
    },
    {
      field: 'telephone',
      title: '联系电话',
      minWidth: 130,
    },
  ];
}
const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: useSelectGridFormSchema(),
  },
  gridOptions: {
    columns: useSelectGridColumns(true),
    height: 480,
    height: 520,
    keepSource: true,
    checkboxConfig: {
      highlight: true,
@@ -120,11 +154,10 @@
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
          return await getStockTakingPlanPage({
          return await getSupplierPage({
            pageNo: page.currentPage,
            pageSize: page.pageSize,
            ...formValues,
            // é€‰æ‹©å™¨åªå±•示启用状态的方案
            status: CommonStatusEnum.ENABLE,
          });
        },
@@ -138,22 +171,17 @@
      refresh: true,
      search: true,
    },
  } as VxeTableGridOptions<MesWmStockTakingPlanApi.StockTakingPlan>,
  } as VxeTableGridOptions<ErpSupplierApi.Supplier>,
  gridEvents: {
    cellDblclick: handleCellDblclick,
    checkboxAll: handleCheckboxSelectChange,
    checkboxChange: handleCheckboxSelectChange,
    radioChange: ({
      row,
    }: {
      row: MesWmStockTakingPlanApi.StockTakingPlan;
    }) => {
    radioChange: ({ row }: { row: ErpSupplierApi.Supplier }) => {
      handleRadioChange(row);
    },
  },
});
/** é‡ç½®æŸ¥è¯¢å’Œé€‰æ‹©çŠ¶æ€ */
async function resetQueryState() {
  selectedRows.value = [];
  await gridApi.grid.clearCheckboxRow();
@@ -162,7 +190,6 @@
  await gridApi.formApi.resetForm();
}
/** æ‰“开盘点方案选择弹窗 */
async function openModal(
  selectedIds?: number[],
  options?: { multiple?: boolean },
@@ -180,12 +207,11 @@
  await applyPreSelection();
}
/** å…³é—­å¼¹çª— */
function closeModal() {
async function closeModal() {
  open.value = false;
  await resetQueryState();
}
/** ç¡®è®¤é€‰æ‹© */
function handleConfirm() {
  const rows = multiple.value ? getMultipleSelectedRows() : selectedRows.value;
  if (rows.length === 0) {
@@ -202,12 +228,12 @@
<template>
  <Modal
    v-model:open="open"
    :destroy-on-close="true"
    title="盘点方案选择"
    title="供应商选择"
    width="70%"
    @cancel="closeModal"
    :destroy-on-close="true"
    @ok="handleConfirm"
    @cancel="closeModal"
  >
    <Grid table-title="盘点方案列表" />
    <Grid table-title="供应商列表" />
  </Modal>
</template>