H5/IPQC_SJ/Add.aspx

@@ -32,12 +32,12 @@
            }


            /* 标题样式 */
            .custom-label .van-cell__title {
              font-size: 0.28rem !important;
              line-height: 1.0;
              color: #fff !important;
              background-color: #1989fa; /* 品牌蓝色 */
              color: #1989fa !important; /* 修改为蓝色 */
              background-color: transparent !important; /* 透明背景 */
              border: 1px solid #1989fa; /* 添加蓝色边框 */
              padding: 0.1rem 0.1rem;
              border-radius: 0.12rem;
              margin: 0.1rem 0;
@@ -92,10 +92,18 @@
            }

            .van-field__control {
                text-align: center;
                text-align: left;
                padding: 4px 8px;
                border: 1px solid #ccc;
/*                border: 1px solid #ccc;*/
                border-radius: 4px;
            }

            /* 新增局部样式 */
            .temperature-input .van-field__control,
            .flow-input .van-field__control {
              text-align: center;
                font-size: 0.16rem !important;
                color: blue !important;
            }
         
        </style>
@@ -174,7 +182,7 @@
                  </template>
              </van-field>
              <!-- 新增炙热性能按钮 -->
              <van-tag type="primary" style="font-size:15px" @click="openZrPopup">炙热性能</van-tag>
              <!-- <van-tag type="primary" style="font-size:15px" @click="openZrPopup">炙热性能</van-tag> -->
            <van-dialog v-model="showDialog" title="不合格描述" :show-cancel-button="false"  @confirm="remarksConfirm">
              <van-field
                v-model="remarks"
@@ -221,24 +229,31 @@
        
                       <van-col span="10" center class="text-left padding-left" >
                           <van-cell center
                            center :title="item.fcheckItem" @click="togglePopup(index)"></van-cell>
                            center 
                            :title="item.fcheckItem" 
                            @click="togglePopup(index)">
                        </van-cell>
                      </van-col>
                      <van-col span="8" >
                            <van-cell center 
                                center :title="item.fenterQty + '/' + item.checkQyt" @click="togglePopup(index)"></van-cell>
                                center :title="item.fenterQty + '/' + item.checkQyt" 
                                @click="togglePopup(index)"></van-cell>
                        </van-col>
                      <van-col center span="6" >
                          <van-cell center
                            center v-if="item.fcheckResu === 'Y:合格'">
                            <van-tag round  plain type="success" style="font-size:15px" @click="togglePopup(index)">合格</van-tag>   
                            <van-tag round  plain type="success" 
                                @click="togglePopup(index)">合格</van-tag>   
                          </van-cell>
                          <van-cell center
                          center v-else-if="item.fcheckResu === 'N:不合格'">
                          <van-tag round plain type="danger" style="font-size:15px" @click="togglePopup(index)">不合格</van-tag>   
                          <van-tag round plain type="danger" 
                              @click="togglePopup(index)">不合格</van-tag>   
                        </van-cell>
                            <van-cell center
                              center v-else >
                              <van-tag round plain type="warning" style="font-size:15px" @click="togglePopup(index)">进行中</van-tag>   
                              <van-tag round plain type="warning" 
                                  @click="togglePopup(index)">进行中</van-tag>   
                            </van-cell>
                      </van-col>
                      
@@ -282,9 +297,11 @@
                              
                              <van-field label="检测结果" colon="true" readonly >
                                   <template #input>
                                       <van-tag round plain v-if="jymxData.fcheckResu === 'Y:合格'" type="success">合格</van-tag>
                                       <van-tag round plain v-else-if="jymxData.fcheckResu === 'N:不合格'" type="danger">不合格</van-tag>
                                       <van-tag round plain v-else type="warning">进行中</van-tag>
                                       <div style="text-align: center;">
                                           <van-tag round plain v-if="jymxData.fcheckResu === 'Y:合格'" type="success">合格</van-tag>
                                           <van-tag round plain v-else-if="jymxData.fcheckResu === 'N:不合格'" type="danger">不合格</van-tag>
                                           <van-tag round plain v-else type="warning">进行中</van-tag>
                                       </div>
                                   </template>
                                </van-field>

@@ -307,6 +324,14 @@
                                 show-word-limit
                             />
                            </van-dialog>
                            <van-button 
                            block 
                            type="info" 
                            @click="openZrPopup"
                            :loading="ttrre"
                            loading-text="加载中..."
                            v-if="jymxData.fcheckItem === '制热性能'"
                        >制热性能录入</van-button>
                             
                    </template>
                    <template>
