fix(mes): 修复选择器筛选和单选弹窗

- 将 MES 通知单/工作站选择器的单选场景改为 radio
- 保留多选场景的 checkbox 与跨页 reserve 行为
- 修复生产工单选择器固定 status/type 参数丢失问题
- 修复空值选择器悬停时误展示清空图标的问题
- 按页面/操作步骤补充 ZSXQ 反馈与验收记录

关联星球：https://t.zsxq.com/dtLd8

apps/web-antd/src/views/mes/md/workstation/components/select-dialog.vue

@@ -30,69 +30,80 @@ const emit = defineEmits<{
 
 const open = ref(false); // 弹窗是否打开
 const multiple = ref(true); // 是否多选
-const syncingSingleSelection = ref(false); // 是否同步单选勾选状态
 const selectedRows = ref<MesMdWorkstationApi.Workstation[]>([]); // 已选工作站列表
 const preSelectedIds = ref<number[]>([]); // 预选工作站编号列表
 
-/** 单选模式下同步 VXE 勾选状态 */
+/** 获取多选记录，包含 VXE reserve 跨页记录 */
-async function syncSingleSelection(row?: MesMdWorkstationApi.Workstation) {
+function getMultipleSelectedRows() {
-  syncingSingleSelection.value = true;
+  const selectedMap = new Map<number, MesMdWorkstationApi.Workstation>();
-  await nextTick();
+  const records = [
-  await gridApi.grid.clearCheckboxRow();
+    ...(gridApi.grid.getCheckboxReserveRecords?.() ?? []),
-  if (row) {
+    ...(gridApi.grid.getCheckboxRecords?.() ?? []),
-    await gridApi.grid.setCheckboxRow(row, true);
+  ] as MesMdWorkstationApi.Workstation[];
-  }
+  records.forEach((row) => {
-  await nextTick();
+    const rowId = row.id;
-  syncingSingleSelection.value = false;
+    if (rowId !== undefined) {
+      selectedMap.set(rowId, row);
+    }
+  });
+  return [...selectedMap.values()];
 }
 
-/** 处理勾选变化，单选模式只保留最后一条 */
+/** 处理多选勾选变化 */
-async function handleCheckboxChange({
+function handleCheckboxSelectChange() {
-  checked,
+  if (!multiple.value) {
-  records,
+    return;
+  }
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理单选切换 */
+function handleRadioChange(row: MesMdWorkstationApi.Workstation) {
+  selectedRows.value = [row];
+}
+
+/** 多选模式下切换行勾选 */
+async function toggleMultipleRow(row: MesMdWorkstationApi.Workstation) {
+  const selected = gridApi.grid.isCheckedByCheckboxRow(row);
+  await gridApi.grid.setCheckboxRow(row, !selected);
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理行双击：单选直接确认，多选切换勾选 */
+async function handleCellDblclick({
   row,
 }: {
-  checked: boolean;
+  row: MesMdWorkstationApi.Workstation;
-  records: MesMdWorkstationApi.Workstation[];
-  row?: MesMdWorkstationApi.Workstation;
 }) {
-  if (syncingSingleSelection.value) {
+  if (multiple.value) {
+    await toggleMultipleRow(row);
     return;
   }
-  if (!multiple.value) {
+  selectedRows.value = [row];
-    const selected = checked && row ? [row] : [];
+  await gridApi.grid.setRadioRow(row);
-    selectedRows.value = selected;
+  handleConfirm();
-    await syncSingleSelection(selected[0]);
-    return;
-  }
-  selectedRows.value = records;
-}
-
-/** 处理全选变化 */
-function handleCheckboxAll({
-  records,
-}: {
-  records: MesMdWorkstationApi.Workstation[];
-}) {
-  if (syncingSingleSelection.value) {
-    return;
-  }
-  selectedRows.value = records;
 }
 
 /** 回显预选工作站 */
-function applyPreSelection() {
+async function applyPreSelection() {
   if (preSelectedIds.value.length === 0) {
     return;
   }
   const rows = gridApi.grid.getData() as MesMdWorkstationApi.Workstation[];
   for (const row of rows) {
-    if (row.id && preSelectedIds.value.includes(row.id)) {
+    if (row.id === undefined || !preSelectedIds.value.includes(row.id)) {
-      gridApi.grid.setCheckboxRow(row, true);
+      continue;
-      if (!multiple.value) {
-        selectedRows.value = [row];
-      }
     }
+    if (multiple.value) {
+      await gridApi.grid.setCheckboxRow(row, true);
+    } else {
+      await gridApi.grid.setRadioRow(row);
+      selectedRows.value = [row];
+      return;
+    }
+  }
+  if (multiple.value) {
+    selectedRows.value = getMultipleSelectedRows();
   }
 }
 
@@ -101,7 +112,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useWorkstationSelectGridFormSchema(),
   },
   gridOptions: {
-    columns: useWorkstationSelectGridColumns(),
+    columns: useWorkstationSelectGridColumns(true),
     height: 520,
     keepSource: true,
     checkboxConfig: {
@@ -109,6 +120,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       range: true,
       reserve: true,
     },
+    radioConfig: {
+      highlight: true,
+      trigger: 'row',
+    },
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
@@ -131,8 +146,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<MesMdWorkstationApi.Workstation>,
   gridEvents: {
-    checkboxAll: handleCheckboxAll,
+    cellDblclick: handleCellDblclick,
-    checkboxChange: handleCheckboxChange,
+    checkboxAll: handleCheckboxSelectChange,
+    checkboxChange: handleCheckboxSelectChange,
+    radioChange: ({ row }: { row: MesMdWorkstationApi.Workstation }) => {
+      handleRadioChange(row);
+    },
   },
 });
 
@@ -140,6 +159,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 async function resetQueryState() {
   selectedRows.value = [];
   await gridApi.grid.clearCheckboxRow();
+  await gridApi.grid.clearCheckboxReserve();
+  await gridApi.grid.clearRadioRow();
   await gridApi.formApi.resetForm();
   if (props.processId) {
     await gridApi.formApi.setFieldValue('processId', props.processId);
@@ -155,10 +176,13 @@ async function openModal(
   multiple.value = options?.multiple ?? true;
   preSelectedIds.value = selectedIds || [];
   await nextTick();
+  gridApi.setGridOptions({
+    columns: useWorkstationSelectGridColumns(multiple.value),
+  });
   await resetQueryState();
   await gridApi.query();
   await nextTick();
-  applyPreSelection();
+  await applyPreSelection();
 }
 
 /** 关闭工作站选择弹窗 */

apps/web-antd/src/views/mes/md/workstation/components/select.vue

@@ -44,6 +44,7 @@ const showClear = computed(
     props.allowClear &&
     !props.disabled &&
     hovering.value &&
+    props.modelValue !== undefined &&
     props.modelValue !== null,
 );
 

apps/web-antd/src/views/mes/md/workstation/data.ts

@@ -320,9 +320,11 @@ export function useWorkstationSelectGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 工作站选择弹窗的字段 */
-export function useWorkstationSelectGridColumns(): VxeTableGridOptions<MesMdWorkstationApi.Workstation>['columns'] {
+export function useWorkstationSelectGridColumns(
+  multiple = true,
+): VxeTableGridOptions<MesMdWorkstationApi.Workstation>['columns'] {
   return [
-    { type: 'checkbox', width: 50 },
+    { type: multiple ? 'checkbox' : 'radio', width: 50 },
     {
       field: 'code',
       title: '工作站编码',

apps/web-antd/src/views/mes/pro/workorder/components/select-dialog.vue

@@ -37,7 +37,7 @@ const selectedRows = ref<MesProWorkOrderApi.WorkOrder[]>([]); // 已选工单列
 const preSelectedIds = ref<number[]>([]); // 预选工单编号列表
 
 const typeTip = computed(() => {
-  if (props.type === null) {
+  if (props.type === undefined) {
     return '';
   }
   return `仅展示【${getDictLabel(DICT_TYPE.MES_PRO_WORK_ORDER_TYPE, props.type)}】类型的工单`;
@@ -61,6 +61,9 @@ function getMultipleSelectedRows() {
 
 /** 处理多选勾选变化 */
 function handleCheckboxSelectChange() {
+  if (!multiple.value) {
+    return;
+  }
   selectedRows.value = getMultipleSelectedRows();
 }
 
@@ -137,8 +140,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
           return await getWorkOrderPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
-            type: props.type,
             ...formValues,
+            ...(props.status === undefined ? {} : { status: props.status }),
+            ...(props.type === undefined ? {} : { type: props.type }),
           });
         },
       },
@@ -169,7 +173,7 @@ async function resetQueryState() {
   await gridApi.grid.clearCheckboxReserve();
   await gridApi.grid.clearRadioRow();
   await gridApi.formApi.resetForm();
-  if (props.status !== null) {
+  if (props.status !== undefined) {
     await gridApi.formApi.setFieldValue('status', props.status);
   }
 }

apps/web-antd/src/views/mes/pro/workorder/components/select.vue

@@ -49,6 +49,7 @@ const showClear = computed(
     props.allowClear &&
     !props.disabled &&
     hovering.value &&
+    props.modelValue !== undefined &&
     props.modelValue !== null,
 );
 

apps/web-antd/src/views/mes/wm/arrivalnotice/components/select-dialog.vue

@@ -19,7 +19,6 @@ const emit = defineEmits<{
 const open = ref(false); // 弹窗是否打开
 const multiple = ref(false); // 是否多选
 const fixedStatus = ref<number>(); // 固定状态筛选
-const syncingSingleSelection = ref(false); // 是否同步单选勾选状态
 const selectedRows = ref<MesWmArrivalNoticeApi.ArrivalNotice[]>([]); // 已选通知单列表
 const preSelectedIds = ref<number[]>([]); // 预选通知单编号列表
 
@@ -57,10 +56,12 @@ function useSearchSchema(): VbenFormSchema[] {
 }
 
 /** 表格字段 */
-function useGridColumns(): VxeTableGridOptions<MesWmArrivalNoticeApi.ArrivalNotice>['columns'] {
+function useGridColumns(
+  multipleSelect = false,
+): VxeTableGridOptions<MesWmArrivalNoticeApi.ArrivalNotice>['columns'] {
   return [
     {
-      type: 'checkbox',
+      type: multipleSelect ? 'checkbox' : 'radio',
       width: 50,
     },
     {
@@ -101,65 +102,77 @@ function useGridColumns(): VxeTableGridOptions<MesWmArrivalNoticeApi.ArrivalNoti
   ];
 }
 
-/** 单选模式下同步 VXE 勾选状态，避免跨页残留多选 */
+/** 获取多选记录，包含 VXE reserve 跨页记录 */
-async function syncSingleSelection(row?: MesWmArrivalNoticeApi.ArrivalNotice) {
+function getMultipleSelectedRows() {
-  syncingSingleSelection.value = true;
+  const selectedMap = new Map<number, MesWmArrivalNoticeApi.ArrivalNotice>();
-  await nextTick();
+  const records = [
-  await gridApi.grid.clearCheckboxRow();
+    ...(gridApi.grid.getCheckboxReserveRecords?.() ?? []),
-  if (row) {
+    ...(gridApi.grid.getCheckboxRecords?.() ?? []),
-    await gridApi.grid.setCheckboxRow(row, true);
+  ] as MesWmArrivalNoticeApi.ArrivalNotice[];
-  }
+  records.forEach((row) => {
-  await nextTick();
+    const rowId = row.id;
-  syncingSingleSelection.value = false;
+    if (rowId !== undefined) {
+      selectedMap.set(rowId, row);
+    }
+  });
+  return [...selectedMap.values()];
 }
 
-/** 处理勾选变化，单选模式只保留最后一条 */
+/** 处理多选勾选变化 */
-async function handleCheckboxChange({
+function handleCheckboxSelectChange() {
-  checked,
+  if (!multiple.value) {
-  records,
+    return;
+  }
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理单选切换 */
+function handleRadioChange(row: MesWmArrivalNoticeApi.ArrivalNotice) {
+  selectedRows.value = [row];
+}
+
+/** 多选模式下切换行勾选 */
+async function toggleMultipleRow(row: MesWmArrivalNoticeApi.ArrivalNotice) {
+  const selected = gridApi.grid.isCheckedByCheckboxRow(row);
+  await gridApi.grid.setCheckboxRow(row, !selected);
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理行双击：单选直接确认，多选切换勾选 */
+async function handleCellDblclick({
   row,
 }: {
-  checked: boolean;
+  row: MesWmArrivalNoticeApi.ArrivalNotice;
-  records: MesWmArrivalNoticeApi.ArrivalNotice[];
-  row?: MesWmArrivalNoticeApi.ArrivalNotice;
 }) {
-  if (syncingSingleSelection.value) {
+  if (multiple.value) {
+    await toggleMultipleRow(row);
     return;
   }
-  if (!multiple.value) {
+  selectedRows.value = [row];
-    const selected = checked && row ? [row] : [];
+  await gridApi.grid.setRadioRow(row);
-    selectedRows.value = selected;
+  handleConfirm();
-    await syncSingleSelection(selected[0]);
-    return;
-  }
-  selectedRows.value = records;
-}
-
-/** 处理全选变化 */
-function handleCheckboxAll({
-  records,
-}: {
-  records: MesWmArrivalNoticeApi.ArrivalNotice[];
-}) {
-  if (syncingSingleSelection.value) {
-    return;
-  }
-  selectedRows.value = records;
 }
 
 /** 回显预选通知单 */
-function applyPreSelection() {
+async function applyPreSelection() {
   if (preSelectedIds.value.length === 0) {
     return;
   }
   const rows = gridApi.grid.getData() as MesWmArrivalNoticeApi.ArrivalNotice[];
   for (const row of rows) {
-    if (row.id && preSelectedIds.value.includes(row.id)) {
+    if (row.id === undefined || !preSelectedIds.value.includes(row.id)) {
-      gridApi.grid.setCheckboxRow(row, true);
+      continue;
-      if (!multiple.value) {
-        selectedRows.value = [row];
-      }
     }
+    if (multiple.value) {
+      await gridApi.grid.setCheckboxRow(row, true);
+    } else {
+      await gridApi.grid.setRadioRow(row);
+      selectedRows.value = [row];
+      return;
+    }
+  }
+  if (multiple.value) {
+    selectedRows.value = getMultipleSelectedRows();
   }
 }
 
@@ -168,7 +181,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useSearchSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(),
+    columns: useGridColumns(false),
     height: 520,
     keepSource: true,
     checkboxConfig: {
@@ -176,6 +189,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       range: true,
       reserve: true,
     },
+    radioConfig: {
+      highlight: true,
+      trigger: 'row',
+    },
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
@@ -198,8 +215,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<MesWmArrivalNoticeApi.ArrivalNotice>,
   gridEvents: {
-    checkboxAll: handleCheckboxAll,
+    cellDblclick: handleCellDblclick,
-    checkboxChange: handleCheckboxChange,
+    checkboxAll: handleCheckboxSelectChange,
+    checkboxChange: handleCheckboxSelectChange,
+    radioChange: ({ row }: { row: MesWmArrivalNoticeApi.ArrivalNotice }) => {
+      handleRadioChange(row);
+    },
   },
 });
 
@@ -207,6 +228,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 async function resetQueryState() {
   selectedRows.value = [];
   await gridApi.grid.clearCheckboxRow();
+  await gridApi.grid.clearCheckboxReserve();
+  await gridApi.grid.clearRadioRow();
   await gridApi.formApi.resetForm();
 }
 
@@ -220,10 +243,13 @@ async function openModal(
   fixedStatus.value = options?.status;
   preSelectedIds.value = selectedIds || [];
   await nextTick();
+  gridApi.setGridOptions({
+    columns: useGridColumns(multiple.value),
+  });
   await resetQueryState();
   await gridApi.query();
   await nextTick();
-  applyPreSelection();
+  await applyPreSelection();
 }
 
 /** 关闭通知单选择弹窗 */

apps/web-antd/src/views/mes/wm/arrivalnotice/components/select.vue

@@ -47,6 +47,7 @@ const showClear = computed(
     props.allowClear &&
     !props.disabled &&
     hovering.value &&
+    props.modelValue !== undefined &&
     props.modelValue !== null,
 );
 

apps/web-antd/src/views/mes/wm/salesnotice/components/select-dialog.vue

@@ -21,7 +21,6 @@ const emit = defineEmits<{
 const open = ref(false); // 弹窗是否打开
 const multiple = ref(false); // 是否多选
 const fixedStatus = ref<number>(); // 固定状态筛选
-const syncingSingleSelection = ref(false); // 是否同步单选勾选状态
 const selectedRows = ref<MesWmSalesNoticeApi.SalesNotice[]>([]); // 已选通知单列表
 const preSelectedIds = ref<number[]>([]); // 预选通知单编号列表
 
@@ -84,10 +83,12 @@ function useSearchSchema(hasFixedStatus: boolean): VbenFormSchema[] {
 }
 
 /** 表格字段 */
-function useGridColumns(): VxeTableGridOptions<MesWmSalesNoticeApi.SalesNotice>['columns'] {
+function useGridColumns(
+  multipleSelect = false,
+): VxeTableGridOptions<MesWmSalesNoticeApi.SalesNotice>['columns'] {
   return [
     {
-      type: 'checkbox',
+      type: multipleSelect ? 'checkbox' : 'radio',
       width: 50,
     },
     {
@@ -128,65 +129,77 @@ function useGridColumns(): VxeTableGridOptions<MesWmSalesNoticeApi.SalesNotice>[
   ];
 }
 
-/** 单选模式下同步 VXE 勾选状态，避免跨页残留多选 */
+/** 获取多选记录，包含 VXE reserve 跨页记录 */
-async function syncSingleSelection(row?: MesWmSalesNoticeApi.SalesNotice) {
+function getMultipleSelectedRows() {
-  syncingSingleSelection.value = true;
+  const selectedMap = new Map<number, MesWmSalesNoticeApi.SalesNotice>();
-  await nextTick();
+  const records = [
-  await gridApi.grid.clearCheckboxRow();
+    ...(gridApi.grid.getCheckboxReserveRecords?.() ?? []),
-  if (row) {
+    ...(gridApi.grid.getCheckboxRecords?.() ?? []),
-    await gridApi.grid.setCheckboxRow(row, true);
+  ] as MesWmSalesNoticeApi.SalesNotice[];
-  }
+  records.forEach((row) => {
-  await nextTick();
+    const rowId = row.id;
-  syncingSingleSelection.value = false;
+    if (rowId !== undefined) {
+      selectedMap.set(rowId, row);
+    }
+  });
+  return [...selectedMap.values()];
 }
 
-/** 处理勾选变化，单选模式只保留最后一条 */
+/** 处理多选勾选变化 */
-async function handleCheckboxChange({
+function handleCheckboxSelectChange() {
-  checked,
+  if (!multiple.value) {
-  records,
+    return;
+  }
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理单选切换 */
+function handleRadioChange(row: MesWmSalesNoticeApi.SalesNotice) {
+  selectedRows.value = [row];
+}
+
+/** 多选模式下切换行勾选 */
+async function toggleMultipleRow(row: MesWmSalesNoticeApi.SalesNotice) {
+  const selected = gridApi.grid.isCheckedByCheckboxRow(row);
+  await gridApi.grid.setCheckboxRow(row, !selected);
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理行双击：单选直接确认，多选切换勾选 */
+async function handleCellDblclick({
   row,
 }: {
-  checked: boolean;
+  row: MesWmSalesNoticeApi.SalesNotice;
-  records: MesWmSalesNoticeApi.SalesNotice[];
-  row?: MesWmSalesNoticeApi.SalesNotice;
 }) {
-  if (syncingSingleSelection.value) {
+  if (multiple.value) {
+    await toggleMultipleRow(row);
     return;
   }
-  if (!multiple.value) {
+  selectedRows.value = [row];
-    const selected = checked && row ? [row] : [];
+  await gridApi.grid.setRadioRow(row);
-    selectedRows.value = selected;
+  handleConfirm();
-    await syncSingleSelection(selected[0]);
-    return;
-  }
-  selectedRows.value = records;
-}
-
-/** 处理全选变化 */
-function handleCheckboxAll({
-  records,
-}: {
-  records: MesWmSalesNoticeApi.SalesNotice[];
-}) {
-  if (syncingSingleSelection.value) {
-    return;
-  }
-  selectedRows.value = records;
 }
 
 /** 回显预选通知单 */
-function applyPreSelection() {
+async function applyPreSelection() {
   if (preSelectedIds.value.length === 0) {
     return;
   }
   const rows = gridApi.grid.getData() as MesWmSalesNoticeApi.SalesNotice[];
   for (const row of rows) {
-    if (row.id && preSelectedIds.value.includes(row.id)) {
+    if (row.id === undefined || !preSelectedIds.value.includes(row.id)) {
-      gridApi.grid.setCheckboxRow(row, true);
+      continue;
-      if (!multiple.value) {
-        selectedRows.value = [row];
-      }
     }
+    if (multiple.value) {
+      await gridApi.grid.setCheckboxRow(row, true);
+    } else {
+      await gridApi.grid.setRadioRow(row);
+      selectedRows.value = [row];
+      return;
+    }
+  }
+  if (multiple.value) {
+    selectedRows.value = getMultipleSelectedRows();
   }
 }
 
@@ -195,7 +208,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useSearchSchema(false),
   },
   gridOptions: {
-    columns: useGridColumns(),
+    columns: useGridColumns(false),
     height: 520,
     keepSource: true,
     checkboxConfig: {
@@ -203,6 +216,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       range: true,
       reserve: true,
     },
+    radioConfig: {
+      highlight: true,
+      trigger: 'row',
+    },
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
@@ -226,8 +243,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<MesWmSalesNoticeApi.SalesNotice>,
   gridEvents: {
-    checkboxAll: handleCheckboxAll,
+    cellDblclick: handleCellDblclick,
-    checkboxChange: handleCheckboxChange,
+    checkboxAll: handleCheckboxSelectChange,
+    checkboxChange: handleCheckboxSelectChange,
+    radioChange: ({ row }: { row: MesWmSalesNoticeApi.SalesNotice }) => {
+      handleRadioChange(row);
+    },
   },
 });
 
@@ -235,6 +256,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 async function resetQueryState() {
   selectedRows.value = [];
   await gridApi.grid.clearCheckboxRow();
+  await gridApi.grid.clearCheckboxReserve();
+  await gridApi.grid.clearRadioRow();
   await gridApi.formApi.resetForm();
 }
 
@@ -249,13 +272,16 @@ async function openModal(
   preSelectedIds.value = selectedIds || [];
   // 固定状态时隐藏状态搜索项，未固定时展示
   gridApi.formApi.setState({
-    schema: useSearchSchema(fixedStatus.value !== null),
+    schema: useSearchSchema(fixedStatus.value !== undefined),
   });
   await nextTick();
+  gridApi.setGridOptions({
+    columns: useGridColumns(multiple.value),
+  });
   await resetQueryState();
   await gridApi.query();
   await nextTick();
-  applyPreSelection();
+  await applyPreSelection();
 }
 
 /** 关闭通知单选择弹窗 */

apps/web-antd/src/views/mes/wm/salesnotice/components/select.vue

@@ -47,6 +47,7 @@ const showClear = computed(
     props.allowClear &&
     !props.disabled &&
     hovering.value &&
+    props.modelValue !== undefined &&
     props.modelValue !== null,
 );
 

apps/web-antdv-next/src/views/mes/md/workstation/components/select-dialog.vue

@@ -30,69 +30,80 @@ const emit = defineEmits<{
 
 const open = ref(false); // 弹窗是否打开
 const multiple = ref(true); // 是否多选
-const syncingSingleSelection = ref(false); // 是否同步单选勾选状态
 const selectedRows = ref<MesMdWorkstationApi.Workstation[]>([]); // 已选工作站列表
 const preSelectedIds = ref<number[]>([]); // 预选工作站编号列表
 
-/** 单选模式下同步 VXE 勾选状态 */
+/** 获取多选记录，包含 VXE reserve 跨页记录 */
-async function syncSingleSelection(row?: MesMdWorkstationApi.Workstation) {
+function getMultipleSelectedRows() {
-  syncingSingleSelection.value = true;
+  const selectedMap = new Map<number, MesMdWorkstationApi.Workstation>();
-  await nextTick();
+  const records = [
-  await gridApi.grid.clearCheckboxRow();
+    ...(gridApi.grid.getCheckboxReserveRecords?.() ?? []),
-  if (row) {
+    ...(gridApi.grid.getCheckboxRecords?.() ?? []),
-    await gridApi.grid.setCheckboxRow(row, true);
+  ] as MesMdWorkstationApi.Workstation[];
-  }
+  records.forEach((row) => {
-  await nextTick();
+    const rowId = row.id;
-  syncingSingleSelection.value = false;
+    if (rowId !== undefined) {
+      selectedMap.set(rowId, row);
+    }
+  });
+  return [...selectedMap.values()];
 }
 
-/** 处理勾选变化，单选模式只保留最后一条 */
+/** 处理多选勾选变化 */
-async function handleCheckboxChange({
+function handleCheckboxSelectChange() {
-  checked,
+  if (!multiple.value) {
-  records,
+    return;
+  }
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理单选切换 */
+function handleRadioChange(row: MesMdWorkstationApi.Workstation) {
+  selectedRows.value = [row];
+}
+
+/** 多选模式下切换行勾选 */
+async function toggleMultipleRow(row: MesMdWorkstationApi.Workstation) {
+  const selected = gridApi.grid.isCheckedByCheckboxRow(row);
+  await gridApi.grid.setCheckboxRow(row, !selected);
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理行双击：单选直接确认，多选切换勾选 */
+async function handleCellDblclick({
   row,
 }: {
-  checked: boolean;
+  row: MesMdWorkstationApi.Workstation;
-  records: MesMdWorkstationApi.Workstation[];
-  row?: MesMdWorkstationApi.Workstation;
 }) {
-  if (syncingSingleSelection.value) {
+  if (multiple.value) {
+    await toggleMultipleRow(row);
     return;
   }
-  if (!multiple.value) {
+  selectedRows.value = [row];
-    const selected = checked && row ? [row] : [];
+  await gridApi.grid.setRadioRow(row);
-    selectedRows.value = selected;
+  handleConfirm();
-    await syncSingleSelection(selected[0]);
-    return;
-  }
-  selectedRows.value = records;
-}
-
-/** 处理全选变化 */
-function handleCheckboxAll({
-  records,
-}: {
-  records: MesMdWorkstationApi.Workstation[];
-}) {
-  if (syncingSingleSelection.value) {
-    return;
-  }
-  selectedRows.value = records;
 }
 
 /** 回显预选工作站 */
-function applyPreSelection() {
+async function applyPreSelection() {
   if (preSelectedIds.value.length === 0) {
     return;
   }
   const rows = gridApi.grid.getData() as MesMdWorkstationApi.Workstation[];
   for (const row of rows) {
-    if (row.id && preSelectedIds.value.includes(row.id)) {
+    if (row.id === undefined || !preSelectedIds.value.includes(row.id)) {
-      gridApi.grid.setCheckboxRow(row, true);
+      continue;
-      if (!multiple.value) {
-        selectedRows.value = [row];
-      }
     }
+    if (multiple.value) {
+      await gridApi.grid.setCheckboxRow(row, true);
+    } else {
+      await gridApi.grid.setRadioRow(row);
+      selectedRows.value = [row];
+      return;
+    }
+  }
+  if (multiple.value) {
+    selectedRows.value = getMultipleSelectedRows();
   }
 }
 
@@ -101,7 +112,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useWorkstationSelectGridFormSchema(),
   },
   gridOptions: {
-    columns: useWorkstationSelectGridColumns(),
+    columns: useWorkstationSelectGridColumns(true),
     height: 520,
     keepSource: true,
     checkboxConfig: {
@@ -109,6 +120,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       range: true,
       reserve: true,
     },
+    radioConfig: {
+      highlight: true,
+      trigger: 'row',
+    },
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
@@ -131,8 +146,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<MesMdWorkstationApi.Workstation>,
   gridEvents: {
-    checkboxAll: handleCheckboxAll,
+    cellDblclick: handleCellDblclick,
-    checkboxChange: handleCheckboxChange,
+    checkboxAll: handleCheckboxSelectChange,
+    checkboxChange: handleCheckboxSelectChange,
+    radioChange: ({ row }: { row: MesMdWorkstationApi.Workstation }) => {
+      handleRadioChange(row);
+    },
   },
 });
 
@@ -140,6 +159,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 async function resetQueryState() {
   selectedRows.value = [];
   await gridApi.grid.clearCheckboxRow();
+  await gridApi.grid.clearCheckboxReserve();
+  await gridApi.grid.clearRadioRow();
   await gridApi.formApi.resetForm();
   if (props.processId) {
     await gridApi.formApi.setFieldValue('processId', props.processId);
@@ -155,10 +176,13 @@ async function openModal(
   multiple.value = options?.multiple ?? true;
   preSelectedIds.value = selectedIds || [];
   await nextTick();
+  gridApi.setGridOptions({
+    columns: useWorkstationSelectGridColumns(multiple.value),
+  });
   await resetQueryState();
   await gridApi.query();
   await nextTick();
-  applyPreSelection();
+  await applyPreSelection();
 }
 
 /** 关闭工作站选择弹窗 */

apps/web-antdv-next/src/views/mes/md/workstation/components/select.vue

@@ -44,6 +44,7 @@ const showClear = computed(
     props.allowClear &&
     !props.disabled &&
     hovering.value &&
+    props.modelValue !== undefined &&
     props.modelValue !== null,
 );
 

apps/web-antdv-next/src/views/mes/md/workstation/data.ts

@@ -320,9 +320,11 @@ export function useWorkstationSelectGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 工作站选择弹窗的字段 */
-export function useWorkstationSelectGridColumns(): VxeTableGridOptions<MesMdWorkstationApi.Workstation>['columns'] {
+export function useWorkstationSelectGridColumns(
+  multiple = true,
+): VxeTableGridOptions<MesMdWorkstationApi.Workstation>['columns'] {
   return [
-    { type: 'checkbox', width: 50 },
+    { type: multiple ? 'checkbox' : 'radio', width: 50 },
     {
       field: 'code',
       title: '工作站编码',

apps/web-antdv-next/src/views/mes/pro/workorder/components/select-dialog.vue

@@ -37,7 +37,7 @@ const selectedRows = ref<MesProWorkOrderApi.WorkOrder[]>([]); // 已选工单列
 const preSelectedIds = ref<number[]>([]); // 预选工单编号列表
 
 const typeTip = computed(() => {
-  if (props.type === null) {
+  if (props.type === undefined) {
     return '';
   }
   return `仅展示【${getDictLabel(DICT_TYPE.MES_PRO_WORK_ORDER_TYPE, props.type)}】类型的工单`;
@@ -61,6 +61,9 @@ function getMultipleSelectedRows() {
 
 /** 处理多选勾选变化 */
 function handleCheckboxSelectChange() {
+  if (!multiple.value) {
+    return;
+  }
   selectedRows.value = getMultipleSelectedRows();
 }
 
@@ -137,8 +140,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
           return await getWorkOrderPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
-            type: props.type,
             ...formValues,
+            ...(props.status === undefined ? {} : { status: props.status }),
+            ...(props.type === undefined ? {} : { type: props.type }),
           });
         },
       },
@@ -169,7 +173,7 @@ async function resetQueryState() {
   await gridApi.grid.clearCheckboxReserve();
   await gridApi.grid.clearRadioRow();
   await gridApi.formApi.resetForm();
-  if (props.status !== null) {
+  if (props.status !== undefined) {
     await gridApi.formApi.setFieldValue('status', props.status);
   }
 }

apps/web-antdv-next/src/views/mes/pro/workorder/components/select.vue

@@ -49,6 +49,7 @@ const showClear = computed(
     props.allowClear &&
     !props.disabled &&
     hovering.value &&
+    props.modelValue !== undefined &&
     props.modelValue !== null,
 );
 

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

@@ -19,7 +19,6 @@ const emit = defineEmits<{
 const open = ref(false); // 弹窗是否打开
 const multiple = ref(false); // 是否多选
 const fixedStatus = ref<number>(); // 固定状态筛选
-const syncingSingleSelection = ref(false); // 是否同步单选勾选状态
 const selectedRows = ref<MesWmArrivalNoticeApi.ArrivalNotice[]>([]); // 已选通知单列表
 const preSelectedIds = ref<number[]>([]); // 预选通知单编号列表
 
@@ -57,10 +56,12 @@ function useSearchSchema(): VbenFormSchema[] {
 }
 
 /** 表格字段 */
-function useGridColumns(): VxeTableGridOptions<MesWmArrivalNoticeApi.ArrivalNotice>['columns'] {
+function useGridColumns(
+  multipleSelect = false,
+): VxeTableGridOptions<MesWmArrivalNoticeApi.ArrivalNotice>['columns'] {
   return [
     {
-      type: 'checkbox',
+      type: multipleSelect ? 'checkbox' : 'radio',
       width: 50,
     },
     {
@@ -101,65 +102,77 @@ function useGridColumns(): VxeTableGridOptions<MesWmArrivalNoticeApi.ArrivalNoti
   ];
 }
 
-/** 单选模式下同步 VXE 勾选状态，避免跨页残留多选 */
+/** 获取多选记录，包含 VXE reserve 跨页记录 */
-async function syncSingleSelection(row?: MesWmArrivalNoticeApi.ArrivalNotice) {
+function getMultipleSelectedRows() {
-  syncingSingleSelection.value = true;
+  const selectedMap = new Map<number, MesWmArrivalNoticeApi.ArrivalNotice>();
-  await nextTick();
+  const records = [
-  await gridApi.grid.clearCheckboxRow();
+    ...(gridApi.grid.getCheckboxReserveRecords?.() ?? []),
-  if (row) {
+    ...(gridApi.grid.getCheckboxRecords?.() ?? []),
-    await gridApi.grid.setCheckboxRow(row, true);
+  ] as MesWmArrivalNoticeApi.ArrivalNotice[];
-  }
+  records.forEach((row) => {
-  await nextTick();
+    const rowId = row.id;
-  syncingSingleSelection.value = false;
+    if (rowId !== undefined) {
+      selectedMap.set(rowId, row);
+    }
+  });
+  return [...selectedMap.values()];
 }
 
-/** 处理勾选变化，单选模式只保留最后一条 */
+/** 处理多选勾选变化 */
-async function handleCheckboxChange({
+function handleCheckboxSelectChange() {
-  checked,
+  if (!multiple.value) {
-  records,
+    return;
+  }
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理单选切换 */
+function handleRadioChange(row: MesWmArrivalNoticeApi.ArrivalNotice) {
+  selectedRows.value = [row];
+}
+
+/** 多选模式下切换行勾选 */
+async function toggleMultipleRow(row: MesWmArrivalNoticeApi.ArrivalNotice) {
+  const selected = gridApi.grid.isCheckedByCheckboxRow(row);
+  await gridApi.grid.setCheckboxRow(row, !selected);
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理行双击：单选直接确认，多选切换勾选 */
+async function handleCellDblclick({
   row,
 }: {
-  checked: boolean;
+  row: MesWmArrivalNoticeApi.ArrivalNotice;
-  records: MesWmArrivalNoticeApi.ArrivalNotice[];
-  row?: MesWmArrivalNoticeApi.ArrivalNotice;
 }) {
-  if (syncingSingleSelection.value) {
+  if (multiple.value) {
+    await toggleMultipleRow(row);
     return;
   }
-  if (!multiple.value) {
+  selectedRows.value = [row];
-    const selected = checked && row ? [row] : [];
+  await gridApi.grid.setRadioRow(row);
-    selectedRows.value = selected;
+  handleConfirm();
-    await syncSingleSelection(selected[0]);
-    return;
-  }
-  selectedRows.value = records;
-}
-
-/** 处理全选变化 */
-function handleCheckboxAll({
-  records,
-}: {
-  records: MesWmArrivalNoticeApi.ArrivalNotice[];
-}) {
-  if (syncingSingleSelection.value) {
-    return;
-  }
-  selectedRows.value = records;
 }
 
 /** 回显预选通知单 */
-function applyPreSelection() {
+async function applyPreSelection() {
   if (preSelectedIds.value.length === 0) {
     return;
   }
   const rows = gridApi.grid.getData() as MesWmArrivalNoticeApi.ArrivalNotice[];
   for (const row of rows) {
-    if (row.id && preSelectedIds.value.includes(row.id)) {
+    if (row.id === undefined || !preSelectedIds.value.includes(row.id)) {
-      gridApi.grid.setCheckboxRow(row, true);
+      continue;
-      if (!multiple.value) {
-        selectedRows.value = [row];
-      }
     }
+    if (multiple.value) {
+      await gridApi.grid.setCheckboxRow(row, true);
+    } else {
+      await gridApi.grid.setRadioRow(row);
+      selectedRows.value = [row];
+      return;
+    }
+  }
+  if (multiple.value) {
+    selectedRows.value = getMultipleSelectedRows();
   }
 }
 
@@ -168,7 +181,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useSearchSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(),
+    columns: useGridColumns(false),
     height: 520,
     keepSource: true,
     checkboxConfig: {
@@ -176,6 +189,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       range: true,
       reserve: true,
     },
+    radioConfig: {
+      highlight: true,
+      trigger: 'row',
+    },
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
@@ -198,8 +215,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<MesWmArrivalNoticeApi.ArrivalNotice>,
   gridEvents: {
-    checkboxAll: handleCheckboxAll,
+    cellDblclick: handleCellDblclick,
-    checkboxChange: handleCheckboxChange,
+    checkboxAll: handleCheckboxSelectChange,
+    checkboxChange: handleCheckboxSelectChange,
+    radioChange: ({ row }: { row: MesWmArrivalNoticeApi.ArrivalNotice }) => {
+      handleRadioChange(row);
+    },
   },
 });
 
@@ -207,6 +228,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 async function resetQueryState() {
   selectedRows.value = [];
   await gridApi.grid.clearCheckboxRow();
+  await gridApi.grid.clearCheckboxReserve();
+  await gridApi.grid.clearRadioRow();
   await gridApi.formApi.resetForm();
 }
 
@@ -220,10 +243,13 @@ async function openModal(
   fixedStatus.value = options?.status;
   preSelectedIds.value = selectedIds || [];
   await nextTick();
+  gridApi.setGridOptions({
+    columns: useGridColumns(multiple.value),
+  });
   await resetQueryState();
   await gridApi.query();
   await nextTick();
-  applyPreSelection();
+  await applyPreSelection();
 }
 
 /** 关闭通知单选择弹窗 */

apps/web-antdv-next/src/views/mes/wm/arrivalnotice/components/select.vue

@@ -47,6 +47,7 @@ const showClear = computed(
     props.allowClear &&
     !props.disabled &&
     hovering.value &&
+    props.modelValue !== undefined &&
     props.modelValue !== null,
 );
 

apps/web-antdv-next/src/views/mes/wm/salesnotice/components/select-dialog.vue

@@ -21,7 +21,6 @@ const emit = defineEmits<{
 const open = ref(false); // 弹窗是否打开
 const multiple = ref(false); // 是否多选
 const fixedStatus = ref<number>(); // 固定状态筛选
-const syncingSingleSelection = ref(false); // 是否同步单选勾选状态
 const selectedRows = ref<MesWmSalesNoticeApi.SalesNotice[]>([]); // 已选通知单列表
 const preSelectedIds = ref<number[]>([]); // 预选通知单编号列表
 
@@ -84,10 +83,12 @@ function useSearchSchema(hasFixedStatus: boolean): VbenFormSchema[] {
 }
 
 /** 表格字段 */
-function useGridColumns(): VxeTableGridOptions<MesWmSalesNoticeApi.SalesNotice>['columns'] {
+function useGridColumns(
+  multipleSelect = false,
+): VxeTableGridOptions<MesWmSalesNoticeApi.SalesNotice>['columns'] {
   return [
     {
-      type: 'checkbox',
+      type: multipleSelect ? 'checkbox' : 'radio',
       width: 50,
     },
     {
@@ -128,65 +129,77 @@ function useGridColumns(): VxeTableGridOptions<MesWmSalesNoticeApi.SalesNotice>[
   ];
 }
 
-/** 单选模式下同步 VXE 勾选状态，避免跨页残留多选 */
+/** 获取多选记录，包含 VXE reserve 跨页记录 */
-async function syncSingleSelection(row?: MesWmSalesNoticeApi.SalesNotice) {
+function getMultipleSelectedRows() {
-  syncingSingleSelection.value = true;
+  const selectedMap = new Map<number, MesWmSalesNoticeApi.SalesNotice>();
-  await nextTick();
+  const records = [
-  await gridApi.grid.clearCheckboxRow();
+    ...(gridApi.grid.getCheckboxReserveRecords?.() ?? []),
-  if (row) {
+    ...(gridApi.grid.getCheckboxRecords?.() ?? []),
-    await gridApi.grid.setCheckboxRow(row, true);
+  ] as MesWmSalesNoticeApi.SalesNotice[];
-  }
+  records.forEach((row) => {
-  await nextTick();
+    const rowId = row.id;
-  syncingSingleSelection.value = false;
+    if (rowId !== undefined) {
+      selectedMap.set(rowId, row);
+    }
+  });
+  return [...selectedMap.values()];
 }
 
-/** 处理勾选变化，单选模式只保留最后一条 */
+/** 处理多选勾选变化 */
-async function handleCheckboxChange({
+function handleCheckboxSelectChange() {
-  checked,
+  if (!multiple.value) {
-  records,
+    return;
+  }
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理单选切换 */
+function handleRadioChange(row: MesWmSalesNoticeApi.SalesNotice) {
+  selectedRows.value = [row];
+}
+
+/** 多选模式下切换行勾选 */
+async function toggleMultipleRow(row: MesWmSalesNoticeApi.SalesNotice) {
+  const selected = gridApi.grid.isCheckedByCheckboxRow(row);
+  await gridApi.grid.setCheckboxRow(row, !selected);
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理行双击：单选直接确认，多选切换勾选 */
+async function handleCellDblclick({
   row,
 }: {
-  checked: boolean;
+  row: MesWmSalesNoticeApi.SalesNotice;
-  records: MesWmSalesNoticeApi.SalesNotice[];
-  row?: MesWmSalesNoticeApi.SalesNotice;
 }) {
-  if (syncingSingleSelection.value) {
+  if (multiple.value) {
+    await toggleMultipleRow(row);
     return;
   }
-  if (!multiple.value) {
+  selectedRows.value = [row];
-    const selected = checked && row ? [row] : [];
+  await gridApi.grid.setRadioRow(row);
-    selectedRows.value = selected;
+  handleConfirm();
-    await syncSingleSelection(selected[0]);
-    return;
-  }
-  selectedRows.value = records;
-}
-
-/** 处理全选变化 */
-function handleCheckboxAll({
-  records,
-}: {
-  records: MesWmSalesNoticeApi.SalesNotice[];
-}) {
-  if (syncingSingleSelection.value) {
-    return;
-  }
-  selectedRows.value = records;
 }
 
 /** 回显预选通知单 */
-function applyPreSelection() {
+async function applyPreSelection() {
   if (preSelectedIds.value.length === 0) {
     return;
   }
   const rows = gridApi.grid.getData() as MesWmSalesNoticeApi.SalesNotice[];
   for (const row of rows) {
-    if (row.id && preSelectedIds.value.includes(row.id)) {
+    if (row.id === undefined || !preSelectedIds.value.includes(row.id)) {
-      gridApi.grid.setCheckboxRow(row, true);
+      continue;
-      if (!multiple.value) {
-        selectedRows.value = [row];
-      }
     }
+    if (multiple.value) {
+      await gridApi.grid.setCheckboxRow(row, true);
+    } else {
+      await gridApi.grid.setRadioRow(row);
+      selectedRows.value = [row];
+      return;
+    }
+  }
+  if (multiple.value) {
+    selectedRows.value = getMultipleSelectedRows();
   }
 }
 
@@ -195,7 +208,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useSearchSchema(false),
   },
   gridOptions: {
-    columns: useGridColumns(),
+    columns: useGridColumns(false),
     height: 520,
     keepSource: true,
     checkboxConfig: {
@@ -203,6 +216,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       range: true,
       reserve: true,
     },
+    radioConfig: {
+      highlight: true,
+      trigger: 'row',
+    },
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
@@ -226,8 +243,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<MesWmSalesNoticeApi.SalesNotice>,
   gridEvents: {
-    checkboxAll: handleCheckboxAll,
+    cellDblclick: handleCellDblclick,
-    checkboxChange: handleCheckboxChange,
+    checkboxAll: handleCheckboxSelectChange,
+    checkboxChange: handleCheckboxSelectChange,
+    radioChange: ({ row }: { row: MesWmSalesNoticeApi.SalesNotice }) => {
+      handleRadioChange(row);
+    },
   },
 });
 
@@ -235,6 +256,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 async function resetQueryState() {
   selectedRows.value = [];
   await gridApi.grid.clearCheckboxRow();
+  await gridApi.grid.clearCheckboxReserve();
+  await gridApi.grid.clearRadioRow();
   await gridApi.formApi.resetForm();
 }
 
@@ -249,13 +272,16 @@ async function openModal(
   preSelectedIds.value = selectedIds || [];
   // 固定状态时隐藏状态搜索项，未固定时展示
   gridApi.formApi.setState({
-    schema: useSearchSchema(fixedStatus.value !== null),
+    schema: useSearchSchema(fixedStatus.value !== undefined),
   });
   await nextTick();
+  gridApi.setGridOptions({
+    columns: useGridColumns(multiple.value),
+  });
   await resetQueryState();
   await gridApi.query();
   await nextTick();
-  applyPreSelection();
+  await applyPreSelection();
 }
 
 /** 关闭通知单选择弹窗 */

apps/web-antdv-next/src/views/mes/wm/salesnotice/components/select.vue

@@ -47,6 +47,7 @@ const showClear = computed(
     props.allowClear &&
     !props.disabled &&
     hovering.value &&
+    props.modelValue !== undefined &&
     props.modelValue !== null,
 );
 

apps/web-ele/src/views/mes/md/workstation/components/select-dialog.vue

@@ -30,69 +30,80 @@ const emit = defineEmits<{
 
 const open = ref(false); // 弹窗是否打开
 const multiple = ref(true); // 是否多选
-const syncingSingleSelection = ref(false); // 是否同步单选勾选状态
 const selectedRows = ref<MesMdWorkstationApi.Workstation[]>([]); // 已选工作站列表
 const preSelectedIds = ref<number[]>([]); // 预选工作站编号列表
 
-/** 单选模式下同步 VXE 勾选状态 */
+/** 获取多选记录，包含 VXE reserve 跨页记录 */
-async function syncSingleSelection(row?: MesMdWorkstationApi.Workstation) {
+function getMultipleSelectedRows() {
-  syncingSingleSelection.value = true;
+  const selectedMap = new Map<number, MesMdWorkstationApi.Workstation>();
-  await nextTick();
+  const records = [
-  await gridApi.grid.clearCheckboxRow();
+    ...(gridApi.grid.getCheckboxReserveRecords?.() ?? []),
-  if (row) {
+    ...(gridApi.grid.getCheckboxRecords?.() ?? []),
-    await gridApi.grid.setCheckboxRow(row, true);
+  ] as MesMdWorkstationApi.Workstation[];
-  }
+  records.forEach((row) => {
-  await nextTick();
+    const rowId = row.id;
-  syncingSingleSelection.value = false;
+    if (rowId !== undefined) {
+      selectedMap.set(rowId, row);
+    }
+  });
+  return [...selectedMap.values()];
 }
 
-/** 处理勾选变化，单选模式只保留最后一条 */
+/** 处理多选勾选变化 */
-async function handleCheckboxChange({
+function handleCheckboxSelectChange() {
-  checked,
+  if (!multiple.value) {
-  records,
+    return;
+  }
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理单选切换 */
+function handleRadioChange(row: MesMdWorkstationApi.Workstation) {
+  selectedRows.value = [row];
+}
+
+/** 多选模式下切换行勾选 */
+async function toggleMultipleRow(row: MesMdWorkstationApi.Workstation) {
+  const selected = gridApi.grid.isCheckedByCheckboxRow(row);
+  await gridApi.grid.setCheckboxRow(row, !selected);
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理行双击：单选直接确认，多选切换勾选 */
+async function handleCellDblclick({
   row,
 }: {
-  checked: boolean;
+  row: MesMdWorkstationApi.Workstation;
-  records: MesMdWorkstationApi.Workstation[];
-  row?: MesMdWorkstationApi.Workstation;
 }) {
-  if (syncingSingleSelection.value) {
+  if (multiple.value) {
+    await toggleMultipleRow(row);
     return;
   }
-  if (!multiple.value) {
+  selectedRows.value = [row];
-    const selected = checked && row ? [row] : [];
+  await gridApi.grid.setRadioRow(row);
-    selectedRows.value = selected;
+  handleConfirm();
-    await syncSingleSelection(selected[0]);
-    return;
-  }
-  selectedRows.value = records;
-}
-
-/** 处理全选变化 */
-function handleCheckboxAll({
-  records,
-}: {
-  records: MesMdWorkstationApi.Workstation[];
-}) {
-  if (syncingSingleSelection.value) {
-    return;
-  }
-  selectedRows.value = records;
 }
 
 /** 回显预选工作站 */
-function applyPreSelection() {
+async function applyPreSelection() {
   if (preSelectedIds.value.length === 0) {
     return;
   }
   const rows = gridApi.grid.getData() as MesMdWorkstationApi.Workstation[];
   for (const row of rows) {
-    if (row.id && preSelectedIds.value.includes(row.id)) {
+    if (row.id === undefined || !preSelectedIds.value.includes(row.id)) {
-      gridApi.grid.setCheckboxRow(row, true);
+      continue;
-      if (!multiple.value) {
-        selectedRows.value = [row];
-      }
     }
+    if (multiple.value) {
+      await gridApi.grid.setCheckboxRow(row, true);
+    } else {
+      await gridApi.grid.setRadioRow(row);
+      selectedRows.value = [row];
+      return;
+    }
+  }
+  if (multiple.value) {
+    selectedRows.value = getMultipleSelectedRows();
   }
 }
 
@@ -101,7 +112,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useWorkstationSelectGridFormSchema(),
   },
   gridOptions: {
-    columns: useWorkstationSelectGridColumns(),
+    columns: useWorkstationSelectGridColumns(true),
     height: 520,
     keepSource: true,
     checkboxConfig: {
@@ -109,6 +120,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       range: true,
       reserve: true,
     },
+    radioConfig: {
+      highlight: true,
+      trigger: 'row',
+    },
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
@@ -131,8 +146,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<MesMdWorkstationApi.Workstation>,
   gridEvents: {
-    checkboxAll: handleCheckboxAll,
+    cellDblclick: handleCellDblclick,
-    checkboxChange: handleCheckboxChange,
+    checkboxAll: handleCheckboxSelectChange,
+    checkboxChange: handleCheckboxSelectChange,
+    radioChange: ({ row }: { row: MesMdWorkstationApi.Workstation }) => {
+      handleRadioChange(row);
+    },
   },
 });
 
@@ -140,6 +159,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 async function resetQueryState() {
   selectedRows.value = [];
   await gridApi.grid.clearCheckboxRow();
+  await gridApi.grid.clearCheckboxReserve();
+  await gridApi.grid.clearRadioRow();
   await gridApi.formApi.resetForm();
   if (props.processId) {
     await gridApi.formApi.setFieldValue('processId', props.processId);
@@ -155,10 +176,13 @@ async function openModal(
   multiple.value = options?.multiple ?? true;
   preSelectedIds.value = selectedIds || [];
   await nextTick();
+  gridApi.setGridOptions({
+    columns: useWorkstationSelectGridColumns(multiple.value),
+  });
   await resetQueryState();
   await gridApi.query();
   await nextTick();
-  applyPreSelection();
+  await applyPreSelection();
 }
 
 /** 关闭工作站选择弹窗 */

apps/web-ele/src/views/mes/md/workstation/components/select.vue

@@ -44,6 +44,7 @@ const showClear = computed(
     props.clearable &&
     !props.disabled &&
     hovering.value &&
+    props.modelValue !== undefined &&
     props.modelValue !== null,
 );
 

apps/web-ele/src/views/mes/md/workstation/data.ts

@@ -317,9 +317,11 @@ export function useWorkstationSelectGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 工作站选择弹窗的字段 */
-export function useWorkstationSelectGridColumns(): VxeTableGridOptions<MesMdWorkstationApi.Workstation>['columns'] {
+export function useWorkstationSelectGridColumns(
+  multiple = true,
+): VxeTableGridOptions<MesMdWorkstationApi.Workstation>['columns'] {
   return [
-    { type: 'checkbox', width: 50 },
+    { type: multiple ? 'checkbox' : 'radio', width: 50 },
     {
       field: 'code',
       title: '工作站编码',

apps/web-ele/src/views/mes/pro/workorder/components/select-dialog.vue

@@ -37,7 +37,7 @@ const selectedRows = ref<MesProWorkOrderApi.WorkOrder[]>([]); // 已选工单列
 const preSelectedIds = ref<number[]>([]); // 预选工单编号列表
 
 const typeTip = computed(() => {
-  if (props.type === null) {
+  if (props.type === undefined) {
     return '';
   }
   return `仅展示【${getDictLabel(DICT_TYPE.MES_PRO_WORK_ORDER_TYPE, props.type)}】类型的工单`;
@@ -61,6 +61,9 @@ function getMultipleSelectedRows() {
 
 /** 处理多选勾选变化 */
 function handleCheckboxSelectChange() {
+  if (!multiple.value) {
+    return;
+  }
   selectedRows.value = getMultipleSelectedRows();
 }
 
@@ -137,8 +140,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
           return await getWorkOrderPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
-            type: props.type,
             ...formValues,
+            ...(props.status === undefined ? {} : { status: props.status }),
+            ...(props.type === undefined ? {} : { type: props.type }),
           });
         },
       },
@@ -169,7 +173,7 @@ async function resetQueryState() {
   await gridApi.grid.clearCheckboxReserve();
   await gridApi.grid.clearRadioRow();
   await gridApi.formApi.resetForm();
-  if (props.status !== null) {
+  if (props.status !== undefined) {
     await gridApi.formApi.setFieldValue('status', props.status);
   }
 }

apps/web-ele/src/views/mes/pro/workorder/components/select.vue

@@ -49,6 +49,7 @@ const showClear = computed(
     props.clearable &&
     !props.disabled &&
     hovering.value &&
+    props.modelValue !== undefined &&
     props.modelValue !== null,
 );
 

apps/web-ele/src/views/mes/wm/arrivalnotice/components/select-dialog.vue

@@ -19,7 +19,6 @@ const emit = defineEmits<{
 const open = ref(false); // 弹窗是否打开
 const multiple = ref(false); // 是否多选
 const fixedStatus = ref<number>(); // 固定状态筛选
-const syncingSingleSelection = ref(false); // 是否同步单选勾选状态
 const selectedRows = ref<MesWmArrivalNoticeApi.ArrivalNotice[]>([]); // 已选通知单列表
 const preSelectedIds = ref<number[]>([]); // 预选通知单编号列表
 
@@ -57,10 +56,12 @@ function useSearchSchema(): VbenFormSchema[] {
 }
 
 /** 表格字段 */
-function useGridColumns(): VxeTableGridOptions<MesWmArrivalNoticeApi.ArrivalNotice>['columns'] {
+function useGridColumns(
+  multipleSelect = false,
+): VxeTableGridOptions<MesWmArrivalNoticeApi.ArrivalNotice>['columns'] {
   return [
     {
-      type: 'checkbox',
+      type: multipleSelect ? 'checkbox' : 'radio',
       width: 50,
     },
     {
@@ -101,65 +102,77 @@ function useGridColumns(): VxeTableGridOptions<MesWmArrivalNoticeApi.ArrivalNoti
   ];
 }
 
-/** 单选模式下同步 VXE 勾选状态，避免跨页残留多选 */
+/** 获取多选记录，包含 VXE reserve 跨页记录 */
-async function syncSingleSelection(row?: MesWmArrivalNoticeApi.ArrivalNotice) {
+function getMultipleSelectedRows() {
-  syncingSingleSelection.value = true;
+  const selectedMap = new Map<number, MesWmArrivalNoticeApi.ArrivalNotice>();
-  await nextTick();
+  const records = [
-  await gridApi.grid.clearCheckboxRow();
+    ...(gridApi.grid.getCheckboxReserveRecords?.() ?? []),
-  if (row) {
+    ...(gridApi.grid.getCheckboxRecords?.() ?? []),
-    await gridApi.grid.setCheckboxRow(row, true);
+  ] as MesWmArrivalNoticeApi.ArrivalNotice[];
-  }
+  records.forEach((row) => {
-  await nextTick();
+    const rowId = row.id;
-  syncingSingleSelection.value = false;
+    if (rowId !== undefined) {
+      selectedMap.set(rowId, row);
+    }
+  });
+  return [...selectedMap.values()];
 }
 
-/** 处理勾选变化，单选模式只保留最后一条 */
+/** 处理多选勾选变化 */
-async function handleCheckboxChange({
+function handleCheckboxSelectChange() {
-  checked,
+  if (!multiple.value) {
-  records,
+    return;
+  }
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理单选切换 */
+function handleRadioChange(row: MesWmArrivalNoticeApi.ArrivalNotice) {
+  selectedRows.value = [row];
+}
+
+/** 多选模式下切换行勾选 */
+async function toggleMultipleRow(row: MesWmArrivalNoticeApi.ArrivalNotice) {
+  const selected = gridApi.grid.isCheckedByCheckboxRow(row);
+  await gridApi.grid.setCheckboxRow(row, !selected);
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理行双击：单选直接确认，多选切换勾选 */
+async function handleCellDblclick({
   row,
 }: {
-  checked: boolean;
+  row: MesWmArrivalNoticeApi.ArrivalNotice;
-  records: MesWmArrivalNoticeApi.ArrivalNotice[];
-  row?: MesWmArrivalNoticeApi.ArrivalNotice;
 }) {
-  if (syncingSingleSelection.value) {
+  if (multiple.value) {
+    await toggleMultipleRow(row);
     return;
   }
-  if (!multiple.value) {
+  selectedRows.value = [row];
-    const selected = checked && row ? [row] : [];
+  await gridApi.grid.setRadioRow(row);
-    selectedRows.value = selected;
+  handleConfirm();
-    await syncSingleSelection(selected[0]);
-    return;
-  }
-  selectedRows.value = records;
-}
-
-/** 处理全选变化 */
-function handleCheckboxAll({
-  records,
-}: {
-  records: MesWmArrivalNoticeApi.ArrivalNotice[];
-}) {
-  if (syncingSingleSelection.value) {
-    return;
-  }
-  selectedRows.value = records;
 }
 
 /** 回显预选通知单 */
-function applyPreSelection() {
+async function applyPreSelection() {
   if (preSelectedIds.value.length === 0) {
     return;
   }
   const rows = gridApi.grid.getData() as MesWmArrivalNoticeApi.ArrivalNotice[];
   for (const row of rows) {
-    if (row.id && preSelectedIds.value.includes(row.id)) {
+    if (row.id === undefined || !preSelectedIds.value.includes(row.id)) {
-      gridApi.grid.setCheckboxRow(row, true);
+      continue;
-      if (!multiple.value) {
-        selectedRows.value = [row];
-      }
     }
+    if (multiple.value) {
+      await gridApi.grid.setCheckboxRow(row, true);
+    } else {
+      await gridApi.grid.setRadioRow(row);
+      selectedRows.value = [row];
+      return;
+    }
+  }
+  if (multiple.value) {
+    selectedRows.value = getMultipleSelectedRows();
   }
 }
 
@@ -168,7 +181,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useSearchSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(),
+    columns: useGridColumns(false),
     height: 520,
     keepSource: true,
     checkboxConfig: {
@@ -176,6 +189,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       range: true,
       reserve: true,
     },
+    radioConfig: {
+      highlight: true,
+      trigger: 'row',
+    },
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
@@ -198,8 +215,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<MesWmArrivalNoticeApi.ArrivalNotice>,
   gridEvents: {
-    checkboxAll: handleCheckboxAll,
+    cellDblclick: handleCellDblclick,
-    checkboxChange: handleCheckboxChange,
+    checkboxAll: handleCheckboxSelectChange,
+    checkboxChange: handleCheckboxSelectChange,
+    radioChange: ({ row }: { row: MesWmArrivalNoticeApi.ArrivalNotice }) => {
+      handleRadioChange(row);
+    },
   },
 });
 
@@ -207,6 +228,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 async function resetQueryState() {
   selectedRows.value = [];
   await gridApi.grid.clearCheckboxRow();
+  await gridApi.grid.clearCheckboxReserve();
+  await gridApi.grid.clearRadioRow();
   await gridApi.formApi.resetForm();
 }
 
@@ -220,10 +243,13 @@ async function openModal(
   fixedStatus.value = options?.status;
   preSelectedIds.value = selectedIds || [];
   await nextTick();
+  gridApi.setGridOptions({
+    columns: useGridColumns(multiple.value),
+  });
   await resetQueryState();
   await gridApi.query();
   await nextTick();
-  applyPreSelection();
+  await applyPreSelection();
 }
 
 /** 关闭通知单选择弹窗 */

apps/web-ele/src/views/mes/wm/arrivalnotice/components/select.vue

@@ -47,6 +47,7 @@ const showClear = computed(
     props.clearable &&
     !props.disabled &&
     hovering.value &&
+    props.modelValue !== undefined &&
     props.modelValue !== null,
 );
 

apps/web-ele/src/views/mes/wm/salesnotice/components/select-dialog.vue

@@ -21,7 +21,6 @@ const emit = defineEmits<{
 const open = ref(false); // 弹窗是否打开
 const multiple = ref(false); // 是否多选
 const fixedStatus = ref<number>(); // 固定状态筛选
-const syncingSingleSelection = ref(false); // 是否同步单选勾选状态
 const selectedRows = ref<MesWmSalesNoticeApi.SalesNotice[]>([]); // 已选通知单列表
 const preSelectedIds = ref<number[]>([]); // 预选通知单编号列表
 
@@ -84,10 +83,12 @@ function useSearchSchema(hasFixedStatus: boolean): VbenFormSchema[] {
 }
 
 /** 表格字段 */
-function useGridColumns(): VxeTableGridOptions<MesWmSalesNoticeApi.SalesNotice>['columns'] {
+function useGridColumns(
+  multipleSelect = false,
+): VxeTableGridOptions<MesWmSalesNoticeApi.SalesNotice>['columns'] {
   return [
     {
-      type: 'checkbox',
+      type: multipleSelect ? 'checkbox' : 'radio',
       width: 50,
     },
     {
@@ -128,65 +129,77 @@ function useGridColumns(): VxeTableGridOptions<MesWmSalesNoticeApi.SalesNotice>[
   ];
 }
 
-/** 单选模式下同步 VXE 勾选状态，避免跨页残留多选 */
+/** 获取多选记录，包含 VXE reserve 跨页记录 */
-async function syncSingleSelection(row?: MesWmSalesNoticeApi.SalesNotice) {
+function getMultipleSelectedRows() {
-  syncingSingleSelection.value = true;
+  const selectedMap = new Map<number, MesWmSalesNoticeApi.SalesNotice>();
-  await nextTick();
+  const records = [
-  await gridApi.grid.clearCheckboxRow();
+    ...(gridApi.grid.getCheckboxReserveRecords?.() ?? []),
-  if (row) {
+    ...(gridApi.grid.getCheckboxRecords?.() ?? []),
-    await gridApi.grid.setCheckboxRow(row, true);
+  ] as MesWmSalesNoticeApi.SalesNotice[];
-  }
+  records.forEach((row) => {
-  await nextTick();
+    const rowId = row.id;
-  syncingSingleSelection.value = false;
+    if (rowId !== undefined) {
+      selectedMap.set(rowId, row);
+    }
+  });
+  return [...selectedMap.values()];
 }
 
-/** 处理勾选变化，单选模式只保留最后一条 */
+/** 处理多选勾选变化 */
-async function handleCheckboxChange({
+function handleCheckboxSelectChange() {
-  checked,
+  if (!multiple.value) {
-  records,
+    return;
+  }
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理单选切换 */
+function handleRadioChange(row: MesWmSalesNoticeApi.SalesNotice) {
+  selectedRows.value = [row];
+}
+
+/** 多选模式下切换行勾选 */
+async function toggleMultipleRow(row: MesWmSalesNoticeApi.SalesNotice) {
+  const selected = gridApi.grid.isCheckedByCheckboxRow(row);
+  await gridApi.grid.setCheckboxRow(row, !selected);
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理行双击：单选直接确认，多选切换勾选 */
+async function handleCellDblclick({
   row,
 }: {
-  checked: boolean;
+  row: MesWmSalesNoticeApi.SalesNotice;
-  records: MesWmSalesNoticeApi.SalesNotice[];
-  row?: MesWmSalesNoticeApi.SalesNotice;
 }) {
-  if (syncingSingleSelection.value) {
+  if (multiple.value) {
+    await toggleMultipleRow(row);
     return;
   }
-  if (!multiple.value) {
+  selectedRows.value = [row];
-    const selected = checked && row ? [row] : [];
+  await gridApi.grid.setRadioRow(row);
-    selectedRows.value = selected;
+  handleConfirm();
-    await syncSingleSelection(selected[0]);
-    return;
-  }
-  selectedRows.value = records;
-}
-
-/** 处理全选变化 */
-function handleCheckboxAll({
-  records,
-}: {
-  records: MesWmSalesNoticeApi.SalesNotice[];
-}) {
-  if (syncingSingleSelection.value) {
-    return;
-  }
-  selectedRows.value = records;
 }
 
 /** 回显预选通知单 */
-function applyPreSelection() {
+async function applyPreSelection() {
   if (preSelectedIds.value.length === 0) {
     return;
   }
   const rows = gridApi.grid.getData() as MesWmSalesNoticeApi.SalesNotice[];
   for (const row of rows) {
-    if (row.id && preSelectedIds.value.includes(row.id)) {
+    if (row.id === undefined || !preSelectedIds.value.includes(row.id)) {
-      gridApi.grid.setCheckboxRow(row, true);
+      continue;
-      if (!multiple.value) {
-        selectedRows.value = [row];
-      }
     }
+    if (multiple.value) {
+      await gridApi.grid.setCheckboxRow(row, true);
+    } else {
+      await gridApi.grid.setRadioRow(row);
+      selectedRows.value = [row];
+      return;
+    }
+  }
+  if (multiple.value) {
+    selectedRows.value = getMultipleSelectedRows();
   }
 }
 
@@ -195,7 +208,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useSearchSchema(false),
   },
   gridOptions: {
-    columns: useGridColumns(),
+    columns: useGridColumns(false),
     height: 520,
     keepSource: true,
     checkboxConfig: {
@@ -203,6 +216,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       range: true,
       reserve: true,
     },
+    radioConfig: {
+      highlight: true,
+      trigger: 'row',
+    },
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
@@ -226,8 +243,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<MesWmSalesNoticeApi.SalesNotice>,
   gridEvents: {
-    checkboxAll: handleCheckboxAll,
+    cellDblclick: handleCellDblclick,
-    checkboxChange: handleCheckboxChange,
+    checkboxAll: handleCheckboxSelectChange,
+    checkboxChange: handleCheckboxSelectChange,
+    radioChange: ({ row }: { row: MesWmSalesNoticeApi.SalesNotice }) => {
+      handleRadioChange(row);
+    },
   },
 });
 
@@ -235,6 +256,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 async function resetQueryState() {
   selectedRows.value = [];
   await gridApi.grid.clearCheckboxRow();
+  await gridApi.grid.clearCheckboxReserve();
+  await gridApi.grid.clearRadioRow();
   await gridApi.formApi.resetForm();
 }
 
@@ -249,13 +272,16 @@ async function openModal(
   preSelectedIds.value = selectedIds || [];
   // 固定状态时隐藏状态搜索项，未固定时展示
   gridApi.formApi.setState({
-    schema: useSearchSchema(fixedStatus.value !== null),
+    schema: useSearchSchema(fixedStatus.value !== undefined),
   });
   await nextTick();
+  gridApi.setGridOptions({
+    columns: useGridColumns(multiple.value),
+  });
   await resetQueryState();
   await gridApi.query();
   await nextTick();
-  applyPreSelection();
+  await applyPreSelection();
 }
 
 /** 关闭通知单选择弹窗 */

apps/web-ele/src/views/mes/wm/salesnotice/components/select.vue

@@ -47,6 +47,7 @@ const showClear = computed(
     props.clearable &&
     !props.disabled &&
     hovering.value &&
+    props.modelValue !== undefined &&
     props.modelValue !== null,
 );