Forráskód Böngészése

feat(rulesManagement): 添加产品选择单选模式并优化表格交互

为 ProductModal 组件添加 mode 属性,支持单选/多选模式,通过行点击和选择变化事件控制选中状态,修复单选时复选框多选的问题,同时移除多余日志和注释,调整表格高度限制。
yusheng 6 napja
szülő
commit
c81b4561c6

+ 26 - 17
src/views/rulesManagement/matterRules/components/ProductModal.vue

@@ -33,12 +33,14 @@
           <!-- 数据表格 -->
           <template v-slot:content>
             <ele-pro-table
-              style="min-height: 400px"
+              max-height="600px"
               ref="table"
               :columns="columns"
               :datasource="datasource"
               :selection.sync="selection"
               row-key="id"
+              @row-click="handleRowClick"
+              @selection-change="handleSelectionChange"
             >
               <template v-slot:action="{ row }">
                 <el-link
@@ -82,6 +84,14 @@
       ProductSearch,
       bomDetail
     },
+    // ===== 新增 props =====
+    props: {
+      mode: {
+        type: String,
+        default: 'multiple', // 'multiple' 多选 | 'single' 单选
+        validator: (val) => ['multiple', 'single'].includes(val)
+      }
+    },
     data() {
       return {
         visible: false,
@@ -105,18 +115,13 @@
             type: 'selection',
             width: 45,
             align: 'center',
-            selectable: (row, index) => {
-              return !this.processData.some((it) => row.id == it.categoryId);
-            },
             reserveSelection: true,
             fixed: 'left'
           },
-
           {
             label: '物料名称',
             prop: 'name'
           },
-
           {
             label: '物料编码',
             prop: 'code'
@@ -129,7 +134,6 @@
             label: '型号',
             prop: 'modelType'
           },
-
           {
             prop: 'availableCountBase',
             label: '包装库存',
@@ -139,18 +143,15 @@
             label: '单位',
             prop: 'weightUnit'
           },
-
           {
             prop: 'packingCountBase',
             label: '计量库存',
             sortable: 'custom'
           },
-
           {
             label: '计量单位',
             prop: 'unit'
           },
-
           {
             label: '数量',
             prop: 'count'
@@ -185,17 +186,27 @@
         });
         return res;
       },
+      // ===== 新增:行点击处理 =====
+      handleRowClick(row) {
+        if (this.mode === 'single') {
+          // 单选模式:强制选中当前行,清空其他选中
+          this.$refs.table.setSelectedRows([row]);
+        }
+      },
+      // ===== 新增:选择变化处理(防止通过复选框多选) =====
+      handleSelectionChange(val) {
+        if (this.mode === 'single' && val.length > 1) {
+          // 如果选中多个,只保留最后点击的那个
+          const last = val[val.length - 1];
+          this.$refs.table.setSelectedRows([last]);
+        }
+      },
       openBOMForm(row) {
         this.bomDetailDialogFlag = true;
         row.fIndex = this.receiveIndex;
         this.rowDataBom = row;
-        console.log(this.rowDataBom, 'rowDataBom');
-        /*      this.$nextTick(() => {
-          this.$refs.bomDialogRef.open3(row);
-        }); */
       },
       open2(rowData, index, name) {
-        console.log(rowData, index, name, '222222222222');
         this.processData = [];
         this.visible = true;
         this.getTreeData();
@@ -206,7 +217,6 @@
       open(item) {
         this.processData = Array.isArray(item) ? item : [];
         this.visible = true;
-
         this.getTreeData();
       },
 
@@ -220,7 +230,6 @@
             this.treeList = res.data;
 
             this.$nextTick(() => {
-              // 默认高亮第一级树节点
               if (this.treeList[0]) {
                 this.rootTreeId = this.treeList[0].id;
                 this.categoryLevelId = this.treeList[0].id;

+ 1 - 0
src/views/rulesManagement/matterRules/components/matter-add.vue

@@ -251,6 +251,7 @@
       ref="productRefs"
       @chooseRadio="chooseRadio"
       @chooseModal="chooseModal"
+      mode="single"
     />
   </div>
 </template>