feat: 升级预警批量设置交互，引入批量操作模式切换，提升界面整洁度与体验

inventory-web/src/views/material/list.vue

@@ -62,6 +62,17 @@
             <el-option label="禁用" :value="false" />
           </el-select>
 
+          <el-select
+              v-model="queryParams.has_stock"
+              placeholder="库存状态"
+              clearable
+              style="width: 120px; margin-right: 10px;"
+              @change="handleQuery"
+          >
+            <el-option label="全部" value="" />
+            <el-option label="仅看有库存" value="true" />
+          </el-select>
+
           <el-button type="primary" plain @click="handleQuery">搜索</el-button>
           <el-button plain @click="resetQuery">重置</el-button>
           <el-popover
@@ -99,15 +110,32 @@
           </el-button>
 
           <!-- 批量设置预警按钮 (需要 edit_warning 权限) -->
-          <el-button
-              v-if="userStore.hasPermission('material_list:edit_warning')"
-              type="warning"
-              plain
-              @click="handleBatchSetWarning"
-              style="margin-right: 10px"
-          >
-            <el-icon style="margin-right: 5px"><Bell /></el-icon>批量设置预警
-          </el-button>
+          <template v-if="userStore.hasPermission('material_list:edit_warning')">
+            <!-- 常规状态 -->
+            <el-button
+                v-if="!isBatchMode"
+                type="warning"
+                plain
+                @click="enterBatchMode"
+                style="margin-right: 10px"
+            >
+              <el-icon style="margin-right: 5px"><Bell /></el-icon>批量设置预警
+            </el-button>
+            <!-- 批量模式 -->
+            <template v-if="isBatchMode">
+              <el-button
+                  type="warning"
+                  :disabled="selectedItems.length === 0"
+                  @click="handleBatchSetWarning"
+                  style="margin-right: 10px"
+              >
+                确认批量设置 (已选 {{ selectedItems.length }} 项)
+              </el-button>
+              <el-button plain @click="exitBatchMode" style="margin-right: 10px">
+                退出批量操作
+              </el-button>
+            </template>
+          </template>
 
           <el-button v-if="userStore.hasPermission('material_list:operation')" type="primary" @click="handleAdd" style="margin-right: 10px">
             <el-icon style="margin-right: 5px"><Plus /></el-icon>新增
@@ -154,6 +182,7 @@
       </div>
 
       <el-table
+          ref="tableRef"
           v-loading="loading"
           :data="tableData"
           border
@@ -161,8 +190,10 @@
           :size="tableSize"
           :row-class-name="tableRowClassName"
           @sort-change="handleSortChange"
+          @selection-change="handleSelectionChange"
           style="width: 100%; margin-top: 15px"
       >
+        <el-table-column v-if="isBatchMode" type="selection" width="55" />
         <el-table-column v-if="columns.id.visible" prop="id" label="ID" min-width="80" align="center" fixed="left" />
 
         <el-table-column v-if="columns.companyName.visible" prop="companyName" label="所属公司" min-width="100" align="center" show-overflow-tooltip sortable="custom">
@@ -534,10 +565,11 @@ interface QueryParams {
   category: string;
   type: string;
   company: string;
-  isEnabled?: boolean; // 已修改为布尔值可选
+  isEnabled?: boolean;
   orderByColumn: string;
   isAsc: string | undefined;
   advancedFilters?: any[];
+  has_stock?: string;
 }
 
 interface CascaderOption {
@@ -551,6 +583,7 @@ const loading = ref(false);
 const exportLoading = ref(false); // 导出加载状态
 const total = ref(0);
 const tableData = ref<MaterialBaseVO[]>([]);
+const tableRef = ref<InstanceType<typeof ElTable>>();
 const submitLoading = ref(false);
 const tableSize = ref<'large' | 'default' | 'small'>('large');
 const advancedFilterVisible = ref(false);
@@ -589,6 +622,24 @@ const cameraDialogVisible = ref(false);
 const cameraRef = ref<InstanceType<typeof WebRtcCamera> | null>(null);
 const currentCameraField = ref<'generalImage' | 'generalManual'>('generalImage');
 
+// 复选框选中数据
+const selectedItems = ref<MaterialBaseVO[]>([]);
+const handleSelectionChange = (selection: MaterialBaseVO[]) => {
+  selectedItems.value = selection;
+};
+
+// 批量操作模式
+const isBatchMode = ref(false);
+const enterBatchMode = () => {
+  selectedItems.value = [];
+  isBatchMode.value = true;
+};
+const exitBatchMode = () => {
+  selectedItems.value = [];
+  tableRef.value?.clearSelection();  // 清除表格勾选状态
+  isBatchMode.value = false;
+};
+
 // 预警设置相关
 const warningDialog = reactive({
   visible: false,
@@ -701,7 +752,8 @@ const queryParams = reactive<QueryParams>({
   isEnabled: undefined,
   orderByColumn: '',
   isAsc: undefined,
-  advancedFilters: []
+  advancedFilters: [],
+  has_stock: ''
 });
 
 // --- 弹窗与表单相关 ---
@@ -920,6 +972,10 @@ const resetQuery = () => {
   queryParams.isEnabled = undefined;
   queryParams.orderByColumn = '';
   queryParams.isAsc = undefined;
+  queryParams.has_stock = '';
+  selectedItems.value = [];
+  tableRef.value?.clearSelection();
+  isBatchMode.value = false;
   handleQuery();
 };
 
@@ -1098,16 +1154,15 @@ const handleDelete = (row: MaterialBaseVO) => {
 
 // 批量设置预警
 const handleBatchSetWarning = () => {
-  // 获取已选择的行（如果有选中的行则使用选中的行，否则使用当前页所有行）
-  const selectedRows = tableData.value.filter((row: MaterialBaseVO) => (row as any)._checked);
-  if (selectedRows.length > 0) {
-    warningDialog.selectedIds = selectedRows.map((row: MaterialBaseVO) => row.id);
-    warningDialog.selectedCount = selectedRows.length;
-  } else {
-    warningDialog.selectedIds = tableData.value.map((row: MaterialBaseVO) => row.id);
-    warningDialog.selectedCount = tableData.value.length;
+  if (selectedItems.value.length === 0) {
+    ElMessage.warning('请先勾选需要设置预警的物料');
+    return;
   }
 
+  // 使用已选中的行
+  warningDialog.selectedIds = selectedItems.value.map((row: MaterialBaseVO) => row.id);
+  warningDialog.selectedCount = selectedItems.value.length;
+
   // 重置表单
   warningForm.isEnabled = false;
   warningForm.redThreshold = undefined;
@@ -1149,6 +1204,9 @@ const submitWarning = async () => {
     await batchSetWarning(data);
     ElMessage.success('预警设置成功');
     warningDialog.visible = false;
+    selectedItems.value = [];  // 清除选中状态
+    tableRef.value?.clearSelection();  // 清除表格勾选状态
+    isBatchMode.value = false;  // 退出批量模式
     getList();
   } catch (error: any) {
     ElMessage.error(error?.msg || '设置失败');