388 lines
13 KiB
Vue
388 lines
13 KiB
Vue
<template>
|
||
<uni-forms ref="formRef" :model="formData" :rules="rules" label-width="100px" label-position="top">
|
||
<uni-forms-item label="合同号" name="cusName" class="f-c-right">
|
||
<view @click="chooseCustomer" class="form-item-container">
|
||
<text class="name">{{ formData.gkOrder || '点击选择合同数据' }}</text>
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="合同号" name="gkOrder" class="f-c-right">
|
||
<uni-easyinput v-model="formData.gkOrder" placeholder="请输入合同号" name="input" :disabled="isDisabled"/>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="产品规格型号" name="gkProductSpec" class="f-c-right">
|
||
<uni-easyinput v-model="formData.gkProductSpec" placeholder="请输入产品规格型号" name="input" :disabled="isDisabled"/>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="数量" name="gkAmount" class="f-c-right">
|
||
<uni-easyinput v-model="formData.gkAmount" type="text" placeholder="请输入供货数量" name="input" :disabled="isDisabled"/>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="批号" name="gkTokenCode" class="f-c-right">
|
||
<uni-easyinput v-model="formData.gkTokenCode" placeholder="请输入批号" name="input" :disabled="isDisabled" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="母批号" name="gkMotherorderCode" class="f-c-right">
|
||
<uni-easyinput v-model="formData.gkMotherorderCode" placeholder="请输入母批号" name="input" :disabled="isDisabled"/>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="图纸编号" name="gkDrawingNumber" class="f-c-right">
|
||
<uni-easyinput v-model="formData.gkDrawingNumber" placeholder="请输入图纸编号" name="input" :disabled="isDisabled"/>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="技术负责人" name="gkTechnicalDirector" class="f-c-right">
|
||
<uni-easyinput v-model="formData.gkTechnicalDirector" placeholder="请输入技术负责人" name="input" :disabled="isDisabled"/>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="产品ID" name="gkProductId" class="f-c-right">
|
||
<uni-easyinput v-model="formData.gkProductId" placeholder="请输入产品ID" name="input" :disabled="isDisabled"/>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
<view class="footer-con">
|
||
<button class="btn-default" type="default" @click="handleDeleteDetailItem" size="mini" v-if="false">删除</button>
|
||
<button class="btn-primary" type="primary" @click="submitForm" size="mini">保存</button>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup name="gkQualityFeedbackDetailComponent">
|
||
import { ref, reactive } from 'vue'
|
||
import cache from '../../../../utils/cache'
|
||
import { onShow,onLoad, onUnload } from '@dcloudio/uni-app';
|
||
import {
|
||
qualityFeedbackGkDetailAdd
|
||
} from '@/api/eqf/qualityFeedback.js'
|
||
|
||
let isDisabled = ref(false)
|
||
const props = defineProps({
|
||
cusName: String, //客户单位名称
|
||
cusId: Number, //客户ID
|
||
feedbackId: Number, //质量反馈ID
|
||
status: String //状态
|
||
})
|
||
|
||
// 表单数据
|
||
const formData = ref({
|
||
customerCode: '',
|
||
batchNumber: '',
|
||
supplyQuantity: '',
|
||
specificationModel: '',
|
||
motherBatch: '',
|
||
materialId: '',
|
||
eqfId: '',
|
||
drawingNumber:'',
|
||
technicalDirector:'',
|
||
});
|
||
|
||
// 验证规则
|
||
const rules = {
|
||
contractNumber: {
|
||
rules: [
|
||
{ required: true, errorMessage: '请输入合同号' }
|
||
]
|
||
},
|
||
batchNumber: {
|
||
rules: [
|
||
{ required: true, errorMessage: '请输入批号' }
|
||
]
|
||
},
|
||
supplyQuantity: {
|
||
rules: [
|
||
{ required: true, errorMessage: '请输入供货数量' },
|
||
{ type: 'number', errorMessage: '请输入数字' }
|
||
]
|
||
},
|
||
specificationModel: {
|
||
rules: [
|
||
{ required: true, errorMessage: '请输入产品规格型号' }
|
||
]
|
||
}
|
||
};
|
||
|
||
// 表单ref
|
||
const formRef = ref(null);
|
||
|
||
|
||
onLoad((options) => {
|
||
//清空表单
|
||
clearForm()
|
||
// 然后设置eqfId
|
||
if (options && options.id) {
|
||
formData.value.eqfId = options.id;
|
||
}
|
||
// 清除相关缓存，确保首次加载时没有旧数据干扰
|
||
cache.remove(`qualityFeedbackDetail_${options?.id || ''}`);
|
||
})
|
||
|
||
//获取当前外反的明细
|
||
const detailList = ref([])
|
||
const getQualityFeedbackDetail = async () => {
|
||
let param = {
|
||
eqfId: formData.value.eqfId
|
||
}
|
||
let detailRes = await qualityFeedbackDetailAdd(param);
|
||
detailList.value = detailRes.rows[0];
|
||
}
|
||
|
||
//删除明细项的内容
|
||
function handleDeleteDetailItem() {
|
||
// 使用本地存储或其他方式暂存删除操作
|
||
uni.showToast({
|
||
title: '删除成功',
|
||
duration: 2000
|
||
});
|
||
//清空表单
|
||
clearForm()
|
||
}
|
||
|
||
// 清空表单
|
||
function clearForm() {
|
||
formData.value.gkOrder = ''
|
||
formData.value.gkProductSpec = ''
|
||
formData.value.gkAmount = ''
|
||
formData.value.gkTokenCode = ''
|
||
formData.value.gkMotherorderCode = ''
|
||
formData.value.gkDrawingNumber = ''
|
||
formData.value.gkTechnicalDirector = ''
|
||
formData.value.gkProductId = ''
|
||
}
|
||
|
||
// 选择合同页面跳转
|
||
function chooseCustomer() {
|
||
uni.navigateTo({
|
||
url: '/pages/business/EQF/components/gkCustomerOrder'
|
||
})
|
||
}
|
||
|
||
// 提交表单
|
||
const submitForm = async () => {
|
||
try {
|
||
// 表单校验
|
||
await formRef.value.validate()
|
||
console.log(formData,"5555")
|
||
const res = await qualityFeedbackGkDetailAdd(formData.value);
|
||
uni.showToast({
|
||
title: '提交成功',
|
||
icon: 'success'
|
||
})
|
||
// 发送刷新列表事件，同时支持两种事件名称以兼容现有代码
|
||
uni.$emit('refreshMarketList');
|
||
uni.$emit('refreshFeedbackList');
|
||
setTimeout(() => {
|
||
uni.navigateBack(1);
|
||
}, 1500);
|
||
|
||
console.log('表单数据:', formData.value)
|
||
} catch (err) {
|
||
console.log('表单验证失败:', err)
|
||
}
|
||
}
|
||
|
||
|
||
//页面渲染完成后，查询详情
|
||
onShow(() => {
|
||
// Try to load from cache if available
|
||
const cachedData = cache.get(`qualityFeedbackDetail_${props.feedbackId}`);
|
||
if (cachedData) {
|
||
formData.value = {
|
||
...formData.value,
|
||
...cachedData
|
||
};
|
||
}
|
||
|
||
if (props.status == '完成') {
|
||
isDisabled.value = true
|
||
} else {
|
||
isDisabled.value = false
|
||
}
|
||
|
||
// 监听客户订单选择事件
|
||
uni.$on('onCustomerSelected', handleCustomerSelected);
|
||
});
|
||
|
||
// 处理客户订单选择结果
|
||
function handleCustomerSelected(data) {
|
||
// 确保数据存在
|
||
if (!data || typeof data !== 'object') {
|
||
console.error('无效的数据:', data);
|
||
return;
|
||
}
|
||
|
||
// 如果返回的是对象
|
||
let selectedItems = [];
|
||
|
||
console.log('接收到的数据:', data);
|
||
|
||
// 兼容新格式
|
||
selectedItems = data.originalData || [];
|
||
|
||
if (selectedItems && selectedItems.length > 0) {
|
||
// 清空表单
|
||
clearForm();
|
||
|
||
console.log('选中的项目数量:', selectedItems.length);
|
||
console.log('选中的项目详情:', selectedItems);
|
||
|
||
// 循环拼接所有选中项目的字段
|
||
const gkOrder = selectedItems.map(item => item.gkOrder || '').filter(Boolean);
|
||
const gkProductSpec = selectedItems.map(item => item.gkProductSpec || '').filter(Boolean);
|
||
const gkAmount = selectedItems.map(item => item.gkAmount || '').filter(Boolean);
|
||
const gkTokenCode = selectedItems.map(item => item.gkTokenCode || '').filter(Boolean);
|
||
const gkMotherorderCode = selectedItems.map(item => item.gkMotherorderCode || '').filter(Boolean);
|
||
const gkDrawingNumber = selectedItems.map(item => item.gkDrawingNumber || '').filter(Boolean);
|
||
const gkTechnicalDirector = selectedItems.map(item => item.gkTechnicalDirector || '').filter(Boolean);
|
||
const gkProductId = selectedItems.map(item => item.gkProductId || '').filter(Boolean);
|
||
|
||
|
||
console.log('拼接前的合同号:', gkOrder);
|
||
|
||
// 使用nextTick确保DOM更新
|
||
setTimeout(() => {
|
||
formData.value.gkOrder = gkOrder.join(',');
|
||
formData.value.gkProductSpec = gkProductSpec.join(',');
|
||
formData.value.gkAmount = gkAmount.join(',');
|
||
formData.value.gkTokenCode = gkTokenCode.join(',');
|
||
formData.value.gkMotherorderCode = gkMotherorderCode.join(',');
|
||
formData.value.gkDrawingNumber = gkDrawingNumber.join(',');
|
||
formData.value.gkTechnicalDirector = gkTechnicalDirector.join(',');
|
||
formData.value.gkProductId = gkProductId.join(',');
|
||
|
||
console.log('设置后的表单数据:', formData.value);
|
||
}, 0);
|
||
|
||
// 显示提示信息
|
||
uni.showToast({
|
||
title: `已选择${selectedItems.length}个批次`,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
|
||
// 保存到缓存
|
||
cache.set(`qualityFeedbackDetail_${props.feedbackId || ''}`, formData.value);
|
||
}
|
||
};
|
||
|
||
// 页面卸载时移除事件监听
|
||
onUnload(() => {
|
||
uni.$off('onCustomerSelected', handleCustomerSelected);
|
||
});
|
||
|
||
// 处理批号变化，自动查询数据
|
||
const handleBatchNumberChange = async (value) => {
|
||
const trimmedValue = value?.trim() || '';
|
||
// 防止空值查询
|
||
if (!trimmedValue) {
|
||
console.log('批号为空，不执行查询');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 显示加载提示
|
||
uni.showLoading({
|
||
title: '查询中...',
|
||
});
|
||
const param = { batchNumber: value };
|
||
console.log('查询参数:', param);
|
||
// 尝试从缓存获取数据，减少重复请求
|
||
const cacheKey = `batchInfo_${trimmedValue}`;
|
||
let batchInfo = cache.get(cacheKey);
|
||
console.log('缓存数据:', batchInfo);
|
||
|
||
if (1==1) {
|
||
// 调用API获取数据
|
||
console.log('准备调用API...');
|
||
let apiData
|
||
try {
|
||
const res = await getMockBatchData(param);
|
||
console.log('API响应原始数据:', res);
|
||
// 根据isTransformResponse=false的设置，正确处理响应数据
|
||
// 修复4: 处理可能的嵌套数据结构
|
||
apiData = res;
|
||
// 检查是否有data字段，适应不同的响应结构
|
||
if (res.data !== undefined) {
|
||
apiData = res.data;
|
||
}
|
||
} catch (apiError) {
|
||
console.error('API调用直接失败:', apiError);
|
||
// 重新抛出错误，让外层catch处理
|
||
throw new Error(`API调用失败: ${apiError?.message || '未知错误'}`);
|
||
}
|
||
|
||
console.log('处理后的数据:', apiData);
|
||
|
||
if (typeof apiData === 'object' && apiData !== null) {
|
||
// 提取并格式化有用的数据
|
||
batchInfo = {
|
||
supplyQuantity: apiData.supplyQuantity || '',
|
||
specificationModel: apiData.specificationModel || '',
|
||
motherBatch: apiData.motherBatch || '',
|
||
materialId: apiData.materialId || '',
|
||
batchNumber: trimmedValue // 确保不会覆盖用户已输入的批号
|
||
};
|
||
|
||
// 保存到缓存，过期时间设置为1小时
|
||
cache.set(cacheKey, batchInfo, 3600000);
|
||
|
||
// 安全更新表单数据，避免覆盖整个formData对象
|
||
formData.value.batchNumber = trimmedValue;
|
||
formData.value.supplyQuantity = apiData.rows[0].amount || '';
|
||
formData.value.specificationModel = apiData.rows[0].itemName || '';
|
||
formData.value.motherBatch = apiData.rows[0].texing || '';
|
||
formData.value.materialId = apiData.rows[0].materialId || '';
|
||
formData.value.customerCode = apiData.rows[0].orderCode || '';
|
||
|
||
console.log('apiData:', apiData.rows[0]);
|
||
console.log('更新后的formData:', formData.value);
|
||
|
||
// 显示查询成功提示
|
||
uni.showToast({
|
||
title: '查询成功',
|
||
duration: 2000
|
||
});
|
||
} else {
|
||
// 没有数据时的处理
|
||
console.log('未查询到相关数据');
|
||
uni.showToast({
|
||
title: '未查询到相关数据',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
} else {
|
||
// 使用缓存数据更新表单
|
||
formData.value = {
|
||
...formData.value,
|
||
...batchInfo,
|
||
// 确保不会覆盖用户正在输入的批号
|
||
batchNumber: trimmedValue
|
||
};
|
||
}
|
||
} catch (error) {
|
||
console.error('查询批号数据失败:', error);
|
||
uni.showToast({
|
||
title: '查询失败，请重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
} finally {
|
||
// 隐藏加载提示
|
||
uni.hideLoading();
|
||
}
|
||
};
|
||
|
||
|
||
// 明确暴露给父组件的方法
|
||
defineExpose({
|
||
clearForm
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.footer-con {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding: 20rpx;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.btn-default {
|
||
background-color: #f0f0f0;
|
||
color: #333;
|
||
}
|
||
|
||
.btn-primary {
|
||
background-color: #6FA2F8;
|
||
color: #fff;
|
||
}
|
||
</style> |