@@ -467,34 +492,46 @@
              </div>
              <van-button 
              block 
              type="danger" 
              type="info" 
              @click="createTb" 
              style="margin-top: 8px;"
            >生成表格</van-button>
            </van-cell-group>
            <div v-if="tableData.length > 0" id="temperature-table" style="margin-top: 20px;">
            <div v-if="tableTbData.length > 0" id="temperature-table" style="margin-top: 20px;">
              <van-cell-group>
                  <!-- 表头 -->
                  <van-cell>
                      <div class="grid-header">
                      <div class="grid-header" style="display: flex; align-items: center; justify-content: center;">
                          <div v-for="(header, index) in [headers[0], ...headers.slice(1)]" 
                               :key="index" 
                               :style="index === 0 ? 'width: 100px' : 'flex: 1'">
                               :style="`${index === 0 ? 'flex: 2' : 'flex: 2'}; display: flex; align-items: center; justify-content: center;`">
                              {{ header }}
                          </div>
                      </div>
                  </van-cell>
                  
                  <!-- 数据行 -->
                  <div v-for="(row, rowIndex) in tableData" :key="rowIndex">
                  <div v-for="(row, rowIndex) in tableTbData" :key="rowIndex">
                    <div class="grid-row">
                        <!-- 水温列 -->
                        <div style="width: 100px">{{ row.temperature }}</div>
                        <div style="flex: 2; text-align: center; display: flex; align-items: center; justify-content: center;">{{ row.temperature }}</div>
                        <!-- 实际温度列 -->
                        <div style="flex: 2">
                          <van-field 
                              class="temperature-input"
                              style="font-size: 0.16rem !important; color: blue !important;"
                              v-model="formTbData.temperatureData[row.temperature].temp"
                              placeholder="输入温度值"
                              type="number"
                          />
                        </div>
                        <!-- 动态列 -->
                        <div v-for="(header, colIndex) in headers.slice(2)" 
                             :key="colIndex" 
                             style="flex: 1">
                             style="flex: 2">
                            <van-field 
                                class="flow-input"
                                style="font-size: 0.16rem !important; color: blue !important;"
                                v-model="formTbData.temperatureData[row.temperature][header]"
                                :placeholder="`输入${header}值`"
                                type="number"
@@ -504,6 +541,12 @@
                </div>
              </van-cell-group>
          </div>
          <van-button 
          block 
          type="primary" 
          @click="saveTableConfig" 
          style="margin-top: 8px;"
        >保存</van-button>
          </div>
          </van-popup>

@@ -513,7 +556,7 @@
  <%--<comback ></comback>--%>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder4" Runat="Server">
 <script src="../Js/IPQC_SJ/Add.js?<%=111112111145 %>"></script>
 <script src="../Js/IPQC_SJ/Add.js?<%=111112111148 %>"></script>
</asp:Content>



 H5/Js/IPQC_SJ/Add.js

