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

<template>
  <div class="app-container">
    <el-form label-position="top" size="small" :inline="true" class="component-form">
      <!-- <el-row> -->
      <!-- 常用组分选择框 -->
      <!-- <el-col :span="10"> -->
      <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="6"> -->
      <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"
          @focus="selectAllText" />
      </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;
        }, {});
      },
      selectAllText(event) {
        // 通过 event.target 获取原生 DOM 元素
        const inputElement = event.target;
        // 调用 select() 方法全选文本
        inputElement.select();
      },

      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>