| | |
| | | <div class="app-container"> |
| | | <PageHeader content="产品结构详情"> |
| | | <template #right-button> |
| | | <el-button v-if="!dataValue.isEdit && !isOrderPage" type="primary" @click="dataValue.isEdit = true">编辑 |
| | | <el-button v-if="!dataValue.isEdit && !isOrderPage" |
| | | type="primary" |
| | | @click="dataValue.isEdit = true">编辑 |
| | | </el-button> |
| | | <el-button v-if="dataValue.isEdit && !isOrderPage" type="primary" @click="cancelEdit">取消 |
| | | <el-button v-if="dataValue.isEdit && !isOrderPage" |
| | | type="primary" |
| | | @click="cancelEdit">取消 |
| | | </el-button> |
| | | <el-button v-if="!isOrderPage" type="primary" :loading="dataValue.loading" @click="submit" |
| | | <el-button v-if="!isOrderPage" |
| | | type="primary" |
| | | :loading="dataValue.loading" |
| | | @click="submit" |
| | | :disabled="!dataValue.isEdit">确认 |
| | | </el-button> |
| | | </template> |
| | | </PageHeader> |
| | | <el-table :data="tableData" border :preserve-expanded-content="false" :default-expand-all="true" |
| | | <el-table :data="tableData" |
| | | border |
| | | :preserve-expanded-content="false" |
| | | :default-expand-all="true" |
| | | style="width: 100%"> |
| | | <el-table-column type="expand"> |
| | | <template #default="props"> |
| | | <el-form ref="form" :model="dataValue"> |
| | | <el-table :data="dataValue.dataList" row-key="tempId" default-expand-all |
| | | :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" style="width: 100%"> |
| | | <el-table-column prop="productName" label="产品" /> |
| | | <el-table-column prop="model" label="规格"> |
| | | <el-form ref="form" |
| | | :model="dataValue"> |
| | | <el-table :data="dataValue.dataList" |
| | | row-key="tempId" |
| | | default-expand-all |
| | | :tree-props="{children: 'children', hasChildren: 'hasChildren'}" |
| | | style="width: 100%"> |
| | | <el-table-column prop="productName" |
| | | label="产品" /> |
| | | <el-table-column prop="model" |
| | | label="规格"> |
| | | <template #default="{ row, $index }"> |
| | | <el-form-item v-if="dataValue.isEdit" |
| | | :rules="[{ required: true, message: '请选择规格', trigger: ['blur', 'change'] }]" style="margin: 0"> |
| | | <el-select v-model="row.model" placeholder="请选择规格" clearable |
| | | :rules="[{ required: true, message: '请选择规格', trigger: ['blur','change'] }]" |
| | | style="margin: 0"> |
| | | <el-select v-model="row.model" |
| | | placeholder="请选择规格" |
| | | clearable |
| | | :disabled="!dataValue.isEdit || dataValue.dataList.some(item => (item as any).tempId === row.tempId)" |
| | | style="width: 100%" @visible-change="(v) => { if (v) openDialog(row.tempId) }"> |
| | | <el-option v-if="row.model" :label="row.model" :value="row.model" /> |
| | | style="width: 100%" |
| | | @visible-change="(v) => { if (v) openDialog(row.tempId) }"> |
| | | <el-option v-if="row.model" |
| | | :label="row.model" |
| | | :value="row.model" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="processName" label="消耗工序"> |
| | | <el-table-column prop="processName" |
| | | label="消耗工序"> |
| | | <template #default="{ row, $index }"> |
| | | <el-form-item v-if="dataValue.isEdit" |
| | | :rules="dataValue.dataList.some(item => (item as any).tempId === row.tempId) ? [] : [{ required: true, message: '请选择消耗工序', trigger: 'change' }]" |
| | | style="margin: 0"> |
| | | <el-select v-model="row.processId" placeholder="请选择" filterable clearable style="width: 100%" |
| | | <el-select v-model="row.processId" |
| | | placeholder="请选择" |
| | | filterable |
| | | clearable |
| | | style="width: 100%" |
| | | :disabled="!dataValue.isEdit || dataValue.dataList.some(item => (item as any).tempId === row.tempId)"> |
| | | <el-option v-for="item in dataValue.processOptions" :key="item.id" :label="item.name" |
| | | <el-option v-for="item in dataValue.processOptions" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.id" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="unitQuantity" label="单位产出所需数量"> |
| | | <el-table-column prop="unitQuantity" |
| | | label="单位产出所需数量"> |
| | | <template #default="{ row, $index }"> |
| | | <el-form-item v-if="dataValue.isEdit" |
| | | :rules="[{ required: true, message: '请输入单位产出所需数量', trigger: ['blur', 'change'] }]" |
| | | style="margin: 0"> |
| | | <el-input-number v-model="row.unitQuantity" :min="0" :precision="2" :step="1" |
| | | controls-position="right" style="width: 100%" |
| | | <el-input-number v-model="row.unitQuantity" |
| | | :min="0" |
| | | :precision="2" |
| | | :step="1" |
| | | controls-position="right" |
| | | style="width: 100%" |
| | | :disabled="!dataValue.isEdit || dataValue.dataList.some(item => (item as any).tempId === row.tempId)" /> |
| | | </el-form-item> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column v-if="isOrderPage" prop="demandedQuantity" label="需求总量"> |
| | | <el-table-column v-if="isOrderPage" |
| | | prop="demandedQuantity" |
| | | label="需求总量"> |
| | | <template #default="{ row, $index }"> |
| | | <el-form-item v-if="dataValue.isEdit" |
| | | :rules="[{ required: true, message: '请输入需求总量', trigger: ['blur', 'change'] }]" style="margin: 0"> |
| | | <el-input-number v-model="row.demandedQuantity" :min="0" :precision="2" :step="1" |
| | | controls-position="right" style="width: 100%" |
| | | :rules="[{ required: true, message: '请输入需求总量', trigger: ['blur','change'] }]" |
| | | style="margin: 0"> |
| | | <el-input-number v-model="row.demandedQuantity" |
| | | :min="0" |
| | | :precision="2" |
| | | :step="1" |
| | | controls-position="right" |
| | | style="width: 100%" |
| | | :disabled="!dataValue.isEdit || dataValue.dataList.some(item => (item as any).tempId === row.tempId)" /> |
| | | </el-form-item> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="unit" label="单位"> |
| | | <el-table-column prop="unit" |
| | | label="单位"> |
| | | <template #default="{ row, $index }"> |
| | | <el-form-item v-if="dataValue.isEdit" |
| | | :rules="[{ required: true, message: '请输入单位', trigger: ['blur', 'change'] }]" style="margin: 0"> |
| | | <el-input v-model="row.unit" placeholder="请输入单位" clearable |
| | | :rules="[{ required: true, message: '请输入单位', trigger: ['blur','change'] }]" |
| | | style="margin: 0"> |
| | | <el-input v-model="row.unit" |
| | | placeholder="请输入单位" |
| | | clearable |
| | | :disabled="!dataValue.isEdit || dataValue.dataList.some(item => (item as any).tempId === row.tempId)" /> |
| | | </el-form-item> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" fixed="right" width="200"> |
| | | <el-table-column label="操作" |
| | | fixed="right" |
| | | width="200"> |
| | | <template #default="{ row, $index }"> |
| | | <el-button |
| | | v-if="dataValue.isEdit && !dataValue.dataList.some(item => (item as any).tempId === row.tempId)" |
| | | type="danger" text @click="removeItem(row.tempId)">删除 |
| | | <el-button v-if="dataValue.isEdit && !dataValue.dataList.some(item => (item as any).tempId === row.tempId)" |
| | | type="danger" |
| | | text |
| | | @click="removeItem(row.tempId)">删除 |
| | | </el-button> |
| | | <el-button v-if="dataValue.isEdit" type="primary" text @click="addItem2(row.tempId)">添加 |
| | | <el-button v-if="dataValue.isEdit" |
| | | type="primary" |
| | | text |
| | | @click="addItem2(row.tempId)">添加 |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | </el-form> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="BOM编号" prop="bomNo" /> |
| | | <el-table-column label="产品名称" prop="productName" /> |
| | | <el-table-column label="规格型号" prop="model" /> |
| | | <el-table-column label="BOM编号" |
| | | prop="bomNo" /> |
| | | <el-table-column label="产品名称" |
| | | prop="productName" /> |
| | | <el-table-column label="规格型号" |
| | | prop="model" /> |
| | | </el-table> |
| | | <product-select-dialog v-if="dataValue.showProductDialog" v-model:model-value="dataValue.showProductDialog" |
| | | <product-select-dialog v-if="dataValue.showProductDialog" |
| | | v-model:model-value="dataValue.showProductDialog" |
| | | @confirm="handleProduct" /> |
| | | </div> |
| | | </template> |
| | |
| | | isValid = false; |
| | | return; |
| | | } |
| | | if (!item.unit) { |
| | | ElMessage.error("请输入单位"); |
| | | isValid = false; |
| | | return; |
| | | } |
| | | // if (!item.unit) { |
| | | // ElMessage.error("请输入单位"); |
| | | // isValid = false; |
| | | // return; |
| | | // } |
| | | |
| | | // 递归校验子项 |
| | | if (item.children && item.children.length > 0) { |
| | |
| | | return false; |
| | | }; |
| | | |
| | | const getPropPath = (row, field) => { |
| | | // 为每个row生成唯一的路径 |
| | | // 使用row.id或索引作为唯一标识 |
| | | let path = "dataList"; |
| | | |
| | | // 简单实现:使用row的id或一个唯一标识 |
| | | const uniqueId = row.id || Math.floor(Math.random() * 10000); |
| | | path += `.${uniqueId}`; |
| | | |
| | | return path + `.${field}`; |
| | | }; |
| | | |
| | | const cancelEdit = () => { |
| | | dataValue.isEdit = false; |
| | | // dataValue.dataList = dataValue.dataList.filter(item => item.id !== undefined); |