| | |
| | | <div> |
| | | <el-dialog |
| | | v-model="dialogFormVisible" |
| | | :title="operationType === 'add' ? '新增原料' : '编辑原料'" |
| | | :title="operationType === 'add' ? '新增原料' : operationType === 'view' ? '原料详情' : '编辑原料'" |
| | | width="70%" |
| | | @close="closeDia" |
| | | > |
| | | <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef"> |
| | | <el-form |
| | | v-if="operationType !== 'view'" |
| | | :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="productId"> |
| | |
| | | @change="getModels" |
| | | :data="productOptions" |
| | | :render-after-expand="false" |
| | | :disabled="operationType === 'edit'" |
| | | :disabled="operationType === 'edit' || operationType === 'view'" |
| | | 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'" |
| | | :disabled="operationType === 'edit' || operationType === 'view'" |
| | | filterable readonly @change="handleChangeModel"> |
| | | <el-option v-for="item in modelOptions" :key="item.id" :label="item.model" :value="item.id"/> |
| | | </el-select> |
| | |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="批号:" prop="batchNo"> |
| | | <el-input style="width: 100%" v-model="form.batchNo" placeholder="请输入" clearable/> |
| | | <el-input |
| | | style="width: 100%" |
| | | v-model="form.batchNo" |
| | | placeholder="请输入" |
| | | clearable |
| | | :disabled="operationType === 'view'" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="检验类型:" prop="checkType"> |
| | | <el-select v-model="form.checkType"> |
| | | <el-select v-model="form.checkType" :disabled="operationType === 'view'"> |
| | | <el-option label="入厂检" :value="0"/> |
| | | <el-option label="车间检" :value="1"/> |
| | | <el-option label="出厂检" :value="2"/> |
| | |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="检测结果:" prop="checkResult"> |
| | | <el-select v-model="form.checkResult"> |
| | | <el-select v-model="form.checkResult" :disabled="operationType === 'view'"> |
| | | <el-option label="合格" :value="1"/> |
| | | <el-option label="不合格" :value="0"/> |
| | | </el-select> |
| | |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="检验员:" prop="checkUserName"> |
| | | <el-select v-model="form.checkUserName" placeholder="请选择" clearable filterable style="width: 100%"> |
| | | <el-select |
| | | v-model="form.checkUserName" |
| | | placeholder="请选择" |
| | | clearable |
| | | filterable |
| | | style="width: 100%" |
| | | :disabled="operationType === 'view'" |
| | | > |
| | | <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName" |
| | | :value="item.nickName"/> |
| | | </el-select> |
| | |
| | | format="YYYY-MM-DD" |
| | | clearable |
| | | style="width: 100%" |
| | | :disabled="operationType === 'view'" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <el-descriptions |
| | | v-else |
| | | :column="2" |
| | | border |
| | | size="small" |
| | | style="margin-bottom: 12px;" |
| | | > |
| | | <el-descriptions-item label="产品名称">{{ viewProductName }}</el-descriptions-item> |
| | | <el-descriptions-item label="规格型号">{{ viewProductModel }}</el-descriptions-item> |
| | | <el-descriptions-item label="单位">{{ form.unit || '-' }}</el-descriptions-item> |
| | | <el-descriptions-item label="批号">{{ form.batchNo || '-' }}</el-descriptions-item> |
| | | <el-descriptions-item label="检验类型">{{ viewCheckType }}</el-descriptions-item> |
| | | <el-descriptions-item label="检测结果">{{ viewCheckResult }}</el-descriptions-item> |
| | | <el-descriptions-item label="检验员">{{ form.checkUserName || '-' }}</el-descriptions-item> |
| | | <el-descriptions-item label="检测日期">{{ form.checkTime || '-' }}</el-descriptions-item> |
| | | </el-descriptions> |
| | | <div style="margin-bottom: 10px"> |
| | | <el-button type="primary" @click="isShowItems = true">添加检测项目</el-button> |
| | | <el-button |
| | | v-if="operationType !== 'view'" |
| | | type="primary" |
| | | @click="isShowItems = true" |
| | | >添加检测项目</el-button> |
| | | </div> |
| | | <PIMTable |
| | | rowKey="id" |
| | |
| | | height="400" |
| | | > |
| | | <template #slot="{ row }"> |
| | | <el-input v-model="row.testValue" clearable/> |
| | | <span v-if="operationType === 'view'">{{ row.testValue }}</span> |
| | | <el-input |
| | | v-else |
| | | v-model="row.testValue" |
| | | clearable |
| | | /> |
| | | </template> |
| | | </PIMTable> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button type="primary" @click="submitForm">确认</el-button> |
| | | <el-button @click="closeDia">取消</el-button> |
| | | <el-button v-if="operationType !== 'view'" type="primary" @click="submitForm">确认</el-button> |
| | | <el-button @click="closeDia">{{ operationType === 'view' ? '关闭' : '取消' }}</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import {ref, reactive, toRefs, getCurrentInstance, nextTick} from "vue"; |
| | | import {ref, reactive, toRefs, getCurrentInstance, nextTick, computed} from "vue"; |
| | | import {modelList, productTreeList} from "@/api/basicData/product.js"; |
| | | import {qualityInspectParamInfo} from "@/api/qualityManagement/qualityInspectParam.js"; |
| | | import {qualityInspectDetailByProductId} from "@/api/qualityManagement/metricMaintenance.js"; |
| | |
| | | name: '删除', |
| | | type: 'text', |
| | | clickFun: (row) => handleDelete(row.id), |
| | | disabled: () => operationType.value === 'view', |
| | | } |
| | | ] |
| | | } |
| | |
| | | const currentProductId = ref(0); |
| | | const modelOptions = ref([]); |
| | | |
| | | const getTodayStr = () => { |
| | | const now = new Date(); |
| | | const y = now.getFullYear(); |
| | | const m = String(now.getMonth() + 1).padStart(2, "0"); |
| | | const d = String(now.getDate()).padStart(2, "0"); |
| | | return `${y}-${m}-${d}`; |
| | | }; |
| | | |
| | | // 打开弹框 |
| | | const openDialog = async (type, row) => { |
| | | operationType.value = type; |
| | |
| | | }) |
| | | // 先重置表单数据(保持字段完整,避免弹窗首次渲染时触发必填红框“闪一下”) |
| | | form.value = { |
| | | checkTime: "", |
| | | checkTime: getTodayStr(), |
| | | supplier: "", |
| | | productName: "", |
| | | productId: "", |
| | |
| | | // 编辑模式下,先加载指标选项,然后加载参数列表 |
| | | if (currentProductId.value) { |
| | | |
| | | } else { |
| | | getQualityInspectParamList(row.id); |
| | | } |
| | | } |
| | | if (operationType.value === 'view') { |
| | | await fetchData(row.id); |
| | | currentProductId.value = row.productId || 0 |
| | | if (currentProductId.value) { |
| | | try { |
| | | const res = await modelList({id: currentProductId.value}); |
| | | modelOptions.value = res || []; |
| | | if (form.value.productModelId) { |
| | | handleChangeModel(form.value.productModelId); |
| | | } |
| | | } catch (e) { |
| | | console.error("加载规格型号失败", e); |
| | | modelOptions.value = []; |
| | | } |
| | | } |
| | | if (currentProductId.value) { |
| | | // 加载参数列表,保证“详情”也能展示化验值/标准值等 |
| | | } else { |
| | | getQualityInspectParamList(row.id); |
| | | } |
| | |
| | | |
| | | const findNodeById = (nodes, productId) => { |
| | | for (let i = 0; i < nodes.length; i++) { |
| | | if (nodes[i].value === productId) { |
| | | if (String(nodes[i].value) === String(productId)) { |
| | | return nodes[i].label; // 找到节点,返回该节点 |
| | | } |
| | | if (nodes[i].children && nodes[i].children.length > 0) { |
| | |
| | | } |
| | | return null; // 没有找到节点,返回null |
| | | }; |
| | | |
| | | // 详情模式展示字段(不使用表单控件) |
| | | const viewProductName = computed(() => { |
| | | const id = form.value?.productId |
| | | const label = id ? findNodeById(productOptions.value || [], id) : null |
| | | return label || id || '-' |
| | | }) |
| | | |
| | | const viewProductModel = computed(() => { |
| | | const modelId = form.value?.productModelId |
| | | const matched = (modelOptions.value || []).find((x) => String(x.id) === String(modelId)) |
| | | return matched?.model || modelId || '-' |
| | | }) |
| | | |
| | | const viewCheckType = computed(() => { |
| | | const t = form.value?.checkType |
| | | if (t === 0 || t === '0') return '入厂检' |
| | | if (t === 1 || t === '1') return '车间检' |
| | | if (t === 2 || t === '2') return '出厂检' |
| | | return '-' |
| | | }) |
| | | |
| | | const viewCheckResult = computed(() => { |
| | | const r = form.value?.checkResult |
| | | if (r === 1 || r === '1') return '合格' |
| | | if (r === 0 || r === '0') return '不合格' |
| | | return '-' |
| | | }) |
| | | |
| | | function convertIdToValue(data) { |
| | | return data.map((item) => { |
| | |
| | | |
| | | // 提交产品表单 |
| | | const submitForm = () => { |
| | | if (operationType.value === 'view') return; |
| | | proxy.$refs.formRef.validate(valid => { |
| | | if (valid) { |
| | | const data = {...form.value, qualityInspectItem: tableData.value} |
| | |
| | | }; |
| | | |
| | | const handleDelete = (id) => { |
| | | if (operationType.value === 'view') return; |
| | | tableData.value = tableData.value.filter(item => item.id !== id); |
| | | } |
| | | |