var vm = new Vue({ el: '#app', data: function () { return { tableTbData: [], // "制热性能"生成的表格数据 formTbData: { // 表单数据 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: '冰水', text: '冰水' }, { value: '70℃', text: '70℃' }, { value: '50℃', text: '50℃' }, { value: '微冷', text: '微冷' } ],//水温选项 flowOptions: [ { value: '50ml', text: '50ml' }, { value: '100ml', text: '100ml' }, { value: '120ml', text: '120ml' }, { value: '150ml', text: '150ml' }, { value: '160ml', text: '160ml' }, { value: '200ml', text: '200ml' }, { value: '250ml', text: '250ml' }, { value: '260ml', text: '260ml' }, { value: '300ml', text: '300ml' }, { value: '350ml', text: '350ml' }, { value: '360ml', text: '360ml' }, { value: '450ml', text: '450ml' }, { value: '500ml', text: '500ml' }, { value: '550ml', text: '550ml' }, { value: '600ml', text: '600ml' }, { value: '750ml', text: '750ml' }, { value: '999ml', text: '999ml' }, { value: '一分钟流量', text: '一分钟流量' }, { value: '三分钟流量', text: '三分钟流量' } ],//流量选项 selectedWater: [],// 已选水温值 selectedFlow: [], // 已选流量值 isLoading: false, userInfo: { "loginGuid": '', "loginAccount": '', }, formData: { id: "", releaseNo: "", createBy: "", createDate: "", lotNo: "", itemNo: "", billNo: "", fcovertQty: "", detailMem: "", taskNo: "", fcheckResu: "", boardModel: "", planQty: "", mocode: "", boardStyle: "" }, isShowTable: false, tableData: [],//返回的检验项目 jymxData: [],//展示的检验项目 remarks:'',//不合格描述 okNum:'',//合格数 ngNum: '',//不合格数 ttrre: false, show: false,//明细面板 tableMxData: [], tabActive: 0, inputValue: '',//特征值输入 resultValue: '',//检验结果录入 showButton: false,//右上角菜单触发 okValue: '',//OK-数量 ngValue: '',//NG-数量 showDialog: false,//不良表述输入框 showDialogRzxx: false,//认证信息输入框 rzxxValue: '',//认证信息输入值 //图片上传框 fileList: [ //{ // url: 'https://img01.yzcdn.cn/vant/leaf.jpg', // status: 'uploading', // message: '上传中...', //}, //{ // url: 'https://img01.yzcdn.cn/vant/tree.jpg', // status: 'failed', // message: '上传失败', //}, ], //时间选择参数 showScDatePicker: false, minDate: new Date(new Date().getFullYear() - 1, 0, 1), // 过去一年 maxDate: new Date(new Date().getFullYear() + 1, 11, 31), // 未来一年 currentDate: new Date(), scDate: '', // 存储格式化后的日期 //认证信息选择 showRzxx: false, actions: [], selectedRzxx: [], // 存储多选值 rzxxOptions: [], // 认证信息选项 } }, mounted() { var that = this; this.userInfo = { loginGuid: this.GetLoginInfor().loginGuid, loginAccount: this.GetLoginInfor().loginAccount, }; this.formData.id = this.Request("id"), this.formData.releaseNo = this.Request("releaseNo"); this.formData.lotNo = this.Request("lotNo"); this.init(); }, methods: { // 输入过滤 handleNumberInput1(value) { // 去除非数字并确保首位不为0(除非是单独的0) this.okValue = value.replace(/[^\d]/g, '') // 去除非数字字符 .replace(/^0+(?!$)/, ''); // 去除开头的0,除非整个字符串是0 }, handleNumberInput2(value) { // 去除非数字并确保首位不为0(除非是单独的0) this.ngValue = value.replace(/[^\d]/g, '') // 去除非数字字符 .replace(/^0+(?!$)/, ''); // 去除开头的0,除非整个字符串是0 }, handleNumberInput3(value) { this.inputValue = value.replace(/[^\d.]/g, '') // 1. 去除非数字和小数点 .replace(/(\..*)\./g, '$1') // 2. 禁止多个小数点 .replace(/^\./g, ''); }, openZrPopup(index) { this.showZr = true; this.indexZrxx = this.tabActive; this.loadTableConfig(); }, closeZrPopup() { this.showZr = false; // this.selectedWater = []; // 关闭时清空选择 // this.selectedFlow = []; // 关闭时清空选择 }, //针对没有上下限值的数据,只需选择合格或不合格.按钮触发 handleQualified(isQualified) { var input = ""; if (isQualified) { // 执行合格相关逻辑 input = "OK-1"; this.addJyzIpqc(input); } else { // 执行不合格相关逻辑 input = "NG-1"; this.addJyzIpqc(input); } }, togglePopup(index) { // 切换指定索引的 popup 状态 var that = this; this.show = true; console.log(index); console.log(that.tableData[index].guid); var mxguid = that.tableData[index].guid; that.jymxData = that.tableData[index]; that.tabActive = index; that.AxiosHttp("post", 'MesQaItemsDetect01Manager/GetModel12', { parentGuid : "", guid : mxguid , }, true, 1).then(function (res1) { if (res1.rtnCode == 1) { that.tableMxData = res1.rtnData; } else { that.$toast.fail(res1.rtnMsg); } }).catch(function (error) { that.$toast.fail("网络错误,请重试!"); console.log(error); }); }, getInputJYZ() { // 切换指定索引的 popup 状态 var that = this; if (!that.inputValue) { this.$toast.fail("检验值不能为空"); that.isLoading = false; return; } that.addJyzIpqc(that.inputValue); }, addJyzIpqc(input) { var that = this; var guid1 = that.formData.guid;//主表id var mxguid = that.tableData[that.tabActive].guid;//检验项目的guid that.isLoading = true; that.AxiosHttp("post", 'PqcManager/AddIpqcJyz', { inOrderGuid1: guid1, inOrderGuid5: mxguid, inP1: input,//或者0k-19,或者ng-19,或实际检验值 }, true, 1).then(function (res1) { if (res1.rtnCode > 0) { that.$notify({ type: 'success', message: res1.rtnMsg }); that.refreshJYItem();//刷新检验项目 //that.handleTabClick();//刷新检验明细面板 //that.$refs.inputValue.focus(); that.inputValue = null; } else { that.$toast.fail(res1.rtnMsg); that.inputValue = null; } that.isLoading = false; }).catch(function (error) { that.$toast.fail("网络错误,请重试!"); that.inputValue = null; that.isLoading = false; }); }, handleTabClick() { console.log(this.tabActive) this.togglePopup(this.tabActive); }, //检验明细刷新 refreshJYItem() { const that = this; return that.AxiosHttp("post", 'Ipqc/getJYItem', { releaseNo: that.formData.releaseNo }, false).then(res1 => { const tableData = res1.data.tbBillList || []; that.tableData = tableData; that.handleTabClick();//刷新检验明细面板 }).catch(error => { that.$toast.fail("网络错误,请重试!"); console.error('Refresh error:', error); }); }, //主页面加载 init() { //alert(this.Request("id")); var that = this; that.showButton = false; that.AxiosHttp("post", 'Ipqc/getPageSj', { id: that.Request("id"), pageIndex: 1, limit: 1, }, false) .then(function (res) { let data = res.data.tbBillList[0]; if (data) { that.formData = data; that.remarks = that.formData.fnGDesc; that.AxiosHttp("post", 'Ipqc/getJYItem', { //id: that.formData.guid, releaseNo: that.formData.releaseNo }, false).then(function (res1) { let tableData = res1.data.tbBillList //当已检验个数都不为空时按照检测结构排序 tableData.sort((a, b) => { if (a.result === '未完成' && b.result === '合格') { return -1; } else if (a.result === '合格' && b.result === '未完成') { return 1; } else { return 0; } }); that.tableData = tableData; that.GetImageFileByGid(); //if (that.tableData.length === 0) { // that.isShowTable = true; //} }).catch(function (error) { that.$toast.fail("网络错误,请重试!"); console.log(error); }); } }) .catch(function (error) { that.$toast.fail("网络错误,请重试!"); console.log(error); }); }, submit() { var that = this; that.ttrre = true; that.AxiosHttp("post", 'FqcManager/EditModelSubmit', { guid: that.formData.guid }, true, 1).then(function (res1) { if (res1.rtnData.outSum == 1) { that.$notify({ type: 'success', message: '提交成功' }); that.init(); } else { that.$toast.fail(res1.rtnData.outMsg); } that.ttrre = false }).catch(function (error) { that.$toast.fail("网络错误,请重试!"); that.ttrre = false console.log(error); }); }, removeXJ() { const that = this; // 添加确认弹窗 that.$dialog.confirm({ message: '确认要重新加载检验项目吗?', confirmButtonText: '确认', cancelButtonText: '取消' }).then(() => { // 确认回调 that.isLoading = true; that.AxiosHttp("post", 'MesQaItemsDetect01Manager/ReloadModel5', { guid: that.formData.guid }, true, 1).then(res1 => { if (res1.rtnCode == 1) { that.$notify({ type: 'success', message: '重新加载成功' }); that.init(); } else { that.$toast.fail(res1.rtnMsg); } that.isLoading = false; }).catch(error => { that.$toast.fail("网络错误,请重试!"); that.isLoading = false; }); }).catch(() => { // 取消回调 that.$toast('已取消操作'); }); }, GetBack1() { window.history.back(); }, onClickRight() { }, updateRemarks(guid) { this.showDialog= true }, // updateRzxx() { // this.showDialogRzxx = true // }, //删除检验明细记录 deleteDetail13(guid12) { const that = this; var guid1 = that.formData.guid;//主表id var mxguid = that.tableData[that.tabActive].guid;//检验项目的guid // 添加确认弹窗 that.$dialog.confirm({ message: '确认要删除该检验值记录吗?', confirmButtonText: '确认', cancelButtonText: '取消' }).then(() => { // 确认回调 that.isLoading = true; that.AxiosHttp("post", 'PqcManager/DeleteIpqcJyz', { inOrderGuid1: guid1, inOrderGuid5: mxguid, inOrderGuid12: guid12 }, true, 1).then(res1 => { if (res1.rtnCode > 0) { that.$notify({ type: 'success', message: res1.rtnMsg }); that.refreshJYItem();//刷新检验项目 } else { that.$toast.fail(res1.rtnMsg); } that.isLoading = false; }).catch(error => { that.$toast.fail("网络错误,请重试!"); that.isLoading = false; }); }).catch(() => { // 取消回调 that.$toast('已取消操作'); that.isLoading = false; }); }, //更新认证信息 rzxxConfirm() { var that = this; var guid1 = that.formData.guid;//主表id var mxguid = that.tableData[that.tabActive].guid;//检验项目的guid that.isLoading = true; that.AxiosHttp("post", 'Ipqc/updateIpqcRzxx', { gid: guid1, pid: mxguid, inRzxxValue: that.rzxxValue,//输入的认证信息 }, true, 0).then(function (res) { var json = res; if (json.status == 0) { that.$notify({ type: 'success', message: '输入成功' }); //that.refreshJYItem();//刷新检验项目 } else { that.$toast.fail(json.message); } //that.$notify({ type: 'success', message: json.message }); that.isLoading = false; }).catch(function (error) { that.$toast.fail("网络错误,请重试!"); that.inRzxxValue = null; that.isLoading = false; }); }, // 修改原rzxxConfirm方法 updateRzxxToServer(selectedValues) { var that = this; that.AxiosHttp("post", 'Ipqc/updateIpqcRzxx', { gid: that.formData.guid, pid: that.tableData[that.tabActive].guid, inRzxxValue: that.jymxData.ipqcrzxx // 改为数组格式 }).then(res => { var json = res; if (json.status == 0) { that.$notify({ type: 'success', message: '输入成功' }); //that.refreshJYItem();//刷新检验项目 } else { that.$toast.fail(json.message); } //that.$notify({ type: 'success', message: json.message }); that.isLoading = false; }).catch(function (error) { that.$toast.fail("网络错误,请重试!"); that.inRzxxValue = null; that.isLoading = false; }); }, //更新不合格表述 remarksConfirm() { const that = this; that.isLoading = true; var guid = that.formData.guid; that.AxiosHttp("post", 'Llj/updateRemarks', { gid: guid, Remarks: that.remarks }, true, 0).then(res1 => { if (res1.status == 0) { that.$notify({ type: 'success', message: '输入成功' }); that.init();//刷新检验项目 } else { that.$toast.fail(res1.rtnMsg); } that.isLoading = false; }).catch(error => { that.$toast.fail("网络错误,请重试!"); that.isLoading = false; }); }, async afterRead(file) { try { //alert(APIURL_IMAGE); // 1. 显示上传中状态 file.status = 'uploading'; file.message = '上传中...'; // 2. 创建 FormData(关键:字段名必须和后端参数名一致) const formData = new FormData(); // 3. 构造文件名(根据后端要求用 ~ 分割) // 假设需要 parentGuid,这里从组件数据获取 const parentGuid = this.formData.guid; // 根据你的实际数据源调整 const customFileName = `${parentGuid}~${file.file.name}`; // 4. 添加文件(第二个参数必须使用 new File 包装) formData.append('file', new File([file.file], customFileName, { type: file.file.type })); // 5. 调用统一封装的 Axios 方法 const res = await this.AxiosHttp( 'post', 'MesFile/UploadFile', // 根据实际接口路径调整 formData, true, // 显示加载状态 1 // 超时时间 ); // 6. 处理响应 if (res.rtnCode === 1) { file.status = 'done'; file.message = '上传成功'; file.urlPath = res.rtnData.urlPath; // 保存返回的文件路径 file.id = res.rtnData.id; // 保存返回的文件id // 可选:上传成功后刷新文件列表 // await this.loadFileList(); } else { file.status = 'failed'; file.message = res.rtnMsg || '上传失败'; this.$toast.fail(res.rtnMsg); } } catch (error) { // 7. 异常处理 file.status = 'failed'; file.message = '上传异常'; this.$toast.fail('网络错误,请重试'); console.error('上传错误:', error); } finally { // 8. 强制更新视图(Vant 3+ 可能需要) this.$nextTick(); } }, //获取图片信息 GetImageFileByGid() { const that = this; that.AxiosHttp("post", 'MesImage/getImage', { parentId: that.formData.guid, }, true, 0).then(res1 => { if (res1.status === 0) { // 关键转换:将后端数据转换为 van-uploader 需要的格式 that.fileList = res1.data.tbBillList.map(item => ({ url: `${APIURL_IMAGE}/${item.urlPath}`, // 拼接完整访问路径 status: 'done', // 标记为已上传成功 name: item.fileTitle, // 可选显示文件名 message: '已上传', // 可选状态文字 // 保留原始数据(按需) id: item.guid })); } else { that.$toast.fail(res1.rtnMsg); } }).catch(error => { that.$toast.fail("网络错误,请重试!"); }); }, handleDelete(file, { index }) { var that = this; that.$dialog.confirm({ title: '确认删除', message: '确定要删除这张图片吗?' }).then(() => { // 确认删除逻辑 console.log(file); that.AxiosHttp("post", 'MesImage/deleteImage', { id: file.id, }, true, 0).then(res1 => { if (res1.status === 0) { that.$notify({ type: 'success', message: '删除成功' }); } else { that.$toast.fail(res1.rtnMsg); } that.init();//刷新检验项目 }).catch(error => { that.$toast.fail("网络错误,请重试!"); }); }).catch(() => { // 取消操作 that.init();//刷新检验项目 }) }, createTb() { // 清空旧数据 this.tableTbData = []; this.formTbData.temperatureData = {}; // 校验选择 if (this.selectedWater.length === 0 || this.selectedFlow.length === 0) { this.$toast.fail('请先选择水温和流量'); return; } // 生成表头 // 修改headers生成逻辑 ↓ const headers = [ '设定温度', '实际温度(℃)', ...this.selectedFlow.sort().map(f => `${f}`) ]; this.headers = headers; console.log(this.headers); // 生成行数据 this.tableTbData = this.selectedWater.sort((a,b) => a - b).map(water => { const row = { temperature: water === '常温水' ? water : water, 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, ''); }); return row; }); // 自动滚动到表格区域 setTimeout(() => { const tableEl = document.getElementById('temperature-table'); if (tableEl) tableEl.scrollIntoView({ behavior: 'smooth' }); }, 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); }, //保存生产日期 confirmScDate(value) { const date = new Date(value); this.scDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`; //this.rzxxValue = this.scDate; // 同时更新认证信息字段 console.log(this.scDate); var that = this; var guid1 = that.formData.guid;//主表id var mxguid = that.tableData[that.tabActive].guid;//检验项目的guid that.isLoading = true; that.AxiosHttp("post", 'Ipqc/updateScDate', { gid: guid1, mxguid: mxguid, scDateValue: that.scDate,//输入的认证信息 }, true, 0).then(function (res) { var json = res; if (json.status == 0) { that.$notify({ type: 'success', message: '输入成功' }); that.refreshJYItem();//刷新检验项目 } else { that.$toast.fail(json.message); } //that.$notify({ type: 'success', message: json.message }); that.isLoading = false; }).catch(function (error) { that.$toast.fail("网络错误,请重试!"); that.inRzxxValue = null; that.isLoading = false; }); this.showScDatePicker = false; }, selectRzxx() { this.showRzxx = true; this.getRzxxList(); }, //获取认证信息相关列表 getRzxxList() { var that = this; that.rzxxOptions = []; that.isLoading = true; var mxguid = that.tableData[that.tabActive].guid;//检验项目的guid that.AxiosHttp("post", 'Ipqc/GetRzxxList', { // 根据实际接口需要传递参数 mxguid: mxguid, }, false) .then(function (res) { if (res.status == 0) { // that.actions = res.data.tbBillList.map(item => { // return { name: item.defect_name } // 根据实际数据结构调整 // }); that.rzxxOptions = res.data.tbBillList.map(item => ({ value: item.defect_name, // 假设guid是唯一标识符 text: item.defect_name // 认证信息名称 })); } else { that.$toast.fail(res.message); } that.isLoading = false; }) .catch(function (error) { that.isLoading = false; that.$toast.fail("获取认证信息失败"); }); }, // 新增确认多选方法 confirmMultiRzxx() { const selectedTexts = this.rzxxOptions .filter(item => this.selectedRzxx.includes(item.value)) .map(item => item.text); // 修改这里:用换行符替代逗号分隔 this.jymxData.ipqcrzxx = selectedTexts.join('\n'); this.showRzxx = false; // 更新多选值到后端 this.updateRzxxToServer(selectedTexts); }, //选择认证信息 onRzxxSelect(item) { this.showRzxx = false; this.rzxxValue = item.name; this.rzxxConfirm(); //this.refreshJYItem();//刷新检验项目 // 如果需要获取详细信息可在此处调用其他方法 }, //更新认证信息使用数量 updateRzxxNum(value, index) { // 添加防抖判断 if (this.isLoading) { return; } const that = this; that.isLoading = true; that.AxiosHttp("post", 'Ipqc/saveIpqcrzxxNum', { guid: that.tableData[that.tabActive].guid, ipqcrzxxNum: value }, true, 0).then(res => { if (res.status == 0) { //that.$notify({ type: 'success', message: '数量更新成功' }); //that.refreshJYItem();//刷新检验项目 } else { that.$toast.fail(res.rtnMsg); } that.isLoading = false; }).catch(error => { that.isLoading = false; that.$toast.fail("网络错误,请重试!"); }); }, //更新是否有无异味 updateCpscs(value) { // 添加防抖判断 if (this.isLoading) { return; } const that = this; that.isLoading = true; if (!value) return; that.AxiosHttp("post", 'Ipqc/saveIpqCpscs', { guid: that.tableData[that.tabActive].guid, ipqCpscs: value }, true, 0).then(res => { if (res.status == 0) { //that.refreshJYItem(); } else { that.$toast.fail(res.rtnMsg); } that.isLoading = false; }).catch(error => { that.isLoading = false; that.$toast.fail("网络错误,请重试!"); }); }, } })