1.生成表格

南骏 池

2025-05-29 42bf8e8f07c0ed4288e8c847978112af0615d041

1.生成表格

 H5/IPQC_SJ/Add.aspx

@@ -486,21 +486,22 @@
                  </van-cell>
                  
                  <!-- 数据行 -->
                  <van-cell v-for="(row, rowIndex) in tableData" :key="rowIndex">
                      <div class="grid-row">
                          <div style="width: 100px">{{ row.temperature }}</div>
                          <div v-for="(cell, colIndex) in row.values" 
                               :key="colIndex" 
                               class="input-cell">
                              <van-field 
                                  v-model="formData.temperatureData[row.temperature.replace('℃','')][cell.flow]"
                                  type="number"
                                  input-align="center"
                                  placeholder="℃"
                                  :style="{ width: '80px' }"/>
                          </div>
                      </div>
                  </van-cell>
                  <div v-for="(row, rowIndex) in tableData" :key="rowIndex">
                    <div class="grid-row">
                        <!-- 水温列 -->
                        <div style="width: 100px">{{ row.temperature }}</div>
                        <!-- 动态列 -->
                        <div v-for="(header, colIndex) in headers.slice(2)" 
                             :key="colIndex" 
                             style="flex: 1">
                            <van-field 
                                v-model="formTbData.temperatureData[row.temperature][header]"
                                :placeholder="`输入${header}值`"
                                type="number"
                            />
                        </div>
                    </div>
                </div>
              </van-cell-group>
          </div>
          </div>

 H5/Js/IPQC_SJ/Add.js

@@ -3,7 +3,7 @@
    data: function () {
        return {
            tableData: [],      // 生成的表格数据
            formData: {         // 表单数据
            formTbData: {         // 表单数据
            temperatureData: {} // 存储温度数据
            },
            headers: [],
@@ -523,7 +523,7 @@
        createTb() {
            // 清空旧数据
            this.tableData = [];
            this.formData.temperatureData = {};
            this.formTbData.temperatureData = {};
    
            // 校验选择
            if (this.selectedWater.length === 0 || this.selectedFlow.length === 0) {
@@ -534,21 +534,20 @@
            // 生成表头
            const headers = ['设定温度','实际温度', ...this.selectedFlow.sort().map(f => f )];
            this.headers = headers;

            console.log(this.headers);
            // 生成行数据
            this.tableData = this.selectedWater.sort((a,b) => a - b).map(water => {
                const row = {
                    temperature: water === '常温水' ? water : water,
                    values: this.selectedFlow.map(flow => ({
                        flow: flow,
                        value: '' // 初始空值
                    }))
                    values: Object.fromEntries( // 使用对象代替数组
                        this.selectedFlow.map(flow => [flow, ''])
                    )
                };
                
                // 初始化表单数据
                this.formData.temperatureData[water] = {};
                // 初始化表单数据结构
                this.$set(this.formTbData.temperatureData, water, {});
                this.selectedFlow.forEach(flow => {
                    this.formData.temperatureData[water][flow] = '';
                    this.$set(this.formTbData.temperatureData[water], flow, '');
                });
                
                return row;
@@ -559,6 +558,7 @@
                const tableEl = document.getElementById('temperature-table');
                if (tableEl) tableEl.scrollIntoView({ behavior: 'smooth' });
            }, 100);
            console.log(this.formTbData);
        },
    }
})