为SQL工作台查询结果页面添加批量修改弹窗

src/views/mes/queryManage/components/ParameterBatch.vue

@@ -1,14 +1,46 @@
 <template>
   <el-dialog
-    title="批量修改"
     :visible.sync="visible"
     width="80%"
     top="5vh"
     append-to-body
     @close="close"
   >
+    <!-- 动态统一录入区 -->
+    <el-row slot="title" class="batch-header">
+      <span>批量修改</span>
+    </el-row>
+    <el-row>
+      <el-form inline size="mini">
+        <el-form-item label=" " />
+        <el-form-item
+          v-for="field in dynamicInputs"
+          :key="field.paramName"
+          :label="field.paramComment"
+        >
+          <el-input
+            v-model="globalMap[field.paramName]"
+            :placeholder="'统一' + field.paramComment"
+            style="width: 140px"
+            @input="syncGlobal(field.paramName)"
+          />
+        </el-form-item>
+      </el-form>
+    </el-row>
+
     <!-- 表格：每行就是原来的一条记录，列=所有字段 -->
-    <el-table :data="tableData" border size="mini" max-height="450">
+    <el-table
+      ref="multipleTable"
+      :data="tableData"
+      border
+      size="mini"
+      max-height="450"
+      @selection-change="handleSelectionChange"
+    >
+      <!-- 1. 表格内置多选框 -->
+      <el-table-column type="selection" width="55" align="center" />
+
+      <!-- 2. 其余字段列 -->
       <el-table-column
         v-for="col in allCol"
         :key="col.paramName"
@@ -47,6 +79,9 @@ export default {
       allCol: [], // 所有字段（含只读）
       buttonInfo: {},
       masterId: "",
+      globalMap: {}, // 每个字段一个统一值  { paramName: value }
+      dynamicInputs: [], // 需要出输入框的字段
+      selectedRows: [], // 表格勾选的行数据
     };
   },
   methods: {
@@ -59,10 +94,19 @@ export default {
     open(btn, masterId, rows, queryData) {
       this.buttonInfo = btn;
       this.masterId = masterId;
-      // 1. 只保留“不是隐藏”的字段，和 Detail 保持一样
+      // 1. 表格列（过滤隐藏）
       this.allCol = (btn.paramList || []).filter((p) => p.ifHide !== true);
 
-      // 2. 把 rows 转成"字段名→值"的 plain object
+      // 2. 顶部动态输入框字段：未隐藏 且 可编辑
+      this.dynamicInputs = this.allCol.filter((p) => p.allowEdit === true);
+
+      // 3. 初始化 globalMap
+      this.globalMap = this.dynamicInputs.reduce((acc, f) => {
+        acc[f.paramName] = "";
+        return acc;
+      }, {});
+
+      // 4. 表格数据
       this.tableData = rows.map((r) => {
         const obj = {};
         this.allCol.forEach((p) => {
@@ -73,12 +117,30 @@ export default {
         });
         return obj;
       });
+      this.selectedRows = []; // 初始清空
       this.visible = true;
     },
 
+    /* el-table 勾选事件 */
+    handleSelectionChange(val) {
+      this.selectedRows = val;
+    },
+
+    /* 仅对已勾选的行赋值 */
+    syncGlobal(fieldName) {
+      if (!this.selectedRows.length) return;
+      const val = this.globalMap[fieldName];
+      this.selectedRows.forEach((row) => {
+        row[fieldName] = val;
+      });
+    },
+
     close() {
       this.visible = false;
       this.tableData = [];
+      this.globalMap = {};
+      this.dynamicInputs = [];
+      this.selectedRows = [];
     },
 
     /* 一次性提交整包数组 */
@@ -113,3 +175,21 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.batch-header {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.batch-header .el-form {
+  display: flex;
+  align-items: center;
+}
+
+.batch-header .el-form-item {
+  margin-right: 15px;
+  margin-bottom: 0;
+}
+</style>