1.首检生成表格

南骏 池

2025-05-29 c35b25fc7b3f039bb525b73b4f72e9e2abf8b5d9

1.首检生成表格

 H5/IPQC_SJ/Add.aspx

@@ -75,6 +75,28 @@
            .van-checkbox--checked .van-checkbox__label {
              color: #1989fa;
            }

            .grid-header, .grid-row {
                display: flex;
                gap: 8px;
                padding: 4px 0;
                border-bottom: 1px solid #ebedf0;
                font-size: 0.20rem;
            }

            .input-cell {
                flex: 1;
                display: flex;
                justify-content: center;
                font-size: 0.20rem;
            }

            .van-field__control {
                text-align: center;
                padding: 4px 8px;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
         
        </style>
</asp:Content>
@@ -443,7 +465,44 @@
                  </van-checkbox>
                </van-checkbox-group>
              </div>
              <van-button 
              block 
              type="danger" 
              @click="createTb" 
              style="margin-top: 8px;"
            >生成表格</van-button>
            </van-cell-group>
            <div v-if="tableData.length > 0" id="temperature-table" style="margin-top: 20px;">
              <van-cell-group>
                  <!-- 表头 -->
                  <van-cell>
                      <div class="grid-header">
                          <div v-for="(header, index) in [headers[0], ...headers.slice(1)]" 
                               :key="index" 
                               :style="index === 0 ? 'width: 100px' : 'flex: 1'">
                              {{ header }}
                          </div>
                      </div>
                  </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>
              </van-cell-group>
          </div>
          </div>
          </van-popup>

@@ -453,8 +512,10 @@
  <%--<comback ></comback>--%>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder4" Runat="Server">
 <script src="../Js/IPQC_SJ/Add.js?<%=111112111144 %>"></script>
 <script src="../Js/IPQC_SJ/Add.js?<%=111112111145 %>"></script>
</asp:Content>






 H5/Js/IPQC_SJ/Add.js

@@ -2,28 +2,33 @@
    el: '#app',
    data: function () {
        return {
            tableData: [],      // 生成的表格数据
            formData: {         // 表单数据
            temperatureData: {} // 存储温度数据
            },
            headers: [],
            showZr: false,
            waterOptions: [
                { value: '常温水', text: '常温水' },
                { value: '0', text: '0℃' }, 
                { value: '5', text: '5℃' }, 
                { value: '15', text: '15℃' }, 
                { value: '35', text: '35℃' }, 
                { value: '55', text: '55℃' }, 
                { value: '75', text: '75℃' }, 
                { value: '100', text: '100℃' }
                { value: '0℃', text: '0℃' }, 
                { value: '5℃', text: '5℃' }, 
                { value: '15℃', text: '15℃' }, 
                { value: '35℃', text: '35℃' }, 
                { value: '55℃', text: '55℃' }, 
                { value: '75℃', text: '75℃' }, 
                { value: '100℃', text: '100℃' }
            ],
            flowOptions: [
                { value: '100', text: '100ml' },
                { value: '200', text: '200ml' },
                { value: '300', text: '300ml' },
                { value: '400', text: '400ml' },
                { value: '500', text: '500ml' },
                { value: '600', text: '600ml' },
                { value: '700', text: '700ml' },
                { value: '800', text: '800ml' },
                { value: '900', text: '900ml' },
                { value: '1000', text: '1000ml' }
                { value: '100ml', text: '100ml' },
                { value: '200ml', text: '200ml' },
                { value: '300ml', text: '300ml' },
                { value: '400ml', text: '400ml' },
                { value: '500ml', text: '500ml' },
                { value: '600ml', text: '600ml' },
                { value: '700ml', text: '700ml' },
                { value: '800ml', text: '800ml' },
                { value: '900ml', text: '900ml' },
                { value: '1000ml', text: '1000ml' }
            ],
            selectedWater: [],// 已选水温值
            selectedFlow: [],   // 已选流量值
@@ -515,5 +520,45 @@
                that.init();//刷新检验项目
            })
        },
        createTb() {
            // 清空旧数据
            this.tableData = [];
            this.formData.temperatureData = {};
    
            // 校验选择
            if (this.selectedWater.length === 0 || this.selectedFlow.length === 0) {
                this.$toast.fail('请先选择水温和流量');
                return;
            }
    
            // 生成表头
            const headers = ['设定温度','实际温度', ...this.selectedFlow.sort().map(f => f )];
            this.headers = 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: '' // 初始空值
                    }))
                };
                
                // 初始化表单数据
                this.formData.temperatureData[water] = {};
                this.selectedFlow.forEach(flow => {
                    this.formData.temperatureData[water][flow] = '';
                });
                
                return row;
            });
    
            // 自动滚动到表格区域
            setTimeout(() => {
                const tableEl = document.getElementById('temperature-table');
                if (tableEl) tableEl.scrollIntoView({ behavior: 'smooth' });
            }, 100);
        },
    }
})
})