ruoyi-ui/src/components/NGTools/NGCom.vue

<template>
  <div class="app-container">
    <el-form>
      <el-row>
        <!-- 常用组分选择框 -->
        <el-col :span="12">
          <el-form-item label="常用组分">
            <el-select v-model="selectedComponent" @change="handleComponentChange" placeholder="请选择常用组分" clearable filterable>
              <el-option v-for="dict in dict.type.ngtools_cyzf" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 合计输入框 -->
        <el-col :span="12">
          <el-form-item label="合计">
            <el-input :value="totalPercentage" readonly class="total-input" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-form :model="formData" label-position="top" size="small" :inline="true" class="component-form">
      <el-form-item v-for="field in componentFields" :key="field.prop" :label="field.label" :prop="field.prop">
        <el-input v-model="formData[field.prop]" controls-position="right" @change="handleValueChange" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { listComponents, getComponents, delComponents, addComponents, updateComponents } from '@/api/ngtools/components';

// 字段配置元数据
const COMPONENT_FIELDS = [
  { prop: 'ngC1', label: '甲烷C1' },
  { prop: 'ngN2', label: '氮气N2' },
  { prop: 'ngCo2', label: '二氧化碳CO2' },
  { prop: 'ngC2', label: '乙烷C2' },
  { prop: 'ngC3', label: '丙烷C3' },
  { prop: 'ngH2o', label: '水H2O' },
  { prop: 'ngH2s', label: '硫化氢H2S' },
  { prop: 'ngH2', label: '氢气H2' },
  { prop: 'ngCo', label: '一氧化碳CO' },
  { prop: 'ngO2', label: '氧气O2' },
  { prop: 'ngIc4', label: '异丁烷iC4' },
  { prop: 'ngNc4', label: '正丁烷nC4' },
  { prop: 'ngIc5', label: '异戊烷iC5' },
  { prop: 'ngNc5', label: '正戊烷nC5' },
  { prop: 'ngC6', label: '己烷C6' },
  { prop: 'ngC7', label: '庚烷C7' },
  { prop: 'ngC8', label: '辛烷C8' },
  { prop: 'ngC9', label: '壬烷C9' },
  { prop: 'ngC10', label: '癸烷C10' },
  { prop: 'ngHe', label: '氦气He' },
  { prop: 'ngAr', label: '氩气Ar' }
];

export default {
  name: 'NgComponentsForm',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  dicts: ['ngtools_cyzf'],
  data() {
    return {
      selectedComponent: null,
      formData: this.initFormData(),
      componentFields: COMPONENT_FIELDS
    };
  },
  computed: {
    totalPercentage() {
      return Object.values(this.formData)
        .reduce((sum, val) => sum + (parseFloat(val) || 0), 0)
        .toFixed(4);
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        this.parseValueString(newVal);
      }
    }
  },
  methods: {
    initFormData() {
      return COMPONENT_FIELDS.reduce((acc, field) => {
        acc[field.prop] = 0;
        return acc;
      }, {});
    },

    parseValueString(valueStr) {
      const values = (valueStr || '').split('_');
      this.componentFields.forEach((field, index) => {
        const value = parseFloat(values[index]) || 0;
        this.$set(this.formData, field.prop, value);
      });
    },

    generateValueString() {
      return Object.values(this.formData)
        .map((v) => v.toFixed(4))
        .join('_');
    },

    async handleComponentChange(value) {
      if (!value) return;
      console.log(value);
      try {
        const temp = value.replace(/\\'"/g, '"').replace(/'/g, '"'); // 替换剩余单引号;
        const componentData = Object.assign({}, this.formData, JSON.parse(temp));
        Object.keys(this.formData).forEach((key) => {
          this.formData[key] = parseFloat(componentData[key]) || 0;
        });
        this.emitUpdate();
      } catch (error) {
        this.$message.error('获取标准组分失败');
        console.error(error);
      }
    },

    handleValueChange() {
      this.$nextTick(() => {
        this.emitUpdate();
      });
    },

    emitUpdate() {
      if (Math.abs(this.totalPercentage - 100) > 0.0001) {
        this.$message.warning('组分合计不等于100%，请检查输入');
      }
      this.$emit('input', this.generateValueString());
    },

    async fetchComponentData(params) {
      try {
        const { data } = await getComponents(params);
        this.parseValueString(data.componentStr);
      } catch (error) {
        console.error('获取组分数据失败:', error);
      }
    }
  }
};
</script>

<style scoped>
.component-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.total-input >>> .el-input__inner {
  font-weight: bold;
  color: #409eff;
}
</style>