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

<template>
  <div class="param-config-container" v-loading="loading" element-loading-text="加载中...">
    <!-- 模型参数卡片组（垂直堆叠） -->
    <div class="model-cards-container" v-if="!loading && modelGroups.length > 0">
      <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="empty-state" v-if="!loading && modelGroups.length === 0">
      <el-empty description="暂无参数配置数据"></el-empty>
    </div>

    <!-- 统一保存按钮 -->
    <div class="button-section" v-if="!loading && modelGroups.length > 0">
      <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 { listAllParams, saveAllParams } from "@/api/ccdi/modelParam";

export default {
  name: 'ParamConfig',
  props: {
    projectId: {
      type: [String, Number],
      required: true
    },
    projectInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      modelGroups: [],
      modifiedParams: {},
      originalParamValues: {},
      loading: false,
      saving: false
    }
  },
  computed: {
    modifiedCount() {
      return Object.keys(this.modifiedParams).length;
    }
  },
  watch: {
    projectId(newVal) {
      if (newVal) {
        this.loadAllParams();
      } else {
        this.modelGroups = [];
        this.modifiedParams = {};
        this.originalParamValues = {};
      }
    }
  },
  created() {
    if (this.projectId) {
      this.loadAllParams();
    }
  },
  methods: {
    buildModifiedKey(modelCode, paramCode) {
      return `${modelCode}:${paramCode}`
    },
    normalizeParamValue(value) {
      return value === null || value === undefined ? '' : String(value)
    },
    normalizeModelGroups(models) {
      if (!Array.isArray(models)) {
        return []
      }
      return models.map(model => ({
        ...model,
        params: Array.isArray(model.params) ? model.params : []
      }))
    },
    resetModifiedState() {
      this.modifiedParams = {}
      this.originalParamValues = {}
      this.modelGroups.forEach(model => {
        model.params.forEach(row => {
          const key = this.buildModifiedKey(model.modelCode, row.paramCode)
          this.$set(this.originalParamValues, key, this.normalizeParamValue(row.paramValue))
        })
      })
    },
    async loadAllParams() {
      this.loading = true;
      try {
        const res = await listAllParams({ projectId: this.projectId });
        this.modelGroups = this.normalizeModelGroups(res.data && res.data.models);
        this.resetModifiedState();
      } catch (error) {
        this.$message.error('加载参数失败：' + error.message);
        console.error('加载参数失败', error);
      } finally {
        this.loading = false;
      }
    },

    markAsModified(modelCode, row) {
      const modifiedKey = this.buildModifiedKey(modelCode, row.paramCode);
      const currentValue = this.normalizeParamValue(row.paramValue);
      const originalValue = this.originalParamValues[modifiedKey];

      if (currentValue === originalValue) {
        if (this.modifiedParams[modifiedKey]) {
          this.$delete(this.modifiedParams, modifiedKey);
        }
        return;
      }
      this.$set(this.modifiedParams, modifiedKey, {
        modelCode,
        paramCode: row.paramCode,
        paramValue: row.paramValue
      });
    },

    async handleSaveAll() {
      if (this.modifiedCount === 0) {
        this.$message.info('没有需要保存的修改');
        return;
      }

      const modelMap = {};
      Object.values(this.modifiedParams).forEach(item => {
        if (!modelMap[item.modelCode]) {
          modelMap[item.modelCode] = {
            modelCode: item.modelCode,
            params: []
          };
        }
        modelMap[item.modelCode].params.push({
          paramCode: item.paramCode,
          paramValue: item.paramValue
        });
      });
      const saveDTO = {
        projectId: this.projectId,
        models: Object.values(modelMap)
      };

      this.saving = true;
      try {
        await saveAllParams(saveDTO);
        this.$modal.msgSuccess('保存成功');
        await this.loadAllParams();
      } 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);
        }
        console.error('保存失败', error);
      } finally {
        this.saving = false;
      }
    }
  }
}
</script>

<style scoped lang="scss">
.param-config-container {
  padding: 20px;
  background-color: #fff;
  min-height: 400px;
}

.model-cards-container {
  margin-bottom: 20px;
  min-height: 300px;
}

.model-card {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #e4e7ed;

  .model-header {
    margin-bottom: 15px;

    h3 {
      font-size: 16px;
      font-weight: bold;
      color: #333;
      margin: 0;
    }
  }
}

.empty-state {
  padding: 40px;
  text-align: center;
  background: #fff;
  border-radius: 4px;
}

.button-section {
  padding: 15px;
  background: #fff;
  border-radius: 4px;
  text-align: left;

  .modified-tip {
    margin-left: 15px;
    color: #909399;
    font-size: 14px;
  }
}
</style>