@@ -2,34 +2,47 @@
    el: '#app',
    data: function () {
        return {
            tableData: [],      // 生成的表格数据
            tableTbData: [],      // "制热性能"生成的表格数据
            formTbData: {         // 表单数据
            temperatureData: {} // 存储温度数据
            temperatureData: {} // 存储的实际温度、实际流量数据
            },
            indexZrxx:0,//制热性能index
            headers: [],
            showZr: false,
            waterOptions: [
                { value: '100℃', text: '100℃' },
                { value: '99℃', text: '99℃' },
                { value: '90℃', text: '90℃' },
                { value: '85℃', text: '85℃' },
                { value: '80℃', text: '80℃' },
                { value: '75℃', text: '75℃' },
                { value: '65℃', text: '65℃' },
                { value: '60℃', text: '60℃' },
                { value: '55℃', text: '55℃' },
                { value: '45℃', text: '45℃' },
                { value: '42℃', text: '42℃' },
                { 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: '冰水', text: '冰水' },
                { value: '70℃', text: '70℃' },
                { value: '50℃', text: '50℃' },
                { value: '微冷', text: '微冷' }
            ],//水温选项
            flowOptions: [
                { 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' }
            ],
                { value: '50ml', text: '50ml' },
                { value: '120ml', text: '120ml' },
                { value: '150ml', text: '150ml' },
                { value: '160ml', text: '160ml' },
                { value: '250ml', text: '250ml' },
                { value: '260ml', text: '260ml' },
                { value: '350ml', text: '350ml' },
                { value: '360ml', text: '360ml' },
                { value: '450ml', text: '450ml' },
                { value: '550ml', text: '550ml' },
                { value: '750ml', text: '750ml' },
                { value: '999ml', text: '999ml' },
                { value: '一分钟流量', text: '一分钟流量' },
                { value: '三分钟流量', text: '三分钟流量' }
            ],//流量选项
            selectedWater: [],// 已选水温值
            selectedFlow: [],   // 已选流量值
            isLoading: false,
@@ -117,16 +130,16 @@
        },


        openZrPopup() {
        openZrPopup(index) {
            this.showZr = true;
            this.indexZrxx = this.tabActive;
            this.loadTableConfig();
        },
        closeZrPopup() {
            this.showZr = false;
            this.selectedWater = [];  // 关闭时清空选择
            this.selectedFlow = [];   // 关闭时清空选择
            // this.selectedWater = [];  // 关闭时清空选择
            // this.selectedFlow = [];   // 关闭时清空选择
        },


        //针对没有上下限值的数据，只需选择合格或不合格.按钮触发
        handleQualified(isQualified) {
            var input = "";
@@ -522,7 +535,7 @@
        },
        createTb() {
            // 清空旧数据
            this.tableData = [];
            this.tableTbData = [];
            this.formTbData.temperatureData = {};
    
            // 校验选择
@@ -532,20 +545,28 @@
            }
    
            // 生成表头
            const headers = ['设定温度','实际温度', ...this.selectedFlow.sort().map(f => f )];
            // 修改headers生成逻辑 ↓
            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 => {
            this.tableTbData = this.selectedWater.sort((a,b) => a - b).map(water => {
                const row = {
                    temperature: water === '常温水' ? water : water,
                    values: Object.fromEntries( // 使用对象代替数组
                        this.selectedFlow.map(flow => [flow, ''])
                    )
                    values: Object.fromEntries([
                        ['temp', ''],  // 固定温度字段
                        ...this.selectedFlow.map(flow => [flow, ''])
                    ])
                };
                
                // 初始化表单数据结构
                this.$set(this.formTbData.temperatureData, water, {});
                // 添加固定字段”实际温度“初始化
                this.$set(this.formTbData.temperatureData[water], 'temp', '');
                this.selectedFlow.forEach(flow => {
                    this.$set(this.formTbData.temperatureData[water], flow, '');
                });
@@ -560,5 +581,90 @@
            }, 100);
            console.log(this.formTbData);
        },
        // 新增保存配置方法
        saveTableConfig() {
            const that = this;
            that.isLoading = true;
            
            that.AxiosHttp("post", 'Ipqc/SaveTableConfig', {
                selectedWater: (that.selectedWater),
                selectedFlow: (that.selectedFlow),
                tableData: (that.formTbData.temperatureData),
                mxguid: that.tableData[that.indexZrxx].guid // 使用主表ID关联
            }, true).then(res1 => {
                if (res1.status === 0) {
                    that.$notify({ type: 'success', message: '配置保存成功' });
                } else {
                    that.$toast.fail(res1.rtnMsg);
                }
                that.isLoading = false;
            }).catch(error => {
                that.$toast.fail("网络错误，请重试！");
                that.isLoading = false;
            });
        },
        // 新增加载配置方法
        loadTableConfig() {
            const that = this;
            that.isLoading = true;
            var mxguid =  that.tableData[that.indexZrxx].guid;


            that.AxiosHttp("post", 'Ipqc/GetTableConfig', {
                mxguid: mxguid,
            }, true).then(res1 => {
                if (res1.status === 0 && res1.data) {
                    // 解析存储的数据
                    that.selectedWater = JSON.parse(res1.data.selectedWater || '[]');
                    that.selectedFlow = JSON.parse(res1.data.selectedFlow || '[]');
                    that.formTbData.temperatureData = JSON.parse(res1.data.tableData || '{}');
                    
                    // 调用新的渲染方法
                    this.renderExistingTable();
                }
                that.isLoading = false;
            }).catch(error => {
                that.isLoading = false;
                that.$toast.fail("加载配置失败");
            });
        },

        // 新增渲染已有数据表格的方法
        renderExistingTable() {
            const that = this;
            console.log(that.formTbData.temperatureData);
            // 从现有数据反向推导选择项
            const existingWaters = Object.keys(that.formTbData.temperatureData);
            const existingFlows = existingWaters.length > 0 
                ? Object.keys(that.formTbData.temperatureData[existingWaters[0]])
                    .filter(k => k !== 'temp')
                : [];
            
            // 生成表头（保留原始createTb的格式）
            that.headers = [
                '设定温度', 
                '实际温度（℃）', 
                ...existingFlows.map(f => `${f}`)
            ];
            
            // 生成行数据（保留原始结构）
            that.tableTbData = existingWaters.map(water => {
                const values = that.formTbData.temperatureData[water];
                return {
                    temperature: water,
                    values: Object.fromEntries([
                        ['temp', values.temp || ''],
                        ...existingFlows.map(flow => [flow, values[flow] || ''])
                    ])
                };
            });
            console.log(that.formTbData.temperatureData);
            // 保留原始滚动逻辑
            setTimeout(() => {
                const tableEl = document.getElementById('temperature-table');
                if (tableEl) tableEl.scrollIntoView({ behavior: 'smooth' });
            }, 100);
            console.log(that.formTbData.temperatureData);
        },
    }
})

 IPQC_SJ/Add.aspx