feat: 实现 ParamConfig 组件完整功能（模板、脚本、样式）

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

@@ -1,51 +1,211 @@
 <template>
   <div class="param-config-container">
-    <div class="placeholder-content">
+    <!-- 模型选择区域 -->
-      <i class="el-icon-setting"></i>
+    <div class="filter-section">
-      <p>参数配置功能开发中...</p>
+      <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"
+      >
+        保存配置
+      </el-button>
     </div>
   </div>
 </template>
 
 <script>
+import { listModels, listParams, saveParams } from "@/api/ccdi/modelParam";
+
 export default {
-  name: "ParamConfig",
+  name: 'ParamConfig',
   props: {
     projectId: {
       type: [String, Number],
-      default: null,
+      required: true
     },
     projectInfo: {
       type: Object,
-      default: () => ({
+      default: () => ({})
-        projectName: "",
+    }
-        updateTime: "",
-        projectStatus: "0",
-      }),
   },
+  data() {
+    return {
+      modelList: [],
+      queryParams: {
+        modelCode: undefined,
+        projectId: this.projectId
       },
-};
+      paramList: [],
+      saving: false
+    }
+  },
+  watch: {
+    projectId(newVal) {
+      this.queryParams.projectId = newVal
+      this.loadModelList()
+    }
+  },
+  created() {
+    this.loadModelList()
+  },
+  methods: {
+    /** 加载模型列表 */
+    async loadModelList() {
+      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()
+        }
+      } catch (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)
+      }
+    },
+
+    /** 模型切换 */
+    handleModelChange() {
+      this.loadParamList()
+    },
+
+    /** 标记为已修改 */
+    markAsModified(row) {
+      row.modified = true
+    },
+
+    /** 保存配置 */
+    async handleSave() {
+      // 验证是否有修改
+      const modifiedParams = this.paramList.filter(item => item.modified)
+      if (modifiedParams.length === 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
+        }))
+      }
+
+      // 保存
+      this.saving = true
+      try {
+        await saveParams(saveDTO)
+        this.$message.success('保存成功')
+        // 清除修改标记并重新加载
+        this.paramList.forEach(item => { item.modified = false })
+        await this.loadParamList()
+      } catch (error) {
+        if (error.response && error.response.data && error.response.data.msg) {
+          this.$message.error('保存失败：' + error.response.data.msg)
+        } else {
+          this.$message.error('保存失败：' + error.message)
+        }
+      } finally {
+        this.saving = false
+      }
+    }
+  }
+}
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .param-config-container {
-  padding: 40px 20px;
+  padding: 20px;
-  background: #fff;
+  background-color: #fff;
   min-height: 400px;
 }
 
-.placeholder-content {
+.filter-section {
-  text-align: center;
+  padding: 15px;
-  color: #909399;
+  background: #fff;
-
+  border-radius: 4px;
-  i {
+  margin-bottom: 20px;
-    font-size: 48px;
-    margin-bottom: 16px;
 }
 
-  p {
+.table-section {
-    font-size: 14px;
+  padding: 20px;
-    margin: 0;
+  background: #fff;
+  border-radius: 4px;
+  margin-bottom: 20px;
+
+  h3 {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    margin: 0 0 15px 0;
   }
 }
+
+.button-section {
+  padding: 15px;
+  background: #fff;
+  border-radius: 4px;
+  text-align: left;
+}
 </style>