feat(ui): 重构项目内模型参数配置页面

ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue

@@ -1,59 +1,49 @@
 <template>
   <div class="param-config-container">
-    <!-- 模型选择区域 -->
-    <div class="filter-section">
-      <el-form :inline="true" :model="queryParams">
-        <el-form-item label="模型名称">
-          <el-select
-            v-model="queryParams.modelCode"
-            placeholder="请选择模型"
-            @change="handleModelChange"
-          >
-            <el-option
-              v-for="model in modelList"
-              :key="model.modelCode"
-              :label="model.modelName"
-              :value="model.modelCode"
-            />
-          </el-select>
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <!-- 参数配置表格 -->
-    <div class="table-section">
-      <h3>阈值参数配置</h3>
-      <el-table :data="paramList" border style="width: 100%">
-        <el-table-column label="监测项" prop="paramName" width="200" />
-        <el-table-column label="描述" prop="paramDesc" />
-        <el-table-column label="阈值设置" width="200">
-          <template #default="{ row }">
-            <el-input
-              v-model="row.paramValue"
-              placeholder="请输入阈值"
-              @input="markAsModified(row)"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column label="单位" prop="paramUnit" width="120" />
-      </el-table>
-    </div>
-
-    <!-- 操作按钮 -->
-    <div class="button-section">
-      <el-button
-        type="primary"
-        @click="handleSave"
-        :loading="saving"
+    <!-- 模型参数卡片组（垂直堆叠） -->
+    <div class="model-cards-container">
+      <div
+        v-for="model in modelGroups"
+        :key="model.modelCode"
+        class="model-card"
       >
-        保存配置
+        <!-- 模型标题 -->
+        <div class="model-header">
+          <h3>{{ model.modelName }}</h3>
+        </div>
+
+        <!-- 参数表格 -->
+        <el-table :data="model.params" border style="width: 100%">
+          <el-table-column label="监测项" prop="paramName" width="200" />
+          <el-table-column label="描述" prop="paramDesc" />
+          <el-table-column label="阈值设置" width="200">
+            <template #default="{ row }">
+              <el-input
+                v-model="row.paramValue"
+                placeholder="请输入阈值"
+                @input="markAsModified(model.modelCode, row)"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="单位" prop="paramUnit" width="120" />
+        </el-table>
+      </div>
+    </div>
+
+    <!-- 统一保存按钮 -->
+    <div class="button-section">
+      <el-button type="primary" @click="handleSaveAll" :loading="saving">
+        保存所有修改
       </el-button>
+      <span v-if="modifiedCount > 0" class="modified-tip">
+        已修改 {{ modifiedCount }} 个参数
+      </span>
     </div>
   </div>
 </template>
 
 <script>
