| | |
| | | <template> |
| | | <div> |
| | | <el-dialog |
| | | v-model="dialogFormVisible" |
| | | :title="operationType === 'add' ? '新增原材料检验' : '编辑原材料检验'" |
| | | width="70%" |
| | | @close="closeDia" |
| | | > |
| | | <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef"> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="供应商:" prop="supplier"> |
| | | <el-select |
| | | v-model="form.supplier" |
| | | placeholder="请选择" |
| | | clearable |
| | | > |
| | | <el-option |
| | | v-for="item in supplierList" |
| | | :key="item.id" |
| | | :label="item.supplierName" |
| | | :value="item.supplierName" |
| | | /> |
| | | <el-dialog v-model="dialogFormVisible" |
| | | :title="operationType === 'add' ? '新增原材料检验' : '编辑原材料检验'" |
| | | width="70%" |
| | | @close="closeDia"> |
| | | <el-form :model="form" |
| | | label-width="100px" |
| | | label-position="left" |
| | | :rules="rules" |
| | | ref="formRef" |
| | | class="inspection-form"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="8"> |
| | | <el-form-item label="供应商:" |
| | | prop="supplier"> |
| | | <el-input v-model="form.supplier" |
| | | placeholder="请输入" |
| | | clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="产品:" |
| | | prop="productId"> |
| | | <el-button type="primary" |
| | | @click="openProductSelectDialog" |
| | | :disabled="operationType === 'edit'" |
| | | class="product-select-btn">{{form.productName || "选择产品"}}{{form.model?(" - "+form.model):""}}</el-button> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="试样编号:" |
| | | prop="sampleCode"> |
| | | <el-input v-model="form.sampleCode" |
| | | placeholder="请输入" |
| | | clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="车牌号:" |
| | | prop="licensePlateNumber"> |
| | | <el-input v-model="form.licensePlateNumber" |
| | | placeholder="请输入" |
| | | clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="检测性质:" |
| | | prop="inspectNature"> |
| | | <el-select v-model="form.inspectNature" |
| | | style="width: 100%"> |
| | | <el-option label="日常检测" |
| | | value="日常检测" /> |
| | | <el-option label="入场验收" |
| | | value="入场验收" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="产品名称:" prop="productId"> |
| | | <el-tree-select |
| | | v-model="form.productId" |
| | | placeholder="请选择" |
| | | clearable |
| | | check-strictly |
| | | @change="getModels" |
| | | :data="productOptions" |
| | | :render-after-expand="false" |
| | | :disabled="operationType === 'edit'" |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="规格型号:" prop="productModelId"> |
| | | <el-select v-model="form.productModelId" placeholder="请选择" clearable :disabled="operationType === 'edit'" |
| | | filterable readonly @change="handleChangeModel"> |
| | | <el-option v-for="item in modelOptions" :key="item.id" :label="item.model" :value="item.id" /> |
| | | <el-col :span="8"> |
| | | <el-form-item label="试样状态:" |
| | | prop="sampleState"> |
| | | <el-select v-model="form.sampleState" |
| | | style="width: 100%"> |
| | | <el-option label="固体" |
| | | value="固体" /> |
| | | <el-option label="颗粒" |
| | | value="颗粒" /> |
| | | <el-option label="膏体" |
| | | value="膏体" /> |
| | | <el-option label="粉末" |
| | | value="粉末" /> |
| | | <el-option label="液体" |
| | | value="液体" /> |
| | | <el-option label="气体" |
| | | value="气体" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="指标选择:" prop="testStandardId"> |
| | | <el-select |
| | | v-model="form.testStandardId" |
| | | placeholder="请选择指标" |
| | | clearable |
| | | @change="handleTestStandardChange" |
| | | style="width: 100%" |
| | | > |
| | | <el-option |
| | | v-for="item in testStandardOptions" |
| | | :key="item.id" |
| | | :label="item.standardName || item.standardNo" |
| | | :value="item.id" |
| | | /> |
| | | <el-col :span="8"> |
| | | <el-form-item label="数量:" |
| | | prop="quantity"> |
| | | <el-input type="number" |
| | | v-model="form.quantity" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="单位:" |
| | | prop="unit"> |
| | | <el-input v-model="form.unit" |
| | | disabled /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="指标选择:" |
| | | prop="testStandardId"> |
| | | <el-select v-model="form.testStandardId" |
| | | placeholder="请选择指标" |
| | | clearable |
| | | @change="handleTestStandardChange" |
| | | style="width: 100%"> |
| | | <el-option v-for="item in testStandardOptions" |
| | | :key="item.id" |
| | | :label="item.standardName || item.standardNo" |
| | | :value="item.id" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="单位:" prop="unit"> |
| | | <el-input v-model="form.unit" disabled/> |
| | | <el-col :span="8"> |
| | | <el-form-item label="检测单位:" |
| | | prop="checkCompany"> |
| | | <el-input v-model="form.checkCompany" |
| | | placeholder="请输入" |
| | | clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="数量:" prop="quantity"> |
| | | <el-input-number :step="0.01" :min="0" style="width: 100%" v-model="form.quantity" placeholder="请输入" |
| | | clearable :precision="2"/> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="检测单位:" prop="checkCompany"> |
| | | <el-input v-model="form.checkCompany" placeholder="请输入" clearable/> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="检测结果:" prop="checkResult"> |
| | | <el-select v-model="form.checkResult"> |
| | | <el-option label="合格" value="合格"/> |
| | | <el-option label="不合格" value="不合格"/> |
| | | <el-col :span="8"> |
| | | <el-form-item label="检测结果:" |
| | | prop="checkResult"> |
| | | <el-select v-model="form.checkResult" |
| | | style="width: 100%"> |
| | | <el-option label="合格" |
| | | value="合格" /> |
| | | <el-option label="不合格" |
| | | value="不合格" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="检验员:" prop="checkName"> |
| | | <el-input v-model="form.checkName" placeholder="请输入" clearable/> |
| | | |
| | | <el-col :span="8"> |
| | | <el-form-item label="检验员:" |
| | | prop="checkName"> |
| | | <el-select v-model="form.checkName" |
| | | placeholder="请选择" |
| | | clearable |
| | | style="width: 100%"> |
| | | <el-option v-for="item in userList" |
| | | :key="item.nickName" |
| | | :label="item.nickName" |
| | | :value="item.nickName" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="检测日期:" prop="checkTime"> |
| | | <el-date-picker |
| | | v-model="form.checkTime" |
| | | type="date" |
| | | placeholder="请选择日期" |
| | | value-format="YYYY-MM-DD" |
| | | format="YYYY-MM-DD" |
| | | clearable |
| | | style="width: 100%" |
| | | /> |
| | | <el-col :span="8"> |
| | | <el-form-item label="检测日期:" |
| | | prop="checkTime"> |
| | | <el-date-picker v-model="form.checkTime" |
| | | type="date" |
| | | placeholder="请选择日期" |
| | | value-format="YYYY-MM-DD" |
| | | format="YYYY-MM-DD" |
| | | clearable |
| | | style="width: 100%" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="取样日期:" |
| | | prop="sampleTime"> |
| | | <el-date-picker v-model="form.sampleTime" |
| | | type="date" |
| | | placeholder="请选择日期" |
| | | value-format="YYYY-MM-DD" |
| | | format="YYYY-MM-DD" |
| | | clearable |
| | | style="width: 100%" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <!-- <div style="margin-bottom: 10px;text-align: right">--> |
| | | <!-- <el-button type="danger" plain @click="handleDelete">删除</el-button>--> |
| | | <!-- </div>--> |
| | | <PIMTable |
| | | rowKey="id" |
| | | :column="tableColumn" |
| | | :tableData="tableData" |
| | | :tableLoading="tableLoading" |
| | | height="400" |
| | | > |
| | | <!-- <div style="margin-bottom: 10px;text-align: right">--> |
| | | <!-- <el-button type="danger" plain @click="handleDelete">删除</el-button>--> |
| | | <!-- </div>--> |
| | | <PIMTable rowKey="id" |
| | | :column="tableColumn" |
| | | :tableData="tableData" |
| | | :tableLoading="tableLoading" |
| | | height="400"> |
| | | <template #slot="{ row }"> |
| | | <el-input v-model="row.testValue" clearable/> |
| | | <el-input v-model="row.testValue" |
| | | clearable /> |
| | | </template> |
| | | </PIMTable> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button type="primary" @click="submitForm">确认</el-button> |
| | | <el-button type="primary" |
| | | @click="submitForm">确认</el-button> |
| | | <el-button @click="closeDia">取消</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | <!-- 产品选择对话框 --> |
| | | <ProductSelectDialog v-model="productSelectDialogVisible" |
| | | :single="true" |
| | | @confirm="handleProductSelect" /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import {ref, reactive, toRefs, getCurrentInstance, nextTick} from "vue"; |
| | | import {getOptions} from "@/api/procurementManagement/procurementLedger.js"; |
| | | import {modelList, productTreeList} from "@/api/basicData/product.js"; |
| | | import {qualityInspectAdd, qualityInspectUpdate} from "@/api/qualityManagement/rawMaterialInspection.js"; |
| | | import {qualityInspectParamDel, qualityInspectParamInfo} from "@/api/qualityManagement/qualityInspectParam.js"; |
| | | import {qualityInspectDetailByProductId, getQualityTestStandardParamByTestStandardId} from "@/api/qualityManagement/metricMaintenance.js"; |
| | | import { |
| | | ref, |
| | | reactive, |
| | | toRefs, |
| | | computed, |
| | | getCurrentInstance, |
| | | nextTick, |
| | | } from "vue"; |
| | | import { getOptions } from "@/api/procurementManagement/procurementLedger.js"; |
| | | import { modelList, productTreeList } from "@/api/basicData/product.js"; |
| | | import { |
| | | qualityInspectAdd, |
| | | qualityInspectUpdate, |
| | | } from "@/api/qualityManagement/rawMaterialInspection.js"; |
| | | import { |
| | | qualityInspectParamDel, |
| | | qualityInspectParamInfo, |
| | | } from "@/api/qualityManagement/qualityInspectParam.js"; |
| | | import { |
| | | qualityInspectDetailByProductId, |
| | | getQualityTestStandardParamByTestStandardId, |
| | | } from "@/api/qualityManagement/metricMaintenance.js"; |
| | | import { userListNoPage } from "@/api/system/user.js"; |
| | | import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue"; |
| | | |
| | | const {proxy} = getCurrentInstance() |
| | | const emit = defineEmits(['close']) |
| | | const { proxy } = getCurrentInstance(); |
| | | const emit = defineEmits(["close"]); |
| | | |
| | | const dialogFormVisible = ref(false); |
| | | const operationType = ref('') |
| | | const data = reactive({ |
| | | form: { |
| | | checkTime: "", |
| | | supplier: "", |
| | | checkName: "", |
| | | productName: "", |
| | | productId: "", |
| | | productModelId: "", |
| | | model: "", |
| | | testStandardId: "", |
| | | unit: "", |
| | | quantity: "", |
| | | checkCompany: "", |
| | | checkResult: "", |
| | | }, |
| | | rules: { |
| | | checkTime: [{required: true, message: "请输入", trigger: "blur"},], |
| | | supplier: [{required: true, message: "请输入", trigger: "blur"}], |
| | | checkName: [{required: false, message: "请输入", trigger: "blur"}], |
| | | productId: [{required: true, message: "请输入", trigger: "blur"}], |
| | | productModelId: [{required: true, message: "请选择产品型号", trigger: "change"}], |
| | | testStandardId: [{required: false, message: "请选择指标", trigger: "change"}], |
| | | unit: [{required: false, message: "请输入", trigger: "blur"}], |
| | | quantity: [{required: true, message: "请输入", trigger: "blur"}], |
| | | checkCompany: [{required: false, message: "请输入", trigger: "blur"}], |
| | | checkResult: [{required: true, message: "请选择检测结果", trigger: "change"}], |
| | | }, |
| | | }); |
| | | const tableColumn = ref([ |
| | | { |
| | | label: "指标", |
| | | prop: "parameterItem", |
| | | }, |
| | | { |
| | | label: "单位", |
| | | prop: "unit", |
| | | }, |
| | | { |
| | | label: "标准值", |
| | | prop: "standardValue", |
| | | }, |
| | | { |
| | | label: "内控值", |
| | | prop: "controlValue", |
| | | }, |
| | | { |
| | | label: "检验值", |
| | | prop: "testValue", |
| | | dataType: 'slot', |
| | | slot: 'slot', |
| | | }, |
| | | ]); |
| | | const tableData = ref([]); |
| | | const tableLoading = ref(false); |
| | | |
| | | const {form, rules} = toRefs(data); |
| | | const supplierList = ref([]); |
| | | const productOptions = ref([]); |
| | | const currentProductId = ref(0); |
| | | const testStandardOptions = ref([]); // 指标选择下拉框数据 |
| | | const modelOptions = ref([]); |
| | | |
| | | // 打开弹框 |
| | | const openDialog = async (type, row) => { |
| | | operationType.value = type; |
| | | getOptions().then((res) => { |
| | | supplierList.value = res.data; |
| | | const dialogFormVisible = ref(false); |
| | | const operationType = ref(""); |
| | | const data = reactive({ |
| | | form: { |
| | | checkTime: "", |
| | | supplier: "", |
| | | checkName: "", |
| | | productName: "", |
| | | productId: "", |
| | | productModelId: "", |
| | | model: "", |
| | | testStandardId: "", |
| | | unit: "", |
| | | quantity: "", |
| | | checkCompany: "", |
| | | checkResult: "", |
| | | inspectNature: "", |
| | | sampleCode: "", |
| | | sampleState: "", |
| | | licensePlateNumber: "", |
| | | sampleTime: "", |
| | | }, |
| | | rules: { |
| | | checkTime: [{ required: false, message: "请输入", trigger: "blur" }], |
| | | supplier: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | checkName: [{ required: false, message: "请输入", trigger: "blur" }], |
| | | productId: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | productModelId: [ |
| | | { required: true, message: "请选择产品型号", trigger: "change" }, |
| | | ], |
| | | testStandardId: [ |
| | | { required: false, message: "请选择指标", trigger: "change" }, |
| | | ], |
| | | unit: [{ required: false, message: "请输入", trigger: "blur" }], |
| | | // quantity: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | checkCompany: [{ required: false, message: "请输入", trigger: "blur" }], |
| | | checkResult: [ |
| | | { required: false, message: "请选择检测结果", trigger: "change" }, |
| | | ], |
| | | inspectNature: [ |
| | | { required: false, message: "请选择检测性质", trigger: "change" }, |
| | | ], |
| | | sampleState: [ |
| | | { required: false, message: "请选择试样状态", trigger: "change" }, |
| | | ], |
| | | sampleCode: [{ required: false, message: "请输入", trigger: "blur" }], |
| | | licensePlateNumber: [ |
| | | { required: false, message: "请输入", trigger: "blur" }, |
| | | ], |
| | | sampleTime: [{ required: false, message: "请输入", trigger: "blur" }], |
| | | }, |
| | | }); |
| | | // 先重置表单数据(保持字段完整,避免弹窗首次渲染时触发必填红框“闪一下”) |
| | | form.value = { |
| | | checkTime: "", |
| | | supplier: "", |
| | | checkName: "", |
| | | productName: "", |
| | | productId: "", |
| | | productModelId: "", |
| | | model: "", |
| | | testStandardId: "", |
| | | unit: "", |
| | | quantity: "", |
| | | checkCompany: "", |
| | | checkResult: "", |
| | | } |
| | | testStandardOptions.value = []; |
| | | tableData.value = []; |
| | | // 先确保产品树已加载,否则编辑时产品/规格型号无法反显 |
| | | await getProductOptions(); |
| | | if (operationType.value === 'edit') { |
| | | // 先保存 testStandardId,避免被清空 |
| | | const savedTestStandardId = row.testStandardId; |
| | | form.value = {...row} |
| | | currentProductId.value = row.productId || 0 |
| | | // 关键:编辑时加载规格型号下拉选项,才能反显 productModelId |
| | | if (currentProductId.value) { |
| | | try { |
| | | const res = await modelList({ id: currentProductId.value }); |
| | | modelOptions.value = res || []; |
| | | // 同步回填 model / unit(有些接口返回的 row 里可能没带全) |
| | | if (form.value.productModelId) { |
| | | handleChangeModel(form.value.productModelId); |
| | | } |
| | | } catch (e) { |
| | | console.error("加载规格型号失败", e); |
| | | modelOptions.value = []; |
| | | } |
| | | } |
| | | // 编辑模式下,先加载指标选项,然后加载参数列表 |
| | | if (currentProductId.value) { |
| | | // 先加载指标选项 |
| | | let params = { |
| | | productId: currentProductId.value, |
| | | inspectType: 0 |
| | | } |
| | | qualityInspectDetailByProductId(params).then(res => { |
| | | testStandardOptions.value = res.data || []; |
| | | // 使用 nextTick 和 setTimeout 确保选项已经渲染到 DOM |
| | | nextTick(() => { |
| | | setTimeout(() => { |
| | | // 如果编辑数据中有 testStandardId,则设置并加载对应的参数 |
| | | if (savedTestStandardId) { |
| | | // 确保类型匹配(item.id 可能是数字或字符串) |
| | | const matchedOption = testStandardOptions.value.find(item => |
| | | item.id == savedTestStandardId || String(item.id) === String(savedTestStandardId) |
| | | ); |
| | | if (matchedOption) { |
| | | // 确保使用匹配项的 id(保持类型一致) |
| | | form.value.testStandardId = matchedOption.id; |
| | | // 编辑保留原检验值,直接拉取原参数数据 |
| | | getQualityInspectParamList(row.id); |
| | | } else { |
| | | // 如果找不到匹配项,尝试直接使用原值 |
| | | console.warn('未找到匹配的指标选项,testStandardId:', savedTestStandardId, '可用选项:', testStandardOptions.value); |
| | | form.value.testStandardId = savedTestStandardId; |
| | | getQualityInspectParamList(row.id); |
| | | } |
| | | } else { |
| | | // 否则使用旧的逻辑 |
| | | getQualityInspectParamList(row.id); |
| | | } |
| | | }, 100); |
| | | }); |
| | | }); |
| | | } else { |
| | | getQualityInspectParamList(row.id); |
| | | } |
| | | } |
| | | // 最后再打开弹窗,并清理校验态,避免必填提示闪烁 |
| | | dialogFormVisible.value = true; |
| | | nextTick(() => { |
| | | proxy.$refs?.formRef?.clearValidate?.(); |
| | | const tableColumn = ref([ |
| | | { |
| | | label: "指标", |
| | | prop: "parameterItem", |
| | | }, |
| | | { |
| | | label: "单位", |
| | | prop: "unit", |
| | | }, |
| | | { |
| | | label: "标准值", |
| | | prop: "standardValue", |
| | | }, |
| | | { |
| | | label: "内控值", |
| | | prop: "controlValue", |
| | | }, |
| | | { |
| | | label: "检验值", |
| | | prop: "testValue", |
| | | dataType: "slot", |
| | | slot: "slot", |
| | | }, |
| | | ]); |
| | | const tableData = ref([]); |
| | | const tableLoading = ref(false); |
| | | |
| | | const { form, rules } = toRefs(data); |
| | | const supplierList = ref([]); |
| | | const productOptions = ref([]); |
| | | const currentProductId = ref(0); |
| | | const testStandardOptions = ref([]); // 指标选择下拉框数据 |
| | | const modelOptions = ref([]); |
| | | const userList = ref([]); // 检验员下拉列表 |
| | | const productSelectDialogVisible = ref(false); |
| | | |
| | | // 编辑时:productMainId 或 purchaseLedgerId 任一有值则供应商、数量置灰 |
| | | const supplierQuantityDisabled = computed(() => { |
| | | const v = form.value || {}; |
| | | return !!(v.productMainId != null || v.purchaseLedgerId != null); |
| | | }); |
| | | } |
| | | const getProductOptions = () => { |
| | | return productTreeList().then((res) => { |
| | | productOptions.value = convertIdToValue(res); |
| | | return productOptions.value; |
| | | }); |
| | | }; |
| | | const getModels = (value) => { |
| | | form.value.productModelId = undefined; |
| | | form.value.unit = undefined; |
| | | modelOptions.value = []; |
| | | currentProductId.value = value |
| | | form.value.productName = findNodeById(productOptions.value, value); |
| | | modelList({ id: value }).then((res) => { |
| | | modelOptions.value = res; |
| | | }) |
| | | if (currentProductId.value) { |
| | | getList(); |
| | | } |
| | | }; |
| | | |
| | | const handleChangeModel = (value) => { |
| | | form.value.model = modelOptions.value.find(item => item.id == value)?.model || ''; |
| | | form.value.unit = modelOptions.value.find(item => item.id == value)?.unit || ''; |
| | | } |
| | | // 打开弹框 |
| | | const openDialog = async (type, row) => { |
| | | operationType.value = type; |
| | | getOptions().then(res => { |
| | | supplierList.value = res.data; |
| | | }); |
| | | |
| | | const findNodeById = (nodes, productId) => { |
| | | for (let i = 0; i < nodes.length; i++) { |
| | | if (nodes[i].value === productId) { |
| | | return nodes[i].label; // 找到节点,返回该节点 |
| | | try { |
| | | const userRes = await userListNoPage(); |
| | | userList.value = userRes.data || []; |
| | | } catch (e) { |
| | | console.error("加载检验员列表失败", e); |
| | | userList.value = []; |
| | | } |
| | | if (nodes[i].children && nodes[i].children.length > 0) { |
| | | const foundNode = findNodeById(nodes[i].children, productId); |
| | | if (foundNode) { |
| | | return foundNode; // 在子节点中找到,返回该节点 |
| | | } |
| | | } |
| | | } |
| | | return null; // 没有找到节点,返回null |
| | | }; |
| | | |
| | | function convertIdToValue(data) { |
| | | return data.map((item) => { |
| | | const {id, children, ...rest} = item; |
| | | const newItem = { |
| | | ...rest, |
| | | value: id, // 将 id 改为 value |
| | | // 先重置表单数据(保持字段完整,避免弹窗首次渲染时触发必填红框“闪一下”) |
| | | form.value = { |
| | | checkTime: "", |
| | | supplier: "", |
| | | productName: "", |
| | | productId: "", |
| | | productModelId: "", |
| | | model: "", |
| | | testStandardId: "", |
| | | unit: "", |
| | | quantity: "", |
| | | checkCompany: "", |
| | | checkResult: "", |
| | | }; |
| | | if (children && children.length > 0) { |
| | | newItem.children = convertIdToValue(children); |
| | | } |
| | | |
| | | return newItem; |
| | | }); |
| | | } |
| | | |
| | | // 提交产品表单 |
| | | const submitForm = () => { |
| | | proxy.$refs.formRef.validate(valid => { |
| | | if (valid) { |
| | | form.value.inspectType = 0 |
| | | if (operationType.value === "add") { |
| | | tableData.value.forEach((item) => { |
| | | delete item.id |
| | | }) |
| | | } |
| | | const data = {...form.value, qualityInspectParams: tableData.value} |
| | | if (operationType.value === "add") { |
| | | qualityInspectAdd(data).then(res => { |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | | closeDia(); |
| | | }) |
| | | } else { |
| | | qualityInspectUpdate(data).then(res => { |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | | closeDia(); |
| | | }) |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | |
| | | const getList = () => { |
| | | if (!currentProductId.value) { |
| | | testStandardOptions.value = []; |
| | | tableData.value = []; |
| | | return; |
| | | } |
| | | let params = { |
| | | productId: currentProductId.value, |
| | | inspectType: 0 |
| | | } |
| | | qualityInspectDetailByProductId(params).then(res => { |
| | | // 保存下拉框选项数据 |
| | | testStandardOptions.value = res.data || []; |
| | | // 清空表格数据,等待用户选择指标 |
| | | tableData.value = []; |
| | | // 清空指标选择 |
| | | form.value.testStandardId = ''; |
| | | }) |
| | | } |
| | | // 先确保产品树已加载,否则编辑时产品/规格型号无法反显 |
| | | await getProductOptions(); |
| | | if (operationType.value === "edit") { |
| | | // 先保存 testStandardId,避免被清空 |
| | | const savedTestStandardId = row.testStandardId; |
| | | form.value = { ...row }; |
| | | currentProductId.value = row.productId || 0; |
| | | // 关键:编辑时加载规格型号下拉选项,才能反显 productModelId |
| | | if (currentProductId.value) { |
| | | try { |
| | | const res = await modelList({ id: currentProductId.value }); |
| | | modelOptions.value = res || []; |
| | | // 同步回填 model / unit(有些接口返回的 row 里可能没带全) |
| | | if (form.value.productModelId) { |
| | | // handleChangeModel(form.value.productModelId); |
| | | } |
| | | } catch (e) { |
| | | console.error("加载规格型号失败", e); |
| | | modelOptions.value = []; |
| | | } |
| | | } |
| | | // 编辑模式下,先加载指标选项,然后加载参数列表 |
| | | if (currentProductId.value) { |
| | | // 先加载指标选项 |
| | | let params = { |
| | | productId: currentProductId.value, |
| | | inspectType: 0, |
| | | }; |
| | | qualityInspectDetailByProductId(params).then(res => { |
| | | testStandardOptions.value = res.data || []; |
| | | // 使用 nextTick 和 setTimeout 确保选项已经渲染到 DOM |
| | | nextTick(() => { |
| | | setTimeout(() => { |
| | | // 如果编辑数据中有 testStandardId,则设置并加载对应的参数 |
| | | if (savedTestStandardId) { |
| | | // 确保类型匹配(item.id 可能是数字或字符串) |
| | | const matchedOption = testStandardOptions.value.find( |
| | | item => |
| | | item.id == savedTestStandardId || |
| | | String(item.id) === String(savedTestStandardId) |
| | | ); |
| | | if (matchedOption) { |
| | | // 确保使用匹配项的 id(保持类型一致) |
| | | form.value.testStandardId = matchedOption.id; |
| | | // 编辑保留原检验值,直接拉取原参数数据 |
| | | getQualityInspectParamList(row.id); |
| | | } else { |
| | | // 如果找不到匹配项,尝试直接使用原值 |
| | | console.warn( |
| | | "未找到匹配的指标选项,testStandardId:", |
| | | savedTestStandardId, |
| | | "可用选项:", |
| | | testStandardOptions.value |
| | | ); |
| | | form.value.testStandardId = savedTestStandardId; |
| | | getQualityInspectParamList(row.id); |
| | | } |
| | | } else { |
| | | // 否则使用旧的逻辑 |
| | | getQualityInspectParamList(row.id); |
| | | } |
| | | }, 100); |
| | | }); |
| | | }); |
| | | } else { |
| | | getQualityInspectParamList(row.id); |
| | | } |
| | | } |
| | | // 最后再打开弹窗,并清理校验态,避免必填提示闪烁 |
| | | dialogFormVisible.value = true; |
| | | nextTick(() => { |
| | | proxy.$refs?.formRef?.clearValidate?.(); |
| | | }); |
| | | }; |
| | | const getProductOptions = () => { |
| | | return productTreeList().then(res => { |
| | | productOptions.value = convertIdToValue(res); |
| | | return productOptions.value; |
| | | }); |
| | | }; |
| | | const getModels = value => { |
| | | form.value.productModelId = undefined; |
| | | form.value.unit = undefined; |
| | | modelOptions.value = []; |
| | | currentProductId.value = value; |
| | | form.value.productName = findNodeById(productOptions.value, value); |
| | | modelList({ id: value }).then(res => { |
| | | modelOptions.value = res; |
| | | }); |
| | | if (currentProductId.value) { |
| | | getList(); |
| | | } |
| | | }; |
| | | |
| | | // 指标选择变化处理 |
| | | const handleTestStandardChange = (testStandardId) => { |
| | | if (!testStandardId) { |
| | | tableData.value = []; |
| | | return; |
| | | } |
| | | tableLoading.value = true; |
| | | getQualityTestStandardParamByTestStandardId(testStandardId).then(res => { |
| | | tableData.value = res.data || []; |
| | | }).catch(error => { |
| | | console.error('获取标准参数失败:', error); |
| | | tableData.value = []; |
| | | }).finally(() => { |
| | | tableLoading.value = false; |
| | | }) |
| | | } |
| | | const handleChangeModel = value => { |
| | | form.value.model = |
| | | modelOptions.value.find(item => item.id == value)?.model || ""; |
| | | form.value.unit = |
| | | modelOptions.value.find(item => item.id == value)?.unit || ""; |
| | | }; |
| | | |
| | | const getQualityInspectParamList = (id) => { |
| | | qualityInspectParamInfo(id).then(res => { |
| | | tableData.value = res.data; |
| | | }) |
| | | } |
| | | // 关闭弹框 |
| | | const closeDia = () => { |
| | | proxy.resetForm("formRef"); |
| | | tableData.value = []; |
| | | testStandardOptions.value = []; |
| | | form.value.testStandardId = ''; |
| | | dialogFormVisible.value = false; |
| | | emit('close') |
| | | }; |
| | | defineExpose({ |
| | | openDialog, |
| | | }); |
| | | const findNodeById = (nodes, productId) => { |
| | | for (let i = 0; i < nodes.length; i++) { |
| | | if (nodes[i].value === productId) { |
| | | return nodes[i].label; // 找到节点,返回该节点 |
| | | } |
| | | if (nodes[i].children && nodes[i].children.length > 0) { |
| | | const foundNode = findNodeById(nodes[i].children, productId); |
| | | if (foundNode) { |
| | | return foundNode; // 在子节点中找到,返回该节点 |
| | | } |
| | | } |
| | | } |
| | | return null; // 没有找到节点,返回null |
| | | }; |
| | | |
| | | function convertIdToValue(data) { |
| | | return data.map(item => { |
| | | const { id, children, ...rest } = item; |
| | | const newItem = { |
| | | ...rest, |
| | | value: id, // 将 id 改为 value |
| | | }; |
| | | if (children && children.length > 0) { |
| | | newItem.children = convertIdToValue(children); |
| | | } |
| | | |
| | | return newItem; |
| | | }); |
| | | } |
| | | |
| | | // 提交产品表单 |
| | | const submitForm = () => { |
| | | proxy.$refs.formRef.validate(valid => { |
| | | if (valid) { |
| | | form.value.inspectType = 0; |
| | | if (operationType.value === "add") { |
| | | tableData.value.forEach(item => { |
| | | delete item.id; |
| | | }); |
| | | } |
| | | const data = { ...form.value, qualityInspectParams: tableData.value }; |
| | | if (operationType.value === "add") { |
| | | qualityInspectAdd(data).then(res => { |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | | closeDia(); |
| | | }); |
| | | } else { |
| | | qualityInspectUpdate(data).then(res => { |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | | closeDia(); |
| | | }); |
| | | } |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | const getList = () => { |
| | | if (!currentProductId.value) { |
| | | testStandardOptions.value = []; |
| | | tableData.value = []; |
| | | return; |
| | | } |
| | | let params = { |
| | | productId: currentProductId.value, |
| | | inspectType: 0, |
| | | }; |
| | | qualityInspectDetailByProductId(params).then(res => { |
| | | // 保存下拉框选项数据 |
| | | testStandardOptions.value = res.data || []; |
| | | // 清空表格数据,等待用户选择指标 |
| | | tableData.value = []; |
| | | // 清空指标选择 |
| | | form.value.testStandardId = ""; |
| | | }); |
| | | }; |
| | | |
| | | // 指标选择变化处理 |
| | | const handleTestStandardChange = testStandardId => { |
| | | if (!testStandardId) { |
| | | tableData.value = []; |
| | | return; |
| | | } |
| | | tableLoading.value = true; |
| | | getQualityTestStandardParamByTestStandardId(testStandardId) |
| | | .then(res => { |
| | | tableData.value = res.data || []; |
| | | }) |
| | | .catch(error => { |
| | | console.error("获取标准参数失败:", error); |
| | | tableData.value = []; |
| | | }) |
| | | .finally(() => { |
| | | tableLoading.value = false; |
| | | }); |
| | | }; |
| | | |
| | | const getQualityInspectParamList = id => { |
| | | qualityInspectParamInfo(id).then(res => { |
| | | tableData.value = res.data; |
| | | }); |
| | | }; |
| | | |
| | | // 打开产品选择对话框 |
| | | const openProductSelectDialog = () => { |
| | | productSelectDialogVisible.value = true; |
| | | }; |
| | | |
| | | // 处理产品选择 |
| | | const handleProductSelect = products => { |
| | | if (products && products.length > 0) { |
| | | const product = products[0]; |
| | | form.value.productId = product.id; |
| | | form.value.productName = product.productName; |
| | | form.value.productModelId = product.id; |
| | | form.value.model = product.model; |
| | | form.value.unit = product.unit; |
| | | currentProductId.value = product.id; |
| | | // 加载指标选项 |
| | | getList(); |
| | | } |
| | | }; |
| | | |
| | | // 清空产品选择 |
| | | const clearProductSelection = () => { |
| | | form.value.productId = ""; |
| | | form.value.productName = ""; |
| | | form.value.productModelId = ""; |
| | | form.value.model = ""; |
| | | form.value.unit = ""; |
| | | currentProductId.value = 0; |
| | | testStandardOptions.value = []; |
| | | tableData.value = []; |
| | | form.value.testStandardId = ""; |
| | | }; |
| | | // 关闭弹框 |
| | | const closeDia = () => { |
| | | proxy.resetForm("formRef"); |
| | | tableData.value = []; |
| | | testStandardOptions.value = []; |
| | | form.value.testStandardId = ""; |
| | | dialogFormVisible.value = false; |
| | | emit("close"); |
| | | }; |
| | | defineExpose({ |
| | | openDialog, |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .inspection-form { |
| | | background-color: #f9f9f9; |
| | | border-radius: 8px; |
| | | padding: 20px; |
| | | margin-bottom: 20px; |
| | | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
| | | } |
| | | |
| | | </style> |
| | | .product-select-btn { |
| | | width: 100%; |
| | | text-align: left; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | .product-select-btn:hover { |
| | | box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3); |
| | | } |
| | | |
| | | /* 增加表单项间距 */ |
| | | .el-form-item { |
| | | margin-bottom: 15px; |
| | | } |
| | | |
| | | /* 输入框和选择器的悬停效果 */ |
| | | :deep(.el-input__wrapper) { |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | :deep(.el-input__wrapper:hover) { |
| | | box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2) !important; |
| | | } |
| | | |
| | | :deep(.el-select) { |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | :deep(.el-select:hover .el-input__wrapper) { |
| | | box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2) !important; |
| | | } |
| | | |
| | | /* 日期选择器的悬停效果 */ |
| | | :deep(.el-date-picker) { |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | :deep(.el-date-picker:hover .el-input__wrapper) { |
| | | box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2) !important; |
| | | } |
| | | |
| | | /* 优化表格样式 */ |
| | | :deep(.el-table) { |
| | | border-radius: 8px; |
| | | overflow: hidden; |
| | | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | :deep(.el-table:hover) { |
| | | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
| | | } |
| | | |
| | | :deep(.el-table th) { |
| | | background-color: #f5f7fa; |
| | | font-weight: 600; |
| | | } |
| | | |
| | | :deep(.el-table tr:hover) { |
| | | background-color: #f0f9ff; |
| | | } |
| | | |
| | | /* 表格输入框样式 */ |
| | | :deep(.el-table .el-input__wrapper) { |
| | | box-shadow: none !important; |
| | | } |
| | | |
| | | :deep(.el-table .el-input__wrapper:hover) { |
| | | box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2) !important; |
| | | } |
| | | |
| | | /* 优化对话框底部按钮 */ |
| | | .dialog-footer { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | gap: 10px; |
| | | margin-top: 20px; |
| | | } |
| | | |
| | | .dialog-footer .el-button { |
| | | transition: all 0.3s ease; |
| | | padding: 8px 20px; |
| | | border-radius: 4px; |
| | | } |
| | | |
| | | .dialog-footer .el-button:hover { |
| | | transform: translateY(-1px); |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); |
| | | } |
| | | |
| | | .dialog-footer .el-button--primary:hover { |
| | | box-shadow: 0 2px 8px rgba(0, 122, 255, 0.4); |
| | | } |
| | | |
| | | /* 表单验证状态样式 */ |
| | | :deep(.el-form-item__error) { |
| | | font-size: 12px; |
| | | color: #f56c6c; |
| | | margin-top: 4px; |
| | | } |
| | | |
| | | :deep(.el-form-item.is-error .el-input__wrapper) { |
| | | box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2) !important; |
| | | } |
| | | |
| | | :deep(.el-form-item.is-success .el-input__wrapper) { |
| | | box-shadow: 0 0 0 2px rgba(103, 194, 58, 0.2) !important; |
| | | } |
| | | |
| | | /* 响应式设计 */ |
| | | @media screen and (max-width: 1200px) { |
| | | .el-col { |
| | | :deep(.el-col) { |
| | | &[class*="el-col-8"] { |
| | | flex: 0 0 50%; |
| | | max-width: 50%; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | @media screen and (max-width: 768px) { |
| | | .el-col { |
| | | :deep(.el-col) { |
| | | &[class*="el-col-8"] { |
| | | flex: 0 0 100%; |
| | | max-width: 100%; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .inspection-form { |
| | | padding: 15px; |
| | | } |
| | | |
| | | .el-form { |
| | | label-width: 80px !important; |
| | | } |
| | | |
| | | .dialog-footer { |
| | | flex-direction: column; |
| | | align-items: stretch; |
| | | } |
| | | |
| | | .dialog-footer .el-button { |
| | | width: 100%; |
| | | } |
| | | } |
| | | </style> |