-import { listModels, listParams, saveParams } from "@/api/ccdi/modelParam";
+import { listAllParams, saveAllParams } from "@/api/ccdi/modelParam";
 
 export default {
   name: 'ParamConfig',
@@ -69,105 +59,106 @@ export default {
   },
   data() {
     return {
-      modelList: [],
-      queryParams: {
-        modelCode: undefined,
-        projectId: this.projectId
-      },
-      paramList: [],
+      // 模型参数数据（按模型分组）
+      modelGroups: [],
+      // 修改记录（记录哪些参数被修改过）
+      modifiedParams: new Map(),
+      // 保存状态
       saving: false
     }
   },
+  computed: {
+    /** 计算已修改参数数量 */
+    modifiedCount() {
+      let count = 0;
+      this.modifiedParams.forEach(params => {
+        count += params.size;
+      });
+      return count;
+    }
+  },
   watch: {
     projectId(newVal) {
-      this.queryParams.projectId = newVal
-      this.loadModelList()
+      if (newVal) {
+        this.loadAllParams();
+      }
     }
   },
   created() {
-    this.loadModelList()
+    if (this.projectId) {
+      this.loadAllParams();
+    }
   },
   methods: {
-    /** 加载模型列表 */
-    async loadModelList() {
+    /** 加载所有模型参数 */
+    async loadAllParams() {
       try {
-        const res = await listModels({ projectId: this.projectId })
-        this.modelList = res.data
-        if (this.modelList.length > 0) {
-          this.queryParams.modelCode = this.modelList[0].modelCode
-          this.loadParamList()
-        }
+        const res = await listAllParams({ projectId: this.projectId });
+        this.modelGroups = res.data.models;
+        // 清空修改记录
+        this.modifiedParams.clear();
       } catch (error) {
-        this.$message.error('加载模型列表失败：' + error.message)
-        console.error('加载模型列表失败', error)
+        this.$message.error('加载参数失败：' + error.message);
+        console.error('加载参数失败', error);
       }
     },
 
-    /** 加载参数列表 */
-    async loadParamList() {
-      try {
-        const res = await listParams(this.queryParams)
-        this.paramList = res.data
-      } catch (error) {
-        this.$message.error('加载参数列表失败：' + error.message)
-        console.error('加载参数列表失败', error)
+    /** 标记参数为已修改 */
+    markAsModified(modelCode, row) {
+      if (!this.modifiedParams.has(modelCode)) {
+        this.modifiedParams.set(modelCode, new Set());
       }
+      this.modifiedParams.get(modelCode).add(row.paramCode);
     },
 
-    /** 模型切换 */
-    handleModelChange() {
-      this.loadParamList()
-    },
-
-    /** 标记为已修改 */
-    markAsModified(row) {
-      row.modified = true
-    },
-
-    /** 保存配置 */
-    async handleSave() {
+    /** 保存所有修改 */
+    async handleSaveAll() {
       // 验证是否有修改
-      const modifiedParams = this.paramList.filter(item => item.modified)
-      if (modifiedParams.length === 0) {
-        this.$message.info('没有需要保存的修改')
-        return
+      if (this.modifiedCount === 0) {
+        this.$message.info('没有需要保存的修改');
+        return;
       }
 
-      // 验证参数值
-      const invalidParams = modifiedParams.filter(
-        item => !item.paramValue || item.paramValue.trim() === ''
-      )
-      if (invalidParams.length > 0) {
-        this.$message.error('请填写所有参数值')
-        return
-      }
-
-      // 构造保存数据
+      // 构造保存数据（只包含修改过的参数）
       const saveDTO = {
         projectId: this.projectId,
-        modelCode: this.queryParams.modelCode,
-        params: modifiedParams.map(item => ({
-          paramCode: item.paramCode,
-          paramValue: item.paramValue
-        }))
-      }
+        models: []
+      };
+
+      this.modifiedParams.forEach((paramCodes, modelCode) => {
+        const modelGroup = this.modelGroups.find(m => m.modelCode === modelCode);
+        const modifiedParamList = modelGroup.params
+          .filter(p => paramCodes.has(p.paramCode))
+          .map(p => ({
+            paramCode: p.paramCode,
+            paramValue: p.paramValue
+          }));
+
+        if (modifiedParamList.length > 0) {
+          saveDTO.models.push({
+            modelCode: modelCode,
+            params: modifiedParamList
+          });
+        }
+      });
 
       // 保存
-      this.saving = true
+      this.saving = true;
       try {
-        await saveParams(saveDTO)
-        this.$message.success('保存成功')
-        // 清除修改标记并重新加载
-        this.paramList.forEach(item => { item.modified = false })
-        await this.loadParamList()
+        await saveAllParams(saveDTO);
+        this.$message.success('保存成功');
+        // 清空修改记录并重新加载
+        this.modifiedParams.clear();
+        await this.loadAllParams();
       } catch (error) {
         if (error.response && error.response.data && error.response.data.msg) {
-          this.$message.error('保存失败：' + error.response.data.msg)
+          this.$message.error('保存失败：' + error.response.data.msg);
         } else {
-          this.$message.error('保存失败：' + error.message)
+          this.$message.error('保存失败：' + error.message);
         }
+        console.error('保存失败', error);
       } finally {
-        this.saving = false
+        this.saving = false;
       }
     }
   }
@@ -181,24 +172,26 @@ export default {
   min-height: 400px;
 }
 
-.filter-section {
-  padding: 15px;
-  background: #fff;
-  border-radius: 4px;
+.model-cards-container {
   margin-bottom: 20px;
 }
 
-.table-section {
-  padding: 20px;
+.model-card {
   background: #fff;
   border-radius: 4px;
+  padding: 20px;
   margin-bottom: 20px;
+  border: 1px solid #e4e7ed;
 
-  h3 {
-    font-size: 16px;
-    font-weight: bold;
-    color: #333;
-    margin: 0 0 15px 0;
+  .model-header {
+    margin-bottom: 15px;
+
+    h3 {
+      font-size: 16px;
+      font-weight: bold;
+      color: #333;
+      margin: 0;
+    }
   }
 }
 
@@ -207,5 +200,11 @@ export default {
   background: #fff;
   border-radius: 4px;
   text-align: left;
+
+  .modified-tip {
+    margin-left: 15px;
+    color: #909399;
+    font-size: 14px;
+  }
 }
 </style>